All entries for Tuesday 26 February 2008

Skinning/Styling in Flex

Writing about web page http://www.adobe.com/devnet/flex/articles/flex_skins_08.html

S’funny that Adobe have a separate term for the whole styling of applications, which gives the first clue, that maybe they think about it in a different way.
Anyway skinning does seem to have progressed nicely since I last used Flash being a lot more stylesheet orientated, me likie.

To get rid of the nasty halo theme, is a lot simpler than in flash days. To tint the rollover/selection colours to something more to your taste, simply add this to the top of your stylesheet:

global {
themeColor: #767FA0;
}

and job done. Though I did google quite a bit before finding this and there were a lot more complicated ways of achieving similar probably giving more fine grain control.

Right for skinning the rest you can get quite a long way via stylesheets, using the Style Explorer to get the syntax. I found that the datagrid, hugely tricky to customise and style in flash much more quickly sorted in flex i.e.:

DataGrid {
color: #ffffff;
fontWeight: bold;
headerColors: #ffffff, #ffffff;
borderThickness: 0;
borderColor: #ffffff;
alternatingItemColors: #B6BBCE, #A4A9BF;
rollOverColor: #5F6885;
textRollOverColor: #ffffff;
selectionColor: #3F4251;
textSelectedColor: #ffffff;
horizontalGridLines: true;
horizontalGridLineColor: #ffffff;
}

the code for producing an itemrenderer similarly much shorter.

Whilst I think of it, some other useful styles are :

roundedBottomCorners: true;
cornerRadius: 10;
borderStyle: solid;

for nice rounded components. (though didn’t seem to work for all elements/components).

and
shadowDistance: 5;
shadowDirection: right;
dropShadowColor: #000000;

for drop shadows on and within components

and
backgroundAlpha: 0.4;

for transparent effects, though effected nested components too.

A weirdness I found was that paddingleft would only work when added to the component and not in the stylesheet.

Adobe describes two ways of skinning either graphical or programmatic leaving it up to you to go with what you feel the most comfortable.

With graphical skins

advantages:
being easier, familiar, and can hand off artwork creation to a designer
disadvantages:
Not as flexible size wise (though can apply embed9)
Graphics might not work well depending on the effect you want to achieve
Can’t then apply programming
larger file sizes presumably

and programmatic skins

Pros
Dynamic
Smaller file size
Flexible in terms of ability to do more with different states
Cons
More difficult, requiring coding, more to go wrong

So I thought I’d start with graphical skinning and build up to programming as required.

The Adobe article above and associated files is a bit of a find, as you can use this as a method of graphically skinning components. They provide graphics package basics of all the images for you to tailor and the css to go with it. So now I can even change how the scrollbars look. Though I haven’t found graphics labelled datagrid in the graphics file, maybe this is a compilation of other components.

I did wonder if this would bloat the .swf file, but so far have just used some of the graphics and styles from here.

Results so far looking good.

Updated version of this article for Flex3
http://www.adobe.com/devnet/flex/articles/skins_styles_03.html

Flex 3 now has a CSS Design mode…....
Adobe continues to describe skinning and styling as separate approaches. Implying there are some graphical effects you might not be able to achieve through styling alone.

Don’t forget to embed any fonts, graphics that you may need just put the @ symbol in front of anything to be embedded in the code and the word Embed in the stylesheet. e.g.

backgroundImage: Embed(source=”images/bg.png”);

or you will need to ensure that the appropriate files are copied along with your application

Sara Lever : 26 Feb 2008 17:06 |  Tags: Flex |  Comments (1) |  Close comments |  Report a problem

More on Illustrator for beginners.

Workspace

