practical webdesign nov 2006

O)

< ^

8 3

o c:

C 3

O m

O

tn s|m

lis

l'|!2

T3

aa

j

C

?£

>Is

'S

100 % Wetdiscount ^valid till 31.10.06 Create your own homepage the easy way, ai

WHETHER YOU'RE A BEGINNER, AN ADVANCED USER, OR A PRO - STRATO has th

right all-in-one package for every need. We develop our products especially basecour customer needs, making no compromise on quality, value for money and statthe art technology. Order now and get your own PowerWeb at a 30% discount.Offer valid for a limited time only!

The Basics for your homepYour personal web addressTool for creating your homepjE-mail address plus webmail f

. co .uk

Special Offer ,30% discount for t

6 m o n t h s

Up to 10 free domains of your cho

S T R A T O

EntryWeb - NEWYour free Starter Kit for your firsthomepage includes everythingyou need.

1 .info domain of your choice

• STRATO LivePages(website builder)

• STRATO EasyBlog• E - m a i l a c c o u n t

• S T R A T O C o m m u n i c a t o r

(webmail access)• AntiSpam & Antivirus• Web space and traffic

S T R A T O

EasyWebThe All-inclusive packages forbeginners.

1 f r e e d o m a i n i n c l u d e d !

1 GB web space/10 GB traffic

• 5 0 0 E - m a i l a c c o u n t s• S T R A T O C o m m u n i c a t o r

• NEW: STRATO EasyBlog• STRATO LivePages

(website bui lder)• Ant iSpam & Ant iv irus• NEW: Steganos Internet

Security Software

S T R A T O

P o w e r W e b

Power webhosting for yourneeds w i t h t he bes t va lue f o rm o n e y !

3 f r e e d o m a i n s i n c l u d e d !


• 1 ,000 E-mai l accounts• S T R A T O C o m m u n i c a t o r

• NEW: STRATO ProBlog• STRATO LivePages

(website builder)• AntiSpam & Antivirus• PHP, Perl, CGI, Python, Ruby• 3 MySQL databases• NEW: Steganos Internet

Security Software

S T R A T O

A d v a n c e d W e b

Complete package fora d v a n c e d u s e r s .

5 f r e e d o m a i n s i n c l u d e d !


• 1,500 E-mail accounts• S T R A T O C o m m u n i c a t o r• NEW: STRATO ProBlog• STRATO LivePages

(website bui lder)• Ant iSpam & Ant iv irus• PHP, Perl, CGI, Python, Ruby

Cron-Jobs, SSH Access• 9 MySQL databases and backu• NEW: Steganos Internet

Security Software

F r e eO n e t i m e d o m a i n p r o t e c t i o n f e e f o r

m o n t h s £ 0 . 9 9 e x c l . V A T ; £ 1 . 1 5 i n c l . V A T

£ 4 . 8 9 p e r m o n t h£ 5 . 6 7 p e r m o n t h I n c l . VAT

£ 1 0 . 9 9p e r m o n t h£ 1 2 . 7 5 p e r m o n t h i n c l . VAT

All STRATO products are offered as complete packages without hidden costs and with a money back guarantee!

00800 800 700 70 (call free) STRATO Quality Alliance

NetApp'P O W F R ^ Q B Y

i m c f o s y s J e f T n

Clitl SUT

Blog I Webhosting | BackupControl | Profi tools | Software

et high quality at a low cost!

NEW:all inclusive j gganos internet Security\ Softwe^re included!

nd blogr o f e s s i o n a l c o m m u n i c a t i o n

icluded

S T R A T O

E n t e r p r i s e We bProfessional package for yourc o m p a n y s u c c e s s .

1 0 f r e e d o m a i n s i n c l u d e d !


• 5,000 E-mail accounts• S T R A T O C o m m u n i c a t o r

• NEW; STRATO ProBlog• STRATO LivePages (website builder)• Ant iSpam & Ant iv irus• PHP, Perl, CGI, Python, Ruby, Cron-Jobs• 18 MySOL databases and backup• BackupCont ro l• S e c u r e S h e l l

• NEW: Steganos InternetSecurity Software

£ 1 4 . 9 9

[=1] S T R A T OThe European Webhoster

p e r m o n t h£17.39 per mortth incl. VAT

STRATO's top benefits at-a-glanceQ Best value webhostingQ All-inclusive: your own domain(s), web space & pro toolsQ Including free professional softwareQ No hidden costs! Money back guaranteeQ Free professional customer support

www.st ra to-host inq.co.uk

W e l c o m e

The sites you've made this monthP r a c t i c a l

Laura Car lson, Minnesota www.d.umn.edu/

itss/support/Training/Online/webdesign

-.^MlesignOUR

GUARANTEEDTO YOU

Every issue ofPractical webdesign gives you:O Expert advice Our team of professional designers

and developers share their knowledge with youO Support We look at crucial topics like hosting and

software to help you understand your needsO Inspiration We present the best work being done

and show you how pro designers think

Helping you build better websites

and e with care

©elcome to Practical Web Design, the magazine thathelps you make better websites. This issue, we explorethe booming choice of multimedia options for your site,

highlighting 20 ways to include audio and video in your pages.Don't think you need to go mad and use all 20 ideas,

though... While multimedia can really enhance a site when usedappropriately, it can also irritate your visitors if you go over thetop. We're all familiar with sites that start blasting out a movieclip or even a theme tune as soon as the page loads, withoutany warning. It's better to give your visitors control byencouraging them to switch on a media clip than forcing themt o h u n t f o r t h e S o u n d O f f b u t t o n .

It's my first issue as editor of Practical Web Design, and I'vereally been enjoying the many emails and forum commentsfrom readers. Julian, Sam and I have tons of ideas for themagazine, CD, website and podcast - but the best ideas comefrom you. Send your thoughts, suggestions and requests fortutorials to the email address below; leave commentsat www.pwdmag.co.uk; or join the 24-hour discussion atwww.pwdmag.co.uk/forum.

Richard Hi l l , edi tor

[email protected]

O Contact us at [email protected] or on 01225 442244

OTo find out about subscr ip t ions, v is i t www.nnyfavour i temagazines.co.uk

©To get help with the CD, visit www.futurenet.co.uk/supporto To send a message to Mailbox, email [email protected] To enter Si te Chal lenge, emai l pwdsi [email protected]

©To contact Ask The Experts, emai l pwdexperts@futurenet,co.uk

©To rece ive a Websi te Makeover, emai l pwdmakeover@futurenet .co.uk

S U B S C R I B E . . .Turn to page 67 and save 40% off the Practical Web Design cover price

4 N o v e m b e r 2 0 0 6 Practical webdesign

UK'slEST VALUE• IFeature Rich,

Reseller Hosting^ [ i i i t i t t l i l H t ! ^ #at your fingertips

I t h n i i M H I l

I I I U I I I I I I I I M

l l l l l l l l fl M I UH I I I M I I I i n i l

Start your own hostingcompany today:• Sell Windows and Unix hostingthrough just one reseller account

• Host unlimited number of websites and domains• Unlimited webspace• Unmetered data t ransfer• White label customer control panels• Add databases and scripting to your account• Integrated domain registration andmanagement, with bulk discount

• Bandwidth monitoring• Anonymous/custom name servers• Anti-virus/Anti-spam available• SSL available

• And many more features

FREE 30-day trial of Napster • FREE £5 e-voucherfrom Firebox.com • FREE 8 DVDs from Screen SelectFREE 1 month hosting • FREE Set-up

I o n u

PermontrNeed More? SHAREPOIIITVIRTUAL PRIVATE SERVERS/ili] EMAIL

Why WebFusion?WebFusion has been leading the field since 1997. Over 400,000customers trust us with over 1,000,000 domains because we offer:

✓9 9 . 9 9 % C O N N E a i V I T Y ✓R A P I D S E T- U P

✓TIER 1 INFRASTRUCTURE ✓UK SECURE DATA CENTRES

✓24/7 365 SUPPORT ✓SUPPORT SITE

✓KNOWLEDGE BASE

4 t h ,H o s t B r i t i s h !

All websites hosted In our 5 data centres- biggest of their kind in the UK, ensuring

improved UK search engine listings

WebFusionFor security, reliability and support

wiiiiw.welifuslDn.co.gk or call 0800 0317 800 where werhostinii works

P r a c t i c a l

rHelping you build better websites

C o n t e n t '■

W O Wf a c t o r !

20 ways to dazzle your visitorswith audio and video page 34

On the cover34 Give your site the wow factor!20 ways to dazzle visitors with audio and video

68 Full softwareNetObjects Fusion 8, complete on the CD

46 Liquid layouts the right waySolve the three-column conundrum

52 Put Google Maps on your siteHow to embed location graphics

56 Manage your siteMaster Dreamweaver's sync tools

62 Create a Flash image galleryExtend your interactive programming skills

12 The data privacy scandalwhy you should protect other people's secrets

D I Y d e l . i c i o . u sMake your own tagging system

. : Get noticed fastThe best software to put your site on Google

> A who le new lookAdvice on sprucing up your site

N o v e m b e r 2 0 0 6o

3 MailboxOld vs new software and Web 2.0 hype

12 This MonthHow AOL's prviacy hiccup affects your site

Can anyone topple the top contenders?

22 Asic the ExpertsServing Java, fluid vs fixed and microformats

29 Website MaiceoverHow to make a good site even better

j4 Give your sitet h e w o w f a c t o r !20 ways to add audio and video

40 Website Buiid-OffInspirational ways to make a campaign site

57 SubscribeSave money and avoid the shops

7 7 i s s u e sMissed an issue? F ind i t here

114 Next issuei Get smarter images faster

U l t ima te ResourceEssential reference and independent advice

315 Software reviewsTools to get your pages ranked higher

9Q Designer guidesi Blogs, Dreamweaver and growing your site

92 Site EnvyWho's making the best-looking sites?

90 0"^!^^Two full programs, video training and more

102 Bookmari(sA handy list of over 140 web design sites

108 HostingIf you're looking for a web host, start here

P rac t i ca l des ign

4 5 Tu t o r i a l s27 pages of expert advice and step-by-step guides

i M

i J ; . e • . - a «

/ \ ^ l1 i 5 2

0 O ^ S w i r c h t t w « r t ( C l « »a f e r w O l n f o f m « l o n ' E j M s .

S e a r c h t h e a r t i c l e s

Keywira. |Drtamw«av«r ipgEB

Y o u r r e s t i t s

# i w« MM «w«iep

7 8

46 Create liquid columnsusing CSSMake an accessible three-column page layoi

52 Master Google MapsHelp visitors find their way arouncf by addininteractive maps to your web pages

55 Manage website filesw i t h D r e a m w e a v e rKeep your web server up to date

52 Extend the MovieClip witActionScript 2 in FlashDevelop your interactive progamming skills

58 started withNetObjects Fusion 8Create web pages In minutes

72 up 3 social bookmarks i t e w i t h S c u t t l eMake your own del.icio.us with PHP

78 Create a search formwith MySQLBuild a find facility that's tailor-made for yo

FREE!:

j Get more fromI Practical Web Design II with our podcasts

-there's a new oneevery two weeksSee page 91

We ve got software, tutorialfiles, and great video training!NetObjects Fusion 8F U L L S O F T WA R E C r e a t e w e b s i t e s i n

minutes with visual editing tools

W S _ F T P H o m eFULL SOFTWARE Transfer files quicklyand securely with this FTP utility

6 0 m i n u t e s o f v i d e oLynda.com presents classes on CSS and HTML markup

T u t o r i a l fi l e sAssets to follow all projects, plus step-by-step images

N o v e m b e r 2 0 0 6 7

M a i l b o x W R I T E A N D

W I N !

If you have any thoughts aboutthe magazine, what you'd like

us to cover, or how we couldimprove It, drop us an email, or

even a letter, to: Letters, PracticalWeb Design, Future Publishing,

30 Monmouth St, Bath BA1 2BW

Your views on old versus new software,inconvenient CD packets and shoes

[email protected]

DREAMWEAVER 0

»Lee Burke says:support new software

O Star letterExpect to invest

©hile I understand Andrew Purnell'srequest that you cater for oldersoftware (Letters, issue 32), the wealth

of new features in Studio 8, and the relativelynominal upgrade price, far

outweigh any argument forpresenting watered-down versionsof tutorials, or even using open-source alternatives. (I'm mainly

thinking about Flash here.)Practical Web Design provides

independent information andt u t o r i a l s o n t h e m o s t c o m m o n

tools being used to develop theinternet today. Andrew is, IMHO,

asking Tim Berners-Lee to reachfor a pencil to write an email. Allcareers require some kind of initial

outlay or Investment: hopefully,the rewards for that outlay are numerous

projects and plentiful returns.L e e B u r k e

Andrew's original point was that owners ofo l d e r s o f t w a r e v e r s i o n s a r e l e f t o u t w h e n

STAR PRIZE!Win a Pantone huey!

Practical Web Design runs tutorials based on thel a t e s t v e r s i o n o f D r e a m w e a v e r o r o t h e r

programs. We make sure that most of ourprojects work in many different programs byoffering code to copy and paste in. Where wedo feature specific tools, we agree with Lee that

covering the latest version is preferable.

W a l l e t w o e sh i l e I u n d e r s t a n d t h e r e a s o n f o r

■ U' Emigrating from a CD case attached tothe front of the magazine to the

internal sealed packet, I do take issue with howt o d e a l w i t h t h e C D o n c e l i b e r a t e d f r o m t h e

packaging. I care about the storage of mymagazine discs, and store them in crystal casesthat I purchase separately. Unfortunately thecurrent packet is simply too large to be

employed for cataloguing with aprotective case.

Perhaps the artwork could be ^slightly scaled down, and thei n d e x e d c o n t e n t

reorganised to allow use /of the redundant jpackaging fori d e n t i fi c a t i o n o f t h e C D

when stored. I imaginet h a t m o s t d i s c a r d t h e

existing wrapper (which iswasteful) and then haveloose CDs floating around, withl i t t l e i n d i c a t i o n o f t h e i r c o n t e n t

readily available.Barry Chamberlain

We don't have the option of changing the

packet size for production reasons, Barry, but asstorage geeks ourselves, we sympathise withyour quandary. We're working on a DIY solutionthat should help: keep an eye on the CD pagesin f u tu re i s sues f o r de ta i l s .

H a r d t o r e a d

Ot's ironic that your feature onaccessibility ('20 ways to make yoursite accessible', issue 32) contravenes

one of the key tenets of accessibility: thecontrast between text and background is poor.Unlike many other magazines, you thankfullyrarely use these hideous coloured backgroundsin the magazine, so it seems unfortunate that

you chose to do so on an article where the ®

From the forum'Redirect l ink?

In the Resources panel of issue 32'sDreamweaver forms tutorial, it shows thesame description a link under two different

headings. I'm presuming that the link for OnD e m a n d D r e a m w e a v e r S e m i n a r s i s c o r r e c t -

although it does not go directly to thepresentation. Please can more time be spenton making sure that the links listed go towhere they say they're going to go? I'd rathersee full addresses too, instead of TinyURLs.R a b b i t s f e a t

T h e O n D e m a n d D r e a m w e a v e r S e m i n a r s l i n k

takes you to a list of presentations. Anyonewanting the presentation mentioned cana c c e s s i t d i r e c t a t s e m i n a r s . a d o b e .

breezecentraLcom/p52799414/Using Dreamweaver's Default Documents

is an article about how you can use anextension to modify the default documentsi n D r e a m w e a v e r . T h e f u l l l i n k i s w w w.

communi tymx.com/conten t /a r t i c le .c f m ? c i d = 6 B 3 8 F

On the more general point of the use inTinyURL or similar services in magazines,many writers and editors prefer them becausethey look tidier on the page and are oftenmuch faster for the reader to type in byhand. But it's purely a personal preference,and I tend to agree with you: I like to knowwhere I'm going before I commit, even if thelink is a bit unwieldyR i c h a r d H i l l

Kill them! Kill them all! *ahem*Cra ig Granne i l

1 think the idea of TinyURLs are great, butcouldn't you grab a similar domain and use it

yourself? At least your domains wouldn'texpire. You could easily knock up a quick PHPscript and database that held all of the URLsand their TinyURL. Then just print your-

domain.comTtinyname. Alternatively, set upsubdomains and just redirect those.S a r a h G

8 November 2 (X)6 Practical . )>b<lesign

a r .

WHO'S "W WEBSITE?Whatever size of business you are, you want your online presence to be effortless to set upand manage.

And who you choose to help you do that makes the difference between peace of mind ort o t a l f r u s t r a t i o n .

Hostway fulfil the Shared, Dedicated and Network hosting requirements of thousands ofbusinesses around the world, based on our comprehensive range of Dell® Servers.

Check out Hostway's range of services for business websites just like yours.

After all, who's behind your websites is just as important as what you have on them!

HI HOSTING J

A d v a n c e dWeb Host ing

froin £18.95 / month*

Developers depend on our triedand trusted hosting architecture tod e l i v e r a c o n s i s t e n t s e r v i c e t o t h e i rc u s t o m e r s .

Linux - Build and deploy powerfullinux web applications and serviceswith up-to-date support for PHP,MySQL, PHPMyAdmin & Python.

Windows® - Next generationWindows® tools & applicationssuch asASP.Net, MS SQL™.MS SharePoint Services™, MS

Exchange™ are changing the wayorganisations work.* G o W P l u s P l a n i n c l u d e s c h o i c e o f S t a n d a r d P O P S e m a i l o r

MS Exchange"*, MySQL and PHP5 (Linux) or ASP.Net andMS SQL (Windows), Urchin Advanced Analytics, FREE phonesupport 24 hours a day, and SiteControl^ - our powerful admincontrol pane). 30<lay money back guarantee.

D e d i c a t e dH o s t i n g

from £149 / month

R o o t A c c e s s S e r v e r s -A Flexible solution for power users

Full control of your own serverthrough Root access.

• Latest software/hardware specs• Protected by managed firewall• Add options as you see fit• Full control over your server• P o w e r f u l s o l u t i o n w i t h o u t l i m i t s• Flexible pricing

IVIanaged Servers -/As easy as shared hosting

We take care of full securityupdates, technical support andmaintenance. But you still have fulla d m i n - a c c e s s .

V y

E n t e r p r i s eHos t i ng

As one of the Top 5 hostingcompanies in the world, ourEnterprise customers use usregularly for larger, more complexprojects.

Typically, these involve firewall,load-balancing or databaseclustering requirements, as well asmore specific needs like StorageArea Networks (SAN), VirtualPrivate Networks (VPN), and high-bandwidth hosting

S e r v i c e s i n c l u d e :

• Managed Hosting• Local/global load balancing• Database Clustering• Database Management• Server and Application Monitoring• H a r d w a r e

V >

call US FREE on 0808 180 1880 • [email protected] • www.hostway.co.ukDNR • Email Hosting • Web Hosting • Ecommerce • Resellers • Dedicated Servers • Enterprise Solutions

H O S T W / V KT H E H O S T I N G C O M P A N Y

M a i l b o x

Did this art ic lebreak the laws ofaccessibility?

coloured background reduces the readabilityo f t h e c o n t e n t .

Ron Hagley

Hideous? We thought it was quite a pleasinglilac... Occasional colour is a useful pacingdevice that we plan to keep using, but we

certainly do strive to make everything as legibleas possible.

B r o w s e r w a r s

Oegarding one of your regulars, theNetstats feature (see page 13): itwould be a really great addition if the

statistics for Internet Explorer could be broken

up into versions, if possible. It's good seeinghow the Firefox browser is steadily growingover the months. It would be great to see how

quickly people are dumping the older versionso f t h e I E b r o w s e r.

P a u l H o u l i h a n

It's a good idea, Paul, and we've changed ourpresentation in Netstats this issue to show thesplit between versions 5, 6 and 7 of InternetExplorer. Let us know if you've any more ideasof how we could improve our coverage ofbrowsers: after all, they're a fundamental partof web design.

Web 2.0 hype

Oour article on Web 2.0 ('20 ways to goWeb 2.0', issue 33) was good fun, andI did pick up a trick or two... But it

didn't address the key defining attribute ofa true Web 2.0 site - which is to be overhypedto the point of nausea.

The things that Web 2.0 is supposed torepresent - tools to encourage social interactionand modern markup - have been with us all

along. Social interaction is what the web hasalways been about, and every good designerh a s u s e d t h e b e s t t o o l s a v a i l a b l e a t t h e t i m e .

There is no such thing as Web 2.0, whateverassorted books, websites and your magazine

might say. There's just the web.D a v i d T h o m a s

The feature itself was quite a light-heartedt r e a t m e n t o f W e b 2 . 0 : r o u n d e d c o r n e r s o n

boxes don't make a site Web 2.0 all bythemselves. But there are deeper trends

emerging from the fog of claims and nay-sayers.One trend is a new way to offer working tools,presenting options online that are as strong asprograms that were previously confined to yourcomputer desktop: for example, the Writelyword processor.

There's also a new take on presentation: thereceived wisdom used to be that a good sitedesign was one that offered as muchinformation as possible on the home page,albeit in a well-structured way, so that anyvisitor could find what they needed withouthaving to burrow into the site. The newgeneration of sites instead choose theinformation the creator feels is the most crucial,and strips everything else out. It's a shift thatmany media have undergone: compare thepacked front pages of old newspapers withtheir more direct contemporaries, for example.

Whether you choose to label it as Web 2.0 orthe same old Web 1.0, it is the beginning ofa new direction for online publishing.

From the forum

Marge takes on JoomlaYes, I know I bored everyone silly with myWordPress hoohar, but after messing up theWordPress installation, my host said he wouldhelp with Joomla if need be. I have managedto set it up without borking anything and willkeep you all updated with how I get on - andI promise it won't be boring.M a r g e

I've tried to design my own Joomla templaterecently, but I didn't have much success. Ifanyone knows of some good resources fordesigning templates, I would like to knowa b o u t t h e m t o o .

a n d y 1 2 0

If you can suss the sessions, nav, login, banner,content, etc, the designing is easy. It's theintegration that's the hard bit.s a r a h G

I have found the most important thing iswhat the site looks like: it seems to bring thewhole thing together. I have finally clickedabout the idea of knowing what you want tosee and working out how to achieve that.M a r g e

I've been working on Joomla non-stop for thepast three days (and dreaming about it toonow). Marge, wanna come work for me?I got a week left before the deadline.s a r a h G

Sarah, I want you to have a nice cup of teaand a biccie or two, and buy some newshoes... there, that's better.M a r g e

Join our community todayTalk web design or get helpwith site building atv u w w. p w d m a g . c o . u k / f o r u m

Quick commentsRob Evans ' c r i t i c i sm o f ou r covers

(Letters, issue 30) continues to draw strong opinion, both for and against..

I Brian Woolsey 1

Lyndle Stokes

I can find the magazine in our localbookstore at a glance because I'm

^ familiar with the cover design.f James Agostinh^

I M a l c o l m G a r d n e r !

Your magazine is excellent. It's seriousand helpful, but the initial impression ofthe cover pics doesn't communicate this.If anything, they suggest the magazineis something trivial.J o n a t h a n C o u r t

_Wping)pu build bwtefntGWEVOURSITCA

. - ^BZOMAKEOVER^

C r M t i v *CSSWMf

Pab Rashp r o j e c t s

fXF?* Iwg I

10 Novembe r 2006 Practical webdesign

Domain Regwith Q2S homepage!

Sign up now,o r t r a n s f e r f o r f r e e !

• Y o u r o w n e m a i l a d d r e s s

EG: [email protected]• Full DNS management

• Unlimited web forwarding

• B u l k d i s c o u n t s a v a i l a b l e

• Wide range of domainextensions - .eu from only £8.85

from £2.59total price per year*

Wonl! 3!

Thanks to our customers,w e h a v e b e e n v o t e d B E S T

webhosting company of the year!

I n s t a n t S i t ef o r o n e m o n t h !F R E E

Build a uniques i t e i n m i n u t e s

BWebspacewith up to 500 MB

Join our 400,000+c u s t o m e r s

> No technical knowledge required!

• Share thoughts & photos or sell

your products in 5 easy steps' Easy to use - just choose a look

a n d f e e l & c l i c k t o c r e a t e c o n t e n t !

> Includes: photo gallery, blog,

forum, e-shop and more

from £1.99per month**

> Easy online account managementw i t h f u l l F T P a c c e s s

' Up to 500 MB webspace

• Free webmail and up to3 5 m a i l b o x e s

' Free graphical web stats,a n d m u c h m o r e

f r o m £ 1 . 5 9per month**

FREE for every • 8 free DVD rentals from Screen Selectcustomer • 30 day free trial from Napster • £5 off at Firebox

Sign up now:WWW.123-reg.co.uk/pwd♦Minimum term applies ** Monthly fee must be paid annually, in advance. ***One off set-up fee £9.99.

-reg.co.uk

This MonthAOL-gate puts privacy back on the agenda, Google and Microsoft makelife better for bloggers, and child protection groups go after webnnasters

P r i v a t ea i e e s !

v / - - r I r V J

As AOL exposes itsusers'searches, areyou protecting yourpunters'privacy?

Gack in July, AOLpublished thes e a r c h r e c o r d s o f

650,000 Americanusers, providing a valuable insight into whatpeople look for online. Unfortunately, the dataalso made it possible to identify individuals, and

You can't fire me, I resign under force

©THEWALL STREET JOURNAL.o W t / W E

As of 3:02 p.m. EOT Moratey, August 21, 2006

AOL Fires Technology ChiefA f t e r W e b - S e a r c h D a t a S c a n d a l

B y M A T T H E W K A R M T S C H N I G u d M Y L E N E M A N G A U N O A NAmguMi l , 2m 3:92 ^m.

S])(^Chvi]orkCimrfl Techno logyW O U L D K S K y . / U K S I Q M B U S I N E S S T E C H N O L O G Y S Q E N C E H E A L T H S P O R T

C A M C O R D E R S C A M E R A S C E L L P H O N E S C O M P U T E R S H A N D t H E L D S H O N E V I D E O

•AOL's data privacy scandal cost its chief technology officer her job.Valleywag.com asks: did she fall, or was she pushed?

many of those who had been performingunusual - or downright weird - searches were

promptly exposed to the world.AOL isn't the only firm keeping data that its

customers might not like the public to see. In

August, Amazon unveiled an ambitious planthat, according to the Seattle Post-Intelligencer,would combine customers' purchase data withinformation on their education levels, gender,income, interests, race, religion and even theirs e x u a l o r i e n t a t i o n .

AOL and Amazon have horrified privacy

campaigners, who are demanding privacylegislation to protect individuals' data - but inthe UK we already have such legislation. If yourwebsite isn't legal, you could face fines of up to£5,000. If you're running a site that handles anykind of personal information, whether it'scustomer order histories or information you'vegathered from cookies, the Data Protection Actprobably affects you.

The Data Protection Act deals with personalinformation stored electronically or on paper.If you're using such data, you need to register

a s a D a t a C o n t r o l l e r w i t h t h e I n f o r m a t i o n

Commissioner. The information you store mustbe accurate and up to date; it should only bekept for as long as you need it for a specifiedpurpose; and it must be kept secure. Forexample, if you ask visitors to submit theirdetails for a competition, you can't use thatdata for marketing without their consent; and ifthey don't consent to having their data stored,you should delete it after the winner of yourcompetition has been chosen.

If you intend to collect users' data, you mustpublish a privacy policy, and you must allowusers to opt out of having their details stored,used for marketing or passed on to third parties.Site users under the age of 12 must also confirmthat a parent or guardian has given theirc o n s e n t t o s u b m i t t h e i r i n f o r m a t i o n .

For full details, FAQs and in-depth advice,c h e c k o u t t h e I n f o r m a t i o n C o m m i s s i o n e r ' s s i t e

(wvvw.ico.gov.uk). Staying within the law isn'tdifficult or expensive - but if you get it wrong,it could cost you a fortune.


A better BloggerGoogle's blogging platform gets a much-needed upgrade

Oor years, Blogger.com has been oneof the easiest ways to start blogging,but as rival services get smarter,

Google's effort has begun to look rather dated.That's about to change, and the new Blogger.com - which, inevitably, is currently in beta - is

designed to bring the service up to speed.The biggest changes are in the areas of page

layout and tagging. You'll be able to changeyour blog's appearance using a drag-and-dropinterface that's similar to Google Pages, and

you'll be able to add third-party JavaScriptwidgets in much the same way that you can onplatforms such as WordPress. You'll also be ableto give your posts tags, so that they work betterwith search sites such as Technorati, and RSS

support has been extended: instead of just

• The new-look Blogger enables you to edityour pages using a drag-and-drop interface

supporting Atom feeds, Blogger will supportRSS 2.0 for posts and comments. You can takethe service for a test drive at beta.blogger.com,

although as yet there's no sign of an officialr e l e a s e d a t e .

Grumpy old menMen are more likely to rant online than women, says survey

©en like to publish horse racing tips,advice about salt and football results,w h i l e w o m e n a r e m o r e i n t e r e s t e d i n

publishing wedding information, family treesand photos, according to a new survey from 1&1

• l&l's web survey reveals that one in four peopleeither have a blog, or want to get one

Internet (oneandone.co.uk). The Great BritishWeb Survey, conducted by Tickbox.Net, foundthat while men and women are equally keen topublish their own websites, there are markeddifferences in what they want to publish.

According to the survey, 55 per cent of menwant to publish hobby-related material on their

sites, compared to 40 per cent of women; while50 per cent of women want to publish family

photos, compared to just 37 per cent of men.More men than women admitted to "publishingrants and more strange and geeky onlinetopics", although men and women were equallyinterested in blogging, with one in four people

saying that blogging was something they eitherd o o r w o u l d l i k e t o d o .

$2mttm The amounteach MySpace member

generates in revenue forthe site [Source: ZDNet]

6 5 6 ^number of

B r o w s e rw a r sOur new/stats source,W3Schools.com, showsthat over ha l f the in te rne tIs using Microsoft'sInternet Explorer 6

# /

The Writer stuffMicrosoft 's free Writer makes

blog publishing easier

®icrosoft's avalanche of new productsshows no sign of stopping. The latest

program to appear is Windows LiveWriter; this free application looks like a cut-down Microsoft Word, and makes it easy tocreate smart-looking blog posts includingformatted HTML, images and Windows LiveLocal maps. You can download the beta versionat windowslivewriter.spaces.l ive.com.

As you might expect, the program is

Windows-only, but that doesn't mean you'relimited to using it with the Windows Live Spaces

blogging platform. Writer also works withBlogger, LiveJournal, TypePad and WordPress. JJAllaire of the Writer team says: "We wantWriter to work well with every blogging serviceout there. If you can't get Writer to work withyour blog, we want to know."

One of the most interesting things aboutWindows Live Writer isn't the program itself,however: Microsoft has already published aSoftware Development Kit that enables

developers to extend the program, for exampleby adding support for tags, embedded video orFlickr images.

I £ E 3

• Live Writer works with Windows Live Spaces, butthe program supports other blogging platforms too

Celebrate the^b's'moS'creati'^time-wastersA BEGINNER'S GUIDE TOT O W E L I R O N I N G

w x l y i B i 9 o s t . c o mLarge-breasted models preen and pout over anironing board in the latest viral from Lynx, theA S B O h o l d e r s 'd e o d o r a n t o fc h o i c e . E v e nt h e " I t ' s i r o n i c ! "d e f e n c e c a n ' texcuse this sorryslab of sexism.

T E L L I N G I T A L Lwww,youtube.comywatch7v=lll2bPQSbBMGeriatric1927 is YouTube's latest and most unlikelystar: an elderly English gentleman shares his life story,and it seems the Emo generation can't get enough. Sofar his entertaining jr e m i n i s c e n c e s h a v ea t t r a c t e d o v e r65,000 views, alongw i t h c o m m e n t ssuch as; "Do youh a v e t e e t h ? "

W I N D O W S V I S T A S P E E C HR E C O G N I T I O N D E M O

www.youtube.com/watcti^ -j..Murphy's Law states that if something can go wrong,it will - and now,thanks to YouTube, |what goes wronggoes around, likethis clip of Vista'svoice recognit ionfeature producinggibber ish.

Practical webdesign N o v e m b e r 2 0 0 6 1 3

T h i s M o n t h

B a n n e d i nthe USA?Kiddie campaigners want toput webmasters in prison

Ghild protection legislation in theU S c o u l d b l o c k s o m e o f t h e w e b ' s

biggest sites - and could put metatag-abusing webmasters in prison for up to20 years. The Deleting Online Predators Act(DOPA), will, if passed, forbid publicly fundedorganisations from allowing young people toaccess sites where they might receive 'unlawfulsexual advances' - which means chat rooms,forums and other social networking services,and possibly messaging services and blogs.

Meanwhile a separate law, the Adam WalshChild Protection and Safety Act, makes it anoffence for any site to use misleading metatags that trick people into "viewing materialconstituting obscenity". The penalty is 10 years,and this doubles if the meta tags are designedto deceive children. Although the legislation is

US-only, DOPA would block sites irrespective oftheir origin - and if you're using metas to trickUS visitors, you could still fall foul of the law.

Tricky clicicsCan you really trust youradvertising stats?

Op to 15 per cent of advertising clicksmay be fake, with businesses clickingon their rivals' ads in an attempt to

burst their advertising budgets. According tomedia research firm Outsell, such fraud cost$800m (£444 million) in 2005 alone.

While search and advertising giants work on

technology to defeat dodgy clicks, advertisersare looking at alternatives such as pay-per-action ads, where they only pay if a customerbuys something. However, such ads can beunfair to pu6ffshers: if someone visits your sitebecause of an ad, but runs away because yoursite is rubbish, the publisher won't get paid.

So can pay-per-click be saved? The ad firmscertainly hope so, but Outsell reports that 27per cent of firms are already reducing theironline ad spend because of click fraud.

t r a2 0 ^

F i n d a J o b

F i n d a H o m e

G e ty o u r s e l fh e a dh u n t e dupload yourCV with usf o r F R E E

M SB U I L D Y O U R O W N

W E B S I T E T H ER I G H T W A Y

U S I N GH T M L & C S S

B u i l d Y o u r O w nW e b s i t e t h eRight Wayusing HTMLa n d C S SIan LioydThis site-building bookIs aimed squarely atbeginners. It preachesthe gospel ofstandards-compliantcode from the outset,a n d f o l l o w s t h e t r i e d

a n d t e s t e d f o r m u l a o f

building an entire sitefrom scratch.

S a m ' s To w nThe KillersWe're always scaredwhen lead singerssuddenly grow beards,so we're crossing ourfingers that the hotlyanticipated follow-upto Hot Fuss will deliverthe goods, despiteB r a n d o n F l o w e r s ' n e w

fac ia l furn i ture.

•Advertising dick fraud cost firms $800m last year,according to media research firm Outsell

Sony EricssonW S I O iSony's Walkmanphone packs a decent2-megapjxel cameraand superb MP3player Into a tiny case.Memory cards aren'tcheap - expect to pay£80 for a 4GB MemoryS t i c k P r o D u o - b u t a t

least you don't haveto take your digicamand iPod everywhere.

Q & AJustin KanK i k o . c o m

Justin Kan co-founded the Web 2.0 calendar service Kiko.com, which attracted lots ofpositive publicity. Then, in August, Kan put the company on eBay. We ask Justin aboutGoogle, making money from Web 2.0 and the need for a chief focus officer

QKiko is clearly an impressiveproduct , but i t never t r ied to makeany money. Was there ever a plan toin t roduce adver t is ing or pa id fea tures , o rwere you more in terested in creat ing an

in teres t ing web too l than you were inra i s ing revenue?Justin says... Our plan the whole time wast o i n t r o d u c e a d v e r t i s e m e n t s a n d m a k e t h e

calendar ad-supported. We thought the bestway to do this would be to create a really cooltoo l t ha t a l o t o f use rs l oved fi r s t .

Q Several pundits have suggested thatthe re lease of Google Calendarki l led Kiko. Do you think that 's accurate,or is it missing the point?N o o n e f a c t o r k i l l e d K i k o . T h e d e c i s i o n t o

move on for the development team camebecause we were ready to work on our nextproject, and because of the increasedcompetition in the calendar space.

Q You've written about the dangersof be ing s ide t racked , and sugges tedtha t th i s i s someth ing tha t happenedwith Kiko. How do you think you canavo id t ha t p rob lem c ropp ing up w i t h

your nex t p ro jec t?Well, this time around we're promising toourselves that we're only going to work onone project at a time. We're also recruiting

I ^o a i h v a a M D O

• Fancy owning Klko.com, along with the softwarethat powers it? You can buy the company, domainand code on eBay if you've got a spare $50,000

a chief focus officer, whose job will be to yellat anyone who starts side projects.

Q We're intrigued by your decision toput Kiko on eBay - wouldn't i t havebeen easier to use your investors'c o n t a c t s t o s e l l t h e b u s i n e s s ?

Selling the business on eBay is good because itgets a lot of publicity, and has a definite endtime. We didn't go to eBay because of a lackof options - we did it because it would allowus to quickly move on to our next project.

QAre you going to stick with Ajax andweb-based apps for your Next Big

Thing? Can you give us any hints of whatyou ' re up to now?No hints just yet, but I promise it will changethe way people think about the web.

J K A N S P r I i W n C R f 0 0 Y O U G E T O F F W l i n i M A R L O « 7 (

A c t u a l K u o n s f t t x n K i k o

A u g u s t I T l h , 2 0 0 6 • C * t t 9 o r , - -

Today I listed the main as»«t of our startup, our web calendar Kiko^ on eBay (seet^c juctton). Since we put the eBay post up, there has been much bu» ontechcrunch, reddit, e^ about Kiko going under. Many people have speculatedheavily on why we failed, and, to my amusement, some have even blogged aboutl e s s o n s w e c a n l e a m h - o m K i k o .

I think there are a lot of Wessons other people can lake away from Kiko. Most of(^ese are things that someone looking in from the outside wouldn't know. They donthave a lot to do with our business model. They dont have a lot to do with gettingstepped on by a giant. Here are the importent things that I actually learned from myfirst startup:

1. Stay Focus*d. Most entrepreneurs have lots of ideas. Often times, many ofthem may be realty good, t dont know about you, but my favorite part about

t . l l . . n n . n i l h u i i n f f f i d r a s I f v i ^ u ' r e

S E A R C H T H I S S I T E

I ®

i i • . ; 2 0 0 6

• ji ^

P I N O J U S T I N e n S E W H E R E

i 2 l

•Justin Kan's blog (http://jkanstyle.eom/2006/08/17/actual-lessons-from-kiko) lists the key lessons

yat he's learnt from running, and then abandoning, Kiko.com. The company is now for sale on eBay

1 4 N o v e m l D e r 2 0 0 6 Prac t i ca l des ign

T h i s M o n t ho

"LJl_ n W O R D

I T

Web 2.0 is sooo yesterday...From time to time, someone coinsa pithy phrase that says more in asentence than most people couldmanage in a million words. The latestperson to pull off this feat is DavidWeinberger: the co-author of TheCluetrain Manifesto's new book. SmallPieces Loosely Joined (www.

smallpieces.com), nails Web 2.0 in just10 words: "On the web, everyone willbe famous to 15 people."

Robert Scoble (scoblelizer.wordpress.com) is famous to morethan 15 people, which means that theex-Microsoft blogger made himself lookrather silly when he wrote about Apple'sannual developer conference. "They arereadying a dizzying amount of newproducts. I wish I could camp out at anApple store during the conference on

7 August. I wish I could say more, butthat'd get me sued by Steve Jobs, and Idon't need that kind of heck right now."Come 7 August, the dizzying amount ofnew products turned out to be a slightlyf a s t e r M a c a n d a n e w r a c k - m o u n t s e r v e r .

Scoble was either misinformed, got veryconfused, or, for the conspiracy theorists.

1 ■ ■

, • m m "3MU. FECES LOOSaYJOMED■ ■

•According to David Weinberger, "on theweb, everyone will be famous to 15 people"

• Dave Winer incurred the wrath of women- and plenty of men too - by describingfemale bloggers as "beautiful babes"

was given wrong information to makeh i m l o o k d a f t .

Scoble wasn't the only high-profile

blogger looking a bit silly this month.When Dave Winer (www.scripting.com) attended the BlogHer women-bloggers' conference, he posted: 'Theywere good-natured, friendly, flirty,exceptionally beautiful, smiling... theyare beautiful babes, but not like boothbimbos... they're also bloggers!" Ian

Be t te r i dge ( t echnov ia . t ypepad .com)was one of many people whose jawsdropped. "How can anyone, in the 21stcentury, churn out this crap?" he wrote.

• Valleywag has been having a chuckle atthe expense of AOL users exposed by thecompany's leaking of search results

prompting reader Jane to note that"next he'll be saying that we can typefaster because of our little fingers".

The fallout from AOL's leak of userdata continues, with Valleywag (www.vaileywag.com) running a whole series- AOL Creepy User Watch - highlighting

bizarre search requests. The tamer

examples included user 1030784 ('Sexyold feet' and 'old granny footjobs') anduser 22646185 ('Latinas laughing at littlewhite dicks'). Of the Tatter searcher, Valleywag sniggered; "They probably ^won't be tapped for,an AOL; Fun forFamilies commercial any time soon."

f reevi f tuQlserversthe home of free web hosting

r -

Find out why we are one of the fastestgrowing web hosting providers in the UK

FREE Easy to Use Downloadable Website BuilderFREE Professional Website Tennplates & Design TipsFREE Flash Tutorials, Detailed FAQ's & Knowledge BaseFeature Packed Hosting Packages from £1.50 a monthMonthly Prize Draws with 2 Chances to Win an iPOD!£100's Worth of Software Free with every package.24/7 Online Helpdesk, Active Forunns & Regular Backups

20,000 Customersand Counting!Join them today:www.freevir tualservers.conn0 8 7 1 7 5 0 2 4 7 4

FREEH O S T I N G

F R O M

D O M A I NN A M E S

F R O M

PERSONALH O S T I N G

Om FROM .00| £1.50FOR L IFE I PER MONTH

WEBSITEDESIGN

2 FROM .991 tO-OOP E R Y E A R F O R L I F E

Part of Easy Internet Solutions Ltd All prices exclude VAT - Terms & Conditions Apply

Helping you builcllSjgi'websites.#c:,..,. ,;:-S^^lig:il

in association with -1

In Site Challenge, we rate your site tofind the best combination of design,usability, accessibility and content. Thetop site creator at the end will win afantastic hosting and PC package. Timeis running out, so enter your site today!

Monthly prizeEach month, we'll provide the winner of our 'Reader site of the month' with aprofessional, shared hosting account for a year (as sold for £96). With thispackage, you'll enjoy professional web hosting with the UK's largest web host;your web site will be hosted in Fasthosts' secure and reliable data centres, withlightning-fast response times and full redundancy. There are plenty of toolsincluded with the package, and you can find out more by visiting www.fasthosts.co.uk/ hosting/windows2003/windowsprofessional.

The highest-scoring sites will make it into our Top 20 (see page 17). And asyou make improvements, we want you to resubmit your sites so that you canmove your way up the chart - hopefully!

The big prizeAt the end of Site Challenge, the Top 20 will enter our grand final. The creator ofthe best site will win a fantastic PC and hosting combo. The winner will not onlyachieve the plaudits and respect of their peers, but will also get their hands on a

DS 200 dedicated server for a year (as soldfor £700), with their choice of operatingsystem (Windows or Linux). See www.f a s t h o s t s . c o . u k / D e d i c a t e d S e r v e r s /

w i n d o w s 2 0 0 3 / d s 2 0 0 f o r m o r e d e t a i l s . A s w e l l

as this top hosting package, the best site willwin its owner a high-spec PC,

Enter now! Show off your site-building successes here. We'll give you feedback,and you could win a prize! Email your site to [email protected]

16 Novembe r 2006 Practical wotxiesign

in assoc ia t ion wi th S i te Chal lenge— ^ O

BackgrountJStardrtg UpTa c t i c s

Army ShowcaseBatde ReportsH o ( ; s e R u t e &

T u t o r i a t s

P a i r t : S c h e m e s

C o o v e f s k x i i s

C o r . c r s l o o

G i J k J e s

G e r ^ t a l

Other Armli^space Mann?^N e a o f t b

E M a r

D a r k E k t a r

Imperial GuardSQ&ce

M a r i n e -

D ^ r r > : H u n l : : : S

W i t c h H u n t e r s

T^ranidsO k s

People's personai styte tastes tend to differ greatiy. Some pec^ prefer light designs, some preferdarter ones. This page allows you to change the desl^layout of this website to suit your persorwlpreference. Below are screenshots of the different designs we have to offer - we have tried tore-aeate the designs that Tau Online has used In its 5 past verstons as best as possible for many ofthe design d>oices. To d^nge to the look you want, click on the relevant saeenshot/lmage of thatlayout

If you tried changing the kx>k but nothing seemed to happen, please refresh your page (usually bypressing CTRL F5). If this didn't work, please make sure tt>at you have enabled on vourbrowset. Please note: At tWs time OT>ly saeen/mor^itor users can use this feature; (I.e. those usinghancfiKild devices cannot change the design). Sorry for the incxHivenience.

•Tristan's website works on the majority ofbrowsers and remains clear in a range ofsc reen reso lu t i ons

designverA fine example of simplicity overcomplexity. The search facility istucked away, though, and it feelstext-heavy, but otherwise It's atemple of absolute accessibility

R A T I N G S

• If you find that the stark blue is clashing with your T-shirt, simply change the site design to something else

D E S I G NU S A B I L I T YA C C E S S I B I L I T Y

1 8 / 2 52 1 / 2 52 5 / 2 51 8 / 2 5

8 2 / 1 0 0 .

Practical webdesign November 2006 1 7

I ' T n i ' i i n M i i i i i n

Site Challenge in association with fasthosts

Work and Live in LondonCreated by Ben van den HeeverU R L w w w. w o r k a n d l i v e j n l o n d o n . c o m

"The most challenging part ofthis site was laying down the

groundwork. I thought aboutthe dynamics of combining Flash withHTML, and found that slicing up mybackground in Fireworks and thenexporting the HTML table code toDreamweaver was the simplest approach.In Dreamweaver, I replaced the imageswith CSS background images. I then

imported the GIFs of the sliced-upbackground image into Flash, where Ianimated them and imported the moviesinto my Dreamweaver design.

"I enjoyed the animation the most, andovercoming the layout challenge with aCSS wrapper tag was also rewarding.

"I'm currently adding an onlineconsultation facility using PHP and HTMLsession variables. As I made this site for anestablished company, my objective was to

give them more than what was asked ofme, to promote further business." • The garish colour scheme isn't so bad if you're a die-hard UK flag waver, but something

more subt le would have been n ice

•The pictures in the gallery could do witha bit of a makeover

design verdict1 The photos need sprucing up a bit

and a litt le explanation wouldn'tgo amiss. There is also far moreinformation about the companythan is entirely necessary

RATINGSD E S I G N 1 3 / 2 5U S A B I L I T Y 1 2 / 2 5A C C E S S I B I L I T Y 1 3 / 2 5C O N T E N T 1 1 / 2 5T O T A L 4 9 / 1 0 0

Created by Kristie Brewer & Gerardo San DiegoURL www.c t s .usc .edu

"Our goal for this websitewas to present a massiveamount of information

(550 pages and counting) on a websitethat both patients and medicalprofessionals could relate to. Ourapproach was to keep things cleanand simple. We also worked onmedical illustrations, animations and

streaming video, as well as helpingclients with research, writing and

editing content."We used CSS and nes ted

templates to make the look and feelconsistent and easily updatable, andcreated static HTML pages for

portability and to maximise searchengine rankings. So far, the site hasworked pretty well. If you do a

Google search for either 'heartsurgery' or 'lung surgery', you'll seew h a t w e m e a n .

"Out of the whole site, we're most

proud of the Patient's Guide areas,which speak directly to those whomwe serve: the patients."

-Getting to the point quickly is always agood idea, and breaking large amounts ofdata into manageable chunks is even better

P n c U c a lt i design verdictYour site is informative and easyto use, as the information isb r o k e n d o w n i n t o c h u n k s . Yo u rscore would improve with betterinteractivity and accessibility

R A T I N G SD E S I G NU S A B I L I T YA C C E S S I B I L I T YC O N T E N TT O T A L

1 8 / 2 51 7 / 2 51 3 / 2 51 8 / 2 5

6 6 / 1 0 0w

Horrx > Videos > Robotic Assisted Surgical Treatment of Atrial Fibri l lation with Guidantfl e x - 1 0 M i c r o v a v e A b l a t i o n r

V i d e o s

Robotk: Assisted Surreal Treatment of Atrial FibriHationw i t h G u k l a n t F l e x < 1 0 M c r a w a v e A b l a t i o n

u s e C e n t e r f o r A t r i a l F i b r i l l a t i o n

Mark J. Cunningham, MDA s s i s t a n t P r o f e s s o r

Department of Cardiothoracic Surgery

This video requires a Quickti me player to be installed on your computer. If you don't have a Quicktimeplayer already installed^ please download the free aoftvare from the Outc ktime Web Site.

' Despite suffering from a general lack of user interactivity, the CTS site includes eyecatching, high-quality media elements

J


B r u u u c e . c o mCreated by Simon TwiningU R L w w w . b r u u u c e . c o m

"The site just evolved byaccident rather than design.I went lool<ing for Bruce

Hornsby fans when I first got internetaccess, and began a one-page poll foreveryone's favourite songs. More pollsfollowed, and after a while I wasgetting emailed concert photos, thensome words about the gigs - so it allt o o k o f f f r o m t h e r e .

"The visitors are a pretty eclecticbunch and are really keen to get

involved, so it's not such a difficult siteto maintain. There are some giftedmusicians, too - we put out a doubleCD last year. The highlight, though,has been the annual charity day,when I upload different MPBs on thehour over a 24-hour period. That gotmore than $2,000 (£1,050) in PayPaldonations last time around, all for

multiple sclerosis care."

' There are plenty of reviews to read butthey lead away from the site

P n c t k a l

designverdictT h e s i t e s c o r e s l o w o n

accessibility, yet makes up for itwith content and design. Reviewstake you away from the site: whynot add more content yourself?

R A T I N G SD E S I G NU S A B I L I T YA C C E S S I B I L I T YC O N T E N T

. T O TA L

1 5 / 2 51 2 / 2 5

9 / 2 51 9 / 2 5

5 5 / 1 0 0 ,

7 .Standing on the MoonPonland. OR (6.5^)Juiy 14 :t(>u6xi downhMcis «o for

A u s n s t 6 C o u n t r y D o c t o rR n i o , N V 1 5 . 7 2 m l ) )

Juiyi:t 2(M)652 downloads so &r

August 5 DresmUndP o n l a n d , O K ( 6 . $ 5 i n b )

48 downloads so for

» (You Sexy Thing)Sa ra toga . CA(g . s :unb )J U l y 2 U 2 U ( > 672 downloads so fiir

A t ^ u s t K u n l l o w n ^ C a t > K i n gi l « n « « tP o n i a D d . O R ( 7 . S 4 i n b )July 14 2wi67u dow nloads so far

A fan's perspective of his idol looks good and reads well, but there's considerable roomfor creating more of a 'community' feel

B i a c k b u t t - O n l i n eCreated by Jacki AndersonU R L w w w. b l a c k b u t t . n e t . a u

^ "I started Blackbutt-Onlinenearly four years ago as acommunication portal for both

t h e r e s i d e n t s o f t h e d i s t r i c t a n d t h e

people who were interested in the area.The site initially comprised five pages, butafter four major facelifts, it now has 29

(with more to come)."Th is vers ion is the fi rs t I ' ve c reated

that relies entirely on CSS for layout, withtables used only where necessary. Animportant aspect from the beginning wastha t t he s i t e wou ld be access ib le and a l l

code would pass validation."As it's also my first proper attempt at

using PHP and MySQL, this version hasbeen a major learning experience that hasm a d e m e i t c h t o l e a r n m o r e . "

^ Blackbutt-Online

y r : : —• s s e : —

I 'J . . ™

: : r ' '

-Blackbutt-Onl ine has a ser ies of c lear andaccess ib le fo rums

> The colour scheme isn't the most

glamorous, but who can argue with Priority3 accessibility?

"odesignverdictThe site has reached Priority 3for accessibility. However, thecolours and usability could beimproved, particularly HTML andC S S v a l i d a t i o n

R A T I N G SD E S I G NU S A B I L I T YA C C E S S I B I L I T YC O N T E N TT O T A L

1 3 / 2 51 4 / 2 52 3 / 2 51 5 / 2 5

6 5 / 1 0 0

Qoii Ckfh

The photos are colourful and small enough to facilitate a quick download. Good use of blues k i e s m a k e s f o r e y e - c a t c h i n g v i s u a l s '


Site Challenge in association with

B a m b o o B a r c o d eCreated by Steven CarrU R L w w w . b a m b o o b a r c o d e . c o m

"BambooBarcode began asa means of getting a friend'sm u s i c a l c o l l a b o r a t i o n s i n t o t h e

public eye. The site was constructed, andis maintained, using Notepad.

"It soon became apparent that this wasa serv ice we could offer to other ar t is ts .

When the requests started coming in,I was amazed at the global reach the sitehad. Soon, there were bands from

America, Europe and Asia filling its pages.It's not in the same league as MySpace,but you never know... perhaps one day."

jiMISIBMiljB a n d s & A r t i s t s

[ INSIST Ssn

• Sections such as Bands & Artists would be

more accessible if the design was tweaked

E S I

- To sign up for BambooBarcode, you'retaken away from the general look and feelof the si te i tsel f

designverdictThis is a great start, especially Int e r m s o f c o n t e n t . I t c o u l d b epresented better by taking Intoaccount accessibility and goodgraphic design


. TO TA L

1 2 / 2 51 1 / 2 51 3 / 2 51 6 / 2 5

S 2 / 1 0 0 i

T I M IiBRHBtn l

Free hosting for unsignedb a n d s a n d s o l o a r t i s t s .

T h i s S i t e

N E W S !

2nd September 2006August's Top 10 Downloads is published andthere's no chanoe at the lop. Her Pretty Face

make it in to the fop 10 at their first attempt andfor the first time ever there is a video in the chart!

30th August 2006A n o t h e r t w o n e w t r a c k s f r o m D a n i e l N a e d h a m .

25th August 2006Daniel Needham is back with a couple of new

t r a c k s .

20th August 2006Some people find solace in prayer, some people

find solace in a bottle. Look no hjrther peoplet>ecause we've got Solace right here.

18th August 2006A big BambooBarcode welcome to Jaav.

1 4 t h A u g u s t 2 0 0 6 iThey are going to have to change the name of theCape a Good Hope to the Cape Of Good Music. I

From Stellenbosch in South Afhca. this is HerP r e t t y F a c e .

;Top 10 Downloads ForJuly 2006

IfCKYBERIHj

i 01 TomofrowComesTodavSubliminal Music

'aitinqForYQuD o r u

I og BfiaLSosjlAfid■°®QEY110 sOfAcceleration

Eungte (Video)

'Steven's design could benefit from a makeover, graphically speaking. There's decent enoughcontent here that's aching for a larger platform

Antoria ImagesCreated by Craig iVIaddisonURL www.antoriaimages.co.ul(

"My main aim was to design a professional and user-friendly website thatuses CSS for style and layout. The site was developed using XHTML, CSSand JavaScript, and my toolbox comprised Dreamweaver, Photoshop and

the Flash Video Encoder. This is the first time I've embedded Flash into my pages, butthe whole experience was painless using the Dreamweaver Insert function.

"Making the site cross-browser compatible was the biggest challenge. After sometweaking, it now works successfully in all those I tested.

"This was the first site I've designed for a client, and I was very pleased when hesaid the site was 'fantastic'. The next update will include a contact form to make iteasier for users to send emai l . "

■^odesignverclictThis is excellent, in particular, theFlash gallery is implemented well.CSS validation would help, andc u s t o m e r t e s t i m o n i a l s w o u l dmake your site more welcoming


J O T A L

1 9 / 2 51 7 / 2 52 2 / 2 51 8 / 2 5

7 6 / 1 0 0 ,

Black backgrounds are oftenassociated with photography

A n t o r i t i l m a g e sW e d d k i g T h o t o ^ o p h y

T e 4 : 0 1 9 1 5 ? 6 6 4 7 i

M o b 0 7 9 7 0 8 1 2 7 6 0M e v i e m o s s ' V f s m a t i n r t

We dfe based in Mrt ton- ie-ho le in Tyne ( I Wear and OKI provtde Jfo r a t ) t ypes o f pho tog raphy requ i remen ts . An to r i a Images have o

^ S years of experience in Wedding Photography. Throughout our (tm<• J- photographers, we have covered mo« tyff rom Civ tc Cent res , Churches, Cast les an<

A n t o r k i l m a g e sWed<*r>9Pr»o«ogfaphy

s ■ {

K m a t i o n o n t h i s w e b s i t e h i g h l i g h t s fi v e o f o u r m o A p o p u l a rg Pho tography packages . The N ico te Serv i ce , VHto r ia ServKe ,! Serv ice , I ta l ian Pear l Serv ice and the Contemporary A3 Serv ice ,> also offer OVD Slidestiows of your speaal day, for a cost of only

Te l ' 0 1 9 1 5 2 6 M 7 1M o b : 0 7 9 7 0 8 1 2 7 6 0

E m a i l , s t e v i i ^ m o i s d t f v r a i l n e t

The site's gallery makes practical use of Flash technology without going over the top


Top 20 sitesA very close new entry, but the Home ofJon is still topping the charts

Heliasz DesignsCreated by Henrik HeliaszURL www.heliaszdesigns.net

"This website acts as a self-promotion device, but with a lot of other

things, too. What I'm most pleased with is the overall set-up of thepage - where I placed the elements, etc. I think it looks pretty good.

"This is Dreamweaver, Photoshop and Illustrator work. And, even though I'mfrom Norway, I'm doing everything in English on my Apple Mac. I designed withthe importance of CSS in mind, and used it quite a lot, and I now build almost

pure CSS sites out of personal preference."The most challenging part of creating the site was getting the many

different elements to fit together, and I'm happy with how it turned out.I enjoyed creating the simple slideshow in Flash using as few lines of codeas possible."

i f i a H E L I A S Z^ ^ I D E S I C n S

» . y V y \

A '•To extend a metaphor, the seeds have been sown here, but this design site needsplenty of water and sunshine before it bears fruit

H E L I A S Z/ / m o u r

/ / M T U H f

k ^ i D E S i c n s / / o K m m

/ / C O n T A C T / / M o m s H m

WmHhqV y V y V J< * ' * } , < » i^ w y v l

' it sounds simple, but if you're showing off your photography, be sure to includephotographs in your gallery

deagnverdictPages still under construction isnever a good sign, and the sitehasn't been updated for a while.However, with a bit of focus, thiscould turn into something good.

The Home of Jon

Created by ion HaywoodURL www.thehomeofjon.net

Created by Tristan PerryURL www.tauonljne.org

V a n i l l a t o w n

8out o f 100

out of 1od^ ^

out o f 100

o u t o f t o o

" S 3

Created by Mike MesaURL www.wanillatown.com

R a n d o m B M X

Created by Andrew BrowningU R L : w w w . r a n d o m b m x . c o m

Hominidi WrestlingCreated by Jouko VirkkunenURL http://hommidl-wrestling.jnfo

MK: masteringCreated by Rob McKenzie KitchenURL www.mkmastering.co.uk

Brown BagCreated by KimbeWyMcCauieyURL www.brownbagideas.com

L i v e 2 n i t e

Created by D Bonllias & S BrignanoU R L w w w . i l v e 2 n l t e . c o m

pS German Genealogy: Created by Jerry FrankI URL www.s9gee.org

BlueDepthCreated by Terry GoodingURLwww.bluedepth.co.uk

A s t e r e o s t u d l o' Created by Andrew Ciemente[ URLwww.astereostudio.com

Tenn l sc l ub L l nke roeve r

Created by Johan Van GriekenI U R L w w w . t c l o . b e

I LlamMullone Comediani Created by Llam Mullone

URL www.mullone.co.uk

1^ HouseProfesslonalso u t o O O O

Created by Lee McGarricalURL www.houseprofesslonals.com

It's hard to fault Jon's site, exceptthat the chrome effect looks dated, jIt's also a little sterile for a site 'that shares his personal work.

A fine example of simplicity overcomplexity. It feels text-heavy, but ,otherwise It's a temple of absoluteaccessibility. Priority 3, no less...

The site looks cool and conveys thevitality of the Vanillatown act well, j' It's well organised, yet feels 'endearingly chaotic

This Is a fantast ic s i te. I t 's wel l

designed, with some great content, |top-notch photography and great 'Flash video cVips.

This Finnish backyard-wrestlingsite has sweet visuals, great idesign and Flash video clips. iB r i U l a n t s t u f f !

This site has a simple design anda simple message. It's a breath of jfresh air compared to some of our \more confusing entries.

Practical webdesign

Urban Address Real Estate

Created by Roger Crandall. U R L w w w . t h e u r b a n a d d r e s s . c o m

Memories In Glass

gMapa^iM Created by Neal RobinsonURL www.memorles-in-glass.com

SayBoxWlf9WfTV }SS' ' Created by BenedictWilsonURL www.5aybox.co.uk

My Classes

SSSiEmM utm^ci re^r fAntoria Images

. J Created by Craig Maddisoni t^ URLwv^.antorlaimagesxo.uk

The Pig FarmerCreated by John MaxwellURL www.theplgfarmer.co.uk

This is a brilliant showcasethat presents Kim and Kyle's iphotography in a colourful, hin *

^ and accessible manner.This Is such a great Idea for awebsite, and well executed, too. jThere's loads of useful content *gathered in one handy place.

Jerry has taken the great contenthe inherited and created a site ithat makes It a breeze to access ^and a great resource.

Many web designers discountaccessibility, but it's good |to see that Terry's site passes 'theW3C Priority 1 checklist.

This site passes W3C site validationand Priority 1 accessibility <guidelines. Clean design andthoughtful use of white space.

If we lived in Antwerp, we'd jointhis club. Like the website, it |looks like an accessible, organisedand fun place to be.

Copy and paste is your friend!Despite little know-how, the sitefeatures excellent design andplenty of laughs.

This site has had a fair bit of

investment, and it shows. Clean <design, good content and clearnavigation are all present.

That class in web developmentserved you well. You've createda site that looks professionaland Inviting.

Despite the odd clumsy phrasehere and there, there's no doubtingtha t Nea l has c rea ted a s i te tha t ' spacked with excellent content.

Great stuff - having a live demo onthe front page Is not such a goodIdea, though, especially whenpeople are swearing in It.

This Is a really great resource,showcase and point of contact for |your students. Navigation is a littleconfusing, however.

A n e x c e l l e n t w e b s i t e . T h e F l a s h

ga/lery is implemented well, but itcould benefit from a couple ofc u s t o m e r t e s t i m o n i a l s .

A good, accessible website thatfeatures well-considered designelements. Some image placementis a bit suspect, though.

D E V E L O P M E N T

Spot the technology

Ql was wondering whattechnolog ies were used in theca ta logue sec t ion o f the www.

fossil.com website. They have it set up sothat pages turn l ike a real catalogue.I noticed that the pages end in .jsp, so I

figured it might be Java Server Pagestechnology. The websi te a lso usesJavaScript code, so I thought i t might bethat as wel l . Any ideas or insight wouldbe g rea t l y app rec ia ted .A d a m M c C l u r e

Ph i l Hosk i i t s says . . .Good question, Adam, as it highlights howmodern websites make use of a variety oftechnologies to deliver their online content.A quick search for www.fossil.com on Netcraftshows us that the server is running Microsoft-IIS/5,0, but this doesn't help us identify theother technologies that the site uses.

You're right though: www.fossil.com usesJSP (Java Server Pages) to serve its site, as wecan tell from the .jsp extension. JSP is a server-side technology, in the same way that PHP or

^iityKeirwonllirlCTH 113 Shoopng Cot - g

« - F r . i t I ' S " t - S f c - 7 8 - 14

C t w t o m t t r C a r * : l - S C S - t i : - " T i : • f t l w e y » S a w r t y " ■> « v f o w * i c c « * * n f c ' L P

C o m p a r y M o c " i — i n i i J o t M 4 | F o « « l - t S l o r e

« 3 0 0 6 F M 9 1 « I C

S G N U T t e ' t h * C ATA L O G

D O W N L O A D i s r t h * C ATA L O G

S S ( N B A O A O I A N D V I O e O

m m

• Fossil's beautiful online catalogue uses a tightly embedded Flash movie on a JSP-driven site

• Netcraft gives us Information about the servertechnologies used by wvvw.fossil.com

ASPNET are, and Fossil is using it here toi n t e r a c t w i t h i t s d a t a b a s e s a n d c r e a t e t h e

dynamic content for its site. As with a lot ofsites, it combines this with JavaScript on theclient side to add interactive features, as wellas determining web browsers, and maintainingthe shopping cart.

The catalogue section you refer to usesa different technology again. If you load thecatalogue and right-dick on it, you'll see thatit's actually an embedded Flash movie, and the

page-turning effect has been created as a Flashanimation. Notice how it's been tightly

integrated with the rest of the site; when youclick on an item in the catalogue, it takes you

back to the JSP-generated page for thatparticular item.

While combining technologies makes a sitecomplex, it provides a richer user experience,which is essent ia l fo r a success fu l s i te .

iiThe page-turningeffect has been createdas a Flash animation.Notice how it's beentightly integrated

Practical webdesign

D E S I G N

Middle of the road?

Ql've developed a few sites, but thething that gives me the biggestheadache i s no t I tnowing whether

to create a centred, lef t -a l igned or fluid

layout. Which is the best practice to use?Carl Ogden

Pau l H«>sk ins says-it comes down to personal preference. Thereare pros and cons for each style, and you'lloften find certain styles suit different projectsbetter than others. From a visual design pointof view, I believe centred layouts work best.

Fluid layouts were born when screenresolutions improved: they enable designers tocreate layouts that fill the screen no matter

• Many of the major commercial news websitesstill use the left-justified layout design

what size of monitor it's being viewed on.While this style has become popular in recent

years, it seems that centred layouts are againthriving since the emergence of Web 2.0. Left-aligned layouts are much less popular,although news sites, such as BBC, FT and SkyNews, still use them.

There are many web developers who arguethat fluid designs are the best layout style, as

they provide the most information on-screenwithout the need for scrolling, and pages lookt h e s a m e o n d i f f e r e n t m o n i t o r s .

While this may be the case, the popularityof blogging, and of sites such as MySpace,

Q Blogger

illustrate that users are quite happy to scroll

endlessly up and down to find the contentthey are looking for, which is why centred,column-based designs are becoming so

popular now. Also, I have yet to find a trulyinspired site design that's using fluid layouts.On the other hand, the internet is alreadylittered with great centred sites, which areeffectively using space, symmetry and clean,crisp visuals. In some cases, a website's use ofmulti-layer backgrounds, which replicate thecentred-page design's colours (for example,vvww.blogger.com), give the impression ofa full-width design.

/H:h your Blogser or Googlc Accc

Search btogs from across the web wth Google Btot Se«fch.

Explore btogsB L O C S h k f w n e

U P O A T E O A T e x t t w n e m a k e o w r

1 8 : 3 9 . ' i o t o u y * F o i

B L O G S O F N O T E

OO The Ubucon BlogR A N D O M B L O G $

What Is a blof^

m ^ ^PubHshthoughts

G t tf e e d b a c k

P o s t

photosG o

m o b i l e

Create a blog in 3easy steps;

C r e a t e a n a c c o u n t

Name your blog

choose a template

T A K E B E T T E RS C R E E N S H O T SA good screenshot toolalways comes in handy. .. !:WinSnap Is a new option, .rfloffering features such asthe ability to capturenon-rectangular areas and automatic drop shadows.Best of all, it's free. Visit }www.ntwind.com to find • §o u t m o r e d e t a i l s . , ' 3

•Centred styling createsthe i l lus ion of a fu l l -width

page design, even on ahuge monitor

Microformats explained

QA friend of mine keeps telling me Ishould be us ing mic ro fo rmats on mywebs i te , bu t I don ' t rea l ly know what

they are. Am I the only webmaster who doesn' tcurrent ly use them, and what wi l l they add?Wayne Andrews

Alex Hay lock says...Microformats are a relatively new spin on an oldidea, and are quickly gathering popularity among

"VXHOOf. LOCAL MAPS

< M«stiup a Eacug Lund)» whera 3.0 Going i-n-T-l wch ttis siW e M o w S i ^ p o r t i m « g # r r »

M k r o f o m i a t s

•A strong endorsement for microformats is the fact thatYahoo Local and Flickr now support them

developers and web companies such as Yahoo. Putsimply, microformats provide a standard way to structurecommon data, using existing technologies such asX H T M L a n d C S S . T h i s s t a n d a r d s t r u c t u r e h a s a s e m a n t i c

value for both humans and computers.The fact that they're understood by computers means

m i c r o f o r m a t s r e m o v e o u r r e l i a n c e o n t h e w e b ' s m i d d l e

men. imagine the ability to list auctions on your blog,rather than eSay; or your curriculum vitae on yourwebsite, rather than Linkedln. Third parties can trawlyour website and make sense of your content, enablingyou to create large distributed databases without youbeing tied to any particular service.

You're thinking this sounds like a poor man's XML?XML and microformats do share a similar overall goal,but the advantage of microformats is their simplicity:

they're designed for humans first and computers second;and they use XHTML and CSS, so developers don't needto learn new skills. Also, integration with existingcontent is more logical than combining pure XML with

your web pages. Microformats are straightforward, witheach one being designed for a specific problem.

To fi n d o u t m o r e a b o u t h o w m i c r o f o r m a t s c a n b e

benefical to your site, visit www.microformats.org. There

b l e « w i h c o t e

A b o u t m t c r o f o r m a t s

a b o u t m l c r o f o n n « t s t h a n k t

Designed for humans first and mactwtes second, rmooformats are aset of sitnpte, open daca formats buA upon existing and wideliradopted standards. Instead cf mrewrig away what «rarts today,microformats intsnd to solve simpler problems first by aitaptmo toeurmnt behaviors and usage oaoems (e.g. XKTM., blogging).

w m t c r e ^ t n i a t i

JSSSSiLm T a g s , K « y w > n k , C a t » 9 o n » «

f n l c r o f s r m a t i a r e

• away ofthmking about data

• design prmciotas for fonnats• adaoted to current behaviors and usage patterns CPavt tM

cowpaj^ i f , - )^ s e m a t O c x w r w u , A K A r t a > . w a r i J

• Microformats.org is the home of microformats, andis a great source of information on the subject

are also handy microformat plug-ins available forDreamweaver {www.webstandards.org /ac t ion/dwt f /microformats) and the blogging system WordPress(wordpress.com/tag/microformats). These should bothmake the development of your website that little bitmore straightforward.


Ask the Experts

K E E P TA B S O NY O U R P R O J E C T SIf you've got severalprojects on the go, it canbe useful to track how

long you spend on each- especially if you'reworking for paying clients.S l i m T i m e r i s a w e b - b a s e d

tool you can use to keeptime while you work. Try ita t v v w w . s l i m t j m e r . c o m .

B U S I N E S S

Help wantedI'm in the process of start ing my

■ ■ own online business. However.my site idea is so complex that I

t h i n k I ' l l n e e d t o a s k f o r a d v i c e o n t h e

software/programming elements requiredto set it up. Are you aware of any ofwebsi te adv ice companies that can he lp?Irena Hindy

Ph i l Hosk ins says . . .It very much depends on how much help youreally need - I know that sounds like anambiguous answer, but bear with me, as thereis some logic behind it.

If you're a confident web developer/designerwho just needs some support with the really

•Access ins tan tsolutions to your mostdemanding webdevelopment problems

. Q a n c e; -t

e M K C O c o w s

complex stuff, then you'llbe able to get answers tothe majority of your

questions on forums andtutorial sites. A goodplace to start iss o m e w h e r e s u c h a s

The Experts Exchange

(www.experts-exchange.com/Web).

On the other hand,if you have limited

experience designing andbuilding commercial sites,then I strongly advise yout o l o o k f o r a n

experienced developer,a n d a s k t h e m t o

contribute to your projectfor a fee. If you're willingto pay for help and

advice, there will be lotsof web developers out there who would be

glad to help you solve any software andprogramming issues. You could either look forhelp on a local directory like vwvw.yell.com, orpitch your project to freelancers on amarketplace site such as vwvw.elance.com.

Whichever route you choose to take, makesure that you take the time to first create a site

layout and a rough design, and then defineexactly what you're trying to achieve. This way

Find the Experts You Need to Get the Job DoneE I M C . - T h . W m M - i L . r g . t t O 1 1 I . M l u t t W o r t i fi M . .

(

O v w u « « « B a n c * m 2 0 0 S t o p M t r M q u « t * * m 4 a n« l e b * l p r o g r a f W M n . w t l t o r s a n < l M t m p r * f » » » t o A a ( « .

• Elance is the world's largest online services marketplace and workspace

you're in the best position to seek specificadvice or to employ the services of a freelanceweb developer.

Got a question?If you have a web-related query, we'll doour best to answer your question withinthese pages. Simply drop us an email at:

pwdexperts@f utu renet.co.u k

D E V E L O P M E N T

Copying a websiteI want to make a copy of a site to use as a

■ ■demo. We won't have an internet access,s o i t m u s t r u n f r o m a C D o r h a r d d r i v e .

Eric Hurdman

» 0 * m m )

• iH r r

Alex Hay lock says...Take a look at HTTrack for help with making afunctioning offline copy of your website. Feed it a URL,and it will follow all the links from that front page.

HTTrack will also update the site's links in your copy, sothat they will all work locally from the offline, and thewebsite will run straight from a CD. You can installH T T r a c k f r o m v w v w . h t t r a c k . c o m .

J C S Z ]

: a s r -

C R E AT E A N E W P R O J E C TGive your new project a name. In this example,we are going to make a backup of BBC News,

and we've created a project category called News Sites.Also, make a note of the Base Path: your website willbe created in here .

oS P E C I F Y T H E S I T E U R LSelect the action Download Websites, and addthe URL of your site. Optionally, specify the

login information if your site requires it. To get aroundthe problem of complex URLs or forms, you can click theCapture URL button.

oS T A R T B A C K I N G U PClick Finish on the third screen, and HTTrackwill start backing up your site. If you're

backing up a large site, or using a slow connection, thiscan take a while. Avoid backing up BBC News unlessyou have a lot of time and disk space!

2 4 N o v e m b e r 2 0 0 6 Practical weodesign

WE B S E RV E R S

Opening up a network

Ql have a web server on my homen e t w o r k t h a t I ' d l i k e t o m a k e

a v a i l a b l e o n t h e i n t e r n e t . I h a v e a

Netgear wi re less router that prov ides myinternet connect ion. Can you ta lk me

through what I need to do to make thisavai lab le to the outs ide wor ld , p lease?

Lucy Partridge

A lex Hay lock says . . .Most ADSL routers make it straightforward for

you to expose parts of your internal networkto the internet. Before you do, however, it'sworth considering a few points.

First, ADSL connections are geared for

consuming data, rather than serving it. Speedsare typically weighted towards download over

l; •ettings

i r .

— I

•You can define your DMZ server under WANSetup on most available Netgear routers

uploads, which means theperformance of your website maynot be as fast as you might expect.

Secondly, you need to considerthe security implications. Opening

up part of your networkpotentially exposes you to attacks.Keep your server up-to-date andfirewall your network PCs tominimise any potential damage.

Assign your server to yourrouter's DMZ (Demilitarized Zone).A DMZ is a separate subnet on thenetwork exposed to the internet(the separation makes it difficultfor hackers to gain access to therest of your network). Netgearoffers help at kbserver.netgear.com/kb web files/n101146.asp.

If you don't have a DMZ option,

you'll need to set the portforwarding on your router toforward requests on port 80 to

port 80 at your web server's IP address. Yourrouter will pass on HTTP requests.

For a finishing touch, go and grab yourselfa free sub-domain for your web site from

N o - I P . c o m; supposr i; downloads i; compaiw j

EmuIi I

PaMwont: I

:: SaivteMMmetd MS: NcMP Free (>yn«ntc CMS and URL R9*ection

ManagedDNS: Free Dynamic DNS

Tired of remembering your IP address?

Use our No-IP™ Free DNS ancj redirection service to map a static ordynamic IP address or long URL to an easy to remember sitbdomalnsuch as youmame.no-ip com.

a Run a server on a dynamicaify assigned IP■ Remotely access your computer■ Industry leading d mlc DNS (DDNS)■ URL redirection / port 80 redirection■ r e c o r d s■ Support for S sutidomalns.■ For personal useB Free Dynarn'c DNS update client

Try us out for fretN o - I P F r e e i s o u r e n t i y l e v e l s e i v i c e U s e y o u m a m e n o - i p . c o m m s t e a d o f a h a r d t o

remember IP address or URL Addlt ionally use our dynamic update cl ient to iceep track of

your dynamic IP address. You will always be able to get to your computer even if you IP

address i e dynamica l l y ass igned .

App l i ca t ions ■ H « - P ' * P 1 u « M « n a o « d D N S

• Sites such as www.no-ip.com provide a dynamic DNS service that's well-suited to home servers

wvvw.dyndns.com or www.no-ip.com. Thesewebsites are designed specifically for homeservers and they enable you to map a URL to

your home IP address.

ii Consider the implications. Opening up part ofyour networl< potentially exposes you to attacksff

P H O T O S H O P

Create a pixel-effect background

Qi've noticed a trend for subtle pixel-patterned bac l ig rounds. is there a p lug- inor filter in Photoshop for this effect?

Trevor Ballaby

« BAutoSilKtUy*' □AutoSriiet&mpi 0ShowTm(bnnConlrob | ^ jl i J . i " . I * . I * . ■ P . I l * P ~ . f * ■ 1 ^ I " 1 " I " ^

l l l l lt 1

oS E T U P T H E C A N V A S

I Create a transparent background (10x10 pixels),zoom to 1,600% and choose Edit > Preferences

> Guides, Grids & Slices. Set Gridline every to 1 pixels,and Subd iv is ions to 1 . Turn the Gr id on .

Pau l Hosk ins says . . .There are a number of pre-installed patterns that youcan use in Photoshop, but none offer a sharp, simplepixel pattern. The good news is that it's fairly easy to

D R A W A N D D E F I N Et Press D to reset foreground and background

colours, select Pencil tool and set to 1 pixel.Draw a line from the bottom-left square to the top-right. Go to Edit > Define Pattern and enter a name.

create your own. In this example, we'll create a simplecrosshatch effect - although with a bit of practice, andsome further research, you'll find that much moreintricate designs are possible.

I

©APPLY THE PATTERNCreate a new layer, and select the Paint Buckettool. In the Options bar set Fill to Pattern, open

the Pattern picker and choose the pattern you justcreated. Click in the new layer to fill. <

Practical ..^odesign N o v e m b e r 2 0 0 6 2 5

Ask the Experts

M A R K E T I N G

Where's my audience?

QI've been writing a blog for oversix months and update i t p re t ty

regularly, but 1 st i l l don't get verymany visitors. 1 use WordPress forpublishing and I make sure 1 ping my bloge n t r i e s e a c h t i m e . W h a t e l s e c a n I d o t o

ge t more peop le read ing my b log?To m M a s o n

Phil Hoskins says...There are two key factors to creating asuccessful blog: the right technical setup andthe right content. Because of the number ofsen/ices now accepting pings to inform a globalaudience of your blog, aggregate services suchas Ping-O-Matic (pingomatic.com) are now

popular. When you ping an aggregate system,it forwards your alert to many more individual

systems on your behalf. It's easy andconvenient - but is it the best option for you?

Many bloggers prefer to ping servicesindividually rather than use an aggregateoption. This enables you to target the servicesthat are most relevant to your blog, and gets

your message out even if the aggregate serviceisn't working. The drawback is that each blog

entry takes longer to post after you addindividual ping systems.

Try adding your own list of ping services fora few weeks and see how it affects your visitor

p i n g - 0 - m a t i cl i sWelcome to Ping-O-Matic(— Bus Detajls

BtoQ Name:

|httpy/RSSun.(0ptt0iMl):

|http7/s TO PfW (Check coimon)—

r WeWogi.com Iti**] F Sio.cp [We]r F«ad SurtMf nmk}r Faadstar |l«*]r BlogdggvCM]r Mor«ovw [Ik*]

News Is FfM [Mel

Specia l ized Serv ices

r SymicB [bnk]r My yahoo» [Unk]r glogRoMie [to*]r w«blogalot [Hnk]r Topic Exctang. [h*]

r Teclmorati [Hnklr NewsGator [hnk]r PubSub.com [link]r aiogStrset [link]r kierockot [Ik*] •Aggregate services such

as Ping-O-Matic areconvenient, but listingindividual services youiselfmay yield better results

statistics: WordPress publishes a list of optionsat codex.wordpress.org/Update_Services. Toadd addresses in WordPress, open your admin

page and click the Options tab, then choosethe Writing sub-category. You can addaddresses to the Update Services pane there.

If you're not getting the visits you expected,though, you should also question the contentthat you're creating. With so much materialnow available to read on the net, thestandards required to attract bigger audiences

have risen dramatically. It's no longer enoughto offer a funky design and a list ofentertaining links: the best bloggers out thereare now writing distinctive and compellingcontent. Look hard at what you've beenwriting, compare it honestly to the work ofother people writing in the same field andthink about what you can do to make yourblog stand out from the crowd. O

"he best bloggers out there are now writingdistinctive and connpelling contentff

Get in touch!f you have a web-related query, well doour best to answer your question withinthese pages. Simply drop us a line at:

pwdexperts(S>futurenet.co.uk@

A^lv«^^i^t9n «3 Faldfrs

43 Folders« DIne-O-Matic (and the Dashboard widgets we love)

Finding "Getting Things Done Fast"»

Ultradian Rhythms & the 20-mlnute BreakI had a Psychology teacher back at New College (wtra's now apparently an expert in the

Kllngon language), who used to talk about how the human body had these±90-minute cycles. And that if you could become aware of yours, you could doGreat Things — particularly because you could learn the optimal time to snag a napversus, say, try to cure small-cell carcinoma.

Not sure if this is exactly what he was talking about, but I am certainly fascinatedby the idea of ultradian rhythms:

Ultradians are the regular recurrence in cycles of less than 24 hours fromone stated point to another, as certain biologic activities which occur atsuch intervals, regardless of conditions of illumination.

Commonly used in sleep research to describe individual stages of sleepthat occur within intervals of an organism's circadian rhythm, andespecially to refer to the 4-hour ultradian cycle.

H e l l o

S e a r c h

A D D T H I S S l O e T O M Y

Te c h n o r a t i f a v o r i t c s

4 3 F o l d e r s i s

M e r l i n M a n n a s

s i t e a b o u t

persona l product iv i ty^l i fe hackstand simple

ways to make your life al i t t l e b e t t e r . M o r e »

A 2 L o v eA2 Host ing prov ides

s t e l l a r s e r v i c e f o r 4 3

Folders. Hosting plansstart at $2.9S perm o n t h . L e a r n n w r e »

» SHOP NOW

THE BRILll^4TLY

•Today's best blogs succeed because they provide a distinctive perspective that you're unlikely to find anywhere else on the internet

0) r ^

Qu ick -fi rew i t h . . .PaulHosl<ins

Q Can your e c o m m e n d a n yg o o d w e b

development/tutorialtips sites?Chris Davies

T h e r e a r e h u n d r e d s o f

sites out there, bu1»oneof my favourite places tos t a r t i s T h e W e b

Developers Handbook(www.devlisting.com).This fantastic portalorganises hundreds of topweb cfevefopment sitesinto handy, easy-to-navigate lists, and enablesyou to customise content.

QI've designeda f o r m i n

Photoshop as anintegral part of my site,b u t I h a v e n o i d e a

w h e r e t o s t a r t w i t h t h ec o d e . W h a t ' s t h e b e s t

way to approach this?Phil Bramble

There's actually a neatonline app called WebForm Factory, which maybe the answer to yourprayers. It's an open-source web formgenerator, whichautomatically generatesthe necessary backendcode to tie your form toa d a t a b a s e . G o t o w w w .

webformfactory.com.

Ql'm attemptingto op t im i se mys i t e f o r s e a r c h

engines, and wonderedif you had a checklist ofthings I need to gothrough befores u b m i t t i n g m y s i t e .Steve James

1 have just the thing;there's an online appa v a i l a b l e c a l l e d S E

Inspector {www.se-inspector.com). Push yoursite live, enter your URL inthe Web Page Analyzerand you'll be able tocheck its title, meta tags,links and keywords.

26 Novembe r 2006 Practical (>bdesign

Professional Web Hosting! ^ ^from a host you can trust

Star ter P lanIdeal for small web site £19.99/yr• 400MB UltraFast UK Web Space /• 1 0 M a i l B o x e s /• Easy to Use Web-Based Control Panel/• W e b S i t e S t a t i s t i c s /• W e b M a i l /• Outgoing (SMTP) Mail Support /One-off Setup £9.95

Windows 2003 ResellerBe a reseller without l imitationsall at a truely flat fee £50/mth• U N L I M I T E D W e b S p a c e /• H o s t U n l i m i t e d D o m a i n s /• A S R P H P & A S P N E T /• C o l d F u s i o n M X /• F r e e S e c u r e S e r v e r S p a c e /• UNLIMITED MySQL Databases /• FREE 5 MS SQL Databases (limited Period) /• R e g u l a r B a c k u p s /• N o H i d d e n C o s t s /

Managed Dedicated Servers

SgNEW Server Hardware /Free upgrade every 12 months /Full Control over server /Firewall Protected /2 IP Addresses /Instant Reboots /Plesk 8 Control Panel supportingUNLIMITED domains /Server and Port Monitoring /Your Own Name Servers /

Security Updates /Service Level Agreement /

Assigned Project Manager /Additional options include

Stand-by serverLoad BalancingMS SQL Server

From £99.99/mth

Thousands of web sites hosted in our secure data centre based in Nottingham, UK.Backed by 24/7 friendly in-house expert technical support who are committed and

dedicated to meet and exceed your expectations.

www.cwcs.co.uk0845 [email protected] M A N A G E D H O S T I N G

Prices Exicude VAT. Major Credit Cards Accepted.

'This C lrts-fc^ la/s((/L C/6U1 beKore popu-idr-t 1aA S>CiV\ Oul

Just give your friends and family subscriptions to theirfavourite magazines. They'll get a whole year's worth ofpresents (as well as the gift card we'll send you for free!)

As it's Christmas, you can save as much as 40% (our bestsaving of the year), so you'll have enough left over to treatyourself too!

ff ias-h Chrts-bvv Ls ail OJ d -fnemiss ( j f s c / r i p t i 0 fi s . b e t V u g f

odck'e^ kjo presen.-ts -hincJ: sudh lyiWes-ts

myfavour i temagazines.co.uk/christmas

To enter this special Christmas site, please enter code 031X.Alternatively, call 0870 837 4722 and quote code 031X

W e b s i t e M a k e o v e ro

- « - We b s i t e

Spruce industrieswww.spruceindustries.com

Spruce Industries offers "product leadership for every sanitation need", butCraig Grannell says the company's website needs sonne cleaning up itself

Oaniel Josephs is the generalmanager for New Jersey'sSpruce Industries, a distributor ofjanitorial and sanitation supplies.

"We sell anything from floor finishes, mopsand buckets to foaming hand soap and auto-

scrubbing machines," he says. He goes on tosay that the company website - which offersmarketing information and online purchasing- is rather unique in its field: "There are very

few janitorial and sanitation supply websites,and even fewer that offer online purchasing.If we could be one of the first companies tocombine a great online store with plenty ofinformation for visitors to read and educatethemselves, I think our small company has achance to grow."

The first version of the site was crafted

by Daniel three years ago. "It was a purely

informative HTML-based site, and you couldnot purchase anything from it," he explains."But about ten months ago I put the finishingtouches to the new site, and we went live withour online store." Again, Daniel built everythingfrom scratch, writing all his own code and HTMLwith a text editor and Dreamweaver. Since then,the site has been updated regularly - as oftenas four times each week. "I try to add newinformation as frequently as I can," says Daniel."But although I manage the website, it's notmy only job, so I can't devote every free minutet o i t . "

Not surprisingly, Daniel is proud of hisaccomplishment, and he thinks his site hasplenty of good points. "It's very clean, and it'seasy to see what's on the page - there's not alot of clutter," he says. "The MySQL back-endcontains tables for the different sections.

categories and products, and I like how thisenables us to change all these things at amoment's notice. Also, if you sign in as a

returning customer, you immediately see theproducts you purchased lastand can easily add them to

your shopping cart." Site backgroundUsability was paramount

i n D a n i e l ' s m i n d w h e n h e

was creating the site, andthe vast majority of thef e e d b a c k h e h a s r e c e i v e d

has, predictably, beenpositive: "Visitors say thesite is simple and easy touse, and I think that mosthave a good experience,"he says. Crucially, Danieladds that the companyendeavours to respond to

requests for information as quickly as it can,which can only help to increase its standing inthe eyes of its customers.

So, with Daniel and the company's customersboth largely happy, why was the site submittedfor a makeover? "I spent a lot of time onthe middle layer of the website, and I thinkthe front end is too simple," explains Daniel.He thinks the site should have two roles- information and purchasing - and that

everything should be integrated. Furthermore,D a n i e l ' s k e e n t o m a k e t h e s i t e m o r e m e m o r a b l e

and marketable: "I'd like something thatcatches the user's eye - something that they'llremember, so that the next time they needtoilet paper they know where to go. I knowthat probably sounds a bit strange, but that'sw h a t w e n e e d . . . "

Dan ie l i s a lso keen to inc rease the s i te ' s

traffic. Although this is slowly building - hereckons the site went from almost no dailyvisitors at the beginning of 2006 to at least

Owner's name Daniel JosephLocation Garwood,New Jersey, USThe website created by DanielJosephs for Spruce Industries isa combination of a marketing

presence and an online store. It's a place wherevisitors can find out more about the company'srange of products and services, and also wherethey can buy products direct. Few competitorshave websites, and even fewer offer onlinepurchasing, which means the Spruce Industrieswebsite is of utmost importance to the compan

The home page code aassets are in the WebsitMal<eover folder


W e b s i t e M a k e o v e r

B e f o r e —The current site is perfectlydecent, but it's lacking incertain key areas

^ I MEMORABLE LOGOs i t e s w e w o r k o n f o r

W e b s i t e I V I a l c e o v e r h a v e m u c h

of a visual Identity, but Spruce is an exception.The tree logo Is bold and memorable, which Isan essential component in getting people toreturn to your online store.

S E A R C H

y^^^FUNCTIONUnless your online

store sells just a handful of products,a search func t ion i s a mus t . Even w i th

the most careful categorisation, you

might place products in groupings thatsome people may not consider obvious:

enabling your user to search the sitegets around this issue.

o oP R O M I N E N TT E L E P H O N EN U M B E R

The larger online stores are rapidlygaining reputations for being uncaring,faceless organisations. There needs tobe an offline method of contact forwhen things go wrong, and Daniel'sprominent placement of the Sprucephone number is a good sign.

D E A L S A N D

QfaNEWSA n o n l i n e s t o r e ' s h o m e

page is the rough equivalent of a shopwindow. As well as catching the user's

eye, it's an opportunity to advertisespecial offers and new items, both ofwhich Daniel has added to the Sprucehome page. However, things could bemore appealing - a few images wouldcertainly brighten up the page.

O OL A C K O FI N T R O D U C T O R YI N F O R M A T I O N

The Spruce site makes the assumptionthat you're already familiar with theindustry and the company, omitting anyintroductory text. This Is a mistake. Youshould always introduce your site witha succinct paragraph of text thatexplains what you do. If you havestandout products, introduce those too.

O OS O M E P O O R L YP O S I T I O N E DN A V I G A T I O N

The navigation area is straightforwardand user-friendly, but it could be

improved. Grouping the account andshopping links would make sense, andstreamlining the remaining links is anabsolute must: some are even repeateda c r o s s t h e fi r s t - a n d s e c o n d - l e v e l

navigation areas.

a b s e n c elOF IMAGES

As we've alreadymentioned, the home page lacks imagery,and this is a big mistake. People like tosee what they can buy, and photographsare also great memory aids. Even if yourstock isn't particularly exciting or visually

stunning - and let's face it, much ofDaniel's isn't - you should still put someimages on the home page.

20 unique visitors per day more recently - thisaspect of the site needs work. "I know a lot ofthat has to do with search-engine optimisation,which I'm working on," says Daniel, adding:"We definitely have an opportunity to be aleader in this industry, and I think it involves

having a sleek website, with tons of informationthat's only a click away."

By and large, Daniel's right about the plusesand minuses of the Spruce website. In terms ofbasic usability, it does the job: the navigation issimple, and the search function works well

enough. However, as a marketing tool, it fallsshort. The site's visual design is dated, and thecontent area is lacking. This doesn't feel like aparticularly friendly site, which is at odds withthe small size of the company.

"Overall, I want our website to be brought

bang up to date," says Daniel on his biggestwish for the makeover. "I want the site to be

easy to update and maintain, while beingm e m o r a b l e a n d c r e a t i v e . W h a t w e s e l l i s b a s i c

and, frankly, somewhat boring - but thatd o e s n ' t m e a n t h a t o u r w e b s i t e h a s t o b e . "

•There 's lo ts o f

empty space onthe home pagethat could be putto good use -some introductorytext would be a

good start

30 November 2006 Practical webdesign


A f t e rAn in t roduc t i on and some

images make the websitemuch more welcoming

T I G H T E RL A Y O U TThe new layout is

based around a tight grid, with linesand boxes clearly separating blocks ofcontent, and this gives the page morestructure than the original design.Despite this, we've taken on boardDaniel's wishes for a liquid design, andthe layout therefore stretches with theb r o w s e r w i n d o w .

o oP U L LN A V I G A T I O NOn the original layout,

account-based links weren't groupedi n o n e a r e a . W e ' v e t h e r e f o r e c r e a t e d

a pull-navigation strip at the top-rightof the design, using it to house links tothe shopping cart, account page, orderstatus information and the Help page.

O OI M P R O V E DM A I NN A V I G A T I O N

0 0 ;

For the site links, we thought it sensibleto enable users to immediately access allsections. There was duplication on the

original site, so it was possible to reducet h e l i n k s d o w n t o a d o z e n . To m a k e t h e

shopping-based links stand out, the'products' row has a black background.

I N T R O T E X TI One of Daniel's wishes

was to inject somefriendliness and personality into thedesign, and some introductory textgoes a long way towards achievingthis. We found an introductory letterfrom the organisation's president buriedwithin the old site, and this seemed

perfect for use on the home page of therevamped version.

O 0 !L I N K S T O

(PRODUCTST h e l e f t - h a n d s i d e o f

the design has been used to providelinks to a number of product categories.Not only is this useful in enabling usersto rapidly access specific product types,but it should also help the site's

standing in search engines, becauseplenty of relevant content is nowincluded on the home page.

O 0 IM O R E

1 PROMINENT' o f f e r s

The 'special offer' text was lost on thehome page of the old site and so, forthe makeover, we've used one of theboxouts in the right-hand column topromote a great deal, emphasising thesaving with large text. When you'repromoting sale items, there's no pointin being subtle.

f r e s h e r

I COLOURS C H E M E

The old site's brownish scheme felt

earthy and a little muddy, and didn'treally put us in mind of fresh, cleanthings - rather problematic for acompany selling janitorial and sanitaryproducts. Therefore, the makeover siteuses a fresh blue colour to complementthe green and black of the logo.

Daniel 's verdictThe site designer shares his thoughts on the new look

"Very professional. I like thestructure and layout. I checkedout the code and saw the

separation of content andpresentation, which will make

a huge difference when maintaining the site -a definite plus! The areas that impressed methe most were the right-hand column and the

New Items section, which is larger than beforeand now shows Images. Also, the colours andlayout work perfectly together.

"The main change I'd make Is to the left-hand column, which requires scrolling to seeall the categories. I may use drop-down menus,but otherwise I'll definitely use this design.I hope it will bring our site to the next level."

TURN OVER TOLEARN HOW TO... ^

Construct a navigation blockusing Dreamweaver

Practical webdesign November 2006 31

W e b s i t e M a k e o v e r

D e t a i l sIntermediate

B SDreamweaver

Make a navigation blockFind out how to redesign the main navigation section using Dreamweaver

Oere, we're going to show youh o w t o c o n s t r u c t t h e n n a i n

navigation block that wecreated for the makeover, using

Dreamweaver. The block is rectangular, withfour links horizontally and three vertically.T h e b o t t o m f o u r l i n k s - a l l o f w h i c h r e l a t e

to products in some way - are distinguishedfrom the other links by means of a black

background: the other link backgrounds area dark green colour.

The structure of the navigation blockis extremely simple: it's composed of four

unordered lists, which have been styled

using CSS. Minimising mark-up in your sitedesigns is a good idea for three reasons: itmakes your site more accessible, it reducesdownload times, and it enables you to easily

restyle your design at any time in the future.(See the 'Rapid restyling' Quick Tip opposite.)Note how the block design also makes useo f h o v e r s t a t e s f o r b o t h t h e s t a n d a r d l i n k

colour and for the bottom row. This providescustomers with useful visual feedback,

confirming to them that the navigation itemsa r e c l i c k a b l e .

n * E * W M K F s o w t w T o o b H i ^

Otodi ' O id id " **ha>;^C;V)Dara«saidSatt»iaf\CraqKl«*

• Hover states are used to indicate that the various

navigation elements are clickable

C — - ■* » B * | B B S -♦ - 9 a I S l S ) - 9

j < ? g . l i t

mC S I

ii*»»cs5ai»|

o

H a E « k a « t M T y T a x C a n u r e k S t e W n k m H i k >

% B 4 | s B a

a t . U c m c

• A b o u t m♦ Greqi deaottg

♦ Contact detr i i

• S e m c e f A Q t» H e b k i e b k f l

* O f t o p i r t t

. M S D S

i -L fe

:»:y) 100%'">.787 x 425- IK/lWC

S E T T H I N G S U PCopy across the 'makeover-tutorial' folder from the cover CD, and open list-nav.html in Dreamweaver. The web page is already linked to the CSS document

list-nav.css. Click the Insert Div Tag button (in the Common section of the Insert bar),type 'navContainer' in the ID field and click OK.

e A D D T H R E E L I S T SReplace the default content with three lists, each with four list items that havea link within. Stop Dreamweaver making one big list by adding a paragraph

between each list. (Terminate each list by pressing Enter twice.) Remove each paragraphby clicking within it, right-clicking <p> in the status bar and selecting Remove Tag.

©REMOVE MARGINS AND PADDINGClick the New CSS Rule button on the CSS Styles panel. In the dialogue box,choose Advanced from the Selector Type options, type '*' in the Selector field,

choose list-navcss from the Define In options, and click OK. In the CSS Rule Definitiondialogue, select the Box category, set both Padding and Margin to 0 and click OK.

OSET UP PAGE DEFAULTSCreate another CSS rule, choose Tag as the selector type, and type 'html' in theTag field. In Type, set Size to 100%. Create a second Tag rule, 'body', and set

Size to 62.5%. These rules set a baseline relative font size that roughly equates to lOpx.Next, set Background Color in Background to #ffffff, and set Padding in Box to 20 pixels.

32 November 2(X)6 Practical webdesign


I fOwT*

o STYLE THE NAVCONTAINER DIVCreate a new Advanced rule, #navContainer. Inthe Type category, set Font to 'Arial, Helvetica,

Sans-serif; Size to 1.1 ems; Weight to Bold; and Case toUppercase. In Box, set Width to 536 pixels. Click OK. Notehow the Size setting of 1.1 ems roughly equates to textof 11 pixels in size (but this text is resizable in InternetExplorer).

S T Y L E T H E L I S T SCreate a new Advanced rule, #navContainer ul. In List, set Type to None,thereby removing the list's bullet points. In Box, set Clear to 'Left' - this will

enable lists to stack vertically, despite the links being floated in the following step. Next,create another Advanced rule, #navContainer li. In Block, set Display to Inline to makethe list items stack horizontally.

Quick tipR A P I D R E S T Y L I N GThis may seem along-winded way tocreate our navigat ionbar. However, withstreamlined markupand fine-tuned CSS,It's easy to restyle yournavigation just bychanging the CSS rules.S e e t h e ' m a k e o v e r -

tutorial-restyled' foldero n t h e C D f o r t h e

r e w o r V e t i C S S c o d e .

« n

l . S t m

t e j c t - d m r a b o n n c n e

b«k! r txnd M « 1 4 1

b k x k

f b t t W t

M d d h gw d t h t Z S p x

O STYLE THE LINKSCreate another Advanced rule, #navContainer a. In Type, set Color to #ffffff;Line Height to 1.5 ems, and Decoration to None. In Background, set Color to

#048141. In Block, set Display to 'Block'. In Box, set Width to 125 pixels. Float to 'Left'and the values of Padding to 0, 4, 0 and 4 pixels. Click Apply to see the effect.

O DEFINE THE HOVER STATEYou now need to visually separate the list items. In the Border category, setthe Bottom and Left row values to Solid, 1 pixel and tfffffff. Create a hover

state style for the links by creating a new Advanced rule, #navContainer a:hover. SetBackground Color to #3bb375 and Decoration in Font to Underline.

« E 3 A | e B l 2 - « - g £ l l S : ( D - S >

• Typtt Oa«((an*l*rto«iyt«g)OT«g(raiWki«tl«ln*ef««PMdnct«o) ,—

O T h K t o Q a a n t o r t r

(Bi e SL %

« 7 a 7 x i B - w i i m :

O CREATE THE HIGHLIGHT STYLEWe need to create two Advanced styles for the bottom row, so that it standsout. For #navContainer .productsList a, set Background Color to #000000, and

for #navContainer .productsList a:hover, set Background Color to #665666. These rulesset the link background colour to black and the hover state background colour to grey.

A P P L Y T H E H I G H L I G H T S T Y L EClick inside one of the bottom list's list items, then click <ul> in the status barto select the entire list. In the Properties panel, select productsList from the

Style menu to apply the styles created in the previous step. Alternatively, right-click <ul>and navigate to Set Class > productsList. O


rmultimedliTti

9 O N T H E C DYou'll find the tutorial'fi l es men t i oned he rein the Feature folder

There has never been a bet ter 'use videojjsound and V

anfflffit on in your websites. JKarl Hodge has 20 reasons t

Ohere has been multimedia on theweb almost as long as there hasbeen a web. The trouble Is, overa dialup modem the quality was

always questionable. Broadband has changed allthat, with download speeds that can handledigital video and sound's bandwidth-hungry

files. The development hours that companiesspent trying to crack the problem of distributingm e d i a o v e r l o w - b a n d w i d t h c o n n e c t i o n s h a v e

paid off too. They used to compensate for slownetwork speeds - now they make sure thatv i d e o a n d s o u n d o v e r b r o a d b a n d s t r e a m o n

demand. With around 70 per cent of all UKinternet users now on broadband, and more

signing up every week, that's a significantnumber of people who are now ready to

watch video, download animationa n d l i s t e n t o m u s i c o n l i n e .

Multimedia capabilities aren'tbuilt directly into webbrowsers. Instead, the widelydistributed 'big three'multimedia plug-ins handlet h a t . T h e r e ' s W i n d o w s M e d i a

Player, built into Windowsand capable of playing backm o s t v i d e o a n d s o u n d

formats. Next up is QuickTime, the cross-platform media player created by Apple andshipped with ITunes, giving it a significant shareof the market. Finally, there's Adobe's Flash

Player - the single most successful multimediapiug-in on the web.

Multimedia formats that are supported aresplit into four basic types. Audio samples aredigital recordings of sound and can generatelarge files. Similarly, digitised video clips can beunwieldy, although in both cases advances instreaming technology built into media playersmake it easier to play them back overbroadband connections. On the other hand,the third format, MIDI files, are sound files thatdon't contain any actual sound data. Instead,

they store musical information that can be readby the synthesiser. The multimedia format thattops them all is Shockwave Flash. As a vectoranimation format, it's second to none -

producing swift, small files that the majority ofusers can enjoy.

In any of these cases, the procedure for

adding multimedia to your page is broadlysimilar when using basic HTML. The realdifficulty is in knowing when to deploym u l t i m e d i a a n d h o w t o m a k e t h e b e s t u s e o f i t .

Over the next few pages, we show you how. O

3 4 N o v e m b e r

:i{

GooaleVid»o O

khodge^gmail.coin | i jpioadpd Video? I MiAccaii

Search | New* Upload and share your own videosTpbIPQ Comgdy Mu?)c yd^g? Spor t? f t j i imat ion gooq ie P ic f<? ggnre?

F lash VideoEmbed Flash Video files withplayback controls in your pagesWith broadband subscription booming and video blogging tipped totopple podcasting, online video is big news. For years, designers havehad to struggle with a variety of formats, a confusing mess of objectcode variations, platform incompatibilities and browser quirks. And thisis one of the main reasons that Flash 8 is so exciting. While video in FlashMX was great for developers. Flash 8 makes it easy for anyone to deploytheir moving pictures online.

Dreamweaver 8 takes full advantage of Flash Video, with importoptions that enable you to add playback controls with a single click.Well, it's a couple of clicks actually, but it's still a lot quicker thanmanually writing plug-in code for both Windows and Mac using boththe <object> and <embed> tags to ensure it works on every browser.With 98 per cent of the web population using Flash Player, this has tomake the process much easier.

Arctic Monkeys: LeaveBefore The Lights ConGBeXJO'Avg IHKhM 4E.S3 mm 59 sec ■ Aug 17,2C06B r o w s e : 5 o u t o f S

A d d v o u r o w n l a b e l

Emsil ■ Bleo • to MySpace

Check out Mercury Nominated ArcMonkeys New Video "Leave BefbnLights Come On" on Google Videoo f D o m i n o R e c o r d s . T h s i r l a t e s t s

the band's final word on this firstmeteoric nse to fame. Long may i1continue, jt

« P r e v - N e )

Pliiyito - QsisM • Eimmr - BfiComments ' **^

Continuous Playback: Qti- OFF

< Flash Video is now widely deployed across many sites. For example, Google Video converts media to Flashbefore distr ibution. YouTube Is also based on the Flash Video format

EncodingPlease select a Flash Video encoding profile:

|Fl4sh 8 - Mediuni Quakty (400kbps)Video encoded for playbadc with Flash Mayer 6Video codeci Ort2 VP6Video data rate: 400kbpsAudto codec: MPEG Layer III (MPS)Audo data rate: 96kbps (stereo)

Hide Advanced Settings |

Encodtg j cue Points | Crop and Trim jW Encode video

" 3

Vkteo codec; |On2VP6P Encode alpha channel

Frame rata; j Same as source 3 fps

Quality; jMedkjm " 3M« data rate, j tv'abtts per

P Resize vkieo

Widtfii IKey frame placement; jAutomic'

' ey frame^nter af: | framt-sU Hdghi. ["

S u i t e c o t i K : Utarrte: I*--:,- : " 3

(BBD^SSESIVtdwtype: jprogresstve Download Vldao""

(Enter the rel«tive or ^>50lute path of the <Nach SUw Fit)

Sl<ln; |ciMr 5I» 1 (mn width; 140) ;

^ ConcCf«ln' Total with sl<jn:

h t ; rr Autoplayr AutorMw^d^ Pront* usars to dowrtedd Flash Pteyw * nscessaryContent on this pags raqiirM a newer vi

d o w S o a d t n o w ?r, Do you want t

z i

$oethevldao, praviaw the page h browser.

O CHOOSE A PRESET PROFILE FROM THE MENUEncode your source material in Flash Video format using the standaloneFlash 8 Video Encoder. However, the Settings menu is where the real

action takes place. Choose a preset profile from the drop-down menu, then use theadvanced settings to tweak it. Here, you can set the start and end indicators tocrop your video footage to suit your preferences.

I M P O R T T H E V I D E O T O D R E A M W E A V E RHit Start Queue to output the file to Flash Video format. Import video intoDreamweaver 8 by going to Insert in Dreamweaver's main menu and choosing

Media > Flash Video. You'll find the encoded Flash Video in the same directory as yoursource file. Next, select a playback template. Hit Detect Size to make sure that thefootage plays back at its original aspect ratio.

Flash MX was greatbr developers... nowFlash 8 makes it easy

for anyone to put theirinnages online

» M > « l • 1 - -

PICK A VIDEO SKIN AND PUBLISH IN SHOCKWAVEAnother route to including Flash Video in your Dreamweaver pages is to buildthem in Flash first. The import process is similar, but after the setup stage you

I have around 40 video skins to choose from. Publish the file in Shockwave Flash formatand insert it into a page in Dreamweaver, or publish an HTML file from Flash.

Practical wri design N o v e m b e r 2 0 0 6 3 5

:^Co«»|;;^Sp>| jjPwitr TMi: UnhtWDocweot "" " In*. , C IL j■"'""Woiocrm btMl MOIIC "-//WSC/ZPTO XHTHL l.O Tt#n«icional//nr

I nictp: //•**. v3. org/lK/xhtali/DTO/xhtall-tEansltionfti.. dtd"^lottaU x*lns.'Tittp://wnt.w3.ot9/1999/xhtaa''>■ <he«d>lowu btep-equiv«"Content-Tln»e'' cont«nt»''text/htal; chatset-lso-eesg-l" />

U c l « > B u t t o a C l i c k < / t i t l e >

| < / h e a ^

n

■ <i>odp

O INSERT THE CODE IN AN HTML EDITOROpen buttonstart.html in an HTML editor such as Notetab++ orHTMLEdit. Even Windows Notepad will do. After the opening

<body> tag, insert the code below:

<embed src="button.wav" autostart=false width=0 height=0name="sound1" enablejavascrlpt="true">

Button Ckk ▶n ist tt.; c SS. ii>. iD T r a n s i t i o n a l / Z E I T|<!DOCTYPE fatal POBllC "-//TWCZ/DTO XHTKL 1.0I *^t^j//««w.w3.0tg/TR/xhQiII/D77/xhtail-tt

l<hc»l )(»lns-''http://«»w.«3.0Eg/'1999/xbm''>l<head>l<Eeca http-e(iulV"'*Contenc-Typ«" content-"text/ht*l; chAEset«iso-8859-l"l<tltle>Bucton Cllck</title>l</bea£>

|<bo(ly>l<eMbed stc-'tiutton.wav" autoswtt-f&lse wldth-0 heit^t-O nMie»''80undl"1 eiiablej»v(wctipt-"tinie">

o INSERT CODE AFTER THE EMBED TAGImmediately below the <embed> tag, insert the following code:

<script>function EvalSound(soundobj) {var thissound= eval("document."+soundobj);thissound.PlayO;)</script>

Sound on but tonsMake your buttons clunk and clickwith this JavaScript-powered methodThere are several HTML commands that enable you to place sounds in yourweb pages: for example, the <bgsound> tag in Internet Explorer and theW3C endorsed <object> tag. Even the <img> tag can be used with the

dynsrc parameter. The easiest to implement is the <embed> tag. Althoughthis tag isn't actually included in the most recent official definitions ofHTML, it's still the most widely used and consistently supported methodamong all browsers.

In the example here, we use the <embed> tag to preload a short soundsnippet that can then be triggered from a hyperlink, form button or imagel ink . You ' l l find a l l t he fi l es we re fe r t o i n t he tu to r i a l f o l de r on th i s i ssue ' s

CD. Your first step will be to copy the files button.gif, buttonstart.html andbutton.wav to a folder on your hard disk. You'll need an HTML editor toenter the code manually. Our examples show Dreamweaver, but you canalso use Nvu (www.nvu.com) or a text editor such as HTMLEdit (www.htmledlt.com) if you prefer.

l CodeMspnl jDeslgn| TBe.l Button Testr ^ I W P | M fe? t>". 6K. U 1 H >i>.!

<bedy>

ProperMes

Format|None 3 ^f^one CSS |FontjD«fauftFont ScejNooe ^ 1"!!

310-. S

I I Code Split Design Title; j Button Cli. I""> , |150 , poo, bsO i, '|300 " |350 ,■ I I I I I I I 1 I I I I i I I l ! l I I M I I I I I I H I I I I I I I I t

Although deprecated,the <embed> tagrema ins the mos tre l i ab le me thod o fincluding multimediain web pages

OGET THE SCRIPTING NAME YOU NEEDThe comnnand in the code in the previous step does severaldifferent things. It loads a button sound into the memory, hides

the playback buttons, halts playback of the sound, turns off any loopingand gives the sound a name that we can refer to when scripting. That'sw h a t w e ' l l d o n e x t .

a; ~ '

I buttonttater-htirr^BI^^BI5t u i c IE

C I D O C T T P E h t * l P U B L I C " - / / W C Z / D T D X H T H L 1 . 0 T t 9 n 8 l t l o r » i / / E r '

' l > t c p : / / ¥ W . » 3 . o t g / T R / x h t M l l / D T O / x l k t * l l - t £ # n f l l t l o n f t l . d t d " >< h t * l x a l a s » ~ h c t p ; / / « * » . » 3 . o t ( j / 1 9 9 9 / x b t * l ' >< h e a d >

< M t a b t « ) - e ( i u i v - ' ' C o o « n t - T i p « ' ' c o n t e n t - " t e x t / h t m l ; c b a r s e t - i s o - B a s s - l "< t i t l e > B u t t a n C l l c k < / t i t l e >

< b o ( l y >

< e i l i e d s i c ' ^ t t O D . m v ^ a u t o a t a z t - f i a l a e v l d c h > 0 h e l g h f O > M k e « " 8 0 u n < l l ' '

( t n » b l e 3 « » M c c l p t » " t E u e ' ' >

< s c E i p t >t v a c t l o m E v a l S o u n d ( s o u n d o b j ) (

v « r t l U 8 S o u n d > e 7 b l < ' ' ( l o c u n e n t . ~ - « - a o t i & d o b j ) ;

t h l * « o u n ( l . r i a ? ( ) ;>

|</tccipt>

A D D A J A V A S C R I P T F U N C T I O N® Finally, we need to add a JavaScript function to the image we

embedded earlier. We do this by adding the code to a link:

<img src="button.gif" onClick="EvalSound('sound1')">

Save the file as buttonclick.html and load it into your browser to test.

3 6 N o v e m b e r 2 0 0 6 P rac t i ca l des ign

I Z 9 0 0 2 - i a q i i J a A O N u B i s a p l o f p e j d

'>|n-03-3i;s!p!Uj'MMM q6noj4; sanj. iai|/\| aaj^ j.o s}0| pujjUB3 noA s] pje? punos jiam uo jasisamuAs am poo6 Moq uo luapuadap

s,;em sjaindiuoj jaqio uo punos |||M ^ MOij jaAo |ojjuod amn aAeqnoA 'A|a}eunyoj.un '31!^ aiAqo|!>| 0£ JO OZ e OW! ;|^ Aeui Djsnui j.o sainujOi

aajLii azjs a||^ uj hblus aj.Aaqi ;bl|1 Sj san^ iqii/m a6B;ueApe auoDBIAl am joj aiqeiins s| jaAe|d auj!i>(D!nO anqAA 'smaisAs isoui uo unepp

Aq sa|!i iqIIAI a|pueq oj ;as sj jaAew B!pa|/\| SAAOpuj/w sdei <pafqo>JO <paqLua> aqi eujsn saBfid qaAA ujqUAA UJ04 paAe|d aq ubd sa|!^ iai|/\|

•pj0oqAa>| aAjsuadxa UB jo a|npouj punos |BUjap<a ue 'jaindtuojjnoA apisui pjBD punos aiqBdeD iai|/\i a|duiis 6 aq ubd luauinjisui isqi

luauunjisui aiquBdiuoD e Aq pajajdjaiuj aq 01 Apeaj 'pajois sj DjsnLuaqi p ujawed aqi 'pBa;su| an^ iaii/\i e uj pajo;s j.usj punos lenpe aqi

■s;bujjo^ 0]pne jaqio a)|i|un S| (ajepaiui |Bn6!a juaainjjsui iBDjsni/M) iai|/\j

IBLUJO^ oipne smi qjiM aDeds 0Aes

l a i iA i

•ja;ndLuo3 jiaq; uo paneisuj seqjasn am jaAejd eipaiu jaAaqjjqAA ui uado p|noqs1! - jBuijoj. ujjoîB|d-ssoJ3 B - oapiA ggdiAi eujsn

aj,aM sv JaABid Bjpauj e A^pads 01 paau ;,uopBAA '6e} <paqiua> aqi qnAA leq; a;0N paJouBiS! 6ei. <pafqo> aqi - pasn s.iBqj 6b} <paquia>

am s,}i puB 'DBiAl B uo UB^BS U! JO xoâjjjU| ap03 S|m Aji <66; paquja> A3B6a| aq} si 6bi

<pafqo> aq; ujqiiAA pa^safg jajoidxj laujajuieuiuunj dnâs sAAopujM b jo^ A||eD^pads

6b} <pefqo> aqi asn baa 'punojB auj]} ^sjjjaqi ajjAA} pappaquja A||Bnpe Sj ajaq oapw aqi

<pafqo/>< p a q u j a / > < „ a n j i „ = s | 0 j ; u 0 D A A 0 q s

„an j i „= j jB i so inB „882«=m6!aq»ZSE,.=qiP!"* „6dm a!A0imsai„=3js paquia>

5bi <p3fqo> UB umim paisau 6e) <paquia> ue - oapiA Mse|j Aojdap0) sasn aqnxnoA teq/w o) je||ui!s sj ajaq p3)ej)suout3p anbiuqâ) 3po3 sqj.

:sjasAAOjq jaqxo pue sjaAe|d japjo uo s>|joaa1! iBm OS 'apoD ADB6a| aujos ppB baa }eqi A(vo|a8

</ „anji„=an|eA „j je;soinB„=aujBU LuejEd></ i

„6dui a!AouJisai„=an|BA „nyn„=3"Jeu ujej6d>i</ „anj;„=an|6A „S|0Jiu0DAA0qs„=aaieu ujBJBd>

</ „jaAB|duj„=p!„083„=m6!aq „OS£„=qiP!M „9BB^6Z.iW00-£S iq

-£PU-B1?6£-ZSe?SW9:p!sp„=P!SSBp parqo>

:s! jjBd isjjj aqi -aDBds qaAA jno O} pdija|!^ oapiA B peo| puB - jaAe|d B!pa|/\| SAAopuj/w5u!ja6j6; - 6bj <pafqo> aqi 6u!sn jjb}s a/v\

■spoqjaui 6b; <paquja> puB <pafqo>Bujsn 'sujjo^}e|d ||e le paia6jBi oapjA 6u!ppaquja

joj poqjauj 6 s,ajaH sujjo^Bid ||b uo >|joaasjaAejd B]pauj ||e lou puB -ainqijjje .pjssep, aq; Bujsn

jajo|dx3 jauja;ui jo^ jaAB|dBjpauj laBjBj e Ajpads

oi paau noA 'saaueistunDjpisouj U! 'leqi sj 5e} <pafqo>

aq} q}]AA uiaiqojd aqi■s}eaAB3 aujos q}!AA

'<paquia> se A}!iBUO!PunâujBS aq} ssa| jo ajouj SBq

siqi ■pEa}su| 6e} <pafqo>aq} 6u!sn aq pinoqs

aAA sAbs 3e/\a aq} aaon'sa6Ed qaAA uj E|pauj|}|nuj

6uipnpu! joj. }|n6ppaq} SBAA 6b} <paquja>

aq} 'awj} 6uo| 8 joj

II op jûpinoqs pue p|noLjs noA moh

oapjA 6uiPDaauj3

jatnduio} jnoA uo)|jOM ||;aa }Bq) Ofpnis

punos pa6p3|| A||n(B S,}! - |00l U0!SJ3AU03

3|duijs e )snl ueq) sjouiqjnui Sj Aipepnv 2

•S}ua}Bd asaq} p asnBDaqujjo^ paiidtuoj s}! ui }! a}nqij}S!p o} paAÔ||E

},uaj8 aAA }nq 'asn jBuosjad uaao jnoA joj. au|Âjpajjad sj 3|/\]vi •pa}ua}Bd ajB ujq}!Jo6|B £dlAI

aq} }o s}jEd Aublu asnB3aq uojpunj. a}BJBdas buj a|!^ ||p-3ua~auJB| aq} ||B}su| o} aABq ||,nox■jap|0} A}pBpnv ujBUJ jnoA uj }! puj^ aaou ||,noA'asjnoD 'BuipaaDOJd ajojaq an^ ||p-3ua~auje|

aq} a}e30| o} pa}dujojd aq ||,noA 'EdVM se }Jodx3< a|!d 0} 06 Sj }Euijo^ Edl/M u! a|!j. B aABS o}

op 0} aAEq noA ||v •}BUiJ0^ £dl/M oi A}pBpnv u|pBO| noA a|!} o]pnB Aub yaAuoD ubd noA AAOfj

■}! aAouj UBq} jaq}Bj Adoso} Aa>| }|v aq} UAAop 6u!p|oq 'jap|0^ A}pBpnvjnoA 0} ssojDE ||p Dua"aujB| an} aq} dojp puB

5bjp 'ajaq} uiojj Japjo} A}p6pnv aq} pujj pusAAopujAA jajo|dx3 SAAopu!/v\ puoDas B uado up

■Dua~auiB| a|!} aq} 6u!}B30| Vujeiv^ o} a}B6!ABu

pue (suej. }n3}joqs '3 puB Aa>| SMopu!/v\ aq}}!q) jajo|dx3 SAAopu!/v\ uado 'a/^MP pjsq JnoA uo\auje|\o 0} djz i, % £-auiB| aAjqjjB aq} djzun■suo!P!J}saj eujsuaaii O} anp 03 aq} uo 3iiMvn

apnpui },U6D aM ■|UJ}q auiB|/A}pepnB/oi,l.BBj~/>|n-3E'>|joA-sjasn-AAAAAA ujoj (japo3U3 fdlAI ue},U!V auiE^) 31/MV1 P9i|e3 ajBAAyos ô }]q Ej}xa

ue pB0|UAA0p 0} paau ||,noA }joddns £dlM PPe oi

'}au'a6joâxinos'A}pBpnB }b s>)U!| pEO|UAAOp puj^ll.noA •}SJ!i A}pBpnv ||B}su! puB pB0|UAA0a qaAA

aq} uo asn jo^ 0 ]pnE fd lA I o } S}Eu j jo j . punos

jaq}o uj saiij }jaAU03 o} }) asn uB3 noA AAoqaqujsap ||,aM siise} p A}a!jeA b jo^ pasn aq

UBS A}pepnv JO}!pa ojpne aajj. pue je|ndod aqi

joi!p0 oipne Xipepny peoiu/woQU0!SJ9AU03£<

Piggy-back mediaOffer video without losing your bandwidthEven though broadband has increaseddownload speeds for the majority of webusers, multimedia can still cause bandwidthproblems. The main difference is thatdevelopers the brunt instead of v is i tors.Most starter web hosting packages have abandwidth cap on them. When sites werealmost exclusively composed of textual

content, one gigabyte of data was a generousoffer. A successful multimedia-powered sitecan swiftly use up that allocation.

There's a shortcut, though: keep your sitehosted with your existing provider and shiftmultimedia content to a specialist free host.

V

For video, there's YouTube (www.youtube.com)or Google Video (vldeo.google.com). Both allowyou to upload your own video content. YouTubeprovides you with the <object> code to embedthe results directly into your own pages, whilet h e v i d e o r e m a i n s o n t h e Yo u Tu b e s e r v e r s . To

embed Google Video, you'll need to click thePut on Site link to generate a code snippet that

you can paste into your page.There is a distinct lack of sites offering a

similar service for sound files, but we've founda couple of workarounds. The Internet Archive(www.archive.org) enables you to uploadpodcasts and original musical compositions to

2 5 fi i a J C E 5 1 ( 1 7 W )

I C E ! l l f f 6 W >l E E fi l S e W )IEEfil(12l inn

M»lr«pa0ul*f 1« *n inimittd thwl Mm ibMt wMI th* cIMI of Amlrici m«uM «iy te•bed I pepulirty conl««t m vnOich ihHi cKlM m eempttmg.lhtyt h i m i i l v * * H t g h l i g h l i n g I h t t r M p i r M * C K y h * d O r n m n t

f«*enn e*y'

Pivdutvt; jH«n Hiapy, Ltun LmIcmo4PitdueHvn Ctmptny; PDitJrttinWgrktK«yw»<4* ;^

P M A I t o . C A S a SU M « d 9 t M M

e 6 0 4 « « 1 I XF » > 6 6 0 - S D - 2 e H

R t v f t w tA v w H *

Rm4»w*r k»i»niiio( • AAAAA • Novwnbf 1t, 2006SukJtceMSTANT CLASSICSIIM th« tnding

R t v l t w i R K i k t f i l m i • • O c t s b w 1 2 , 2 X 3 6Suk|*a; FwviylC f t w w k K t m i

' t f t h t y e o u i d t * * r w i t eb « t v M * n

•y itwuld U 'Amwieii

its audio archive. You'll have to sign up withthem first and add a Creative Commons licenceto your work when you upload it. Once on thearchive's servers though, you can hyperlink toand embed the audio content in your own sites.Commercial service JellyCast (www.jellycast.com) will host your podcasts for free after youpay a £10 sign-up fee, allowing you 25GB ofb a n d w i d t h a m o n t h .

«As wel l asproviding free webhosting, theInternet Arch ive isalso a great sourceof video and audiomater ia l . You canuse this to helpcreate your ownm u l t i m e d i a c o n t e n ton your websites

ShowtimeK«ulyst0{03/4;54

f I

®®0® ®bong TideA r t i s t N a m e

(OOOOOl

S H O I U T I M E K O T fl L V S T

14 ■ ▶ I I — : —

i a P S l F i l F i l F w

i Swish Jukebox comesbundled with a range ofready-made templates thatenable you to create MP3players for your site

W O WStreaming sound in FlashGet sound on the web without paying the priceIn our continuing mission to make the web anoisier place, we turn our attention back toFlash. The Flash Player has built-in MP3 support,which makes it a great choice for putting soundon the web. According to Adobe, 98 per cent ofus have it installed. That beats every othermultimedia playback format. The catch? MP3needs to be embedded in a Shockwave Flashfile, and you usually need Flash 8 to make them.

While Flash 8 is a fine piece of kit, it's

professional software with a professional price

3 8 N o v e m b e r 2 0 0 6

tag - around £500 for the standalone version.If you need Flash for site-making, werecommend that you invest in it. If you don'thave it, but still want to embed MPS files in

your web pages, the third-party developer Swishmake a great little tool called Swish Jukebox.For a measly £16.48 you could be deploying

dinky, bespoke MPS players on your pages bytomorrow, which are ideal for podcasting. At r i a l v e r s i o n o f t h e t o o l i s a v a i l a b l e f r o m t h e i r

w e b s i t e a t v v v v w . s w i s h z o n e . c o m .

A l t e r n a t i v e m e t h o d sEnnbedding multimedia content

The <embed> and <object> tags aren't the only way to includemultimedia content in your pages. There are several proprietarymethods but none of them are recommended by the W3C.

Internet Explorer supports the <bgsound> tag. This loads and playsa sound file, without visible playback controls as the page opens.

<bgsound src="background.wav">

Any type of sound file, including MIDI files, will do. Users can haltplayback by clicking their browser's Stop button. Internet Explorer alsosupports the rather bizarre dynsrc attribute. This enables you to embedvideo clips using the <img> tags. We don't recommend its use.

The easiest, standards-compliant way to include multimedia contentin a page is to simply link to it directly, like this:

<a href="videoclip.mpg">A Video Clip</a>

Whichever helper application you have associated with the file typeshould take over and play the clip in a new browser window.

P t m S M M i d M r v c t t M i d R » y « y F t m t M M d

r a r *n r -

^ Use the

<bgsound> tagsparingly, if at all.Stick to quiet,ambient-stylesound loops ratherthan a fu l l -b lownsound t rack f o ryour site. Try www.partnersinrhyme.com for frecbies^

Practical wal design

Q^multiniedia tif^

Video bloggjngHow to get your face on the internetVideo blogging? There's nothing to it. First,you'll need an account with a free blogprovider, like LiveJournal (www.livejournal,com) or Blogger.com (www.blogger.com). Setup an ordinary blog with any of these serviceproviders and get started. If you choose to useBlogger.com, we recommend you accept itsdefault options and use Blogspot for hosting.It makes the whole enterprise less fiddly.

There are many ways of getting video intoyour machine. You can use a webcam with or

without sound, a digital camcorder or thevideo capability on a digital camera or mobilephone. Windows XP ships with a free homevideo editing system, Windows Movie Maker.You can use this to edit clips together andoutput them in WMV format.

When you've finished assembling your clip,

upload it to your web space. Create a newentry in your blog or journal and, using thecode we gave you in the tip entitledEmbedding Video, add the clip to it.

O G Svidblog info player

I c h i t t t j y H a l i r t i i U r i i

VIogging makesblogging easier. Justpoint the webcam atyourself and talk. Theonly hard part iscoming up withsomething worthtalking about

I r

W i B Wstreaming audio formatsMake sound data smaller without losing qualityOne of the problems with including sound inweb pages is the large download size of digitalaudio files. A solution to accessing media files

quickly over the internet has been to combineaggressive file compression with streaming.Streaming is a method that enables you to listent o o r w a t c h a m e d i a fi l e a s i t d o w n l o a d s .

Although this is effective, it's only practical forspecific uses, such as radio broadcasting.

Most digital audio formats have some formof compression algorithm built-in, includingWAV and AIFF files. Compared to thecontroversial MPEG-3 format, the files

generated are still large. These two formats arebest used when you need sounds of very shortduration 'inline' - to directly accompany abutton click, for example. You can optimise theaudio further by reducing the frequency. As aguide, CD-quality audio is sampled at 44kHz.Audio sampled at 11kHz takes up a quarter ofthe space and is adequate for many uses.

MPEG audio compresses sound files to sizesthat are far smaller than the equivalent data

space taken up by a CD audio track. MPEG Layer

« MP3 is now the predominant audio format on theinternet and is supported in most media players

3, the most widely used revision of the format,can make sound data up to 12 times smallerwithout a significant reduction in perceptualquality. The latest versions of the ShockwaveFlash plug-in are capable of playing MP3 audio,so you can embed longer audio sequences intopages as part of a Flash movie. You can also useFlash to loop shorter sections of audio, orcombine multiple loops to create a more

complex soundtrack.

Always test multimedia files online to make sure they stream as youintended. Testing locally doesn't give you an idea of the kinds ofspeeds visitors to your site will experience.

12 Hosting alternativesFree multimedia hosting alternatives include Twango (www.twango.com) for sound and video files, and GPrime (abs.gprime.net) forS h o c k w a v e F l a s h fi l e s .

13 Swish MaxAt just £55, Swish Max from www.swishzone.com is a budgetalternative to Flash, and includes the professional features you mayn e e d . A t r i a l v e r s i o n i s a v a i l a b l e .

14 MPEG questionsIf you're bewildered by all the different versions of the MPEG formatthat are out there, you'll find documentation, tools and referenceinformat ion at www.mpeg.org.

15 Video conversionConvert to MPEG-1, MPEG-2 video or DivX from AVI, QuickTime orWMV file formats using TMPGEnc 3.0 Xpress (www.pegasys-inc.com).An older, free version is also available from www.tmpgenc.net, butit lacks the same format support.

16 Tools for the jobWhen recording sound, the results will only ever be as good as theweakest link in your system. To get the best sound you can, you shouldinvest in a good-quality microphone, hi-fi quality connector leads anda d e c e n t s o u n d c a r d .

17 Audacity documentationThe Audacity Team has a Wikipedia page with regularly updated tips.This is in addition to its page at Sourceforge. Visit the Audacity Wiki

pages at audacityteam.org/wiki.

18 Media EncoderG e t W i n d o w s M e d i a E n c o d e r f r o m w w w . m i c r o s o f t . c o m / w i n d o w s /

windowsmedia/forpros/encoder/default.mspx. This enables you toconvert digital video in most formats to Windows Media Video (WMV).

19 Conver t to F lashYou can convert video to the Flash FLV format without actuallyusing Flash, thanks to Flix Standard. It's available for a very reasonable$39 f rom www.on2.com/consumer/fl ixstandard.

2 0 F l a s h s o u n dUse mono samples in Flash in separate channels - panning them leftor right however you want. They're more difficult to position in yourmix later on. o

V ^

P r a c t i c a l d e s i g n N o v e m b e r 2 0 0 6 3 9

W e b s i t e B u i l d - O f f

. j- i itrl

»The wess i teMP - Off

Our four web design experts show theiregalitarian sides by creating campaign sites

As thoughts of the festive season begin to force their way through to your conscious mind -or rather, blare out from every shop window and TV in the Western world - you may begin to

4 0 N o v e m b e r 2 0 0 6 Practical wwi: design

W e b s i t e B u i l d - O f fo

"The idea encourages employers to allowindividuals, through an incentive scheme, totake one day a month to share their skills"A n d r e s R o i a slilumina Digita Iwww.illumina.co.uk

A b o u t m eAs a lead designer and design teamleader, I've worked across a widerange of projects, from learning toentertainment. I developed thecharacters and backgrounds for twolarge productions for the BBC iBAFTAnominee Digger & the Gang, and theBIMA-awarded Tobu Learn Japanese,w h i c h w o n t h e B e s t U s e o f B r o a d b a n d

i n 2 0 0 2 . O t h e r o n l i n e c r e d i t s i n c l u d e

100 Welsh Heroes, the iBAFTA-winning Careers Wales, and the TribeCommunity for the Sanctuary Group.

W H A T I ' V E B E E ND O I N G T H I S M O N T HIn my spare time, I've been workingon the design of a rock climbingwebsite for passionate deep-watersoloers. I've also been working on apitch for an educational Flash projectfor kids, as well as a few projects forthe DFES, including interactivelearning tools for teachers.

T H E S I T E S I ' V E B E E N V I S I T I N G

www.thingsleftunsaid.comThis site is a really imaginative use ofthe innate anonymity of the net.People add their dark secrets to beviewed by thousands of others online.

w w w . b o r g s t r o m . c o mI love the unusual way the interfacefor this online portfolio site works -give the guy a punch, and it changessections. You scroll the sections byslapping his face. Nice!

w w w . c o c k a d o o d l e . c o . u k

The name realty speaks for itself...awesome animation style and greatdrawing tools.

W H A T I ' V E B E E N W A T C H I N GLuc Besson's latest film, Angel A, inwhich an angel disguised as a saucygirl comes to earth to save a manw h o ' s a b o u t t o c o m m i t s u i c i d e . I a l s o

watched 101 Reykjavik-a 30-year-oldm a n m a k e s h i s m u m ' s l e s b i a n l o v e r

pregnant in a wintry and drunkenReykjavik. I didn't know the Icelandershad it in them. I've also been to seeThe London Fire Brigade Archive atThe Photographers' Gallery, London,which is showing a selection of theLondon Fire Brigade's archive photos.

W H A T I ' V E B E E N L I S T E N I N GT O T H I S M O N T HI d o w n l o a d e d t h e B e s t o f T r a n c e V o l 1 :

the Early Classics of German Tranceearlier this month. It really gets myspeed up when I'm working on thosel a s t - m i n u t e d e a d l i n e s ! I a l s o l o v e t h e

new album from Muse, Black Holesa n d R e v e l a t i o n s .

Abou t t he s i t eInstead of tackling an existing cause, wedecided to come up with our own: The

Long Weekend - an extra day to join in.The purpose of the site is to appeal to and

persuade hard-working professionals andtheir employers to register, give their timeand become part of the Long Weekendonline community.

In an attempt to address apathy acrossthe nation, the idea encourages employersto allow individuals, through an incentivescheme or just because they're nice, totake one day a month to share their skillsand interests with a good cause. This

happens over a long weekend.As an individual visiting the site you can

register, add your skills, interest areas andm o t i v a t i o n t o a d a t a b a s e t h a t f u n c t i o n s t o

match you with an appropriate charity or

voluntary organisation. It's a bit like adating site for skills and organisations. It'sunlike conventional dating sites, however,in that The Long Weekend builds an online

community of 'I cans' and 'I wants', whichyields a list of skills, talents and interestson one hand, and a list of organisations, charities andother community groups who need help or want to takes o m e k i n d o f a c t i o n o n t h e o t h e r .

The Long Weekend maintains a fresh, direct, playfulfeel, which reinforces the importance of taking actionbut is distanced from the conventional worthy andevangelical associations normally linked to charities,volunteering and community work. The homepage encourages visitorst o t h i n k a b o u t t h e i r o w n

s h o r t f a l l s a n d a d m i t

them in a playful, non-

judgmental and ^proactive platform. There'sa poll for submitting andvoting for your favouriteexample of apathy andsharing your most shamefulapathetic moments with others.Navigation is simple, friendly andstraightforward, helping visitors findwhat they want quickly 'Still looking fora match' also helps to highlight projectst h a t h a v e b e e n o n t h e d a t a b a s e f o r

some time and remain unfulfilled. In the longrun, everyone's a winner in The LongW e e k e n d ' s w o r l d .

T H E L O G O

A delicious font that plays with different sizes to create a light-hearted but bold identity for the site.

S E A R C H

Quick access into the database of users' projects and skills, whichtakes visitors straight into the heart of the site.

©ONLINE POLLAn immediate point of interaction and participation on thehome page. The use of a lazy cat helps illustrate the message.

oSUCCESS STORIES

Access to experiences and stories, which show that thiss e r v i c e w o r k s f o r a l l t h o s e i n v o l v e d .

©MAIN NAVIGATIONEnables you to register, see who supports the site and get anoverview of the different projects.

S T I L L L O O K I N G F O R A M A T C H

Highlights projects that have been on the database for some timeand encourages users to sign up to these directly.

C O L O U R S

They've been kept fresh, bright, clean and bold.

P r a c t i c a l d e s i g n N o v e m b e r 2 0 0 6 4 1

W e b s i t e B u i l d - O f f i .

^This site needs to develop and build an onlinecommunity, which can then be motivated intoactivity - a rally at the school auditorium"Paul WyattLycos www.lycos.co.uk

A b o u t m eAs head of design for entertainmentportal Lycos, I'm responsible for howthe site looks, the way specials aredesigned and our online and printcampaigns. I've worked in theindustry for eight years and haveproduced sites and animations for thelikes of Sony Piaures, Canal Plus andCarlton Television. View my work atwww.pauiwyatt.co.uk.

W H AT I ' V E B E E ND O I N G T H I S M O N T HI've been working on the official FanCentral area for the X Factor TV show.We've been designing and buildingthe area, as well as creating an onlinecampaign for it. Have a look at www.lycos.co.uk/xfactor.

THE SITES rVE BEEN VISITINGw w w. a p p l e . c o m / g e t a m a cThe new 'I'm a Mac', 'I'm a PC ads are

very entertaining. Even moreentertaining are the alternativeversions found on youtube.com.

sexy.lycos.co.ukWe're all addicted to this at work.Upload your photo and let others voteon whether you're sexy or not so sexyEr, I have no votes... Could you pleasevote for me?

www.adobe.com/products/fiash/speci'a f/ffasha n n iVersary/m icros i teWant to know the history of Flash?This very cool microsite looks at Flash'spast, present and future.

W H AT I ' V E B E E NW A T C H I N GTinker, Tailor, Soldier.Spy, the 1979 BBCm i n i - s e r i e s b a s e d

o n J o h n L e C a r r e ' s

b e s t s e l l e r . A l e c

Guinness gives anamazing performanceas the retired spyGeorge Smiley.R e c o m m e n d e d .

W H A T r V E B E E NL I S T E N I N G T O T H I SM O N T HA friend of mine thinkst h a t ' W e ' r e G o n n a

Change The World' byM a t t M o n r o e i s

the best songever recorded.I c h e c k e d i t o u t

recently. It'sactually the most bonkerst u n e e v e r t o b e r e c o r d e d

i t ' s b r i l l i a n t .

Abou t t he s i t eThis month, I've gone local. Thec o m m u t e r - b e l t t o w n o f W e s t e r d a l e n e e d s

help. Due to a ridiculous one-way system,c o m m u t e r t r a f fi c a n d l o c a l b u s e s d r i v e

along narrow residential streetsthroughout the day. To make mattersworse, Westerdale is full of blind spots and

sharp corners. Crossing a leafy street cansuddenly become a dangerous exercisew h e n a n u m b e r 5 3 b u s l o o m s i n t o v i e w.

It's become a game of chicken every timea resident tries to cross the road at a busytime of the day.

Due to these problems, and the

resulting number of accidents, residentshave decided to petition the town council.Their aim is to have traffic signals and

crossings installed to regulate and slowdown the flow of traffic through theser e s i d e n t i a l s t r e e t s .

In designing the site for this campaign,I wanted it to look like a direct response to the issues at hand. Itwas important that It didn't look bogged down with content onthe home page. Instead, I created a page that is vibrant, with aclear route to the action required of the visitor - sign the onlinepetition and join the community aspects of the site.

The site needs to develop and build an online community, whichcan then be motivated into activity - a rally at the schoolauditorium. We do this by heavily promoting the community tools.The forum is key to highlighting Issues and Incidents that have

occurred due to the lack of proper traffic regulation InWesterdale. Visitors can post pictures and stories of trafficcongestion, so the forums support the online petition by

giving evidence to help the cause.The campaign organiser, Delia Reilly, also keeps a blog.

This documents her trials and tribulations with the localcouncil. What's great about this is that visitors can

subscribe to the blog to get the latest news andopinion directly. They can also comment on the

posts and give feedback - it's perfect user-

L generated content.For this sort of campaign, we want to give visitorsthe opportunity to display their support, so the media

section has PDF poster downloads. Visitors are

encouraged to print these off and put them upi n t h e i r w i n d o w s a t h o m e .

For those coming Into Westerdale, a 'safedriving' area has been designed and created usingthe information posted in the forum. It

encourages those driving through Westerdale tob e m i n d f u l o f t h e b l i n d c o r n e r s a n d n a r r o w s t r e e t s

a r o u n d t h e t o w n .

HELP US PETITION FORUM BLOC SAFETY

Traffit signals for— - Westerda le

o

•VCNfCDownp* of cemmitBr iroAc

Y O U R H B I P

cdnwng and lignolitfitt W

33 injuries in 8 moaths

SKH OUR OH l lH t P tT IT IOH

5,302 PetUioa names added

A D t lU 'SB lOeFar, i . l ow r fmma(nMn lSH i r. iA *«bcdcxMndl,ralKdrt]ib(Md4i.bMii.wti«ad

•r campoignoroatMMri.PihaR«%'t,<Mirfalas-

C O T O m a u n p u e K r a u y

at the ST lake's audHor'mmS A fl D R m H C

dwqiad te tofa rfrtving through

ura and how yw eon drtva wMieauHoAtwMghiwmo.

««• hovt p«t to9«#Mr a 'ahrfiMf ol odvtc* for y«w to download

Key featuresO FORUMT h i s f o r u m w o r k s t o d o c u m e n t a n d v e n t W e s t e r d a l e

residents' frustration at the traffic problem In their town. Italso works to bring people together offline to take part Inrallies and PR activities to highlight their campaign.

OBLOGCombined with Delia's dry wit, the blog keeps all readersI n f o r m e d o f h e r b a t t l e s w i t h t h e c o u n c i l a n d t h e s t a t u s o f t h e

campaign as a whole.

©MEDIAThe goal Is to have a campaign poster displayed in everywindow In Westerdale. That's a tough goal - In this section youcan download two different versions of the poster.

OSAFE DRIVINGDelia's busy campaigning and doesn't have lots of timeto create content for the site. Most of It is user-generated.A case in point Is the safe driving area. This guide to driving

safely In Westerdale was put together from the forum.

©STYLE AND TONEIt's clean, bold and colourful, and a direct call to action.The visitor knows Immediately where they can sign thepetition or post In the forum.

oC A L L S TO A C T I O N

The traffic signal Illustration works to great effect to

highlight these key site areas.

4 2 N o v e m b e r 2 0 0 6 Practical webdesign

W e b s i t e B u i l d - O f fo

'^ou don't just want to tell them stuff; youwant them to actively interact with the siteand feel a sense of shared ownership"D a v i d F o r e m a nToast Design www.toastdesign.co.uk

A b o u t m eI'm Director at Toast Design, a weband graphic design agency founded in1 9 9 7 . I ' v e w o r k e d o n c o u n t l e s s w e b

design projects of all shapes and sizes,from smalt brochure-style static sitesto large content<managed monsters.As a creative working with a widerange of clients and budgets, I'vequite a bit of experience in dealingwith different types of websites andcontent requirements.

W H A T I ' V E B E E ND O I N G T H \ S M O N T HThis month we've been launchingsome ecommerce sites, designingconcepts for a bar/restaurant site andplanning the next development of theToast Design site.

T H E S I T E S I ' V E B E E N V I S I T I N G

w w w . a l i s t a p a r t . c o mThere's always something informativeto read here if you have a sparem o m e n t t o fi l l .

p h p . r e s o u r c e i n d e x . c o mThis website is a great resource forfinding useful snippets of code andfull scripts!

w w w . t r i p a d v i s o r . c o mI ' m b a c k o f f t o N e w Yo r k i n t h e

autumn, so I've been busy checkingout places to eat and visit this timearound. This is a great site forpersonal accounts and reviews thatyou can trust.

W H A T I ' V E B E E N W A T C H I N GNot much, really. I watched Hostelon DVD quite recently, and it wasa b s o l u t e r u b b i s h . I f t h a t ' s a h o r r o r

film, the industry is in some serioust r o u b l e . T h e ' i n s e r t c h a i n s a w h e r e '

method of trying to scare viewers isboring at best.

W H A T I ' V E B E E N L I S T E N I N GT O T H I S M O N T HI've been listening to BBC 6 Music,some Led Zeppelin and a brand-newband that we're working with at themoment - plus various other stuff toon u m e r o u s t o m e n t i o n !

Abou t t he s i t eI think that the most important thing toconsider when you're developing a

community site is how to get the membersinvolved. You don't just want to lecture themabout stuff so that they remain passiveviewers of the site: you want them to activelyi n t e r a c t w i t h t h e s i t e a n d f e e l a s e n s e o f

shared ownership of the cause they're

fighting for It also needs to be regularlyupdated, so that visitors will log on frequentlyand hopefully be provoked into providingt h e i r o w n c o n t r i b u t i o n s .

With this in mind, we've designed a home

page that presents plenty of information andshows the opportunities for getting involvedin the campaign immediately. The content is

highly user-focused, displaying content addedby members and information for thosemembers - we want people to join in withthe campaign, so showing them what'savailable to them is a good starting point.

The layout of the site is structured to copew i t h t h e a m o u n t o f c o n t e n t t h a t i t w i l l

contain, and presented in such a way thatvisitors can clearly identify the various sections of thesite, without using too much confusing colour. Table-based layout is a no-go here, with XHTML and CSS

taking care of things and ensuring that the layout isb o t h fl e x i b l e a n d a c c e s s i b l e .

The layout also provides areas where the campaignorganisers can quickly switch content - fromasking members to donate to the site, toc a l l s f o r c o n t e n t .

The online home for friends & supportersof wind and other environmentallygenerated power solutions

■<% that

Lorem ipsum doior sit amet, cons«ct«tu«r adipisctng ellt.Proin sit »met pede s«d sapi«n aliquet accumsan. Cras atnunc. Ut convallis k>reni aliqiiam twtor. Donee soilicltudintortor n«c orci e9e$ta$ egesus. Mauris qu<$ nibh sit amctmauris fermcntum tnsttque. V«stibulum n«c magna sit am«tfetis eg«stas facitlsls. Vestibulum ante Ipsuin primts infaucibus orci luctus et ultrtces posuere cubilia Curae; Fuseepufus est, vehicula quis, bibendum in, convailis in, lacus.Praesent fadlisis varius erat. Sed emm uma, condimentumut, frtngilla at. egestas ac, orci.

jodnl - OxfordT h e r e a r e p l e n t y o f a i

w ind and <M:he r na tu ra ! nt a n b e u s e d t o g e n e r a t e p o w e r. .> > i n o r e

iohni - OxfordThere are ii^nty of areas thatw i n d a n d o t h e r n a t u r a i r e s o u r c e scan be used to gerterate pmer. .> > m o r e

J o h n * - O x f o r d

There ate plenty of areas thatw t n d a n d o t h e r n a t u r a f r e s o u r c e scan be used to generate power.^» m o «

JohnB - OxfordThere are plenty of areas thatw i r t d a n d o t h e r n a t u r a l r e s o u r c e scart be used to generate powvr...> > m o r e

Members StufV AB rr»embets get free access

to something great here

ift All members get free accessto something great here

V Ait members get free accessto something great here

AJI members get free accessto somethlrtg great here

Member Offers!

Company A are offering all ourm e m b e r s 2 5 X o f f h o m e w i r K i

generator kits AND free

C o n t r i b u t eI f y o u w o u l d l i k e t o s u p p l ya n a r t i c l e o r o p i n i o n p i e c ec l i c k h e r e .

m m - y y Reader PollS » > o « ) d t h e C <n n w e y

e s t m o r e

r e s e a r c h i n g m o r ealty friendly energy supplies?

Key features

o H E A D E R

A clean and simple header with CSS based navigation - headerimages can change for each site section.

O NAVIGATIONCSS-based navigation in the form of a horizontal list - if there's aCMS requirement, this section can be updated to include new pages.

©WELCOMENothing too wordy here - a simple statement about the campaign.We've Integrated a news feature, so top stories can be added.

O YOUR OPINIONGet straight to member content - read, reply to and post commentsand opinions to the site.

©JOIN NOWIIf you want people to join up. It's best to make a bit of noise, sothere's a large link here to register with the site.

©MEMBERS'STUFFSo what do I get for becoming a member? Here we can push thebenefits of joining the site as an Incentive to prospective members.

©FOOTERMore content! Calls for contributions, donations or general adverttiles can go here, along with a members' poll.

Practical -^ design N o v e m b e r 2 0 0 6 4 3

W e b s i t e B u i l d - O f f

■S e S S i

A b o u t m eAfter studying typography, Ifreelanced for five years as a graphicand web designer. 1 co-founded on-IDLE in 1999 while completing an MAi n I n t e r a c t i v e M e d i a . I ' m a c o u n c i l

member of the International Societyof Typographic Designers. I'vepublished two books on Flash, andI lecture at Online Labor and the

University of Art and Design in Zurich.

W H AT I ' V E B E E ND O I N G T H I S M O N T Hw w w . a r n o l d h o u s e . c o . u k

From the initial re-design, I developeda secure, non-file sharing drop boxsystem for kids to upload assignments- in privacy,

w w w. p e p p e r . c hI worked on a mass email creation,

sending a newsletter weekly withnewspaper-type layout. Unsubscribesare handied automatically, while theclient creates the news with headlines,images and stories in-house - as wellas sending to the subs database.

www.istd.org.uk/kutvCreated a satellite website for theISTD (International Society ofTypogrpahic Designers) to promote aspeaker's tour to five UK cities. Visitorscan purchase tickets, download eventprogrammes, link to location mapsand enquire.

T H E S I T E S I ' V E B E E N V I S I T I N Gw w w . r u b e n . f m

I often trawl photographers' sitesfor inspiration. This one has aninteresting approach to get youclicking and find out more, in a highlycompetitive market.

www.dhp-architecten.be/eng/i n d e x . h t m l

A cool and interesting way to

approach an interface for the ultimateweb design challenge - creating a sitef o r a r c h i t e c t s .

w w w. s p a n k u n i t e d . c o mAn interesting Flash magazine sitelooking at how to use animationintrinsically on a website.

^^Taking inspiration from online communityportals and the success music releasesÎ decided that My Space would be ideaV^M a r c P e t e rOn-IDLE www.on-idle.com

Of 10011

C h t e k i t o u t

ourmapvMti al ojrant tK»

G e t o u t m e r e

U w o u r d m r t o Q l t I d t i f t a n d

c M I d o t h e i s fi e r a t B d i n

geding London MWd far tee...

qi CortKlUld AddbFiienili

A d d t o F n

A RankUxrA BOCtUMT^ Vote far a toe London

A b o u t t h e s i t eThis site is a mix of looking good enough to

get people interested and being motivatingenough to get a reaction - and that's quite achallenge... The subject is a difficult choice,too, although it's something I'm actuallyInterested in: why is it so hard to find Wi-Fispots in the city that leads the world infinance and will host the 2012 Olympics - and

why isn't that Wi-Fi access free? The site aimsto start a petition to Get London Wi-Fi'd forfree, for the eventual benefit of the internetand, of course, London.

The target audience needs to be inspiredto contribute and understand the concept inone view. I'm a great admirer of Eduard Tufte- he uses graphic design to convey impossible

amounts of information. I'll show the progressof the campaign, and the growing number ofWi-Fi hotspots in London, graphically for aclear and immediate message.

Most campaigns or charity sites have littleor no funding. Taking inspiration from online

community portals and the success of musicreleases in the last few years, I decided thata page on MySpace would be the ideal hosting environment, ratherthan a web server and domain. I also reviewed sites such as YouTube,

Flickr, Friends Reunited and del.icio.us to make sure I had the rightcombination of tools and visual impact on my site. These portals havean underground, subversive feel, which is the ideal starting point fora campaign-based website. The second advantage is that the onlinecommunity is already well-established and supported by the excellentGoogle search engine - this maximises my potential target audienceand also provides tools, such as 'Add friends', meaning that I won't

have to spend time coding all of thesefunctions myself.

Users will only take ownership,contribute and pass on the ethos ofthe campaign if they feel they can

be involved directly and havet h e i r 1 5 m i n u t e s o f f a m e w h i l e

they're at it. I'm encouragingusers to input images and video

clips of their most-wanted Wi-Fispots in London - others could

possibly be swayed by these supportingv isua l case s tud ies .

The primary purpose of the site is tocollect votes that can eventually be handed

over to London's mayor. Ken Livingstone. Theresults and impetus to vote should thereforebe the most dominant and easy-to-use function

on the site, O

120DOOCampaign for a free London today

YES VotesVote Now!Click Here

V o t i n g t o t eTt» are al tw mweis we got to fv - help u» to de%« every dly comer

I Don lCwe

I Undecided

V o t e n c p w

Have your My-vole fcr a:WFiUnkn today.

L" 'il"J

9

[ a U i m t t ^ v o l e ]

wn Favourite SpotsSend tA yotf images or mom cfpt of your fMwile London VlAFi ipoi Eveiy week, tie moat kKaion wi win aPDA witi the Mest way to get anine anywhere, anytime

e

W i n n e r i a e t w e e i cAlexBiHampsleadH e a t t w i O i a b i w i dnew laptop.

Current ent i ie: (Cldi tovotestevounlearaddôwn)

aa

B e n T .L o n d o nG h e r k i n

J o e Mi n s i d e a

U 3 n d o f »T i t e .

f e r l m a l C

T i a n , o nt iew^toa t h o a .

■H a n s R .InaKle a LondonEyecâule.

^ A . RUphl||A}( Inmypventi'■K. gaidm-Noftti

H Alocifpii>^wto Loniian Bndge

Key features

oL O G O

It should contain a visual element of the subject, be

brightly coloured and clear.

P I E C H A R T

It shows the immediate impact of a vote. The

campaign status is immediately understandable.ec a m p a

oi m m e c

oi n d i c a l

0a z o o r

o

V O T I N G F O R M

Place it top right and the interface design is ani m m e d i a t e c a l l t o a c t i o n .

A N I M A T E D B A N N E R

This is the rallying call - an automated counter toindicate the number of 'yes' votes received to date.

L O N D O N M A P' Add-on relevant campaign information, such asa zoomable map that enlarges on mouse rollover.

I N T E R F A C E

A simple and professional page layout gives the

campaign credibility.

©RICH MEDIAGive users the ability to upload photos or video clipsof their ideal Wi-Fi spot for a visual case study.

W H A T I ' V E B E E N W A T C H I N GI've mainly been watching onlinevideo clips this month - YouTube,Yahoo and MySpace - to get someinspiration for an online TV channelI'm currently working on. Ontelevision, I really like the new seriesof Spooks and took great delight inthe new comedy series, I'm withStupid, which is hilarious.


Tu to r i a l sExpert advice on fluid layout, embeddingmaps, file management and more

Oor all the millions of words that havebeen written about CSS, some designsremain as difficult as ever to pull off

successfully. This issue, Craig Grannell takes onone of the thorniest challenges: athree-column layout that flexeswith your browser window. Findout how he does it on page 46.

We also explore how you canmake your contact or locationpages more interactive withGoogle Maps and help you makeyour first pages with the visualHTML editor NetObjects Fusion 8 - yoursto keep with this issue's CD.

You can roll your sleeves up for in-depthlooks at ActionScript programming in Flash anda DIY search facility, built with MySQL, PHP,H T M L a n d C S S . G e t s t u c k i n . . .

Tu t o r i a l so

T M s m o l M i46 Create liquid columns

using CSSMake an accessible three-column page layoi

5 2M a s t e rGoogle MapsHelp visitors find their way arouwith interactive maps

55 Manage website filesw i t h D r e a m w e a v e rKeep your web server up to date

52 Extend the MovieClip witActionScript 2 in FlashDevelop your interactive progamming skills

58 Get started withNetObjects Fusion 8Create web pages in minutes

72 up 3 social bookmarks i t e w i t h S c u t t l eMake your own del.icio.us with PHP

78 Add a search formwith MySQLBuild a find facility that's tailor-made for yoi

Your experts

Karl HodgeA veteran journalistand expert in creativitysoftware, Karl Hodge hasbeen using Dreamweavers i n c e v e r s i o n o n e . H e a l s o

regularly contributes toComputer Arts and .net

Craig Grannel lCraig Grannell is a writerand web designer who'sbeen messing around witht h e I n t e r n e t f o r a d e c a d e .H e a d o v e r t o w w w .s n u b c o m m u n i c a t l o n s . c o mt o r e a d m o r e a b o u t h i m

K r i s H a d l o c kKris is a designer, writerand contract programmerspecialising in FlashActionScript for clientssuch as Ted Airlines, IKEAa n d P fi z e r . C h e c k h i m o u ta t w w w . k r i s h a d l o c k . c o m

I ' - X iRob BuckleyRob is a journalist andeditor who's been workingo n t h e w e b s i n c e b e f o r eeven Netscape 1.0 cameout. He's a regularcontr ibutor to MacFormat,.net and Computer Arts

D a v e M c F a r l a n dD a v e i s t h e a u t h o r o fD r e a m w e a v e r 8 : T h e

Missing Manual and CSS:The Missing Manual, andhas a decade's experiencein designing anddeveloping websites

R a c h e l A n d r e wR a c h e l i s a d i r e c t o r o fweb solutions provideredgeofmyseat.com. Shebases her teaching onc o m m o n s e n s e a n d t h e

experiences she has In herown company every day j


TUTORIAL: CSS


CH?A text editor or the codeview of a visual web

design application

m S C H O O L SThe W3 Schools websitehas a thorough CSSsection, enabling youto learn how various CSS

property values affectyour designs.w w w . w 3 s c h o o l s . c o m /

W 3 C M A R K U PV A L I D A T I O NThe W3C MarkupValidation Service isessential for checking thatyour code is compliant.validator.w3.org

POSITION ISE V E RY T H I N GAn excellent resource thatoffers tips on gettingaround browser bugsand working with CSS.www.positionlseverything.net

A multi-talentedwebsi te

designerand

copywriter,Craig Grannell alsocontributes to .net andComputer Arts.

L E F T S I D E B A RProin at eros non eros adipiscing mollis.Donee semper turpis sed diam. Sedconsequat ligula nec tortor. Integer egetsem. Ut vitae enim eu est vehlcula gravida.Morbl ipsum ipsum, porta nec, tempor id,auctor vitae, purus. Pellentesque neque.Nulla luctus erat vitae libero. Integer necen im. Phase l lus a l i quam en im e t to r to r.Quisque aliquet, quam elementumcondimentum feugiat, teltus odioconsectetuer wi»i, vel nonummy sem nequein eiit. Curabitur eteifend wisi iaculis ipsum.Pe l l en tesque hab i tan t morb i t r i s t i quesenectus e t netus e t malesuada fames acturpis egestas. In non velit non ligula iaoreetul t r ices. Praesent u l t r ic ies fac i l is is n is i .V i vamus luc tus e l i t s i t amet m i . P l i ase l tuspedentesque, erat eget elementum volutpat,dolor nisi porta neque, vitae sodales ipsumnibh in ligula. Maecenas mattis pulvlnard iam. Curab i tu r sed )eo.

Nunc auctor bibendum eros. hiaecenas portaa c c u m s a n m a u r i s . E t i a m e n i m e n i m ,e l e m e n t u m s e d , b i b e n d u m q u i s , r h o n c u snon, metus. Fusee neque dolor, adipiscingsed^ consectetuer e t , lac in ia s i t amet , quam.Suspend isse w is i quam, consec te tue r i n ,blandit sed, suscipit eu, eros, Etiam ligulaenim, tempor ut, blandit nec, mollis eu,tec tus . P iam cursus . Vivamus iacu l is . Aeneanrisus purus, pharetra in, blandit quis, gravida

, A f l C a » . n ,

M A I N C O N T E N TLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odioiorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligutavolutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facllisi.Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sedaliquam, nunc egeteuismod ullamcorper, lectus nunc uilamcorper orci,fermentum bibendum enim nibh eget ipsum. Donee porttitor ligula eu dolor.Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim,accumsan eu, blandit sed, blandit a, eros.

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pedenibh eget odio. Proin tincidunt, velit vel porta elementum, magna diammolestie sapien, non aiiquet massa pede eu diam. Aliquam iaculis. Fusee etipsum et nulla tristique facilisis. Donee eget sem sit amet ligula viverragravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna.Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integeradipiscing semper ligula. Nunc molestie, nisi sit amet cursus convallis,sapien lectus pretium metus, vitae pretlum enim wisi id lectus. Doneevestibulum. Etiam vel nibh. Nulla facllisi. Mauris pharetra. Donee augue.Fusee ultrices, neque id dignissim ultrices, tellus mauris dictum elit, veliac in ia en im metus eu nunc.

R I G H T S I D E B A RNunc auc to r b ibendum eros .Maecenas po r t a accumsanmaur i s . E t i am en im en im,e l e m e n t u m s e d , b i b e n d u mquis , rhoncus non, metus.Fusee neque do lor,adipiscing sed, consectetueret, lacinia sit amet, quam.Suspend i sse w i s i quam,consectetuer in, blandit sed,suscipit eu, eros. Etiam liguijen im, tempor u t , b land i t necmollis eu, lectus. IMamc u r s u s . V i v a m u s i a c u l i s .

Aenean risus purus, pharetriin, blandit quis, gravida a,turpis. Donee nisi. Aeneaneget ml. Fusee mattis est Idd iam. Phase l lus fauc lbusinterdum sapien. Duis quisnunc. Sed enim.

•The completed web pagespans the width of thebrowser window, and thecolumns all appear to bethe same height

Create liquid columnsusing CSSCraig Grannell shows you how to create a three-column layout that stretcheswith your web browser's window, while being accessible and easy to edit

Project files are in theTutorial Files folder

Ohis tutorial aims to providea n s w e r s t o t h r e e c o m m o n

requests from Practical WebDesign readers. We'll show you

how to create a three-column layout that's

liquid in design, and in which the columnbackgrounds are all the same height. Thecolumns will appear in a different order inthe code to that in which they're displayed on

screen, enabling screen-reader users to get toimportant information fast. And we'll alsoshow you how to make everything look good.

Unless you're creating the most basic, linearsites, you need to know how to work withcolumns in CSS. When you're mucking aroundwith tables, columns are straightforward - you

just split a cell into as many columns as yourequire, and apply backgrounds to them. Whenworking with divs and CSS, things are a littlemore complicated. Divs are block elements,

meaning they display in a linear fashion, onebelow the other. You're probably aware that

by floating divs, and specifying a set width foreach of them, you can stack them horizontally,

creating CSS-styled columns. However, in CSS,backgrounds only reach to the end of a div'scontent, meaning that columns withbackground colours or images are typicallydisplayed with different heights. Somedesigners try to get around this by specifyinga common height value for the columns, butthis is inflexible, and not advisable unless youhave a one-page website. Others make use offaux columns, which use a background Imageto fake the backgrounds. This works well fora fixed-width site with fixed-width columns,but for liquid designs, your specifically sized

background GIF won't cut it.Therefore, you need a way of applying

a background image or colour to each column,and of making all the columns the sameheight. You can do this using a techniquepioneered by Mark Challoner, and expandedon by the brainboxes at the Position is

Everything website. Essentially, you add alarge wad of padding to the bottom of eachcolumn, then a negative margin of the samesize, which brings the document flow backto the point where the padding began. Youthen use 'overflow: hidden' to chop off theoverflow - this cut occurs below the longestcolumn's content. Various floats, margins and

display settings are used to position thecolumns, and subsequent content is positionedby making use of Tony Aslett's method forclearing floated content. The result is a layoutthat stretches to fit the browser window, buti s mo re access i b l e and eas ie r t o ed i t s i t e -w ide

than the equivalent tables-based layout.As well as showing you how to mark up and

style this design, we'll also show you how tocreate one of the drop-shadow images for the

top of the columns, and how to create andstyle the horizontal navigation bar

ii Unless you're creating basic, linear sites, youneed to know how to work with colunnns 99


CSS liquid columns Tutorialo

O Create the layoutSet up your liquid columns and add some content

OCOPY FILESCreate a new folder on your hard driveto house the project files, and then copy theassets fo lder f rom th is issue's CD to i t . This

folder contains the three images that youneed to follow the walkthrough: grey-shadow-

top.gif, logo.gif and white-shadow-top.gif.(Check out the three-step Photoshop tutorialon page 49 to see how to create one of the

drop-shadow images - you can use any imageediting software to create the same effect.)

©CREATE A WEB PAGEOpen a new document in your editorof choice, and add all the usual default bitsand bobs for a web page, as shown below.Note how the style tag links to liquid-columns.CSS (which will be created later). Also, notethe conditional comment below the style tag-this will later enable you to add some hacksfor the badly behaved Internet Explorer forWindows (via the appropriately namedliquid-columns-ie-hack.css). The order ofthese elements is important - the conditionalcomment must come after the style tag,b e c a u s e t h e h a c k v a l u e s w i l l o v e r r i d e t h e

d e f a u l t o n e s .

< ! D O C T Y P E h t m l P U B L I C " - / / W 3 C / / D T D X H T M L

1.0 Strict//EN"" http://www.w3.org/TR/xhtml 1/DTD/xhtml 1 st r ic t .dtd" >

<html xmlns="http://www.w3.org/1999x h t m l " >

< h e a d >

<meta http-equiv="content-type"content="text/html; charset=utf-8' />

■-titi-II^BiiTi iiliiiiiii i'litie><style type= "text/ess" media=''screen">! / * < ! [ C D A T A [ * / ~

: / * * /

urKljBuid-columns.css);

<!-|if Ite IE<link rel="stylesheet" type="text/ess"href="liquid-columns-ie-hacks.css"m e d i a = " s c r e e n " / >

< ! [ e n d i fl - >< / h e a d > l B I

©CREATE THE BASICPAGE STRUCTUREThis page has a slightly different structure tothe pages that we usually create in PracticalWeb Design, because it will stretch with thebrowser window. The main building blocks canbe added in a linear fashion, but the wrappershould only surround the column divs, not all

of the structural divs. Therefore, as shownbelow, add three divs with the id values'masthead', 'wrapper' and 'footer', one undert h e o t h e r .

Nested inside the wrapper div, add threefurther divs: 'mainContent', 'ieftSidebar' and

'rightSidebar' (which will become thecolumns). Once that's done, add a paragrapho f t e x t t o t h e f o o t e r d i v.

[<div id="masthead~[</div>. < d i v i d = " '

< d i v i d = " m a i n C o n t e n t " >

< / d i v >

< d i v i d = " l e f t S l d e b a r " >

< / d i v >

<d iv i d=" lhh tS idebar ">< / d i v >

[</div>K d i v i d = " f o o t e r " >

,_ i*iB»Thjs is the footeii</div>

M a i n c o n t e n t

Loremipiuindokttutintt(,C(»sectHuerkdiplictD|elh.Matbieoatiudo,ipsuinittlphvenaiviiia.ofcimagiui<MM>cut oeque.klpulviotf<KuUtmtiiiffleteaini. SuH«MUue kl velii vltK UguU vohupu condunenrnm. AUqutmeruv vw.SedQuisvelk. Nulla tei&i.NufitUbaD.potueie upkn. Nun coDteaeoter. Sed tUquan, otUK eget euismod uAimcoiper. lecaii ounc uUuncoiper ORi, fenmaun bibeadum enim:uUunMipere

ro cunui veneutii. Nam ffligai mim, iccumsu eu. bliadit laj, blandit a, cm.

Quiique (iicilUlt ent a dui. Nam nuJeuiada omare dolor. Cm gnvida, diaa sic tntH rttmcut oraait, erac ellt conaecmer ent, id egetat pede nMctenProin tfatcidunc, velk vcl pona elemntum. magna diant moletde upien, km aliouet maua pede eu dlam. Aliquam laculia. Putce et qwum et ouBa oltdqueDooec^iem lit amttUfulavivem gravida. EtiainvehieulaumavdEumis.Sutpeaduseiagittit ante a uma.Mocbi a est quit orci«Muequat mourn. Nuegenas feuaiat feltt. Integer adlpiadni aeraper Ugula. Nunc moletile, ftitl u amei cunui c<mvaUU> Mpieo kcoii prethitn meou, viae pretaim enin wiii idDonee ves kim. Etiani vel ntbh. Nulla lk:i]iai. Mauria ritvecra. Donee utcue. Puice Qitricet. oeoue id dinu uhricet, leUui nauris dicoim eiit, ve) li

L e f t s i d e b a rProio at tax aoa eroi adipiicing moUit. Donee leii^ oupit led diam. SedMoiti ipiuin iptum, pona nee, tempor id, aucior vitae, punu.Q u i a q u e a U Q u e t . q u a m ' - xVivamuKSLut elit anwputvinar dlam. Curabitur aed leo.

led diam. Sed conaequat ligula nec mnor. loteger Met leiPettnCBique neque. NuUaluaus erat viae libtfo. InasMr

, . iodioconiecietuefwi»i,velnonumrayjcraneaoein^.(tique lenecou et netut et malesuada hfflei ac Ditpii egeuaa. b non vdiiPnateDiu pelkntcsque, erat Met ektnectura voii— ^ '

Ut viiae eaim eu e« velbcula gnvi« entm. FbaaeUus aliquam enin et

Cunbinir elesfend witi laeutit jpgiM_ laoKctuki1ces.Pne«entul(t<cie»tecfliiiti

niit potra neque. viiae sodalea iptum Dibb is ligula. Maeceoa* mj

Ntmc HKtor bibeadum erot. Maecenat pona accumian maurit. Etiam enin enim,eleinen(um sed, bibendum quia, ihoncut non, meiui. Puace neque dolor,adipiicing led, coDsecKueret, lacinia in anut, quam. Sutpendiiae witi quam.conwctenter in, blaodit ted, suicipiteu.croi. Etiam ligula eoiffi,nBporui,blinec,fflolibeu,iecii».Namcunui.VivaoiuiKulii. Aeneanrisuipuni.pharetrain.blandliquis, gnvida a, iui]As. Donee niil.Aeoeanegei mi. Puactmaiti!diam. Pbasellus ftucibui ioierdum la;^. Duii quit nunc. Sed enim.

Right sidebarNunc auctor bibendum eioi. Maecenai pona accumsan maurii. Etiam enim enim, ekmenoim Md. b&endum quit, rttoocut nca d i p i i c i n g s e d , c o n s e e t e t u e f e t , l a c l n i a u i a i O M , q u a m . S i • " •nec, molbi eu, tecau. Nam cuiwt. Vivamui iacul i t . AeLdiam. Pbaiellui huc^ intcrdum ia|^. Duii quit nunc. Sed

©CREATE A CSS FILEIt's now time to start working with CSS.Create your main CSS document, and save it inthe same folder as your web page. Use the filename 'liquid-columns.css'.

O ADD PAGE CONTENT ' SET PAGE AND FONT DEFAULTSThis layout is to be a liquid design, so Add the rules below, which set thethe widths of the three columns will add up to defaults for the page. The first rule removes100 per cent (or thereabouts) of the width of padding and margins from all elements,the browser window. Adding padding to thec o l u m n s w o u l d t h e r e f o r e m a k e t h e p a g e | * { |w i d e r t h a n 1 0 0 p e r c e n t , l e a d i n g t o a t l e a s t ' m a | ^ : Q j [o n e o f t h e fl o a t e d d i v s b e i n g d i s p l a y e d u n d e r 1 I Jthe others. However, having content hug }the edges of columns isn't a great idea either.A way around these problems is to nest a The next two rules effectively set the defaultcolumnWrapper div within each of the three ; font size to the equivalent of lOpx, but usingcolumns, then place the column content i relative units. This means that font sizes canwithin it. Although this is extra markup, it's be tightly controlled, just like when you'renot going to make a noticeable difference to | using pixels to size text. However, Internetdownload times, and it'll make life a lot easier Explorer users can still resize the text, whichwhen it comes to styling the columns. isn't the case when it's sized using pixels.

Note that in the following example code,t h e r e ' s a s i n g l e h e a d i n g a n d a c o u p l e o f i I h t m l { |t runcated paragraphs, for space reasons. For i | font -s iz^100%; ~your actual file, add larger paragraphs of text {}(or just copy them from the file on this issue'sCD). Note that the columnWrapper div and jfont-size: 62.5%;contents should be added to the IeftSidebar (backlround: #cccccc;a n d r i g h t S i d e b a r d i v s a s w e l l . , J

i<d iv id="mainContent "< d i v c l a s s = " c o l u m n W n

< h 1 > l \ / l a i n c o n t e n t < / h 1 >

<p>Lorem ipsum dolor sit amet...</p><p>Quisque facilisis erat a dui...</p>

< / d i v >

l</div

Once you're happy with your content, you cansave and close your page.

The final rule in this step, which is a groupedselector, defines the font style for text withinthe three specified divs. The 1.1 em/1.4emvalue, in combination with the previous tworules, creates a font size equivalent to 11 px,with a line-height (leading) value of 14px.

'#n»astheaA #wa||||f Jipoter|l ""jfont: 1.1em/1.4em Verdana, Arial, sans-serif;

• Remove the CSS, and thecontent appears in a logicaorder, with the most imporcontent (the central columrs h o w n fi r s t

B A C K G R O U N D SA N D B O R D E R SDon't just plump for bo r w h i t e b o r d e r s - I n s t

u s e a d a r k e r s h a d e o f .

div's background coIola subtler effect that acdepth to your design.

l e f t s i d e b a r


Tutorial CSS liquid columns

Quick tipS E T T I N G T E X TL E A D I N GExperiment withline-height values whenyou're working withtext. Set this too low, asshown below, and largea r e a s o f t e x t b e c o m e

extremely tricky to read.

M A J N C O N Te N T

s s r » » s ! r n . " rJsrs

O STYLE HEADINGS ANDP A R A G R A P H S

Add the two rules below to style the headingsand paragraphs. The first rule sets the level-one headings to 1.5em emboldened Arial

(with 1.5em being equivalent to 15px), inu p p e r c a s e .

[ E E[font: bold I.Sem Ariifcsans-serif;text-transform: uppercase;

MBKi^ottom: lerr i?') I I I r I I I

©STYLE THE MASTHEADThe rule below should be added next,

styling the first of the structural divs on thepage. As you can see, the background valuesset a background colour and also link to thefile assets/logo.gif, which you should have

copied to your hard drive in step 1 ofthis project. (If you haven't, do that now.)The div has a specified height, and also ab o t t o m b o r d e r .

|#mastheadT"background: #7accc8 url(assets/logo.gif)

height; 50px;j b o r d e r - b o t t o m : I K s o l i d # 3 a 9 1 8 c ; ^}

©STYLE THE FOOTERAdd the following rule to style thefooter div, setting a background, a top borderand padding around its content.

l # f o o t e r fIbackaround: #cccccc~'iiiiiiii I Hp ipi iiiiii II111111 Jpadding: 10pN^

STYLE THE WRAPPERThe first of the drop-shadow images

that you've created, and its associatedbackground colour, are added to the wrapperdiv. The reason for doing this is that roundingerrors often cause percentage-based layouts tohave single-pixel gaps between columns whent h e w e b b r o w s e r w i n d o w i s a t c e r t a i n s i z e s .

Adding a horizontally tiling background to thewrapper ensures that it spans the entire widthof the design. If the tiled backgrounds wereonly added to each individual column, and notto the wrapper, the chances are a one-pixelb r e a k w o u l d b e s e e n a t t i m e s .

As for the rule itself, it's simple enough: thehex value sets a light grey as the backgroundcolour for the div, while the other values setthe image found at assets/grey-shadow-top.gifto tile horizontally (due to the use of repeat-x).

L E F T S I D E B A RProtn * t f t ro i non aros <D o n « c * e m p « r t u r p h i s e d d i « m . S e d

cons«4ii8t lifiul* n«c tortor. InteQftrM m . U t v r t a * * m m « u M t v « h » c u U g r a v i e s .M o r b i i p t u m i p * u m , p o r t a n * c , t c m p o r i d ,• k i c t o r v t t M , | » u r u t . P * l < « n t e * q u « r > e q u « .NuH* luctus «r*t vita* libcro. lnt»9er n«c• t i i m . P h a f c l i u * a l i q u a m a n i m e t t o r t o r .

Q u i s q u e a l i Q u e t , q u a m a t c m e n t u mcondlm«ntufn feuQiat, teKut

M A I N C O N T E N TL o r * m i p t u m d c l o r t i t a m e t . C ' 4 a fi t M o r b i c o m m o d o ,

i , v t l nI n e t i t C u r a b i t u r a l e i r a n d w s i i a c u U s i p t w m .P a t l a n t e s q u a h a b i t a n t m o r b * t r f « t i Q u eM n e c t u s « t n e t u s a t m a l * « u a d a f a m e * a ct u r p i s a s a s t a s . I n n o n v a i t t n o n U g u l a i a o r e a tu t t r i c M . P r a a c e n t u l t r k i a * f a d l M s n i » l .V i v a m u s l u c t u i a l i t a i t a m e t m i . P h a t e M u sp e t l a n t M q u a , a r a t a ^ a t a l a m a n t u m v o h i t p a t ,d o l o r m s l p o r t a n a q u e . v i t a e t o d a k s i p c u mn i t > h i n l i fi u t a . M a e c e n a s m a t t i s p u l v i n a rd i a m . C i i r a t > i t u r M d I m .

N u n c a u c t o r b i b a n d u m a r e a . M a a c e n a t p o r t aa c c u m s a n m a u r i a . E t i a m a n t m e r t i m ,a l e m e n t w m » e d , b i b e n d u m q u i t , r h o n e u #

n o n , m e t u s . F u « c « r t e q u e d o l o r, » d i p « t c > n gs e d , M n s e c t e t u e r e t , l a t i n i a s i t a m « t . q u a m .S u t p e n d i s s e w t t i q u a m , c o r t » e c t » t u « r i n ,b l a n d H s a d , t u s c i p r t e u , e r o t . E t i a m l i « u t a

ipaum sad pharatra gravida, orci magna rhoneus naqua. Id puMnar odioloram non turpis. Nullam sit amet anim. Suspandissa id vaiit vitaa liguiavolutpat condrmantum. Aliquam arat volutpat. Sed quia vaUt Nulla faciUai.N u l l a l i b a r o . V i v a m u t p h a r a t r a p o s u e r e s a p i a n . H a m c o n s a c t a t u e r . S a d

aliquam, nunc agat auismod uilamcorpar, iactut nunc ullamcorpar orci,farmantum bibandum anim nibh eg«t ipsum. Oonac porttitor llgula eud o l o r . M a e c e n a s v l t s e n u K a c o n s e q u a t l i b a r o c u r t u s v e n e n a t i s . N a m

m a g n a t n i m , a c c u m s a n a u , b l a n d i t M d , M a n d l t a , a r o s .

Quisqua faeiliais arat a dui. Nam malesuada ornara dolor. Cras gravida,diam sit anwt rhoneus ornare, erat aiit consectatucr erat, id egestat pedan^ eget odio. Proin tincldunt, velit val porta atemefttum, magna diammolestie sapien, non aliquet masM peda au diam. Aliquam laculit. fuscaet ipaum et nulla tristique facilisit. Donee eget Mm sit amet iigula vivarragravida. Etiam vehicula urna vel turpis. SuspendisM Mglttis ante a uma.Morbi a est quit ord conMquat rutrum. Nullam egestas fe«igiat feKt.I n t e g e r a d i p i s c i n g M m p e r I i g u l a . N u n c m o i e t b e , n i s t » i t a n > e t c u r t u sconvatlit, Mpien lectus pretium metus, vrtaa pretium anim witi id tectut.Donee vestibulum. Etiam vel nibh. Nulla fadltsi. Mauris pharetra. Doneeaugue. Futce ukrices, neque id dignlwim ut^ces, tallus maurit dictum elit,v e l l a c i n i a a n i m m e t u s e u n u n c .

T h i s i s t h e f o o t e r

R I G H T S I D E B A RN u n c a u c t o r b i b e n d u m e r o s .M a e c e n a s p o r t a a c c u m M O

m a u r t s . E t i a m e n i m e n i m ,e l e m e n t u m s e d , b i b e n d u mq u i t , r h o n e u s n o n , m e t u s .F u s e e n e q u e d o l o r ,

a d i p i s c i n g M d , c o n s e c t e t u e re t , l ac in ia sK amet , quam.S u a p a n d i S M w i s i q u a m ,c o n s e c t e t u e r i n , b t a n d i t M d ,

s u t c i p t t e u , e r o s . E t t a mI i g u l a e n i m , t e m p e r u t ,b landK nec , mo tHs eu ,l e c t u s . N a m c u r s u s .

V i v a m u s l a c u l w . A e n e a nr i c t M p u r u t , p h a r e t r a i n ,b l a n d i t q u i a , g r a v i d a a ,

t u r p i s . O o n e c n i a l . A e n e a nege t m l . Fusee ma tbs ea t i d

d i a m . P h e M l l u s f a u c i b u sinterdum uplen. Duts quitn u n c . S e d e n i m .

•As you can see in this screenshot from Safari, not styling the wrapper div with 'overflow: hidden' leadsto the huge padding-bottom value being displayed

background: #ebebeb url(assets/gF^-shadow-top.8if) 0 0 rspeat-x;1 ) 1

©STYLE THE COLUMNSThis next set o f ru les is the firs t o f

the tricky bits - aside from the backgroundproperty/value pair for #mainContent, whichworks in the same way as the one for

#wrapper, by horizontally tiling the imagefound at assets/white-shadow-top.gif. Becausethe columns are all to be floated, they alldepend on each other to some extent, and thesize and margin settings of one will affect the

positioning of the others.Prior to working on positioning columns,

you need to decide on their width values.For this example, the left-most column

(leftSidebar) will be 30 per cent of thebrowser window width; the central column

(mainContent) will be half the browserwindow width; and the right-most column

('rightSidebar') will take up the remaining 20per cent.

All of the divs are floated left, which stacksthem horizontally, and width settings basedon the values mentioned in the previous

paragraph are applied. (Note that the valuefor #mainContent is 49.999%, rather than50%. This is because of browser roundingerrors - if your values add up to 100 per cent,some browsers will end up displaying one ofthe divs under the others, due to the pixelvalues based on the percentages beingrounded up, rather than down.) However,if you test the page, you'll see that themainContent div is displayed at the far left -this happens because it appears first in theweb page code.

Therefore, margin settings need to be usedto push and pull the various divs into place.First, a margin-left setting for #mainContent

moves the associated div 30 per cent from theleft-hand browser window edge (which is thewidth value given to the leftSidebar div).Now, the leftSidebar div stacks to its right, soa negative margin-left value is assigned to#leftSidebar to position the associated div att h e l e f t o f t h e b r o w s e r w i n d o w. T h e v a l u e f o r

this property, 79.999%, is arrived at by addingthe width and margin-left values of# m a i n C o n t e n t .

l # m a i n C o n t e n t t - ' . ' l ' " " 1background: #ffffff url(assets/

white-shadow-teJ>.0f) 0 0 wpMt-x;Ifloat: leftT

jfloat: left;Iwidth; 20%;1}

©ADD A COLUMNWRAPPERS T Y L E

The next rule is more straightforward, merelystyling the columnWrapper divs by applyingpadding to their edges. The padding propertyb e l o w u s e s s h o r t h a n d v a l u e s - t h e fi r s t v a l u e

is applied to the top and bottom edges of thedivs, and the second value is applied to theleft and right edges.

ToIumnWrapper {p a d d i n g : l O p x ;

4 8 N o v e m i D e r 2 0 0 6 Practical webdesign

CSS liquid columns Tutorialo

©MAKE THE COLUMNS THES A M E H E I G H T

At the start of this tutorial, we explained the

theory of how this technique works, and hereare the all-Important two rules for makingthe column heights the same. The first rulesets a huge padding-bottom value for thethree column divs, and then an equal negative

margin-bottom value. The subsequent#wrapper rule chops off the overflow,resulting in three columns of equal height.

There are two issues to note. First, then u m e r i c a l v a l u e s c a n b e s m a l l e r t h a n t h e

ones shown - the value used is actually themaximum allowed, a restriction imposed byApple's Safari browser. Second, should youwant to have some bottom padding on thecolumns, you'll need to reduce the margin-bottom value accordingly - for example,setting it to -32,757px would provide lOpxof padding. However, be aware that paddingfor this exannple design has already beenadequately dealt with via the previous rule,.columnWrapper,

content. Other settings reduce the content'sheight to zero and set its visibility to hidden,which keeps it from being seen on-screen.

i#wraMMPafter Iicontent: '. ' i

Iheaht: Q;fclear:IvisibilifcP hiddelt}

Unfortunately, this doesn't work with allbrowsers. For example, Internet Explorerdoesn't understand the above rule at all, and

simply ignores it. Adding the following two#wrapper rules deals with the clearing issuefor all versions of Internet Explorer.

Ay ft if/

L E F T S I D E B A RPrein st «rM non aros •dlpifcing nraNtt.Donee Mmp«r turpta Md diim. S«dcoHMQuat Mguto nw: tertor. Integer egetMm. Ut vltM enMn eu est vehiculs gravUe.Morbt ipeum ipmm, porta fwc, tempor td.

R I G H T S I D E B A R

wilae Kbero. Integer necaHquam entm at tertor.

QutS4ue aliqueC 4uani elementum

M A I N C O N T E N TLi>rcni iptuni dolor tK amct. censedetuer adtptodng eML Mixbi eommodo,ipaum tad pharetra sravMa, ere* m»gn» rfiencua neque. id pulvinar edielorem nen turpto. Nuflam *« amet eniai. Su*pendi*M td velK «lae iigtiavohjtpat eendimentum. ABquam erat vehitpat Sed quia veM. NuKaNuHa Kbero. Vivaatut pharetra powere sapien. Nam conaectetuer. Sed quia, rhoncua non, inetaaa K Q u a m . n u n c e g e t e u i a n i e d i i H a n K o r p e r ' ^ l e c t u i n u n c u t a m c o r p e r e r d . F i i a e e n a q w e d o t o r,

Ti nM eqet ipaum. Oenac portUtor Kgula eu dolor. adipiacing aed, eonaectet• t , l a e M a ( l t a i n e l , q t a « iMaecenas vitee nuHa censequat Bbere euraua venenatia. Nam magrta enton.

conaectetuer vrial, vel nonummy aem nequeir» elit Curabitur ekifend wia( tacuit* ipaum.

arin, U

a e n e c t u * c t n a i u * e t m « t e « u * d « f « m a « a c

turpi* egaatat. In non vetit non bgula tacr«etu l t r l e e * . P r a e a e n t u l t r i d e a f a e i K n a n k l .

V I v a m u * k i e t u a e M t l i t a m e t m t . P h a M i k i *

peHentetque, erat eget ekmentum volutpat,dolor nial porta n«)ue. »ttac aodalea iptumnfbh in Uguta. Haecenaa msUta pufvtnard i a m . C u r a b i t u r M d l e e .

Nunc auctor bibendum «ro«. HaeeenM portaaccum«an mauria. etiam enim anini,elemerîm aed, bibendum quia, rhoncua

mo<e«tie *apien, iipaum et noHa triatique fadliait. Oooec eqet aem ait amet Kgula viverragravida. Etiam vehicula uma vet turpi*. Suapendiaae sagitUa ante a uma.Horbi « Mt qui* ord conaequat rufrum. NtAam e««ftaa (eugiat Ma. Integeradtpiadrtg aemper Bguta. Nunc moteatie, ntti sK amet eurtua oonvaMs,aapien lectM prethim metua, vitee pretium entm wial id leebjs. Doneeveatibiilum. Etiam vel nibh. NuHa facKai. Hauria pharetra. Donee augue.Fuaee uftrkea, neque Id digniaaim uibicea, teHua mauria dictum alft, vel

auadpit eu, c««a. 8iam Ienim, temper ut, btendtmollis eu, lecbtf. Nam« u r « u a . V i v a m u a i M d k .

in, MandRquia, gravida iturpia. Donee nW. Aenaaeget ml. Fuaca mettia eat

interdum Mpicn. Oui* qv

blandit aed, auacipit eu, eroa. Etiam tigula

? In l i ne -b l (

17^

#mainContent, #jeftSidebar, iîlBidebar C_..jpadding-bottom: 32767px l important;margin-bottom: -32767^ limiiiMTûiliilPltlVrt

joverflow: hidden;"}

C L E A R S U B S E Q U E N T C O N T E N TW Next, rules are added that make use

of Tony Aslett's cunning method of clearingfloated content without resorting to separatordivs. This is primarily based around CSS 2'scapability of adding extra content at the endof an element by using the :after pseudo-element. Add the rule below to your CSS, andthe content'.' will be added after the wrapperdiv, displayed as a block, and will clear floated

l i w r a e S ldisplay: bll f

Finally, the footer div still requires the 'clear:both' property/value pair to be added,otherwise it doesn't appear in the exact

required location in some browsers.

j FIX PROBLEMS WITH IEThe first of the problems you'll

discover in Internet Explorer is that the centralcolumn is clearly in the wrong place. This isdown to a bizarre bug in Microsoft's browserthat doubles the size of margins assigned tofloated divs. The solution is simple: halve thevalue of margin-left for #mainContent in thehacks CSS, thereby overriding the original

(which was set in step 11).

l # m a i n C o n t e n t l - 1e n - l e f t : 1 5 % i - . " '

EIEEBIIclear: both:

©CREATE A HACKS CSSD O C U M E N T F O R I ENot surprisingly, Microsoft's ageing behemothof a browser screws a few things up when itcomes to displaying the design created thusfar. Therefore, create a new CSS document,and save it as liquid-columns-ie-hacks.css.

}

The second rule is for the benefit of IE5 only.For whatever reason, that browser refuses toshow the wrapper div's background unless theentire div is floated. Seeing as subsequentversions of IE don't suffer from this failing,a second float property/value pair is included,which IE5 ignores, due to the cunning use ofa C S S c o m m e n t . . .

G O O D U S EO F C O L O U RAdding backgroundc o l o u r s t o c o l u m n s i s a

u s e f u l m e t h o d o f d e fi n

a r e a s o f c o n t e n t . H o w e

always ensure that thec o l o u r s c h o s e n d o n ' t

d i s t r a c t f r o m t h e c o n t e

or overpower i t .

I # w n

Ifloat :i _

Ifloat/**/: iiiJ

O Create a drop-shadow Use Photoshop to create the shadow image for each column

tiame: fuTtttied-lC u s t o m 3 c

13

jptaefs/hch " acola Mode;} RGB Color jabit

Background Contents; {Whte I gI m a g e S z e :

7 . 3 2 K

o

1, RGB/8) ■- ■ G

i i • j m t f j m4 _ < , ^ r

rT , r

i . a .a x rO A r

(

1

' 1 3 0 9

C R E A T E A D O C U M E N TCreate a new document SO pixels square, andu s e t h e P a i n t B u c k e t To o l o r F i l l c o m m a n d t o fi l l

the background layer with the background colour thatyou want to use for the column. Create a new layer.

D R A W A G R A D I E N TSelect the Gradient Tool, and choose theForeground to Transparent preset. Make sure

the foreground colour is black, then hold down Shiftand draw a linear gradient as shown.

©SAVE AND EXPORTReduce the layer's opacity to soften theshadow, then save the document as a ,psd file

and export the image as a GIF via File > Save for Web.


Tutorial CSS liquid columns

i i ^Furtl

T H E F U T U R EO F C O L U M N SWith a bit of luck,w e ' l l h a v e m o r e d i r e c t

support for coJumns inf u t u r e v e r s i o n s o f C S S .

C h e c k o u t W 3 ' s s i t e f o r

various working draftson the subject, includingt h e o n e a t w w w ,

w3.org/TR/css3-multkol.

OAdd a navigation barCreate a list and style it to complete your designEagle-eyed readers will have noticed that weomitted to include a navigation bar in themain tutorial's code. This is primarily becausethat walkthrough was concerned withstructure, and we didn't want to getsidetracked. However, we'll now show youhow to create a basic navigation bar and addit to the page's masthead.

Unless you've got a specific reason for not

doing so, it's generally a good idea to fashionnavigation bars out of unordered lists. Thisprovides you with an easy way to controlspacing and various other properties viacontextual selectors in your CSS file. By

following the steps below, you can createsuch a list and style it so that the links stack

horizontally. We'll finish off by styling thehover state for the navigation links.

OEDIT THE HTMLC r e a t e a n e w d i v w i t h i n t h e m a s t h e a d

div, with an id value of 'navigation', which willbe used to house the navigation list. Withinthe new div, create an unordered list with afew list items. Within each list item, add aword or two of content, and turn each listi t e m ' s c o n t e n t i n t o a l i n k . T h e a m e n d e d

m a s t h e a d d i v i s s h o w n b e l o w. N o t e t h e h r e f

values are all #, because this creates dummylinks, which are suitable for testing purposes.Obviously, completed websites should neveruse # as a value for l inks.

|<div id^'masthea^|<div id- ' 'naviBat ion">

k l i xa h re f= "# ' ' >Home</a>< / l i >k l l x a h r e f = " # ' ' > A b o u t < / a > < / l i >|<li><a href="#">Coritacts</a></li>kA j j ^|</div|</div>

O STYLE THE NAVIGATION DIVWith the logo at the far left of themasthead in the web page's design, it makessense to have the navigation bar at the right-hand side. Add the rule below to float thenavigation div to the right.

irW)^wMPB{ifioat: riaht:} ^

O STYLE THE LISTAdd the rule below to style theunordered list within the navigation div. The

list-style-type setting of 'none' removes thedefault bullet points from the list. The line-height value is set to SOpx, which is the sameas the height value set for the masthead div

I S

4 . h t m l

I # me7, users c-ai9granneil/Deik:op/l>WD349«20-%203-colit20wet!)(20layouts/4ntmr> > h > e

Pnin at eros non eros adi^scing mollis. OortecNwnper turpis ted diam. Sed conscquat tigularMC tortor. Intogtr eget »«m. Ut vitae enim «utMt vthlcul* gravida. Norbt ipsum tpsum, porta

tempor id, auctor vitae, purus. frmqua. Nulla tuctus erat vitae Hb«ro. Integer necinim. PKasetlus atiquam enim et tortor. QutsqueiKquet, quam elemerr tufn coodimentum ^ugiat ,

odio consectetuer wist, vel nenummy semftequ* in elit. Curabitur ele^r>d wist laculisipeum. Peilentesque habitant morbi tristtqueMDMtui et netus et maiesuada fames ac turpis

I. In non veiit non Itgula laoreet ultricas.^ T M M n t u t t r i c i e s f a d l i s i s n i s i . V i v a m u s t u c b j s

•titsit amet m). Phasellus pelientesque, eratitum volutpat dolor nisi porta

L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u e r a d i p i s c i n g e l i t . M o r b i c o m m o d o , a u c t o ripsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem Mawtrrnon turpis. Nul lam si t amet enim. Suspendtsse id vel i t v i tae l igula volutpat mMir is. Ett*condimentum. Aliquam erat volutpat. Sed quis velit Nulla facitisi. Nulla libero. ataOMnCumVivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget rtMneua noneuismod ul lamcorper, lectus nunc ul lamcorper orci, fermentum bibendum enim Mqwe dolornibh eget ipsum. Donee porttitor ligula eu dolor. Maecenas vttae nulla consequetconse«feillbero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, SMm. !

e r o s . e o m d i

sodaies ipsum nibh in liguia. Maecenaspulvinar diam. Curabitur sed leo.

Htunc auctor bibendum eros. Maecenas portakccumsan mauris. Etiam enim enim, elementum

I, bibendum quis, rhoncus non, metus. Fuace

mic fp l t cu ,Qutsque fadlists erat a dui. Nam maiesuada ornare dolor. Cras gravida, diam tampLsit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget oolite eu,odio. Protn tincidunt, vetit vel porta elementum, magna diam molestie sapien,nort aliquet massa pede eu diam. Aliquam iacuiis. Fusee et ipsum et nulla purua, phantristique facilists. Donee eget sem sit amet ligula viverra gravida. Etiam vehiculayy^^ j, urna vel turpis. Suspendisse sagittis ante a uma. Horbi a est quis orci AaitMn

'consequat rutrum. r*ul»am egestas feugiat falls. Integer adipiscing semper ligula. Nunc molestie, nisi sit amet cursus convallis, sapien lectus pretium Mantum sametus, vitae pretium enim wisi id lectus. Donee vestibulum. Etiam vel nibh. enim.Nulla facilisi. Mauris pharetra. Donee augue. Fusee ultrices, neque id dtgnissimu l t r i c e s , t e l l u s m a u r i s d i c t u m e l i t , v e l t a d n i a e n i m m e t u s e u n u n c . T h i s i s t h e

a dolor, adipisdng sed, coilaonia sit amet, quam. Suspendisse wisi quam,

«ctetuar in, t>land«t sed, suscipit eu, eros.iigula enim, tempor ut, btandit nec, mollis

MJ, lectus. Nam cursiet. Vivamus iacuiis. Aeneanrteim purus, pharetra tn^ biandit quis, gravida a,tufpia. Donee nisi. Aenean eget mi. Fusee mattisut id diam. Phasetlus faudbus interdum sapien.Dute qui* nunc. Sed enim.

■Prior to the columnWrapper divs being styled in step 3 below, the content hugs the column edges

i n t h e m a i n t u t o r i a l . W h a t t h i s d o e s i s

effectively position the navigation div'scontent at the vertical mid-point - the

equivalent to valign-"middle" if you're used toworking with tables. The padding-right settingensures that the list doesn't hug the browserwindow's right-hand edge.

the text-decoration setting has been set to'none', thereby turning off the defaultunderline for links within the navigation div.

T h e c o l o u r o f l i n k s w i t h i n t h e d i v h a s b e e n

set to #ffffff (the hexadecimal code for white),and the font weight to bold. This ensuresthat the links stand out - if they weren'temboldened in this way, they might well getlost within the strong background colour oft h e m a s t h e a d .

m a {I text-decorat ion: nonei

O STYLE LIST ITEMSCreate the rule #navigation li, toenable you to define styles for the navigationlist items. By default, list items stack vertically,one under the other. You can change this by

setting 'display' to 'inline', which makes theitems stack horizontally. The margin-left

setting ensures that the list items don't sitright next to each other.

color: #ffffff;b o l d :

ImaWin-feft:}

©STYLE THE NAVIGATIOND I V L I N K S

Add the rule below to style links within the

navigation div. As you can see in the code,

[forf}

©STYLE THE HOVER STATEThe final rule provides feedback to thevisitor when they hover their mouse over alink, bringing back the default underline.

aihover {I t e x t - d e c o r a t i o n : u n d e r l i n e i I

It's sometimes a good idea to change thecolour of the links for the hover state as well,so t ha t v i s i t o r s know tha t a l i n k i s ac t i ve when

they hover their mouse over it. If you do this,however, do make sure that the new colourstill has plenty of contrast against the

background colour. O


'Tlois ChriS'fcKv. lS,'l:\r\CiVs Kiofc ush \o£A:-he^

S !<?> 'fc(>v.€.s 4;00

...just ask for a subscription to Practical Web Design!

That way, you'U get the latest issue every month in 2007, deliveredto you at honne. While the person who buys you the subscriptionwill save 40% on the usual price, getting it for just £46.72 - our bestsaving of the year!

So do yourself a favour - and thenn too - by handing over this ad andasking them to visit myfavouritemagazines.co.uk/christmas or call0870 837 4722 and use code 001X to claim this big saving.

And SAVE up to 40% plus an EXTRA 10% if you buy two or moresubscriptions - choose from over 80 titles online

CkisKvas IC' KJ(X.s a. swrprise S(AbsC/r(p iOfi ho PrOjoAicuxi VJeh-froK l»u wi-fe - she CjOiAd. lOot ku/e Ke Ou

Visit myfavouritemagazines.co.uk/christmasTo enter this special Christmas site and claim your savings, please enter code 001X

TUTORIAL; GOOGLE MAPS

D e t a i l sInte rmed ia te

Q K H O H HAny HTML editor; webbrowsers for testing

u m v u mM A P A P I s A N DE X A M P L E SThe home of GoogleMaps has fulldocumen ta t i on o fthe Google Maps APIs,plus examples.www.google.com/apis/m a p s

D I S C U S S I O N G R O U PGoogle's discussion groupabout its Maps API. If youhave a problem, someoneshould be able to help.groups.google.com/group/Google-MapS'A P I

M A P B L O G

Fancy some ideas fornew uses of GoogleMaps? This blog givesyou that and more,googlemapsapi.blogspot.com

Rob Buckleyis an editorand writerwho's been

working onthe websince before even

Netscape 1.0 came out.He's a regular contributorto MacFormat andComputer Arts.

%H H I I »Project files are in theTutorial Files folder.Full-size walkthroughpictures are in the TutorialImages folder

3 Rob Buckley - Freelance Journalist and Editor - Contact Me - Microsoft Internet ExplorerF i l e E d i t V i e w F a v o r i t e s To o l s H e l p

Q B a c k ' ^ S ^ « 0 - ^ a - aAddress http;//www,robbuck]ey.co.ukJcQntactwithttiap,php

Rob Buckley - Freelance Journalist and Editorservices | article gallery rates | blog media blog programs about me contact me

Writ ingIT writing

Media writing

Contract publishing

S u b b i n g ^N e w m e d i a

Proofing

Project management

R e c e n t a i t i c l e sThese are some of my latest articles;Practical Web Design: Flash games withB u n c h b a l l

Computer Arts: News pagesSC Magazine: UTM: A united frontS Magazine: Licensing the unlicensedLinuxUser S Developer: To boldly goIT Pro: Review; Web Analytics sen/icesPractical Web Design: Set up and promote apodcast in 35 minutes with PodServe

More a r t i c l es

C o n t a c t m e

Business enquiriesE m a i l :P h o n e :M o b i l e :F a x :

PR enquiriesE m a i l :

Tech supportE m a i l :

Add me to your addressbook

[email protected] (0)7050 056800 (not N Amenca)^-44 (0)7961 843224-I-44 (0)7092 086817

[email protected]

[email protected]

lellite 1 r Wrid t-

•Google Maps makes iteasy for you to includeAjax-based maps of almostanywhere you like

Master Google Mapsit may seem dauntingly sophisticated, but with just a bit of work Google Mapscan be part of your website, too. Rob Buckley gives you the directions

©henever you try to explainto someone what Ajax is, you

generally end up waving yourhands around and using jargon

words that aren't a great deal of help. It's awhole lot easier to just say: "It's anything thatworks like Google Maps."

Google Maps is one of those tools thatlooks like magic when you first come across it.It's so useful, so user-friendly, and so nnuch funto play with that you can't help wonderingwhy it hasn't been around for ages. It enablesyou to grab a map of almost anywhere in theworld, zoom in and out, and pan aroundsimply by dragging. There's aerial photographyimagery for most locations as well, onto whichyou can superimpose street names if you wantt h e b e s t o f b o t h w o r l d s .

Google has generously made it possible foryou to include maps based on Its system onyour own website. This is great for anyone

who's ever wanted to have a decent map totheir offices on their site, anyone who runs aclub, anyone who's having a party - in short,anyone who wants to let somebody knowwhere they are, and show them how to getthere. It's also a fantastic way of adding

interactivity to your site.All you need to incorporate Google Maps

into your site is a reasonable grasp of thebasics of JavaScript. If you don't have that, justfollow our tutorial closely and you should beable to pick up the basics fairly quickly. A little

experimentation will also help.In this tutorial, we're going to show you

h o w t o a d d a l l t h e f o u n d a t i o n c o d e t o a w e b

page so that you can embed a Google Mapin it. We'll explain how to work out the

coordinates of all the points you'll need onthe map, and then we'll show you how to addpoints to the map, add information windowsthat display HTML, and add controls that yourvisitors can use to move around the map,z o o m i n a n d o u t a n d s w i t c h b e t w e e n t h e

aerial photography and map views of an area.For advanced users, we'll also demonstratehow to draw lines linking points on the map,so that you can add directions.

Google Maps is feature-rich, and wecouldn't possibly cover all of it in a singlet u t o r i a l . T h e r e ' s a w h o l e w o r l d o f c u s t o m

icons, tabbed windows, polygons and otherfeatures for you to discover once you'vemastered the basics, and this is merely the

beginning of your journey.i n i t . We ' l l e x p l a i n h o w t o w o r k o u t t h e b e g i n n i n g o f y o u r j o u r n e y.

§§ It's great for anyone who's ever wanted to havea decent nnap to their offices on their site ff


Google Maps Tutorial

£I Th«r» i« no llmtt on lh« n«»mb«r of pagt vl«w« you may gwiarati pw day uting Hm Maps APt. HoM«v«r, H you expect men

man 500,000 paga vlm« par day, ptaasa contactua in athrance m <«« can prevlaion a(Mtiona( capacity lo handk your tmfflcO t t w n M f a y a w a * c a r v i c e m a y b e d e g r a d e d

> TiMra la a llmK of 90,000 gaocode rw|uasti per day par Hape API key. This transMas to rougNy ana gaocode raquast avaryl.n Mconde. If you go over Ma 24-haur Hmit the Maps API geocoder may itop ^working for you temporwlly If you conUnua toabuse Ute timA. your accaas to the Maps API geocoder may be blocked permanenUy.

» The Maps API does not tnctuda advartfstng. If wa ever decide to char^ Itilt poHcy. we will g»ve you at taasi 90 days notlca via

• Your aanrtca most be freefy acceMibt* to end users. To use Ooogta mapping technology In other types of appltcaiiona. please

» Vou may not allar or obscure the logos or aHribuUon on the n»ap.» Goof^ wiM upgrade Ihe API pedotfcaHy. wid you must update yow sita to use the new verakms of Ihe APt. T>w Maps team wM

noUty you of updates on lha Gooaa Waot API Bloa If vva make a norvbackwanis compatible chvtga. we wtH give you at laast amon^^ notk» to make the tranaltlon, durtrq which both versions of the APt will be avallabie.

> There are soma isas of the API M wa just don^ wan to see. For inatanca. we do not want to sea maps that identify the placestobuyiHegalAugsinaclty. or any simitar Illegal activity . We also warrt to r«spectpeoo)«'>Prtvacy. so the API shouki not be usedto Identify private tnformalwn about private IndMduats. Remember that w« reserve Ihe rii^ to suspend or tarminM your uae of thesaMce at any tkna. so feel fi«a lo contact us bafoie you do all Ihe Integration work If you ai« wwum of whether yourimplementation wil meet our Terms of Use.

Coogl« Maps API 0

Ttunk you for using th( Coegit M*ps API! ly using ih« CM«le i4*ps AM (rtw *$arvlV<Ki nrou*) xc^ tnd agrM to bound by th* fellMring terms end condittaiis (tt- T t m H o f U s * * ) .

1.1 Oiscrtpttofl 8< S«rvic*. 11* API tensistx of jwiscnpi dui iltonrs You to dispttyCoogtt map lmag«s en your webtitt. sub^ te the Itmiutions wkI c(w«tient dtscrtbtdbtlew. Th* API Is Mmked » Uewing Veu to dtspiay map images only. «n(t does rwtpriMHtt Vow with the iMatyte access A* <j ''

ce (sudi as kxal searcli or dtrectiens). w any

OSIGN UPYou'll need a Google Account and a Maps API key to use Google Maps - visitwww.google.com/apis/maps/signup.html to get both. The key will only work

for a specific URL, so you'll need a key for each site you plan to use Google Maps on.There are lots of terms and conditions, so read everything carefully before signing up.

< . M t n r a n e g ' T a s a t s ' — t 7<wta nartie="copiairight" content="2006 The Word is Not Enough" /><«eta nanie="publ isher" content="Rob Buckley" />

<aeta name="author" content="Rob Buckley" /><link href="/2col_left:Nav.css" type="text/ess" rel = "stylesheet" />< l i n k h r e f = " / f a v i c o n . i c o " r e t » " i c o n " / >< l i n k h r e f = " / f a v i c o n . i c o " r e l » " s h o r t c u t i c o n " / >

<!— Google Mops JavaScript begins —>

<sicript src»"http://maps.google.cofn/maps?f i le«api8iainp;w=2&key=f=IBQH=lflflflc1rPcK6xU«iz b F 3 O U q p E L 0 c m 7 G _ 8 R "

type=" tex t/j avascr f p t" ></s*:r ipt>< 9 c r i p t t y p e = " t e x t / j a v a s c r i p t " >

/ /< ! (CDfiTfl t

f u n c t i o n l o a d O <i f <GBrowser lsCompat ib le() ) { |

var map - new GKap2(document.getELementById("map")};map.setCenter(netu GLatLng(37.4419, -122.1419), 13>;

>

/ / n >< / s c r j p t >

< » — G o o g l e f l o p s J a v a S c r i p t e n d s — >

<tink title="rss'' href*" index .xml" type«"appl icatipn/rss-f-xml" rel="alternate" />

o CHECK FOR COMPATIBILITYCopy and paste the JavaScript from the example code into your document.This loads the Google Maps JavaScript library, and sets it up to work with your

key. The loadQ function uses the GBrowserlsCompatible command to check that yourvisitor's browser is compatible with Google Maps. You can add 'else {alternative code}'to this to cater for those without a supported browser

ignup'urUhttpi! }A>»2F'^2fi»ww .sdEGoogle Maps API

Thank you for signing up for a Google Maps API keyl

THs key Is good (or all IIRU in IWs directory:

r o t o k u o l i l e r . e a . w k /

He)« Is an example web page to get you Started on your My to mapping 0ary;

t y 9 e » * t « * t / j * v a s e n , p t " ' >/ / < i i e o A ' f A i

1 t e a a p l e < / t i t l « >

f * t a i e a i B « t ^ t d r a > » * )

OAPI KEY AND EXAMPLE CODEGoogle will give you an API key (keep it safe), and confirm which URLs you canuse it with. There will also be some example code to get you started - you'll be

able to copy and paste selected parts of this into your document. For Google Maps towork properly, code your pages as XHTML - strict if possible.

<scT'ipt src»"http://maps.google.com/mQps7fi le=api&v=2&amp:keu=fiBQIflHftflclrPcK6xUmCz b F 3 D U q p E L 0 c m 7 G _ 8 fl "

type=" tex t/j avascr i pt" ></scr'ipt>< s c r i p t t y p e = " t e x t / j a v a s c r i p t " >

//<![CDRTR[

f u n c t i o n l o a d O <if <GBrotuserlsCompatible< }) {

var map = new GI1ap2(document .getElementSy ld("ffiQp" ));map.setCenter(neui GLatLng<37.4419, -122.1419), 13);

>

/ / 1 ] >< / s c r i p t >

<!— Google Haps JavaScript ends —>

<ylieod>

< l i n k t i t l 6 = " r 3 s " h r e f = " i n d e x . x m I " t y p e » " a p p l i c a t [ o n / r s s + :<script src»"/mint2/?js" type="text/javascript"></script>

' a p p l i c a t l o n / r s s + x m l " r e l = " a l t e r n a t e " / >

<body onloada"load<)" onunload="GUnload<)">< d i w i d = ' " t n a s t h e a d " >

<h1 i ds"s i teMairie"><a tt tle="Return to the hotne page" href»" ini^x.php" ><i»g src*"/></a> Rob Buckley – Freelance Journalist and Editor</hl>

< d i v i d - " g l o b a l N a v " >

^nbsp; <q hpefa"/se(>vijces.php">services</Q> | <a href«"/arttcles.php">article

oADD THE SCRIPT TO YOUR WEB PAGENext add 'onload="load()" onunload="GUnloadO"' to the <body> tag ofyour document. This will run the JavaScript load() function that you've just

created as soon as the page loads. GUnloadO is a Google Maps command that emptiesthe map from a browser's memory, preventing memory leakage: it runs when the visitorleaves the page.

</diw>< / d i v >

/ >PR • r tqu i r iM<yh3>

< € l i v c l a s s > ' ' n o v b o x c o n t . b u s t r > f t s s ' ' >< d i v C l ( » s « " r M 3 v b o x l a f t _ t a ^ i r ) « s s ' ' >

<eM>EBO) i :<^></diw>

< d i v c l a s s * " n c t v b o x o u t o _ b u s i r » e s s " >< a

h r« f« "8 .« l09 ;» *97 ; t«105 ;« i *108 ; t *1 l6 ; i . *n i ;S ,«58 ; f c«112 ; l i a t i 4 ; ta64 ;8^116 ; ta i045 :laortj-i s-no t-*rtough .COB < ^>

<Al iw><Aliv><h3><hr />

T*ch s i jppor t<^3>< d i w c l a s s " " r w v b o x c o n t _ b u s i n « s s ' ' >

< d l w c l a s s * ' ' n a v b o x l « f t _ b w s i r K s s " >

< ^ i w >< d i v c l a s s * " n c i v t » o x a u t o J 3 u s t r > M S ' ' >

< ah r « f - " t a i 8 9 ; J , a Q 7 ; t * 1 0 S ; t * 1 0 8 ; t « 11 6 ; t « t t » ; t a 5 8 ; i « 1 t 5 ; « « l l 7 ; 4 » 11 2 ; « . * 11 2 : t « l l t•ord-1 s-not-«nough .com<M>

< ^ i v >

<p><o hraf-"n»ag«sAuiNe.vcf">ft( id</a> ma to your oddrassboot

< < — G o o g l e h > < a p » i i K i p s t a r t s t w e — ><d lv id»"aM3p- s ty l s - 'w id th ; 500px ; h« i9h l : 300px»><^ lv>< » — O o o f l l e H o p * » K J p a T M i s h « r e — >

< ^ i v >— U S x i

^ Rob BtKklsy - Freel«nce Journaflsi and Editor - Contact MedClwithm^p php

©PUT THE MAP ON THE PAGENow all you have to do is add a div with an idof 'map' to the page. Use the width and height

CSS styles to specify how big the map should be. You cancall the div whatever you want. However, you'll need tomodify the GMap2 command within the loadO functionto use this name instead of 'map'.

j> Rob Bucliley - Freelance Journalist and Editor' servtcm wtlde gantry rates Mog madia biog programs sftouima contact me

w m t n g

ITwrWftflM « d < a w r i t > t gContract pubNstitngSubtJ lng

N e w m e d i a

PrDoflngPrt^ mansgamantR M e n t a r t i c l e s

Thasa are soma of my lateeta i t t c l a e :

Practical Web Design: Ftaahgames wilh BuncttbaitComputer Arts: News pagesSC Magatine: l /TM: A t««ed« n » n »

3 Magwine: Liceneing the

B u s i n e s s * *

E m a t f .

P t K T M *44 <0)7090 056800 (not N America)*44 (0)7961 643224>44 (0)70»2 066617

UnuxUse r 4 Deve lope r Tob o h t y g o(T Pro: Ravimv Wat) Anatyttcas a r v w e s

Practtcal Web Design; Sat upand promote a podcast tn 3Sm i n u t e s P o d S a r v e

Make any markerdraggable by changingthe ini t ial declarat ion to'new GMarker (centre,{draggable: true});'. An xwil l fo l tow the marker;when you drop it, them a r k e r w i l l b o u n c e .

©CHECK IT'S WORKINGSince Google Maps is complicated stuff, it's a good idea to check that yourvanilla code is working. In particular, test the page with Internet Explorer for

Windows, since it's notorious for working badly with Google Maps. If you run intoproblems, try moving the JavaScript so that it's near the map code you added in step 5.


Tutorial Google Maps

^ Safari Flic Edit View History Bookmarks Window H«lp Stand Debug ♦ OR (Chir9«o m Wed 4:06 pm X Q

I h t t p / / w w * . $ t r « « m a p . » . u k / i w d f a J

PART TWO

P I N P O I N T

O WHERE AMI?Google Maps uses latitude and longitude to position items. While it has ageocoder for coming up with this information based on address data, it doesn't

worl< well outside the US, and is slow. Streetmap.co.uk can help. Enter the postcode,street name or whatever information you have into the search field, then click search.

©CONVERT THE LATITUDE AND LONGITUDEJust above the copyright notice, you'll find the latitude and longitude indegrees, minutes and seconds. However, you'll need the decimal versions for

Google Maps. Either use the Excel spreadsheet, Lat_long_calculator.xls, on this issue'sCD to convert them, or click the link that says Click Here to Convert/MeasureCoordinates. The spreadsheet is more useful if you already have values to convert.

O CLICK ON YOUR LOCATIONStreetmap will display a map of the specified area. The yellow arrow shouldbe pointing at roughly the right location: postcodes are only exact to 15

households, for instance. Zoom in, and click on the spot you want to relocate the arrowto. When the arrow's pointing at the exact location, scroll down and click Large Map.

d l ' C - d C o n v e r T ' n i m e - 3 7 4 7 f i i , l 6 « 8 6 9 4 t v M - C > S C l W

Streetmap

G f M C o B v e r t e M o u l t s

O S X 3 7 4 7 6 2

O S Y 1 6 4 8 6 9

N e a r e s t P o s t C o d e B A t 2 B W

Let (WGS84) N5J :22J6 (31J82303)Loeg (WGS»4) W2:21:5i ( -2.364038)

L R S T 7 4 7 6 4 8

m X - 2 6 3 1 6 3

m Y 6 6 3 5 7 9 2

M

Actual: FFPBPC05_00658F30S t r e e t : F F F B P C A 8 0 O 6 5 8 E O C

R o a d ; P F P C ( » 6 0 0 0 6 5 7 8 9 0

R o a d 6 4 : F F F C 1 8 0 0 _ 0 0 6 4 9 6 0 0R o a d l 2 8 : F F P C 1 8 0 0 0 0 6 3 9 C O O

1 C H t k b m l f » s e c l o c a t k M i }

C o o v e n i o i i T ^

O NOTE THE DECIMALSstreetmap will display your location in a variety of different formats. Thefourth and fifth lines will give you the latitude and longitude of your selected

l o c a t i o n i n b o t h t h e n o r m a l f o r m a t a n d t h e d e c i m a l f o r m a t n e e d e d . M a k e a n o t e o f a l lthe decimal places, because for once, you'll actually need them if you want to avoidbeing miles out - literally.

" ^Morei n f oG O O G L E M A P K I

Google Mapki (mapki.com) is a great resourcefor Google Maps users.There are guides tousing Google Maps forbeginners. For advancedusers, there are codel i b r a r i e s a n d o t h e r t o o l s .

F r « a t « < c a J o u r n a l i s t a n d E d i t o r b i d w h ; C o n t a c t tc o n t w > t « " t « i < t / V i t < i t ; A

e e n t w ^ t > ' n o t > • u c l i l a u , f r M t v i c a a d i t o r a n d j o u r n a l i

I )onrnQl»t,'f( la joMmaint" />, t « n f 2 « e 6 T h « U o r d I s M o t £ n e u t r < - / >

» u c k t « g ' / >

I t .

r f c r j p t ; b « Q i n c - -

*t>FJ0U4nEL»CiiT:-.s"t y p c ' t a v t , a v c M e r i p t - > < ^ c r i p t >

< a c r t p t t y p « - " t « x t / j a v Q * w i p t " >

f II •-op I toi»pi v-2tai»; k«y-fl901 flfWte 1 r^ortyUiC I

■( 9 . n t C a n t « - ( r > m G L a t L n g < 3 1 . 3 8 2 2 , - 2 . 3 0 4 4 ) ,

• J— Soog t * Hop j JovoSc r ip t < tnOs - -

< l i r * t i t t « » " r « « ' t y p « " ' a p p l i c a t i o n / r » » + . » r r « l " " a< a o - i p t t i j p « » " t « x t / j o v o « c r ) p f > < A w « » p t >

O CHANGE THE SAMPLE CODENow you can alter Google's sample code.GLatLng creates, but doesn't draw, a point;

setCenter(point, zoom) centres the map on a GLatLngpoint, using the zoom factor indicated. The closest youcan zoom in is about 20; 1 gives you a view of Europe.All you need do now is change the co-ords and zoom.

< h a a d >< t i t l « > R o b B u c k l a u & n d a s h ; F r M l a n c * J o u m a U s t a n d E d i t o r t n d a s h ; C o n t a c t n « < / t i t l « >< a e t a h t t p - e q u i v - ' ' C o n t e n t - Ty p « ' ' c o n t « n t - " t « x t A i t i i i t ; c h a r « t t - w t f - 8 " / >< M t a n c « » « » " d « * c r i p t i o n ' ' c o n t e n t » ' * R o b B u c k l t g , f r e * l c » r > c « • d i t o r a n d j o u r n o l K t . S p a c t o l i t i c s i n c l u d * t i< e e t o n o « w - " k e v w o r d s " c o n t e n t s ' s i ^ j b i n g , j o u r n a l i s t , « d t t o r , f r M l a n c * , f r M t a n c * j o u r n a l i s t , M d i a j c . r

b u c k l c g , I T j o u m o l i s t , t e l e v i s i o n j o u m o l i s t , f i I m J o u r n a l i s t " / >< « e t o n o f l ^ - ' Vo b o t s " c o n t « n t « " a l I " / >< a e t a n o M ' " c o p y r i g h t " c o n t e n t « " 2 0 0 6 T h « U o r d i s N o t E n o u g h " / >< a e t a n o * * - " p u b I i s h e r " c o n t « n t " " R o b B u c k l e y " / >

<aeta author" cont«nt«"Rob Buckley" />< l i r * h r e f ^ ^ / S c o l - l e f t N o v . c s s " t y p e * " t e x t / e s s " r e [ • " s t y l e s h e e t " / >< l i r * h r e f » " / f o v i c o n . i c o " r e l « " i c o n " / >< l i r * h r e f « " " / f o v i c o n . j c o " r e l » ' s h o r t c u t i c o n " / >

< !— Ooog lc f l aps JavoScr ip t beg ins —>

<scr ipt src-"ht tp; / /»Mps.90ogl«.co«»/«aps?f i le»api iamp;v-28,a(*p;key- f leQI«Fl fWclrPeK6>!U»Ci0s«TLa4i»sRR8T2P2i :z b F 3 0 U < » > E L a c « 7 0 _ 8 f l "

type" " tex t/j avoscn p t" ></aer i p t >< s c r i p t t y p e - " t e x t / j a v a s c r i p t ' ' >

f u n c t i o n l o o d < ) <i f ( G 8 r o w s « r l s C o « p a t i b l e < ) ) {

var MP " rww 0nap2<docunent.getEleii ientBy ld<"it ictp" >);• o p . s e t C e n t e r ( n e < . I X a t L n g < 5 1 . 3 8 2 2 , - 2 . 3 6 4 2 ) , 2 8 ) ;va r po in t « new GLatLng<91 .3822 , -2 .3642>; |

>

/ / I I > I< A ( r i p t >

<!— Goog le Hops JovoScr ip t ends —>

©CREATE POINT VARIABLESYou can also create JavaScript variables based on GLatLng points. Here we'recreating a variable called point, which will be on the exact centre of the map.

We could locate it elsewhere; equally, we could declare 'point' before the setCentercommand, and change that line to read 'map.SetCenter(point, 20);' to avoid duplication.


Google Maps Tutorial

< B e t a n a « e » " a u t h o r " c o n t e n t = " R o b B u c k l e y " / > ^< l i r f c h r e f = " / 2 c o l _ l e f t N a v. c s s " t y p e = " t * x t / c s s " r e l = " s t y l e s h e e t * ' / ><l ir#^ href»"/favicon. ico" rel = " icon" />< l ink h r6 fss " / fav icon . i co " reL="shor tcu t i con" />

< ! — O o o g l e f l a p s J a v a S c r i p t b e g i n s — >

<script src»"http: //maps .goog te .coin/mops?f i le=ap iSamp; v-2&atnp;key=fiBQ I flftftflclrPcKSxUmCz b F 3 O U q p £ L 0 c m 7 G _ 8 f l "

type=«" tex t /j avascr i p t" >< /script>< s c r i p t t y p e = " t e x t / j a v a s c r i p t " >

/ /< ! [CDf tTfl [

func t ion load(> <i f (GBrou iser l sCompat ib leO) {

vor map « new GI1ap2<docuirient .getElementBy ld("fnap" ))jmap.setCenter<neui GLatLng<51 .3822, -2.3642), 20);var point = new GLatLng<51.3822, -2.3642);map.oddOverloy(new GMarker<po i nt)); |

I/ / ] ] >< / i c fi p t >

< ! — G o o g l e M a p s J a v a S c r i p t e n d s — >

< l i n k t i t l e = " r s s " h r e f = " i n d e x . x m t " t y p e = " a p p l i c a t i o n / r s s + x m l " r e l = " a t t e r n a t e " / >s c r i p t s r c = " / » i n t 2 / ? j s " t y p e = " t e x t / j a v a s c r i p t * ' > < / s c r i p t >

OADD MAP ELEMENTSYou need to use the addOverlay function to nnake something appear on themap. This can create a variety of elements, including points, lines, movable

markers, shapes and so on. We want to create a marker pin to highlight our location.To do this, use the GMarkerQ command to create a marker item at our 'point'.

K U i m C W W f " H O P K U C R l S y " / >< l i r i k h r e f s ^ / a c o l - t e f t N a v. c s s " t y p e " " t e x t / e s s " r e l = " s t y l e s h e e t " / >< l i r i k h re f» " / fav icon . i co" re l = " i con" />< l i r k h r e f = " / f a v i c o n . i c o " r e l = " s h o r t c u t i c o n " / >

< 1 — G o o g l e M o p s J a v a S c r i p t b e g i n s — >

<script src="http://(itaps.google.com/roaps?f i le=api&v®2«ramp;key=ftBQIfiflflflc1rPcK6xUmCz b F 3 D U q p E L 0 c m 7 G _ 3 fl "

type=" tex t /j avascr ipt" X/scr i pt>< s c r i p t t y p e « " t e x t / j a v a s c r i p t " >

/ /< ! [CDfiTfl(

f u n c t i o n l o a d ( ) {i f <GBrowser lsCompat ib le ( ) ) {

var ffiap « new Gnap2(document.getElementByld("tnap" ));

map.addControI(new GSmaIlhapControI()) ;map.addContro t(new GttapTypeControI());

map.setCenter(new GLatLng<51.3822, -2.3642), 20);var point = neu» GLatLng(51 .3822, -2.3642);map .addOverlay(new GMarker(po i nt));map.openlnfoUindowHtml(point,"<strong>Pract icat Ueb Design HQ</strong><br />Vou can f

I

/ / ] ] >< / s c r i p t >

o A D D C O N T R O L SLastly, it would be nice for visitors to be able to change the zoom of the map.You can use the addControlO command to add controls. GSmallMapControlO

provides zoom and movement controls, so we'll use that first. There's alsoGMapTypeControl, which allows the user to switch between the standard map andaerial photography - or a hybrid of both - where available.

■■■ ' — u o o g i « n o p s J o v a i c r i p t t t g i n s — >

<SGript src«"http://map».googl«.co(»i/(»aps'>f i l«»api8iCimp;v"28rC»«p;key»ftBQ)Aftfll=lc1rPcK6xU«>CiO*iiiTLo4«sRR8T2P2lz b F 3 O L i p p E L 0 < » i 7 O _ 8 l = l "

typ«* " t«x t/j avascr i p t" >< /sd* •pt>< 9 c r i p t t y p « * " t « x t / j a v c i s c r t p t ' ' >

/ /< ! tCD«Tf l |

function loe>d( > <i f ( O B r o w s « r l E C o M p a t i b l * < ) } <

war map - rt«w Ot1ap2{docurftent.getE leiMrttBg I dCmap" ));(«op.s« tCent* r {ne« i GLatLng<51.3822, -2 .3642) , 20) ;var point - r>*w GLatLng<S1 .3822, -2.3642);n iQp.addOver lag<neui OMark*r {po lnt ) ) ;iFiap.op*nlnfoWirt<kMiHtnl<point ,"<»trong>Prcict icot W«rb Ckisign HQ</strong><br />Vou can

>>

/ / 1 ] >< / 9 c r i p t >

<!— Googl* Maps JavaScr ip t «nds —>

( h«re l "D;

< ^ e o d >

< l i n k

< 9 c r i p t s r c " " , 't s " h re f * " i r t d^x . x f t l " t ype»"Qpp l t ca t i cp r i / r ss+x i t t t " r e l - ^o l t ^ rno t®" />i»int2/?js" typ®"" t«xt/j avascr ipt"></Krlpt>

<body on load* " l oad ( } " onun load«"OUn load<) ">< d i v ( d = " i ? i a s t h « o d " >

<h1 i d ^ ' s i t eJ i a i i i « "><a t l t l c ' ^Bc tu rn t o t h * ho»* pag* " h re f ' " i ndex .php ">< iag s r c * " m tagcs / l ogo .g i f o/><Ai> Rob Bucklag Sindash; FrMlonca Journalist and Editor<Atl>

<dJv l cN"g loba lNov ">«inbsp;<a hr*f»"/s«rvlc«s.php">s«rvlc«;</o> | <a href*"/articl«s.pf»">orticl« gall«rv</ii> | <«

' ■ ' ' • • • • • •

h r • f « ' ' / b l o g / p • r s o n o l / " > b l o g < ^ > | < a h r « f « '• "A log/ rc^ / "> i»edia b log</a> 1 <o hr«f> [ .p l^">progra*s</a> | <a hr

OADD MARKER INFORMATIONIt would also be good to add some information to the marker, so that peopleknow what it is. You can create an info window at any point, whether it has

a marker or not, using the openlnfoWindowHtml command. You need to give it botha point, and some HTML to include in the window.

o Rob Buckley - Freelance Journalist and Editor' services artjcle gallery rates Wog meoiaoiog programs atjoutme contact me

w i t i r > gIT wrlbng

Media wrmr^

Contract putt ishtng

SubtKngN e w m e d i a

ProoOng

Prc^ect management

a T l < d « «

Thi** art soma of my IDitt artlcl*«P>4ctk*l W«b DMign: Fl««h gwnts wrth

B u f t c h b « l l

CoRipiflct Anv N*wt p»g»«SC. Magatint; UTM. A unitsd froMS M«q<zln«: bc tn tm) Ih* untemfdLIhuxUmi t Otvt leptr To botdly goI T P r s : W e d A fi a l y t i c $Piaclical W«b Dftsign; Set up «r)d promote ■

podcatt n X nvnutat with PodSwvaM o r e a i t t c l e e

Buc inew enq t i l i i e *

P h O M

U o t M t e

Add nte to your addraaebook

tnfc^he-*fflr(i-ia-not-et»ough com•04 $))7QS0 056800 (n« N Amanca)•»44 (0)7961 843224

U P L O A D A N D T E S TOnce you've done any amount of Google Maps work, it's always a good ideato upload your map and test it on your server, since there are so many ways in

which you can mess things up. In particular, it's easy to start adding so many featuresthat they won't all fit on. Here, everything looks good, and our visitors will now be ableto find our offices easily. O

O Make the connect ion Add direction lines to your Google map

h t i » l P U B L I C • - / ^ 3 C / A l T I I • a r m . 1 . 0 T r ^ s . t l

• • ' ' K t t c : / y W v. « 3 . e r g / t 9 9 9 / > i ^ t i » l ' ' x a l n c v ^ - u

b e u e k ( « u t n d c n h ; F r ^ l o n e a J e u m o l l f t a n d E d i t o r t n d a s h ; C e n t o e t n * < / t i t l « .p - « q u « v " " C o < ^ t e o t - T i j p « * c o n t « n t " ' ' t « x t A i t » i ; c ! h c r » « t « u t f - e ' ' / >

t Emx igh- />

' t t v l c a h M f / >

■ t o n l o u r r t a t i s t , f i l «< — t t t n a w f ' r o t o o t f e o n t « n t « " a l I • / >< a a 4 a n a a a ' - c o p v i a h f c o n t * n t < ' ' 2 e e 6 U o r d i s r<■■4 0 c o n t « r > t » ' R o b B u c k l e y " / >

< n t a n t w ' q u t h o r " c a n t a n t ^ ' R c i t ) d u c k t a u * / >< l « i * r i r « f " ' ' / 2 c o l _ l « f t f t e v . c » « ' ' r « l< l i i * l » N i f " - / f o y i c o B . l c o " r a l " ' i e o n " A< l » t A h r ^ f - ' / f o v i c o n . i e o " ' r ^ l - ' e h o r t e u t i c o n - / >

' " O o o f l U M o e « P o l y l ( n « s t y l c r h M t » t a r t s

I o r t u r l ( a d c f o u l > ;

l * ^ i t < M p ; v « H o « p ; k * v ' n e Q I W m c 1 rt y p ^ - t « t t / j o v j t t c r i p f X A i j - l p t )

<aD->pt

O EXTRAS FOR IEYo u ' l l n e e d t o a d d s o m e e x t r a V M L s t u f f f o rInternet Explorer Change the <html> tag and

add in the extra style sheet as shown. You'll find both inthe VML.txt file on your CD.

<i" £>oogl« nop* Polgl in« ( ty l*

< a e r l p t t y p a ^ ' h i x t / j M s c r i p t " >

f I l * ^ i t < w f ) ; v 2 t < » p i ) < * U < ' A e Q t A W I c

tC«ntw<nMi OtatLng(9 l .3822, -2 .3M2) , 28) ;Int • rmm OLatLng(St .3822, -2.3»42)i

lb Dwigrt Ha<At>-«ng><tr />Veu e

m p o l y l i r w t h v i a d d i

©CREATE THE LINESThe GPolyline([points], colour, width)command creates a line between GLatLong

points in the order they appear in the brackets. Here,"# f fOOOO" is the l ine 's RGB co lour and 10 i s the w id th .

pi@th6-wOfd-i8-not-enough c(

Add m« to your addr»<»book

©ADD LINES TO THE MAPUse the addOverlay function to add thepolyline to the map. To make the points

appear, as well as the line, use addOverlay and GMarkeron each point as well.

Practical webdesign ;; November 2006 55J

TUTORIAL: DREAMWEAVER

D e t a i l sBeginner

B SDreamweaver 8

D E V E L O P R A P I D

PROTOTYPES FORT E S T I N GWant to make sure yourdesign will work for userswithout spending a lot oftime building a fullyfledged website? Thenbuild a testing prototype.w w w . w e b a s 5 i s t . c o m /professional/communi ty /webproresource/rapidslte/rapid_prototypes.asp

T R O U B L E S H O O T

FTP PROBLEMS

Connecting to your webserver with Dreamweaverdoesn't always work, buthelp is at hand.w w w . a d o b e . c o m /c f u s i o n /

knowledgebase/index.cfm?id=tn_14834

A N I N T R O D U C T I O N

T O W E B D A V

While FTP is the mostcommon way to connectto a web server, manyuniversities use WebDAV -a method that's alsosupported byDreamweaverw w w . o i t . u m d . e d u /W e b C l i n i c s / W e b D AV.pd f

DaveMcFarlandhas over11 years'experiencedesigningand developing websites.He's the author ofDreamweaver 8: TheMissing Manual and CSS;The ivlissing Manual.

^ I IHI I —Project files are in theTutorial Files folder, andfull-size shots of eachtutorial step are in theTutorial Images folder.A 30-day Dreamweavertrial is in the DevelopmentTools section of theEssentials folder.

® Macromed ia Dreamweaver 8

F H e E d i t M e w S i t e

Show; ^ Rernote Site Tutorial | C §E ^ ^ ^ O | H |R e m o t e S i t e

B 1 pwd00340-1^ archivesS iij) finishedS 1^ imagesS I Q s t y l e s

4 fijrm.htmlaOv'global.css® " index.htnilfit si^uip.html

Folder

FoWerFoWer

Folder

Folder5KB HTWL File

1KB HTML FileIKB Cascadin..

5KB HTML File

4<B KTMLFHe

| g —L>-)

L o c a l H i e s

Bf Site-RemoteSiteTu...B & pwd0034

El ^ archivesSI ^ finished13 ^ imagesQ... ¥ sourcejmages

i JH bgjage...I m cf.png

kjgo.psdS! ^ styles

ivfglobal.cssa b o u t h t m l

~ 4 fbrm.htnli index, html(i signiip.htmlW oontent .doc

Size! Type I ModifiedFolder

FolderFolder

Folder

FolderFolder

34<B Firework,.

52KB Firework..139KB PSDFte

Folder

1KB Cascadin,.

5KB HTWL File1KB HTML FHe

5KB HTML File■WB HTML File

19KB WCTOSoft..

8/23/2006 10:22 AM8/23/2006 10:31AM8/23/2006 9:58 AM8/23/2006 9:58 AM8/23/2006 10:28 AM8/23/2006 9:58 AM

. 6/30/2006 5:30 PM

. 6/30/2006 5:18 PM8/22/2006 10;00 AM8/23/2006 10:28 AM

. 7/3/2006 5:03 PM8/23/2006 10:18 AM7/2/2006 3:22 PM8/23/2006 9:54 AM8/2/2006 3:04 PM

. 8/22/2006 10:11AM

AManage all of your site'sfiles - those on your webserver and those on yourlocal computer - withinD r e a m w e a v e rManage website files

w i t h D r e a m w e a v e rUse Dreamweaver's powerful file management tools to keep your web serverup to date and your files in order. Dave McFarland shows you how

©hile you're slaving away creatingyour next great website, it's easyto forget that you eventuallyneed to share your creation with

the world by moving your flies to a web server.One of Dreamweaver's most powerful featuresis its built-in FTP tools. FTP, or File Transfer

Protocol, Is the most common method oftransferring files to a web server

When you use Dreamweaver's FTP tools,there are two versions of your site: the localsite - that is, the files sitting on your computerthat you work directly on - and the remotesite, or the live version of your site that peoplec a n v i s i t . D r e a m w e a v e r c a n m o v e a fi l e f r o m

your computer to your web server, and it candownload a file that's on your web server to

your computer But it can do a lot more too.Unlike most FTP applications, Dreamweaver

knows exactly where to place a file on yourweb server The remote site is a mirror imageof your local site, so when you use the Files

panel to transfer a file that's located in, forexample, an Employees folder that's locatedinside an About folder, Dreamweaver places

the file in the correct folder on the server And,if the required folders don't already exist onthe web server, Dreamweaver creates them.

But that's just the beginning. The programalso enables you to exclude, or 'cloak' somefiles - such as large Photoshop or Flash (.fla)files - from file transfers so they don't fill upyour web server In addition, Dreamweaver'sSynchronize feature ensures the web serverhas the latest versions of all your files. And iftwo files get out of sync, the File Comparisontool pinpoints the lines of code that differbetween the two files. This is a great aid when

you've made major changes to your homepage that don't work out as planned; you cancompare your working copy with the liveversion on the server, and selectively merge

any lost work from the remote file while stillmaintaining the changes that should bepreserved. Finally, the program's Check In/Out

feature is a big help for a group of peopleworking on the same site.

Before you start, you'll need to collect alittle information about your web server:• The name of the FTP server for your website:this is often the same as your domain name• The path to the document root folder:

Dreamweaver calls this the Host Directory. Itmight be something short like htdocs/or public_html/, or completely blank if the FTPserver dumps you directly into the root; or it

might be something long and confusing like/usr/home/users/youraccount/htdocs/• A user name and password

You can get all this information from your

host ing firm.If you don't yet have a web server, you

can still follow this tutorial by setting upa simulated remote site on your computer,as described in step 3,

€§ Unlike most FTP apps, Dreamweaver knowsexactly where to place a file on your server


Dreamweaver file management Tutorialc

Si te Defin i t ion fo r Remote S i te Tutor ia l S i te Defin i t ion fo r Remote S i te Tu to r ia l

Basic 1 Advanced Category Loca l In fo

R e m o t e I n f o

I Testing Server'doaldng{Design Notes[ate Map Layout! File View Colunv«C o n t r l x j t e

Jjempiates

a t e n o n e : R e m o t e a t e Tu t o r i a l

Local root folder: cf ariandV)esktopV)reamweaver Tutoriai\ Q

0 tefresh local f^e list automaticaily

Def^t images fold©-:

PA RT O N ELinks relative to: 0 Document O Site root

HTTP address: http://

This address is used for site rdative links,and for the LHc Checker to detect HTTPlinks that refier to yoi^ ovvn »te

Case-sensitive links: n case-sensitive link checking

Basic j Advar>ced

CategoryLocal Infb

R e m o t e I n f e

Testing ServerOoakingDesign Notesate Map LayoutFile View ColumnsC o n t r i b u t eTemplates

A c c e s s : F T P aFTP host: www.example,com

Host directory: htdocs/

Log t [ tegin

Password: I ••••'1 Test I0Save

n Use passive HP□ Use firew^□ Use Secure FTP (SFTP)

[ ServerCompatMty..7]

FirewaA Settings...

O DEFINE A NEW SITECopy the Dreamweaver tutorial folder from the CD to your hard drive. Renameit 'pwd0034'. In Dreamweaver, choose Site > New Site. Click the Advanced tab,

type Remote Site Tutorial under Site Name. Click Local Root Folder's icon and select thepwd0034 folder. If you have a web server, go to step 2; otherwise skip to step 3.

O SET UP A WEB SERVERSelect the Remote Info category, and choose FTP from the Access menu. Typeyour FTP host, host directory, login and password. Tick the Use Secure FTP box

if your web server supports SFTP Click the Test button. Dreamweaver should say theconnection was made successfully - click the OK button and skip to step 4.

S i t e D e fi n i t i o n f o r R e m o t e S i t e Tu t o r i a l

Basic i Advanced |-

CategoryL o c a l I n f o

R e m o t e I n f o

Testing ServerCloakingDesign NotesSite Map LayoutF i l e V i e w C o l u m n sC o n t r i b u t e

Templates

Access: [ Local/Network 33R e m o t e f o l d e r ^

(3 Refresh remote file tist automatically

0 Maintain synchronization informationQ Automatically upload files to server on save

Check in/out: Q Enable file check in and check out

▼ Flies

Files Assets j Snippets

^ Remote Site Tutc vc

1^ /var/www/sawmai Testing ser\Map view

©SET UP A LOCAL TESTING AREAIf you don't have a web server, you can still see how Dreamweaver's RemoteSite tools work by setting up a local testing area. Select the Remote Info

category, and choose Local/Network from the Access menu. Click the folder icon to theright of the remote folder field. Navigate to your desktop, create a new folder namedDreamweaver Testing, select the folder and click OK to finish defining the site.

O CONNECT TO THE REMOTE SITEOn the Files panel, click the Connect to Remote Site button. Dreamweaver willlet you know that it's connecting to the server, and the green light on the

Connect to Remote Site button will light up when you're connected. Select RemoteView from the Files panel's view drop-down to see the files on your web server.

Remote Site Tutr [j Local view(ST c 0 ^ ^ mB Site - Remot ite Tutorial (C: V)ocl

pwd0034l ± ) ^ a r c h i v e s

fi n i s h e d

B 1 ^ ImagesB ^ sourcejmages

stylesa i gk)bal.css1 a b o u t . h t m l

r ^ f b r m . h t m i

i ndex .h tm l

©PUT A FILE ON THE SERVERSelect Local View from the File panel's viewdrop-down. Expand the pwd0034 folder to see

all the tutorial files inside. Select the about.html file; dickthe Put Files button in the Files panel. If the PutDependent Files window appears, click Yes. This transfersnot only the about.html tile but also any external filesused by the page.

Practical webdesign

Files Assets I Snippets

^ Remote Site Tutc v Remote v ie ' V

X c a□ /var/www/sawmac.com/htdocs/pw(

pwd00340 1^ imagesB " s t y l e s

about .h tm l

©CHECKTHETRANSFERRED FILESelect Remote View from the Files panel's view drop-down. In addition to anyother files on your server, you'll see a new folder named Dreamweaver, the

about.html file, and (if you also placed dependent files) images and styles foldersc o n t a i n i n g o t h e r f i l e s . ®

Tutorial Dreamweaverfile management

Site Defini t ion for Remote Si te Tutor ia l

Basic i Advanced |

Category Cloaking

Design Notes.Site Map LayoutFte View Columns

I Contribute

PART TWO

Options: 0 Enable doaking

Ctoaking lets you exdude spedfied fbkJersf%es from d site operations.

0 p o * fifes encing vMlh:

.psd .fla .doc

Roll Back PageCompare with RernoteSynchronize...

CloakingTurn off Read OnlyL o c a t e i n R e m o t e S i t e

Set as Home Page

P r e v i e w i n B r o w s e r ▶

C h e c k L i n k s ▶

U n d o a k

Undoak All

Enable CloakingSettings...

Add to Favorites

O CLOAK BY FILE TYPEIf you want to exclude certain files (Photoshop files used in your design, say)from Dreamweaver's FTP tools, choose Site > Manage Sites, then select Rennote

Site Tutorial and click Edit. Select the Cloal<ing category, tick the Enable Cloaking andCloak Files Ending With checkboxes, then type '.psd .fla .doc'. Click OK, then Done.

O CLOAK BY DIRECTORYSelect Local View from the Files panel's view drop-down. Note that the filecontent.doc has a red line through it, indicating that it's cloaked. You can also

cloak all files within a specific directory to keep a folder's worth of files off the server. Inthe Files panel, right-click the sourcejmages folder and choose Cloaking > Cloak.

b W Site - Remote Site Tutorial (C:V)odB 1^ pwd0034

13 arch ives

@ 1^ fin ished

I D imagesg 1^ source_»Tiages

13 1^ styles' i^obal.css

i i a b o u t . h t m li i Tuf III.html

I n d e x . h t m l

£ signup.htnil0 c o n t e n t . d o c

; Welcome to besiflirnsrLorem psufn dolor sit ainet consectetuer adipisdno etk, sed diam nonummy nibh

I eunmod tinodunt ut taore«t dolor« magna alguam srat vokitpat U( wm vwn adI m n m v e r a a m , q u u n o s t r u d e x « r a t a b o . L o r e m d o t o r s i t a m e t . c o f f s e c t ^ u c r; a<bpisano eit. s«d diant nonummy nibh euismod tnddunt ut iaoreet do4ore magnar a t q u a m e r a t v o M p a t . U t w t s t e n a n a d m v m v e n i a m , q u i s n o s t r u d e x e r c t t a t w .

: Lorem ipsum dotor sit amet. consectetuer adpiscing elit. sed d: euismod tncidunt ut taoreet dotore magna akquam erat volutpat Ut wisi enm ad2 mnm veraain, qus nostrud exera tado. Lorem dotor sit ameC, consectetuer= adipisc^ elit. sed diam nonummy nibh euismod tinodunt ut Iaoreet dotore magna~ aiiquam erat voMpat. Ut wisi emm ad mnm veniam, gun nostrud exerd tabo.

i D o l o C

: L o r « n i p s t « n d o t o r s i t a m e t , o g elit, sed diam nonummy r«bh

f » ♦ I 3S » t e - R s i e t e 9 t e Tu t a n d ( C : i P o a

PMI0034

Id mMwe*

O PUT THE SITE ONTO THE WEB SERVERIn the Files panel, click the top folder (it should say Site - Remote Site Tutorial).Click the Put button to transfer the files to the web server Click OK when

Dreamweaver asks if you wish to transfer the entire site to the server. WhenDreamweaver is done, choose Remote View from the Files panel's view drop-down.Notice that the cloaked folder and the cloaked file were not transferred.

OEDIT A LOCAL FILEChoose Local View from the Files panel's view drop-down, and double-click theindex.html file to open it. Change the page title and headline fronn 'Welcome

to the Design List' to 'Welcome to Design List'. Save the file, close it and choose Site >Synchronize Sitewide. Choose Entire Site from the Synchronize menu and Put NewerF i l e s t o R e m o t e f r o m t h e D i r e c t i o n m e n u . C l i c k P r e v i e w.

rQuick tipVIEW LOCAL ANDREMOTE SIDE BY SIDEYou view all the files on

your computer and thefiles on your web serverside by side in the Filespanel. Click the ExpandV i e w b u t t o n - i t ' s t h e

far-right icon on theFiles panel. Click thes a m e b u t t o n t o r e t u r n

to the normal single-listFiles panel.

9 Synchronize

Ftes: 1 wW be updated

□ show all files

To change an action, select a file and dkk one of the icons below I

^ 1 ^ 1 t l o l o ! m \

©SYNCHRONISE FILESAfter Dreamweaver has finished comparing thelocal and remote files, the Synchronize window

appears, showing all the files that are new on yourcomputer - index.html should appear, and Put appears inthe Action column. Click OK, and Dreamweaver movest h e fi l e t o t h e w e b s e r v e r

tRanoteSiteTutt lfucalviCTi <1

H dS & archivesS & f M e dS ^ inagesl±) 8A sourcc.inagesI S s t y l e s

n h b t l . a s

He*)

C 1 H + X

C l r ( «

C t r l * ' .

Gro(4) RIes wthO o s e F l e s

S e l e c t A i C t o i M

; Select Chedwd OutS e l e c t N e w e r L o c a i

Rename panel groi4>... Select Newer RemoteMaxmoe pand groupC l o s e p a n d g r o u p I n v e r t S e i e c t e n

f t a b o u t . h t n <A f o m . h t n iat ndex.hM

sgn4>.htjnl||Q content doc

Loca te <n Locd S r t e

L o c a t e i n R e f n o t e S i t e

S Connected to R te Site T[um„. ]

Select Recently Modified

0 RIes Created or Modified n the Last:

| l jPaysO Nes Created or Modrfied Between:

©MOVE UPDATED FILES TO THE SERVER QUICKLYClick the Context menu in the top-right corner of the Files panel, and chooseEdit > Select Recently Modified. In the dialogue box, tick the first radio button

and type '1' in the Days box. Click OK. Dreamweaver selects any files modified in thelast day. You can move these to the server by clicking the Put button in the Files panel.

58 November 2006 Practical welidesign

6 S 9 0 0 3 J a q u J S A O N uBfsspqsM le^jpejd

( --MI5J6HJTW )jaAMS uo S9|y 6uiA0tti 9J0j»q xKuoJd rsuoiido 9M>fi

6utiind ajojaq »|y »Aes Q suoudo injUodK^Majij

J O » p t ( ® Aj « a s n i « i s

0£ sCofVfp uf uopsc )3>tas ^ :suoi)do js^suvj) ai 4s p u o D a s 0 9 ' V * o » u i i ) a j j

>|pi S9)nUIM Q£ U9UU03SKI :uoi)3»uuo3 diiUf ](MM3/)nd uo iduiojd

ifio )|3»ip/i»6 uo Kiuiojd g sm )U9pu»d»o

S T I «« "" S»HJ Itioi : :M0^5 SAtMIV

) U » U m 3 0 a M » N

» p o M i r > o A ns j » A n

s ) U M m | 3 » f q f s t A U t

Ou imS imC iHS ) U O i

SJOIIP3 / s»dAi >|! iI a j v d u i o 3 » | u

s»»A»SSS3a iscd /AdoD <

; 6uituMa)| »po3 ;s j u i H i p O D t

I j e u u o i » p o 3^ i J O | O D 3 p o 3

A t i i i q i s s a ^ a vr * i » u » o '

A j o 6 » ) « 3

s a 3 u » j » j a j d

( j '6o|eip $a3U3jajaid p Aio69)V3 siis 9t|} ui asudjaâjd siq) 96ucq3 u«3 noA

u<«5« »6essauj s|q) »ui Moqs ),uoq Q

is» | y ) uapu9ddp »o

° N

( " A )

(s)puo»s 92 ut sstuisip ||MA - satid juspuadaQ

- M o p u j / w s a i u a j a ^ a j d

3 i ( ) A joBaie} a i is a i j ) u io j^s j n i e a ^ S ! m j n o i A e q a q a m | O J ) U O D

ue? noA ('ajn)ea^ uoijesmojiiDuAsaîs s,uiej6ojd am )jed s; sj ifi)

j a A j a s q a M a q t u o u o j S j a A a m u e m

ja/wau s^j am luapuadap e speo|dn

A|uo 8 jaAeaMiueajQ 'A|a)eun]joj'ja/uas qa/w jnoA uo aBed qam paêpdn

ue a3e|d o) paau noA auiji qêa

uiam peo|dn-aj o} aiuj) jo a^seAA e s,t!'ja/uas am o) paAOui uaaq aAei| sanj

leujaixa am aûo '||e ja;^v 'aiuesmu

e a q s a u i j i a u i o s p | n o } a j n j e a ^ s m i

8 jaAeaMuieajQ o) joud 'jaAa/woH-sa|!^ paimbaj ||e peo|dn pue a)»0| o)

>|}ad pue lunq oi 6u!AEq moj^ noA saajf)| SE 'ajntea^ |n^d|aq A||eaj e Sj siqi

uo OS puB sam SSD leujaixa 'saBeui;

JI9 'ajAOui qseij e - A|pajjo} a6BdqaM e Aejdsjp oi papaau a|j( |euja)xa

Aue SI am luapuadap v 'uojiejadoam u| saiif luapuadap apnpu; o) qsjM

noA jamaqM s>|Sb A||euiJOu i! 'jaAjas

qaM E 'ujoj^ a|;^ e aAauâj jo 'o) uo ajjê ind o} jaAeaMuieajQ asn noA uai4/v\

noA jo^ ino ij ajn6!^ jaAeaMUjeajQ lan

S3|i| luapuadspp u e i s j a p u n O

o•jajndLuoD jnoA uo an^ ajoujaj am ô Ados e s3>|buj puB 'uj6j6ojd ucsuedujo^

a||j 0L|i. sije;s jaABSMUJBSJa -nuaui am uiojj aioujay mi/w ajeduio^ paps pue a|!^ |UJ}q•jnoqB aqj >jD!|D-m6u '|auBd sa|!J aq; u| an^ am asop puE aAES '.SMaN isaiE"],

01 JBqapjs pueq-iqBu am uj yn;s luaDay aBuEq^ luiin ^noqe a|i^ am uadQa n i d V a i v Q d n

3}0lU3y miM 3JBdUJ0335e<j >peg joy

•Ae TO papsHD AMjqs} n o > p 3 q D o p u n

u i ^ p a q Di n d

} n o > p 3 i o

? 3 9ssiijan!|g3on ^

! i

\ <] i

p a p s

1!P3

LfliMuadou9do

J3p|0=l«,aN

a y i w a N

SD-|eqo|6

■sa3uajaj.ajd asop o; xo >|3!|D uoneDnddE am Bujpaias uEq; jaqiEj .îp/vtyujq/jsn/, L|jEd a|]j. am Uj adA; p|noL|S sjasn 3E|/\i .'(axa a6ja|/\|U!/\/\\a6jai/\jU!/v\\sa|!d LUEj6ojd\;3)ujBj6ojd aBjaiAlujM am aiB30| 'SMopujM u| -uounq asMOjg am >|3!|D 'AjoeaiBD ajBduio^

a{|j am >|D||3 '(3E|/\i dL{; uo S33u0jaâjd < jaAEa/wmEajQ) saDuajaj.ajd < ;!P3asooL|3 'Sj |ooi uosuBdujOD am aqi ajaqM jaABaMuiBajQ ||ai oj paau noA 'pofj

l l 3 A V 3 M I A i V 3 H a d fl 1 3 S o

jd noA uo uiEjBojd am ||B}su] pue s>|U]| pE0|UM0p aq; j.o auo >|D!p (a6Bd qaM jaq;ouEuo) uaqi '>|U!| axa dnias frZT-aBjaiAIuiM pB0|UM0a am 13M3 uoipas speo|UMoa

am u! ){U!| aBja|/\|U|/\/v am >|3[p pue 'Bjo-a6jauiujM-MAAM o; og 'a6ja|A|U!/\/\SI uoi}do aaj^ auo SMopuj/w joj s|00i. uosueduJOD anj. Aueuj ajE ajaqi

S M o a N i M - a a v M i d O S N o s m v d w o D 3 i i d n v i S N i 0M u n o

6M) a£j9iuuim 0I ip<eas«^<>°0l

S J E U U O J a i u p r a i o v w P U B X W n S O Q s a i P u e H •Sug^GimEi i ixe iu temiwjo i ipea iq ixau •

53(1} 1X31 JO 6u6j3iu puE 6uouaj3i)ip lensiyv •

s d j n i e a j

s u o i s j a A

u33Mt3q s3euE<p eu|6j3ui uaifl pUB SUOKjaA f)3(0jduasMjaq paBueip sen IE14* 6u|uij3)3p joj injasn A|1|6imSI I suijojieid zeuiM JOi |oo) SuiSjeui puB Eupusjsjtip

3|y JX3) (BfisiA aojnos uado ue S| 36j3nu|M

u 0 ! ) e | u 3 i u i 3 0 a »

uiony OfZ-l oo

S p e O f U M O Q «

a i o p p i n u i S o D 5 j ♦AK))S!H aou«io ♦

S)(x|su3aJ3S •Imiew •

FzsBiaHuiM

i u _» 5 » M | i ^ 0 g j ^ zsM -uofteuuQfui Q sateuq .suucy -SSD -sappco I5

^ « O i m " " © O ^d | a M S f o e l a | j M i i | o c S c Q w a M a g

xo/ajij eilizow aSjawuiM

■yed Sim U! 9 d3is oi d!>(s 'looi u0S!JEduJ03 3|!j 3m ||e;su! o; j3i6uBj/\/\lxai vib^s Japio^suoiiE3!|ddv JnoA oj anj. j3|6uEj/\/\POi Bbjp puB 'bBeuji >|sip 3m uado LUEjBojd aqj

pE0|UM0p puB |Uj}qs-pBO|UMop/j3|6uEjMix3)/spnpajd/uio3-s3uoqajeq-AAAAM o;09 ddE ja|6uEj/v\POi 9^1 m-!'« |00j uosuBduioD a|!^ b pu|^ ue3 sjasn de|/\|

D V I / V - B d V M l d O S N O S m V d I A i O D d 1 l d 1 1 V 1 S N I O

I P p w • ) | | » 6 u ) a « | d | p o . n r t } * } :

i p P M ' » ( ! • 6 u ( a » < i l ! p oi p p M 6 u | 3 « | d ! p e • m r n w ^ .i p P M • » n » e u o » t < i ! P O

« | S j o i o p ■

< , » n 4 S , w > ! A | p >

< ( V > S d . i » i * < d >< ) M B 4 | S J O l O p m d | O T J O - K < t >

) ( S ^ l o p m d t ■» J O T < d ><? lV '>»u r i ( » | aM ! i p i » ! r>3<3n>

• ^ M D ; { S j o i o p « k s d | ■• J e - | < d >) i s ^ l o p w a d ! ■ • j e r K d >

p f W » » 0 M < 3 M >

t | S v J O ) O p « W J | M J O - K d )« ) S j o i e p M d ! B f t j e r K d )) | s J O ) « p * « a d | « J c r K d >

u B l s a a ^ m n o o i a t K m >< . U | 0 » . . P ) A ( P >

<A |P /><I<V>

o > < n >■> » > * < o > < n >

< M >

< / . e t f i . ' M ^ p i a . e u d - o t o i / s a 6 M t . » 9 « > s 6 « l >< . , i « * « » q . - p i A ! p >

• P f A | p >

< f t po®

< / , « * 9 / ) x a ) . > « d r 4 » > • • * ! * i M >< « n i V > » * n • * » c n

. • d A x - 4 U » ) U 0 3 . > A ! n b * - d ) 4 M 0 ) ( « >< p o . M >

2 UM. e'l -uiHX Quv/oav/-' onatu wv 3<iu.30Qi>j

/ ? 2 / 8 0 ; | » « S > * * 1

tutm xaput ^<H»H o ♦

' ) M D ) | s J o i o p w i K l l a u i n c d }<CH/> "«< l WJCTKCVO

A | P >

< * l p / >< c t / > { d « j u K d >

< ) M B 4 | S J o i e p w m d i ■• J ( n < d >

• » n « 6 U | 3 S ) d | p e 4 ! 4

P M ' » H » e w | 3 « ( d | p e . a n ) « ) 3 aP M < » n » f l M O i ( d | p CP M ' t n * A u i M i d i p e J

D ^ !S JOiop «nsd)D ) | S J O ) o p « r a d | a k J O K d )

' J • k j ( i - K d >< 1 1 V > » » n ^ 0 4 •

< i «y>

< n / > < e . / > * * * i 8 < . m K - d n i « ! » . . i » J M 0 > < ( i >0 > < 1 1 >

. 0 1 S . > < O P I * , 6 u d ' 0 6 0 l / «

< p o ^ >/ , S S 3 / ) X « 4 , « K 1 A ) * « l l >

< * u i V > » * n • » «. • d n i - ) u « ) u o 3 . M M r b » - d ) ) u D 4 M >

t w ' m '

0 0 0i# MOpUtM Stooi

o O O UM 3 j e » S M » t A > X » 1 I t p 3 m #

o

leuo^ni iu3uu96eueuu 9|y jaAeaMuueejQ

Tutorial Dreamweaver file management

BWinMerge - {Filf Comparison)F f c 6 4 t V i e w I

o O f U -

rgc Too l s Pk jg i r a WMbw He lp

A T« C;V..«

J Z M ^ 1 _tcri»t\_ce«ipOTT«wpWêtrtBrgv.htiil ^•V.,vidi»fartandy>eatetnpiir«

( d i y l d - " a a l a " >

c l i l > A b o u t t & « 0 e J i 9 » l i s t < / b l >c p > L o r e i c i p s u n d o l o r a l e a n t; p > L o r e » i p s u i t d o l o r a l t a a e t , c o n s e c t e t u e x( h 2 > 0 u x H u B b l e fi e g l n n l o g s < / b 2 >

; p > L o r e o i p s u a d o l o r « l t u m: p > L o r e B i p s u B d o l o r e i t m m. l L 2 > G o i s a 5 t 7 0 D 9 F o r € W e e k s f t n d C o u n t i s g < / ': p > L o r e i t i p j u B d o l o r a l t a i mr p - ^ L o r e s i p s u s d o l o r s i t « t M: p > t r ^ b s F ; < / P >: / d l v >

; d l v i d - " s c u t r " >

c < m >

) e c t « t u e r

< d i v l d - » B « i n " >

: f a l > l b o u t t h e O e s i g o L l a: p > L o r e B I p s u n d o l o r a l t « n e t , c o: p > L o r e D I p s u n d o l o r a i t a v t , c or b 2 > 0 u r H u i ^ l e B e g i n n l s g a < / U >

: p > L o r a o I p s u n d o l o r s i t: p > L o r e i i I p s u o d o l o z s i t• c h 2 > G o i n g S t r o n g F o r 6 W e e k a a n d C o o a t l n g < /

: p > L o r e 9 I p a u s d o l o z s i t: p > l o r e n i p a i n c d o l o r s i t

< p » £ n b a p ; < / p >< / d i T >

l » » s t u f f " >

: b 3 > L o r c c T p s u o < / h 3 >

: p > L a r c B i p s u i t d o l o r s i t «: h 3 > D o l o t S i t A a e t < / b 3 >: p > L o r e s i p s u s d o l o r a i t <

< t a 3 > T i n c l d u n t < / l i 3 >

i p a u B d o l o r s i t a< f c 3 > L Q r « i p I p a u B < / b 3 >

: p > L o r e a i p a u s d o l o r s i t a. h 3 > L o r e s I p a u B < / l » 3 >

< p > L o r e i c i p a u s d o l o r s i t t; p > 4 r ; 5 p ; < / p >

< b 3 > I . o r e 9 I p s u s < / f c 3 >

r p > L o r « n i p s u n d o l o r a l t i< t 3 > D o a o t S i t * a e t < / h 3 >

: p > L o r e i i I p s u n d o l o r a l t <: l » 3 > T l n c l d u n t < / h a >

r p > L o r e D i p s u o d o l o r a i t i: h 3 > L o r e B t p s u s < / h 3 >

< p > L o r e n i p a u s d o l o r a l t i< h 3 > i . o r w t I p a t u r < / l t 3 >

: p M « r e » I p a u M d o l o z s i t i< p > C i ! b 9 p ; < / p >

c o n s e c t e t u e r

c o n s e c t e t o e r

V 34 Cal: ];22 Ot: 1/22 nt 3^ Cdt 1/22 Ch: 1/22

t L 3 > R e c e o t s t u f f < h 2 >

Fk Edt Mevr b«ert Modfy Text Onmandt Ste WMow Help•Tutoria(\pw(f0034\aboot,html (XHTML))

; euismod bnckiunt ut laoreet dotore magna aftQuam erat vokApat. Ut wi«j enim ad; mintm ventam, guis nostrud exerd tabo. Lorem psum dolor sit amet, consectetueri adiptscing eiit »ed diam nonummy nibh eiismod tinddunt ut laoreet dok>re mafma

uam erat votutpat. Ut wist enon ad minm veniam, quis no^rud exero tabo.

; Lorefn psum doior at amet, consectetuer adpisdng etit, sed diain nonwnmy: euismod bnddunt ut taoreet dolcre magna aliouam erat voKât. Ut vrist eram adz minim veniam, qiis nostrud exero tabo. Lorem ipsum dotor sit amec, consecteb>er: adip«sdr>g e4it, sed diam nonummy nibh eutsmod bnddunt ut taoreet dotore magnaE a<iquam erat voKjtpat. Ut wisi erum ad minim ventam, quis nostrud exerd tabo.

£ Our Humble BeginningsB Lorem ipsum dotor sit amet, consectetuer adiptsdng eM, sed d»am nornimmy nibh- f

©COMPARE THE FILESWinMerge starts (or TextWrangler if you're on a iVIac) and opens the local fileand the copy of the remote file. The lines of code that differ ('Latest News' and

'Recent stuff') are highlighted. You can copy differences between the files: for example,eliminate a change in the local file by copying a line of code from the remote file.

Si te Defini t ion for Remote Si te Tutor ia l

Remote Info

O USE THE DOCUMENT TOOLBARReturn to Dreamweaver, and open about.html. Click the File Managementmenu in the Document toolbar and choose Get. Dreamweaver warns you that

you'll overwrite your local file. You can also compare files from this window by clickingthe Compare button. Click Cancel, and use the File Management menu to Put the file.

A c c e s s ; F T P aFTP host; www.example.com

Host directory: htdocs/

lôgin: login l e s t

Password: [ • • • • • • • • • [ZlSave

□ Use passive FTPn fi r e w a fl

n Use Secure FTP (SFTP)

[ Server Conpatibilit .Tl

[Firev att Settings... I

0 a r c h i v e s

0 "^ finishedEl ^ imagesig-.gjJ sourcejmagesli ^ styles

^ global, ess85 about.html^ f b r m . h t m l^ i n d e x . h t m l£ signup.html

o S E T U P D R E A M W E A V E RChoose Site > Manage Sites, then select Remote Site Tutorial and click the Editbutton. Click the Remote Info category. Tick the Enable File Check In and Check

Out box. Type your name in the Check Out Name field, and your email address in theEmail address field. Click OK to close the Site Definition window, and Done to close theManage Sites window.

o C H E C K O U T A F I L ETwo new buttons in the Files panel are now active - the Check Out and CheckIn buttons. Select the about.html file, and click the Check Out button. The file

is downloaded from the web server, and a green tick mark indicates that you have thefile checked out. Check out the file index.html as well. Now there are two files withgreen tick marks.

M o r ei n f oC H E C K I N / C H E C K O U TFor in-depth informationo n D r e a m v i ^ e a v e r ' s C h e c k

In/Check Out system seethe following techn o t e s ; v v w w . a d o b e . c o m /

c f u s i o n / k n o w l e d g e b a s e /index.c fm?id=tn^15336;w w w . a d o b e . c o m /

cfusion/knowledgebase/lndex.cfm?id=tn_15447;a n d w w w . a d o b e . c o m /

cfusion/knowledgebase/index.cfm?id=tn_15445.

S fi n i s h e dEl- ^ images

source jmagesE - s t y l e s

^ global, rssSi about.html

f b r m . h t m l

plHHI i n d e x . h t m l

signup.html^ content.doc

©CHECK INSelect the index.html file, and click the Check Inbutton. The file is copied to the web server, and

a padlock appears next to the file icon. This indicatesthat the file is checked in. At this point, anyone elseusing Dreamweaver and the Check In/Out system wouldb e a b l e t o c h e c k o u t t h e i n d e x . h t m l fi l e .

B "5 pwd0034E| -Q archivesE] "£2> finished

images0 s t y l e s

about .h tml

• efbrm.html

global. CSSi n d e x . h t m l

4 ^

OTEST IT OUTTo see Check In/Out in action, define a new site with a different local rootfolder (part 1, step 1), but with the same Remote Site information from step 2.

Enable Check In/Out, but use a different name and email address. Connect to theRemote Site and view the files. You'll see a red tick next to the about.html file. O


l ynda.com

Online Training Library™Great for v isua l learners

Video-based tutorials that providesoftware training on productsfrom Adobe, Apple, Macromedia,M i c r o s o f t a n d m o r e .

New tutorials published every moUnlimited access to over 14,000 tuton hundreds of subjects.

No long term commitment

Subscriptions start at just $25 a mo

Try It for FREE today!www.lynda.com/freepass/PracticalWebDesign/1106

TUTORIAL: FLASH

D e t a i l s

Flash 8 and Flash Develop

P R O X Y E V E N T S

Learn nnore about how touse the Delegate objectwith Flash.w w w , a d o b e . c o m /d e v n e t / fl a s h / a r t i c l e s /eventproxy.html

S INGLETON PATTERNA great article dedicatedto creating the Singletonpattern with FlashActionScript.www.playfool .com/blog/?p=256

F L A S H D E V E L O P

Download and learn moreabout the ActionScripteditor that has been usedto create the classes forthis tutorial.www.flashclevelop.org

Kris Hadlockis the authorof Ajax forW e b

ApplicationDevelopersand the founder of StudioSedition. Find out moreabout Kris at www.k r i shad lock .com.

■ Extend the MovieClip withActionScript 2 in Flash Part 2Develop your use of object programming with Kris Hadlock's guide tousing the advanced features of Flash's scripting language

Ohis tutorial is part two of aseries t ha t f ocuses on OOP

(object-oriented progrannming)with ActionScript, and how it

relates to the GUI (Graphical User Interface).Part one, in the last issue, was an introductionto OOP, and showed you how to create an

image gallery controlled by a Gallery object.The Gallery object extended the MovieClipobject, and connected to a nnovie clip in thelibrary, which is called gallery. This is the movieclip that contains all the interface elements ofthe gallery, such as arrows that enable you toscroll through the photos, and a mask to show

only one photo at a time.In this session, we're going to go a bit

further and separate some of the functionalityinto distinct objects, which will make a cleaner,more scalable and maintainable design forthe code. The objects we're going to add arecalled ImageManager and Image. The Image

object will extend the movie clip as the Gallery

object does - it will differ in the fact that itwill be the class that all of our image movie

clips use as a blueprint. The ImageManageris an object that extends the array, and willcontrol all of our Image objects by storingthem, and providing us with extendedfunctionality on top of the array.

The concepts explained in this tutorialare common practices with object-oriented

programming of ActionScript. They'readvanced topics, but created in a simplemanner. My goal is to teach you these topicsusing basic examples, so that you can beginto apply them to your own projects. We'll also

go beyond these objects by learning how tocreate an object-oriented pattern called the

Singleton with the ImageManager. We'll then

show you how to use the Delegate object,which is a Flash utility object that enables

you to delegate events, such as onRelease oronRollOver, to another custom method thatyou can define in the scope of the class thatyou're working in.

It may seem a lot to pack into one tutorial,but we'll just be skimming the surface of theOOP world, while learning some advanced

concepts along the way The level of detailin each of the steps will enable you to gain a

complete understanding of how to integratethe code with the GUI, and use it in your own

projects. This series of tutorials will prepareyou for a lot of situations that will arise as youbegin to use ActionScript 2, so let's get startedby seeing how all this functionality is created.

iiThese concepts are common practices withobject-oriented programming of ActionScript


Flash scripting Tutorialo

r ^PARTONE C R E A T E

T H E. M O V I E J

a

O PREVIOUSLY...This tutorial is a continuation of our introduction to creating an object-oriented image gallery with ActionScript, which appeared in the last issue.

In this second part, we'll show you how to create separate objects for our images andimage management, to create a flexible application.

OSOME BACKGROUND INFORMATIONLast issue we showed you how to create an object-oriented photo gallery witha single class named Gallery. This class is already included in the sample, and it

contains three methods that produce the core functionality of the gallery - these arecalled displaylmages, onRight and onLeft.

a > i t . •■? . u

1 ^

E X I S T I N G M E T H O D SThe methods that already exist in the sample provide the core functionality ofour gallery. The constructor sets up the variables, and calls the displaylmages

method, which takes an array of file names and creates the gallery. The onRight andonLeft methods are used by the arrows in the interface to scroll through the images.

o O V E R V I E W O F T H E N E W O B J E C T SThe two objects we're adding to this project are an Image and ImageManagerobject. The Image object extends the movie clip so that we can create custom

methods and properties specific to images. The ImageManager is an extension of thearray - it manages all of the images by only storing Image objects in itself.

a a a i ^

©IMPORT THE IMAGE CLASSThe first new line of code in our Gallery class isan import statement for the image object. This

import statement enables us to use the Image object inour Gallery class by instantiating it, and accessing itsmethods and properties.

OTHE LIBRARY SYMBOLLast issue we created an image movie clip in the library that was attached atruntime. This image movie clip is simply added to the library, and not to the

stage, because it will all be handled by making itself an Image object. ®

Quick tiT H E S U P E R

S TAT E M E N TThe super statement i;u s e d t o r e f e r t o t h e

parent object - in othiwords, the superclass.


Tutorial Flash scripting

©CLASS LINKAGEGo to the library, right-click this movie clip and choose Linkage. In the AS 2.0Class input field, type the fully qualified path to your Image object. This makes

he image a movie clip and Image object when it's attached to the gallery: each time anmage movie clip is added, it has the methods and properties defined in the Image class.

« - » a 0 i # * #

p u b l i c f w c t l o a

p o b l i c f u D c t l o a l o « d ( r i l « *

0 EXTEND THE MOVIE CLIPIn the class declaration for the Image object, add the extends keyword andtype MovieClip. This means that the Image class will automatically inherit all

he methods and properties from the MovieClip object, such as _name, _x, _y,oadMovie, and so on.

O CREATE THE IMAGE OBJECTSave a new ActionScript file named Image.as. Then you need to declare theImage class with the correct path of the package; in this case, we create a

'krishadlock' package inside the com directory. If you were to add another directory youwould simply add it to the path name of the classes you create within it.

©CREATE A LOAD METHODThe only method we create in the Image object besides the constructor isa method called load. This takes a parameter called fileName in the form of

a string, and loads it with the loadMovie method of the movie clip. When we load theimage, we need to add it to the ImageManager, but we'll talk more about this later

^Quick tipVDD PROPERTIESr O T H E I M A G E

l u s t o m c l a s s e s t h a t

jxtend intrinsic objects>nable you to add your) w n m e t h o d s a n d

jroperties.

©USE THE IMAGE OBJECTIn the Gallery class we're already importing theImage object, so we can begin to use it in our

code. We use it in the displaylmages method to type ourattached movie clips as Image objects. This means thatwe add a colon and the word Image, rather than typingit as a MovieClip.

O CAST AN OBJECT TYPECasting an object means that we take an object of one kind and cast it toanother role. In this case, we cast a MovieClip as an Image object. If we

don't do this, we'll receive a compiler error in Flash, because it will say that there'sa mismatched type.

>4 November 2006 Practical webdesign

Flash scripting Tutorial

^ 1 ^

• • M U u r r i - w . "♦ • i w , - W . J P T .

i H i i U i I . ^ c i > )

Q . i S ^ ' W a 9 e ^ t 9 ^ 0 t ^ m z i o %

P A R T T H R E E

I M A G EM A N A G E R

o L O A D I M A G E S B Y N A M E C R E A T E A N I M A G E M A N A G E Rwhen attaching Image objects, we can use their methods. In this case, we only Next, we want to create an ImageManager class. All we neeci to do is add ahave one method, called load, which we created earlier. We pass the current file named ImageManager.as to the com.krishadlock package. Once the file

image's file name to this method, and the Image object handles the rest. Adding objects has been created, we need to declare the class by typing the full path to the object asseparates your code into logical pieces and keeps specific functions in the right places.

» 3 B

it's contained in the package.

©EXTEND THE ARRAYThe Image and the Gallery classes extended the MovieClip object, so we'renow going to extend the Array object with this class. The purpose of doing this

is to add custom methods and properties that an array does not intrinsically contain,while still utilising the fundamental methods and properties it does have.

©A PRIVATE CONSTRUCTORThe constructor for this object is private, so we can't create an instance of theobject. This is because the object follows the Singleton pattern, so there is only

one instance of the object in the entire application. This is useful because we will alwaysreceive the same information each time we call any methods or properties in this object. ®

O Solve problemsw i t h e v e n t sPrevent your images getting out of sync with the code by using an event

L O C K T H E N A V I G A T I O NIn order to fix this issue, which iscaused by clicking the arrows tooquickly, we'll add a lock property to theGallery class that we'll check each timea n a r r o w i s s e l e c t e d .

T H E O N M O T I O N S T O P P E D E V E N TWe'll use the onMotionStopped eventof the Tween object to determine whento unlock the navigation.

s e . . . r , a ■o a a

K t w r U M

U S E T H E D E L E G A T EWe need to use Flash's Delegate object to trigger an unlock method. This delegatesthe event to the unlock method, which we'll define as the second parameter.


Tutorial Flash scripting

O . J . ^ . ^ C « . t O ^ « « r • M = 1 U ^« - V - t . M . ^ 1

m» o « «

o S T A T I C M E T H O D S A N D V A R I A B L E Sstatic methods and properties are those in which you call that method orproperty by simply typing the name of the object, followed by a dot and the

method or property's name. This enables us to access them without creating an instanceof the object.

o G E T T H E I N S T A N C EOur constructor Is private, so we need a way to access the object instance. Wecan do this by creating a static method named instance. This will first check to

see if an instance of the object has been created. If not, it will create one and return it.If one exists, the method will return the same object each time this method is called.

G ACCESS A SINGLETONIn order to access a Singleton object - in this case our ImageManager - wesimply make sure that the class is being imported, and then we type the name

of the object, followed by a dot, the static instance method, and the name of the publicmethod or property that we're trying to access.

OADD IMAGESThe add method of the ImageManager is a prime example of why we'reextending the array. We could have used a simple array in the Gallery class, as

we did in the first part of this series, but by extending it we're able to check the type ofthe item that's being added to the array. This means that only Image objects can beadded to the ImageManager, and no other data type.

M o r ei n f oT h e r e ' s m o r e t o c o m e

i n t h i s s e r i e s o f t u t o r i a l s

on using ActionScriptto extend movie clips.Part three, next issue,w i l l i n t r o d u c e m o r e G U I -

r e l a t e d f e a t u r e s t h a t w i l l

be integrated with code.

©THE IMAGEMANAGER ASA N A R R A YAnother example of how the extension of the

array is used with the ImageManager is in the Galleryobjert's onRight method. In this method, we're callingthe length of the ImageManager in order to determinewhether or not we're at the end of the gallery.

©PUBLISH THE GALLERYWe need to ensure that we're compiling the correct classes with our movie, sowe select File > Publish Settings, choose the Flash tab and clicl< the Settings

button next to the ActionScript version. In this dialogue, we click the target button andbrowse to the class package we're using. In this case, we browse to the com directory. O


1&1 WEB HOSTING,SIMPLY THE BEST

1&1 - for beginnersand professionals

Easily buildyour websiteC o m m u n i c a t ewith your visitors

Increase vis i torsto your website

N E W !

yikmt tnp wi be to Ireland to 4scom the «ct-c«vei. uiMKb. andlot tbe W«t«rford couthne

b the top of the page to thcck o« Uiest p« $l

FREE1 & 1 T R A F F I C B O O S T E R

worth up to £400with Shared Hosting,

eShop and Serverpackages

1&1, innovative products at the most competitive prices

1 & 1 H O M E P A C K A G E 1&1 BUSINESS PACKAGE ■ 1&1 PROFESSIONAL PACKAGE

1&1Total price per month + VAT

^ O R E I N C L U S I V E F E AT U R E S T H A N A N Y O T H E R H O S T

FHE BEST VALUE, THE BlWhy 1&1 can give you suchantastic offers and great value."

&1's goal is to be first to marl<et withinovative products at the most competitiverices - without compromising strength andjliability. 1&1 started as pioneers and haveever stopped working this way.

&1 is proud to be the world's biggest webost, and the fastest growing. 1&1 is able3 provide industry-leading hosting becausete are financially stable, profitable andedicated to innovating, bringing the futuref web hosting to the market today. It is allhese characterist ics combined that al lowss to pass on great value to customersfirough our packages and our offers.

&1 will always strive to be the leaders inie field of web hosting making sure that/e look after customers along the way.

mdreas Gauger:hairman of the Board

T H E W O R L D ' S N 0 . 1Provided by Netcraft .c m, ft>e comparisonof active websites by hostkig provider taken inOctober 2005 proves our status a» ttie No. 1Web Host ing Company

More for your website1&1 knows that the best websites start with the best tools

available. That's why we've taken the time to develop a widerange of powerful features and enhancements that will helpyou create an effective presence on the web.

Easily accessible through the 1&1 Control Panel, all 1&1 site-building tools have been created by our dedicated team of in-house programmers to give you the best possible functionalityat your fingertips.

It's just one of the reasons why l&l's value-priced hostingpackages have earned the praise of industry experts and theloyalty of millions of customers.

U l I n t W T W t F * s « > o s t 8

J l * n n f r . n e t

&1 is the worlds largest Web Host with morelan 2.5 million active websites.

can 0870 2411 247

INCLUIWEBSITE Wa

The 1&1 Control Panelis the simple way tomanage your domainnames, e-mail addressesand websites. We mix

sophisticated functionswith an easy-to-useinterface to give youthe ul t imate in control .

F E AT U R E SC O N T R O L P A N E L

Websites 4 Appitcatioos \

Web Space & Access |

C O N T R O L P A N E L

" ACCOUNT

1 & 1 T R A F F I C B O O S T E R

worth up to £400with all Shared Hosting,

eShop and Serverpackages

1 8 . 1 W e b H o s t i n a

I DomainE - M a i lW e b M a i l

I Websites & Applications1&1 Traffic Booster

1&1 Sponsored Searcli1&1 Banner Advertising1&1 Seardi Engine OptimisationGoogle SitemapsProduct Related SearchFacilities for eShopsMarketing ManualSite CheclterG i f an ima to rHello Engines and Ranking ToolE-Mail marketing Tool

I Web Space & AccessPackage Information

I Software & DownloadsM o r e F e a t u r e s

1&1 Traffic BoosterEntice more visitors to your website, increase trade and improvecommunication with l&l Traffic Booster!

1&1 Search Marketing Poweredby Yahoo! Search Marketing

Powered by Yahoo! 1&1 Search Marketing uses keywords to advertise your website to up to 80% ofInternet Users

Banner Advertisingwith AdUNK

Create a zero-cost online marketing programmewith AdUNK Community incorporating the all-newGif Animator

Search Engine Optimisewith 1&1

Take advantage of a 90-day free period tooptimise your website for all ttie best 5ear<Engines

- Enhance your page listi^7' with Google Sitemaps

Get your web pages insync with Google ustheir crawlers to index your online projects

Increase visitors to your websitewi th 1&1 Tra ffic Boos te rThe new 1&1 Traffic Booster helps you increase visitors tcyour website easily. See pages 6&7 for more details.

l & lo r v i s i t u s n o w w w w . 1 a n d 1 . c o . u k I

l O R E I N C L U S I V E F E AT U R E S T H A N A N Y O T H E R H O S T

EASILY BUILD YOUR WEI

1 & 1 W E B S I T E B U I L D E R

Build your own websitequickly and simplyNew 1&1 WebsiteBuilder, included with all Shared

Hosting packages, lets you create professionallooking websites with the minimum of effort. Pointand click prompts and a built in text editor enable

your site to be online in as little as 20 minutes.For added personalisation, choose from a rangeof templates with award-winning design, edit fontsand mix colours. The Page Publishing tool allowsa preview of your pages before going online.

1 & 1 S O F T W A R E S U I T E

Receive £400 worth ofSoftware for Free

Receive £400 worth of professional softwarewith all Shared Hosting packages. This gives youall you need to create, publish, promote andoptimise a successful website. PhotoImpact USEand NetObjects Fusion 8 allow sharpening of yourgraphical content. Wise FTP facilitates your publishwhile Hello Engines! and Ranking Toolbox enableyour site to be seen by millions via prioritisationin top search engines. Plus new Gif Animator tocreate your own banner ads.

0 8 7 0 2 4 11 2 4 7

includedWEBSITEfeatures

; iTE

INCLUDED included1 & 1 D Y N A M I C S I T E C R E AT O R

Build your own animatedwebsi te in minutes

Flash animation takes your site from the

ordinary into the extraordinary. With animatedgraphics, interactive menus, brilliant colourand vibrant sound, flash applications takeyour site to a whole new level, 1&1 is proudto offer this easy way to create flash animation.DynamicSiteCreator gives you the power toastonish your visitors with visual effects thatadd movement, intrigue and excitement.

1 & 1 D Y N A M I C C O N T E N T

Enrich your site with fresh contentand real time news

With easy integration and an automaticupdated plug in news category option,

your site will alwaysI WeatherI U K N e w s

I FootballI Top StoriesI CricketI E n t e r t a i n m e n tI Business NewsI In ternat ional NewsI TechnologyI Lifestyle

be up to date andmaintenance free.

Add valuable

content from a largerange of topics, atno ex t ra cos t .

o r v i s i t u s n o w w w w . 1 a n c l 1 . c o . u k1&1

O R E I N C L U S I V E F E AT U R E S T H A N A N Y O T H E R H O S T

NCREASE VISITORS TO ^

e key to generating trafficlumes on websites is a broadternet presence, access andailability, especially from wellown online mediums. Theseaces include visibility on populararch engine and directories, andtractive banner advertising one most common websites.

huge variety of online marketingportunities are now availableincrease the number of visitors

your website. Choosing fromese methods is often confusing,erwhelming and can result inasted money.

1 can now provide customersith all the tools and facilities

eeded to build sales and success

irough an increased flow inebsite traffic.

1&1 Search MarketingPowered by Yahoo! SearchMarketingBid on key words to ensure good rankingswithin top search engines including:Yahoo!, Orange, MSN and many more.Receive an initial credit of £50 and set

up your own account limit to control yourbudgeting. Simply write the keywords,titles and descriptions that you want tobe displayed in the search engine listingsand your listing will be reviewed andpublished across the network. The Yahoo!Search Marketing network reaches morethan 80% of UK internet users*.

*Nielsen/Netratings Mar 2006

Banner Advertisingwi th AdL INK

Attract more visitors advertise yourbusiness and products by using AdLink.Create your own banner adverts whichwill be displayed on well known websitessuch as Autotrader.co.uk and ASOS.com.

Banners can be targeted by location orcategory. To assist you with your bannerdesign you will receive the Gif Animatortool which provides you with templatesfor you to create a professional lookingbanner. Get up to 10,000 page impressionsfree when you order a hosting package.

0 8 7 0 2 4 1 1 2 4 7

)UR WEBSITE

Enhance your page listingwith Google Sitemaps

Search Engine Optimisationwith 1&1

Product related SearchFacilities for eShops

Create Sitemaps for your website via your1&1 Control Panel. Through Sitemaps,websites are announced for investigationto Google, customers need not wait untilthe Google crawler indexes their pages,Customers can also indicate which pagesor documents they want to be crawledand which not to. Simply choose thedomain name you wish to present forindexing and get it registered. As a resultyour web pages are completely indexedby Google and could therefore receivemore traffic.

Achieve higher positions within searchengine rankings with l&l's free SimpleSubmission tool or try l&l's Simple SEOtool free for 90 days. Simple Submissionautomatically submits 2 URLs to majorsearch engines such as Google, Yahooand MSN. Receive results via e-mail to

see how well it is performing. SimpleSEOprovides submission for 10 URLs andincludes features such as meta taggenerator, competitor analysis and realtime tracking.

Transfer all your eShop products to 2 topsearch engines - Froogle and Pangora.Each of these search engines allows

buyers to find your products in seconds.The buyer will be able to view productprices, descriptions, comparisons and userratings. An automatic interface from the1&1 Control Panel permits adjustmentsso you can easily remove or add productswith the click of a button.

o r v i s i t u s n o w w w w . 1 a n d 1 . c o . u k1&1

/lORE INCLUSIVE FEATURES THAN ANY OTHER HOST

C O M M U N I C AT E W I T H

0 I N 2 S I T E L I V E D I A L O G U E

Chat with your visitors - live andin real time

Communicate with your visitors live and in realtime while they are using your website, Receivean optical or acoustic notification as someone visits

your website and interact with them there andthen. The quick and easy communication offersyou a number of functions and communicationchoices; and is ideal for sales, support andconsulting professionals.

inc luded

0 1 & 1 F O R M B U I L D E R

Create feedback forms quicklyand easilyGenerate leads and gain valuable feedbackwith template-driven contact forms, brochurerequests, online polls, event registrations andmore. Adapt the templates to fit your site orbe creative and easily build your own forms.The information that your visitors enter issaved in a special Internet database, so youcan view the results at any time.

0 8 7 0 2 4 11 2 4 7

JR VISITORS

n e w s l e t t e rLet the 1 &1 Newsletter Tool help you build and maintain a relationship with your visitorsvia e-mail newaletters. An ideal way to keep your customers up-to-date about yournewest products, exciting finds and upcoming events, e-mail newsletters keep themcoming back for morel

H o w d o e s t i w o r k ?To access the Newsletter Tool, simply login to your Control Panel and you're just stepsaway from communicating with your website visitors more easily than ever before. Andsince the 1 &1 Newsletter Tool is browser-based and launches right from your ControlPanel, there's no soltware to install.

When you're ready to build an e-mail nep^letter, editing tools and built-in designtemplates let you create professional looking e-mails quickly and with no programmingknowledge. Then check your completed nevt^letter in test mode and click send!

We even include tools to build your own mailing listi Simply incorporate a template-drivensubscription form on your site so interested visitors can quickly request to receive your e-mail newsletters. Once the fomi is submitted, the data is automatically entered into a

E - M A I L M A R K E T I N G T O O L

Maintain relationships withyour visitorsCommunicate offers, announcements and invitations

quicl<ly, easily and cost effectively with the E-Marketingtool. Templates mean that creation is straightforwardand simple procedures make dispatch hassle-free.Previously sent newsletters are stored for amendingand recycling later. Analysis can be obtained throughthe tracking tools and adaptable mailing lists.

■ v i l u a t l e n ; t i l d « n i * i n > .

l>*nM: from Apf 20M to Apri it. 20M ■ C Q

INCLUDED1 & 1 W E B S TAT I S T I C S

Analyse the performance ofyour websiteUnderstand your visitor dynamics with 1&1Webstatistics. Track visits, hits, most popularpages, referring websites, error pages and identifytrends to monitor exactly how your website isperforming. Display the information in the formatyou choose - pie charts, bar graphs or simplenumeric output. See if your website is performingto your expectations.


BUILD YOUR PERSONALiA/ITH EASE&1's comprehensive Shared Hosting packages give youiverything you need to create a professional websiteepresenting exceptional value for money, l&l's packages includes everything you need to create an attractiveiternet presence for your family or hobbies in just 5 easy steps. All packages include website building tools,loto gallery, e-mail accounts, web space, and account virus scanning, No HTML or programming knowledgequired.

1&1 FEATURE SPOTLIGHT

0

0

1 & 1 We b s i t e B u i l d e rCreate attractive, functional websites

1&1 WebsiteBuilder is included with all Shared Hosting packages. Thisaward winning tool is intuitive and very easy to use. Design, launch and

continually update your site in as little as 20 minutes. Add a flash intro,forums, feedback forms and mapping features. No complicated or difficultto learn programming skills needed.

1&1 Photo GalleryShowcase your pictures online

Upload your favourite digital or scanned images and share them withfriends and family all over the world. Present your shots with style using avibrant, pre-designed album that allows users to view still images in aneasy-to-use interface. Invite viewers by sending an e-mailed link that takesthem direa to the gallery.

SimpleSubmlsslonSubmit your website onto the best Search Engines

Guarantee two of your websites positions within top Search Engines usingSimpleSubmlsslon. Submit two website addresses (URLs) on a monthlybasis via your Control Panel. Once a steady stream of traffic is arriving atyour site, you will be e-mailed with results of the submissions, togetherwith all the information you need to further optimise your site.

IMAP/P0P3 E-mai l AccountsSend and receive professional e-mail

1&1 gives you an extremely flexible, easy-to-use and secure e-mail servicecomplete with your plan. Customise your account to your needs with personal addresses and sub domains. Use time-saving features such as catch

all, auto-responder, spam filter and e-mail forwarding. Receive the best protection from viruses with Symantec Security as standard.

i } : r l i w z

M : A

fFREEl;i&1 TRAFFIC BOOSTERI> worth up to £400 <? with Shared Hosting, J^ eShop and Server

pacl<ages pA

6 0 - D y ^M O N E Y B /

G U A R A N100% SATISFACTK

YOUR MONEY

B E G I N N E R P A C K A G E

F R O M ' 7 . 9 9£2.34 PER MONTH inc. VAT

PACKAGE FEATURES■ Web spaceI Daily BackupI l&l Control PanelI FTP access accounts

M A R K E T I N G T O O L S

N E WWEBSITE BUILD ING TOOLS

l&l WebsiteBuilderAutomatic Updates

D O M A I N N A M E S' Domain RegistrationI Domain TransferI External DomainsI DNS IVIanaqementI Masked URL forwardingI Domain Contaa Management

■ IMAP/P0P3 e-mail accounts■ Massive 1 GB Mailbox capacity■ Advanced anti-spam toolsI E-mail aliases■ AutorespondersI Unlimited e-mail forwardinq> Catch all e-mail adresses■ Account virus scanningI 1&1 Webmall

EXPRESS SUPPORT■ 24/7 Express Support' Moneyback Guarantee

250 MB

£ 1 . 9 9

2 0

20

2 5 0

H O M E P A C K A G E

F R O M ^ 4. 9 9£5.86 PER MONTH Inc. VAT

INCLUDES 1 FREE .CO.UK DOMAIN

PA C K A G E F E AT U R E SWeb spaceFTP access accoun ts

Monthly Traffic included1 &1 Control PanelUnlimited amount of wiebsites1&1 WebspaceExplorer/Webfiles

M A R K E T I N G T O O L S1 &1 Traffic Booster worth £150l&l WebStatisticsl&l WebElements1&1 Newsletter Tool

W E B S I T E B U I L D I N G TO O L S11&1 Dynamic ContentI l&l WebsiteBuilderI l&l Photo GalleryI l&l DynamicSiteCreator1 l&l PDF2Web Converter■ Personal Merchandise ShopI l&l Multimedia Archive■ Full Version Software worth £400■ FrontPage Extensions supported■ Ready-to-run CGI library■ ASP Scripting supported■ PHP3, 4 & 5, Perl & Free CGI's

D O M A I N N A M E SI Included .co.uk domains' Sub-domains' Complete DNS Management

I IMAP/P0P3 e-mail accounts■ Autoresponders/e-mail aliasesI l&l Webmail■ Virus Scanning for Accounts' Spam Filtering

SECURITY FEATURESI Protected by up-to-date Firewall' Daily backupsI Passvi/ord protection

EXPRESS SUPPORTI 24/7 Express Support (inc. e-mail)I Step-by-step online guides■ Online account management

izpgs

_11E<E

5Acc .

1&1No Set-up Fee. Total price per month.

or visit us now www.1and1.co.uk

LET YOUR PROFESSIONAi/VORK FOR YOU

sV

^werful Shared Hosting for the)rofessional user or small business

coking for a fully flexible solution« well as having generous quotas for web space, traffic and e-mailillowance, l&l's packages have been enhanced again with l&l'sraffle Booster enabling you to drive traffic to your website, All ourlackages benefit from 99% uptime guarantee, firewall protection,laily backups and top level security at our £15m Data Centre.

,r1

1 & 1 F E AT U R E S P O T L I G H T

7 Tonnes of Free FeaturesEverything you need for a professional website

The 1&1 Business Pro and Professional packages contain, free .co.ukdomains, free software, free marketing and website building tools asstandard. On top of this you get Advanced Developer Tools, generousMySQL & MS SQL databases and search engine submission software.

0

0

1&1 Traffic Booster ToolsDrive visitors to your website

Increase traffic to your website using the suite of tools within1&1 Traffic Booster. 1&1 Search Marketing is powered by Yahoo!enabling you to bid on key words ensuring good rankings withinthe top search engines. Receive an initial credit of £50. Alsoincluded is a free page impression quota with AdLINK, bannercreation software plus Google sitemaps and Froogle optimisation.

Inclusive Developer ToolsMore freedom for professional users

l&l's professional hosting package also includes Developer Toolsat no extra cost, giving you the latest technologies to implement a

high performance website. Check your Perl script with the Perl Scriptoutput monitor and check your script for syntax errors plus Shellaccess via SSH, Cron Jobs and much more.

can 0870 2411 247

B U S I N E S S PA C K A G E

F R O M ^ 8. 9 9£10.56 PER MONTH nc. VAT

I N C L U D E S 3 F R E E . C O . U K D O M A I N S

Web space 3 g b■ FTP access accoun t s 1 0

■ Monthly Traffic included 25 GB■ 1 &1 Control Panel /■ Unlimited amount of websites /

■ 1 &1 WebspaceExplorer/Webfiles /

M A R K E T I N G T O O L S

jS 1&1 Traffic Booster worth £250 /■ ln2Site Live Dialogue /

■ Chat Channels 5

■ 1 &1 WebStatistics /■ 1&1 WebElements /

■ 1&1 Newsletter Tool /■ 1 &1 WebDatabase /■ Customisable Forums /

■ 1&1 Dynamic Content ✓■ 1&1 WebsiteBuilder 25pgs■ 1 &1 Photo Gallery /■ 1&1 DynamicSiteCreator 18pgs■ 1&1 PDF2Web Converter /■ Personal Merchandise Shop ✓■ 1&1 Multimedia Archive ✓■ Full Version Software worth £400 /■ FrontPage Extensions supported /■ Ready-to-run CGI library /■ ASP Scripting supported■ ASRNET, .NET Framework■ PHP3, 4 & 5, Perl & Free CGI's /■ Database 2 rvlySQLD O M A I N N A M E S 1■ Included .co.uk domains 3■ Sub-domains 3 0 0

■ Complete DNS Management /

E - M A I L 1■ IMAP/P0P3 e-mail accounts 7 5 0

■ Auto-responders/e-mail aliases ✓■ 1&1 Webmail ✓■ Virus scanning for accounts l O A c c ,■ Spam Filtering /

S E C U R I T Y F E A T U R E S 1■ Protected by up-to-date Firewall /■ Daily backups ✓■ Password protection ✓■ Shared SSL or optional dedicated SSL Certificate /

E X P R E S S S U P P O R T 1■ 24/7 Express Support (inc. e-mail) /■ Step-by-step online guides /■ Online account management /

%

B U S I N E S S P R O P A C K A G E

F R O M

P R O F E S S I O N A L PA C K A G E

i ^79 93f r o m m

£17.61 PER MONTH inc. VAT

I N C L U D E S 5 F R E E . C O . U K D O M A I N S

PA C K A G E F E AT U R E S■ Web space 6 GB■ FTP access accoun t s 7 5■ Monthly Traffic included 60 OB

■ 18il Control Panel /■ 1&1 WebspaceExplorer/Webfiles ✓

M A R K E T I N G T O O L SCll&l Traffic Booster worth £300 /

■ ln2Site Live Dialogue /■ Chat Channels 1 0■ 1 &1 WebStatistics ✓■ 1 &1 WebElements /■ l&l Newsletter Tool ✓■ l&l WebDatabase /

■ Customisable Forums ✓WEBSITE BUILD ING TOOLS■ 1 &1 Dynamic Content /■ l&l WebsiteBuilder 25pgs■ l&l Photo Gallery /

■ l&l DynamicSiteCreator 25P9S■ Personal Merchandise Shop /■ l&l Multimedia Archive /■ Full Version Software worth £400 /■ FrontPage Extensions supported /

■ Ready-to-run CGI library /■ ASP Scripting supported■ ASRNET, .NET Framework■ PHP3,4 & 5, Perl & Free CGI's /■ Database

(8x MySQL, MS Access/2x MS SQL) 8 MySQL■ SQL Import■ Cron Jobs /

D O M A I N N A M E S■ Included .co.uk domains 5■ Sub-domains 1,500■ Complete DNS Management /

E - M A I L■ IMAP/P0P3 e-mail accounts 1,500■ Auto-responders/e-mail aliases /■ l&l Webmail /■ Virus scanning for accounts 20 Acc.■ Spam Filtering /

SECURITY FEATURES■ Protected by up-to-date Firewall ✓■ Daily backups /■ Password protection /■ Shared SSL or optional dedicated SSL Certificate /■ SSH Access /

EXPRESS SUPPORT■ 24/7 Express Support (inc. e-mail) ✓■ Step-by-step online guides /" Online account management ✓

I&I WebsiteBuilderI 1&1 Photo GalleryI 1&1 DynamicSiteCreatorI Personal Merchandise ShopI Full Version Software worth £400I FrontPage Extensions supportedI Ready-to-run CGI libraryI ASP Scripting supported1 ASP.NET, .NET Framework1 PHP3, 4 & 5, Peri & Free CGI's■ Database

(15x MySQL, MS Access/3x MS SQL)MySQL■ SQL Import

30pgs

25P9S

1 5

1&1 HAS EVEN MORErO OFFER

1 & 1 E - S H O P S

Build your own e-commerce website with real-time paymentclearing capabilities and fully customisable design templates1&1 eShops are e-commerce simplified.Use set-up wizards to build your shop,customisable templates to develop thedesign, include the payment option to suityour needs and ensure your transactions aresafe and secure. There's no excuse

not to be selling your products online!

1 & 1B U S I N E S S

100 MB web space10 GB/month traffic100 item product catalogueShared SSL Certificate

Froogle Export, Google AdWords ConversionChoice of 2 shipping methodsFree Software worth £400

Free 24/7 Express Support

' 9. 9 9

1 & 1P R O F E S S I O N A L

I 500 MB Web spacet 30 GB/month traffic

Unlimited item variantsI 600 item product catalogueDedicated SSL Certificate (optional)No merchant account necessary with PayPalAccept secure online payments with PayPal,WorldPay & ProtxFroogle Export, Google AdWords ConversionProduct categories/sub-categoriesProduct data import/export

Multi-currency supportChoice of 5 shipping methodsNewsletter administrationSelf-administration for customers

Free Software worth £400Free 24/7 Express Support

' 1 9. 9 9P E R M O N T H

£ 2 3 . 4 9 i f K . VAT

Total price per month. No set-up fee. 1&1 Developer eShop information is available online.W o r l d P a y 3 p r o t x

1 & 1 M A I L S O L U T I O N S

1&1 has everything you need to get started withpersonal or commercial e-mail1&1 Mail enables you to send and receive professional e-mail, reliably,wherever and whenever you like. You can use your domain and create apersonalised e-mail address such as [email protected]. With 1&1 Microsoft Exchange youcan send and receive mail, access public folders, contactdata, tasks and calendars. Also with the 1 &1 MicrosoftExchange package you get Outlook 2003 softwareincluded with your package at no extra cost.

1 & 1 I N S T A N T M A I L

ca,, 0870 2411 247

I 1 & 1 S E R V E R SUnlimited traffic, powerful specifications andexceptional value for moneyl&l's new range of Dedicated Server packages are better than ever before and havebeen designed to fit your needs, whether you need a fully maintained Managed Serversolution, a Windows Server for full flexibility and control or the renowned security of aRoot Server. In addition to this we are now offering unlimited traffic and even morepowerful hardware specifications, all at an exceptional price.

1 & 1 R O O TS E R V E R S

Full Root accessFedora CoreAdvancedrecovery toolPLESK8(100domains)Free SerialRemote ConsoleFree 24/7 SupportNew SSLcertificates

P L E S K 8FORUNUX/UNIX

1 & 1 M A N A G E DS E R V E R S

All 1&1 Dynamic ContentServer Managed by 1&1Receive all 1&1 Web Hosting toolsindudlnq, free marketing manualsand traffic boosting toofsOwn SSLCertificateincludedFree 24/7Support

1 & 1 W I N D O W SS E R V E R

.NET Frame work-readyASP.NET 2.0All WindowsServer come withWindows Server2003 StandardEditionP0P3 Mailserver

I Full, remote administrator accessI Free Serial Remote ConsoleI Free 24/7 SupportI New SSL certificates

PER MONTH£81.08 inc. VAT

B U S I N E S S S E R V E R I I■ AMD Athlon 64 3,500+■ 2,048 MB DDR RAM■ 2x120 GB hard drive (RAIDl)■ Free FTP backup space - 120 GB 9 9 PER MONTH

£116 .33 inc . VATPER MONTH

£128.08 inc . VATP E R M O N T H

£128.08 inc . VAT

E N T E R P R I S E S E R V E R I■ AMD Opteron148(2,2GHz)■ 2,048 MB DDR RAM■ 2 X 200 GB hard drive

(hardware RAIDl)■ Free FTP backup space - 200 GB

P E R M O N T H

£175.08 inc . VAT159.^.1159

£186,83 inc . VATP E R M O N T H

£186,83 inc. VAT

E N T E R P R I S E S E R V E R I I■ AMD Opteron 175 (2 GHz Dual Core)■ 4,096 MB DDR RAM■ 2 X 250 GB hard drive

(hardware RAIDl)■ Free FTP backup space - 250 GB

P E R M O N T H

£269.08 inc . VATPER MONTH

£280.83 inc . VATPER MONTH

£280.83 inc. VAT

Total price per month + VAT One-off set-up fee, £49


V

&1 Instant Domain

ith 1&1 registering and transferring your domain is straight-rward and fast. In minutes you will have a professional webIdress plus lots of features you'd pay extra for with otheroviders. All domains come with tonnes of free features.

icluded at no additional cost withII domains:

DNS management

1&1 Simple Submission100 free e-mail addresses (aliases)

Catch-all e-mail, auto-responders,unlimited e-mail forwardingDomain parking for future useMasked website forwarding1 page WebsiteBuilderUse as a one page business cardfor your business or project

)

.com, .net, .org

c o . u k ' 1 . 9 9p e r y e a r£2.34 inc. VAT

UK Subscribe

K SUBSCRIPTION OFFER

Save 40o/oOnly £11.68 every 3 months whenyou subscribe by Direct DebitP r a c t i c a l ! ■ O

webdesign

O V E R S E A SREADERSSEE PAGE 71

£''§ctical•FREE delivery to your door•Pay only £3.59 per issue ifyou subscribe*

•CD packed with greatsoftware every issue

• N e v e r m i s s a n i s s u e

•60-day money-backguarantee** - we'll refundunmailed issues if you'renot entirely satisfied*UK only. Based on buying 13 issues on UK newsstand andsubscribing by Direct Debit for 13 issues. We publish 13 issuesof Practical Web Design a year.**Minimum subscription term is 12 months. If, at any time duringthe first 60 days, you are dissatisfied in any way, please notify usin writing and we will refund you for all unmailed issues.

. JUU-""fdCtOI*'

L i a n U i l ^ ^ ^ ■

pages OF

ADVrCE

J n"Hichmofei

How the data^vatyjcandala ects your site

GET THE LATEST PRACTICAL WEB DESIGNDELIVERED TO YOUR DOORSTEP NOW!CALL 0870 837 4722QUOTING OFFER CODE P016OR VISIT www.myfavourltemagazines.co.uk/pwp/p016OFFER ENDS 6 NOVEMBER 2006


TUTORIAL: FUSION

Deta i l sBeginner

NetObjects Fusion 8: webbrowsers for testing

m m - M MNETOBJECTS

Support for Fusion 8 users,plus details of the newversion for upgrading.www.netobjects.com

FUSION 8 REVIEWAn independentassessment of Fusion 8'spro's and consw w w . w e b r e f e r e n c e .

com/author ing/fusion

F U S I O N U S E RA venue for Fusion

owners, including a forumand tutorials,w w w . f u s i o n u s e r . c o m

Richard Hillis the newedi tor ofPract icalWeb Design.Y o u c a n

email him at pwdeditoriafuturenet.co.ul<

The installer for thecomplete version ofNetObjects Fusionthe Software folder

Fi le Edi t Vtew Go Object Text Tools Help

• NetObjects Fusion makesit easy for you to buildsites with rich interactivityGet s tar ted wi th

NetObjects Fusion 8This HTML editor provides everything you need to build websites. Richard Hillhelps you create your first pages in just a few nninutes

O here's a fissure in the heart ofthe web design comnnunity,

dividing professional developersand bedroom bloggers alike. On

one side are those who prefer to hand-code:on the other, people who assemble their pages

through a graphical user interface.Dreamweaver is the best-known visual tool,

b u t t h e r e a r e o t h e r s . O n e o f t h e b e s t - k n o w n

is NetObjects Fusion, which has gathered adeserved reputation for offering a wide rangeof tools that suit beginner and expert alike.We're delighted to offer the complete versionof NetObjects Fusion 8 on this issue's CD - andyou can upgrade to the current version 9 ata special rate too.

Although you can hand-code throughFusion, its real strength is the tools it provides

for creating pages visually. Thanks to the SiteWizard, it's even possible to make a simple sitewithout any coding knowledge - and even ifyou're a hardened coder, it's liberating to setup a basic structure quickly to see how well aparticular idea you've had would work.

Fusion's templates use table-based layout,but the program does support CSS when

you're ready to progress to gaining moreprecise control over your pages. There's alsobasic support for setting up product cataloguesfor ecommerce or dynamic pages that areready to link to a database for live updating.Fusion's documentation also offers help for

making effects such as ad banners andcommon site types, including a photo gallery.

Here, we'll explain how you can start usingNetObjects Fusion 8 right now. You'll discoverthe simple installlation process, which involvesgetting a serial number via the website first,then meet the Site Wizard, which enables youto pre-select a design style for your site anddifferent layouts for individual pages. We'lla l s o t a k e a b r i e f l o o k a t s o m e o f t h e f e a t u r e s

waiting for you as you get to know thisversatile and accessible package. There's plentyof help available in the program when you'reready to go further.

ii Although you can hand-code through Fusion,its real strength is creating pages visually ff


p n , Y « T , sdesigned to protect you «ndgtv« you control over yourp e r « o n « t i n f o r m r t o n .

Ifiifi'i ' Jsi

i s ^ ^ O f M i r l N e i O b / e a i i u n o u

The first step toward settingup )fOur $of^are is toregister your copy ofNe tOb jec ts fus ton ,

Sr teSty les , temp la tes ,tutorials end ott ier tools andservices avei leble only forRegistered Users.

R e a d t h e P n v a c y S t a t e m e r

designed to protect you andgive you control over yourpe rsona l i n fo rma t i on .

Please register >our c

F t r « t N a m e ; ^ ' M v i r t f i

jRichordB u « n e * « N a m e :

|FUure PutteA d d r e c i ;

f of NetObjects Fusion.

La« t Name: > ; r«4u i r t i i ;

F5

S e d a l N u m b e r :

B e n e fi t s o f r e o t f t e r l n g y o u r p r o d u c t :*Take advantage of FREE unlimited Web technical support♦Sign up for a FREE Website Pros Hit Counter (Lite Edition)•Access to the latest upgrades, free services and ottier tools.

OK I Skip I

O SIGN UP ONLINEBefore you install NetObjects Fusion 8, you need to visit vwvw.netobjects.com/future, where you can register your contact details. Make sure you enter the

correct email address, because your serial number w/lil arrive here. When you receive theserial number, copy the NetObjects Fusion folder to your hard disk and run the installer.

O CONFIRM YOUR DETAILSThe installer requests the serial number, which you should enter including anydashes and capital letters. Fusion now commences setup. You have the chance

to personalise your installation by entering your name and email; entering a businessname is optional.

gs^S^^NetObjeasBMOM -

Y o u r U s e r N a m e m u s t s t a r t

with a letter, end eontetrtonly lower case tetters,digi ts, underscores (_} anddots (.).

Y o u r P a s s w o r d m u s t b e a t

least 6 eheracters iong andcannot contain spaces.

designed tTp ^ iTandgive you control ever jourpersona l tn formabon.

i f ,Your User Name and Password are used to create a profile that isused to access online features, support and much more iri NetObjectsF u s i o n .

C r e a t e a n e w a c c o u n t

r U « « a c c o u n t

User Name; i.r«4i«ir*4)

P a s f w a r d : C o n fi r m P a e e w o r d :

17 Remember my Password when in NetObjeets Fusion

ran sk ip i

[i& Seeue Connerton { NetObjeasI

PItfase provide the sethngsfor your Web hostingaccount. These setbngs wil lbe added to NetObjectsFusion as a profil* that canbe used to publish your Websites on the internet.

W e b H o r t l n o P r o f t i e

P r o fi l e n a m e :

JprectcalV«3 DesignF T P h o » t :

jpwcknag .co.uk

<B»ck I I OK I Skip I

©CREATE A PROFILEYou can opt to create a profile that gains you access to special features on theNetObjects website - or use an existing account if you have one. Choose a user

name and password, which you must enter twice to ensure that it's correct. Fusionconnects to the internet to create your profile.

OADD YOUR SERVER DETAILSYou can opt to enter your web server details immediately. (Your web host canprovide the details if you don't know them.) Because Fusion can link to more

than one server, it's best to give your connection a profile name so you can easily chooseit later on. Once you've entered these details, click OK to complete the setup processand start using the program.

CHOOSE A STYLEThe fastest way to make a site is with the SiteWizard: you can choose to start with this rather

than go to the Fusion editing Interface. First, choose astyle for your site after browsirvg through the subcategories provided. You'll be able to edit your selecteddesign later on.

IKiSiu." '

I P h ~ . .p A b o u t

r H o b b i e s

p Te s t i m o n i a l s

p C o n t a c t U s

pr L o c a t i o n

p S e r v i c e s

p C a t a l o gr D o w n l o a d s

P Ustingsr E v e n t s

r C a l e n d a r

r P h o t o G a l l e r y

r N e w s l e t t e r

r FA Qr U n k s

r L e g a l

step 2of2

o CHOOSE YOUR PAGES AND LAYOUTSNext, you can choose the key pages you want on your site, such as Home,About and Contacts. Tick the box next to any page you want, then click the

link for each page type and choose the most appropriate basic layout for that page.There's a choice of four each time, with text and images arranged in different ways.

T h e O n J m e i c o n i n ' -

Fusion's top-left cornertakes you to a homepage, which providesquick links to make newdocuments, openrecently used files, lookup tutorials, open them a n u a l a n d m o r e .

. >i

Practical webdesign November 2 (X )6 69

P HomeP A b o u t

r H o b b i e s

Te s t i m o n i a l s

p C o n t a t t U s

[ P L ^ c a t l MP S e r v i c e s

P C a t a l o g

r D o w n l o a d s

p UstirtQSr E v a r t s

r C a l e n d a r

r PKoto Ga l le ry

r N e w s l e t t e r

r FA Q

r L i n k s

r L e g a l

[ J P t la 3

a a

step 2or3 < B a c k I C a n c » l

Q p t i n n a l I n f o r m a t i o n

a m l w B s s N d i w e

|A La Cane

|30 Monmouth Street1

|B«h 1Z W P o s t a l C o d e c o u n t r y

|BA1 ZQQ !F i r s t N a m e U s t N a m e

|Ri chard |HiIIP b w w i v u m b e r F a K N u m b e r

|01225 44Z2AA 1E - M « H A i M r e s s

r Sav8 to orofils

Step 3a(3 < Back I Finnh | Cwcal |

O LAYOUT OPTIONSThe layout you choose will depend on the type of page you're setting up.On your Location page, for example, you might want just a single column with

relatively little text, plus one large image for a map. Fusion will convert your choicesinto working HTML pages based on your style choice earlier.

P u b t i s h

■aP u b l i s h s u m

A b o u t C o n t a c t . .

T s s t i m o . , L o c a t i o n C a t a l o g

O VIEW YOUR SITE STRUCTUREwhether you're creating a site in minutes with the Site Wizard or building onefrom scratch, Fusion offers several useful tools to help you build your pages.

The Site tab in the top row of options shows you the overall structure of your site intree or outline form, so you can see which pages are linked with which and get anoverall sense of how the site logic is working.

w^ M o r e

i n f oF U S I O N M A N U A L SWe've offered a brieftaste of Fusion's setuptools, but there's muchmore to this program.The installer gives youthe option of addinga P D F m a n u a l a n d a G e t

Started guide, whichprovide hundreds ofpages of assistance andtips between them.

O ENTER YOUR SITE DETAILSThe templates provide not only structure, layout and images, but also text.The Optional Information pane enables you to customise some of this text

immediately, replacing the generic contact details with ones more suitable for your site.Click Finish to get Fusion working on producing your pages, which takes a few seconds.

OVIEW YOUR INSTANT SITESelect a page in the Site view, then click the Page tab in the top row to viewthe actual page. You can see that the Site Wizard has done its work: there's

a basic layout with site-wide graphics, plus placeholders for dropping in your ownimages. There's even ready-written text, which you can edit to include your owninformation. This isn't just laziness: it lets you see how a basic page should be written.

©CHANGE THE STYLEYou can do better, of course. Click the Style tabto view the overall styles for the site, which you

can edit. The Text area, for example, shows all the ready-made styles used: double-click any one to edit the choiceof font, size and style using tools similar to those in aword processor.

OCODE BY HANDYou can set up a complete basic site in a few minutes using Fusion's automatedtools, but the program offers far more. Experienced web builders can click

HTML Source under the Page tab, for example, to view the code for the selected page.The tree on the left enables you to move to a particular snippet with a double-click. O


OVERSEASSUBSCRIPTION OFFER

r ^CD-ROMr ^ NOW INSIDE _P J WINDOWS & MAC OS

P r a c t i c a l !

Helping you build better websites.

^ivey6iir$itefl[i6

mpfw,f a c t o r !20 ways to <ag»ie visitorswith audio and video

FULL SOFTWARE' ■ NETOBJECTS FUSION 8 £132

w

Liquid ISJ tsthe right way

Solve tl

Google Mapson your website

How to embed location graphics

Solve the three-column CSS condundrum

PA G E S O FE X p l r R TA D V I C E

' Manage your sitewith Dr^mweaver

\CreateaRash%iii»galtery

And much more l

1"How the data

privacy scandalaffects your site

4r r ^

D I Y D E L . I C I O . U SHow to make your own tagging system withsocial bookfmrktrtg software arid PHP

?oci9| pooKumKtud ?o^Mgi6 9uq bHbHOM (O tU9|<6 Xooi OMM 3ddiud 2A2(D I A D E n C i O n Z

GET NOTICED FASTDiscover the best software to help yousubmit your site to search engines

A WHOLE NEW LOOKAdvice to spruce up your site, plus tipsfor making tlie perfect navigation bar

?npujf( Xoru et(6 to zesicp 6udtue? pi uj9t<|ud (pe b6H6C( u9Aid9(iCHj psiD!?coA« tjj6 p62(20tfM9i6 (o p6|b Aon vqAKo (o ebuics nb Xoni ?«€? bjnz {ib2G E l M O J i C E D f a m V M H O r E M E A A r O O K

_iii I" I '

Overseas Subscribeo

U K R E A D E FSEEPAGE!

R e c e i v e13 issuesfor only

€96u s$142• FREE delivery to your door•CD packed with great software every issue• Never miss an issue

•60-day money-back guarantee " - we'll refundunmailed issues if you're not entirely satisfied

* Payment will be debited in Pounds Sterling (Europe, £64.80)•* Payment will be debited in Pounds Sterling (USA, £75.60)

Exchange rates correct at time of going to press, September 2006. Payment by credit card onl)•** Minimum subscription term is 12 months. If, at any time during the first 60 days, you aredissatisfied in any way, please notify us in writing and we will refund you for all unmailed issue'

GET THE LATEST PRACTICAL WEB DESIGNDELIVERED TO YOUR DOORSTEP NOW!

C A L L + 4 4 1 8 5 8 4 3 8 7 9 4QUOTING OFFER CODE P016OR VISIT www.myfavouritemagazines.co.uk/pwp/pOl 6OFFER ENDS 6 DECEMBER 2006


TUTORIAL: PHP


m ^ i n n Q a BScunle 0.7.2

6 0i s i i i a

R E S O U R C E SSCUTTLE SOFTWAREAt the main Scuttleaddress you'll find a fullworking version of theScuttle software. Registerand explore, or contributeyour own tags.www.scutt le.org

SCUTTLE FORUMSScuttle has littlein the way of realdocumentation as of yet,which makes the project'sSourceforge forum anessential site to bookmark.http;//sourceforge.net/projects/scuttle

DEL. IC IO.USIf you haven't trieddel.icio.us yet, where haveyou been? It's the web'smost successful socialbookmarking tool.http://deI.kio.u$

A v e t e r a n

journalist,consu l t an ta n dcreativitysof twareexpert, Karl Hodge hasbeen writing about, andbuilding, the web for 15years. He also contributesto PC Plus and .net.

A full version of Scuttfe fsin the Software folder.Full-size step-by-steppictures are in the TutorialImages folder.

'At """'V a b o u t register log in

r e c e n t b o o k m a r k s S o r t b y ; K B i H l

Search all bookmarks ■ for Search

f.waiwrfimq Dynamic DNS D N S S e n i e r D N S S e c u r i ^ P r i m a r y D N S

Planet Herrmann - 25 ganz legale Tricks...Ein Wegweiser zum Untergang der abendlSndischen BUrokratiekultur19-08-2006 to burokratie, fun, toread by o.beckmann

A Cute Gurggly Fish NotecardThank You Notecard

19-08-2006 to notecard. thank you note by ahhsum4

Is Cloning a Form of Child Abuse?19-08-2006 to conceptual future, science, technology by tygerx9

Free Vi ra l Traffic GeneratorEnter Your Email Address and Website Link you wish to advertise below!19-08-2006 to affiliate programs, free advertising, viral marketing, webmasters, website traffic by coolbreeze

recen t tags

: : h a r d w a r e ; : a i t e c i s n s i n i

a r c h i t e c t u r e a r t a u d i o b a d k a r

cellphone code designeducation experience flash flex fun

games graphics headset Hnux mobile

modern music musica ocean online

games php programming tech

web web 2.0 webhosting

Popular Tags -*

s p e e d

Set up a social bookmarkingsite with Scutt leKarl Hodge shows you how to install and configure your own socialbool<nnarking site, where you can catalogue and tag your own pages

Ohe traditional web directory hasa new challenger with a funnyname. Enter the 'folksonomy',a system that enables web users

to categorise web content using labels. Thoselabels are commonly called 'tags', and the actof categorisation is known as tagging. These

tags are not to be confused with HTML tags,which are a different thing altogether.

The term folksonomy is used todifferentiate user-categorised content fromt h e w e b d i r e c t o r i e s o f o l d . T h e s e w e r e

'taxonomies', catalogues that hierarchicallyclassify content. The directory section of Yahoois a classic taxonomy, for example, withcategories leading to ever more tightlydefined subcategories.

P o i k s o n o m i e s h a v e n o c l e a r c l a s s i fi e d

hierarchy. Instead, content is arranged inloose, user-defined categories. Let's take a

blog entry as an example. The author maylabel a blog entry about a kitten beingrescued from a tree with the tags: news, local,

funny, animals. Someone else might comealong and add the labels: kitten, cats, tree.Tagging enables users to categorise contentin their own way and share those categorieswith others. It's both highly personal andinteractive; and although a folksonomy or

social bookmarking site isn't intrinsicallyhierarchical, some descriptive tags becomemore prominent than others over time. Somesites order tags and content by popularity, butfree searching is still available.

P o i k s o n o m i e s h a v e s o f a r b e e n m o s t

successfully applied to blogs and news sitesusing tools such as del.icio.us and Technorati.YouTube enables users to tag video, and

dating site Consumating even lets you tag

a- Fagging enablesusers to categorisecontent in the i r own

way, and then sharethose categories ffpeople. Although web directories arechallenged by tagging, traditional searchengines such as Google retain a central placein the future of the internet. Tagging justmakes them even more powerful.

If you fancy starting your own folksonomy-based directory, you can get a head start using

Scuttle, a complete social bookmarking sitew i t h f e a t u r e s t h a t a r e s i m i l a r t o t h o s e o f

del.icio.us. In fact, it complies so closely withthe latter's protocols that existing scripts

developed for del.icio.us can easily be usedwith Scuttle. You can learn more, and see a full

example site in action at www.scuttle.org.The application itself is a PHP script that taps

into a MySQL database. You'll need a hosting

package that supports PHP 4 or above and hasat least one MySQL database available toinstall it into your own web space. Scuttle

supports a range of other database types ifyou'd prefer to develop the script locallyoffline, however.

Although Scuttle's a Web 2.0 projectthrough and through, there's one old-fashioned problem with it that's common toseveral open-source projects: there's a distinctl a c k o f d o c u m e n t a t i o n . T h e r e ' s n o t e v e n a

'read me' file in the archive it ships with. So inthis tutorial we'll start by taking you througha full manual Installation, and highlight anypitfalls that you might ericounter. We'll thenmove on to using the software as a standardsocial bookmarking site. Finally, we'll show youwhich files you'll need to edit to change the

appearance of your site, and give you a fewtips on where to start.


PHP social bookmarking Tutorialo

C u r r e n t D a t a b a s e s :

(PrtvlUgaii AU. PMVJUflES) ^

' < M S S W V M £ > o r ^ f C t\P e»»t^ eM)>»et tc tk» Maiai* Uavs* -' mft?* vrfrO);

C u r r e n t U s e r s ;

> p e d g c d _ n * t u f * r

aap t

acache

on d u d e s

olocates

os e r v i c e s

kataxGetTU. . . a )ax l$Ava l . . .

kalkags .p t ip A u m o R S

kb g j s a r . p n g

kljebug. lnc .p^p

k•A.php

kFuTKtlons.ln...

kh e a d e r. m c . , . .

khistory,php

BI c e n c e . t x t loadng.glf logir.php

ktooo.png

kto90.24,png

38r s s . g f

i rrss .php scutUe.css

ksearch. Inc. php search.php

® ^ k

k i k

k i k

MBHBI config.inc.p.,.Type: FW ScriptMe Wodhed: 16^2006 12:06a»: 5 .17 KB

O CREATE A MYSQL DATABASEUnlike some applications. Scuttle's installation is entirely manual: there's noadmin panel and no installation script. The first step is to create a MySQL

database in your web space using the method provided by your host - take a note ofthe database name, username and password. Alternatively, use an existing database.

OMAKE A COPYUnzip the file scuttle.0.7.2.zip from this issue's CD to your hard drive. Insidethe unzipped archive, you'll find a file labelled 'config.inc.php.example'.

Make a copy of this file - a quick way to do this in Windows is to click on the filewhile holding down Ctrl, then drag to make a copy. Rename It 'conflg.inc.php'.

TooJ* |B«ohArticns| Ot Kw) DoowKfttj 8(» | j Tibtos j Forms | NMtgat*} OnHne j | tFiv«h«3)|

U ic under the te rns o f the <3111 Genera l Pub l ic L icense aa pub l ished byU t h e F r e e S o f t w a r e F o u n d a t i o n ; e i t h e r v e r s i o n 2 o f t h e L i c e n s e .

nnnnnnnnnnnn»n»ffnnnMn»»»»uffnif i f»n»»»nn»nnn»mnn»»nnnunn»»nnn»niHfun»un»

U D a t a b a a e C o n fi g u r a t i o n#nnnunn

d b t y p e :

d b h o s t :

d b p o r t :d b u s e r :

d b p a a s :

2 5 # d b n a n t e :

D a t a b a s e d r i v e r - m y s q l , a y s q l i , i n y a q l 4 , o r a c l e , p o s t g r e s ,s q l i t e , d b 2 , fi r e b i r d , n s a q l , t n a s q - o d b c

D a t a b a s e h o s t n a m e

D a t a b a s e p o r tD a t a b a s e u s e r n a m e

D a t a b a s e p a s s w o r dD a t a b a s e n a m e

n n n n n n n n n n n n n n n u n n n n n n n n n n n n n n n n n n n n n n n n u n n n n n n u n n n n n n n n n n

S c i b t y p e - ' m y a q l 4 ' ;S d b h o s t - ' 1 2 7 . 0 . 0 . 1 '^ d b p o r t - ' 3 3 0 6 ' ;

S d b p a s s - ' p a s s w o r d ' ;$ d b n a m e - ' s c u t t l e ' ;

Tools |e«(ohA«tloMj ObiMtsj Doeuit | S()t« ' | TMt | T«tri«s | Fotrnt j Nwtgate [ Onl { Help ) Up<1Mm( [FwMitM]{V - ^ ' = • © • • l a < ' > • ® 6 • i s • I D .

U i t u n d e r t h e t e r n s o f t h e < ^ U G e n e r a l P u b l i c L i c e n s e a s p u b l i s h e d b yU t h e F r e e S o f t w a r e F o u n d a t i o n ; e i t h e r v e r s i o n 2 o f t h e L i c e n s e ,n n n u n n u n u u n n n u n u u n u n n u u n n n u u n n u n n n n n n u n m u n n m n n n n u n n n u n n m

n n n n n n n n n n n n n » n n n n n # » n m u u i ^ u n n n n n u n n n n u m n n n n n n n n n n n n n n # n n u n n n n n n n n n n uU D a t a b fl i s e C o n fi g u r a t i o nMU dbtype: Database driver - j

U d b h o s t :U d b p o r t ;U d b u s e r :# d b p a a s :# d b n a m e :

D a t a b a a e h o s t n a m e

D a t a b a a e p o r tD a t a b a a e u s e r n a m e

D a t a b a s e p a s s w o r dD a t a b a s e n a m e

n n n n n n n u n n n n n n n n n n u n n n u u n n n n u n u n n n n n n n n n n u u n n n n u n n n M n n n u n n n n n n

^ d b t y p e - ' m y s q l 4 ' ;$ d b h o s t ■ ' 1 2 7 . 0 . 0 . 1 ' ;$ d b p o r t - ' 3 3 0 6 ' ;$ d b u s e r ■ ' u s e r n a m e ' ;I d b p a a s - ' p a s s w o r d ' ;$ d b n a n e - ' a c u t t l e ' ;

O SET THE DATABASE PARAMETERSOpen the newly copied file in a text editor or script editing tool, such asHTMLEdit or NoteTab++. Scroll down to line 27, where the section defining

database parameters begins. Change the dbuser, dbpass and dbname parameters tomatch the database user, password and name you noted down at step one.

©DATABASE CONNECTIONFor most installations the dbtype entry shouldn't need editing unless you'reusing an older version of MySQL. You'll see in the comments above the

database parameters that there are a couple of alternate MySQL drivers specified.Try these after installation if you have problems initiating a database connection.

■ Toeb |B«tehA«tton({ Cfelwu;

;|Ooc»fmntist^ | Tm ) TiWk j foimt | | Or** | h<H> | UpdM* | lIMl

M i fl l e t y p e a : i n a r r a y o e b o o l o i a i r l c e x t e n a i o t u i t h a t S c u t t l e s h o u l d

• * » a d d s T s t e t o t a g a t o t .

e i M r e s e c v e d u s e r a : I n a c r a ? o t u s e r n a n e s t h a t c a n n o t b e r e g i s t e r e d

a c $ 8 i t e n a t B e . ' B S B B B "$ l o c a l e - ' e n _ G B ' ;

9 0 t t o p _ l n c I u ( l e • ' t o p . l n c . p h p ' ;

$bocton_ iBc lude • ' b o t t o n . i n c . p h p ' ;

^ s h o c c d e t t e - ' d - » - T ' ;

9 3 ^ l o n g d a c e9 4 $ t t o £ o l i o « - c r u e ;

9 S ^ d e l a u l t P e c P a g e - 1 0 ;

9 C t d e f t t u l c R e c e n t O s T s - 1 4 ;9 7 $ d e £ a u l t O r d e r B 7 ■ ' d a t e d e s c ' ;

, a m * P L * T r s _ » i R - d l r i M B B e ( _ r i L i : _ ) . ' / t e a p l a t e s / ' ;9 » < C O O t - M U L L ;

1.00 <coa)clepref IX - ' S C U T T L E ' ;

I Q l < t a b l e p E e £ l x • l a c ' ;

1 0 2 < » t e l n e n ( i i l1 0 3 I c l e a n u r l s • f a l s e ;

1 0 4

i O I « U 8 e c t t c h e - f a l a e ;

io« , <diE_c«>ebe - d i r n a « e ( T I L E ) . ' / c a c h e / ' ;

©PARAMETER SITENAMEA little further down, starting at line 88, is alist of parameters that affect your site and its

installation. Again, the parameters are comprehensivelydescribed in a long comments section immediatelybefore this section. You may wish to change theparameter sitename from the default Scuttle to thename of your actual site.

8 3 n r i i e t y p e s : A n a r r a y o f b o o k n a fl T e x t e n s i o n s t h a t S c u t t l e s h o u l d

8 4 n a d d s y s t e m t a g a f o r .

8 5 U r e s e r v e d u a e r s : A n a r r a y o f u a e r n a z n e! S t h a t c a n n o t b e r e g i s t e r e d

8 6 n n n n n n n n n n n n u n n u n n n n n n n n n n n m n n n n n n n u n n n n u n m n u n n n u n n u n n n u n u n u n8 7

B8 ^ s i t e n a m e ' t a g . a . l o g u e ' ;® 9 $ l o c a l e ' e n _ G B ' ;9 0 $ t o p _ i n c l u d e ' t o p . l n c . p h p ' ;9 1 S b o t t o n _ i n c l u d e • b o t t o a . l n c . p h p '

9 2 $ s h o r t d a t e ' d - m - Y ' ;

9 3 $ l o n g d a t e - ' j F Y ' ;9 4 $ n o £ o l l o v - t r u e ;

9 S $ d e f a u l t P e r P a g e - 1 0 ;

9 6 $ d e £ a u l t R e c e n t D a y a ■ 1 4 ;

9 7 $ d e l a u l t O r d e r B y -

' d a t e _ d e s c ' ;9 8 STEHPLATES_DIR - d i rnarne ( F ILE ) . ' / t e m p l a t e s / ' ;9 9 $ r o o t N U L L ;

1 0 0 $ c o o ) c l e p r e f I x - ' S C U T T L E ' ;

1 0 1 $ t a b l e p r e £ l x -' s c ' ;

1 0 2 $ a d n i n e R i a i l - Uh<i)(iin0exan>ple.oI S ' ;1 0 3 ^ c l e a n u r l s - f a l s e ;1 0 4

1 0 5 ? u a e c a c h e - f a l s e ;

1 0 6 Sd i r_cache - d l r n a m e ( _ r i L E _ ) . ' / c a c h e / ' ;

m .

o AMEND THE EMAIL ADDRESSYou should also change the adminemail entry from the [email protected] to your own address, or one you can spare. Now you're

ready to upload the application. Save the edited configuration file. Connect to yourweb space by FTP, and create a new folder in the root directory called Scuttle. ®

Quick ti|F R E S H T A G S


Tutorial PHP social bookmarking

1 Address' J«W.coin/[xiilc.htnJ/»ajtMB/ " 3

i i "MyDocumsntsS h « r a d P o c m n t t

<1 ffyNetmirIi Plans

l JM c a c t w

aM u d e s

uJb c a b s

o Ptemplates . c v s i v n r e

0• h t a c c e s s j b o u p h p

kajadMete. . .

a i t x M r U . . .k

atuIsAv«l. . .k AUTt k

bgjMr,pngk

bg.»wa<far.... l»9_»detar,..,k

b o o W t o . . . .

k 0canfq.lnc.(^ corAg.inc.p..

kdebug.lK.php

ke d » . | i v BTTorJog

kf u n r t i o f » . l n . . . J . k

Nttory.p tpk

(CBfi.png4

lprport.(*pk

hpdrtNetsc...k

intex.php

t(Scuttl».phpB

i n r c a . t x t t M d n g . ^k

b ( ^ . p h pk

logo.png^ k

passwd.php p«**<art«Q...k

prone.phD0

r e a i t n e . t x t

kratpstC(.php rts,gr

kr « . p t » s c u M s . o s SMrch.hc.php search . ! ^

0 ktaodeleto.php

i r k

O UPLOAD SCUTTLE FILESUpload the contents of the scuttle folder you unzipped to the new scuttlefolder you've created In your web space. You may wish to upload one folder

at a time, making sure you maintain the existing hierarchy of files. When the uploadhas finished, you'll have to set permissions on one crucial folder in the hierarchy.

a a ^

spodgcxLscutt le (4)

■ s c . t o o k m ^ V s■ s c _ t » g s■ s c _ u s v s■ t c _ w a t c h » d

IMySQL-4.1.21-Standard▶ Protoco l vers ion: 10

83 Server LocalhostviaUr^ socket> User spodgod@localhost

ISt M/SQL criarset UTF-B Untcod* (utl8)(1 M/SQL connection collatiof<

|u«,untcode_ci 3 ®ft Cra«t«newd«tabt«e: (B

ONo Priviltges9 Show MySCM. runtime tnfonnationX Show MySQL system variables 9% Show processes aila Character Sets and CoH^onsMi Storage Enginesd Databases

Export» Importil Log out S)

phpMyAdmIn • 2.8.0.2▶ MySQL chentversion-4.1,10▶ Used PHP extensions: mysql

f Language id [ingitsh"^ Theme / Style. jOflginai 3O phpr tyAdmin documentation^ Official phpMyAdmin htomepage▶ [ChangeLog][CVS] (Lists]

p / tpMl

O INSTALL TABLESThe final step is to manually install tables into your database. How you dothis will vary according to your setup, and you'll need to check your host's

documentation to find out what provisions are made. The easiest route is usingphpMyAdmin: many hosts provide this software as a database management tool.

'Quick tipF R E E TA GFreeTag is a global PHPalternative to Scuttle,which can be pluggedinto any page on yourwebsite using the PHPinclude method. Thoughi t ' s a i m e d a t m o r e

advanced users, thescript is fairly simple toinstall. You'll find fulli n s t r u c t i o n s a t w w w .

getluky.net/freetag.

IccTMiin'j«r~H—IFreeTag J ■

s c u t t l e b o o k m a r k s w a t c h U s t « d d a b o o k m a r k

Sign up here to create a free Scuttte account. AU the Information requested below Is required,

Pnnnrd [2™™ ZHE ™ i l I 1

&P A R T T W O

LOG IN TOS C U T T L E

O REGISTER THE SOFTWAREYou'll need to register as a new user before youcan start using Scuttle. Click the Register Now

link. By default, the user 'admin' and a password havebeen generated for you. We recommend changing thepassword now, adding an email address and proceeding.Click OK and you'll be taken to Scuttle's front page,where you can start tagging and adding bookmarks.

a p i C K h * I n d u d e s l o c a l e s s e r v i c e s t e m p l a t e s . c v s i g n o r e

w m m m m m m m m i k M

i j m -aiaxGetn:)... ajaxIsAvai...

kdebug, iv. php edt.php

0)sScuttie.p^p l c e r K e . t x t

register.php rss.gtf

kwatdilst.php

T y p e : F l e F o i d e r

Modhed: 15 August 2006, 06:44

•..com/pubk.html/scJ

R e a d W r i t e E x e c u t e

O w n e r E l B

G r o u p B B B

A I U s e r s B B

O t ( I C a n c e l

.htaccess about.ptip a)axOe)ete... .

k k ^bookmarks.... conftg.lnc.php confiQ.inc.p...

^ iimport.php importNetjc... index.php

k k Bpopular tag. . . profie.p lv readme. tx t

^ ^ ^tagdelete.php tags.php vvatch.php

O SET PERMISSIONSThe cache folder should be world-writeable, so right-click on it (if you'reusing Windows FTP), and tick all the boxes in the permissions matrix. In

other FTP clients, you may be able to set permissions using the CHMOD command.In this case, try 777. If your host gives errors, change this to 755.

> c □ g Q ,

spoc igod_scut t !e (4)

& Server: localhost * p Database: tpodgod.tcutUe

t fSl iMchira aSQL ^ S««fch aOmry aE«port ^ Import XOmri l toni

Inpoft has been successful^ finished, A quenes executed

r SQL query

CREATE TABLE «c_b(Mkmark« ' (M 01) NOT NULL AUTOJNGREMEIirT .u l d ' . ( 11 ) N O T N U L L D E FA U LT V.

• ^ • ' - ( 4 0 ) C « F A U . T N U L L ,' b S t e t u s 'b O a t ^ t m e 'b M w M c d '

• b T t t t e ' •- b A M r e t t

bOescnp l icn 'b H w h -

"(1 ) NOT NULL DEFAULT T]',■- • " NOT NULL DEFAUtT aXXHOO) 00 00 OtT,

NOT NULL DEFAULT irnKjOOO 00 00 00",(255 ^ NOT NULL DEFAULT *

N O T N U L L .( 256 ) DEFAULT NULL ,

I 32 > NOT NULL DEFAULT-,PWMARY KEY ( bW' ) .KEY 'sc boo^cmarVs utd' ( uid', bStstu»' . bDMettm*') .K E Y « ; _ b < « A f n « r t ( * _ h w ( b H i ^ ' , , b M " ) ,K E Y t e . b o r t i m w k e . c f c i " ( ' b D s t t t t m # ' , u W )

V # MySOL returned an cnipty «e»di »•( (i • zero rvm)

- Te M i » > f u c t u f e f 6 r t » W e

I CREATE TABLE tcjags (xf , 11 ) NOT NULL AUTO JNCREMENTW d ' 1 N O T N U L L D E F A U L T 0 ' ,

\ •4<) (32 ) NOT NULL DEFAULTPRIMARY KEY ( Kl I

'Uf lifT ir,iMa,iH Md I lifl I Ml

P O P U L A T E Y O U R D A T A B A S E■ EM In phpMyAdmin, select the database you wish to populate. Click the Import

tab. Browse for the file tables.sql on your hard drive, in the Scuttle archive youextracted in step 1. Click Go when you've located it. When the operation finishes, youshould get a message telling you that four queries were successfully executed.

c? s c u t t l e b o o k m a r k s w a t c h l i s t a d d a b o o k m a r k

Atfdrtts http://wMv.beerinatdood(es.com/bleg/ j •- Required~1 - Required

OeMrlptton ,J)rawlr of beer mats.

Tags drawing cartoons rude beer mats funny 1«- Comma-separated

P r i v « y P u b l i c

Drag one of the following booimarklets to your bro¥«er's bookmarks and dick itwtteneveryou want to add the page you are on to Scuttle:

♦ Post to scuttle

« Post to Scuttle (Pop-up)

* Import bookmarks from bookmark ffie (Internet Explorer, MozHIa FIrefox and Netscape)» import bookmarks from deLlcio.os

©ADD BOOKMARKSScuttle's main functionality is bookmark management. Click the Add Bookmarklink to get started. You can enter bookmarks, with associated tags, manually

using the main form. Enter the full URL to the page you wish to bookmark in theAddress box, followed by a title for the page in the Title box.


PHP social bookmarking Tutorialo

s c u t t l e i b o u t l o t

3 3 :\

When Soogh Breaks by The NIghtweaver24-01-2006 to complett, fjoHctlon, tomon, muyo, my,

The Prince and the Lecher by Todd Hill2441 -ZOM to fanflctfon, Me, kamon, my, tingl*, todd ItlH, urusel, ystsurj by f«nKc »nd 1 other

Wedding Nights by the OragonBwd24-01-20M to complete, f»nfict1or>. lemon, my, not, tefxti i, the drigpob^nJ by fanfic

WantlngMoreSagabyOI24-01-2006 to cornptets, dt. finflctloft, temon, muyo, my, not, tenchf fanftc

WashiB Roses by Roberto RWera Jr24-01 -2006 to C0fnp<*ts> faofiction, lemon, m y, not, rotrartD rivera jr, tenctil by f«nHc

TM-AA No Need For Mesten WaybyLoki-L24-01-2006 to compketB, fanftctton, Ismon, lekt-t, muyo, my. not, tntchi by fanfic

. evao^ebon

* ) * > b i o $d e l . i c i o . u s

fanffctior linux music myn « W S o n l i n * o p M s n u r c * p t v

p r o s r a m m t n g r e f i a r « n c »

design

O PAGE TAGGINGThe most important part here is the Tags field, where you can enterdescriptive, single-word, space-separated tags to describe the content of the

page. As you tag pages, you'll build up a list of tags that can be shared between otherusers of your Scuttle installation - or used to categorise content on your own sites.

s c u t t l e b o o k m a r k ! w a t c h l t s t a d d a b I

T W t

DMCflpt ten

Te«»

P r t y a c y P u N k

*<kl eookmatk I

T « t »

B e a h m A f I

Dreg one of th

• t o U

• Impor t

♦ Import bf - 'I

t$ a your braMeft bookmerlu and d{d( It wttenever you want to edd ttte page you are on to Scuttle:

Internet Explerer, MurWa Firefox and Netscape)

OADD BOOKMARKSThere's a simpler way to add single pages. In Firefox or Mozilla click and drageither of the Post to Scuttle links to your Bookmarks menu; in IE, right-click

one of the links and choose Add to Favorites. This will add a bookmarklet - a snippetof script - that will add the current page to your Scuttle bookmarks when selected.

c? scutt le bookmarks watchl i i t add a bookmark

FUe IP r i w y p u b t i c

1. Export your bookmarttsfrwn your browser to 4 nte:

« internet Exptorer; me > Import and Export... > Export Favorites» MozMU Firefox: Boolcniarks > Manage Bookmarics... > Ftte > Export.,

e Netscape: Bookmarks > Manage Bookmarks... > Took > Export...

2 . CUckSrow^e. . . to find t fM savad bookmark ffleonvourcomputer. T lw nwxk

3. Setoct the default privacy setting for your knportBd bookmarks.

4. Okie Import to start krqwrting the bookmarks; it may take a minutB.

m s t e t t i e fi l e c a n b e t s l h e .

O IMPORT CONTENTA quicker way to add content to Scuttle is to import It from another programor site. You can import bookmarks directly from your browser's bookmarks or

favourites file, or upload an exported XML copy of the bookmarks from an existingdel.icio.us account. The advantage of the latter approach is that tags are imported too.

( M w w t : : W t M e i < b k n f « R K k M w i

tm ^M > « t > U • i M t • i o W

©SEARCH TERMSYou can navigate your bookmarks, and thebookmarks of other users, by going to the

Bookmarks page. A drop-down menu filters results toeither your bookmarks only, bookmarks placed on awatchllst or every bookmark stored. Search terms siftthrough both tags and descriptions to find content.

O I n s t a l l a t i o n e r r o r s You may encounter some common errors during installation - fortunately they're easy to fix

^ Tools I BMch ActMM ] QMtotf} Document! Stjte j TeM | Tables ) Form* | Navigat*]N y , ^ ^ 4 , 0 6 , ^ , I D ,

R e w r l t e E n g i n e O nR e v r l t e B a s e /RewriteCond %{REQUEST_FILENAHE} !-fRewriteCond %{REQUEST_FILENiHE) !-dR e w r i t e R u l e * ( [ ^ / ] + ) / ? I . * ) S l . p h p / S 2 [ h j

f s c t r m E : O t t i t t

« C o p y r l g t a C ( C ) 2 0 0 5 - 2 G 0 C S c n t C C X e p r o j e c tC $ h e t p : / / s a i i r c e t o r a e . B e c / p r a ) e c c a / a c u t e l e /

t b c t p : / / a c < i e c l e . o c a /

i T h i s e o d u l e 1 9 t o c o a fl g v i r e t b e M l n o p t i o t

C a a fl o u c a t l o a

t t M d b p o « :

M « A p a s s ;u f ( 8 > n a « e :

oIf you get a 500 server error when attemptingto access Scuttle, open the file .htaccess fromthe root of your installation and remove the

AcceptPathlnfo line.o

The error 'Warning: Cannot Modify HeaderInformation' may be caused by extraneousspaces at the beginning of config.inc.php. Open

the file and delete the space before the opening tag.o

Make sure your FTP client is set to upload PHPscripts in ASCII format - or use Windows FTPErrors can be generated by files that have been

uploaded in binary mode.

Practical v ebdesign N o v e m b e r 2 0 0 6 7 5

Tutorial PHP social bookmarking

PA R T T H R E Ew) Doewwnlj 9| j T«* | TiU» j Fonm ] NwigM*) (Mn* { j (Jpdttff | [FavortM]}

w^tcebucbee tbs", taboaa, awng-gerif;

S r r ' ^ t i o n : B o a e ;

i : h o v e r <c o l o r : 1 1 2 5 6 ;

t e x t - d e c o c a t l

M L C g i n : O ;p a d d i n g : 0 ;

i n p u t [ t y p e - t e x t ] ,l D p u c [ C 7 p e - p a s s « o r d ] ,

! M l e c c ,t t e x t a r e a <

b o r d e c : I p x s o l i d M i A M ;

p a d d i n g ; O . l e s ;

t t i n p u t [ t 7 p e - t e x t ] ,

3 " TmH jBaiehAowiwI Ct*Kti| Ooeimwj 8W ) } Tabl« | FormV ' 0 - S ; - S '

1 ) Wav9*ia| Onina ) Halp 1 UpdMM) [Fava« " l l

t ♦ B A S S * /

3

4

' * (-

s

t ( a 17 c o l o r ; 1 ^ 4 7 1 ;

8 t e x t - d e c o r a t i o n ; n o n e ;

9

[asbover {i i c o l o r t # 2 5 8 ;

1 2 t e x t - d e c o r a t i o n : u n d e r l i o e ;

1 3

1 4 [a lj»o X1 6 b o r d e r ; 0 ;

1 7 [body J « a a c a l n : 0 ;1 * p a d d i n g ; 0 ;

t o

2 1 : l n p u t ( t y p e » t e x t ] #2 2 i n p u t [ t 7 p e * p a s s v o r d ] ,

2 3 1 select.2 4 [ t e x t a r e a :2 S b o r d e r : I p x s o l i d

2 C p a d d i n g : O . l e n ;2 7 : >

2 0 l n p t i t [ t 7 p e - t e x t ] ,

o C S S E D I T I N GIt's no fun running a Scuttle site that looks like every other one, but, as withmany PHP scripts, there are a few customisation options. The easiest way to get

a different look is to edit the main CSS file that ships with the application. You'll find itin the root folder of your installation, labelled scuttle.css. Open it in your chosen editor.

PTMore i n foAs we've said, Scuttle'sdocumentation is sparse,but it's growing steadily.If you get stuck duringthis tutorial, your firstport of call should bethe Scuttle Wiki, a

developing resourcewith FAQs, installation

t ips and documentat ionon the programmingi n t e r f a c e . I t ' s a t s c u t t l e ,

org/wikl.

r * T « 9

d m i f h t w

©LESS CSSThe default CSS file that ships with Scuttle maynot be the best starting point. You can find

a stripped down light-and-compact version at tools.splitbraln.org/scuttle/scuttle.css. This can be used as areplacement CSS file, or as the basis for customisation.The file has far fewer entries and generates a clean,sparse layout.

H I - - a* 1t» I Tim I■ • © • & ' t S = 6 - g . I D

; <?p»>p( u s e r s e r v i c e " • < S e r v l c e F a c c o r y : : g e t 3 e r v i c e l n s t a ]i f ' l u a e E s e r v i c e - M s L o g g e d O n O ) i

( c U s e r ' l n s e r 9 e r v l c e - > g e c C u E r e n c 0 9 e E 0 ;

< c O g « c n w i g - | e l I a e r [ ( u s e r s e r v l c e - > 9 e t r i e i d N i

c e { ' O s e r S e r v l c e ' ) ;

' 7 >

< u l l d - ' ' E k a v i 9 a c i o n ' ' >

< l l >< t t h re f« ' ' < ^php echo CEeaceURLCbookns r i u ' « ^cUse rnaae ) ; ?> ' ' ><?php echo T_ f 'BookMi t l cs ' ) ; 1< l t > < a b r e f " ' ' < 7 p b p e c h o c r e a t e T T R L C « a t . c h l l s t ' , $ c Q s e r n a a a e ) ; ? > ' ' > < 7 p h p e c h o T _ ( ' B a t c h l l s f ) ? 1< l i > < a h r e f » - < ? p h p e c h o c r e a t e U B L C b o o t o a t l c s ' , ? c T 7 s e c n a s K . ' 7 a c t i o n - a d < t ' ) ; ? > ' ' > < ? p h p e c h o T< l i c l a s s « ' ' « c c e s 9 ' ' x a b r e f » ' ' < 7 p h p e c h o $ C L 0 6 J a . S [ ' r o o c ' ] ; 7 > ? a c t i o n - l o g o « t ' ' > < ? p h p e c h o T _ < > L o 9

< / u l >

« (<?pbp

OHTML EDITINGThe default navigation for your site is in the template toolbar.inc.php. This iscalled in turn from top.inc.php. The navigation elements are marked up in an

unordered list. You can add to this list using hard HTML links, marking them up withthe <li> tag - as long as they're nested within the opening and closing <ul> tags.

o CHANGE FONTSEach section of CSS is commented, making it fairly easy to target and editcolours and backgrounds in each part of the layout, but it's best to steer well

clear of the padding and margin attributes unless you're confident with CSS. An easyedit you can make is the default font type, right at the top of the document.

0 m WjaboU.M-P i bookmarks.tpl.php bottom.inc.php dynamWasis.inc.php edtbooknwk.tp<,pt*i edKprofle.tpi.php

i ijr.SOO.tpl.php importDelcious.tpi.php importNetscape.tpl.php login,tpl.php

s i d e b a r . b t o d c c o m m o . . . pular.... stdebar.Uock.prone.php

A A AT E M P L AT E C H A N G E SOYou can also edit the templates for your Scuttle layout. In the templates folderin your installation, you'll see a series of PHP files, each containing a snippet of

HTML and PHP code encapsulated in PHP tags. Think of the PHP code as placeholdersfor data - these must be retained, but you can edit the HTML around them at will.

IWlhanyiC -y

L e t 9 u r c t t « L i b r a r y i n t e r n e t R e s e a r c h L i n k sw < U » b o m *

h b r » r y h o r n *

r « « « * r e h ( k i K « h « m «

t o i m

S t ^ g e t t a U fi ( ( ' e p o a a B r o k e n L i n k

Grwneen; Banking for t^e Poor«Pr«vidts owttt to tht pooTKt of lh« poor In rur«( B«>gUdifh without any cabt*r*L At Grtmoon Bank, crKlIt htwt tffwttvo WMpon to fl^t povony and tt sorv« « » catalyst In th» ovw^ dov«<opmm( of socto-oamomk,-0»-14-3aw t>an|pd*sft . crMmtD0wpMir««tor(h«»«or, ff l tcrohnanc*. frubammadyuniK, s«cl* l»ntr«prinMr)

BRAC: AUevia t ton o f Pover ty and Empovverment o f the Poora n M o p t n t a t . v i r t u a l M t f - f l n a n a d p a r a d t g m t n h u m a n d a v « k > p m e n

world owytoytng 17,192 paepte, wtHi th* twh objoctlvas of poverty aMavtatton and amp

0«-t4-3a>« : wipwwment of 0» po«r, fiaa ab«t. poor, povany jittlattpn, socUt or

Soctd Accountability Intemetlonal: Promoting the Human Rights of Workers arowtd the World•Our mbston to to promotB human rl^ts for workarj anund tha xnortd as a

a, and prg^atns davatopor. Plaasa vtstt our Country Programj paf* to laam atrka, Vtemam an: tUa tappor m««n. cwtral am«ica. china, athtcal n

. standtfdi organtution, (urkvy, vtttnan

p o p u l a r e a t « ( o r t » i

a f r t c a n i t u d m a g D c u l U i r s

amnesty tntamabonai r t ti t u d i M c h n s t t a r n t y

o n m o t o a r o f c u t t u r *•cooorny educa t ion Hr r^

g a o j r a p h y g o v a r n m e n tSatks hiStOfy huatnhuiTMn nghts v io la t ior tst««d« r p ro f t o t

p o l l t k r s t p r a t M t t w n *

: r e l i g i o n w a r c ^ )tngiTMi statisbcs bmalinak t n i t o d

ONEW LOGOSThe logo and images that run along the top of the layout are defined in yourCSS file, but they can be changed. Create a new logo in an image editor, save

it, and upload it to the root of your Scuttle installation. Change the background style inthe class html > body hi to point to your new logo instead of the default logo.png. O


Back issues

i s s u e s P r a c t i c a l


ACD-ROM : CREATE CUSTOMISED SEARCH TOOLSEXTRAa MEDIA FROM SWF FlUS' PHOTOSHOP & CSS VIDEO TUTORIALS

i t

Build your sitefor free!Revealed: 20 must-have free programsand onlirve foots for authoring, graphics,content management and nKne

M a k em o n e y

^ cart af>d sellfromyowrsite

6 6P A G E S O FEXPERTA D V I C E

I M S M O M m

U y W e o k M l i TwtheJntemrt? ,

INTERNET TV TOOLS I QUESTIONS ANSWERED i IMPROVE YOUR SITE

I •euUaRashQafaryuangAc t ionScnp i

HOW TO ADD FEEDS TIPS FROM THE PROS TRANSFORM YOUR SITE

I ssue 31S u m m e r2 0 0 6■ We b d e s i g n e r ' st o o l k i t 2 0 o f t h ew e b ' s b e s t f r e e a n d

open-source tools■ P l u s P a s s w o r d -

protect Dreamweaverpages, design attractivetables in CSS, and sellw i t h Z e n C a r t» Te s t e d B r o a d c a s t

Machine, QuickTime 7Pro, Flix Pro 8.5 andA u t o d e s k C l e a n e r 6 . 5■ O n t h e C D X t r e e m eSearch Engine Studioa n d E l t i m a F l a s h

Decompi le r

yjT/rfo

\CD-ROM •getimagessharperthanphotosho^• • icon Km give sites a VISTA LOOK NOW*P H O T O S H O P V I D E O T U T O R I A L S &

• •

n i ■ I ' •

1

R e a c h m o r ew e b u s e r sMake your stt« accessible

*U n l o c k h i d d e nF l a s h f e a t u r e s !feata^J

ENHANCED MESSAGING : QUESTIONS ANSWERED i SWEET SITE!

I s s u e 3 2

September2 0 0 6■ Keep v i s i t o rscoming back 20ways to make yours i t e a c c e s s i b l e■ P l u s G r e a t f o r m swith Dreamweaver,Yahoo! MessengerPlug-ins, and tab-stylenavigation with CSS■ Tested Audacity,Mixcraft, Web JukeBoxa n d e P o d c a s t P r o d u c e r■ O n t h e C D

Focalpoint imagee d i t o r a n d Va l e r i a nicons from IconPeople

I s s u e 3 3O c t o b e r2 0 0 6■ Give your site aW e b 2 . 0 m a k e o v e r20 techniques includingpodcasts, bloggingand tagging■ P l u s M a k e a n e w ssite with Geeklog■ Te s t e d o s C o m m e r c e

2.2, Zen Cart 1.3.0.2,eComm Pro 2,Actinic Designer■ O n t h e C D

PHPMagic and Imaget o P D F

L I M I T E DN U M B E R S O F

ISSUES 28,^ g X r ^ o A i < ; n / IfyouVe missec

an issue, just pickup the phone and call:

3 7 4 7 7 3

3 8 7 9 5UNITED KINGDOM - £7.99

EUROPE - £8.99REST OF WORLD-£9.99

Buy back issues online at:www.myfavouritemagazines.co.uk


TUTORIAL: MYSQL

Deta i l s

Text or HTML editor; webhost with PHP and MySQL

60,R E S O U R C E SFINE-TUNE FULLTEXTAn article which explainsnnore about fulltext andusing Boolean operatorsin queries.www.onlamp.com/pub/a/onlamp/2003/06/26/f u l l t e x t . h t m l

A D VA N C E D F U L LT E X TThis article goes intoplenty of detail about thedeeper features of fulltext.www.phpfreaks.com/tutorials/129/O.php

MYSQL HELPIf you find any of thegeneral MySQL conceptstricky to understand, thistutorial may help.w w w . d e v s h e d . e o m / c / a /MySQL/Beginning-MySQL-Tutorial

RachelAndrew hasw r i t t e n

booksincludingThe CSSAnthology: 101 EssentialTips, Tricks and Hacks, andis managing director ofthe web developmentconsultancyedgeofmyseat.com.

EBmnaEProject files are in tTutorial Files folder.

0 0 © S e a r c h t h e a r t i c l e s O

(Disable' ficookies'' SiCSS* Qporms' j -'lmages' Oinformation* [ Miscellaneous* Ji utllne'' QReslzf

Search the ar t ic les

Keywords D r e a m w e a v e r S e a r c h !

Yo u r r e s u l t s

N e x t >

D r e a m w e a v e r T e s t T w o

m a previous article I discussed ways in which we could develop using Dreamweaver 4 and still

attain standards compliancy

W e b S t a n d a r d s a n d D r e a m w e a v e r

tn a previous article I discussed ways in which we could develop using Dreamweaver 4 and still

attain standards compliancy...

•The finished search pagedisplays a form. If keywordshave been entered, theseare l i s ted be low the fo rmCreate a search form

with MySQLRachel Andrew guides you through adding the fulltext feature to your site,complete with paged results and highlighted l<eywords

=1t h e II

Oour website users want to bea b l e t o s e a r c h t h e c o n t e n t o f

your website to find exactlywhat they're looking for, and

there are a variety of ways to implement asite-wide search engine. The simplest way, andone that many sites use, is a third-party servicesuch as Google or Web Side Story (betterknown under its prvious name of Atomz.com).The Web Side Story search is a great option for

many sites, because you can upload your owntemplate to the search results hosted on theirservers, making your results look less like youhave sent your user to a different site.

If you want to create your own searchengine, keeping your users on your own site,you'll need to implement a search script ofyour own. If your content - or part of it - isstored in a database such as MySQL, this canbe a relatively simple job. SQL enables you todo a keyword search on a database using theLIKE operator While this is useful for smallamounts of data, it's a fairly limited way to

search, especially when you have a large tableof data to search through. MySQL has asolution for this in the shape of fulltext

searching, which enables a more fully featuredsearch using tools built into MySQL.

Fulltext incorporates some great features: ithas a list of 'stop words', the common wordsthat you would want excluded from theresults; it can do Boolean searches, using ANDand OR; and it orders the results by relevance.A l l t h e s e f e a t u r e s w o u l d n e e d a d d i t i o n a l

scripting to do with a standard LIKE query.In this project, we'll look at how to

implement MySQL fulltext on a new or existingdatabase table. We'll then show you how tocreate a simple search page that enables usersto type in keywords and search the databasetable for these words using a fulltext query.

Once we've got a simple search page workingand displaying a list of articles, we will sendour keywords through to the article detailpage so they can be highlighted when the userreads the article the search has returned. Wewill also implement simple 'previous' and'next' paging so that users aren't swampedwith lots of results, but can instead leaf

through pages of feedback.We can only touch the surface of what

MySQL fulltext is able do here, but by the endof this tutorial, we'll have explained the main

concepts involved in creating a databasesearch page, and you should have created

something that can be used on your site. Withthe key principles understood, you can easilyexplore fulltext further - and give your visitorsan even better search experience on your site.

ii We'll show you how to create a simple searchpage that enables users to type in keywords ff

78 Novemlaer 2006 Practical webdesign

MySQL fulltext search Tutorial_ — _ — o

O Enable users to searchUse MySQL to get the search feature to return the results you want

OGET STARTEDIf you already have a database ofarticles or website page content, then youshould be able to follow this tutorial using

your own database. However, we'll be usinga sample database - available as an SQL scripto n t h e C D - t o d e m o n s t r a t e t h e f u l l t e x t

search. If you just want to follow along, createa table in your database called tbIArticles. Thistable will contain an articlelD, a field for thearticle title called articleTitle, and one for them a i n c o n t e n t c a l l e d a r t i c l e Te x t . Yo u c a n c r e a t e

this table using the following SQL.

CREATE TABLE tbIArticles (articlelD INT NOT NULL AUTOJNCREMENTPRIMARY KEYarticleTitle VARCHAR(255),articleText TEXT);

■ysql> create databose dbFuUtextExoMple;Qiiery OK, 1 row affected (8.00 sec)

Rysql> use dsfuUtextExai ip le ;Database changed•ysql> CREATE TABLE tbIArticles (

-> articlelD INT NOT NULL AUTO.INCREMENT PRINARY KEY,-> articleTitle VARCHAR(2S5),-> articleText TCXT);

Query OK, 0 rows affected (0.90 sec)

■JL

• Create a table in your sample database

OADD SOME DATAYo u ' l l n e e d s o m e d a t a t o s e a r c h

through, so add at least three rows of data toyour table. If you're using the SQL script fromthis issue's CD, you'll find some excerpts froma r t i c l e s i n s e r t e d i n t h a t t a b l e . Yo u w i l l n e e d t o

a d d a t l e a s t t h r e e r o w s o f d a t a f o r f u l l t e x t t o

work correctly.

O CREATE THE FULLTEXT INDEXYo u n e e d t o c r e a t e a f u l l t e x t i n d e x o n

the fields that you want to be included in yoursearch. To do this you should run the followingquery against your database.

A LT E R TA B L E t b I A r t i c l e s A D D F U L LT E X T

(articlTitle,articleText);

If you're using your own database table, youwill need to add the fields in your table that

you'd like the search to use, replacing'articleTitle,articleText' within the bracketso f t h e a b o v e s t a t e m e n t .

kTEST FULLTEXTBefore you set about creating your

web search form at all, you should check thatthe fulltext search is actually working byentering SQL at the command line. Use thequery that follows to perform that trialf u l l t e x t s e a r c h :

SELEa articlelD, articleTitle FROM tbIArticlesWHERE match(articleTitle, articleText)AGAINST ('accessibility');

The first part of this SQL statement is just a

simple SELECT of the fields that we would likethe search to retrieve. The second part is what

actually performs the fulltext search. After'match', we add the fields that we used tocreate the index, and in AGAINST is the searcht e r m w e ' v e c h o s e n .

Here, we've used the keyword 'accessibility'

simply as an example. If you search for a termthat you know appears in one of your samplearticles, you should get it returned as a resultof your search.

One thing to note here is that if a term

appears in more than 50 per cent of therecords it finds, the fulltext search assumes it'sa common word and won't return any resultsat a l l . The fu l l tex t search a lso has a l i s t o f

common 'stop words' for which it doesn'treturn results - such as 'the', 'because' and soon. Anyone searching for one of these wordswould most likely return the entire database.The third thing to note about the fulltextsearch is that, by default, it doesn't look forw o r d s t h a t a r e s h o r t e r t h a n f o u r c h a r a c t e r s i n

length, so 'cat' won't return results even ifthere are records in the database containingthis word. 'Cats', however, will return results ifthere are records containing it. When you onlyhave a few records, you might feel that this

•y*4l> SELECT «irt tc(«ICi, orttelaTUle FROM tbiA. o r t t c l e Te r t ) A G A I N S T { ' a c c e » t b t l i t y > j

n t e l e * m c r e M t c h ( o r t i c l « T i t l «

1 o r t i c l e l C i 1 o r t t c l a T U l e 1

1 1 1 V e b « t t « o c c a n i b i l t t y 1 n1 ^

1 r w t n 3 e t ( 6 . 0 6 s k )

aasiiJl

<htmI xmIns=" http://www.w3.org/1999x h t m l " >

< h e a d >

<meta ht tp-equiv="Content-Type"content="text/html; charset=ISO-8859-1" />< t i t l e > S e a r c h t h e a r t i c l e s < / t i t l e >

<link href="styles.css" rel="stylesheet"type="text/ess" />< / h e a d >

<body>< h 1 > S e a r c h t h e a r t i c l e s < / h 1 >

<form method="get" action="search.php"i d = " s e a r c h f o r m " >

<div><label for="keys">Keywords</label><input type="text" name="keys"id="keys" class="text'' /> <inputtype="submit" name=" btnSearch"v a l u e = " S e a r c h ! " c l a s s = " b t n ' ' / > < / d i v >

< / f o r m >

</body>< / h t m l >

e o e Search tK« art icles O

JCcXsftble' iijCookies' ftCSS' QForms' /Mtnaget' Oilnformaiion' il]MI»ce}l«neous' fc^OutlJne' ORfslze'

S e a r c h t h e a r t i c l e s

Keywords |

• Use a keyword you know is in your database

restricts the results too much, but fulltextsearch is designed to be efficient on largeamounts of data. If you have a limited amountof records, you might be better off creatinga sea rch func t i on based on L IKE ins tead o f a

f u l l t e x t s e a r c h .

©THE SIMPLE SEARCH FORMOnce you've checked that yourdatabase is definitely set up to use a fulltextindex, you can then create a form to searchyour database from the website. The codebelow creates a simple web page that containsa keyword search form. If you're implementingthis on an existing site, the part of the codethat you'll need is the form itself.

< !DOCTYPE html PUBLIC " - / /W3C/ /DTD XHTML

1.0 Strict//EN" "http://www.w3.org/TR/xhtml1DTD/xh tml 1 -s t r i c t .d td " >

The linked style sheet is on the CD, along withthis file, and it adds some style to the form.You can see above that you now have a simpleform with one text field for keywords and asubmit button. Save this page as search.php -

you can see the action of the form points tothe same page.

O SEARCH THE DATABASEThe form posts back onto the same

page; therefore the PHP, which checks forsearch results, also needs to be added to

search.php. At the top of search.php, add a setof PHP tags ('<?php ?>'), into which you canadd PHP code. First, add a few of the functionsthat you'll be using in your script. The first iscalled 'excerpt', and is a custom function to

get an excerpt from the returned articles - acertain number of words in length - displayedw i t h t h e r e s u l t s .

function excerpt($str, $limit) {$ a S t r = e x p l o d e C " , $ s t r ) ; '

• You wil l have createda simple search form as aweb page with a text fielcfor the keyword search ana s u b m i t b u t t o n

MUIC IWHITE SPACE ANDY O U R O O C T Y P EWhen adding PHP abovthe DOaVPE, put theclosing PHP tag rightup against the start oft h e D O a v P S . W h i t e

space will throw into'quirks mode', causingrendering differences.


Tutorial MySQL fulltext search

Snewstr =for($i=0; $i < Slimit; $i++) {

$newstr.=$aStr[$i]. "}return $newstr;

. 2 S f u n e t i . a n (i » a a t r - K x p - M t e t *

1 4 I n a v a t t » ' • »

I s l i * (

» ^ J a M w t r ;' : o

p d l > l t v « u u * ): ' - 2 <

> I f l 9 « t ? p c ( ) > i

i ' : s 1; i i f a - . * n w t M . e ( $▼« : » • > } t

' i « r a t u m

r 2 i• a 7 X \ m C T C n b t * l K » u : c • - . • / W J C / / 0 T D X i m c . « t r l e t / / W: i i S t h t n l ' w w v . v 3 . o r 9 / : 4 » » / « k t n ; * >.;}4 <t iMKC>

7 i t i M

C i a k / >

r l c t . d t d ^

• The pdb() function checks all search submissions for single quotes

function pdb($value){

if (get_nnagic_quotes_gpc()) {Svalue = stripslashes($value);

}if (!is_numeric{$value)) {

$value = . nnysqLreal_escape_string($value).

}return $value;

Quick tipU S E C U S T O M

F U N C T I O N S I N P H P

Creating customfunctions is a great wayto reuse your code. Ona large site, put thesefunctions in an 'Include',a n d a d d t h e ' i n c l u d e ' t o

each page using them.

}

Check to see if 'magic quotes' is turned on -this Is the PHP function that automaticallyescapes strings. If it is, remove the slashes soyou don't double-escape the string. Next,check to see If the value Is a numeric figure. Ifit Is, you don't need do anything else; If It isn't,however, escape any quotes that are there;and also wrap it in quotes, ready to be usedin an SQL string.

O DOING THE SEARCHWith these handy functions now

prepared, you can actually perform a searchon the database. First, you need to checkw h e t h e r o r n o t t h e f o r m h a s b e e n s u b m i t t e d .

If It hasn't, then this is a user coming to thepage for the first time to make a search on it,and not someone who has entered any textI n t o t h e f o r m . Yo u c a n t h e n c o n n e c t t o a n d

perform an SQL query on the database.

}

This function takes a string of text and anumber Indicating the amount of words toreturn. Use the PHP function 'explode' to getthe string into an array of words (splitting iton space). Next, loop through the array,creating a new string one word at a time, untilyou get to the number of words set In $limit.Then return this new string.

O PROTECT THE DATABASEThe second function you can add to

your file is to protect the database from singlequotes, which can be used to attack your site.

Ssearch = false;

Skeys = ";if(lsset($_GET['btnSearch'])) {

Skeys = $_GET['keys'];lf($keys != ") {

lf($db = ©mysqLconnectClocalhost","USERNAME", "PASSWORD")) {

mysql_select_db('dbFulltextExample');$sql = 'SELECT artlclelD, articleTltle,articleText FROM tblArticles WHERE

match(articleTitle, articleText) AGAINST(' . pdb($keys).Jresult = mysqLquery($sql);

Check to see If the form has been posted bylooking at whether the submit buttonbtnSearch Is In the $_GET array. If It is, you getthe keywords into a variable, $keys. If SkeysIsn't empty, connect to the database server,select the database and then create an SQL

string including the variable Skeys In theAGAINST clause. Here, use the pdbO functionalready created to ensure that the database Isprotected from any single quotes. Get theresult of this query into Sresult.

©USING THE DATAPut the returned data Into an array tomake it easier to work with. You can thenwork with this array to display the resultsrather than directly looping through theRecordset. You may also want to create somemessages to be displayed If no results werereturned, or If the user didn't enter anykeywords at all.

SaResults = arrayO;while ( Srow = mysqLfetch_array(Sresult)) {

SaResultsO = Srow;}if(slzeOf(SaResults) == 0) {

Smsg = 'There were no results foryour query, please try again';

}else {Ssearch = true;

}}

}e l se {Smsg = 'Please enter a search term';

}

Create the array SaResults, then loop throughthe Sresults putting each row Into this array.If the final array equals 0 rows, then you didn'tget any results, and you can add a message toSmsg, which will be displayed to the user.Otherwise, set Ssearch to true.

The final 'else' finishes off the sectionbecause It Is the 'else' from the Initial check todiscover whether the user had typed anythinginto the form field at all before submitting thesearch form. You can, of course, add a

message to remind the user to complete theform before submitting.

k DISPLAYING THE RESULTS

1^ You need to display the results to theuser of your website. You do this by showinga message explaining that there are no resultsto display, or by looping through the array anddisplaying the results on the web page. Youshould add the following PHP directly belowthe form In the main body of your document.

<?phpif (Isset(Smsg)) {

echo '<p><strong>'. Smsg . '</strong></p>';} elseif(Ssearch == true) {

lf(ls_array(SaResults)) {echo '<h2>Your results</h2>'. "\n";echo '<ol class=''results''>'.''\n";

foreach(SaResults as SItem) {e c h o ' < l i > < h 3 > < a h r e f =

''article.php?artlclelD=' .Sltem['articlelD'l. ' &keys='.urlencode(Skeys). '">' . htmlentities

(SltemCartlcleTitle'l). '</a></h3>';echo '<p>'. excerpt(Sitem['artlcleText'],

20). '... </p>';echo '</li>'. "Vn";

}echo 'c/ob'. 'Xn";

}

First, check to see If the variable Smsg Is set. Ifit is, you have something you need to display

G E T t > b t n S M C c h * n > <

- 9 ( Z T t ' M y i ' ] ;

I- ") {- « » y# q : , co a n « : tC l o e * : h o # f , "OSER H AW, "PAS3 WJR D " ) ) <

s t y s q l d b r u l i t * ) r t £ M K p . * ' ) /

J T .

- « e r a y ( ) /

w h l l « ( f r o w ■« c y a q l £ * t c h _ * r r * y ) {) - i t o u t

i f • > - O t {

$ « t * 9 - M * r « b o f o r y o u r q u « r y > p l « « 9 « t r y{

- t c t t c ;

}

i c l * * (

f s o I

•Allowing site visitors to enter single quotes in their searches can actually enable hackers to exploita security loophole, so it's important to use the pdb() function to protect the site

80 November 2(X)6 Practical webdesign

MySQL fulltext search Tutorial— o

0 O O S e a r c h t h e a i t i c i e s OXoisable' QyCookies' ^CSS' (^Forms' jj lmages* ^Information' j Miscellaneous' ij utllne* QReiia

Search the a r t i c l es

Keywords [Dreamweaver


p r « a m w e ? v e f Te « t Tw ^ >m a previous article I discussed ways in which we could develop using Dreamweaver 4 and stillattain standards compliancy...

V^eb Staoqards.'i.''3.Qr.C3T:^;£3ve^

m a previous article I discussed ways In which we could develop using Dreamweaver 4 and stillattain standards compliancy „

C S S a n d D r e a m w e a v e r

TTiis tutorial will walk through how to develop a layout In Dreamweaver MX that relies on anextemal stylesheet for...

• By adding heading and ordered list tags to your PHP code, you can create a style in which all yoursearch results are displayed. You can then tailor the design using a style sheet to alter the tags

to the user, and can echo this to the screen.Otherwise, check to see if $search is equal totrue and that you have some results. If you do,you can start to display them on the page.

You can display the results as an ordered listby creating a new list item for every row with$aResults and displaying the title. The title is alink to the page article.php, with the artidelDon the querystring as well as the variable

$keys. If you don't want to display the wholetext of each article at this point, call the

'excerpt' function created earlier, using thearticleText as the string and requesting 20w o r d s t o b e r e t u r n e d .

©HIGHLIGHTING KEYWORDSThe next task is to create a new pageto display the complete text of the returnedarticle. On this page the search keywords thatwere chosen are highlighted. Create a new

page named article.php which contains thec o d e t h a t f o l l o w s .

<?php$articlelD = $_GET['articlelD'];$keys = urldecode($_GET['keys'l);if($articlelD 1= " && is_numeric($articlelD)) {

if($db = @mysql_connect("localhost"," r o o t " , " " ) ) {

mysql_select_db('dbFulltextExample');$sql = 'SELECT articlelD, articleTitle,a r t i c l e Te x t F R O M t b I A r t i c l e s W H E R E

articlelD = '. $articlelD . ' LIMIT 1';$result = mysqLquery($sql);if( $row = mysqLfetch_array($re5ult)) {

$articleTitle = htmlentities($row['art icleTit le' ]);SarticleText = htmlentities($row['art ic leText ' ]) ;$aKeys = explodeC ',$keys);

for($i=0; $i<sizeOf($aKeys); $i++) {$articleText = preg_replace('/ ('.$aKeys[$i].')/i','<span class="kw">$1</span>$articleText);

}SarticleText = str_replace('<p></p>',

'<p> ' . p reg„ rep lace( '# \nW,'</p>$0<p>', SarticleText). '</p>');

}}? > < ! D O C T Y P E h t m l P U B L I C " - / / W 3 C / / D T D

XHTML 1.0 Strict//EN" "http://www.w3.org/TRxhtm 11 /DTD/xhtm 11 -strict.dtd" >

<html xmlns="ht tp: / /www.w3.org/1999x h t m r >

< h e a d >

<meta ht tp-equiv="Content-Type"content= "text/html; charset=ISO-8859-1" />

<title><?php echo $articleTitle; ?></title><link href="styles.css" rel="stylesheet"type="text/ess" />< / h e a d >

<body><h1><?php echo $articleTitle; ?></h1><?php echo SarticleText; ?></body>< / h t m l >

As you can see from the code above, we getthe articlelD and keys from the QueryString.We then query the database using thearticlelD and, if we get a result, write out thet i t l e t o a va r i ab le . The a r t i c l eTex t needs t o be

processed in order for the keywords to behighlighted on the web page containing ther e t u r n e d a r t i c l e ' s t e x t .

Next, split $keys into an array and then, foreach item in the array loop, replace the

keyword with the keyword wrapped in a spanelement with a class applied to it. Finally, youshould replace line breaks with paragraphtags, and in the body of the page you simplyecho ou t the t i t le and tex t . Th is i s a c lass w i th

a simple background colour that displays

against the highlight.

VIEW THE CONTENTSO F A N A R R AYWhen working witharrays, it's useful tov i e w t h e c o n t e n t s . I rPHP, you can print_r($arfayname) - thiswill print to the pag

O Styling results with CSSUse a list to display search results in an accessible way

In this tutorial, we've shown you how to use a listto mark up your search results. It's worth tryingto mark up your documents semantically, so thatit conveys the meaning of the data it's describing.For example, use a list for something that's a listof items rather than for visual effect, or useblockquote for a quote and not because you wantto indent something.

Once your content is marked up as it should be,it's still possible to get the visual effect you'relooking for with CSS. In this case, we want toremove the bu l l e t s f r om the l i s t and the l e f t - hand

margin, making the results look more like

paragraphs with headings above them. We canachieve this by using the following CSS, whichtargets the list with a class of 'results', as shownin the code be low.

ol.results {

margin:©;padding: 0;list-style:none;

}ol.results p {

margin: 0;padding: 0;

4 0 o i . r e 8 u . » t s 44 1 x ' 3 r g i n : 0 /4 2 p a d d i n g : 0 ;4 3 i i s t - s t y l e i n o rl e ?

4 4 }4 54 « o l . r e s u l t s p (4 7 m a r g i n : 0 ;4 8 p a d d l i n g ! 0 ;4 9 )SOS I o l . r e s u l t s l i {S 2 padd i ng-bo 11 Qoir , : l e n - . ;

53 }

• You should mark up your documents semantically, sothey convey the meaning of the data they're describing

}ol.results li {

padding-bot tom; lem;}

Practical webdesign N o v e m b e r 2 0 0 6 8 1b!r

Tutorial MySQL fuiltext search

W" ^ M o r e

i n f oU S I N G T H E

M Y S L Q M A N U A LAfter completing thistutorial, you shouldunderstand enought o b e a b l e t o u s e t h e

manual at mysql.com/d o c / r e f m a n / 5 . 0 / e n /

f u l l t e x t - s e a r c h . h t m l .

Yo u ' l l s e e t h a t t h e r e

a r e l o t s o f a d d i t i o n a l

ways in which to addm o r e a d v a n c e d s e a r c h

capabilities to your sites.

Add paging to resultsAvoid loading a single long list of resultsAs we've discussed, the fuiltext search is mosteffective when used to display results fromlarge databases. In such cases, a large numberof results might be returned from yourdatabase. You probably won't want all of thisinformation displayed on one page becauseyou could end up with a very long page, evenif you're only displaying an excerpt from anarticle. Most search engines and searchf a c i l i t i e s o n w e b s i t e s i n c l u d e s o m e k i n d o f

'paging', so that only a set number of resultsare displayed at one time, allowing the user tochoose whether to move on to the next pageof results. It's relatively easy to achieve thiseffect with MySQL, so we'll now show youhow to add this to your search script.

OSET 'RESULTS PER PAGE'First, you need to set a variable for thenumber of results that will appear on eachweb page. If you're using text data, then setthis number low: you're unlikely to have a lotof data to a page. In a real situation, you

might set this to 10, or even enable the user tochoose it themselves by selecting a value inthe form. The variable is added at the top ofthe page after the other variables - the newc o d e i s s h o w n i n b o l d .

Ssearch = false;$keys =Srpp = 2;

OGET THE RECORD NUMBERWe're going to show you how to addthe starting point to the querystring as thev a r i a b l e ' s t a r t ' . Yo u s h o u l d c h e c k t o s e e i f t h e

value is there. Again, new code is in bold:

if(isset($„GET['btnSearch'l)) {i f ( i sse t ($_GET[ ' s ta r t ' ] ) && i s_numer i c($_GETCstart ])) {

Sstar t = $^GET[ 's tar f ] ;}else {

Sstart = 0;}

If start is in the $_GET, then set Sstart to itsvalue. Otherwise, $start is 0, the first recordo f t h e r e s u l t s .

OGET THE TOTAL NUMBERBefore working out whether you needto show any additional pages with the results,

you need to get the total number of records int h e d a t a b a s e .

isql = 'SELECT COUNT(*) AS num.resultsFROM tbIArticles WHERE match(articleTitle,

articleText) AGAINST ('. pdb($keys).$result = mysqLquery($sql);

0 o e S e a r c h t h e a r t i c l e s

Xoisabie' Cookies' CSS* QForms' ; lmages» ©Information' l lMiscellaneous' fcJ^Outline'

Search the art ic les

Keywords D r e a m w e a v e r


N e x t >

D r e a m w e a v t r Te s t Tw o

m a previous article I discussed ways In which we could develop using Dreamweaver 4 andsill attain standards compliancy...

Web S tan t te rc te and Dreamweaver

In a previous artide I discussed ways In which we could develop using Dreamweaver 4 andstill attain standards compliancy...

•With a few straightforward changes to your base PHP code, you can create search results that aredivided into pages, enabling your visitors to browse the information more comfortably

$row = mysql_fetch_array($result);$num_results = $row['num_results'];

This section should go immediately afteryou've selected the database and before thequery that gets your results. We use COUNT(*)in order to count how many rows of resultswould be returned by this search if we weren't

limiting anything, and return it as the valuenum_results.

OGET A LIMITED SET OF DATAYou now have everything you need inorder to display only a small part of the dataand to give the user the ability to see the rest

by clicking on previous and next. You've alsogot the right number of results to display($rpp), the starting record (Sstart) and thetotal number of records ($num_results) to bereturned. Next, the search query needs to beslightly modified so that it returns recordsfrom the start row (Sstart) and returns thenumber you've already set in Srpp. Them o d i fi c a t i o n i s i n b o l d .

Ssql = 'SELECT articlelD, articleTitle,a r t i c l e Te x t F R O M t b I A r t i c l e s W H E R E

match(articleTitle, articleText) AGAINST (' .pdb($keys). ') LIMIT Sstart. . Srpp;

We've added a LIMIT clause to the SQL. Thismeans that records can be requested from acertain point, and also from a certain numberof records from that point - for example.

'LIMIT 0, 10' would give you the first 10 rows,whereas 'LIMIT 10, 10' would display yourecords 10 to 20 .

O PREVIOUS AND NEXT LINKSThe rest of the script is now the same,the only difference being that you'll need toadd a way of enabling the user to click frompage to page. Add this above the results.

echo '<div class= "pager

if(Sstart > 0) {Sprevstart = Sstart-Srpp;echo '<a href=''search.php?btnSearch=

Search&keys=' . Skeys.'&start='. Sprevstart. " '><Previous</a>';

}if(Snum_results > (Sstart+Srpp)) {

Snextstart = Sstart + Srpp;echo '<a href=''search.php?btnSearch=Search&keys='.Skeys . '&start=' .Snextstart. "'>Next ></a>';

)echo '</div>'. "Vi";

The previous link checks to see that Sstart isnot 0. If it isn't, a previous link is displayed;and the start point is set to the current startvalue, minus what's been set as the Srpp.Another link is only displayed on the page ifthe number of records returned is greater thanthe current Sstart plus Srpp. O


Visi t us onl ine now!

Vis i t us on l ine now!Want to find out what's going on at

the magazine? Want to chat withother readers, and share news and

views? Then visit our website today!You'll be able to read regular posts

from the Practical Web Design team,and our forums are a great place for

tips, advice, or just talking aboutyour latest designs.

Visit today!www.pwdmag.co.uk

P r a c t i c a l w e b d e s i g n N o v e m b e r 2 0 0 6 8 3

>Thecolours ofDiscover the ultimate way toimplement colour on your websitePlus Your guide to colour |and accessibility

X

X < ^

! \ \ \develop dkr ov<^rdp<iiQn

n e t★By the,power of

Ya h o o !

!■ I

/develop/discover/design

new issue on sale now\ . > T h e\ ' ,1 colours of

>; \ ■ web design1 X _ \

. ; x

i m a t eu r c e

Essential reference and independent advice, includingtests of search optimisation tools and the latest books

- o

CD X- 0

O T T

oO 3 0

7 C av : 7 3r ) m

i ^ >

i ^■ CO i rT :1 o ^ m

>1 C C '^ ■ <

mo fl 7 3n 'l A

0 0

( s

1 • i

00sF

0r -

TESTS YOU CANR E A L L Y T R U S TThese awards are given to thebest software and sites that wef e a t u r e e a c h m o n t h .

★ *★★★ * * * * *

elcome to Practical Web Design'syy Ultinnate Resource section, pacl<ed full

of useful reference materials, designinspiration and expert reviews.

Search engine optimisation is something thatshould matter to every web designer. It helpsyou make sure that people wanting informationon a relevant subject can find your pages. Butunderstanding SEO is another matter. We testfour tools that can help you submit the site inthe right way to get your pages placed higher.Find out which packages do the best job onpage 86. We've also got an extended hostingguide, plus bookmarks i-,,.and a jargon guide.

R i c h a r d H i lE d i t o r

P R I C I N GI N F O R M A T I O NWe provide you with the most

up to date information on all ofthe sites, software and servicesthat we feature in Practical Web

Design magazine.

USING THESCORING SYSTEM*★★★* when we give it five, it rocks!

It's good, but could be better* * * * * M i d d l e o f t h e r o a d

* * * * * S u b s t a n d a r d f a r e

* * * * * S T I N K E R ! A v o i d a t a l l c o s t s

This issue86 Search toolsFour ways to get your site placed higherin search engines

90 Designer guidesBooks for blog-builders, Dreamweaverowners and ambitious developers

92 Site EnvyShowcased this issue; Crazy Egg, a funkycharity and the Dixie Chicks

98 On your CDTwo full programs, an hour of videotraining, tutorial files and more

102 BookmarksEssential links to help you enhance yoursite-building and design skills

108 HostingOur newly extended guide lists dozensof hosts and helps you pick the right one

112 GlossaryAll the key terms of web buildingexplained in a handy reference format


Software Search optimisation

D e t a i l s

Windows 2000/XP,Pentium 4 or equivalent,256MB RAM

P u b l i s h e rTrendMetr ixTelephone+1 877 867 1030 (Canada)W e b s i t e

w w w. t r e n d m x . c o m

SEO Studio Lite 2.0Improve your site's ranking witli this free version of tlie SEO tool

Oearch engines have a loresurrounding them that may aswell be magic, as far as the

average web designer isconcerned. Getting to know SEO Studio will

help to remedy that situation, and, at thesame time, perhaps help you to promote yoursite closer to that golden first page.

SEO Studio Lite, while not the magic bulletone might hope for, provides an excellent

nursery slope for those wishing to climb thesearch rankings mountain. Understandingthe importance of keywords, automating sitesubmissions and scanning the competition alladd to your search ranking arsenal.

The inner workings of Google's indexingsystem is the subject of numerous lawsuits, anduntil and unless they're disclosed, it's safe tosay that getting your site highly ranked ismore of an art than a science. Of course, if

Google's secrets were revealed there wouldsoon be a simple, push-button solution that

everyone would use - and if you think aboutit, that wouldn't benefit anyone.

P O P U L A R I T Y C O N T E S TThat leaves the art side of things to tinkerwith. Obviously search engines use a few basictools when compiling rankings - these include

keywords, meta tags, link popularity and directsubmissions. SEO Studio helps you groom eachof these to make your site search-friendly. Ata basic level, the best way to ensure your site

gives Google a good account of itself is bymaking it interesting, so that lots of peoplevisit it, search for it and link to it. However,there's a certain amount of chicken and egg

i S . - * 5 3

M h o t T M n Y n l M i M

£jzatte/utltyarii* - - • • ■ ■«

A ■ ■ - ■■ • ^ ■ ■

-J S

•The biggest boost your site can get is from independent links, as this is how search engines determinethe popularity of your site. Running a link campaign could be traumatic without this management module

here, because a good site is often determinedby its popularity, so there's no need to feel likea cheat for trying to boost your ratings.

SEO Studio offers a nice, tabbed interface,

starting with the general details of your site:URL, owner, descriptions and so on. Then itmoves on to submissions, keyword analysis andrankings. As you work your way through thesetabs, you begin to get some idea of exactlyhow your pages are being ranked.

You should automatically submit your siteto as many engines as Studio will allow. It'sworth noting that the system doesn't seem tobe exhaustive, so you might want to make useof the manual submission pane too. Once you

come to the keyword analysis, look at the help

files, because the keyword suggestion toolsyou'll find there are useful little apps.

webdesign verdictSEO Studio gives you a feel for thebasics of how search engines work,a n d h o w t o a t t r a c t t h e i r a t t e n t i o n

R A T I N G SF E A T U R E SP E R F O R M A N C EEASE OF USEVA L U E F O R M O N E YT O T A L

★ * *

Key features1 % M I k n T• J 2

S m C o A m * S M S u b M M l c n M t n g U 4 « K i * » S c M A r .

J :

J

1 i ; : f -J :

J

mJ

1 T h w I t o M s x

A t i a u i e O ( i * y «

X A t w c t o - U K F A L H ) iL M t t w n

Vsavct tX SUCCESa 6 - 1 0 W M k *

h|M«nuil'-|,bniiiiil fl »tM«i9>| RwMqRmAs | A

ilMWMIHtM r

OTHE DETAILSThere's a series of details to consider for eachsite you're optimising, including meta keywords,

meta descriptions and content outline. The first sectionof SEO Studio is dedicated to capturing this data, forcingyou to think it through rather than just bash it out.

O FOLLOW UPHaving selected the engines you wish to submitto, hit the Play button. Once SEO Studio has

approached your chosen engines, it'll return a summaryof the results. It's up to you to follow up confirmatione m a i l s a n d / o r m o v e o n t o m a n u a l s u b m i s s i o n s .

©PERFORMANCEUnderstanding your site's performance is keyto improving it, so getting an idea of how your

site performs when your favourite search engines arefaced with searches involving your keywords is essential.SEO Studio gives you basic analysis tools for doing this.


Search optimisation Softwareo

D e t a i l s

Windows 2000/XRPentium 4 or equivalent,64MB RAM

P u b l i s h e rTrell ianTelephone+61 3 9589 7946(Australia)W e b s i t ewww.subn t i i two l f . ne t

Trellian SubmitWolf 7.0A fully automated search optimisation and site submission package

©ubmitWolf submits your siteto hundreds of search enginesand linl( sites, all with justa few mouse clicks and minimal

form-filling. But while it sounds like a winningsolution, the benefits of automated submissionare bes t descr ibed as d i fficu l t to assess .

SubmitWolf exploits the knowledge gapbetween web developers and search engines.Unless the search engines have indexed your

site, or are aware of your site through linksand submissions, you won't appear in the

rankings. The simplest way to ensure thatyou're known is to submit directly, andS u b m i t W o l f d o e s t h a t o n a n i n d u s t r i a l s c a l e .

The major search engines go to greatlengths to ensure that automated submissionsare weeded out. They want genuinely cared-for content - that means keeping submissionsmanual, and those who repeatedly auto-submit may be labelled as spam. Thankfully,Trellian has prevented multiple submission

problems, so there's a genuine possibility thatyour ranking will improve, particularly onsome of the more obscure engines, as thesedon't have the cataloguing resources thatGoogle and others deploy. To that end,SubmitWolf's broad-spectrum assault on theweb's indexing systems is comprehensive, andwill save you lots of time if you were planningto cover the hundreds of engines manually.

S L O W B U R N E R

This process is far from immediate, though.It will take a lot of time for your ranking toimprove if the only thing working in yourfavour is search engine submissions. In fact,

-Select Categorv"

a D MediaM u s i c

B C3 Paranoimal□ E S P□

□

r ■■ D;• ■■ □

o

□

□

□

Fairy AppteciationGhos ts

Kvptozoologi)MagikParapsychologySpectrologyT elekinesis

U F O s

l i -

J

1 ^

Selected:

Arts and humanities/Cultural EventsArts and humanities/PhotographyArts and humanitiesA'isual Arts

Computing/M ultimediaComputing/'S oftwareScience and Technology^'BiotechnologyParanormayT elekinesis

P a t a n o r m a l / U F O s

J J 2 lNote: Ensure that the most important categoryis at the TOP of the list.

Help Cance l < B a c k ISiext)

•After sorting out keywords. It's important to ensure that search engines have your site correctlycategorised. Entertainment or serious science? You don't want wires getting crossed at this level

it may never happen. The best search enginesaccount for bogus links and don't acceptautomated site submissions, so a lot of yourwork will have to be repeated manually, orwill involve duplicating the work of the searchs i t e ' s o w n r o b o t a v a t a r s .

The ultimate choice is one of pragmatism.Do you have the confidence to allow your siteto build the organic way, in tandem with botslike Yahoo's new 'slurp', or are you more beltand braces? Do you let things run their naturalcourse, but double up with an automation

package? If you fall into the last category, youcould do worse than SubmitWolf. If nothingelse, its wizard-based system makes the process

child's play, and the package's tight integrationw i t h Tr e l l i a n ' s S E O To o l k i t m a k e s i t a

potentially robust offering.

vyebd^ignverdictIf you're going to take the automatedsubmission route, SubmitWolf enablesyou to cover all the bases

R A T I N G SF E A T U R E S ★★★ *P E R F O R M A N C E ★★★E A S E O F U S E ★★★VA L U E F O R M O N E Y

Key features

\ Note: Place the m vnpoctent $eflfch teiff» ot keywords RRST^

I

••• '-V 1 Cancal | ■ < e « k

O KEYWORDSEvery new project starts with keywords. Theseform the basis of the sales pitch SubmitWolf

uses to convince search engines your site is what it saysit is. Choose words that appear in your text repeatedly,rather than ones that just describe your subject.

©MORE OPTIONSAlthough the demo version of SubmitWolfonly gives access to a handful of search engines,

the full version is comprehensive to the point of beingbewildering. Engines are listed up by country, type andfeatures, enabling you to take a targeted approach.

O SUBMIT AND VERIFYOnce you've answered all the wizard's questionsabout your site, your work is pretty much done.

Hit the Submit button and SubmitWolf will target yourchosen engines. The final task will come when thoseengines that require email verification contact you.


Software Search optimisation

D e t a i l sC Q S l$59 (£37)

Windows 98/ME/2000/XP,IGHz Pentium orequivalent, 512 MB RAMo r

Mac OS X 10.3Panther/10.4 Tiger, IGHzPowerPC G4 or equivalent,512MB RAM

Java RuntimeEnvironment 1.4

m s E s m m mP u b l i s h e rCaphyonTelephone+49 22 13 1088 20(Germany)W e b s i t ew w w. a d v a n c e d

webranking.com

Advanced Web Ranking 4.7.1A powerful and flexible website performance analysis tool

Odvanced Web Ranking is a toolfor dedicated optimisers. If evera package deserved the slogan"it does exactly wliat it says on

the tin", this is it. Keyword breakdowns, site

comparisons, scanning for competition - andall with the ability to graph and print reports -make this a website popularity analysis tool

par excellence.Although AWR approaches its task from a

huge number of angles, it manages to presentinformation in a way that's clear anduncluttered. If you're trying to monitor andmaintain a significant number of sites, this toolwill help you get an accurate picture of themfrom the search engine's perspective.

P R O G R E S SGiven that the indexing of web pages is an

ongoing and evolving process, the job ofoptimisation is not a fix-once-and-leavesituation - not if you want a consistently goodranking, anyway. That means you must keepan eye on how your sites perform over time.AWR's analysis tools, from keyword testing to'top site' profiling, produce a picture thatbuilds in the element of time. Are your newmeasures working? When were your peaks,

troughs and fallow periods? The answers tothese questions become obvious on a graph.

All in all, it's a neat, fast and stable package.When it comes to submitting your site to the

e O B

.▶ - J i m 5 » a # e ©f t m t r fi w l U w f c K « y w o » d U i *

i iMy• aIU.

^ e i t p o M KM b M M

▶ i♦ f M i i l W

»ICcce«i

C C M n i

O v e w w V t i t M r t v • ! > «

Cf&GFILE'

t D i m K D m u l t p l ^ l e t a n g i e a n J ) « n g i n t » M c i

Pricing

w f w l M a n i i M m u N t p t * t M d m g M m » ( M t M n• a n d n t c v w t r M u l t o

19 lor. OogpM SMRti iMom you

Submission T^sTteM wtw tMir Web •bdresM to OegpU* are inducM In tw Oogprie SMVcti Incin - (MranlMd. r* important to M fht

tor tw (MQM witwt yow Wet) M».

( A

•Advanced Web Ranking is an analysis tool pure and simple. Its submissions section is useful though, asit gives links to the submission pages of the engines in its database, and tips for getting the best results

various engines, AWR has a list of hundreds,but keeps things hands-on. The submittingpane simply supplies you with sound adviceon how to get the best out of a submittal, andthe link so you can do it manually: this is theroute that the engines would choose.

Although AWR is a great analysis tool,when it comes to actually improving yourrankings, it contents itself with some goodadvice and a few simple assistants. The good

advice could be summed up as 'thete atereal shortcuts', while the assistants focus on

generat ing keywords.The main thing that's going to make

your websites popular is the strength oftheir content. If that's buoyant enough, thenyour graphs will all be tending in the rightdirection. If it's not, then no amount of

ferreting around with keyword efficiencyis going to help you turn things around.

Advanced Web Ranicing interfaceAll the tools you need for fast ranking analysis

T A I L O R I N GAWR has such a wide range of searchengines available to choose from thatno matter what your line of businessis, a tailored analysis is easy to set up.

U P D A T E SUpdates, set in train by a singleclick, take each engine and performs i m u l a t e d u s e r s e a r c h e s w i t h e a c h o f

your keywords, returning real-worlddata on search performance.

M U L T I P L E D O M A I N SMultiple domains can be considered fromthe same interface, reducing the effortrequired to chase data on all of the sitesyou control.

T A B B E DI N T E R F A C EA W R ' s t a b b e dinterface givesyou rapid accesst o a l l t h e m a i nm o d u l e s a n d

analysis tools, sothat comparisonb e t w e e n v i e w scan be relativelyr e a l - t i m e .

S E A R C H T E R M SYou can use as many searchterms as you choose, but it'sadvisable to keep within thelimits acceptable to search-bots.

G R A P H D A T AData, once collected, becomes partof the ongoing analysis of your site'sperformance. Hopefully you'l l beable to graph this as a smoothupward curve.

• Leading engines, such as MSN, are designed tocounter automation - a manual approach is better

webdesign verdictMinimal aid for actually submittingyour site, but a great tool forboosting your rank over time

R A T I N G SF E AT U R E SP E R F O R M A N C EEASE OF USEVA L U E F O R M O N E YT O T A L

★ * * *

* ★ *


Search optimisation Softwareo

D e t a i l s

Web browser

B E H B lP u b l i s h e rl & lTelephone0 8 7 0 2 4 1 1 2 4 7

W e b s i t ew w w. l a n d l . c o . u k

1 &1 Simple SEOThis in-house SEO package sets a high benchmark for optimisation solutions

Ohe great thing about l&Vsin-built SEO solution is the veryfact that it's built-in. Its workingsare transparent, easy to follow

and effective at ensuring your site is as search-

engine-friendly as possible. 1&1 does theactual submitting for you. Simple SEO appliesitself to the business of ensuring that your siteis easy for automated search functions to makesense of, and it does a great job of this.

Obviously, you need to be a 1&1 customer,but, even if you're not, the rest of this reviewis worth reading. This is because thisapplication has just one goal - to improve thesearch results for l&l customers. It's already

part of the package, so the process is freed ofthe need to justify itself. Consequently, whatyou're faced with is a series of simpleinterfaces and diagnostic tests designed toensure that your keywords are well chosen,

your meta tags are correctly applied and yourHTML conforms with search-bot expectations.

All you have to do is skip through the list oftests and solutions, correcting links and addingkeywords as you go. Each test gives you instantfeedback, and suggestions on how to fix yourresults if necessary. For example, the EnginesGuidelines test makes sure you haven'tproduced a site that breaks a set of establishedrules, for example by excessive keywording.

THE BEST POLICY

Interestingly, one of the dialogues points outthat "search engines do not like to be fooled".It goes on to recommend that you do not "tryto manipulate your listings through sneakymethods. Provide useful, relevant content, and

•Although only those of you with 1&1 hostings will find Simple SEO useful, the method the systemadopts is worth considering for its sensible approach to the thorny Issue of search engine optimisation

you will never have to worry about searchengine guideline violations." This is soundadvice. Beyond ensuring that your site doesn'tobstruct the process of indexing being carriedout by the Googles and Yahoos of this world,there's little you can do to jump the queue.

That said, the process of ensuring that yoursites are easy to index, that every page has afair chance of returning a result and thatvisitors get what they're expecting is not themost straightforward thing in the world. If itwere, Google stock wouldn't be so highlyvalued. The message l&l has picked up on isexactly that. If you can help the search enginesprovide the web with a reliable service, all the

better, but nobody is going to thank youif your site turns up as a top search for

something you really aren't very good at.

webdesignverdiaAlthough only news to current orpotential 1&1 clients, this solutionshows how simple SEO can be

R A T I N G SF E AT U R E SP E R F O R M A N C EEASE OF USEVA L U E F O R M O N E Y

. T O TA L

★ ★ ★ ★ ★★ ★ ★ ★★ ★ ★ ★ *

Key features

O KEYWORDSThe first task is entering your keywords. Fromthis simple dialogue box you can choose all the

words and phrases users might enter when searching foryour site. At the bottom of this window (not visible here)is a list of search engines from which you can choose.

©META TAGSMeta tag creation is also automated, using thekeywords you supplied. The good thing is that,

once created, you can check the efficiency of your tagswith a click. The wizard warns you of any obviousproblems before you include the tags in your HTML.

©COMPATIBILITYWith all your details entered or generated,you'll want to check your site's structure to

ensure that this isn't going to repel inquisitive searchbots. Again, this task takes just a single button click, andproduces a brief report of compatibility.


Reviews Design guides

Design guidesIP Chapters of each book

are in the DesignGuides folder

Build your a blog, prepare your sitefor bigger audiences and run a PHP

J system through Dreamweaver

Blog Design SolutionsAuthor Budd, CoMison, David et a lP u b l i s h e r F r i e n d s o f E d

Price £28 Ebook www.apress.com $20 (£13)Beyond the simplest blogging solutions, such as Blogger.com, lie do-it-yourself blog systems that give you controland tie the blog to your domain. These systems can be

complex to implement, which is where this title comes in.Early chapters take you through the mechanics of a blog

and show you how set up a test system on your own

computer - whether it's running Windows or Mac OS X -so you can iron out kinks before taking your blog public.Subsequent chapters focus on four major systems: MovableType, WordPress, Textpattern and ExpressionEngine,

Inevitably, some parts aren't relevant to your blog, butthe individual blog chapters are thorough and examinesmall, but important, details. For the brave, there's alsoa chapter on building your own blog system in PHP.

Building Scalable Web SitesA u t h o r C a t H e n d e r s o n

Pub l i sher O 'Re i l l yP r i c e £ 2 9

It can only take a link from Digg.com or Slashdot to turnyour sleepy little website into the next overnight sensation.So how do you prepare for a fast-growing audience? Here,Flickr engineering manager Cal Henderson attempts toprovide some answers.

Building Scalable Web Sites assumes you already haveexperience in building database-driven websites, andfocuses instead on the steps you should be taking as yoursite grows. Topics include software architecture design,catering for a global audience and planning your hosting.It's a piecemeal selection, so some chapters may not appealto you - but the book addresses an important issue andhas plenty of concrete suggestions to get you thinking.

F o u n d a t i o n P H P f o r D r e a m w e a v e r 8A u t h o r D a v i d P o w e r s

P u b l i s h e r F r i e n d s o f E d

P r i c e £ 2 8

In Foundation PHP, David Powers takes a comprehensivelook at installing and running a database-driven site viaDreamweaver, which offers several tools designed tomake this complex task easier. Sensibly, David includeschapters on setting up your PHP system, so that you don'tneed to be too familiar with the relevant technologiesbefore you start the book.

Foundation PHP is a hands-on guide, encouraging youto follow the steps provided rather than learning dryconcepts, and makes it clear why Dreamweaver has becomea potent aide for web database managers.

CD

Ooo

( / )C )

i nO iC

o

t / »

w

S3*

QfQC/5O

c r

§rt)a

• V

" 0

O

>

m

0 0

0


P o d c a s t

Get your freepodcast now!

In the Practical Web Design podcast -freely available online every two weeks -we provide news, site reviews, cool tips

and features. And you can subscribefor free - today!

The easiest way to subscribe is to simplysearch for'web design'in the Podcasts sectionof iTunes. If you don't have iTunes, then visit us

at www.pwdmag.co.uk and go toour Podcast sect ion.

S u b s c r i b e v i a i Tu n e s o r v i s i twww.pwdmag .co .uk


Site Envy

Submit a site!

@Have you seen a site that deserves ourattention? Have you found a perfectpage? If you have, then we want to

hear about it, and we want to hear about it now!Just pop the URL in an email, and send it to:

pwdedi tor@futurenet .co.ukShowcased this issue: a web analysis firm,a funky charity and the Dixie Chicks...

Crazy Eggw w w . c r a z y e g g . c o mC r e a t e d i n - h o u s e

A service offering online website analysistools, Crazy Egg has already attractedmany screen column inches of coverage.In common with many next-generationfirms. Crazy Egg has worked hard tosimplify its website's message. Apromotion-minded home page explainswhat's actually quite a complex

proposition in a few lines of text and athree-step graphic.

The graphic offers some interestingtouches. The plus sign in each image is anindication that you can click on the imageto enlarge it. The full-size image appearsas an overlay greying out the home pagebeneath to focus your attention. Afamiliar Windows-style Close button is

provided in the top-right corner To pointout that you can actually close the image

by clicking anywhere ignores the factthat the provision of a button means thevisitor is never confused about what theyshould be doing next.

HOME ! 0£M0 TESTIMONIALS | PRICING & SIGNUP-

SIGN UP NOW FOR FRK! You're just a few

minutes owoy from yflbnproving your stte WO

IBSSSi

Crazy Egg makes it easy to; ■■S View More Tesfimoniols *

m m m a i s m

web-

STAR SITE★★★★★

SnilT IMmOVIHB irouR web site how

In true Web 2.0 style, Crazy Egg offers powerful online tools through a website designed to make them feel as simple as possible

•Thumbnail previews enlarge and take over the page, with Closebuttons helping you to understand how to return to the home page

•The blog basically talks about how great Crazy Egg is, but stillprovides a human side to another otherwise faceless organisation

9 2 N o v e m b e r 2 0 0 6 Practical ••bdesign

Site Envyo

^ Giant \N O f t H W * # S T i n * . / •

PmCsintevytiial?SpolaarKJfit 98 spedeia9» na tvolxi itameAosfych stiMc a

markeSng. Na§in cflam p vytwft pro Vfe JpifikDMcij pfaaart^2ho(>)OOBnim Vtaianych pujeifttckG. Natenadteni adbuhoiBlfrdadenoati

W e d ™ d » v « e * w m e W t y * i l t o f ^ r w i f i l i e i i r w i i ^ w i P i ^ ^ p p w ^ p n ^ * U > * o i »f O r r ' . * - x w p a t w t n a w t t k - V . - W . d M « r . ' ' / i t

• Press the Refresh button to see more ofGiant's direct style. There are three looks intotal, although you soon crave a switcher tocontrol moving from one to the next

•The agency displays its work in a lightbox-style formation. Crucially, many of thesamples are working sites with links

G i a n tw w w. g i a n t . c zC r e a t e d i n - h o u s e

You don't have to speak fluent Czech to

figure out that this is a web agencypromo site - and if you weren't sure, theodd splash of English words such as

'marketing' makes It clear A simplestructure takes you straight to examplesof Giant's work, many of which areworking sites. The bold design featuresunashamedly contemporary flourishes.

The best fun, though, is reserved forwhen you click your browser's Refreshbutton. Giant has three randomly loading

styles, with a punchy photographicbackdrop dictating the overall colourscheme. Both are so attractive that youwish more were available. A style

• Giant's online portfolio features dramatic backgrounds, and some powerful and immediate switcher would enable you to controltypography. Here's an agency that means business when it comes to web design your experience better, too.

Peapod Foundation As the name hints, the Peapod Foundation is a

charity co-founded by the Black Eyed Peas' will.1.am.The website reflects the organisation's fashionableconnections with a suitably modern look - but neverat the expense of the content doing its job. Case inpoint: a Flash banner that appears in the home page.

complete with a video of the Black Eyed Peas inconcert. But because it's the home page, the sound isturned off, so your browsing isn't disrupted by thenoise. It's only if you specifically opt to watch thevideo that the window gets larger and the volumegets pumped up.

www.peapodfoundat ion.orgCreated by Brothers In Art(www.brothersinart.com)

r M M t N M M I t M t t « M M K

•The opt-in nature of the music videos isan approach that less considerate designersshould learn a lesson from: ask your visitorsif they want the sound to play

•The site creators are never tempted toshow off: all the writing and presentation isplain, factual and sincere

The peapod Foundationon a Global mission

• Funky graphics tiein with the PeapodFoundation's celebrityconnections, but thisis a website with an o - n o n s e n s e t o n e

miLLER GEHUIHE DRAFT PRESEKTS THE PEAPODBENEFIT COnCERTTHE PEAPOD FOUNDATION'S GIFT TO THE PEOPLE OFSOUTH AFRICA FEATURING THE BLACK EYED PEAS ANDF R I E N D S

M L L E R a e N i « 4 E ( ^ W T P R E S E N T S£4 PEAPOD aSilEFrr CONCERT-THE

A P f t P E A P O O F O O N O A T I O f r S Q F T T O T H E3 0 M P E O n . E O P e o u m A F R I C A t ^ E A T I J R f M

THE SLACK EYED PEAS AWD FRIENOSA ConcMTi tor aoutt Mrtu SiMliiyM i y a a a O O e j o h m M i v s d i K l u r t .J o h w v w M k r g . S o u V i A M M C O SM 4 0 G L £ S . C A 4 J O H A N N E a a O R a , 8 A -A ( x 4 a « s o M - m t f . .

a j C K E Y E D P E A S T O D E S I G N R O C K^ STAR SUTTE FOR HAAO ROCK HOTB.

M A R S A N D t E Q Oa O M C O N O O - S U t T E T O B E D O N A T E D T O

B A N D ' S C H A A f T Y. n c P E A I O OFOUNDATION Sm Omgo ~ tJ^nh 20, 20X■ HtranockHmSanOigob r m t e d o o n d o ^ n M a n n o u r t o « l t o d a y


Site Envy

We CreateThingswecrea te th ings .comCreated by Colin Cameronand David Blanchet

Here's a site that takes you all the wayaround the block as you try to figure outwhat it's there for. The name certainly

suggests creativity, as does the smartdesign. But what's that definition of'synergy' all about? It smacks of anagency feeling the need to engage insome marketing-speak.

Next comes the personal touch:

parallel blogs from two designers, whichsuggest this is a design partnership. Butfinally, and probably below the thresholdof your browser window, comes the

explanation: "We are not a company, weare not an organisation, we just create

things," As attractive as the site is - andwe simply love the Logopond project to

catalogue corporate and other logos -We Create Things could benefit from alittle more straight talking.

we create things c o n t a c t r s s

Synergy 'he interaction of two or nnore agt?nts or forces so that theircoiTibtned effect is greatei than the sum of their individual effects

Colin Cameron \t a 23 year old web designerfrom British Columbia, Canada.

Having been mistaken for a cofFec sh<^ mort than one* tnM» life. Covin's mind (s comumiy brewing writh new ideasand Imaginative ways to go about creating them> Figunngout eariy that setf educAton better than teaching hit'Instructor^', he set off to find and tM>rk with like mindedpeople over the last 7 years. Spending mo%X of his free timeconjuring up idcAS to help the communtty at Urge, Cotin

' ,. has n Hyi r to keytxMrd and mouse to pad.

David BlarKhet is a 29 year old web designerfrom New Orleans, LA, USA.

When he's not sitting in front of his computer designing,he's usuaiiy sitting in front of his computer developing. Aproduct of more than 8 yvars of the design industry, Davidhas learned that simpter Is often better. He strives, in hiswork, to create reusable, simple and creative designs andprograms. Ah*avs strivirtg to learn more about his craft and

to improve his own work, David is ahwys burted insome onl ine documentat ion or web annual.

• It may look like an agency site, but We Create Things is more like a shop window and blog portal to showcase two designers

Pier, incw w w. p i e r i n c . c o mC r e a t e d i n - h o u s e

From the image here, you'd think Pier, Inc had a sober, if dassy, CSS design for its site -but this Boston agency's showcase is all Flash. Load the home page and you'll see thestructure unfold before you, elements coming in from the edges and slotting into place.It's an attention-grabbing tactic, although thankfully not a time-consuming one. Itdoesn't particularly aid your understanding of the navigation system, however - ifanything, watching the page appear is a little disorienting at first.

It becomes clear that the interface unfolds in the same way on every page, but thereare great details to learn from. There's an Intelligent visit history system, while overlaysappear over images to prompt you to play video clips.

PIER ctelivert ttrotvgic cootuttint. imeractivs d«sign,a n d a p p l i c a t i o n e l p w u o p m e n t i w r v M i e s t o c h a n g i n g

companfes vwor ldwid«.

PIER

• It looks like a well-crafted CSS site, but Pier, Inc is 100 per cent Flash. Each new page loadsby sliding the various page components into the browser's view

•A playful video welcomes you to Jesper Bentzen's portfolio site, with a pleasantly accessiblewelcome and news messages below the main image

Anova Designw w w. a n o v a d e s i g n . c o mCreated by Jesper Bentzen

This portfolio site for interactive designer Jesper Bentzen grabs your attention from thestart, with a video showing an alien device styled after the site logo bursting throughthe floor. This Flash production has more restrained tricks up its sleeve as well, though.

It soon becomes clear that the design's muted greys are used to focus your attentionon whichever interface element you're using: browse down a portfolio list to see eachoption appear in colour as your mouse moves over it. Jesper has also provided briefnotes for context, making it plain which pieces are published and which are concepts.An Experiments section gives him a playground to try out ideas and show the results.

9 4 N o v e m b e r 2 0 0 6 Practical vei^design

Site Envy

Dix ie Ch icks : Death From Abovew w w. d i x i e c h i c k s . c o m / u n d e r g r o u n dCreated by Wefail (www.wefail.com)

You'll have to forgive this Dixie Chicks fan site

blasting music at you the second you arrive, becausethere's much more on offer here. A deliberately raw

design greets you with a basic blog, a navigationarea that lool<s too small to use. Move your mouseover it and it grows to accomnnodate you.

It's when you click one of the highlighted sectionnames that the presentation takes a different tack.The blog is revealed to be a PDA in the room: thecamera keeps zooming out until you've left theh o u s e a n d a r e a i r b o r n e t o w a r d s t h e s e l e c t e d n e w

area. Explore this multimedia playground to findmore treats, and enjoy.

•The Flash-based control system offers an imaginative 'Death From Above starts unpromisingly with a crudely rendered blog: you soon figure out that the rawness is intentional and thatfly-through to whisk you from one section to the other there's a whole multimedia world to explore. It's like the old days of CD-ROM multimedia interfaces

People OfO u r T i m ew w w . p e o p l e o f o u r t i m e . c o mC r e a t e d i n - h o u s e

H O M E O U K A I M l A K h M Q C O N T A C T U S

PhotoChallenge

Th» photo ch«Htng«h a s b t m n m o v « d

to th« forum..

First 1.000 M»mb«rs

• People Of Our Time has anattractive look and an intriguingpurpose: to build a collection ofthoughts from around the world

With a classy illustrated banner and amuted sage colour scheme punctuatedwith flashes of pink, it's obvious that

People Of Our Time is a site with goodtaste. It's essentially a time capsule, usinga simple questionnaire to record the

thoughts of people of all backgroundsand ages. They may be profound or theymay be about how cool Johnny Depp Is,but they'll reflect what people are

thinking right now.The home page looks appealing, but

Isn't perfect: in particular, the search

facility should be higher so that it's morelikely to be Immediately visible In mostb r o w s e r w i n d o w s . B u t t h e s i t e d e s e r v e s

better than the handful of questionnaires u b m i s s i o n s I t ' s r e c e i v e d s o f a r


Site Envy

V i c t o r i a n H o u s ew w w . v i c t o r i a n h o u s e b n b . c o n iCreated by Old City Web Services(www.oldcitywebservices.com)

A Victorian house in Florida? Tlie idea isn't that far-fetched: hosttown St Augustine is 430 years old. This B&B taps into its historyto offer a website rich in period feel and traditional values.

The home page takes a bold approach by initially focusing on StAugustine rather than the nnerits of the B&B, although the singledetail of a reconnmendation from a guest is telling. Information isclear throughout, and the site taps into a hotel reservation servicefor online bookings and Google Maps for directions. It's too badthese aren't better integrated into the design: both appear in newb r o w s e r w i n d o w s r a t h e r t h a n i n l i n e .

•You'd expectInformat ion such asdirections to the B&B,but not adding GoogleMaps direct to thepage Is a missedopportunity

• Snapshots and period designflourishes lend the VictorianHouse site an old-world feel,despite the use of modern CSS

Kooms & Rates Bill ill! Specials & Packagef

^ m e l c o n i e t o > i c t o n a n i t o u s e

L * c * t c 4 i a t l i e b m l o f

S t . Aygusr ia t . Vidor iaaH m s t B e d « t t d B m J i f a s t

Mc ftC tb« "T»p 190laas" in the raited States^

St . Augu t t t i i e M r«vc red » a

g a t e w a y t h r o u p t t u m e , a o t y t oO s c w e r t h e i f r t i f t w o r * v t

F ion t fa , w wHI as Ar rwr tca 's ve ryo M e s t O M n m u M t y i t i s a t n b u t et o I t s f u i l t H j t o r y M M p r o u d p a c t . H a v t n s n » v < v « < l e v e r 4 1 6 y e a n , i t « p r o u d t o b e m e c t t y

w t t w u w t e d S t a t e s t n M o r m A m e t w a o t e r m s , S t . A o Q u s d n e t s a n a n o e n t o t y, f o u w J e fl 4 2 y e s nt a f o r e J a m e s t n m « « a s c o l o n i z e t f b y a n d S S y e a r s b t f a r e f t y m o u t t t R o c k s a w i t s p i i g n m s .

To u r t t t e O t i a n d a m k i n t h e a r d v t c e i ^ s t n x t u r e s f r o m t h e f v n e t e e m h c e n t u r y * G i k M A $ e ' o f

Henry Ptag lc f , who brought a&out ne te ls and ra t i roadt , ad o f nmch concwtue to s tand tooay mt te t r p r t vKHK g to ry. Now you can take par t tn the esp to rsaon o f i t s fine h tsaxy. fieg i t tn tng u i the

193(rs, St Ai^tiHtine, ^hMida nas ptaced notable efforts on lefionng and preserving n^aoy of itshu tonca i s t f ue tu res . Th i s accomp l i shed a "«v in® hw to ry * amwig the rema ins and the s t ruc tu res ,

MhKh CDnonue to exist from each of its futnwne oenb^tcs. These tndtMie everything from as e v e n t e e f C h - c M u r y f o m e s s , t o m a n y e t g h t e e n t h - o t r t u r y b u U d i n g s t h a t r s p r e s M K t h e M s t o r t c a ^r i chness o f S t . Augu i t t r« .

' P M n i t y o u f o t t h eo m e . . , i

f s m t i ' i H s ( a r t t t i - r j .i n a n l c y m f o r

a n d f ' V a o u s

A r v M / j fi s . n i e r o c t n w a sM u t t / v l j n j fi t o t r i W M f e

Yoga Retreatw w w. y o g a r e t r e a t . d kCreated by Mending

(www.mending.eu)

You wouldn't expect a site associatedwith yoga to bombard you with brashcolours and multimedia. Not unnaturally,

then, Mending's design for this retreatproject offers a Flash interface ofrestrained colours, organic shapes andn o m o r e i n f o r m a t i o n t h a n i s n e e d e d .

A b r i e f we lcome i s ava i l ab le i n Dan ish

or English, with flag icons making itobvious how to switch language. Themajor navigation menu is often hidden,although it's always open as you load thepage so you know it's there. Menuoptions often open sub-options - perhapstoo fussy a system for so littleinformation. But Yoga Retreat's main aimis to convey calm and a hint of luxury,and it does this beautifully.

yogoretreot m

Welcome to Yogare t rea t .dk

Our msfi reason for creating Y09aretretri.dk m. of coum, our posaico Ibr yoga,tfs also relatod to the dwiges ^ experience when yogs enters your MiTnare ara undot iedfy pf sicai signs such as strength and nenbity. but thepsychotogicai changes are the most intense and

To feel the 8tren( and detarmination. to experience fciais (tange and goeticofTringdoser TtKwe ate the most tn^xxtanteiements and tne very foundationstores of vihat everyone attached to Yogarstnaat.ctt thnva to obtam.

we wort ndependent of style, directions, dubs and assoaatKXtt. instead weaim at putting the right people together to create the optimal experience tor ourpartidperts. We ah^ays choose tie most beeutifirf places in Bjrc^ for ourretreats and standard is alvrays high ¥ihen fl comes to iocaboa board andtadging.

YogaretfBflt.dk « sm^ luxury for body and mmd

N s m a s l e

K s n n K o l d

• The navigation menu Is suitably discretefor the subject matter, although you wishthe designers at Mending found a simplersystem than the raft of submenus

• Feeling calm? That's exactly the aim of thisFlash production, which gives details of aseries of retreats for a relaxed holiday

9 6 N o v e m b e r 2 0 0 6 Practical v;»txlesign

U i ' i - i . » i ' <

K I '- -«^€*Tnore^J_#om RAW

steps tS^re. Howtog^ iJ le . j ;'bestquaW I

B

landscar onP r e p a r e t o t a k e y o u r A I ■_ /b e s t - e v e r s c e r f c s ! / i I /

e o g u i d e s j ^ ^ ^ P h o t o s h o p '^ b s g w i r r - - I i m f i f o w y o t i r W a ■ W ■ M VI J dndwh:te-^!ir.?-^ ■ W If ^ ^ ^Video guides ^Photoshopii: 5$*^J w<r r - r. - 1 impfove yot* Wa

I J d n d w h i t e i l i r ? - ?

1:1;',:.l

l < < O L T M P U S

i ■ 1

- '■ i . k

h i ^ i - —

■■ i.

For more info visit www.digitalcaiiieramagazine.co.uk

On your CD

On your CDComplete web designtraining videos, all our

Oop of the bill on this issue'sCD has to be NetObjectsFusion 8, the completev e r s i o n o f t h e e x c e l l e n t

website designing application. Fusioncomes with a massive array of tools andtemplates that not only enable rapid sitebuilding, but help the learning processtoo. A great program for developing codeand back-end functionality, Fusion alsooffers tools for marketing and running

your site.We also have a full version of WS_FTP

Home: it's one of the most popular FTP

applications, thanks to its balance of

and FTP software, an hour oftutorial files - and much more

simplicity and extensive features to nnakemoving or sharing files from your homecomputer a breeze.

You'll also find the project files for

following this issue's tutorials - and fromthis issue, we have all of our step-by-step

images on the disc, so you can view themat fu l l s ize .

If you use Windows, the CD interfacewill run automatically when you insertthe disc into your CD drive; Mac OS Xusers should double-click 'start_OSX,osx'.If you have any suggestions for what

you'd like to see on the CD, please emails c a v e n d e r @ f u t u r e n e t . c o . u k .

•We have four great website designtemplates, courtesy of BoxedArt.com

e o e s U r t . O S X . o s x

_ NetObjects Fusion v6 to ^ Mtth tf>e inmdiiCtDry tu&yiai on 68 of the magazine£ « — a w B a i w m i u M M " u i ! » > i h h m b s h j h a i a M i i - ; mggl ixoetatTi wf^tch wiil cnatic vou to uctoad rr,ar3pp xlt v'.-etsiTp wiTh a hofl cf

teatues which jealiy mate it stand out frcn> The (est {tocal and femoie image t^L•^^pa!lbfowsing tor example}

Ip This month's higWtts incJutte ewilusive website tempiates fflxn BoKedArt (check outthe ffesoufces section), and video tutorials intioducif^ the subject of CSS

The disc is also packed with essential fieewaie to get you started, just dick the buttonson the left to access all at tt>e quality osntef*. Enjcy the CD. wxl please ema»l me withany suggestions or feedback at sam.twen<ler#f utui»o«i.ce,uk

Having any problems?R E A D M E

If you're having any problems using this cover CD, here aresome simple steps to try first:

if you have problems playing any video files, and restarting

your computer doesn't help, you may need to download theShockwave player from www.adobe.com, then try runningthem without the interface. Navigate to the Video Tutorialsfolder on the CD (on a Windows PC, open the My Computerwindow and select the CD drive; on a Mac, double-click the

CD icon), open the appropriate sub-folder, and double-clickon the SWF file you want to watch.

D I S C S U P P O R T

Still no luck? It's unlikely, but your disc may be damaged. [email protected], or telephone 01225 822743, andexplain the problems you've had. Our staff will do everythingthey can to assist. If your disc is physically damaged, see theback of the CD envelope to get a free replacement.

Navigating your interface

Watch our CSS videos, supplied courtesyof Lynda.com, which this issue introduceCSS for designers and help you getstarted with markup.

P O D C A S T S

Now that all of our podcasts are online,there's no need to put them on the CD.However, if you want quick access tothem, we provide all the links here.Each issue, we provide two companion

podcasts for the magazine, where wego into more depth on specific issues.

S O F T W A R E

This issue, we've included full versions ofFusion 8, an awesome HTML editor andwebsite builder, and WS_FTP Home, oneof the best file transfer applicationsa r o u n d . M o r e i n f o r m a t i o n i s a v a i l a b l e

at www.netobjects.com and www.

ipswitch.com respectively.

Access all the files you need to followthe tutorials in the magazine.

E S S E N T I A L S

Whether you need an FTP program, apodcasting tool, a website builder or animage-editing package, we provide thetop tools that cover all the bases,

D I R E C T O R Y

For your convenience, we've put all ofour Bookmarks website links (see page102) on the CD,

9 8 N o v e m b e r 2 0 0 6 Practical vjebdesign

On your CDo

_ynda.com videosWe've teamed up with the leading provider of video lessonsto bring you guides to CSS and XHTML markup

Ohis issue's training videosfronn Lynda.com introducethe excellent upcomingcourse CSS for Designers,

which looks at standards, accessibility andthe role of CSS in the web design

industry. We then take a quick look atthe area of markup, including advice on

creating XHTML documents andvalidating your code to ensure it meetsstandards. Lynda.com also looks at

understanding semantic elements in CSS -which is basically about making sure youuse the tags available the way they wereintended, making your pages much easierto update over time.

webdesigiiHe^jing you bmtd better websites

V i d e o ss a m e d i 4 > Ly n d a i s m f e s S n g o r « n e l e s Q u c e t v w e ! )

desgn TBowg vtoeos - c bnrg yoc a 70-rnnuie cDOse or gectires t a r s d C S S .

D e W L S ;

These tfiH teac f ) jo : N iw 13 t ) g r ips w i^Cascadtrg Sheec, fltiodLi^ (surse tweV OMR Quet tfs neKtlew mcyths. as Nwelt as hArtng a iooli at Ha(ta4: ana hCM (t Moits

G E I S W r a JV Q u Q u d t M T e P l ^ i r s o a e d c a r i l C M r r i i c i a d

t u t V i d e o s t x y n x a i T r t e

txmivngfit of ihs sjeerv tfwn seten vtdeo you'd fie c

loaaxss ntK tharl OiXX) i»fnr0 viOeas. wfv net pay a uisir IDwwMLhmda.aMR icx^

l y n d a . c o m

onHm hom! www. i i q r tavour t tM i i i acaz inAs .ce .u l i

O LET'S GET IT STARTEDMake sure you have QuickTime 7 installed on your system, then runt h e C D i n t e r f a c e a n d e n t e r t h e V i d e o s s e c t i o n . C l i c k t h e Wa t c h

Videos button at the bottom-right to continue.

Mi CDtO-Trey-RawencresT '01_01_ in t r odua ion .nK>v

01.03.CSS goesm a i n s t r e a m , m o v

01 .02 .San< te rds andC S S . m o v

3 t e r n s . 4 0 . 3 4 C 8 a v a d a b t e

©OPEN FOLDERTo open a folder containing all of the videos in that particularchapter, simply click on the bold chapter title. You will be swiftly

taken to the folder that contains all of the videos you'd like to view.

M O R E G R E A T V I D E O S

If you enjoy the projects, and want accessto more than 10,000 videos, pay a visit to

www.lynda.com today!

H O W T O W A T C H

Before you start, check that you have

QuickTime (www.quicktime.com), which

is required to play the video material.Once you have loaded and started

running your CD, select Videos from thel e f t - h a n d s e c t i o n m e n u . Yo u w i l l t h e n b e

taken to a screen that provides more infoon this issue's topics. Click the WatchVideos button at the bottom-right to

enjoy the first clip.

P r a c t i c a l l | OwebdesignV i d e o sCiid section titie t> qien eacMoidec cr dick the vtdeos vieM ttier ir qudctime piayer

1. CSS for tesi^Mn: 01_01_lr tMduct ior: 0 1 . Q 2 . S t « v t a i & a v ] C S S: 0U03^CSSgDesmainfflea<rZ.Hark i9: 02^01^Cnaq®f2irtw!»05e72: 0 2 ^ 0 2 . ) W T M L d o a r w t L: 02,_03_Sem«iC8terrerE- 02 .04_vayda)o r

» E X f l K t s c F i t e s

l onHne wow ! www.Hy layeu r t t amaeaz lnaa . co .uk

©ACCESS CHAPTERSOnce you're in the main Videos section, you'll see a list of chapters.All you have to do is select the video you want to watch and it will

automatically open in your installed QuickTime software.

OSIT BACK AND ENJOYNow sit back and enjoy 60-odd minutes of CSS web graphics tuition.It's recommended that you watch these videos in the correct order

(to prevent brain-ache).


Web DirectoryTo a d v e r t i s e h e r e , p l e a s e c a l l p „ r t i r a i « ■ nLaura Hope on 01225 822778 ^ ' 'or email: [email protected] Hep gyo :. .better ebstes

S E A R C H . S H 0 P\ S A V E

www.shopping.netwww.shopping.co.uk

Bui ld ing an onl ine shopisnt as d i fficul t as you th ink

-^powershop: no assembly required

i i i i u i i i , : h ^o u ' s a e s h o c t n e

D 8 7 0 0 1 3 0 6 2 6

' try our free online demo at

e k m p o w e r s h o p . c o . u k

10,000 UK visitors to your websitefor just £60.00 - Guaranteed.www.Tra ffic -UK.com

If we provide the traffic, can you deliver the sales?

D I S C O U N TP r i n t e r C a r t r i d g e s !

A n m a k e s a n d m o d e l s s u p p l i e d

O r i g i n a l & C o m p a t i b l eI n k J e t , L a s e r & F a x

C a r t r i d g e s

G u a r a n t e e d L o w e s t P r i c e s

b o x - s h i f t . c o . u kT e l : 0 1 7 6 5 6 9 6 4 8 0 F a x : 0 1 7 6 5 6 0 8 8 7 7

Easy Ways to Build and Run Dynamic Website ^Ready Made PHP Modules for Your Website

W e b B l o g g e r

C o n t a c t F o r mC S V I m p o r t e r

C u s t o m e r H e l p d e s kE v e n t s C a l e n d a r

Links Directory

Form Designer

P l i o t o G a l l e r y

V o t e C a s t e rN e w s P u b l i s h e r

FAQ Sup'po^ . A X ^ Guestbook

^ c o m d e vM o r e P H P M o d u l e s F o r Y o u r W e b s i t e

G e t O n e A d m i n f o r Yo u r W e b P r o j e c t s . S a v e Yo u r T i m e a n d C o s t .100% Web-Based • Easy To Install • Fit To Web Design • User Friendly • Technical Support • Web 2.0 Compliance • Major Web Browsers

V i s i t u s n o w / a t w w w . c o m d e v w e b . c o m o r e m a i l u s a t i n f o @ c o m d e v w e b . c o m

A web partnercut from a

different cloth.

CHEAPEST PRICES IN THE UK

All from only £8.85!# S e c u r e y o u r . e u d o m a i n n o w

Looking for a better choice of Internet solutions provider?Then look no further than Web Tapestry. We offer:

♦ Web Hosting from £29.99 per year♦ Domains from only £1.98 per yearAnd all backed by superior standards of serviceand technical support.All prices exclude VAT

Call 0800 015 1718 Click www.webtapestry.netMail [email protected]

web)topestrij

co.uk

. c o m

tv/.ccThe web doesn'tget any easier!

£ 2 . 5 9•co.uk/.org.uk/.me.uk

p a

£ 8 . 9 9■com/.net/.org/.info.b iz / .name

p a

W ' s

£30.95pa(iSsi'

-reg.co.ukw w w . w e b t a p e s t r y . n e t Price per year Inclusive of all fees. Some domains are payaWe 2-yearly, visit 123-regxauk for more info.

Prices exclude VAT @ 175%. 12>reg.co.uk is part of the Pipex Group.

DIYDating.com

Build professional web sites in five simple steps witti SitebuilderPowerful, easy to use Plesk hosting control panels

Domain names from just £2.95 per annumWeb Hosting from just £3.95 pcm

Fnse web stats, photo gaitety & blogging toois. Vims & Spam pfotected emalLinux & Windows web sen/ers. ., UK secure data centre

W W W . . C O . c / k

domain names | web hosting 1 virtual private servers fci-

B o o k m a r k s

Save typing with thebookmarks on the disc

B o o k m a r k sWe scour the internetto bring you detailsof all the best sitesdedicated to webdesign, developmentand s tandards

O here's a wealth ofknowledge, tools andresources out there, andmuch o f i t I s ava i l ab le fo r

free. Its all just waiting tobe used, as long as you know where tolook. To save you time and effort we'vesearched long and hard on the Internett o w h i t t l e o u t t h e m o s t u s e f u l s i t e s f o r

web designers.And to help you even further, we've

organised the sites into the followingcategories so that you can quickly findwhat you want: blogs, blogging tools,colour, creativity, graphics andmultimedia, online tools, online tutorials,publishing tools, search engines, siteshowcases, software sites, reference,web authoring and site design, website

usability and accessibility, and CSS.Happy designing!

Blogs and dailyreadingA List Apartw w w. a l i s t a p a r t . c o mThe definitive web design blog for pros.

Digi tal Web Magazinew w w . d i g i t a l - w e b . c o mEvery week, a new in-depth article ona topical subject, plus indexed archives

going back to 1999,

M e y e r w e b . c o mw w w . m e y e r w e b . c o mCSS and HTML expert Eric Meyer shareshis thoughts, tips and tools.

T h e W e bStandards Projectw w w. w e b s t a n d a r d s . o r gT h e l a t e s t o n m e t h o d s t h a t w i l l a l l o w

your site to function across browsersa n d I n t e r n e t d e v i c e s .

C l a g n u tw w w. c l a g n i j t . c o mRichard Rutter shares his life along withhis thoughts on web development.

M e z z o b l u e . c o mw w w . m e z z o b l u e . c o mDave Shea, creator of the influential CSSZen Garden, writes on all things web, andprovides links to other topical articles.

S i t e p o i n tw w w. s i t e p o i n t . c o mThis publisher's homepage is a greatsource of articles and comment, andthere are daily blogs from a variety ofexperts. The articles pages include a

current feature, recent articles

w e b ^STAR SITE★ ★ ★ ★ ★

and access to a rch ives

of previous articles.Yo u c a n s u b s c r i b e

; t o S i t e p o i n tn e w s l e t t e r s a n d

get help on itsvery active forum.

Sty iegalaw w w. s t y l e g a l a . c o mNews, features and resources onstandards-compliant web design.

Blogging toolsW o r d P r e s sw w w. w o r d p r e s s . c o mWordPress has a great interface with

powerful features, and it's free.

TypePadw w w. t y p e p a d . c o mThree levels of service and customisable

templates that support content beyondsimple blog postings, and produce somegood-looking, easy to navigate blog sites.

MSN Spacesht tp : / / spaces .msn.comA simple to use blogging tool, but it offerslimited opportunities for customising, soresu l ts can be ra ther du l l .

Movable Typew w w. s i x a p a r t . c o m / m o v a b l e t y p eA popular PHP-based weblog platform for

people who have their own web hosting

C o l o u r

Slayero fficeh t t p : / / s l a y e r o f fi c e . c o m / t o o l s / c o l o r j j a l e t t eEnter a hexadecimal colour value and this handytool will give you 10 shades of the base colour atvarying opacities.

C o l o r P a l e t t e G e n e r a t o rwww.degraeve.com/color-paletteThis site creates a colour palette to match any imagethat you specify, enabling you to harmonise your pagecolour scheme with your visuals.

1 0 0 R a n d o m C o l o r sw w w. r a q u e d a n . e o m / r a n d o m 1 0 0 . p h pGot web designer's block? Pay a visit to this site forsome random colour inspiration, plus all the shades'h e x a d e c i m a l v a l u e s .

C h r o m o w e bwww.smar tp i xe l . ne t / ch romoweb /u l ( s /i n d e x g b . h t m lCheck out the Chromof lash, which simulates a web

page with up to five colours of your choice, and eventake a look at the colour palette that inspired Matisse.

C S S C o l o r C h a r tw w w. s o m a c o n . c o m / p 1 4 2 . p h pClick on a colour code to select it then simply copyand paste it into your code.

K a l i b e r l O O O Ow w w. k l O k . n e t / f r a m e s . a s p x ?s e c t i o n = p a t t e r n sGazillions of groovy pattern backgrounds here.

Squidfingersw w w. s q u i d fi n g e r s . c o m / p a t t e r n sBackground patterns from art director Travis Beckham,free to use on your site.

The Inspiration Galleryw w w. t h e i n s p i r a t i o n g a l l e r y. c o m / w a l l p a p e rBit of a classic look to these backgrounds - definitely

inspired by nature, the Arts and Crafts movement anddesigner William Morris.

C o l o r c o m b o s . c o mw v v w . c o l o r c o m b o s . c o mThis is a great facility for grabbing colour palettes fromother websites. The Combo Tester shows you how well

your own choice of colours work onscreen.


B o o k m a r k so

account. Requires some technical sl<ills toi n s t a l l a n d r u n .

Y a h o o ! 3 6 0h t t p : / / 3 6 0 . y a h o o . c o mThis is a simple WYSIWYG blog with verylittle customisation available, but it doesenable you to pull in elements from theY a h o o ! n e t w o r k .

0 Blogger

□ r ^■!=!• JB. = a 1.

B l o g g e rw w w . b l o g g e r . c o mFree and easy-to-use weblog servicenow owned by Google. It's perfect for

beginner bloggers and is one of themost popular hosting services around.

With its quick sign-up process andset-up, you can launch yourself inminutes with a ready-made blogtemplate. It's simple to use and idealf o r t h o s e w h o d o n ' t w a n t t o b o t h e r

acquiring technical know-how. Photohosting and blogging are supportedby Picasa's Hello.

T h e n e w

i n t e r f a c e e n a b l e s

users to post byemail, and italso supportsRSS feeds and

group blogs.

STAR SITE★ ★ ★ ★ ★

Graphics andm u l t i m e d i a

F o n t s

Web Type Primerw w w. e f u s e . c o m / D e s i g n / w e b _f o n t s b a s i c s . h t m lDaniel Will-Harris's website is a greatintroduction to the art of using typefaces

correctly on a web page. He also offerslots of other excellent advice on buildingthe perfect site, from getting the contentright to creating eye-catching graphics.

I d e n t i f o n tw w w . i d e n t i f o n t . c o mHelps you to identify fonts via a simpleseries of questions - ideal if you want tofind out the name of a font you've seenin a publication.

CreativityDesign Directoryh t t p : / / d i r e c t o r y. d e s i g n e r. a mThis directory - "made by designers, for

designers" - is packed with loads ofinspirational resources.

Design Snackw w w. d e s i g n s n a c k . c o mServing up fresh new servings of designinspiration every day. You can alsosubmit your own recommendations.

S c o t t B e r k u nw w w . s c o t t b e r k u n . c o m /

essays /essay38.h tmScott Berkun essays, including howto generate and pitch ideas.

O n e L o o k R e v e r s eD i c t i o n a r yw w w . o n e l o o k . c o m /

r e v e r s e - d i c t i o n a r y. s h t m lEver s tuck fo r words? Th is reve rse

dictionary will help you find themand will explore related concepts.

A i l K n o w n I d e aG e n e r a t i o n M e t h o d sw w w. i d e a g e n e r a t i o nm e t h o d s . c o mQuite a claim, but they really do seemto have covered everything.

C r e a t i v e W o r dD i c t i o n a r yh t tp : / / ex te l l i gence . co .uk /d i c t i o n a r yWant your content to make you soundintelligent? You'll find plenty ofobscure words (plus their definitions)on th is s i te.

Gaping Voidw w w. g a p i n g v o i d . c o m /M o v e a b l e _ Ty p e /a r c h i v e s / 0 0 1 7 6 0 . h t m lW a n n a b e c r e a t i v e ? C a r t o o n i s t

Hugh McLeod tells you how witha mere 12,000 words.

K a l i b e r 1 0 0 0 0w w w . k 1 0 k . n e tThere a re two reasons i t takes a

while to unravel this site: first,

they've weasled lots of content onto it; second, the font's so damnsmall. Lots of uber-cool design

inspiration: exhibitions of desktopsand patterns, images' . f rom design

webi 1 ' events, a majorQTAD QITP ' project everyi I Ah ill t ,'vveek, listings★ ★ ★ ' a n d a

c o l l a b o r a t o r

m a t c h m a k e r .

G o o d f o n t s . o r gw w w . g o o d f o n t s . o r g300 free TrueType fonts, plus tips on

calligraphy and logo design.

F o n t l e e c hw w w . f o n t l e e c h . c o mInsider font tips and discussion, plusl inks to f ree fon t s i t es .

S o u n d e f f e c t sand loopsPartners in Rhymew w w. p a r t n e r s i n r h y m e . c o m / p i r /P i R s f x . h t m lFree and royalty-free sound effects.

F o n t s f o r t h e W e bw w w. a n g e l fi r e . c o m / a l 4 / r c o l l i n s /s t y l e / f o n t s . h t m lW a n t t o k n o w w h i c h f o n t s w i l l w o r k b e s t

o n t h e w e b ? F i n d a n s w e r s h e r e .

S e a r c h F r e e F o n t s . c o mw w w . s e a r c h f r e e f o n t s . c o mFree fonts, font tools and links to font-related articles that provide a greatr e s o u r c e o f o t h e r f o n t s i t e s .

T h e E v o l u t i o nof Typew w w . m e d i u m b o l d . c o m /

0 4 „ t h i n k i n g / t y p eGood introduction to type and how tomaximise control over type on your site.Includes samples of type layout and

pedigree font resources.

S implytheBest Fontsw w w. s i m p l y t h e b e s t . n e t / f o n t sLarge collection of mostly free fonts,which you can browse by name or by

category. Each font has a preview page.

S o u n d E f f e c t sw w w . s t o n e w a s h e d . n e t /s f x . h t m lLinks you to various sources of free soundeffects from a comprehensive selection,

including animal sounds, TV sounds,explosions and guns.

B I B l

S h o c k w a v e - s o u n d . c o mw w w . s h o c k w a v e - s o u n d . c o mRoyalty-free tracks, loops and sounds.

S t o c kphotographyM o r g u e F i l ew w w . m o r g u e fi l e . c o mFree raw photo materials.

I s t o c k p h o t ow w w. i s t o c k p h o t o . c o mAffordable image library.

Design Packsw w w. d e s i g n p a c k s . c o mFree image collections for designers.

•MyFon tsw w w . m y f o n t s . c o mWith a staggering 45,699 fonts tochoose from, it's just as well they'vemade i t a dodd le t o sea rch t h i s f on t

database. You can search for fonts by

category, foundry, using descriptivekeywords and even popularity.

Search for more elusive fonts usingthe Detailed Search mode. If you knowwhat you want, yet haven't a clue whatit's called, use the WhatTheFont?!recognition system, which enables youto upload a scanned font sample, or

supply the URL where the file can befound, thens u r v e y t h e , , , ' ic l o s e s t W e W ' ' I Imatches STAR SITE '!a v a i l a b l e i n s 't h e M y F o n t s ^ '


B o o k m a r k s

Stock.xchngv v w w . s x c . h uMore than 100,000 free stock photos.

Image Afterw w w. i m a g e a f t e r. c o mLarge online collection of free photosa n d t e x t u r e s .

Unpro found.comw w w. u n p r o f o u n d . c o mSmall library of free images withquirky style.

Y o t o P h o t oh t t p : / / y o t o p h o t o . c o mSearch engine for free stock imagery.

Blue Vertigow w w. b l u e v e r t i g o . c o m . a r /b l u e v e r t i g o . h t mLinks to lots and lots of stock

photography, divided into cheap,commercial and specialised. There arelinks to clipart and fonts, too.

O n l i n e t u t o r i a l s

W e b S i t e 1 0 1http:/ /website101 .comEverything you need to consider if you'rea business looking to expand yourpresence on the web.

P i x e l 2 L i f e . c o mw w w. p i x e l 2 l i f e . c o m

T u t o r i a l i z e d . c o mw w w . t u t o r i a l i z e d . c o mYou will be by the time you've gotthrough this lot - all 7,073 tutorials.Actually, the pickings for web buildersare a fraction of the total, but there's

plenty here to make it a useful link.The great thing about this site is

that all the tutorials are submitted, andrated, by registered users. So, you can

share your own skills and

tips as much as you canWSb gain from others',

C T A D C I T C w h i c h a l l a d d s t oSTAR SITE★ ★ ★ ★ ★

1the fun, and thisextends to posting

o n t h e a c t i v e f o r u m .

O n l i n e t o o l s

AnyBrowse r. comw w w . a n y b r o w s e r . c o mThis site offers a screen size test,

metatag creator, site viewer, HTMLvalidation, and a link check - plus auseful resource directory.

SnipURLh t t p : / / s n i p u r l . c o mShorten ridiculously long webaddresses into small, user friendlyversions quickly and easily.

1 - H i t . c o mw w w . 1 - h i t . c o m / a M - i n - o n e / t o o l .l o a d i n g - t i m e - c h e c k e r. h t mA website load time checker that adds

up all the files included in your page,then assumes an average rate tocalculate how long it will take to load.

D e l o r i e . c o mw w w . d e i o r i e . c o m / w e b /

w p b c v . h t m lA web page backward compatibilityviewer that lets you specify featuresyou want browsers to display <

TinyURL.comh t t p : / / t i n y u r l . c o mAnother site dedicated to makinglong URLs usable.

O c a w aw w w . o c a w a . c o m / H o m e ^ 7 _ e n /Single-page accessibility auditor.

On l i ne too i s .o rgw v v w. o n l i n e t o o l s . o r gCollection of scripts, tools and softwarea d d - o n s f r o m C h r i s t i a n H e i l m a n n .

Online Image Splitterw w w . c h a m i . c o m / h t m l - k i t /s e r v i c e s / i sThis tool slices large images into smallerparts so that they load, or appear toload, more quickly.

Access i fy.comwww.accessify.com/tools-and-w i z a r d s / d e f a u l t . a s pNot a legit word, but Accessify iscertainly a useful site. Access five freeaccessibility tools, plus even moregeneral web developer tools.

v v w w. d e j a v u . o r gUsing the Deja Vu site's Emulator,you can take a trip back in time tosee just what your site would looklike through the eyes of an ancientbrowser - and then say a little thank

you for being alive andweb building now!

PA' ' Practically speaking,of course, it allows

you to check how***** your site will appeart o t h o s e w i t h o l d

b r o w s e r v e r s i o n s .

Also part of the Deja Vu time warpexperience is the Timeline: a look atthe history and the future of the web.

L i n k s t o a l l k i n d o f t u t o r i a l s a v a i l a b l e

across the web, plus a lively forum where

you can share all your web design issues.

V i r t u a l C l u e sw w w . v i r t u a l c l u e s . c o mTutorials for Fireworks, Flash, Photoshopa n d I l l u s t r a t o r .

P h i r e w o r xw w w. p h i r e w o r x . c o mA rich vein of Fireworks and Flash tutorialsfor web designers.

Computer BasedTraining Cafew w w . c b t c a f e . c o mWeb-based tutorials covering the most

popular web design and graphicssoftware applications.

JavaScript Kith t tp : / /wsabs t rac t . comGeneral tutorial site, with a leaningtowards JavaScript.

F lashguruw w w. fl a s h g u r u . c o . u kAll things Flash, plus links to even morethings Flash.

S p o o n ow w w . s p o o n o . c o mThis playground and lively forum isa lso a c lass room.

W e b m o n k e yv w v w. w e b m o n k e y. c o mTutorials to suit designers at all levels,from beginners to all-conquering masterso f t h e w e b u n i v e r s e .

D r e a m w e a v e r

Support Centrew w w. a d o b e . c o m / s u p p o r t /d r e a m w e a v e r / t u t o r i a l _i n d e x . h t m l

Straight from the horse's mouth.

i c a n t . c o . u kv v w w . i c a n t . c o . u kC h r i s t i a n H e i l m a n n ' s a r t i c l e s a b o u t

web development.

D e v G u r uv v w w. d e v g u r u . c o mUnder the Features menu heading, you'llfind a long list of useful tutorials to assistyour site building.

Z v o n . o r ghttp://zvon.orgNews, tutorials and reference material forXML-based technologies (XSL, HTML, CSS).

S m a r t We b b yw w w . s m a r t w e b b y . c o m /r e s o u r c e s . a s pThe Free Web Development Resources

pages of this web design enterpriseoffer a range of free articles, tutorialsa n d t o o l s .

Content with Stylew v v w. c o n t e n t w i t h s t y l e . c o . u k /a r t i c l e sArticles that aim to solve day to day

problems encountered by web designers,and get jobs done to deadline.

O'Reilly WebDev Centerw w w. o r e i l l y n e t . c o m / j a v a s c r i p tLarge selection of free articles on webdevelopment, online web developmentcourses, plus a very handy book storewhere you can view a chapter of a bookbefore you make your purchase.

P H P M a n u a lw w w. p h p . n e t / m a n u a l / e nI t ' s a l l he re . Look no fu r ther.

W 3 S c h o o l sw w w . w 3 s c h o o l s . c o m

Huge resource of free tutorials, examples,references and quizzes from the WorldW i d e W e b C o n s o r t i u m .

MySQL 5.0 ReferenceM a n u a lh t t p : / / d e v. m y s q l . c o m / d o c /r e f m a n / 5 . 0 / e n / i n d e x . h t m lAll the answers to your MySQL 5.0queries and problems.

104 November 2006 Practical wtfodeslgn

B o o k m a r k so

Search enginesS t e p f o r t hwww.news.stepforth.comA generous, up to date helping ofsearch engine news, tips, articles andwhite papers.

Seomoz.orgw w w . s e o m o z . o r gFree search engine optimisation tools,services, articles and news.

C r a w l e r A l e r tw w w . c r a w l e r - a l e r t . c o mDoes what it says on the tin: you get anemail when a search engine crawler is

scanning your site.

Digital Point Solutionsw w w. d i g i t a l p o i n t . c o m A t o o l sThis keyword suggestion tool willdetermine which phrases are searchedfor most often and give a keyword

ranking monitor.

G o o g E d i tw w w . g o o g e d i t . c o mSoftware that cleans up a keywords listand applies Google keyword rules tomaximise its effectiveness in a GoogleAdWords campaign.

Marke t lea | }Search EngineMarket ing Toolsw w w. m a r k e t l e a p . c o m y v e r i f ySan Francisco Internet marketing firm

Marketleap offers some usefuf tools onits site. The keyword verification, search

engine saturation, and link popularitycheckers a re a

breeze to use,-which makes it *wb

a l l t h e m o r e

, surprising thatMarketleap ★ ★ ★ ★ ★doesn't alwaysa c h i e v e t h e

coveted placement within the top three

pages of search results itself. It's stilla useful boost to your site presence.

R a n k s . n lw w w . r a n k s . n l A t o o l s /

s p i d e r . h t m lKeyword density analyser with manywonderful bells and whistles, plus linkst o o t h e r t o o l s .

L i n k H o u n d sw w w . l i n k h o u n d s . c o m /h u b - fi n d e rPart of a broader link-building resource,Hub Finder is an open source link analysistool that looks for co-occurring backlinks.

S E O B o o kh t tp : /A too l s . seobook .com/b a c k l i n k - a n a l y z e rD o w n l o a d t h i s f r e e b e t a v e r s i o n o f t h e

Backlink Analyzer link popularity softwareto find out what anchor text is linkinginto a page or website.

S E C To o l sw w w. s e o c o m p a n y. c a / t o o l /s e o - t o o i s . h t m lLinks to the best search engine

optimisation tools on the Internet.

D e v t o o o l z . c o n nw w w . d e v t o o i z . c o mThis website offers handy network

development tools, including Googlepage rank lookup, link popularity checker; !and domain availability.

S e a r c hEngine Guidew w w. s e a r c h e n g i n e g u i d e . c o mGreat guide to search engines, their |optimisation and marketing. If you're abeginner, this is a great place to come foran understanding of how to steer trafficto your site.

We b Wo r k s h o pw w w . w e b w o r k s h o p . n e t /p a g e r a n k _ c a l c u l a t o r p h p 3Use this calculator to predict the ranking

Google will apply to your pages.

P o o d l e P r e d i c t o rwww.gritechnologies.com/tools/s p i d e r. g oCheck to see what your site will look likein search engine results.

S e a r c h B l i s sw w w . 5 e a r c h b l i s s . c o m

Comprehensive palette of services thatincludes search engine optimisation toolsa n d t u t o r i a l s .

T h e W e bRobots Pagesw w w. r o b o t s t x t . o r g / w c /r o b o t s . h t m lGet to know the web robots, crawlers,wanderers and spiders that search

engines use.

SearchEngineWatchhttp://searchenginewatch.comA l o r r a l o r r a i n f o r m a t i o n a b o u t s e a r c h

engines. In fact, everything you could everwant to know, including all thel a t e s t n e w s a n d t r e n d s .

S i t e o m e t r i c sw w w . s i t e o m e t r i c s . c o m

Keep an eye on how your website isranking in all of the top search enginesfrom this single site, with tools for GooglePageRank and other systems.

Publishing toolsF r e e W e b S u b m i s s i o n . c o mw w w . f r e e w e b s u b m i s s i o n . c o mFree submission to Alexa.com's highest-ranking freeInternet search engines, plus other online tools for

measuring your site's web presence.

W e b A n n o u n c e rw w w. w e b a i l e y . n e t / w e b a n n o u n c e rWeballey's Web Announcer allows you to submityour site to about 70 search engines, including Google,Lycos and AltaVista, in one fell swoop.

Tr a f fi c Z a pw w w . t r a f fi c z a p . c o mFree search engine submission, optimisation andt r a f fi c b u i l d e r s .

S e l f P r o m o t i o n . c o mw w w. s e l f p r o m o t i o n . c o mAll the information and tools you need to promote yourown website - and do it properly!

W h o i s . N e tw w w . w h o i s . n e tSearch for available domains, search through availabledeleted domains or look up registration data forexisting domains.

D o m a i n i tw w w . d o m a i n i t . c o mAn easy to use domain registration and research site,plus plenty of other tools on offer.

N a m e b o yw w w . n a m e b o y . c o mThis is a clearly designed site that not only allows

you to register your domain name, butgenerates available domain names %yeb "and also gives appraisals of names

(for a price). These appraisals STAR SITEmeasure the popularity and demandfor words, phrases and markets onthe Internet, and check for search

frequency, Internet frequency and searchterm and keyword advertising values. Price per worddepends on the number of words you submit for appraisal.

D N F o r u m . c o mw w w . d n f o r u m . c o mIt's not just talk here - you can get feedback on domainnames, read the latest domain news or research the legalissues relating to them. You can also buy, sell, broker orauction domain names, and follow tutorials coveringweb design, SEO, marketing, web hosting and more.

Practical vebdesign November 2006 105

B o o k m a r k s

Software si tesand applicationsD o w n l o a d . c o mw w w . d o w n l o a d . c o mCNET's trusty download site for PC andMac, featuring user ratings, number ofdownloads and some editor ratings tohelp you pick the best.

T u c o w sw w w . t u c o w s . c o m

The bovine arbiters of good softwarel e n d t h e i r l i k e n e s s e s t o t h e s o f t w a r e

that they favour, but also supply auser popularity rating,

N e w f r e e w a r e . c o mht tp : / /webmas te r.n e w f r e e w a r e . c o m

Helpfully organised site with softwarer a t e d a n d d o w n l o a d s t a t i s t i a l i s t e d .

Nonagsw w w . n o n a g s . c o mLarge list of freeware and shareware,with well-considered ratings.

F r e s h m e a t . n e th t t p : / / f r e s h m e a t . n e tA great place to look for open sourcesoftware and tools, particularly toolsf o r L i n u x a n d U n i x .

5 S t a rw w w . 5 s t a r - s h a r e w a r e . c o mLoads of software, plus ratings,reviews, top picks and tips.

Z D N e t U Kh t t p : / / d o w n l o a d s . z d n e t . c o . u kOne of the largest collections of freea n d t r i a l s o f t w a r e t o d o w n l o a d . T h e

user ratings and downloads listed area dead giveaway of how useful a pieceof software really is.

My SEC Tipsw w w. m y s e o t i p s . c o mAn informative blog on how to optimise

your website for search engines.

S i te showcases

Plast icpi lotsw w w. p l a s t i c p i l o t s . c o m /p i l o t s . p h pEnjoy the sites that Plasticpilots haveawarded for excellent design - andsubmit your own for consideration.

Z e n G a r d e nwww.csszengarden .comZen Garden allows you to apply differentCSS style sheets to a single page - thecode stays, the page is transformed, butonly the external CSS file changes.

VisualDesignerw w w. v i s u a l d e s i g n e r. n e tThis showcase categorises featured sitesby subject areas and by CSS and DHTML,Flash, animation, audio and sound.

B e s t F l a s h V 2w w w . b e s t fl a s h a n i m a t i o ns i t e . c o m / v o t e

Nestling in this ample resource of Flashresources are the sites voted as Best Flash

Sites for the current week, plus thearchives of previous weeks.

The Weekly Standardsw w w. w e e k l y s t a n d a r d s . c o mHighlighting websites that take full

advantage of standards-baseddevelopment techniques.

CSSBeautyw v v w. c s s b e a u t y. c o mA pristine showcase for the best websites

designed using Cascading Style Sheets,plus CSS news, announcements andplenty of tutorials.

W e l l v e t t e d . c o mw w w . w e l l v e t t e d . c o mA fine list of very handsome sites. Avisit here won't fail to inspire you.

R e f e r e n c e

CSS Property Indexw w w. b l o o b e r r y. c o m / i n d e x d o t /css/propi ndex/a 11 .htmAn alphabetical listing of CSS syntaxand properties, from accelerator anda z i m u t h t o z - i n d e x a n d z o o m .

F a v o r i t eW e b s i t e A w a r d sw w w . t h e f w a . c o mFeast your eyes on some of the bestdesign around over the last six years.This site showcase is a particularly greatresource if you're looking for Flashinspiration. In addition to linking tocutting edge sites, you can readinterviews with these creative genii, linkto their sites and read their profiles. If

you're feeling bold and you' > reckon you've got whatwebd'-:.';! I rt takes, you couldSTAR SITE ' V7

S own website for^ ^ ^ ^ ^ consideration. Let us

, ' k n o w i f y o u w i n !

C S S G u i d e f o rthe Ungluedw w w . t h e n o o d l e i n c i d e n t . c o m /t u t o r i a l s / c s s / i n d e x . h t m lAs the author writes, "this Is not not acomplete resource: this is a fast resource".This list presents links with answers tomost of the coding questions you'll have.

Stylegala CSS Referencew w w. s t y i e 9 a i a . c o m / f e a t u r e s /c s s - r e f e r e n c e

Alphabetical listing of Cascading StyleSheet syntax and properties, including

examples, browser support, possiblev a l u e s a n d m o r e .

Cheatsheet Roundupw w w. p e t e f r e i t a g . c o m / i t e n fi /4 5 5 . c f mMore than 30 quick-reference sheets forweb developers, whether you're coding inCSS or XHTML, or developing a databasew i t h P H P o r C o l d F u s i o n .

Zvon.org Referencesvvww.zvon.OFg/index.php7nav_i d = r e f e r e n c e sComprehensive reference site forall things XML.

D e v x . c o m

www.devx.com/projectcoolProject Cool: Web Development Basics isthe title of this reference resource. There'slots of help here if you're getting startedin web design.

S t y i e m a s t e rCSS Podguidew w w . w e s t c i v . c o m / n e w s /

p o d g u i d e . h t m lInstall Westciv's Complete CSS Guide on

your iPod for a handy portable referencesource, wherever you're coding.

W 3 C S c h o o l sC S S R e f e r e n c ew w w. w 3 s c h o o l s . c o m / c s s / c s s _r e f e r e n c e . a s pThe W3C Schools e-learning portal is

completely free and a fantastic resourcefor training materials. Whatever aspectof web building you want to learnabout, they cover rt, and their tutorialsare recommended reading at over 100universities and high schools aroundthe world. So it's not surprising thattheir CSS reference pages are the most

comprehensive you'llI , find anywhere. In

addition, you'll

STAR SITE find plenty more★ ★★★★ help on their very

a c t i v e f o r u m .

Web authoringand site designThe Link Exchange

www. I ink-exchange, wsFree link exchange directory with

categorised listing of sites that activelyexchange links.

E v o l t . o r gw w w . e v o l t . o r gCreated and maintained by volunteers,Evolt's ad-free pages collect the latest


B o o k m a r k so

WebDesignersB o o k m a r k sw w w. w e b d e s i g n e r sb o o k m a r k s . c o mThe simple desire to keep web

designers updated with great currentr e s o u r c e s a v a i l a b l e o n t h e I n t e r n e t i s

t h e m o t i v a t i o n b e h i n d t h i s s i t e .

On its cleanly designed, easy to

navigate pages, you'll find links toa variety of excellent resources tailoredto website designers, grouped intohelpful categories - much as we'vedone for you in thisbookmarks section. ' i ^You don't even ¥PBbi< '':lihave to type QTAR QJf 'out the URLs O I Ah ill tyourself-just ★★★★★ i'click and go!

n e w s a n d t h e m o s t t e c h n i c a l a d v i c e f o r

developers and designers. There arearticles and tutorials and great webresou rces . The re ' s a l so t he B rowse r

Archive, the largest archive anywhere fortesting sites for browser compatibility.

The SiteExpertsC o m m u n i t yw v w v. s i t e e x p e r t s . c o mLively forum and tutorials, withdemonstrations covering building,

designing and maintaining websites.

B ig Webmasterv v w w. b i g w e b m a s t e r . c o mThere are scripts galore in any language

you care to think of at this web designer'sr e s o u r c e s i t e .

Usability andaccessibilityWe b u s a b i l i t yAccessibi l i ty andUsabil i ty Servicesw w w. u s a b i l i t y . c o m . a u /r e s o u r c e s / t a b l e s . c f mThis is a great resource for

understanding and creating accessibled a t a t a b l e s .

Access ib i l i ty Mat tersw w w. n i l s . o r g . a u / a i s / w e b /r e s o u r c e s / t o o l b a r

Accessibility discussion, links andresources aplenty.

J * fl yh t t p : / / j fl y. i a m . u - t o k y o .a c . j p / c o l o rUnderstand how to design forc o l o u r - b l i n d u s e r s .

Eyetrack IIIw w w. p o y n t e r e x t r a . o r g /e y e t r a c k 2 0 0 4 / m a i n . h t m

Eyetrack III researches results on webusers' eye-tracking patterns acrossa web page.

T h e I n t e r a c t i o nDesigner 'sC o f f e e B r e a kw w w. g u u u i . c o m / i s s u e s /0 1 _ 0 5 . p h pThis page from an irregular using oninteractive design features discussionand tips on users' navigation blindness.

U s e i t . c o mw w w . u s e i t . c o m / a l e r t b o x /s i z e l i m i t s . h t m lSize limits for web pages to allowdesired loading times at variousconnection speeds.

R o b e r t ' s Ta l kw w w . r o b e r t n y m a n .com/2005 /06 /14 /why-access ib i l i t yRobert Nyman explodes some

popular (and no to popular) mythsand exposes accessibility charlatanshe 's come across .

W e b m a s t e r T o o l sC e n t r a lw w w . w e b m a s t e r t o o l sc e n t r a l . c o mOn a mission to gather the best serviceson the web for designers. WebmasterTo o l s C e n t r a l i s l i k e a m i n i - Ya h o o ! f o r w e b

design, breaking its links into categoriesto help you find what you need.

FreeStickyw w w. f r e e s t i c k y. c o m / s t i c k y w e bG r e a t r e s o u r c e o f f r e e c o n t e n t a n d w e b

design tools for your website.

W e b m a s t e r s C h a n n e l .c o mw w w . w e b m a s t e r s c h a n n e l . c o m6,500 links to web design andmaintenance resources, listed in categoriesthat include design, programming,

marketing and ecommerce.

T h e W e b M a s t e r s D e nw w w . w e b m a s t e r s d e n . c o mThis listings site offers a comprehensive,searchable database of Internet resources,with a diverse, well-balanced outlook.

C S S

W e b S t a n d a r d sS o f t w a r eand Learningw w w. w e s t c i v. c o m / s t y l e _ m a s t e r /a c a d e m y / c s s _ t u t o r i a i / i n d e x . h t m lAn extensive guide to every aspect of

Cascading Style Sheets. A more completeedition, with information on browsersupport of different CSS rules, is availableto buy and download.

C S S S h a r kw w w . m a k o 4 c s s . c o mThis CSS know-how site answers yourFAQs and explains the basics, though aprominent section on Netscape Navigatorbetrays its age.

W e b x a c tlT t tp : / /webxac t .w a t c h fi r e . c o mThis s f te o f fe rs a f ree serv ice tha t

tests single pages for quality,accessibility and privacy issues.

Advanced options includeS e c t i o n 5 0 8 a n d W 3 C W C A G

compliance levels, collecting codefragments for accessibility issuesand scanning for broken links.

Webxact's help pages are theret o m a k e s e n s e o f ' ■ > ,

they reportback to you, "sso be sure

you make them o s t o f t h e m .

wabi;- *11 'STAR SITE★ ★ ★ ★ ★

Real World Styleh t t p : / / r e a l w o r l d s t y l e . c o mCSS layout, tips and techniques for theCSS obsessed, or even beginners!

CSS Playht tp : / / cssp iay.co .ukExperiments in what can be achieved withpure, unadulterated CSS, with sectionscovering menus, transparencies andlayouts, as well as more ambitiousi n t e r a c t i v e d e m o n s t r a t i o n s .

T a n f aw w w . t a n f a . c o . u kCSS design, style, fun and articlespresented clearly and concisely byClaire 'Suzy' Campbell.

CBEL Style Sheetswww.cbe l . com/s ty le_sheetsLinks you to a generous 195 CSS-relatedwebsites. If it ain't here, it ain't anywhereelse, mister.

T h e N o o d l e I n c i d e n tv v w w . t h e n o o d l e i n c i d e n t . c o mT h e N o o d l e I n c i d e n t i s h o m e t o t h e

indispensable CSS Panic Guide, anda comprehensive list of links to CSSresources. It includes an insight into theeffects of different font sizing options,plus everything you need to know aboutcreating boxes with CSS. O

C S S V a u l th t t p : / / c ssvau l t . com/resou rces .phpThe aim of th is s i te is to be both

inspirational and a fantastic resource.To that end, there are articles, scripts,layouts and a gallery of great websitesthat are built upon every month. Manyof these sites are suggested by visitorsto the s i te v ia the

' s u b m i t a l i n k ' , , „page-you could wW*' ■ ;l ieven suggest SJAR SITE 'y o u r o w n ! *★★★ *

I n a d d i t i o n

there's a great setof l inks to CSS

reference guides. If you can't find whatyou're looking for here, you surelywon't find it anywhere else on theIn te rne t . The re a re a l so XML feeds t o

update you as news, websites andresources are posted.


Hosting

Casyspacefn^our trusted partner for the w^

w w v u . e a s y s p a c e . c o mD E D I C A T E D S E R V E R S F R O M O N L Y £ 4 9 . 9 9 P M

Pay for 12 months and get1 m o n t h e x t r a - F R E E ! ! !

C A L L U S T O D A Y O I M 0 8 7 0 7 5 5 5 0 8 8

Choose a site hostYour web host holds the key to a consistent web presence.Understanding your requirements helps you get the best deal

©eb hosts are companies thatstore the website you'vecreated, enabling a global

audience to access It 24 hours a day.While it's possible for you to host yoursite on your own server, most people finda h o s t m o r e e c o n o m i c a l a n d c o n v e n i e n t .

Finding the right partner involvesmaking a few choices before you can findthe perfect setup for your host. The maincriteria for selecting your hosting

package are storage, bandwidth,technology, extras and support. Of these,t h e fi r s t t w o a r e t h e m o s t f u n d a m e n t a l

to the health of your website.

S T O R A G E A N D B A N D W I D T HYou must assess for yourself how muchstorage you are likely to need, but thereality is that most people are unlikely toexceed their allocation. Storage is aconsideration if you have a massive siteor plan to host video, which occupiesmuch more space than text or images.

Far more important is your bandwidthentitlement, which is often referred to astraffic. This is specified in megabytes or

gigabytes per month, and includeseverything you transfer from your server;

text, images and video. A busy site caneasily hit its threshold within a givenmonth if you choose the wrong package.Use the hosting firm's monitoring tools to

keep tabs of your bandwidth usage, andcheck how much the company chargeswhen you go over your agreed limit.

T E C H N O L O G Y

T h e n e x t a r e a t o c o n s i d e r i s w h i c h

technologies should power your site.T h e r e a r e t w o b a s i c c h o i c e s t o m a k e ;

S h a r e d o r d e d i c a t e d ? M o s t w e b s i t e s

are stored on shared servers, which alsohold sites belonging to other customers.This keeps prices down, but your site's

reliability can suffer if you are sharinga server with a demanding site. You can

pay more for a dedicated server if youanticipate heavy traffic for your site.Unix or Windows? An estimated 70 percent of web servers run one of the manyvariants of the Unix operating system,including Linux; these are regarded asstable and secure, and offer good supportfor server-based technologies such as PHP.Windows servers enable you to integrate

your website with information, forexample product catalogues, that you

t l i n T fi M F T t m n M S F n i ) M O I M : A M T n K I N p : < l

WELCOME

t M T p J h f :

H»n« ; Loo«i t Contact

O t t t * r 8 « n « n

CuMWTWr SupOOfl

O M t f A , M M C M

SMMnGMoew. Sct r t i r td . 4«Dnon • • iMr t t igUKpmisro t f fn tmMMrtpnKMrn r w t t r i b u m t m u u a m t c n - * • • 9 . o u r a w p t w c a o f l » i niwaKatiw Mi 'Kwlwo wpduete. ODnftfivd wtn au^pncMand umlMtM cuiKmvr ^

W E L C O M E T O 1 & 1T H E W O R L D ' S N 0 . 1 W E B H O S T

A S O U T 1 4 1 I H€ L P ) C O N TA C T

> M E I t L O G I N I f c W t e M A I l L O G I N

H O M E D O M A t M S ' M A I L K O S T t M C H O S T I N G E S E K V t f t S P « S H O P S ' S H A R I P O I N T

L i f H f f H o t t i n g

H o m e

iftl tuslnets1 4 1

■» V B U M i A i • » H Q R M I 9

1 & 1 H O S T I N GNEW INCREASE VfSfTORS TO YOUF WCBSfTE

» C o m p v t s o n C h v t

A N a b o u t d o m a i n t

S e r v k c 4 S u p p o r t

" YuMocta*. n "ag. H Go le f[ 'EO,1 * 1 B e g i n n e r l A l H o m e 1 * 1 B u s i n e s s l A l B u s i n e s s P r e X « 1 P r o f e s c k m a i

M i c r o s o f t - E d i t i o n

• 1&1 offers a series of accessible packages loaded with extras for easy configuration

•Glasgow's NSDesign offers a small but tightly tailored set of Linux and Windows options

have created in Microsoft products suchas Access.

E X T R A SIf you are creating the most basicof websites, these may be your onlysignificant considerations, but mostpeople require extra facilities as part oftheir hosting package:Email addresses Your hosting firm

specifies how many individual emailaddresses you can have, each linked to

your chosen domain. Many firms alsoenable email aliases, so you can haveseveral email addresses pointing to thes a m e m a i l b o x .

Database A prerequisite if you wantto run your own blog or create adynamically updating site. The choice ofdatabase technology depends on the

operating system you choose for yourserver: PHP and MySQL are most commonon Unix, while ASP is most common onWindows. Some packages include a

specified number of databases; you mayhave to pay extra with other packages.Ecommerce If you want to run your ownshopping system rather than use anothersite to handle your transactions, your

server must be able to encrypt yourvisitors' connections to ensure security.The key component to look for is SSL(Secure Socket Layer): if your hosting firmenables this on your server, you can adda shopping cart system. Some hosts mayset up one up for you beforehand.

S U P P O R T

Hosting firms can offer dramaticallydifferent support according to the typeof customer they're trying to reach. If youare likely to need help setting up yoursite, look for a host that offers phone-based technical support - but check therates charged carefully. Email support isfine for occasional queries, but not for in-depth assistance.

Most hosting firms increase the

storage capacity and the bandwidthallocation through their package tiers:this may not suit your needs if extrabandwidth is all that matters to you, butthat's how most mainstream packageswork. Higher-priced packages also add onmore extras, regardless of whether or not

you need them. It pays to take some timeto shop around, so that you find the rightpackage to suit all your needs.

108 November 2006 Pract ica l x les ign

Hostingo

E a s y s p a c e M i i* your trusted partner for the web

w w w . e a s v s p a c e . c o mH I G H Q U A L I T Y W E B H O S T I N G F R O M O N L Y £ 2 5 P A

F r e e D o m a i n w i t h A L LWeb Hosting Packages

C A L L U S T O D A Y O N 0 8 7 0 7 5 5 5 0 8 8

Web hosting companies

12f3 internet www^S.com 110131 468 4684 |! ✓ !1 ✓ X l i ^ I I ^ 11 11 ^ 1[£200 ;l l l G b [4 t h e N E T I n t e r n e t L t d w w w . 4 t h e n e t . c o . u k 0 8 7 0 7 4 0 1 6 1 9 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ £ 9 9 1 0 0 M ✓ ✓ ✓ ✓ ✓ X

1S Star MMia www.5starh(^lnfl.co.uk ij 0871 871 8891 1 ✓ X r ✓ ' T ' ✓ 1 1 1 Ipoa 'ifi^AA Web Gxnpany www.awebcompany.net 0 2 0 8 3 9 9 6 6 7 5 ✓ X ✓ X ✓ ✓ X ✓ £ 3 4 . 9 5 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Ace Internet www.aceinternet.co.uk 110870 740 7555 |1 ^ 1 [ ^ X 11 X .[ X ' 1 X 1 1 1£25 1120MB llAGCC World httpy/agccworld.co.uk 0 7 0 5 0 6 5 7 3 2 2 ✓ X ✓ X X X ✓ ✓ £ 2 4 4 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1AGUK - Internet Solution* 1! 07092 175707 (! V 1 1 ✓ X II X II * t 1 X 1 1 !|£25 ;IhOMB II m -A l C - E n t a n e t w w w . a i c . c o . u k 0 1 2 7 9 3 0 6 6 7 7 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 3 5 N / A ✓ ✓ X ✓ ✓ X

1 Airtime www.airtime.co.uk 1101254 504420 (! f:1 1 ✓ 11 ✓ J X 1 1 ^ ! 1 ^|f>OA 111 N/A.- ■■1 . . V > a0 7 7 6 4 1 5 6 3 11 ✓ X ✓ X ✓ X X ✓ £ 2 9 . 9 9 5 0 0 M B ✓ ✓ ✓ ✓ ✓ X

\ w w w . a t t o h i l h w ^ c o m i[01653 573330 1! ✓ ' ✓ ✓ ✓ :i X 1 1 11 Tpoa ' I n / a l l1 VArchrtec Computer Solutions Ltd www.architecnet.co.uk 0 9 1 2 4 2 9 9 0 6 2 ✓ X ✓ X X ✓ ✓ ✓ £ 3 0 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

1 AsMlfeHlter wwwJMMbsenirer.com n / a 1 ✓ ✓ X '! * 1 f ^ 1 1 11 POA 1 500MB if:A S R M a i n t e n a n c e a n d F a c i l i t i e s w w w. a s r m a i n t e n a n c e . c o m 0 1 6 1 3 2 0 1 9 1 8 ✓ ✓ ✓ n / a ✓ ✓ ✓ X P O A N / A ✓ ✓ X ✓ ✓ ✓

1 Aviators Network www.avlators.net J 07002 742867 l| ✓ ! ^ X ^ 1 X 1 1 1 t * l£45 IISOMB .V|B u s i n e s s 1 s t w w w. b - 1 s t . c o m 0 8 7 0 7 5 7 4 1 4 1 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ P O A N / A ✓ X ✓ ✓ X

ISusiness Serve Awww.buslnessservexo.uk 1(0870 755 5565 1 ✓ 1 ✓ ✓ ✓ 1 X 1 t X 1 1 ^ 11 £99.951125MB iCheapnet Ltd www.cheapnet.co.uk 0 8 7 0 5 1 6 8 1 6 0 ✓ ✓ ✓ ✓ X X ✓ ✓ P O A N / A ✓ ✓ ✓ ✓ ✓ ✓

1 aara.net Ltd www.clara.net !i0845 355 2000 I ✓ ' ✓ 1 ✓ X ^ 1 1[ ✓ 1 i li £29.99 II10MB 1 [C o l t w f w w. c o l t - t e l e c o m . c o . u k 0 8 0 0 3 5 8 3 0 4 1 ✓ ✓ X ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ X ✓ ✓

lAH^hLtd www.comtfa.com 11020 8289 3039 j ✓ . X X X ,1 ✓ J 1 ^ 1 ( ^ il£12 II50MB '1C o n x i o n w w w . c o n x i o n . n e t 0 2 0 7 5 3 7 6 2 4 0 ✓ X ✓ ✓ ✓ ✓ ✓ ✓ P O A P O A ✓ ✓ ✓ t / t / ✓

1CWCS www.cwcs.co.uk ||0870 703 1000 | ✓ I ✓ ✓ ✓ i l y ' I i i ^ |£110 Si 750MB iCyfoase Internet www.cybase.co.uk 0 1 5 1 2 2 7 4 2 4 4 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 0 0 5 0 M B ✓ ✓ X ✓ ✓

1 DataNet www.data.net.uk 110800 085 0010 il ✓ 1 ✓ fl ✓ X ' 1 ✓ 1 1 ^ 1 1 i£100 !i25MB ij V ' ■ 1w a■■ aD a t e x U K w w w . d d t e x u k . c o . u k 0 8 7 0 7 4 6 1 7 8 8 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 8 5 3 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓

\ Dedicated Servers www.dedicated-servers.co.uk 1^0870 012 6600 li X ¥ ^ 1 f! 1 1 * ] POA ; i N / A 11 iD e m o n I n t e r n e t w w w . d e m o n . n e t 0 8 4 5 2 7 2 0 6 6 6 ✓ X ✓ ✓ X ✓ ✓ X £ 1 6 5 5 0 M B ✓ X X ✓ X

R Web Solutions wwwA^kirweb.co.uk [101204 650132 | ✓ X ' i ✓ II X X l l ✓ i 1 X 1 1 ✓ '1 £30 i i 50MB IDesigner Servers Ltd www.dsvr.co.uk 0 8 0 0 1 9 5 8 0 6 0 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ X

1 Domain Buster wvw.domainbuster.com jf0870 741 1438 '1 ✓ ' ✓ i i V ;| X ✓ ^1 X ; 1 i 1 11 POA \\ 50MB 11DftS Ltd www.0-2000webhosting.co.uk 0 7 0 9 2 3 5 8 0 9 6 ✓ ✓ ✓ X X ✓ X ✓ £ 8 9 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

1E Business Services Ltd www.ebizs.net jjOSOO 169 5867 l] X II ( * ✓ l l i1 1 t ;! £85 II75MB 11 ■0?Easynet V(Afvw.easynet.net n / a ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 9 9 5 0 M B ✓ ✓ X ✓ ✓ ✓

j Easyspace vww.easyspace.com (f0870 755 5088 [ X 11 * X l l 1 ^ 1 1 |£23 1160MB 'Eclipse Networking www.eclipse.net.uk 0 1 3 9 2 3 3 3 3 0 2 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 9 9 2 5 M B ✓ ✓ X ✓ ✓ X

j Efficient Hosting www.efficienthosting.co.uk 1(07020 971262 \\ ✓ X fl ✓ X 1 11 * 1 1 ■[£131 150MB 11 ^ X 1 i i ^ mE l e c t r i c N a m e s w w w. e l e c t r i c n a m e s . c o . u k 0 2 0 8 8 7 5 0 2 0 0 ✓ X ✓ ✓ ✓ X ✓ ✓ £ 9 9 5 0 M B ✓ ✓ X ✓ ✓ X

) EiiteUKServe.Net http:y/eliteukserve.net (10870 741 5898 || 1 ✓ il !| ✓ 1 ✓ ' 1 ^ 1 1 ^ |£49 1150MB 11E n t a n e t w w w . e n t a . n e t 0 8 7 0 7 7 0 4 9 9 6 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ X ✓ ✓

j Eufofe^hM^H www.eurdftMAMflim ,10800 072 9160 j X , 1 / r ✓ ! ✓ ✓ 1 ! 1 1 ^ 1 £29.99 1110MB ]1 ^EzySite Ltd w^ww.ezysite.com 0 1 3 2 5 3 0 3 111 ✓ X ✓ X ✓ ✓ X X £ 8 5 S O M B ✓ X X ✓ ✓ ✓

1 Fasmosts www,fdsthosts.co.uk 1101452 541260 j[ ✓ ✓ 1! ✓ :| ✓ ✓ '1 X 1 1 1 1 j <F a s t r a c k w w w. f a s t r a c k . c o . u k 0 8 7 0 7 4 2 4 2 8 2 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 9 9 5 0 M B ✓ ✓ ✓ X ✓ X

j First Direct Solutions Ltd www.firstdirectsoiutions.co.uk [101324 489448 |1 y X l i ✓ :;| X ✓ 11 ^ 1 1 * 1 1 1 £39.99 11 SOMB i l a wF i r s t - W e b N e t w o r i c S o l u t i o n L t d w w w . fi r s t - w e b . n e t 0 8 7 0 7 4 0 9 2 2 3 * ✓ ✓ X X ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

[ Freedom 2 Surf www.freedom2surf.net !101727811530 H ✓ ' X i l ,i l ^ '[ * 1 i 1 1 ^ i|£24 J[50MB ■i I HI H IF r e e V i r t u a l S e r v e r s w w w. f r e e v i r t u a l s e r v e r s . c o m 0 8 7 1 7 5 0 2 4 7 4 ✓ X ✓ X X ✓ ✓ ✓ £ 1 5 1 5 0 M B

[Freezone lnternetwww.freezone.co.uk 110845 117 0366 \\ ✓ ! ✓ il ✓ 11 ✓ : 1 1 1 II £39.90 11 SOMBF r o n t i e r I n t e r n e t S e r v i c e s L t d w w w. f r o n t i e r . n e t . u k 0 8 4 5 6 0 1 1 2 7 9 ✓ X ✓ ✓ X ✓ ✓ ✓ £ 5 0 5 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Future Internet Services www.futureintemetservice5.com |j 0845 641 0776 j] ✓ X | [ ,:| X ✓ i l ✓ ^ 1 ^ 1 1 |£9.99 USMe-, . ,r m ■ Bw m■ M MGiacom World Networks www.giacom.net 0 8 7 0 7 4 0 7 7 7 7 X ✓ ✓ ✓ X X ✓ ✓ £ 1 9 9 1 0 0 M B ✓ X ✓ ✓ ✓ ✓

{GfeHGold Network Ltd www.gtobdlgoid.co.uk || 01992 303090 '| V ' ✓ i l ✓ j V- ^ 1 ✓ ■1 1 1 '1 £78 liSOMB - 1Globell Business Solutions Ltd www.globeil.co.uk 0 8 0 0 0 2 7 4 1 4 1 X ✓ ✓ X ✓ ✓ ✓ ✓ £ 9 9 3 0 M B ✓ ✓ ✓ ✓ X

Practical we design N o v e m b e r 2 0 0 6 1 0 9

u6isapqdM leîpeid 9003Jaqu jaAON 01L

X A A A A a e j j X X

/ • A A 1 ^ 11 A 1 a ) W } L ! 6671 / • / •

X A A A A A a D E 0 6 3 A A

X A A X \ A ! A 8 ^ 0 0 9 iosez?' A A

A A A A A A V / N 6 6 ? A A

A A A A i i l A 8 W S 0 0 1 3 A A

X A X A A A a i ^ o o i 8 8 " i W X X

/ • A A X 1 /» If A [ awot ii S823r /< / •

X A A A A A a iNOS 0 2 J A A

/ • A A A 1 ^ 1 A 1 aiNOS', 62131 A A

A A A A A A a t N o o i V O d A A

A A A A 1 I I A a v w s 1 o s j i A A

A A A A / • A a m z 6 6 3 A A

X A A A 1 / • ! A a t ^ o s 6 0 1 3 A A

A A A A A A 8 ^ 0 0 2 8 8 6 2 3 A X

A A A X 1 /« ; A v / N 1 V04\ A

A A A X A A a w o o 2 £ 2 3 A A

t a i ^ ! 02131 A A

A A A A A A a i N o o t f r 2 £ 3 A A

A A A A 1 ^ 1 A a w o E i 0 Z 3 l A A

X A A A A A a i ^ o s 0 2 3 A X

X A ^ 1 A ! 1 [ A 1 airtioot'1 0 9 3 ! A X

/ • A / • A A A v / N V O d A A

/ • A X 1 l A 1 QViOOZ i 0 9 3 ! A A

A A A A A a i f t i o o L 0 9 3 A A

v / N 1 663i A A

X A A A A A a i ^ o o i 6 6 6 » A A

A A A A 1 A 1 ! v / N V O d A A

A A A A A A a i ^ S 2

j awoE ■S 6 3 A

^ 1

X

1 w

X A A X A A a w o E

1 6 i 3 [ |

S P 3

A i

A

1 -*/ »

A ^ 1 X 1 /* If A ,1 at^s2 ! 00131 A X

z ' A A / • A A 8 1 ^ 0 0 9 0 S " 6 ^ A A

"> 11 A A X 1 ^ II A i ! v / n :1 VOdI A A

X A A A A A a iMOL 6 ^ 3 A A

X A A X 1 z' If A 1 awo2 ! S23! X 1 ^ ,X A A X A A ai f t ioz 9 6 3 A A

X A A /♦ 1 /» 11 A J a N S 2 ! 6 W l l A 11 X 'X A A A A A a i N o o i 0 1 2 3 X

X A A A 1 ! A v / N V O d i1 ^ '> - A A A X A a i A i o o s S 2 3 A A

A A A X 1 1 A 1 V / N . VOd' A A

A A A y * A A a wo I 0 9 3 A A

X A A X ^ 1 A a i A I 0 2 i 02? i A A

X A A X A A a i ^ o o s 0 ^ 3 A A

; • A A A 1 11 A l E B m i 1 023! A A

X A A X A A m o s OOE? ♦ A

A A A / • A L A A

X A A X A A V / N V O d A A

X A A A 1 I I A 1 awoot'f 0 9 3 ! A A

A A X A A v / N V O d A A

/ • A A A ■> f A 1 a i ^ o s i ! os'6ZJ! A A

X A A A A A a t ^ o i 0 S 3 A X

X A X A 1 I I A 1 awooi ^1 ss?; A X

A A A A A A a i ^ o L 0 0 L 3 A A

X A A A 1 ^ (1 A ] awoot 1 0tl3, A X

A A A A A A a v M o o i 6 6 - 6 W A A

A A A A 1 ^ 11 A uIgCO 1 02wj! ^ f1 ^ ,

X

/ »

X

X

X

X

/ *

" / I

X

A

X

X

/ *

A

A

A

A

A

X

A

A

A

X

X

X

/ «

X

X

X

X

>A

A

X

X

A

A

A

A

A

A

A

A

A

A

X

X

A

A

A

A

A

A

X

A

X

/ »

A

A

A

A

A

A

A

A

A

A

X

/ •

A

A

A

A

A

A

X

/ *

/ •

X

A

A

A

A

A

A

A

A

X

A

A

A

X

A

A

X

/ *

X

A

X

A

X

A

A

X

X

/ *

X

X

X

/ •

X

/ •

X

A

A

X

/ *

/♦

A

A

A

X

X

/♦

/ »

X

/ *

X

A A A V 6 6 0 i P l O L 9 0 )|n-orpue|v>od-AAAAAiN pî suoiieaiunuiujo^ pueiôjA A A 9 W « S i 0 0 i 8 0 ^n-o ru i6n td -AAMM ^gm'U|6n |^ [A A A 9 2 9 9 2 9 S 0 2 L E + |U')ue|d'MMM u0iie30|-0} 9 6u!î| iNVldA X A ; PSWQ090l^ \ ;dU-X3dld7VWAA 1»UJ9)U|BHIA A A 8 1 2 8 2 8 S S f r l O tau ejpauiddjd'AAAAAA suoiêstuntiiuKO ssauisng eipeujadjdA A 1 I1 81^8 066 0Z80 ! ^njauapcuuid-AWAM âtuaûi apeuuuJ

A X A S L 8 1 I L 9 U 9 0 luoD iSoq noA-se-Aed'MMM ^soh noA se Aed

A 1 X 11 E£Z:C06 690^0 ! ))n'o^'su!d'AÂ^M )»uja)U| IA / • 0 0 9 Z 6 S 6 8 U 0 ^n oD 'e jn^so 'AAMM p i i e j n^sQ

, / • / * A i8£l68£ 0080l jpiiqjo'wuvw P41 iaN|Bt»qio|/ • A A OOSOfr i ES210 u j 0 3 ' ) d U J d i u | ' ) i q j 0 7 W M \ M ^ v u a ^ u i ^ q j Q

A A 1 ^ i s u s i u : f ^fn'o^'ûxAuo'MMM idiuayji xAuolA X A Z . 6 8 0 0 Z 8 0 ujo3'S)soqdo^duo7vwvM S^SOH do^s SUQA / * A 1 QOi£ 19U 020 1 )in-03'0UdAVSAAAM OUdA/XlN 1

A / • A S9k9 091 0Z.80 >|n'03'u6!SdpSU'AAAKM uSfSdOSNX /< A ES60 920 0080 1 jau'uiejpiiu'MMM luejpiiM |

A X A S S W S S E S t i « 0 >|n-o3iauMdu*A(\MM 3{d la^MvaNA A A LnS lU 0080 ! uj03')inueâuvv\AAM )in ue^qaN I

A A A 0 0 0 0 2 i 0 0 0 8 0 ) ( n w j n q ! i e 3 s ; a u M A A M p n x n J n q i | e > s > a N

1 / * \ ^ 1 1 6981 820 0080 1 uio:>-ucM: eu;au'MAw\ suoêsiunuiuio^ uot)e|iDaN |A X X ^ 9 S f r i 0 i 8 0 ; a u ' s j d ) ) e u j ^ a u ' M \ A A M s j a u e ^ d N

A X 1 I8989tr 8S8i0 1 ;au-:)i!6eujiduvv\MM )|i6eM 19N jA A A 2 0 6 0 I P L 0 1 9 0 Oû j ) jun ;auvvuvkM pn suo ivnos ) |U |paN

A ~~A A 0 0 0 0 £ 9 1 8 0 9 0 :

A A X V I Z I 8 6 2 0 0 8 0 ) a u o ; a u r A i \ M M p n e j a ^ a n a N' / •

A ; / • i' 2frl0 £16 0080 1 UiO -){4Û^q^Û-AÂÂ^^■^■■ 1

A X A 8888 02 1 0Z80 ) |n '03 'sa iueu 'MAAM ossau ieN

\ ^ / » 1 ^ 1j ES2Z 82E 0080 1 ))n-03-]ejis)UJ'/MMM iaai3)U| |ej)sm |X X 002 US EfrSLO )|n-oru6!s^pqÂ^pue)p{UJ-^^ÂM u&saa qa/y/v pue|pi|/4

/ • A 1 9m 921>« 020 i )(n'03'iau0J^dui'MAi\M jauooai/y |A X A 9 f r l 8 Z > « S U 0 ;du-sAxeuj-M\AAM suoi^nfos laujaûi sAxenA /♦ 1 ' )|n-;du-xoq||euj7vuv\M pit âuiaûi ■■■!

A X A 0 0 2 9 0 0 1 8 0 8 0 Luo3-Siuaujouioi6eiu-AAMM uuaiuoMA A ) ^ 11 e A i 1 jauuosiujnjAAMM uosiumil

A A A S Z I O S ^ S P 9 0 ) |n o3 'eun |vwAMA lao iaû i eun i

A X A 1 OWZZZLlZiOl )|n'oruis[pua6d|'MAAAA )aN WSr puaGgai \A A 0 0 0 0 2 2 W 2 t 0 ^n'o^ pua6e|*/wA(uv\ ûiaiu} pua6an

, / • / < 1 X i1 WSfr2i6£Sl0'[ >au-duJOxia)(vwvsM jaujaûi duKoua)i |A A A 0 2 0 E 0 f r Z LV I O ) | n - 0 3 - p d u u 0 3 a ) ) - A A M M p a u u o : > a ) |

\ A A X 1 66^/ 0Z80 1 uJO -JzrMMM suotinios ueztlX A A 2S00 Z IZ SP90 u j 0 3 ' ) j e u i 0 j ' M M M ) j e u i O |

A A A \ 2222 190 0080 1 ^n os-qaMUi'MMM s^yvâN qaMurE 1V Z Z Z Z Z I O L B Q

561.6 iP6S QZQ [U £ t 9 l £ 0 0 S Q

£68268 tmO [O i E E E E V Z Z i O

3SU99 ZitiO [P £ Z i Z l O 0 ^ 8 0

ldu -xu | )e j )U jVMMM sa3 (AJ»s t au jaû i xu | | eAU |

)|n'03iau0û('WMM p»i ;aiicqu| |)|n-03'SJ9U9UJ9;urAAAAAA pil &J9U9UJa)U|

>{n 03 SUOt OUIOXl't»UJa>U!VWWW> p 1 SUCMyXUOJj l»UJ Ut jû ' q^ l 'AAMM p i " ] s sau i sng j o j ) 9UJd |U |

i j n ' 0 3 } e J t u a ? } » U A A M M

SOZl SSL 0£80 I)9U-per/v\AAAA U0!)ej0di03 BuisiyaApv âujaûj

:>jn'03'; L{ja;ur/AAw ;soqja^^1096 98^^ OZO

99U iZZl OZO [9 0 H ? t r 2 0 2 1 0

SZPBIZZ 1910 [0000 E888 020

uio^-q^dPurMAAAA pii X6o(ouipei jd)ndui0>jd}uiUJ03 )|f>jtlil1-MAW feM^SOH I

ui03')|n}Jisoq-/vuvNM S9>!M»S Suiisoh dAip^ddAHiUiNgnH]âu'jnuqnq'MA/wv|

^n-03-sû| | )0q-MAfVM sa^ iA jas (a tusûf s ] |u t | )OH

uiO^^qnoMvwwA sucMV tos lauja^m tUHp' OH |l3U )fn6u!isoi| MMM )in BUIJSOH

(iJ03su|ga>0puinbajjcifA/ywAi^

8 8 0 5 5 5 L 0 Z . 8 0 I M O A V O O l S O l 1 \ / 3

i i i B B d d - e u v c a i | a u o i u iaaB pue sqauoiu g I

l A l d 6 6 6 1 7 3 A i r a O l A i O d d S t i 3 A t i 3 S a 3 X \ / 3 I G 3 a

u i o o - a o e d s A s e a ' f v n M MqaM aifi jcy jaiQjBd pajsnji jno^

yâoedsAseg

6U!)soh

Hostingo

CasyspaceCn^ your trusted partner for the web

w w w . e a s y s p a c e . c o mH I G H Q U A L I T Y W E B H O S T I N G F R O M O N L Y £ 2 5 P A

F r e e D o m a i n w i t h A L LWeb Hosting Pacicages

aC A L L U S T O D A Y O I M 0 8 7 0 7 5 5 5 0 8 8

I

a3

- o

r - '

r » -a >

c

1J i£

JS

n

5 V

*

2A )

a '55fC D > ^ .

r a w

5->( 0 i a . c

S . 2 11 s a S!£

" ■ £4 : x

1i i O ) •g Q .

sc

aa s S s

tfto

1 1/1 1 S S 3

0)

hfi . O

i le j :

l |s ij PoM^ internet Ltd wvvw.powemet.co.uk 101908 60S188 )[ ✓ i ✓ : ! 1 1 1 ✓ 11 * 1[ ✓ i l ✓ i(£60 [[10MB j 1 11 11 K ✓ 1 ^ 11 1Proweb (UK) www.proweb.co.uk 0 5 0 0 6 3 6 3 4 3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 9 . 9 9 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 PurplePaw Ltd www.purpte-paw.co.uk I J n / a ( 1 ✓ ti X ,1 ^ ii ^ ^1 ✓ 11 ^ 11 1 1 ✓ 11 £40 II25M8 i 1 1 i 1 1 ^ P ✓ 1 Il1 1Qawebhosting www.qawebhosting.coni 0 1 3 2 5 3 0 1 8 7 9 ✓ ✓ X X X X X ✓ £ 5 0 1 5 0 M B ✓ ✓ ✓ ✓ ✓ X

Quh Internet iMNWi#MMcni«bau* 0 T m 2 1 2 1 9 9 ^ ^ " X X ti * 11 * 1 ✓ ii£60 1l i 20MB ji 11 I' 1 1 ^ I I ✓ (1 ✓ 11 ^ 1Rapkthost Ltd www.rapidhost.co.uk 0 1 6 2 8 4 0 0 6 5 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 0 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

R E D N E T L t d w w w. r e d . n e t j[01494 513333 [1 ✓ J ✓ : ! ✓ i l ✓ I 11 v ' J f ✓ f(POA 1i [ N / A ( !1 11 11 * « ✓ II1 X 1SAQ Internet Ltd www.saqnet.co.uk 0 8 7 0 7 3 7 7 7 0 0 ✓ ✓ ✓ X ✓ X ✓ ✓ P O A 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓

I Scotland On Line www.$cottandoniine.coA li 0800 027 2027 f ✓ 1 ✓ ! [ ! 11 il ✓ 1f : i ✓ liPOA i[f25MB \1 ^ )1 1 ( ! 1 ✓ I ^ II1 1S e i r e t t o w w w . s e i r e t t o . c o m 0 7 9 0 9 6 9 6 8 4 0 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 4 9 1 5 M B ✓ ✓ ✓ X ✓ X

1 Shared Knowledge Lti www.sharedknowiedge.net ,[01707 885800 i\ X ! ✓ 1 1 ( f ^ fl ✓ II 1I ^ fl ✓ j|£50 1II500MB 11 !! ✓ j 1 » ✓ B ✓ |i1 ^ 1Smartways Internet www.smartways.net 0 1 6 0 4 6 7 0 5 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 SOS bitemetlMwww.sost.net 01769 574457 || ✓ ✓ 1 ^ l i ✓ fl 11 ^ fl ✓ |)POA 1i i N / A I1 !I i 1 I I ✓ 1 ✓ 11 y 1S t i K l i o 2 0 n l i n e w w w . s 2 o . c o . u k 0 8 7 0 7 4 1 7 2 2 6 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ X ✓ X

1 f tF i n / a i ✓ X 1 I f X X li ✓ 1i 4 X |;£47.50|II10MB ]( S1 11 I I ✓ s ^ 11 X 1Ta l k - 1 0 1 w w w . t a t k - 1 0 1 . c o m 0870 754 1011 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ P O A N / A ✓ X ✓ ✓ X

|The Cyber Miii Ltd www.cyb^milt.co.uk 401757 249342 ✓ J ✓ I I ✓ w * 11 ✓ 11 11 i t ✓ -J o [1100MB 11 1t 1I ✓ S ✓ y 1 X 1The Host For You www.thehostforyou.co.uk 0 8 7 0 7 4 4 1 6 0 7 H ✓ ✓ X ✓ ✓ ✓ ✓ £ 6 2 . 5 0 5 0 M B ✓ ✓ X ✓ ✓ X

[Theftame www.thename.co.uk : f n / a ! ! ✓ " I T 1 * l [ * ( I X * 1! * !l ✓ II £60 1!|25MB 1: 1 * 1I ✓ H * 1 ^ II1 ✓ 1Timewarp lnterr>et Ltd www.timewarp.co.uk 0 8 7 0 7 5 7 11 4 0 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 2 0 1 5 0 M B ✓ ✓ X ✓ ✓ X

[Totai Connectivity Providers Ltd www.tcp.co.uk [02380 571300 j| ✓ i ✓ l i i l ✓ II 1\ ✓ )1 ✓ [ i £ 9 9 jil15M8 ji■ 1( ✓ j1 X w ✓ 1 I1 I t 1T r i n i t e L t d w w w. t r i n i t e . c o . u k 0 1 2 9 6 3 0 0 3 0 0 ✓ ✓ ✓ ✓ X ✓ ✓ £ 3 0 0 5 0 M B ✓ ✓ ✓ ✓ ✓

1 U K F A S T M H M M M ,{0845 458 4545 [( ✓ 1 ✓ 1 ! l J ✓ il 1f [ ! ✓ |f£199 1150MB j1 11 I' 11 11 ✓ 1 ✓ |i1 ^ 1UKIP Ltd www.ukip.co.uk 0 1 7 7 2 9 0 8 0 0 0 ✓ X ✓ ✓ X X ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

■ss1 ^[01527 502367 \\ ✓ 1 ✓ I I ✓ I f ^ J ✓ II ^ 1( 1 ✓ 11 £50 'il No limit [i 11 11 ^ II ✓ ii ^ 1I ^ 1U V N e t w w w . u v . n e t 0 1 7 5 3 7 7 6 6 9 9 ✓ X ✓ X ✓ ✓ ✓ X £ 4 8 1 0 M B ✓ X ✓ ✓ ✓

j VaiueWebHosts www.vaiuewebho$t$.com J l n / a 1 1 ✓ 1 X i l V t l ^ {l X 1 * 11 * 1 ✓ !i£8.99 :II No limit 11 i! 1i 1 1 X 1 11 * 1V e t n e t w w w . v e l n e t . c o . u k 0870 744 0151 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 9 2 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Virtuai internet www.vi.net [0800 117744 II ✓ ✓ 1 1 ! ^ '1 ✓ II 11 I I ✓ II £120 1| ( 2 5 M B 11 11 11 I t ✓ 11 11 1V i s i o n I n t e r n e t S e r v i c e s w w w. v i s n . c o . u k 0 8 4 5 1 2 3 2 6 9 4 ✓ X X X X X ✓ ✓ £ 1 3 . 9 9 2 5 M B ✓ ✓ ✓ ✓ ✓ X

1 Web Age www.01webdestgn.co.uk 0870 on 6621 ij ✓ ✓ 1 1 l i X f ✓ (1 i1 ^ II ✓ li£149 i!| 100MB 11 " 11 11 ^ It ✓ 1 ✓ I1Web Tapestry Ltd www.wetrtapestry.co.uk 0 8 0 0 0 1 5 1 7 1 8 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 3 5 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Weirfûsion www.webfusion.co.uk 10115 917 0000 li ✓ i X : t ✓ I f ✓ il 11 ^ 11 ✓ 11 £99.95 |j 1.5GB 11 \1 ^ 11 I I ✓ B ^ \1 ^ 1W e b s u r f U K w w w . w e b s u r f . c o . u k 0 7 9 3 1 3 8 6 4 5 5 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 1 2 0 N / A ✓ ✓ ✓ ✓ ✓ ✓

Communications Lid www.xcalibre.coJMl Ij 0870 050 0080 ✓ 1 ✓ ] I S 3 [ ^ II ✓ 1 i1 ^ !i ✓ f! £39.95![j 50MB Ii " 11 I1 I I ✓ 1 ✓ t\ ^ 1Zen Internet www.zenwebhosting.com 0870 6000 971 ✓ ✓ ✓ ✓ X X ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ X1 Zetnet Sen^ Ltd www.zelTjet.com j| 0870 743 0565 \\ ✓ i ✓ 1( ^ tl 1 X 1 ^ 11 ! l ✓ jj£50 1ij50MB 11 ^ )! ^ 11 ^ i X If ^ t1 1

XColibre^ô^îC/CSOBôsoooso

Hosting that doesn't sting

Hosting Solutions to Buzz about!

S t a n t > 0 a 9 a > V B r i » n o t * t « r a y t » w « o i i i » o n . M w ) f f l M t w p s ( 1 C K m w i c a o ( c r M c * l i n i » m «OMng yoii «w uWmate apAM, M XCamm «>p«c«tiofts wtt> XC«Nbr» oolocaaon MtvtMs(tocltcatadaefvar is tor your UM only wHhoutffta tiling sMtaîHha^tdattcantrM.n a a d t o s h a r e .

- S S £ -

• Fasthosts is keen to stress its credentials for dedciated servers •XCalibre offers a broad range of server options, including shared and dedicated packages

Practical webdesign N o v e m b e r 2 0 0 6 111

Glossary

HH I T SGlossary

A C C E S S I B I L I T YThe physical and technological barriersto people with disabilities interactingwith a web page or site.

A L I A S I N GAliasing occurs when a computermonitor, printer, or graphics file docsnot have a high enough resolution torepresent a smooth line of a graphicimage or text. Aliased parts of animage appear to have jagged edges.

A N I M AT E D G I FA GIF graphic file, consisting of twoor more images in sequence, timed togive the effect of motion.

A N T I A L I A S I N GA technique used by text processingand design software to smooth thejagged appearance of text and lines.

A small program designed to run overa network, such as the Internet. Itsheld on a server but works on yourcomputer, typically inside a browser.

A fi l e t h a t c o m b i n e s a n u m b e r o fo t h e r fi l e s i n t o o n e f o r t r a n s f e r . T h e s e

are often compressed to reduce size,or encrypted for security.

American Standard Code forInformation Interchange. A set of128 alphanumeric and special controlcharacters used for computer storingand printing of text. Used by HTMLwhen transmitting data over the web.

Advanced Streaming Format. AmuKinrtedia streaming format.Developed by Microsoft for Windows.

Active Server Page. Dynamicallycreated web page, generally usingprogramming scripts and integratedwith the HTML of a page. The ASPcode is then compiled on-the-flyby the server and outputs standardHTML. Ifs a server-side scriptinglanguage, mostly used on Windowsplatforms for interactive functions.

B A N D W I D T HThe amount of data that can betransferred over the network duringa fixed amount of time, usuallyexpressed in bits per second (bps).A hosting server will usually allocateyour site a fixed amount of bandwidthusage for a given period of time.

A U T H E N T I C A T I O NThe method used to identify a user,program or computer on the web.

A banner is a graphic image (static,animated or rich media) that is placedo n w e b s i t e s a s a n a d v e r t i s e m e n t .

A graphic image that's composed of apattern of dots, or pixels. Also knownas raster graphics. Common bitmapformats include are GIF, JPEG and PNG.

Short for weblog, a blog is a webpage that has short, frequent updatesmade to it, such as an online diary,and is operated through a contentmanagement system to makearchiving easier.

B O O K M A R KA link to a particular website,stored by a user for future use.

B R E A D C R U M B SThe path that traces a visitor's stepsthrough your site. Site analysissoftware can show how your visitorsuse your site.

B R O W S E RSoftware that is used to interpretHTML commands and display webpage content thus enabling the usert o l o o k a t v a r i o u s k i n d s o f I n t e r n e t

resources. The two most widely usedb r o w s e r s a r e M i c r o s o f t I n t e r n e t

Explorer (IE) and Mozilla Firefox,

typically define colours using RGB(red, green, blue).

C O M P R E S S I O NA method of packing data in order tosave disk storage space or downloadtime. JPEGs are one example ofcompressed graphic files.

C O N T E N TThe words, images, pictures or soundsthat make up a website.

A cookie is a file, held on your; computer, that's associated with aI specific website. Cookies identify

website visitors to the site, enablingj you to customise web pages for them.I Get consent from your visitor before

you store a cookie on their machine.

C R A W L E RA program that visits websites togather entries for a search engine.

Cascading Style Sheets. A featureof HTML that enables designers tospecify style information, such asfonts, size, and colour for a web page.CSS can also define the placement ofelements on a page.

A web browser feature, which storescopies of regularly accessed files on acomputer's hard disk to speed access.

C A S E - S E N S I T I V EUsed to indicate that characters typedin will only be recognised if entered int h e c o r r e c t c a s e .

Common Gateway Interface. A set ofr u l e s t h a t d e fi n e h o w a w e b s e r v e r

communicates with another pieceof software on the same machine,as well as how the other piece ofsoftware talks to the web server.W h e n a u s e r fi l l s o u t a f o r m o n aweb page, the server passes theinformation to a small program thatprocesses the information and maysend back a confirmation message.T h e C G I s t a n d a r d d e fi n e s h o w

the data is passed back and forthbetween server and application.

C L I C K T H R O U G H R AT EThe number of times visitors click on alink (or advertisement) on a page, asa percentage of the number of timesthe page has been displayed.

A computer or software programt h a t i s u s e d t o c o n t a c t a n d o b t a i ndata from a server, typically acrosst h e I n t e r n e t o r a n e t w o r k . E a c h c l i e n t

program is designed to work with oneor more specific kinds of server, andeach server requires a specific kindof client: a web server, for example,recognises only web browsers.

Content Management System. Aprogram or script that automates themanagement of the material you addto your site.

Stands for the colours Cyan, Magenta,Yellow and Key (black). In printdesign, colours are defined as apercentage of each of these colours.For example, the CMYK abbreviationfor the colour black would be 0, 0,0,100. In contrast, computer monitors

D E D I C A T E D L I N EA permanent connection to theInternet that's separate from atelephone l ine.

D H T M LDynamic Hypertext MarkupLanguage. An extension of HTMLthat enables web pages to react toa user's input, such as displayinga web page based on the type ofbrowser or computer that end usersare viewing a page with.

D I R E C T O R YA directory such as Yahoo! (commonlymistaken for a search engine) is asubject guide, typically organised bymajor topia and subtopics. The maindifference between a search engineand a directory is that a directory doesnot make use of a spider or robot.

D O M A I N N A M EThe main part of a web address that isits unique identification, for example'mysite.com' or 'flowers.co.uk'.

D O W N L O A DTransferring files or data fromanother computer to the one you areusing. The opposite of upload.

Dots per inch. Specifies the resolutionof an output device such as a printeror printing press. For input devices e e p p i .

Digital Subscriber Line. A fast Internetconnection over a regular phone tine.

D Y N A M I CA ctynamic web page has elementsa d d e d t o i t b e t w e e n w h e n r t i s

requested and when it is downloadedby the end user. It usually has a fileextension of .php or .asp. Static pagesare written in HTML and will appearthe same every time you load them.

D Y N A M I C I PAn IP address that changes each timeyou connect to the Internet.

E N C R Y P T I O NConversion of data from its originalform to one that cannot beunderstood by others. Only the senderand recipient have the key to convertthe data back to its original form. Thepurpose of encryption is to preventunauthorised people from viewingd a t a a s I t t r a v e l s a c r o s s t h e I n t e r n e t .

To save a file in a different format,often one associated with anotherprogram. For example, many AdobePhotoshop files can be exported tob e c o m e G I F o r J P E G fi l e s .

Stands for electronic magazine andrefers to websites modelled on printmagazines, or magazines that areonly available online or via email.

F I R E W A L LHardware or software that acts as asecurity filter that can restrict types ofn e t w o r k c o m m u n i c a t i o n . M o s t o f t e nused between an individual computera n d t h e I n t e r n e t .

Vector graphic software from Adobethat allows a single animation orvideo file to play on all browsers, aslong as the Flash plug-in is Installed.One of the advantages of Flashanimations is their relatively fastd o w n l o a d t i m e .

F O R M SHTML tags that define and labeltext-entry boxes, check boxes, radiobuttons and drop-down menus tocreate on-screen forms for collectingi n f o r m a t i o n f r o m t h e s i t e v i s i t o r .

A single graphic image in ananimation sequence.

F R A M E SA website design method where twoo r m o r e H T M L fi l e s a r e v i e w e d a sdistinct areas within a single page.Usually one frame remains static,while the other changes. Often usedas a website navigation method.

F R E E W A R ES o f t w a r e d i s t r i b u t e d f r e e o n t h e n e t .

File Transfer Protocol. Enables youto copy or send files from onecomputer to another via the Internet.Anonymous FTP is a method fordownloading files from an FTP serverwithout using a logon account.

Gigabyte, or 1,024 megabytes (MB),commonly rounded down to onebillion bytes.

Graphics Interchange Format.A lossless graphics format that'ssupported on the web. GIF imagesdisplay up to 256 colours. GIFs arebest used for line drawings, smalltext-based graphics and companylogos, while photos are best saved Int h e J P E G f o r m a t .

The number of times a web object (apage or a picture within a page) hasbeen viewed or downloaded.

H O M E P A G EThe main or first page of a website.

The act of storing and providinginformation over the Internet.Hosting companies offer hostingspace for lease, enabling companiesor individuals to set up their ownwebsites or other Internet content.

Hypertext Markup Language. HTMLis the language of the web, HTML is aset of tags that are used to define thecontent, layout and the formattingof the web document. Web browsersuse the HTML tags to define how todisplay the text.

H T M L E D I T O RA software program for editing HTMLpages. With an HTML editor youcan add elements like lists, tables,layout, font size and colours to anHTML document, just like using aword processor. An HTML editor cansometimes display the page beingedited exactly as it will be displayedo n t h e w e b .

H T M L T A G SCode that identifies the differentparts of a document so that a webbrowser will know how to display it.

Hypertext Transfer Protocol. Theprotocol for moving hypertext filesacross the Internet. Requires anHTTP client program on one end,and an HTTP server program (suchas Apache) on the other end.

H Y P E R L I N KS e e L i n k .

H Y P E R M E D I AAn extension to hypertext to includegraphics and audio.

H Y P E R T E X TTe x t t h a t i s c r o s s - l i n k e d t o o t h e rdocuments in such a way that ther e a d e r c a n r e a d r e l a t e d d o c u m e n t s

by clicking on a highlighted wordor symbol. A web page is the mostcommon example.

I M A G E S L I C I N GBreaking an image into smallerpieces to make it load Into a webb r o w s e r f a s t e r .

I N T E R L A C EStoring partial data from a singlegraphic image in multiple sequences.The purpose of interlacing is tohave a partial image initially appearonscreen, rather than having to waitfor the image to appear in its entirety.

I N T E R S T I T I A LA web page, typically anadvertisement, that appears in thesame or a separate browser windowbetween the current and the targetweb page, typically lasting 10 secondsor less and giving a courtesy skip-through option to those who have noi n t e r e s t i n i t .


Glossaryo

Apple's computer music application,now upgraded to include the world'slargest downloadable music store.

A programming language designedf o r t h e w e b . J a v a i s s i m i l a r t o t h e C + +

language, but simpler.

J A V A S C R I P TJavaScript is no relation to Java,despite the similarity of the names.JavaScripts are used for rollovers, forautomatically changing a formatteddate on a web page, for creatingpop-up windows, and other simplefunctions. JavaScript code can beembedded in HTML pages anddirectly interpreted by the webb r o w s e r o r c l i e n t .

Joint Photographic Experts Group(the name of the committee thatcreated this file format). A lossyfile compression format designedto compress colour and greyscalecontinuous tone images. JPEG filesare best used for photographs andcomplex graphics.

M E G A B I TOne eighth of a megabyte. Am e a s u r e m e n t u n i t m o s t o f t e n u s e d t od e fi n e b r o a d b a n d a n d o t h e r n e t w o r k

speeds. Mbps is megabits per second.

M E T A T A GA specific kind of HTML tag thatc o n t a i n s i n f o r m a t i o n a b o u t t h e

page itself. Typical uses of metatags are to include information forsearch engines to help them bettercategorise a page.

Multipurpose Internet eMailE x t e n s i o n . A s t a n d a r d u s e d w h e n a

computer needs to communicate withanother program about the type offile being sent.

M I R R O RTo maintain an exact copy of a fileor files held on another server. Busyd o w n l o a d s i t e s o f t e n m a k e m i r r o r

arrangements to ease the demand ont h e i r o w n s e r v e r s .

M O U S E O V E RA JavaScript element that triggersa change on an item (typically agraphic change, such as making animage or hyperlink appear) in a webpage when the mouse pointer passeso v e r i t .

An abbreviation for kilobyte or 1,024bytes.

Kilobits per second - a measure ofbandwidth, particularly used withm o d e m s a n d s l o w e r b r o a d b a n d l i n e s .

K E R N I N GThe horizontal space between lettersi n a w o r d .

K E Y W O R D P H R A S EThe words and symbols used as aninput for a database search.

N A V I G A T I O NS T R U C T U R EThe hierarchical relationship betweenpages in a website, mapped out in asite diagram, which is then used todetermine the links that will appear ineach page's navigation bar.

A pointer to another document,most often a pointer to another webpage. Hyperlink and hotlink are oldersynonyms for a link.

Used to describe file compressionmethods that discard file informationin order to make a file smaller.

Abbreviation of megabyte - amillion bytes (strictly speaking 1,024kilobytes). Most often used to definehard disk capacity.

M A S T H E A DA graphic image positioned at the topof a web page to tell the visitor whatpage they're on.

M A I L I N G L I S TA (usually automated) system thatenables people to send email to oneaddress, whereupon their messageis copied and sent to all of the othersubscribers on the mail list. In this way,a group of people using differentkinds of email access can participatein discussions together.

N E T I Q U E T T EAcceptable behaviour online - forexample, don't write emails entirely incapital letters, because many peoplec o n s i d e r t h e s e u n c o m f o r t a b l e t o r e a d .

N O F R A M E SAn element commonly used onframed pages. This will be displayed ifthe browser does not support the useof frames and will supply the browserw i t h a c l i c k a b l e l i n k .

Portable Document Format. PDFfiles can be viewed using Adobe'sAcrobat cross-browser, cross-platformcompatible text viewing software.

A script programming language.Programs written for a CGI gatewayare often written in Perl.

PHP Hypertext Preprocessor is ascripting language often usedto create dynamic web pages. AMySQL database holds the necessaryinformation: PHP takes the requiredinformation and sets it out as a webpage on demand.

P I N G I N GA basic form of contact between aclient and server. It's often used to testwhether a connnection is working asi t s h o u l d b e .

P H I S H I N GA form of Internet fraud, wherea dummy website is created that

resembles that of a legitimateorganisation. Emails are sent outrequesting recipients to log on to thesite. The aim of the exercise is to dupepeople into revealing access codesand passwords.

P O P - U P A DAds displayed in a new window.

P O P - U N D E R A DDisplays in a new window behind thec u r r e n t b r o w s e r w i n d o w .

P O R T A LA web portal is a site that creates asingle point of access to informationc o l l e c t e d f r o m d i f f e r e n t s o u r c e s .

Portable Network Graphics. Agraphics format supported by theweb, though not by all browsers.

Stands for pixels per inch. Used tod e s c r i b e s c r e e n r e s o l u t i o n .

P U B L I S H I N GUploading a website to a web host.

P R O T O C O LA formal set of rules and formatsthat computers use to communicatewith each other. FTP and HTTP areexamples of protocols used to transferfiles between computers via the net.

U U I C K T I M EA format for video playback. Aplug-in enables a browser to displaycontent saved in QuickTime format.

R E C I P R O C A L L I N KA link exchange completed betweent w o w e b s i t e s .

R E F E R R A L SR e f e r r a l s a r e t r a c k e d i n w e b s i t e

logs, showing where a site's visitorsoriginated from and the search wordsthey used to find it.

R E L AT I V E L I N KA way of presenting a link to oneof your own site's pages in anH T M L d o c u m e n t . W h i l e a n a b s o l u t el i n k i n c l u d e s t h e w h o l e a d d r e s s

(e.g. http;//wvvw.thisdomain.com/glossary/this.page.html), arelative link shows only the path tothe page from the position of thepage in which the link is placed (e.g./glossary/th is.page.html).

Red, green, blue - the colours usedby display devices (monitors. TVs, etc)to define colour. The six-characterhexadecimal codes used to definecolours in HTML (e.g. #102AFF) uset w o c h a r a c t e r s e a c h t o d e s c r i b e t h e

colour's R, G and B components.

R I C H M E D I AMedia with more than text andimages, using sound, video andspecial effects via programs such asFlash and Shockwave, and often someinteractive capabil i ty.

R O L L O V E RA feedback cue that is activated whenthe mouse cursor is moved over aparticular element or button on aweb page.

Really Simple Syndication (formerlyRich Site Summary) is a platform overwhich a webmaster can instantlyd e l i v e r s u m m a r i s e d i n f o r m a t i o n a b o u tthe latest, most important content ontheir site. This summary is usually a listof headlines and snippets displayed inan RSS reader or some RSS-compatiblew e b b r o w s e r s .

S E A R C H E N G I N ES o f t w a r e t h a t s e a r c h e s o n l i n edocuments for specific content

Search Engine Optimisation. Theprocess of increasing visitors to a siteby increasing a web page's relevanceranking on a search engine resultsp a g e .

A computer that holds files on theInternet, ready for other computers orc l i e n t s t o a c c e s s .

S H A R E W A R EA software package that's madeavailable to be copied and shared.Many are offered without thecomplete functionality of the fullsoftware or expire after a trial period.

S H O C K W A V EA plug-in that enables a web browserto display rich media content.

S H O P P I N G C A R TSoftware program that displaysand sells goods online. Manya r e d a t a b a s e - d r i v e n f o r e a s i e r

organisation and stock control.

S P A M B O TA robot that scours websites, lookingfor email addresses, which the botowners then send spam to, or sell.

S P L A S H PA G EA website's introduction page, usuallyusing flashy graphics.

S P I D E RSoftware program sent out bysearch engines to find web contentby following hyperlinks across theI n t e r n e t .

S TAT I C I P A D D R E S SA number that is assigned to acomputer by an Internet serviceprovider to be its permanent addresso n t h e I n t e r n e t .

S T O P W O R DFrequently used words such as you,for, with, etc. that are ignored bysearch engines.

S T R E A M I N GStreaming is the act of sendingmedia, such as sound and video, incompressed form over the Internet tobe played as it arrives. The user doesnot have to wait to download a largefile before they can play it.

S U B M I S S I O NThe process of submitting a new siteto a search engine for inclusion in itsdatabase, so that it appears in listings.

i v ^ T V i i aAn HTML structure used to organisew e b c o n t e n t i n t o r o w s a n d c o l u m n s .

E a c h c e l l w i t h i n a t a b l e c a n c o n t a i n

text, images or both.

T H R E A DA series of posts, related to the samesubject, in a discussion group or forum.

Tagged Image File Format. A high-quality image format.

T I T L E T A GAn HTML tag thafs used to define awebsite's header, appearing at thetop of a browser window.

The number of visitors to a givenw e b s i t e . I f s m e a s u r e d w i t h s t a t s s u c has hits and page access.

T R A F F I C N O D EA group of information pages on aw e b s i t e .

T R O J A NA computer program - hidden inanother program - that destroyss o f t w a r e o r c o l l e c t s i n f o r m a t i o n

about the use of the computer.

U N Z I P P I N GThe act of extracting files froma zipped file or similar archive.

The transfer of data from a computerto an online destination, such as aw e b s e r v e r .

Uniform Resource Locator. The uniqueaddress for a file on the Internet.

V E C T O R G R A P H I CA graphic image drawn inshapes and lines, called paths.

W E B P E R F O R M A N C EThe time rt takes a page to load.

Microsoft's Web Embedding FontTool. It allows fonts created with aweb page to travel with the page,regardless of fonts available in thebrowser used to view it.

World Wide Web Consortium. Thegroup responsible for defining manymajor standards used in web design,s u c h a s H T M L a n d C S S .

X H T M LExtensible Hypertext MarkupLanguage. An XMLTHTML hybrid.

Extensible Markup Language.A format for defining pieces ofinformation and how they relate toe a c h o t h e r w i t h i n a s e t o f d o c u m e n t s .

Extensible Style Language. Aspecification for separating stylefrom content v>^en creating HTML orXML web pages. Similar to the layoutfunctionality that CSS provides. O


P r a c t i c a l

Next issue

BETTERW E B

GRAPHICSMake smarter images

in less time

P L U SConvert your Photoshop mockup to CSS

Take control of your blog with Movable TypeSet up a local test server

Complete on the CD: AceHTML ProA n d m u c h m o r e . . .

On saleTuesday?Noveml^r f

(Correct at time of going topress, but subject to change)


Practical Web Design, Future Publishing,30 Monmouth Street, Bath BAl 2BW, United KingdomTel: +44 (0)1225 442244 Fax: +44 (0)1225 732295

E D I T O R I A L• EcJitor Richard Hill

[email protected]• Art editor Julian Jefferson

[email protected]<• New media editor Sam Cavender

[email protected]• Contributors Rachel Andrew, Paul Boag, Rob Buckley,

David Foreman, Craig Granneii, Kris Hadlock,Alex Haylock, Karl Hodge, Paul Hoskins, Phil Hoskins,Tom Hughes, Gary Marshall, Dave McFarland,Amit Patel, Mark Penfold, Marc Peter, Gavin Roberts,Andres Rojas, Paul Wyatt

• Production Sally Hales, Mike McNally,Esther Woodman, Ashley Young

• Cover photographer Jesse Wild• Cover stylist Ami Penfold

A D V E R T I S I N G• Head of advertising sales Adrian Major

[email protected]• Key account manager Giles [email protected]• Display sales executive Helen Crossmanhcrossman@futurenet,co.uk

• Classified sales executive Laura [email protected]

P R O D U C T I O N & C I R C U L A T I O N• Production controller Craig Broadbridge

[email protected]• Ad production coordinator Tiffany [email protected]

• Software copyright coordinator Sarah Williamsswi l l [email protected]

• Circulation product manager Richard [email protected]

M A N A G E M E N T• Publisher Kelley Corten• Senior editor Nick Merritt• Group art editor Ian Miller

SUBSCRIPTION ENQUIRIES• To order, renew or check your subscription details,

visit www.myfavouritemagazines.co.ukAlternatively, call our order line on +44 (0)870 8374722; or, for general subscription enquiries,call +44 (0)870 837 4773

• Copyright © 2006 Future Publishing Ltd• All contributions are submitted and accepted on the basis of

non-exclusive worldwide licence to publish or license others todo so unless otherwise agreed in advance in writing. PracticalWeb Design recognises all copyrights and trademarks. Wherepossible, we have acknowledged the copyright holder. Contactus if we haven't credited your copyright and we will alwayscorrect any oversight.Distributed by Marketforce (UK) Ltd, 5th Floor, Low RiseBuilding, Kings Reach Tower, Stamford Street, London 5E1 9LSTel: +44 (0)20 7633 3333. Overseas distribution byFuture Publishing Ltd. Tel: +44 (0)1225 442244.

• Future Publishing Ltd is part of Future pkFuture produces carefully targeted special-interestmagazines, websites and events for people who share""" a passion. We aim to satisfy that passion by creatingtitles offering value for money reliable information,

CU t smart buying advice and which are a pleasure to readMEDIA WITH PASSION Or visit. Today we publish more than 150 magazines,

65 websites and a growing number of events in theUK, us, France and Italy. Over 100 international editions of our magazines are

, also published in 30 other countries across the world.

Registered office: Futnjre Publishing Ltd, Beauford Court, 30 MonmouthSt ree t , Ba th BA l 2BW

Future pic is a public company quoted on the London Stock Exchange(symbol: FUTRl

• Non-executive Chairman Roger Parry• Chief Executive Stevie Spring• Group Finance Director Jotin Bowman

Tel: +44 1225 442244 w/ww.futureplc.comThe text paper m this magazine is totally chlorine-free,

f The paper manufacturer and Future Publishing have beenV independently certified m accordance with the rules of

T7c r / - ' Fo res t S tewardsh ip Counc i l .

recycle114 November 2006

Whtn you hove finished withthis mogozinc pleott rKycl« it.

-■V i&M

Internet payments made simple

do1

mn' cflHSeoreTrading. 0800 028 9151

v(V(w,securetra(lffl.c(®. Colled SeoreTroding

gfl Secure^ Relioble/cNQilobilit/^ Right price^ Nice people

When you're already worrying about site design, accessibility, SEOand fulfilment, you could do without losing sleep over how you'regoing to handle online payments.

Setting up the payments side of your web business doesn't have tobe a headache; it's possible to have a sophisticated, reliable, securepayments system in place that won't damage your nerves or yourbank balance.

With our industry leading Support team just a standard-rate phonecall away, SecureTrading tal<es the pain out of payment processing.Setup and integration are so simple that even those with very little

web design/development experience can take payments onlinesimply, reliably and securely.

Packed with features, our products are surprisingly affordable. Onelow annual fee covers all product features with no hidden extras,while a personalised monthly transaction fee covers connection tothe banks during processing. That's all - no other charges, nomatter how many currencies or card types you process andregardless of how many products you sell.

To request an e-brochure and free no-obligation quote, call ourSales team on 0800 028 9151 or email [email protected].

Online payments: we're the experts so you don't have to be.

www.securetrading.com 0800 028 9151 [email protected] trust

FREE. JP0P3 Mailboxes & 4 Page WebsiteRegister your domain names with

freeQarking.co.ukand get all these benefits and more:

•FREE 4 Page Website• FREE Web Forwarding• F R E E P O P S E m a i l• F R E E W e b m a i l• FREE Email Forwarding• FREE Online Domain Tools

Transfer in . uk FREE!Transfer your Nominet. uk domain

names to us completly FREE OFC H A R G E !

freefSja rking.co.ukFreeparking Registrars Inc. (HostingFort) DE19810, USA

Modify your domain names quicklyand easily using our suite ofindustry leading online domainmanagement tools. Use our OnlineDNS Manager to maintain yourown zone file. You wi l l never needto "transfer" a domain name again.Don't let your old host hold domainn a m e t o r a n s o m !

HAccredited Registrars

C e n t r a l N i c "Accredted Registrar

A C C R E D I T E DR E G I S T R A R

N o m i n e t . m AJ * i B U K ( N T S R N E T H A M f ' S O M £ A * l c S A T K > « 4

Trusted by thousands ofI n t e r n e t P r o f e s s i o n a l sfor over seven years