1. Illustrator contains various default templates, which can be useful for say creating a CD Booklet or Letterhead. To find them do File > New Template.
2. From the Welcome screen there are also options to start new types of documents, selecting Web Document sets the units to pixels and allows the size of the workspace to change, and mode to RGB.
3. Mobile and Web Devices allows you to view designs as from a mobile device, there are a selection to choose from and there is a bit of information about devices.
4. Perspective grids – View Outline is a wireframe grid. Page View Tiling will show the printable area for the default printer.
5. Bridge (top right – black icon) is a file navigation system that shows images.
6. On panels there are general more optionals than displayed, though panels and options are repeated in the application so there appears to be more than there actually is, due to repetition.
7. Window > Workspace will allow you to reset your panel display you can set up your own preferred set of open panels.
8. Hitting Ctrl-0 fits the file to the window size, useful if you have zoomed. Hitting spacebar will give a grabber handle this is helpful for moving around the workspace quickly.

Drawing Tools

1. With any of the drawing tools, like the rectangle tool onc eyou have drawn something with it, clicking on the page will allow you to see the set dimensions or for other shapes add points or radius.
2. Shift Alt g allows any shape to grow from the centre instead of the top left corner.
3. Toolbox > Pencils the middle pencil the ‘smooth pencil’ will straighten out wonky curves.
4. Selected grouped shapes (Object > Group) can be easily copied using Alt.
5. Smartguides are useful to line up and draw shapes that need to be exact.

Colours

1. Swatches > Open Swatch Library – will open up collections of colour palettes.
2. If you’ve used a colour a lot in your work and you might want to change it in every place at the same time you can. Double click the colour tick the Global checkbox button before using the colour then if you need to change it just open the colour and change it, all instances of that colour will change.
3. If you’ve set up a particular swatch of colours that you want to use over and over again you can do so by saving the file with the colours in (somewhere you’ll remember). Then on a new file go to Swatches > open swatch library > Other libraries navigate to your file and open it. Your colour swatches will open. You can apply to same trick to save or reuse gradients and symbols.

Pen tool.

1. Pencil or pen drawn lines can be easily turned to brush strokes, just select the brush stroke to apply.
2. To draw a straight line click the start point and click the end point with shift held down.
3. To stop the line drawing click the direct selection tool.
4. When drawing with the pen and you want to convert an anchor point whilst still drawing hit Alt.

Symbols

1. Any grouped object can be added to the symbol library for reuse.
2. Symbols selected from the symbol libraries can be broken apart for editing (right click).

Tracing

1. To create a vector shape from a scan you can import the scan as a template and draw over it, if saved as a template the scan will not appear on the final artwork, though visible on the screen. On a new file, do File > Place make sure to tick the template checkbox. The artwork will appear as a locked greyed out image. That you can draw over, this will give fine-grain control but be slow to do. You can also try using live trace.

Live Trace / Live Paint

1. File > Place choose your method of live trace, from the drop down menu, then click expand. Live paint can then be used to infil with colour any clear areas. If there are gaps between areas, show live paint gaps will reveal them.

Save to Flash

1. Saving a graphic as .svg or .svg compressed will preserve vector qualities but allow for import to flash.

Fonts

1. If you put a shape onto the workspace and using the text tool type text into it, your text will fit within the outline of the shape. You can alter the shape the text will move with it.
2. Text can be imported from Word (most variants), RTF, plain text (ascii), using File > Place.
3. Type in an area box can be sorted into rows and columns using the Type > Area Type Options.
4. Type can be wrapped around a graphic, choose Object > Text Wrap > Make you can increase the distance away from the object in the Text Wrap Options dialog
5. Ctrl+Shift+> is a useful shortcut to increasing text size.
6. To reuse font styles, highlight the area to be the same, and use the eyedropper to select the font you want to borrow the style of.
7. Once you change type to create outlines it is no longer editable.
8. Wrapping text around shapes. Create a path (any line or shape without a fill or stroke). Select the type tool move to where you want to start typing on your shape you should get a cursor insertion point, or a crossed wavy line the text will now follow the path. If you need to move the text along the path, select with the selection tool, the beginning, end and mid-point will be marked, the easiest to grab is the midpoint, when selected a black arrow next to an upside down capital T appears.

Working with photoshop

If you are creating say a photo montage in photoshop for use within Illustrator, you can work on both in tandem. Place the piece of work your creating as a file in Illustrator and keep editing in Photoshop, when you reopen Illustrator it will have spotted that a change has been made and prompt you to update the placed image. This is pretty handy if your likely to be iteratively modifying. Dont forget to embed at the end. Best to embed as if you move files around links will be broken.

Create a new layer before importing the work, will allow you to control where it ends up in your layers heirarchy.

Sara Lever : 26 Feb 2008 17:02 |  Tags: Illustrator |  Comments (0) |  Close comments |  Report a problem

Development of the Mobile Website.

Writing about web page http://m.warwick.ac.uk

I was given the brief of developing a mobile website for the University of Warwick. The idea was that it should provide content for someone visiting the University who is using a mobile browser whether this was a new student, new member of staff or someone external to the University, the latter being the main target audience . At this stage other Universities that had mobile websites in the UK and further afield were surveyed. I looked at how the UI’s were structured, the type of content available and the urls.

From very early on in the project it was decided to write content specifically *for the mobile site, so that it was short and pertinent suiting the capabilities of the devices it would be viewed on.

Based on what the target audience might be trying to achieve, the first draft for pertinent content looked something like this:

This was to be a website maintained within the eLab Web Team so it was necessary to avoid creating a high maintenance website, that was large or with a lot of frequently changing information.

Other decisions that had to be made were:

• What technology/standards should we use for development?
• What url should we have?
• What structure shall we apply to the information?
• What should the UI look like?

A useful reference was the .dotMobi website, their guide called the “Mobile Web Developer’s Guide’ http://dev.mobi/node/197, the comparison of CSS http://dev.mobi/node/154#r1 and online emulator http://mtld.mobi/emulator.php. Also very helpful was the video “Google Developer Day London: Building a Mobile Website” on youtube http://www.youtube.com/watch?v=i4dV9nIpHes.

From this and a survey of the web, we were able to define a set of guidelines for the creation of the website interface, as follows:-

• Have only a small logo
• For the navigational elements give each a number (0-9). Use 0 for home. Sort navigation elements by popularity
• Provide one content item per page
• Use color banding for sections, to give a sense of where you are
• Include a short strapline
• Have the Uof W phone number always at the bottom of the page
• All phone numbers should be selectable
• Keep text to the very minimum on each page
• Have not too many sections of navigation or go to deep, max drill-down 5 levels.
• Have a meaningful but short title bar
• Consider screen sizes

Screen sizes to consider
The smallest screensize for mobiles is something like 128×160 pixels and the largest 320×320 pixels. The width is the more important as pages are of course scrollable. It was decided to design our pages to fit 240 pixels in width. Some phones are smart enough to scroll for larger images or scale them. It was found when testing the pages on a variety of devices (bought, begged and borrowed) this size worked relatively well. We also figured that for the smaller screen sizes, the web surfing experience was just so horrible not many folks would be doing it!

Note well:
When sizing your image to fit the screen resolution, don’t forget about the browser furniture which is going to take up some screen real estate, the scrollbar etc, so your image needs to be slightly smaller.

What phones are our target audience using?

Nokia’s have most of the market share but which models was not know at this stage. Some time was spend looking for good statistics on actual models in use but this was hard if not impossible to find. (See survey).

Organising the content
The identification and organisation of the content was then a whiteboard and whiteboard rubber exercise. Applying the rules of not to many sections and not too deep.

The URL
m.warwick.ac.uk was registered as a short and simple url that is easy to type.

The Design of the UI

The detail of the content was thrashed out a bit more and a structure applied, some initial mockups of the home page and a subpage were created to see how it would all look put together.

This illustrated how restricted the space is and that at the top level many navigation sections would scroll of the screen.

A strong breadcrumb trail was designed in, main links given a number to allow quick getting backwards and forwards, as well as the university contact details at the bottom clearly visible.

Technology

As the content was being written or rewritten specifically for the mobile site it was decided not to use technology to repurpose existing content from Sitebuilder. This proved to be a wise choice, as when text was written it could be made very concise.
A possible option would have been to use the Sitebuilder CMS to generate mobile friendly markup or RSS.

So the technical decisions made were:

• Code in well formed, valid XHTML either XHTML basic and or XHTML –MP

• Validate every page ( validator.w3.org).

• Iinclude the correct encoding and doctype e.g.:

<?xml version=”1.0” encoding=”UTF-8” ?>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>

• Send google a mobile sitemap – http://www.google.com/webmasters/sitemaps/siteoverview?h1=en

• Make phone numbers links +1 206 545-0210

• Test on as many phones/emulators as possible of high and low specification

• Don’t do any popups, refreshes or client side redirects, also avoid tables and anything very complex chances are it won’t work very well or be valid markup

• Page Weight keep to below 30k where possible, so the page loads reasonable quickly on a mobile

The site was build using XHTML Basic but was switched to XHTML-MP when it was realised this rendered better on Ipod Touch. The emulators provided on the .mobi site were used heavily initially whilst the pages were being built. Now testing with a suite of phones after any new page is constructed is done instead.

Each page really must be validated as these DocTypes are very strict and an apostrophe or unclosed element will generate an error. Literature about mobiles gave heavy warnings that malformed pages would not render and crash mobiles. This however has not been our experience and we have pulled frequently changing content from other pages in a form that is not XHTML friendly but yet still seems to render ok. *
What were the hardest challenges for the mobile site?*

Images and in particular maps turned out to be the hardest thing to do on the mobile site. To generate an image at the small dimensions and file size, with clear colours that could represent anything useful is challenging to say the least. Usually nice graphics on web sites are subtle in hue and shading. For the smaller more basic screen capabilities on mobiles this had to be turned on its head and go for bold, high contrast reduced colour palette images.

It was known from the start of the project that a map of campus would be needed. With the campus being so large a way to view parts of the map and to produce a map that would work at this resolution was important. What we’ve done to simplify the problem is to create a map of campus that you can move around in, with a nearby overview square. Buildings are numbered and a key below names them. Also implemented is a building search as an alternative way of finding places.

Rapidly changing information (such as news and events pages) was also a challenge for the mobile website. For news and events information has been embedded from the main University of Warwick website and wrapped to look like any other mobile website page. The same has been done for information for students about free computer seats seats.warwick.ac.uk which is fed directly from that website to the mobile site. A problem that has been found is that in some cases the native information is not available in the mobile profile doc type (XHTML-MP). This problem will be addressed with future iterations of the mobile site.

Survey

In October 2007 the opportunity of adding questions to a survey of new and returning students undertaken by QUAD Research every year was available. The views of new students and returning students, would be similar to the target audience of outside visitors who had no knowledge of the university and what they might need to know on first arriving here, so would be useful to validate content choices made. 1799 students both new (946) and returning (853) filled in the survey.

QUAD reported:
_“Respondents were asked to select five things from a list they felt would be most important if Warwick had a website created specifically for use with mobile devices.

As might be expected maps of Campus, places to eat and drink and directions to Campus were considerably more important to new students than returning. Whereas, parking information, email searches and opening hours were more important to returning students. Students most frequently stated that they would like to be able to access bus information.”_

54 (2%) of students commented about what ‘other’ things they would like to see on the mobile website. Some students included more than one thing in their comment. A quick analysis of these revealed the most requested things on the mobile website:
12 votes for timetabling/my.warwick unforeseen changes to timetables
5 votes for events
3 votes for access to emails
3 votes for maps that include rooms/ room searching
3 votes for events at SU

Most popular phones owned by new and returning students:

Resolutions by popularity for the phones above:
240×320 = 463
176×220 = 141
320×240 = 41

After the survey results became available more bus information was added to the mobile website.

What next for the mobile site?

New information is added to the mobile site all the time. Recently a means of finding out the timetabled buses by bus stop has been added, which links out to Network West Midlands information. With new initiatives in the Coventry area this is likely to become real-time information shortly. Finding a mechanism to add more of the frequently changing content, is also a goal. Hooking the mobile site up to the main site such that the main site offers anyone arriving there on a mobile the chance to switch to a mobile-friendly website.

Sara Lever : 26 Feb 2008 14:45 |  Tags: Mobile |  Comments (0) |  Close comments |  Report a problem