practical webdesign summer 2006

^n-ROM » •CREATE CUSTOMISED SEARCH TOOLSViU_nMl .EXTRACT MEDIA FROM SWF FILESPOWINSI^fj- PC AND MAC COMPATIBLE J|

Pract ical• PHOTOSHOP & CSS VI DEO TUTORIALS

elping you build better web^

o

svealed: 20 musMiave free programs id online tools for authoring, graphics, 1)ntent management and more M • Password

protect pages irD r e a m w e a v e i

. ! »THIS MONTH

U N B E ATA B L EHOSTING OFFER

TURN YOUR DIGITAL P ICTURES INTO A BEAUTIFUL PHOTO BOOK

1&1, the UK's No.l Web Host, offers comprehensive yet affordable Web Hosting packages. These packagesenable both home users and small businesses to create websites, use high-level e-mail, register their owndomain name with anti-spam & virus scanning included. Exclusively from 1&1, every Shared Hosting package

comes with a completely free Photo Book which is stylishlydesigned and created from your uploaded digital images,

(rrp. £54.85).B e s t O F t h e •

. n e tA w a r d s

E 0 0 5

1&1 HOME PACKAGE

^ 4. 9 9£5.86 PER MONTH inc. VAT

I N C L U D E S 1 F R E E . C O . U K D O M A I N

The 1 &1 Home Package offers everything you needto create an attractive Internet presence for yourfamily or hobby vi/ebsites. With inclusive domains,e-mail, web space and tonnes of tools, you've gotall you need to get started.

1 free .co.uk domain800 MB web space300 e-ma i l accounts10 GB monthly traffic

A l s o i n c l u d e d

■ Free printed Photo Book■ New Dynamic Content■ 1&1 WebsiteBui lder

■ 1&1 Online Photo Gallery■ 5 Symantec® Virus Scans■ Spam filtering for all accounts■ 24/7 Express Support. . . and much more.

free photo bookWith all 1&1 shared

'"''wL-is HUB 0. mpa.,«

offer ends 29" August 2005

For more information please visit www.1and1.co.uk

w w w . 1 a n d 1 . c o . u k 1&10 8 7 0 2 4 1 1 2 4 7

W e l c o m eo

P r a c t i c a l

Helping you build better websites

Welcome.Ocquiring the skills to createawe-inspiring websites is vital,

but without the right tools inyour web design arsenal, you're nevergoing to be able to display your designtalents to their fullest.

With this in mind, we've brought you aselection of the best design tools for both the Mac and PC,and we've even put them on the CD for you. Elsewhere inthis issue, you'll find our usual generous selection of greatCSS, Flash, Dreamweaver and PHP tutorials to get yourt e e t h i n t o .

Finally, it's time for a couple of goodbyes. Firstly, PracticalWeb Design's Art Editor Chris Bates is moving over to .netmagazine (www.netmag.co.uk). Having done a brilliant jobof redesigning Practical Web Design at the start of the year,Chris will be wielding his Crayons of Power on behalf of the.net community. And the last goodbye, well, that belongsto yours truly Having had a great time relaunching PracticalWeb Design, I'll be joining Chris on .net as Editor.

We'd both like to take this last opportunity to thank youfor your continued support over the last 10 months. It's beena blast... O

Our promiseWe're dedicated to bringing you the best magazine

CommunityG e t i n v o l v e d - t h i s

is your magazine

We're not just here to show you how to build greatsites - we want to see what you can do, too. As partof our dedication to community, we feature sectionswhere we print your sites for all to enjoy

i n s t r u c t i o nBringing you the bestprojects, by the best

At Practical Web Design, we appreciate that there'sa lot to learn to become an expert in web design, sowe ensure that our tutorials are written by the bestdesigners out there.

InspirationHelping you take thenext step in design

E d i t o rc l a n . o l i v e r @ f u t u r e n e t . c o . u k

By showcasing the very best sites, and by picking thebrains of the best web designers, we hope to inspireyou to create better websites.

Craig GrannellCraig's love for CSS is unconditional,unless he's talking about conditionalcomments, that is (page 60)

Karl HodgeFor this issue's feature on open sourceweb tools, Karl blagged loads of freesof tware , Erm . . .

Gary MarshallAs usual, Gary's nose for a good newsstory has come up trumps, though thes m e l l i s b l o o m i n ' h o r r e n d o u s !

R a c h e l A n d r e ww h a t R a c h e l d o e s n ' t k n o w a b o u t C S Sisn't a surreal bag of those melt-in-the-mouth flying saucer things.

Keep up to date withthe magazine atwww,pwdmagxo.uk

Practical Web Design 3

C o n t e n t sThe best place to find the latest regulars, tutorials,resources and features in your favourite magazine

On the coverA quick guide to this month's cover

ROM >CR(ATICL»STOMIS{C>S€ARCHTOOLSnwivi .ixTRAaMUMHIOMSW^ MU5

Build your site ^forfree! tf

^CSS'VTOOCS I QtXSIlONSANSWEKD I

Make money now! p78With Zen Cart and a little PHP magic, you could bemaking a fortune by selling stuff on your website

Better tables with CSS p72Transform your HTML tables into something witha little more pizzazz with the power of CSS

Password protection p50Use Dreamweaver to password-protect yourwebsite from prying eyes

Load images with Flash p66How to load content into a Flash movie, withprogress reports for added interactivity

This month p8Is video really choking the Internet, or are ISPslooking for an excuse to make more money?

Perfect podcasts p56In just a little over half an hour, you could bethe proud producer of a perfect podcast

Internet TV p84Software for video editing and encoding, and even acomplete publishing system that costs you nothing

Improve your site p27Our expert gives another reader's site the makeovertreatment and shows how to create a great logo

4 Practical Web Design

S U B S C R I B E . . .TURN TO PAGE 47

AND SAVE 35% OFFTHE COVER PRICE

i i M

We reveal 20 of

Contents Summer 2006c

F e a t u r e sWhere we let web design loose on the masses

27 Reader's site makeoverA boys' toys hobbyist site receives treatment i w Access Denied

O T a b l e s f o r d a t a _ <)Co»bK' UlCooUes' :f; iFornH* tmogM* Olnfo

A n t O l F r a n c o L i R I « R a s C c C a s f l e

Semltonic Fe«4lng Strangely Rne

Tfiaa Otimore -me LIpttlcK Consplracie*

7 2

Tu t o r i a l sThe best projects, from the best designers

50 Password-protect pagesw i t h D r e a m w e a v e rProtect sensitive web pages from prying eyes

Sort out yourpodcastwithP o d S e r v eSet up and publicize apodcast feed withoutstretching bandwidth

60 Use conditional commentsw i t n e s sClean up your CSS by separating out the hacks

gg Load images dynamicallyw i t h F l a s hHow to load content into a Flash movie

72 Design attractive datatables in CSSTransform HTML tables in to usable features

78 Sell from your site withZ e n C a r tCreate a PHP-powered shopping cart

34 Cover featureThe web designer's open source toolkit

On yourC D ^ ' ^ ,We've got software, tutorial |files, and great video training! IS o f t w a r e VFull versions of Flash Decompiler and Search Engine Studio

6 0 m i n u t e s o f v i d e oSor t ou t your nav iga t ion w i th Pho toshop , ^and improve your know/ledge of CSS

Great podcastsL i n k s t o o u r l a t e s t f r e e a u d i o e d i t i o n s

T u t o r i a l fi l e sCode and resources to help you complete every project


40 Site build-offFour top designers get to grips with listings

I M l I T I M M B M M M M W B M W r

RegularsThese are the bits you get every month

5 LettersT h e c o s t o f e n h a n c e d e m a i l s e r v i c e s

3 This monthAre ISPs increasing prices because of video?

12 Site challengeThe competition among readers is hotting up

13 Ask the expertsAdvice on image editing, CSS and DOM

An opportunity to get 35% off the cover price

65 Overseas subscriptions; W i t h f r e e d e l i v e r y t o y o u r d o o r

I 111 Back issuesf ' . M i s s e d a n i s s u e ? F i n d i t h e r e

114 Next monthIs your website as accessible as it should be?

a a B W M M W M « M M M i W ' I H I I I I m i l l I I I I I I I I I I I l l i m i I I I

R e s o u r c eEverything you need, in one handy place

34 Software reviewsA selection of video software under scrutiny

33 Book reviewsNew books about DOM scripting, Ajax and CSS

9 3 e n v yThe best-designed sites from around the world

9 8Two full programs, plus video tutorials

102 Builder's bookmarksA handy list of over 140 web design sites

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

112 GlossaryHelpful A-Z reference for web building jargon

FREE!Subscribe to ourpodcasts for free!Every two weeks,we broadcast freshnews, reviews, tipsand features p32

P r a c t i c a l

Helping you build great websites

L e t t e r sThis is the pageto wax lyrical ab

our chancehe page where you get your chlyrical about pretty much anyth

W R I T E A N D

W I N !

If you have any thoughts aboutthe magazine, what you'd likeus to cover, or how we couldimprove it, drop us an email, oreven a letter, to; Letters, PracticalWeb Design, Future Publishing,30 Monmouth St, Bath BA1 2BW

[email protected]

• Sure It's a sexylaptop, but soft pom'sa bit strong isn't it?!

Cover controversy

O've really enjoyed reading yourmagazine over the past year, but Ithink the cover is getting more and

more ridiculous. Why do we have to have awoman on the front of every cover who poutsat us over her laptop? It's not quite soft porn,but I haven't bought the magazine for staringa t b e a u t i f u l w o m e n . I ' m a m a r r i e d m a n a n d

find the covers of the magazine unhelpful. Mywife doesn't like them either. I had to get a bigmarker pen over the last cover! OK, maybe I'malone In thinking this, but could we please havea change from the 'beautiful woman' coverfrom time to time? On another note, please do

carry on with Paul Boag's podcast - I find itreally informative and a great additionto the magazine.Ian A Gray

As a rule, covers with beautifulw o m e n a t t r a c t t h e a t t e n t i o n o f

casual readers (of both sexes!) farmore than other Images do. Also,

t h e m o d e l c o v e r s a r e w e l l e s t a b l i s h e d

as a style for the magazine, which helpsregular readers recognise It on the newsstands,but that's not to say It can't be changed Ifthere's a reason to do so. Tell us what you think!

Where do I s ta r t?

Over the past several years, I've builtup my company website, www.spruceindustrles.com, from strictly

I n f o r m a t i v e t o a f u l l - b l o w n e c o m m e r c e s i t e . I ' v e

been hard pressed to get better positioning onthe various search engines, but I do understandthat this takes patience and a lot of tweakingof keywords. I'm more concerned that I startedupdating the site so long ago that the look and

' feel might be outdated. I tried not to do

anything too fancy because 1 wanted it to becompatible with all the different browsers. Inyour expert opinion, should I update the lookand feel? Do you have suggestions as to what Ishould start with: navigation, graphics or type?

; Dan ie l Josephs

Personally, we'd always start with the sitestructure, which then naturally decides yournavigation. If you have a simple structure, astraightforward links bar will do the job, whilea complex architecture may require tabs or

pop-up submenus and so on. Combine yournavigation requirements with your corporateidentity (logo, corporate colour palette and so

I on) and you've got your basic look and feel

right there. As for the details, our regularMakeover section will provide you with

Invaluable tips and pointers every Issue (It's on

page 27 this month).

o1 ^ i :

Skip adtro?'ve been reading PWD for about seven

I months and look forward to each newissue. It's been a great tool for me as

far as increasing my knowledge and skill. Also,the new CD packaging is great, and I canunderstand your choice of cover images (usinga model for consistency). I have to say, though,that I was annoyed with the 16-page advert for1&1 in the August Issue. I know you have topay the bills, but it was rather tediousthumbing through all the pages of this ad toget to the rest of the excellent content in themag. Can you split the ad up across the maginstead, or just move it to the end with ail theother ads? That way, we can get on with

grabbing the info that we purchase PWD for.W i n s t o n O u b i d a d

How could you not be fascinated by the detailsof l&l's hosting packages? But thanks for yourcomments anyway Anyone else have anyopinions? We'd like to reassure you that those16 pages were in addition to our usual

' page count and none of our normal content

w a s s a c r i fi c e d .

K T O i [ H ®□ I S

J i

It's not a tax

V

STAR PRIZE!! «■ ■ i m a l■ I V I y V M J f e

Oour magazine is worth every penny.However, I was disappointed to see yourshort article on DearAOL, a website that is

pushing misinformation. [We reported in PWD28 onthe petition at wvvw2.dearAOL.com/letter againstAOL's proposal to charge businesses for 'premium'email delivery.] I would recommend that you fullyinvestigate and disclose both sides of an argumentbefore pushing a one-sided message to the public.

I'm employed by ExactTarget (www.exacttarget.com), a proponent of this solution, but this solution isnot a tax at all; a tax would have implications acrossall emails sent. This does no such thing. A comparisonwould be sending a package by regular mail vs

overnight freight. There's no 'degrading' of your

delivery; rather, it's an opportunity to upgrade yourdelivery for a small fee. With phishing and spam so J who cares if that heFding Is nonsense? You'veprevalent in the email industry, I'm surprised that folk just bagged yourself this COOl calibration toolare fighting this enhancement to email.Doug Ca r r

We're not opposed to enhancements, just scepticalabout the long-term Implications of 'tiered' emailservices. If AGL profits from providing a 'premium'service, this gives it an incentive to entice customersto use that service and a disincentive to improve anyo t h e r s e r v i c e s . We ' r e a l s o c o n c e r n e d t h a t A O L ' s s c h e m e

Isn't In users' interest. If mass marketers can bypassAOL's spam filters by paying to do so, this doesn'tmean I'll receive less spam, but AOL stands to makemoney when I do. What do other readers think? O


M 1 0 5 H 2 5 P 5 5 R 2 5( f o r e - m a i l u s e r s ) ( f o r h o m e u s e r s ) ( for profess ionals) (for resellers)

I G b b a n d w i d t h 2 . 5 G b b a n d w i d t h 5 G b b a n d w i d t h l O G b b a n d w i d t h128Mb webspace 512Mb webspace 1Gb webspace 1Gb webspace

C e n t o s 4 . 3 C e n t o s 4 . 3 C e n t o s 4 . 3 C e n t o s 4 . 3P l e s k C o n t r o l P a n e l P l e s k C o n t r o l P a n e l P l e s k C o n t r o l P a n e l P l e s k C o n t r o l P a n e l

1 0 m a i l b o x e s 1 0 m a i l b o x e s Multi-site (up to 3 sites) Manage 10 domainsP O P 3 / I M A P 4 a c c e s s P O P 3 / I M A P 4 a c c e s s 2 5 m a i l b o x e s 1 0 0 m a i l b o x e sW e b m a i l i n c l u d e d W e b m a i l i n c l u d e d P O P 3 / I M A P 4 a c c e s s Spam protect ionSpam protect ion Spam pro tec t ion Spam protect ion PHP, Peri, & PythonAu to - responde rs CGI, PHP, Peri & Python CGI, PHP, Perl, Python 2 5 d a t a b a s e sMailman mail ing l ist SSH & SCP support Tomca t suppo r ted U n ' l t d s u b - d o m a i n sU n ' l t d a l i a s e s & r e d i r e c t s MySQiyPostgreSQL DB MySQU/PostgreSOL DBs Un' l td auto-responders

Frontpage extensions Sub-domain suppor t Secure site support Secure site support

j u s t j u s t f r o m : f r o m

' 1 . 0 5 1 . 6 5 ' 2 . 9 0 1 ' 6 . 4 5

reg is ter your domain today. . .• c o m , . n e t , . o r g , . u s , . i n f o , . b i z , . n a m e £ 7 . 2 5

. c o . u k , . m e . u k , . o r g . u k £ 1 0 . 7 5

• e u £ 1 4 . 9 5

cse t you r

f r e e

. ^ y i s i t u s , , c a l l u s f r e e o njaDwebsolutions.co.uk osoo 043 0 b3

all hosting plans come with a 28-day money-back guarantee©2006. Prices include VAT (unless marked t) & are per month for hosting packages, or per year for domains (unless mari ed t, which are for two years). Prices marlced • or t are rxjt available

on nv>nth!y contracts (prices show are an approximate equivalent for comparison). See our website for more details. All major CreditA3et«t Cards & PayPal welcome. T&C Apply. e&OE

This monthKeep on top of the latest web design happenings with ourroundup of all the relevant news, views and schmooze

•K i l le r

ISPs claim video is chokingtiie Internet, but are theyexaggerating the problennso they can increase prices?

Oram 'Star Wars Kid' toangry Japanese commuters,s o m e o f t h e m o s t t a l k e d -

a b o u t o n l i n e c o n t e n t i s

video, and the most talked-abouts i tes are v ideo serv ices such as

Yo u T u b e . B u t t e l e c o m s fi r m s

are warning that the demandfor video could bring the net to its knees.

US firms Verizon, BellSouth, AT&T and theirrivals are lobbying the US Congress to blockproposed new Internet legislation. According to

J t l ©

CNN's Tim Folger (wvvw.cnn.eom/2006/TECH/internet/05/25/the.web.tol l ) , the firms "wantto charge websites for the speedy delivery ofstreaming video, television, movies and otherhigh-bandwidth data to their customers" - butCongress may pass legislation to stop whatFolger describes as "a two-tiered Internet, witha fas t l ane f o r webs i t es ab le t o a f f o rd i t and a

slow lane for everyone else."

Rising bandwidth bills are clearly a concern,not just in the US but in the UK, too. Verizonlobbyist Tom Tauke says: "The plain truth is thattoday's backbone networks simply do not havethe capacity to deliver all that customersexpect." Bellsouth chief architect Henry Kafkaclaims that typical Internet access of around 2GBa month currently costs the firm about $1 (55p)per person per month, with the rest of the feeused for marketing, support and other costs. Butif people watch eight hours of Internet video

per day - the same amount of time that a US

• The growing availability of video in servicessuch as the iTunes Music Store is placing agrowing burden on Internet connections

household watches TV each day - Kafka claimsthat the cost rockets to $112 (£51) per person

per month.Internet video still represents a tiny

percentage of online traffic, but even if usagegrows, it seems that Kafka is being alarmist:his own figures indicate that five TV-qualitydownloads per person per month - which ismuch more than the current average - wouldboost ISPs' monthly bandwidth bills to around$4.50 (£2.45), which is still a fraction of whatthey charge consumers. The Inquirer (www.theinquirer.net/?article=31700) agrees, arguing:"US comms companies have been massively

overcharging for ages, and fear that video tellyw i l l b u t c h e r t h e i r c a s h c o w. "

Could a two-tier Internet happen here? It

already exists: some ISPs already limit or blockP2P usage, and most cheap broadband packageshave monthly data transfer limits. As more of usturn to online video sites, the amount of datawe transfer will also increase - and if yourbroadband is capped, that could mean a nastyand expensive surprise. O


This month Summer 200^- c

Retail therapyActinic unveils its designer-friendly new direction

Ohe well-known ecommerce firmActinic Is making big changes to itsonline store applications, with a

brand new product aimed squarely at sitedesigners. Instead of a one-size-fits-all shopsystem, the new Actinic Designer enablesdesigners to create sites in Dreamweaver, addecommerce features and provide clients withthe necessary software to take care oftheir business without mucking up your

masterpiece. Designer will cost £350, and clientlicences for the shop software (which can beco-branded with your own logo) will be £200for Catalog Client and £450 for Business Client.

In addition to Its Designer product. Actinichas also revamped its Catalog shop-in-a-box.New point-and-click design features make itmuch easier to change the design of your site,while added shop features include new and

related product listings, best-seller listings,email marketing and Amazon-style 'also

bought' listings. Catalog 8 will cost £379 ands h o u l d b e a v a i l a b l e t h i s s u m m e r . V i s i t w w w.

actinic.co.uk for more details. O

• Actinic has completely revamped its productrange to give designers more control

Hack a t tackTurkish hacker pulls off the biggest site attack in the world

On just one day, a Turkish hacker whocalls himself Iskorpitx managed tod e f a c e a n u m b e r o f w e b s i t e s i n a

single attempt - and when we say 'number', wemean 21,549. Iskorpitx first appeared on the

hacking scene in 2003 and was the first Turkishsite-defacer, wreaking havoc on some 117,000s i t e s b e t w e e n 2 0 0 3 a n d 2 0 0 6 .

However, he outdid himself with his latesteffort, which used an ASP script to replace histargets' front pages. You can find out how hedid it - and whether your own website isvulnerable to similar hacks - at vvww.zoneh.org/news/read/id=206009. O

• This is the result of Iskorpitx's mass defacement.It doesn't really seem to be worth the effort

S m l l l l o ndomains registered

as of May 2006. Thefive millionth washosepipebanbuster.co.uk(Source: Nominet)

?| eoI Igo) OS

I I

IQ £

p £ aCO E I

I Celebrate the web's most creative time-wasters

Ajax-tasticAdobe offers Ajaxtools for free

Ohe latest firm to clamber aboard theWeb 2.0 bandwagon is Adobe,whose Spry framework for Ajax is

available for free download from http;//labs.

adobe.com/technologies/spry. Spry is aJavaScript library for designers that enables youto use XML data in HTML pages. Because it'swritten in JavaScript, you can use it in almost

any web editor, not just Adobe's own GoLivea n d D r e a m w e a v e r t o o l s . I t ' s t h e r e s u l t o f

discussions with web designers in which Adobefound that people wanted to experiment withAjax, but weren't sure how to get started.

Adobe promises that Spry is "easy to

implement for users with basic knowledge ofHTML, CSS and JavaScript", that "markup issimple" and "JavaScript is minimal". It'sprovided a range of documentation, how-toguides and example applications, including anRSS reader, a photo gallery and an interactive

product table.Although you can download Spry now,

A d o b e i s n ' t fi n i s h e d w i t h i t . T h e v e r s i o n

currently available is a preview build, andAdobe is asking for your feedback to helpit continue development. O

i i

• Adobe's Spry framework is designed to make Ajaxeasy. The firm's also provided handy demos

^ BUS UNCLEnMtube.com/watch?v=RSHziqJWYcM" This year's 'All Your Base' - a clip of an angry man

remonstrating- w i t h a b u s■ passenger. It's

spawned7 ■ remixes and

e v e n a n o n l i n eT-shirt shop. All

. together now;t o o l o u d l y ! 1

L A P T O P R E V E N G Ewww.amirtofangsazan.blogspot.com ;If you're selling a laptop on eBay, you might wantto get rid of thefoot fetish pics,dodgy porn andfrankly creepycamera phones h o t s o f w o m e n ' s

legs first - or seethem appearo n l i n e h e r e .

T I M E T O S H I N Ew w w . t i m e - t o - s h i n e . c o mThis month's footy-themed viral comes courtesyof Finish, Vanish,Cillit Bang,Calgon and AirWick, and it's adull kicker. Whyc a n ' t w e k i c kCillit Bang's BarryS c o t t a r o u n di n s t e a d ?


This month Summer 2006

IncomingInDesignIt's looking good, but youcan't get it until 2007

Greative Suite 3 isn't due out until2007, but that hasn't stoppedAdobe from offering a sneal< peeic

a t i t s swee t su i t e . The fi rm has o f fe red a

glimpse of publishing package InDesign CS3'snew features, and ifs impressive stuff. Thereare Photoshop-style effects for objects, vastlyimproved control over transparencies and theability to work with multiple objects at once. Ifyou're on a Mac, you'll be pleased to know thatInDesign and the rest of the suite will beUniversal Binary, which means they'll run onb o t h I n t e l M a c s a n d o l d e r P o w e r P C m o d e l s .

CS3 is an important release for Adobe, as It'sthe first version of the package since it acquiredMacromedia. But why has the firm spilled thebeans on InDesign so early? We suspect it's a

spoiler: Adobe just happened to unveil InDesignthe week before its arch rival QuarkXPress 7went on sale. Keep an eye on wvvw.adobe.comfor developments. O

P i c tu re t i i i sIVlicrosoft unveils apotential JPEG killer

Oancy a look at FrontPage'sreplacement? Microsoft has releasedCommunity Preview 1 of Expression

Web Designer, which you can download forfree (it's unfinished software, so you do soat your own risk). EWD promises to buildstandards-compliant sites using CSS andXHTML, and it runs on Windows XP SP2,W i n d o w s S e r v e r 2 0 0 3 a n d W i n d o w s V i s t a .

In addition to its web designer program,Microsoft has unveiled a rival to the JPEG file

format, called Windows Media Photo (WMP).It's technically impressive, offering much betterquality than JPEG when images are compressed,but technological superiority doesn't necessarilymean much in the wider world. If it did, we'dhave dumped JPEG for JPEG2000 years ago. O

r &

J a k o b N i e l s e nand Hoa Loranger

Pr io r i t i z ingWeb Usabi l i ty

J®Prior i t iz ingWeb UsabilityJakob NielsenThe usability gurur e t u r n s w i t h 4 0 0

pages of provocativedesign advice,although Amazonwon't let you seeI n s i d e t h e b o o k o n i t s

site. Why? Because thewhole volume isprinted in 2pt Wmegreen type on a bright (red background. No, ^n o t r e a l l y . f

c - nU n d e r t h eI r o n S e aKeaneT h e T e s c o - V a l u e

Coldplay have a newalbum, and we hopethey spent moremoney In the studiothan they did on theartwork. It ' l l sellsqullllons, of course.

I

i

•Microsoft in compliance shocker; Expression WebDesigner creates standards-friendly sites using CSS

SamsungQ30-SSDYes, it's a laptop, butthis Is no ordinaryportable computer.With 32G8 of flashmemory instead of atradi t ional hard disk,the Q30-5SD readsd a t a 3 0 0 % f a s t e r

t h a n t r a d i t i o n a l d i s k -

b a s e d m a c h i n e s . I t ' salso largely shock-proof, ultra-light andspooklly silent - butfor now, it's onlya v a i l a b l e i n S o u t h

K o r e a . B a h .

-A f Liquid Light (www.liquidlight.co.uk)Finn Taylor co-founded Liquid Light (www.liquidliglit.co.uk) in the days before InternetExplorer, and launched MSN Europe. His client list is a who's who of business, from snnallbut nimble operations to giant multinationals such as BT, IBM and EMI

T h i s m o n t hw i t h . . .

M ▲ 6

Q You're anointed King of the Internet.What des ign c r imes get peop le

p laced in the dungeons?Finn says... Here are a few: gratuitous useof Flash and long Flash intro sequences thatget in the way of actually finding the contentyou're looking for; making text too small toread - yes, all designers, including myself, are

guilty of this one, but if I wanted to squint I'dsit further away from the screen; and usingt a b l e s t o b u i l d a s i t e a f t e r 2 0 0 3 . G e t w i t h

proper CSS layouts!

QWeb 2.0: is it the same old web withn i c e r t y p o g r a p h y ?Finn says... Web 2.0 is far more than somenice typography. However, it's probably oneof the most misrepresented terms. I would

loosely define Web 2.0 as being about thereplacement of desktop applications withweb-based applications - tools like Flickr,

Writely, Meebo, Odeo, MSN Live, BaseCampand Netvibes are good examples.

QDo any current web trends makeyou do a happy dance?Finn says... The happy dance? I'm not sureI would go that far, but I think the push for

standards-compliant HTML with table-lesslayouts is great. Blogs are very cool - it'salways great to see all the wackos out there -and podcasts are great.

.Finn Taylor says Liquid Light started in thedays when "interactive design was aboutcreating CD-ROMs to send by post"

QDo you have any nuggets of hard-earned wisdom you'd l i l<e to share?Finn says... A lot of people seem to overlookthese simple lessons that I'd suggest youcommit to memory:

a) Remember, design is there to communicatebrand and a message. As designers, we shouldremember we are not trying to show off our

design prowess. An interface should noto v e r s h a d o w t h e c o n t e n t .

b) Never underestimate a client's sense of badtaste. Never show a design you're not happy

with, because that will be the one that they'llprobably choose,c) Always keep a sense of humour Web designcan be a thankless task, where only yourm i s t a k e s a r e r e m e m b e r e d .

d) Always over-deliver.

M M v - p t M h v t m o n

LandSecur i t ies

RetaMeri undersUnd customer) - W« understand reta i lers

I I . - 1

l ^ l kOb iK t

H o m e Ex is t ing Centres

R e t a t I P a r k s

G e n t r e t

R e c a l i o s r t a

f t O i r e R « t « ) t ) e v » i o p m e n t s

O p p o r t i r t o e i

N e w s B ^ t e d U

A b o u t T « f k C M r e e ti j > c a t o r

A b o u t u n d S c c u n t i o

C o n t i c t U s

W e w s t e t t e r

S u t e o t e h c r e

C o m t n . r c i . l L . i fi C o d . o f P r . c t i c .

\.Liquid Light builds complex sites for small businesses, multinationals and FTSE 100 firms


This month Summer 200^c

W O R DThe tastiest titbits of net newsSaying 'Web 2.0' could be dangerous:when the IT@Cork site publicised ItsWeb 2.0 conference. It received a

nastygram from O'Reilly Publishingand CMP Media's lawyers. CMP hasregistered Web 2.0 as a trademark,which means that nobody else can usei t . T h e r e a c t i o n ? Te c h C r u n c h ' s M i c h a e l

Arrlngton said: "I sense that a lynching Isabout to occur In the blogosphere, andTim O'Reilly Is going to be the person

lynched. Bloggers aren't going to troublet h e m s e l v e s w i t h t h e f a c t t h a t t h i s l e t t e r

Is from CMP, not O'Reilly." Elsewhere themove was described as a "scandal", with

Valleywag.com dubbing the whole thinga " s h i t s t o r m " .

Never mind, though: one of the topicsat this year's Web 2.0 conference was

"Defining Web 3.0: What's Next?" What's

next is lots of cash for us, because we're

going to trademark 'Web 3.0'. Mwahh a h h a h .

Ryan Block of Engadget has been ina bit of a fracas, too. It's all rather messy:Block attended a Microsoft media meet,which was filmed by Andru Edwardsand the footage posted on rival site

C r u n c h t

T r A d e m a r k S c a n d a t

B m" Z ' L -

•The LiveJournal team is dealing with"Nipplegate" after It upset breastfeeders

F E AT U R E R I C H PA C K A G E S

FREE SET UP - NO CONTRACT

F R E E D O M A I N N A M E *

F R E E A D VA N C E D W E B TO O L S

per monthAll-inclusive pricing includes:✓ Comprehensive control panel✓ FREE expert advice and support✓ Powerful web based email

8 M f f p ' fBROADBAND inc VAT per month

D O M A I NR E G I S T R A T I O N

£4 99p e r a n n u m

• Michael Arrlngton of TechCrunch predictsthat "a lynching is about to appear In theblogosphere" over Web 2.0 usage

Gear Live. Block emailed Edwards to saythat he hadn't "consented to beingfilmed ... and would appreciate beingremoved and not named", and Block'sboss Jason Calcanis weighed In; "Whywould you run that video without ourconsent?" The fight made its way to

Digg.com, at which point (according toValleywag), Block suggested his fellowbloggers anti-Digg the story to make Itdisappear - or as Valleywag put it: "HelpRyan Block hush up a story." Oh dear.

For us, though, the big story thismonth was about Nazis: Boob Nazis,to be precise. The Boob Nazis are pro-

•Sarky industry blog Valleywag is doing itsbest to wind up Engadget's Ryan Block afterhe asked a rival to remove video footage

breastfeeding women on LiveJournal,and user Arianamama's default profilepic is a shot of her breastfeeding herbaby - a shot that LiveJournal's on-t h e - b a l l a b u s e t e a m r e c k o n s b r e a k s t h e

rules. The Boob Nazis are having none ofIt though, and they're preparing to packup and leave LiveJournal; the L) abuseteam has apologised, although it's stilladamant that the default pic must be

changed. The Boob Nazis have dubbedthe whole sorry affair 'Nipplegate' - butunlike us, they're far too nice to suggestthat the U abuse team is simply makinga tit of itself. O

WEB HOSTINGstorage Space 2 5 0 M B 5 0 0 M B 2 0 0 0 M B 3 0 0 0 M B 2 0 0 0 M B U n l i m i t e d *

P O P 3 E m a i l A c c o u n t s 5 1 0 1 0 0 2 0 0 2 0 0 U n l i m i t e d *

Monthly Bandwidth 2 G B 5GB 2 0 G B 3 0 G B 2 0 G B 3 0 G B

MySQL Databases 2 5 1 0 5 0

S S L C e r t i fi c a t e ✓ ✓ ✓ ✓

PHP & ASP (Chitllsoft) ✓ ✓ ✓ ✓

FrontPage Extensions ✓ ✓ ✓ ✓E - c o m m e r c e S o f t w a r e ✓ ✓ ✓

Vi rus & SPAM F i l te rs ✓ ✓ ✓ ✓ ✓P o w e r f u l W e b m a i l ✓ ✓ ✓ ✓ ✓Auto Responders ✓ ✓ ✓ ✓ ✓ Snio^C o n t r o l P a n e l ✓ ✓ ✓ ✓ ✓

N e t w o r k M o n i t o r i n g ✓ ✓ ✓ ✓V i s i t o r S t a t i s t i c s ✓ ✓ ✓ ✓ ✓ ^

CGI Perl, SSI ✓ ✓ ✓ ✓ ✓

Firewall Security ✓ ✓ ✓ ✓ ✓

FREE Web Tools & Scripts ✓ ✓ ✓ ✓ ✓ ✓S M T P S e r v e r ✓ ✓ ✓ ✓ ✓ ✓

Daily Backups ✓ ✓ ✓ ✓ ✓ ✓

p e r M o n t h £ 4 . 9 9 £ 7 . 9 9 £ 1 5 ^ £ 1 8 ^ £ 1 9 , 3 9 £ 3 9 . 9 9Pay Per Annum £49.99 £89.99 £169.99 £199.99 £229.99 £459.99

Pay 2 Years SAVE 15% £89.99 £159.99 £319.99 £379.99 £379.99 £899.99

zcX

v v w w . n a m e s . c o . u k | s a l e s @ n a m e s . c o . u l i

C a l l u s o n

4 NAMESCQA W O R L D A P A R T

s w

Sffer applies to co.uk, .me.uk arid brg.uk domains only. 'Subject to availability and compatability of BT lineonnection fee. maximum 3p per minute within the UK from a BT landhne Other rtetwofk call rales may var38ter WR3 7GD. Pnces quoted exclude VAT at 17.5%. Cheques and major credit/debit cards accepl«

As part of our Site Challenge, we'veteamed up with Fasthosts to providesome cracking prizes. Entering the SiteChallenge is simple: send us your URL,we'll tell you what we think, and you'llbe in with a chance of winning one oftwo fantastic prizes.

Monthly prizeEach month, we'll provide the winner of our 'Reader site of the month' with aprofessional, shared hosting account for a year (worth £96). With this package,you'll enjoy professional web hosting with the UK's largest web host; your website will be hosted in Fasthosts' secure and reliable data centres, with lightning-fast response times and full redundancy. There are plenty of tools included withthe package, and you can find out more by visiting vvww.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 2006, we'll present prizes to the top 20 websites, with the numberone site bagging 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 (worth£700), with their choice of operating system(Windows or Linux). See www.fasthosts.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

for more details. As well as this top hostingpackage, the best site will win its owner ahigh-spec PC.

W O R T H

£ 7 0 0

ENTER NOW! Show off your site-building successes here. Well give you feedback,and you could win a prize! Email your site to [email protected]


' / ' - F

? ;- i." ^ V' l ..

Site challenge in association with

The Home of JonName: Jon HaywoodU R L :

www.thehomeof jon.net

when designing my

personal site, I wanted toach ieve a look tha t was a

good balance between practical andc r e a t i v e . I w a n t e d t o t h i n k a b i t

outside the box, but not so much asto make the s i t e l ook so eso te r i c t ha t

it didn't look professional.I built all of the images and

planned the layout with Photoshop.The most challenging thing was usingjust XHTML for the structure; thecontent is separated completely fromthe display, and all visual elements arehandled with CSS. The site provides a

way to change style sheets on-the-fly,so everything looks different, whilethe content is the same. I'm really

pleased with the outcome. Each pageis straightforward and easy tonavigate, yet fun to look at.

WINNER!★ ★★★★

Home » Images > Fantasy Gallery

Fantasy Gal leryThis is a gallery for fantasy art! I call it 'fantasy* only because it addresses 'fantastic'ideas - ideas that we normally do not encounter in everyday life. Here is where mostof the 'fine art' is located. If anyone would tike a print of a picture I do those as well.

view ; pie 3 Sort by ; | Date added '* 1 Descending tjo ]

I see the Light spirit of the Void Angel zulu Beastmerter

Dragon Elf Polemistis Angkel^ Light From Heaven Banished Angel

Ange ls and Demons- T h e W a r

The gallery looks very professional, but Jon's copy remains accessible and down to earth

Change your Skin Version jSWJTCH!

[ The Honr>e of Jon - Wctcomc Home

T h e H o m e o f J o n - W e l c o m e H o m e

You have reached the personal website which I^ Jon^ call home! Hereyou'll find all sorts of tilings that I am interested in - hopefully tiieywill be of interest to others also. The reason this is 'version 2' isbecause I had an older site - but I completely re-did it, making it looka little more pro, and added cooler and easier navigation. Ho-yeah! This site keepsevolving - hopefully it's getting better and not worse, =«=) - but I will have ail know,when the site is mature and full-grown, all shall look on in wonder and awe at all itsd ig i ta l g lo ry ! !

Note: You can search this site by clicking on the search tab located directly to yourleft! Also you can know at anytime where you are in ttie site by looking on thenavigation bar on the top of the page!

Such clean design has the potential to feel sterile, but Jon's choice of imagery adds depth and texture

I

M e n u u o o u i f

•Jon shares his prolific collection of stuff -thoughts, images, poems, essays, short stories

^ designverdictNeatly designed and easy to use - it 's hard tofault Jon's site, except that the chrome effectis start ing to loolc quite dated. I t sometimesfeels a l i t t le steri le, which clashes with thepe rsona l , wa rm app roach to the con ten t

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 9 / 2 52 2 / 2 52 4 / 2 51 8 / 2 5

8 3 / 1 0 0 .


Site challenge in association with fastnosts

L

Spiritual WisdomN a m e : A l a n M i s s o nURL: www.spiritualwisdom.org.uk

I developed this site with the aim of providing an introduction to the spiritual

insights contained In the writings of Emanuel Swedenborg, the 18th centurySwedish scientist and theologian. The particular aim of Spiritual Wisdom Is to

offer simple articles to those seeking spiritual insight on life. Thus, the main objective Isfor the site to be open, friendly, nonjudgemental and welcoming, and to cover a widerange of spiritual topics.

I studied computing back in the late 1960s, so this site has been a challenge In

bringing my skills up to date. The site was built using FrontPage, but without anystandard layouts. I've also used JavaScript and have recently started to Introduce someFlash. The greatest challenge has been striving to achieve a good search engine rankingfor the homepage and the Individual topic pages.

Spiritual Living

Alan's had a lot of fun with his navigationschemes; each page uses a different one.What's missing, however, is consistency

P r a c t i c a l

designverdictThis site is striking, but not for the rightreasons. I ts a dated look and, wi th a di fferentnavigation on each page, its consistency lies inits inconsistency. The lower pages in the sites t ruc tu re work toge the r, bu t none o f t hemseem to belong with the homepage.

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

. TO TA L

1 0 / 2 51 0 / 2 51 3 / 2 51 5 / 2 5

48 /100^

Spiritual WisdonThere is a universal spirituality which can beexpressed in many ways, but this site usesthe insights of Emanuel Swedenborg tohelp explain the meaning of our lives.

These words of spiritual wisdoma d d t o t h e a n c i e n t w i s d o m

of the world and are inharmony with manyspiritual insightsof the new age.

Saaed Scripture Click below to review the keySpiritual Principles underlyingthe con ten t o f t h i s s i t e .

Spiritual Principles

Click on any of the rainbow headings to discover more exciting wisdom tohelp make sense of your life and to support your personal spiritual growth.

The Hope fu l Year Emanue t Swedenborg L inks S i te Map Con tac t V is i to r^ Book

•The rainbow navigation scheme idea works well, though it would be easier to use if thepictures, rather than the bars, were 'clickable'

Faith DesignN a m e : H e i n r i c h F e r r e i r aU R L :

www.faithdesign.co.uk

oraphtcp h o t o

w^b-

faittxleagn

he l lo !tomytfigi taU

I created the website as a

portfolio for my digitala r twork . I ' ve used a

minimalist design so that a visitor'sa t t e n t i o n w i l l b e f o c u s e d o n t h e w o r k

and not be distracted by the website.

Using scanned imagery was fun; Ithelped to create a handmade feel tothe site, which was what I was aimingfor The s i te I t se l f was bu i l t w i th

Photoshop and Dreamweaver. I find updating the site very tedious at the moment, soI've been learning how to use Dreamweaver's template system and CSS, which I'll beImplementing In the future to help Improve how the gallery Is viewed.

> From the start, the look of this site isplayful, minimal and individual

Heinrich has managed to sayeverything he needs while pretendingto keep his Identity a secret

graphicp h o t o

faithdesign

j l M DI T T K

t - ' - - r

Info: Wsbrtte itmfo far Premier Perfbmars. The de«gn wm unu«dI i i U i ; N / A

The web portfolio page is simple, quick and easy to use, and shows the work off realtywell, but there are some unexplained missing links


Site challenge in association with

Viridian GraphicsN a m e ; D a v e R o t t i n oURL: http://viridian-graphics.com

With my Viridian Graphicswebsite, I basically wantedpeople to come and see

everything I have to offer design-wise.More explicitly, I wanted them to know

clearly what the function and purpose ofthe site was and to be able to navigate thes i t e w i t h e a s e .

My main medium was, and usually is,good or Photoshop, and for coding, I usedNotepad. HTML, JavaScript and a littleFlash were all used at some pointthroughout the project, too.

Flash was a new tool for me. What I

ultimately set out to do within this site isto make the Flash totally interactive, andmake the work pop off the page, but itproved too large a task for me.

I suppose what I'm most pleased with isthe overall aesthetic and colour scheme;it's got a real 'back woods' kind of feel.

f reev i f tuQlservewthe home of free web hosting

> FREE Easy to Use Downloadable Website Builder^ FREE Professional Website Templates & Design Tips^ FREE Flash Tutorials, Detailed FAQ's & Knowledge Base^ Feature Packed Hosting Packages from £1.50 a month^ Monthly Prize Draws with 2 Chances to Win an iPOD!^ £100's Worth of Software Free with every package.^ 24/7 Online Helpdesk, Active Forums & Regular Backups

20,000 Customersand Counting!Join them today:www.f reev i r tua lservers .com0871 750 2474

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

FREE

HOSTING

PERSONALHOSTING

FROM 0 H FROM _ .00| £1.50F O R L I F E I P E R M O N T H

D O M A I NN A M E S

FROM

0 - 9 9t P P R Y F A R

WEBSITEDESIGN

F R O M

0-00FOR LIFE

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

Site challenge in association with fasthosts

\

P h o t o s

Inside Looking OutName: Kim NealU R L : w w w. n i c o l e m a c a n d r e w. c o m

My friend Nicole asked if I could develop a site for her. She was producing ashort film and wanted an online representation of her worl<. I asked for a listof links she'd like to include on the site, and she supplied me with all of this

wonderful content, along with CDs full of photos of the production, the cast and crew.My first attempt at the website was aesthetically good, and Nicole was pleased.

I later learned about cascading style sheets and XHTML. I immediately wanted to putthis knowledge into practice and redesigned Nicole's site the 'correct way'. I constantlyran the code though the validation test at http://valldator.w3.org to check that mycoding was OK. Coding that complies with the World Wide Web Consortium standardsentitles the website to display the W3C logo. I'm looking forward to learning a lot moreabout web design, as I'd love to build a career doing something I find so enjoyable.

odesign verdict

•The clean and simple homepage bears itsW3C logo - the mark of an approved site

Kim has concentrated on getting theimportant things right, and the resulting siteworks well. There are a few problems with itsrendering in Firefox, and the Photo page is atad bewildering, but she has presented theinformation well in an easily accessible format.


\\ TAL

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

7 1 / 1 0 0 There are a lot of images on this page. Putting them into some logical order, or supplyingmore information, would help visitors to make more sense of them

Be Seen Web DesignName: Alicia HarperURL: www.beseenwebdesign.com

TBtV I needed a place for myonline portfolio as a web

J rmM designer while I workedmy way through school, and then Iwanted to market my site for thesearch engines, so I would have abetter chance of it showing up in theSERP. My website has since becomemy part-time job. Originally, I neverthought I would get any businessthrough my website, but I've donequite well!

I used Dreamweaver 8, Fireworks,

Photoshop 7, Flash 8 and WindowsMedia Encoder. For languages, I usedCSS and XHTML. I'm now learningJavaScript, which I hope to add soon.The biggest challenge of the buildwas making it visually pleasing, whilestill packing it full of information.

I was really pleased to see it allcome together. I was so excited whenI watched my page rank change fromzero to four. Also, watching my stats:

my number of visitors has alreadysurpassed my goal for the year!

A b o u t u s . . .

We are a jmafl Web Desiga Company based in Vancouver. B C. We arededicated to coanectiDg jrou with your customers affordable websolutions. Be Seen Web Desiga is llie ideal company to 1^ your business startgeneratmg on-ttne leads and aw««ness for your business teou^ an mtefactrreand user &iend^ website

Why you need a w^slte...

To make money, vAtf else? A website can connect you wi& customenNowadays eveiyone and tiieir dog has a website A website connects you wAeasing clients, new clients, and potential cbents. It shows them where you arelocated, vrtiat you are seSmg and Aey should choose you over yourconêtitioa "What a yeat opportunity ffyou aren't domg atleast soom ^yourbusiness over &e Web. your nussmg out on a huge opportum^ The Web is nowa key part of doing business

What we can do for you....

We can provide you with a user-friendly, eye-catching and mteractive \4>d«tedwebsite. Ever get lost in ^ confusion of some sites? You can never figure otAwhere you are or «êre you need to go to find die mformabon on a website?Well not with us We bke to keep it clean and fresh. We make sure yourbusiness wiU BE SEENl For a coiiq>lete list of our services, check out OurServices pê.

N e w e s t A r t i c l e :How to ohoc$« i wab

design company canb- a daunting task.

L a t e s t P r o j e c t s :

11w Holistic Co»ch

r^TtsisfkCnMcA

mBambcc B Records

1F1

•A really strong, fresh, clean homepage enhances the accessible tone of this site

B eWeb ami LVvelejiwot

^ Navigation could do with being moreprominent, and made to renderconsistently across the site

'odesign verdictThe site is both accessible and striking.The navigation is letting Alicia down a little,however. I t 's wel l -p lanned and easy to use,but renders inconsistently. Spelling andgrammar mistakes are undermining her image- a shame when they're so easy to fix.


k^TOTAL

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

71/100^


Va n i l l a t o w nN a m e : M i k e M e s aU R L : w w w . v a n i l l a t o w n . c o m

Building tPiis new site wasa challenge from the verystart. I had a few goals in

mind when I began: firstly, the sitehad to be usable; the navigation hadto be easy enough for anyone to use.Secondly, the site needed good artisticcontent. I ended up using a lot of theartistic content I stockpiled in thesplash page. It's become a graveyardfor 'interesting enough' pictures!For the rest of the site, I used theGoLive interface to tal<e care of myprogramming. The components in

The site makes a good job ofconveying the vitality and fun ofVan i l l a town ' s ac t s

GoLive made up the navigation for the site. I used a combination of inline frames,embedded media and CSS to get away with centering the layers in the pages,including the search and displaying the calendar. I'm happy with the results.

1 ^ 5 5 F e e d P o d C a t t S u b s c Search j

THE'

b i od o w n t o a d s

s h o v e sa o e n t s o n t v

m e d i ae s t o r e

s c h e d u l es i t e l n d « x

W e l c o m e t o t h e H o m e o fV a n i l l a t o w n

C h e c k o u t s o m e o f t h e n e w Tr e a t s

T h a n k y o u f o rs t o p p i n g I n . W e h a v e a( o t o f c o o l n e w s t u f f t oh s ( p y o u n a v i g a t eV a n i l l a t o w n . c o m . O u r

a U n e w S i t e I n d e x w i l l

h e l p y o u fi n d w h a t y o un e e d . I f y o u a l r e a d yk n o w w h a t fi l e s y o un e e d f r o m V a n i l l a t o w n ,

c h e c k o u t t h e

D o w n l o a d s o a e e . A n dt h a t ' s j u s t t h eb e g i n n i n g .

New for Agents

N e w f o r t h e

s e a s o n , w e h a v et h e A g . n ^ s O n l y

' M Is e c t i o n o f o u r

s i t e . T h i s s e c t i o n

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

s p e c i fi c t o

O f fi c i a t Va n i l l a t o w n M e r c h a n d i s e

Y o u h e a r d i t h e r e fi r s t . V i s i t t h e o f fi c i a l

'For a well-organised site. It has a surprisingly chaotic feel!

" odesign verdict"The site looks cool and does a good jobconveying the vitality of the Vanillatown act.I t 's wel l -organised, yet i t feels chaot ic becausefonts and menus are not styled in a way thatleads you through the site. Your body copy isof ten hard to read, too.

R A T I N G S

•The gallery works really well, butIt's quite slow to load

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 YC O N T E N T

J O T A L

1 9 / 2 52 0 / 2 52 0 / 2 52 2 / 2 5

81 /100^

8 3o u t o f 1 0 0

8 1o w l o f m

' 0 i

F-TOO f

out o f 100.1

T h e H o m e o f J o n

Name: Jon HaywoodURL: www.thehomeofjon.net

V a n i l l a t o w n

N a m e : M i k e M e s aU R L : w w w . v a n i l l a t o w n . c o m

R a n d o m B M X

Name: Andrew BrowningURL: www.randombmx.com

Hominidi WrestlingName: Jouko VirkkunenURL: http://hominidl-wrestnng.lnfo

MK: masteringN a m e : R o b M c K e n z t e K i t c h e nURL: www.mkma$tering.co.uk

Brown BagName: Kimberiy McCauleyURL: www.brownbagideas.com

Cleanly designed, easy to use - It'shard to fault Jon's site, except thatthe chrome effect is starting to lookquite dated. It's also a little sterile.

The site looks coo) and conveys thevitality of the Vanillatown act well.It's well organised, yet feelsendearingly chaotic

This is a fantastic site; it's welldesigned, with some great content,top-notch photography and greatFlash video clips.

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

This site has a simple design anda simple message. It's a breath offresh air compared to some of ourmore confusing entries.

This is a brilliant showcase thatpresents Kim and Kyle'sphotography In a colourful, funand accessible manner.

L i v e 2 n i t e This is such a great idea for a site,and well executed, too. There's a

Njme: Dave Bonillas & Scott Brignano whole heap of useful content. . r k . g a t h e r e d i n o n e h a n d y p l a c e .URL: www.llve2nite.com

German GenealogyName: Jerry FrankURL: www.sggee.org

BlueDepthName: Terry GoodingURL: www.bluedepth.co.uk

A s t e r e o s t u d i oName; Andrew ClementeU R L : w w w . a s t e r e o s t u d t o . c o m

Te n n i s c l u b L i n k e r o e v e r

N a m e : J o h a n V a n G r i e k e nU R L : w w w . t c l o . b e

L iam Mul lone Comed ian

N a m e : l i a m M u l l o n eURL: www.muHone.co.uk

ierry has taken the great contenthe inherited and created a sitethat makes it a breeze to accessand a great resource.

Many web designers discountaccessibility, but it's good to seethat Terry's site passes the W3Cpriority 1 checklist.

^ HouseProfessionalsN a m e : L e e M c G a r r i c a lURL: www.houseprofesslonals.com

Urban Address Real Estate

Name: Roger CrandallURL: www.theurbdnaddress.com

SayBoxN a m e : B e n e d i c t W i l s o nURL: www.saybox.co.uk

My ClassesName: Jason LeveilleURL: www.my-classes.org

S o l a c e

N a m e : I a n E v a n sURL; www.solacewebsi te.co.uk

Q u i z P u z zName: Howard KovachURL; www.qui2puzz.co.uk

Faith DesignN a m e : H e t n r i c h F e r r e i r aURL: www.www.faithdesign.co.uk

G o o d N e w s N e t w o r k

. N a m e : A v e r a n G a l eURL: www.goodnewsnetwork.org

This site passes W3C site validationand priority 1 accessibilityguidelines. Clean design andthoughtful use of white space.

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

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

This site has had a fair bit ofinvestment, and it shows. Cleandesign, good content and clearnavigation are all present.

That class in web developmentserved you well. You've created asite that iooks very professionaland Inviting.

Great stuff! Having a live demo onthe front page is not such a goodidea, though, when people areswearing In it.

This Is a really great resource,showcase and point of contact foryour students. Navigation Is a littleconfusing, however.

This is a well-presented site, withsome quality content. However,your logo is unfortunately obscuredby your picture.

Once you're past the homepage,this site becomes a whole lot offun - but why wait until thent o s t a r t ?

Very Individual, and the perfect wayto show off your work. The onlyglitches are accessibility and somebrowser Inconsistencies.

Clean design, easy navigation andgreat content. There are somelayout glitches, however, and we'vepenalised you for using templates.

mSS

T h eexper tsP h i l H o s k i n s

W E B C O D I N G

As a systems architectand web designer, Philhas designed anddelivered over 3,000web applications tocommercial and publicsector organisations.

P a u l H o s k i n s

Paul is a seasoned

designer and webmaster, working foro n e o f t h e s o f t w a r e

industry's majorplayers. He's also aPhotoshop addict.

Alex Haylock

A l e x h a s b e e n

developing websitess i n c e t h e m i d - 1 9 9 0 s .H e n o w w o r k s f o r a

major IT consultancycompany as an Oracleand Unix developer.

How can I include Chinese characters in my site?

Ql want to build websites in bothChinese and English. What do Ineed in order to publ ish Chinese

characters on the web, and what so f twarewill let me type Chinese characters anddisplay them in multiple web browsers?Mr Phillips

Ph i l Hfisk ins says . . .You need to start by making sure your pagesare encoded using Unicode. This is achievedin XHTML by declaring

<?xml version="1.0" encoding="UTF-8"?>

at the start of your web document, or bysetting the following metatag in HTI\/IL4:

<meta h t tp-equiv="content - type"

content="text/html; charset=UTF-8">

Unicode (www.unicode.org) attempts to

provide as many characters from as manyalphabets as possible in one character set. Theadvantage is that you can easily mix simplifiedand traditional Chinese characters.

To input Chinese characters, you shoulddownload an Input Method Editor. IMEs allow

you to enter nonstandard characters and

H Chinese Bopomofo IME Keyboard Layout - 0!

Bie_ g*

^ ® O ® |[I3http;/A«code!^m

m U H I

" 3 O G o fl ^Unicode Home Page (•e(to5ck|5iieMdp|^Mch

N e w t o U n t e o d * ?• W h a t i s t m i c o d e ?

• H o w t o U $ e t h i s S f t e

• F A Q

• Glossary oT Unicode Terms

Q t n c r a l i n f o r m a t i o n• Where is my Character?• Dtsplay Prooiems''• U s e f u l R e s o u r c e s

• U n i c o d e E n a b l e d P r o d u c t s

• M a i l U s t s

T h * C o n s o r t l i i M• W h o w e a r e

• O u r M e m b e r s

• Job Postings (2006.05.10)• P r e s s I n f o

• P o i i c t e s a P o s i t i o n s

• C o n t a c t U s

Fo r M* inb« rs On ly• M e m b e r R e s o u r c e s

■ Working Documents

Q«t Invo lvAd l

J o i n C o n f e r e n c e s D o n a t e

S o m » o f O u r M t m b o r c

DEtHl 13^A n n o u n e « m » n t t

A c k n o i W k d a » d i n t h » U n i c o d t S t a n d a r d5.0 (2006 05 25}

W c h o U i N o f l f o p o n f t o G i v K o y n o t « a tmC30 (2008 05 00)

Tht Unicod» Guid« newav»i!sbi«i (2006 02 28)

U T S » 3 7 l < t » 0 0 f a p h k V a r t a t t o n D a t a b a s * n o wavailable (2006 02 02)

Public R»v>»v.':

Th« Ut^«ocI« Standard• S t a r t H e r e

• L a t e s t V e r s i o n

• C o d e C h a r t s

• U n i c o d e C h a r a c t e r D a t a b a s e

• U n m a n D a t a b a s e

K * y S p « e l f i c a t l o n t• Unicode Collation (UCA)• Bidirecttonal Aigonthm (Bidl)• Normalization (NFC, NFD,• Locale Data (CLDR)• Script Codes (ISO 15924)

To e h o l e a l P u b l i c a t i o n s• Technical Reports & Standards• T e c h n i c a l N o t e s

• O n l i n e D a t a T a b l e s

• updates S En'ata

W o r k I n P r o g r t s *• Calendar of Meetings• proposals for Public Review• U n i c o d e T e c h n i c a l C o m m i t t e e

• UTC Meeting Minutes• Proposed Characters• Submitting Proposals• C L D R T e c h n i c a l C o m m i t t e e

• Unicode is becoming an Important factor when developing localised websites in other languages

symbols using a conventional keyboard.M i c r o s o f t o f f e r o n e a t v w v w . m i c r o s o f t . c o m /

w i n d o w s / i e / i e 6 / d o w n l o a d s / r e c o m m e n d e d /

ime/install.mspx. Once installed, change thelanguage to Chinese and start typing!

For you to be able to display the pages, youneed a Chinese font installed. Internet Explorerwill take care of this for your users if they have

the 'Install on Demand' option selected underTools > Internet Options > Advanced, andChinese is selected under View > Encoding.Alternatively, grab the international languagepack, which will install the fonts for you.Again, this is available from Microsoft at www.microsoft .eom/technet/prodtechnol / ie/reski t /6/part7/z01 ie6rk.mspx?mfr=true

•An IME provides a method of Inputtingnonstandard characters with a QWERTY keyboard

Once the IME is installed, change the language to Chinese and start typing I


f t 1 ^ _ .■■ ■??■-"■

. r _ . , V - A / l S j j - . - V .

Ask the expert!

W E B C O D I N G

The differences between markup languages

Ql'm not really up to speed withthe latest coding languages, andI ' m a b i t c o n f u s e d w i t h X H T I V I L

and XiVIL. Are they the same thing?Peter Noble

Paul Hoskins says...The short answer is no. Essentially, XHTML isa refined version of HTML for presentation,whereas XML is designed for data.

XHTML stands for Extensible HyperText

Markup Language, and is a stricter and cleanerversion of HTML. XHTML 1.0 closely follows thestrict rules of XML and is intended to replaceHTML in order to force correct coding andimprove the consistency of the markup.

There aren't too many differences betweenHTML and XHTML, but the differences are

important. You need to remember that tagsand attribute names must be lower case,attribute values must be enclosed in quotes,and tags must have a closing value. If a tagdoesn't have a matching closing tag, a forwardslash is the las t charac ter be fore the '> ' in the

tag (for example, <img src="my_image.jpg" />or <br />

<?xml version="1.0" encoding="UTF-8"?>< ! D O C T Y P E h t m l P U B L I C " - / / W 3 a / D T D X H T M L

1 . 0 Tr a n s i t i o n a l / / E N "

"http:/ /wvvw.w3.org/TR/xhtml1/DTD/

x h t m l 1 - t r a n s i t i o n a l . d t d " >

<html xmlns="http://vvww.w3.org/1999/xhtml">

(Your XHTML page content goes here)

< / h t n n l >

The future of web publishing will use XHTML,so if you're starting out in web design, it's agood idea to learn this new standard.

XML is a parent language to HTML and alsouses tags, but it's more powerful. It has strictrules about what types of data can appearbetween the tags, and the tags providea d d i t i o n a l i n f o r m a t i o n a b o u t t h e d a t a

enclosed. XHTML is effectively an XMLrepresentation of HTML 4.0. If you use XHTML,you're creating HTML documents that are well-formed in terms of XML. Still confused? Checkout wvvw.w3c.org for further info.

a . E * » > « l o o t M

0 - * - o • a l i e 0 - ^ □ H i i - aI [III http;//Www.w3.oro/)MLf

Gocgfete.3 6 B l o o h n « t e - g e u n t a d -3 0 =

W5r A r c h i t e c t u r ed o m n i n

L lAciiyity Statgrngnt

Extensible Markup Language (XML)1. Introduction2 . W o r k i n g G r o u p s3 . O t h e r R e s o u r c a g4 C o n l a o t

Neaitv iKML Specifications! and Translations of them

i n t r o d u c t i o n

Extensible Ivlarkup Language (XML) Is a simple, very flexible text fomnat derived from SGIvIL (ISO 8879)Onglnally designed to meet the challenges of large-scale electronic publishing. X1*(L is also playing anincreasingly important role in the exchange of a wide variely of data on ttie Web and elsewhere

This page describes the ¥yori< being done at VV3C within the XML Activity, and how it is structured Wori<at VV3C takes place in WbrJtmg Groups. Ttie Working Groups within the XML Activity are listed below.t o o e t h e r w i t h l i n k s t o t h e i r i n d i v i d u a l w e b D a a e s ^

W H O ' S WAT C H I N G ?According to theConnputer IndustryAInnanac, the WorldwideInternet Population in2005 was approximately934 million users, andprojections suggest thiswill increase by 45% to1.35 billion by 2007. TheUK currently has about3 3 . 1 1 m i l l i o n I n t e r n e t u s e r s

according to the OAW o r l d F a c t b o o k .

•Visit www.w3c.org forcomprehensive informationabout markup languages

B R O W S E R S

Browser compatibility with CSS

Ql've been developing a simple site usingC S S r a t h e r t h a n t a b l e s . T h e s i t e w a s fi n e

in internet Explorer on a PC, but not inFirefox or Netscape. After successfully rebuildingthe site for both, I checked on a IVIac and it worlcsin Safari, but is broken in IE. What's going on?

a :

Cascading Styie Sheets, level 2 revision 1CSS 2.1 SpecificationW 3 C D r a fl 1 1 2 0 0 6

■ i t ( c s s } n c s 2 t « « '

•The CSS standards are maintained by the W3C and canbe viewed online at www.wB.org/Style/CSS/ttspecs

I 'm ser iously at my wi ts ' end wi th th is ! Comeback, tables, al l is forgiven.Richard Hague

A lex Hay lock says . . .Ahh, the joys of CSS. This is the most frustrating thing

^CSSVaBda

m r n t

Your Styte ShMt

"J

• The W3C also offers a validation tool to check that yourCSS is compliant: http://jlgsaw.w3.org/css-validator

with CSS and the reason why some developers arestill trying to resist using it.

The reason this happens is because CSS is just astandard, and the actual innplennentation is left to thebrowser developers. Browsers such as Opera and Firefoxare very standards-centric and tend to follow closelywith what's prescribed by the W3C. Microsoft tends tofeel less constrained by standards due to lE's dominance,and often adapts standards to meet its own needs (even

extending them with IE-specific properties). While thiscan create extra features, it does mean that sites don't

always behave as expected between browsers.So, what can you do about it? First, make sure you

only use CSS tags that are defined by the W3C, andvalidate regularly. Second, make yourself familiar withthe common stumbling blocks. Fortunately, there areloads of resources on these incompatibilities and how toovercome the problems: www.mezzoblue.com/css/cribsheet, www.positioniseverythlng.net andwww.ar typaper5.com/csshelppi le /category.php72

While it's tempting to just go back to tables, it'sworth persevering with CSS. It gives you greaterflexibility and scope in terms of design, as well asfuture-proofing your site.


Ask the experts

COLOUR VALUES^Are you regularlyfinding colours on otherwebsites, software -- oreven your desktop - thatyou want to use in yourown designs but can't getthe right RGB or HEXvalue? If so, this freedownload will probablybe of interest to you:w w w . c o l o r s c h e m e r c o m /

colorpix_info.php. ColorSchemer ColorPix enablesyou to point at any pixelon your screen and getthe correspondingnumerical value. Nice!

A d o b e G o F o r t h

Ql currently use GoLive to buildand develop websi tes. Do youk n o w w h a t ' s g o i n g t o h a p p e n

to this application now that Adobe hasacquired Macromedia, and should Im a k e t h e s w i t c h t o D r e a m w e a v e r ?

Vincente Rodrigues

Phil H<»skins says...Following the acquisition, Adobe issued astatement confirming that it will discontinueMacromedia FreeHand and its own GoLive web

design product.Adobe's marketing department has said that

the company would abandon development ofthe GoLive application in favour of the popularDreamweaver. Incidentally, the next releaseof Dreamweaver is expected to be part ofAdobe Creative Suite 3, which is rumoured tobe available early in 2007, and will feature anupdated interface to integrate with otherapplications included in the range.

However, don't panic if you've recently

purchased GoLive CS2, as Adobe still plans tocontinue to support and develop the existingproducts based on customers' needs.

On the other hand, if you want to stay on

top of the game, it will soon be time to putGoLive to bed and get to grips withDreamweaver. On the plus side, it shouldn'ttake long to get up to speed, as the interface isvery similar. And the forthcoming Creative

maybe 1line 1

Adobe's acquisition ofMacromedia suggests that

it's the end of thefor GoLive. Watch

this space...

Suite 3 provides Adobe with an opportunity toproduce a refined Dreamweaver release thatalso caters for GoLive users. In the meantime,

you can download a 30-day trial ofDreamweaver 8 by visiting vvvvw.adobe.com/downloads and start practising!

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;

[email protected]

Adobe plans to continue to support and develop existing products J

55

W E B C O D I N G

Updating multiple instances of one web pageQl have multiple versions of one web page.Is there a way to combine the differences

without working through line by line?M a t t N i m m o

A lex Hay lock says . . .There are plenty of tools out there that take theheadache out of comparing and merging source codefiles, and I recommend that every developer keeps one

t a i r 4 » c < « > « >■e l t r j1 o l t j r r M i g r t

j< « M c r >

S i ^ W K 4 k W ^ J

C O M P A R E Y O U R F I L E SDownload and install WinMerge from http://winmerge.sourceforge.net. During installation,

you may be prompted for a 7-zip plug-in. Don't worryabout this unless you want archive support. LaunchWinMerge and open two files you want to compare.

0

in their toolbox. My preference is WinMerge, which is

open source and free to download. Let's take a quicklook at its main features and see how it can speed up

your web development.

S E E T H E D I F F E R E N C E SNotice that the differences in your files havebeen highlighted with various colours, which

makes it easier to spot changes. You can step through allthe differences using the vertical arrows on the toolbar.The active difference is highlighted in red.

0M E R G E Y O U R C H A N G E STo merge a change, right-click on it andselect Copy to Left or Copy to Right to update

the other file. To transfer all changes from one file tothe other, use the icons on the far right of the toolbar.


W o t ?No bandwidth bills?All NEW dedicated servers

B No bandwidth billsYour own dedicated data line - never receivea bandwidth bill!

13 Full remote controlNever be locked out - take control of yourdedicated server.• Permanent keyboard, video and mouse control.• Full BIOS configuration access.• Hardware reset.• Telnet, SSH,RDC and VNC.

B Unbeatable valueFull range of servers from just £49 per month.

B Instant online setupUnique: instant deployment infrastructure -set up as many servers as you need immediately

B Database integration options• Pre-lnstall MS SQL Server.• Install your own MS SQL or MySQL database onyour dedicated server.

• Alternatively, integrate with our sharedsecure database hosting.

B Your own private LANSet up multiple servers on your own secure privatenetwork, in our purpose built UK data centre.

B 24x7 support and serviceExperience the difference: UK based dedicated serverexperts, with direct access to your hardware.

B Easy to use control panelDirect control of your account, with OS rebuilds,additional IP addresses and much more!

Find it at FasthostsDomain names • Web hosting • Dedicated servers • Exchange 2003 email • Broadband • Reseller solution

Instant online setup at

fasthosts.co.uk/servers0870 888 3354

Ask the experts

I M A G E E D I T I N G

Affordable alternatives to Photoshop

QI'm looking for some graphicss o f t w a r e t i i a t w i l l a l l o w m e t o

create and edit JPG, PNG andG I F fi l e s a n d c r e a t e G I F a n i m a t i o n s . I l i k e

Photoshop but i t 's too expensive. Cany o u r e c o m m e n d a n y a l t e r n a t i v e s ?Bruno Rossini

Pau l Hosk ins says . . .One particular application springs to mind;the unusual-sounding open source favourite,GIMP, which stands for GNU ImageManipulation Program, distributed underlicensing terms defined by the GNU Project.Sometimes referred to as The Gimp, this

It includes avariety of useful

anapowerfulediting tools 55

application was specifically designed as aPhotoshop alternative and is freely availablefor creating and manipulating images. It evenincludes many of the features you would findin a high-end program, such as layers, channels,

paths, and a host of painting tools.Early versions of GIMP were clunky and

fell well short of Photoshop, However, recentreleases have improved greatly. The latestversion has a revamped user interface, makingthe application simpler and more flexible touse and, in turn, a more legitimate player inthe world of mainstream image editors.(Install GIMP from this issue's CD, p98),

Another option worth checking out isPaint,NET - an image and photo manipulation

application designed for Windows, Like GIMP,it supports layers and includes a variety ofuseful and powerful tools. Download atwww.eecs .wsu.edu/pa in t .ne t

Some people argue that applications suchas GIMP or Paint.NET can't compete with thelikes of Adobe Photoshop, With this in mind,Adobe Photoshop Elements 2 and Corel's Paint

Shop Pro 9 (both of which are available for less

• Paint,NET - intended as a free replacement forthe MS Paint application, it has grown into apowerful tool for photo and image editing

than £60) are viable options if you're willingto spend a small amount of cash for acommercial option.

@lf you have a web-related query, we'll doour best to answer your question withinthese pages. Simply drop us a line at;

[email protected]

•GIMP is a freely distributed program especially useful for such tasks as photo retouching, image composition and general image manipulation (see p34)

Q u i c k - fi r ew i t h . . .A l e xHaylockQl want to havea crack at using

Ruby on Rails.W h e r e s h o u l d I s U r t ?

Wai-man Cheung

Try the tutorial atONLamp (www.onlamp.com/pub/a/onlamp/2005/01/20/rai ls.html) toget you started in Ruby onRails development, thenbuy yourself a copy of'Agile Web Developmentwith Rails' by DaveT h o m a s a n d D a v i d

H e i n e m e i e r H a n s s o n

(ISBN: 097669400X) if youfind that you like Ruby onRails and want to takethings further

Qls there a specialm e t h o d o f

finding morei n f o r m a t i o n a b o u t

w h a t t e c h n o l o g i e so t h e r w e b s i t e s u s e ?

David Travis

There is indeed. Check outw v v w . n e t c r a f t . c o m t o

discover more informationabout a particularwebsite, such as theoperating systememployed and thewebserver it uses, plushow long since it wasl a s t r e b o o t e d a n d i t s

geographical location.

Qlhave aproblem withmy favicon.ico.

It displays in Firefoxbut I can't get it tod isp lay i n In te rne tExplorer. Am I miss inga n y t h i n g o r d o i n gs o m e t h i n g w r o n g ?Chris Wright

Unfortunately, InternetExplorer is designed todisplay favicons onlywhen a page isbookmarked, whereasFirefox will display afavicon when you simplybrowse a website (if oneis actually available).


Professional Web Hosting!from a host you can trust

V

Starter PlanIdeal 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 limitationsall 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 /• Free Secure Server Space /• 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 /

Manased Dedicated Servers

NEW 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.

w w w. c w c s . c o . u k0845 203 [email protected] M A N A G E D H O S T I N G

Prices Exicude VAT Major Credit Cards Accepted.

W E B C O D I N G

Processing XML data - DOM or SAX?Ql run a sports website and I'mtrying to create a web appl icat ion

that processes XIVIL data. I'vecome across two ways of doing this

using either DOIVI or SAX. Which isthe preferred method to use?

Jayne Beresford

A lex Hay lock says. . .The short answer, Jayne, is that it reallydepends on what l<ind of XML data you'reactually processing.

There are two types of parser for XML:tree-based parsers and event-based parsers.A tree-based parser commits your entire XMLfile into memory and creates a hierarchical treestructure of the content. To picture this, thinkof a directory tree: you have a hierarchy of

•The Microsoft XML parser bundled with InternetExplorer has DOM and SAX capabilities

• 9 X

[ I r i S i S S 'i |

s 11

! ii OTOVSdMM

t MSlgMKMiy

folders, subfoldersa n d fi l e s . D O M

(Document ObjectModel) is a tree-based parser, and

provides you withan API to access

t h e i n d i v i d u a l

e l e m e n t s w i t h i n

t h e t r e e s t r u c t u r e .

E v e n t - b a s e d

parsers, such asSAX (Simple APIfor XML) reads

your XML data asa s t r e a m r a t h e r

t h a n t h e e n t i r e

d o c u m e n t i n o n e

h i t . E a c h t i m e S A X

c o m e s a c r o s s a

node or data, it

reports the eventb a c k f o r

processing. Thism e a n s t h a t S A X

h a s n o a w a r e n e s s

of parent or child elements, unlike DOM,and you can't go back to a node once it hasb e e n r e a d .

If all you want to do is read data and act on

it, then SAX is the best answer It's also quickerand easier to code than DOM, and can handle

A The AgencyR r s t N a m e N I k iLast Mame D«vgood

Titio Sptci^ Agent

nd«v9oodQxmlspy.nPhon» 007036 2334 ^

a

< 7 x m i

MUs:xal-'*bt«p://m.«3.»t«/1999/XSb/TEVi«e«D ]) a l i w : K * » ' > h e t 9 ] / / w n r . « 3 . o i o / S O O l / M a s c t M u "

r r a T i -

i c t « • t * 4 o e r ' U t A 9 « n t « . » U ' ' ) / / » 9 « n tt « C I B

I <e iE* t i nac4«t byc c c u s n

I

I wc«wi in«II t t u i b u uI b w e - u i i) byI CMC) CMC1 c h i i 4

J e o l l M l M

CJearance L«ver jTopStcrt

Photo W:

&

e a a * « K u e u « &

4 t c U K «

d e * ( e n « « A t ' O i '

-j Idtntttic

Sywpsis

11 asset; poised In any optbeNnd the information; adlanguages and dialects; ak

B w c w ! . - * 8 ' W a * w - a »

larger files because it uses less memory.You should use DOM for processing morecomplex data - articles or books, for example -as you can deal with elements in context ofthe rest of the document and jump betweenv a r i o u s e l e m e n t s .

•Speed up your XMLdevelopment by usingan IDE such as XMLSpyf r o m w w w. a l t o v a . c o m

P H O T O S H O P

Replacing colours with PhotoshopQl've noticed a Replace Color functionin Photoshop, yet can't seem to get it

to work properly. Do you have anyuseful tips for using this?M a t t h e w H o l t

Pau l Hosk ins says . . .Photoshop's excellent Replace Color adjustment tooloffers a quick and efficient method for changingspecific colours within a photo or graphic, and willsave you messing around with additional layers.

In the following three-step walkthrough, we'll useour example close-up photograph of some flowersand change the colour of the petals from a subtle

pink hue to a more dramatic and visually eye-catchingbright blue.

S E L E C T I N G A N E W C O L O U RGo to Image > Adjustments > Replace ColorClick in the Image, selecting the colour to

replace, and look for the deepest part of the colourAdjust the sliders to create the colour you want.

0EYEDROPPINGNext, choose the eyedropper with the plussign to add to the selection. Tap on any areas

of pink to change them to blue. If you click an areayou didn't want to change, use Ctrl+Z to undo.

0SAVE AS NEW FILEWhen you've finished selecting all the pinkthat needs to be changed, click the OK button.

Save the image under a different filename to ensureyou don't overwrite the original. O


I ne weo aoesn t

get any easier! ■reg.co.uk

INSTANTSITEJwith every

d o m a i n

D o m a i nRegistration

i n s t a n tS i t eNEW & EXCLUSIVE

F R E EFOR ONEM O N T H

Webspace

O V E R1 MILLION'

d o m a i n s

Registered

' . m

Sign up now,or transfer for free!

Yo u r o w n e m a i l a d d r e s sEG: [email protected] DNS managementUnlimited web forwardingB u l k d i s c o u n t s a v a i l a b l e

Wide range of domain extensions

f r o m £ 2 . 5 9 total priceper year*

Build a unique, professionals i t e i n m i n u t e s

> No technical knowledge required!

Share thoughts & photos or sellyour products in 5 easy steps

^ Easy to use - just choose a look andfeel & click to create content!

Includes: photo gallery, blog,forum, e-shop and more

. 9 9 ,

Join our400,000-t-c u s t o m e r s

, Easy online account managementWith ful l FTP access

> Up to 500 MB webspace

Free webmail and up to4 0 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 9 per month*

SCREErj'^sELECTFREE 8 free DVD rentals fromfor every customer k ^5 off at

For all your domain andweb hosting solutions visit: www.123-reg.co.uk

123 reg.CO.uk is part of the Pipex Group. *lhe minimum term forall domains is 2 years, paid for in advance (except .eu domains -1 year) ** Monthly fee must be paid annualty, in advance.

Visi t us onl ine now!

Vis i t us on l ine now!Want to find out what's going on atthe magazine? Want to keep up to

date with the latest web design news?Want to chat w i th o ther readers? Then

why not visit our website today!You'll be able to read regular posts

from the Practical Web Design team,and our new forums are a great place

to talk about your latest designs.

Visit today!www.pwdmag.co.uk


i t/ieov r '9 Boys Toys Unlimitec

Big Boys Toys UnlimitedWWW. b i g bo)/sto)/s n m .CO m

We add professional flair to a hobbyist websitethat's raged out of all control

O elf-employed hobby-s t o r e o w n e r To m

A Garcia runs Big

Boys Toys Unlimited,providing a web-based outlet fornumerous radio-controlled devices,die-cast kits, train sets andaccessories. The site's genesis goes

way back to 1996, as Tom explains:"I had a student attempt to sell mea website, in return for me tradinghim a remote-control plane. I told him, sure,but said he must not only make me a website,b u t a l s o s h o w m e h o w i t ' s d o n e . "

And so Tom and the student spent the nextcouple of days beavering away in his office, andTom learned how to create tables, insert imagesand add text, all using Netscape. "The websitewas horrible for a couple of years," recalls Tom.

Site backgroundO w j n e r ' s n a m e : To m A G a r c i aLocation: Albuquerque, New Mexico, USATom A Garcia's website, Big Boys Toys Unlimited, is a trulyhomegrown effort that started in basic form back in 1996.It's expanded ever since as Tom discovers new technologies and' applications, and the site now boasts customers from all over

the world. In the site's favour, it's easy enough to use and it has plenty ofcontent. Negative aspects include the ropey layout, lots of broken links andlack of imagery.

"It was hosted by one of those free web hoststhat had pop-up ads, and I received hate mailas a result!" Tom also learned through various

angry emails that his thumbnail images werecausing the site to slow to a crawl. "I'd justmade them smaller by grabbing drag handlesand moving the pictures around the page,"laughs Tom. "Of course, this meant the

r c c m i A t o n i H i w

l U t H o C w t K i l

»me to Big Boys Toys onl ine hobby store. We have been serving hobby enthusiasts! 1993, and on the internet since 1996. We specialize in remote control cars, planes,

: tters, boats, plastic & die cast models and slot cars. We're hobby enthusiasts with over

^ y«ars of collective experience. Please taice your time browsing through our extensive"lection of hard to find kits and accessories. With thousands of goodies in $tocl( andto be shipped immediately, we're sare you witi find what you're looking for and get

the service you deserve)

Fea tu red P roduc ts "

L i s t P r i c e : S 6 4 9 . 9 9

Our Pr ice: $499^Yo u S a v t $ 1 5 0 . 0 0 !

"Frae Sh ipp ing '

Hobbyzofte Firebird Scout 'Ready To Flv'L l i t Pr ice: $99.99

Our Price; $54.99Y o u S a v t U 5 . 0 0 !

E - F l i t e B l a d e C X R T F H e c t r i c C o a x i a l H e l i

L i s t P r i c e : $ 2 7 9 . 9 9

Our Price: $189i»9Yo u S a v e $ 9 0 M !

The most sUble electric heU!

R e y e U B i g ' T '

Llat Price: $100.00OurPr ic : $84.99Y o u S a v t $ I S M

Boat Bargains!

L b t P r k e : $ 6 9 . 9 9OwPr ic ; $49J»9f o i l S a w t 2 0 M !

U l t P r i ce ; $159 .99

OurPria: $129 i>9

'thumbnails' were using the exactsame huge files!"

Determined to improve his site,Tom learned through a process of trialand error, with feedback from visitors

helping to guide him. Unsurprisingly,his preferred tools have changed ashis knowledge has improved. "I'veused Netscape, FrontPage and Fusion,a n d n o w w o r k w i t h D r e a m w e a v e r f o r

new websites," he explains. "Thedilemma with Big Boys Toys is that the site is

huge. I cringe at the thought of transferring itall to Dreamweaver." Tom says that, some day,he'll learn PHP in order to start making thewebsite a dynamic, database-driven affair."But until then, I'll keep reading and learning."

Along with improving the site's content,design and usability, Tom's also found the site'sreach growing over time. "The site started as a

great tool for locals, but I soon began receivingemails from all over the USA," says Tom. "One

day, I discovered PayPal's shopping cart feature,which I rapidly took advantage of. Now thes t o r e s e l l s w o r l d w i d e . "

Tom tends to update the site weekly, notablythe 'used goodies' page, and, as mentionedearlier, all page content is entered manuallyThe frequent updates should go some way tokeeping customers (and potential customers)happy, and Tom reckons feedback in generalhas improved throughout the site's life. "Mylocal visitors say this site's better than the localcompetition. Nationally, people report that theylike the site. And every day, I receive thatbeautiful email from PayPal that states 'you'vegot money'," says Tom. Furthermore, Tomwisely avoids tactics employed by the moremonolithic online stores out there, and ensuresthat customers can always contact him via othermeans: "I often get phone calls from all overthe world, as customers want the human

You'll find the revampedhome page, plus codeand assets, in theMakeover Files folder


Big Boys Toys Unlimited

B e f o r e —Before we start the makeover,take a look at what works (andwhat doesn't) on Tom's site

/ • V I N T R O D U C T O R YQ)^TEXTToo many online stores these

days make assumptions about their visitors,assuming it's obvious what they offer. That'srarely the case, so It's good to see that Tom hasincluded some introductory text, which mayincrease the site's standing in search engines.

F E A T U R E D

QQr3 PRODUCTSSuccess fu l on l i ne s to res

use 'draws' on the homepage, with theaim of getting you to delve deeper intothe website. Tom's use of short phrases to

accompany each item adds personality tothese elements, differentiating his storefrom the competition.

P R O M I N E N T

(roraoFFERsT h e m a i n r e a s o n o n l i n e

stores are taking business from their

high street equivalents is because theyoffer a cheaper way of sourcing goods,

especially niche products. Presenting 'listprice', 'our price' and 'you save' figuresis a good way to get potentialc u s t o m e r s i n t e r e s t e d .

to M9^»»V»T>vonane hobby <Dfe.W hive bt«ft«efv>f>Qhftbbventhuri.«t«1993, Mernet since 1996. We spedsltze )n remote controt c»c», pl»nes»-n, bolljitic & die cest (nodete end iM cars. We*re hobby enthustMtt wtt) over

ir» of expertence. Ptease Uke your time browsing through our exteroiveBoa of herd to find tdts end eeeessohes, WKh thousands of goodies in stodc endto be shipped knmediite^, we're sure you wl find what you're looUng foe and get

the service you deservel

" Featured Products"

L M r t f c r . S M 9 . W

OwPriec $499.99m s m i l M M l

L U M c c O H M

OarPrkc: $189^Y o u S m t M M !

IBBoaUUaiiMtJtoiLWrr ta $« .»9O, Price $4959rwSm SMM

X-v OVERBEARINGNAVIGATION

It's just so confusing: atthe top of the homepage are drop-downmenus with two levels (which don'twork well cross-browser); on the left-hand side is a column of standard links;and at the foot of the page are twomore blocks of links. Clearly, the site's

navigation needs streamlining.

^f^^^TINY IMAGESf 1^^The homepage hastiny, ineffective product

images, none of which makes you wantt o c l i c k o n t h e m t o d i s c o v e r m o r e a b o u t

the item. Tom's previous experiencewith images actually slowing downh i s s i t e s e e m s t o h a v e l e d h i m t o

overcompensate, making his products h o t s f a r t o o s m a l l .

B L A N D L A Y O U T

iThe site sells exciting,fun products, but

you'd never guess this from the wayeverything's presented. The hugeamount of white space and numerous

tiny images combine to make a dullwhole. And although the logo is kindof fun, it takes up space that wouldbe better used for other things.

B R O K E N L I N K S

8 If there's one thing thatm a k e s a s i t e s e e m

unprofessional, it's broken links, and Tomhas plenty on his site. Unfortunately, anumber of them are found in the dropdown navigation - hardly the best wayto make potential buyers feel confidentabout using your site to spend theirhard-earned money.

Jelement, and to make certain the item theywan t i s i n s tock . "

Although the site's doing well sales-wise, Tomstill thinks that it's missing something. "It coulddo with a more professional look and better

navigation," he says. "The aim of the site issales, and an ultra-professional site is more likelyto make potential buyers feel confident enought o c l i c k o n t h a t ' a d d t o c a r t ' b u t t o n . "

We think Tom's dead right about this. Thesite has plenty of content, and is reasonablywell-structured. His homepage has most of the

right elements - an introduction, a section on'featured products' - and he's wisely ensuredthat savings are clearly displayed next to the

price of each item. What the site lacks is visualappeal and a professional edge. Many of theitems Tom sells are dynamic, visually striking

objects, but you wouldn't know it from thehomepage, where the logo dominates. Also, asTom's up against the entire world (as far as thecompetition goes), he needs to make his sitefeel like it was created recently, rather than

looking like something from the 1990s.

r o u r / i U i u b a B I g B o y s To y s «

O r d e r / I n f o l i n e :S05-298- I02S

• T h e b o t t o m o fthe page is litteredwith links, three ofwhich point to theexact same 'UsedGoods' page


'9 Boys Toys Unlimitec

A f t e rA more grown-up look andpunchy photography giveyou more confidence to buy

B R A N D N E WL O G O A N DM A S T H E A D

The old logo took up far too much

space, wasn't legible and felt a bitchildish. The new effort is more rugged,

fitting the nature of the store's stock.The toned-down red colour also helpsto make the site look more professional.

S I M P L I F I E Dn a v i g a t i o nThe old navigation was

all over the place. We've used 'pull

navigation' in the masthead to drawattention to the six most importantlinks, and simple list-based navigationon the left to provide access to the site'sother pages.

^ ^ M O R Ep r o m i n e n t' O P E N I N G

H O U R S ' T E X TSome of the most important information- the store's opening hours and phone

n u m b e r - w e r e b u r i e d a t t h e b o t t o m o f

the old design. We've now placed thisinformation next to the logo.

(2)0i m p r o v e dT Y P O G R A P H YThe text styles on the

old site weren't particularly consistent.For the makeover, we've used two sans-serif fonts, and the result is a moreunified and professional appearance. Asthe text is styled using CSS, it's easy toupdate the defined styles wheneveryou need to.

•othMMli t993. Md OM »it inMwMk Hn€» «M wtniiat im r«mat* cmM

MW wwwtw. Wi* Hiewwi* «#♦**»! m iteN* ewt www* le b* s#*»iwd imnwi*He<v,

i M t o T t T- l M , . *E s i . ' T i r s i f S .

U S E O FI M A G E R YT h e o l d s i t e l o o k e d (2)0

quite dull, which Is the opposite ofw h a t To m w a n t e d . W e ' v e e n s u r e d

the homepage includes strong imagesto make visitors more likely to clickthrough to pages and buy goods.The use of cropped images makesthe overall appearance more dynamic.

M O R E A C C E S ST O S A L E SI T E M S

Dead stock is something a store alwayswants rid of, and sales items are what

buyers tend to crave. Therefore, undert h e f e a t u r e d i t e m s i s a d e d i c a t e d ' s a l e

items' section, including a text-basedlist and two highlighted items with

images and descriptions.

( S 0B E T T E RC O M P A T I B I L I T YUnlike the old site, this

makeover works fine in all currently

shipping web browsers. Potentialc u s t o m e r s d o n ' t w a n t t o b e t o l d w h i c h

b r o w s e r t o u s e . T h e s i t e ' s s t r u c t u r e i s

simplified, too, so it should provemuch easier for Tom to update andm a i n t a i n i n t h e f u t u r e .

Owne r ' s ve rd i c tTom tells us what he thinks of the revamped site

Yo u ' v e h i t t h e m a r k - t h e

makeover has a professional,

polished edge. I like the design'sr e s t r i c t e d w i d t h a n d t h e l i n k s o n

the left (which will be great forsearch engines), and the pull navigation istasteful and well-placed. I would never have

thought of putting this over the photo of the

truck. Speaking of photos, your close croppingof products is very well done!

I really like the placement of the featuredproducts and clearance items. With my design,you're forced to scroll down quite a bit, andthere's too much white space. Your designcontains all the elements needed, in a formatthat's easier to read, view and navigate.

N T U R NO V E R T O .LEARN (H O W T O . . . >Create a stampstyle logo inPhotoshop r


Big Boys Toys Unlimited

D e t a i l sIntermediate

Photoshop

Create a logoWe show you how we put together the new logo for the site makeover

Oesigning a strong logo isessential for any website, butit's particularly important for anonline store. Tom's existing logo

is problematic in several ways. It takes up fartoo much space; it's coloured in an eye-searingred; the 'Unlimited' isn't easy to read; and thewhole design doesn't do justice to the

professionalism of Tom's service.As you will have seen on the previous page,

we decided to create a new logo, which uses am o r e m a t u r e b l a c k a n d a d a r k r e d f o r i t s

colour scheme. The logo's style is also more in

keeping with the nature of the site's stock than

before - and it's legible! In the layout, we'vescaled down the logo's size relative to thehomepage, but its simplicity means that itstill carries impact.

In the walkthrough below, we show

you how to put the logo together yourself.Although the design decisions may seemrather specific to Tom's site, much of the

methodology can be used for other designs.For example, the first four steps show youhow to fashion a handy 'stamp' image thatcan be reused elsewhere, with whatever base

you choose. We also provide other handyhints for working with text in Photoshop,

K A I M O C O N T R O L

▶ RCIH i -n r i t ^ f ii > R C C a n t T n j e >

W« icem« to B ig Boy* Toy* on l i ne hobbyenthuMtC* t ine* 1993, and on the In ternet tmc« 1996.hel icopter*, bo*t*, ptoi t tc f t die ca*t model* end «lotof coJiectrve aKper ience. Ptca** teke your t lma browt ink i t s e n d e c c e t t o H e * . W i t h t h o u « * n d « g o o d i e * ( n t t o d

•A strong logo can make your site morememorable and appear more professional

J " * * B . 4 J l * » J «h I U n t i t l e d 1 ^ l O r /

U n i l f fl l T E D u n i i m i T E D

T Y P E S O M E T E X TCreate a new document, 900 pixels wide and 300 pixels high. Choose 'DarkRed' from the Swatches palette and then use the Text tool to type your stamp's

text. Use a chunky font and a large font size; our choice is Bauhaus 93, included inCreative Suite, at a size of ISOpt. Ensure the antialiasing menu is set to Smooth.

0

A D D S O M E B A R SCreate a new layer and use the Marquee tool to add a bar above and belowthe text. The bar's height in each case should be roughly the same thickness

as the '1' character, and they should be placed about half that distance from the text,as shown. Use guides to ensure the width of the bars is the same as that of the text.

u m i fl

I ^

^ H 1 ^I CjoI "

m

( ! □

i^Unlitkidl 100^. (bars. RGB/8)

J R V V

J .

A / .O A

U fl l i f fl l T i D

B R E A K U P T H E I M A G EIn the Layers palette, select the two layers you've created, but not theBackground layer, by Ctrl-clicking them, and then press CtrkE to merge them.

Press D to reset the toolbar colours. Select Filter > Brush Strokes > Spatter. Set SprayRadius to 20 and Smoothness to 5, then click OK.

A P P L Y M O R E E F F E C T SPress Ctrl+F to reapply the filter Select Dark Red as your foreground colourand select Filter > Sketch > Stamp. Set Light/Dark Balance to 25 and

Smoothness to 2. Use the Magic Wand tool (Tolerance set to 1, Anti-alias ticked andContiguous unticked) to select and delete the white areas of the top layer.


tM'of'er B'9 Boys Toys Unlimitec

T ' ^ j i t * * m i a 3 2 ^ £ & S ! A

m

Big Boys Toys

T ' II j jj^;;

^ . 9 .^ . J k4 .

T.^.LJ.J . / .- 3 ^

: j as a i l

m X G

IÛntUled-1 i 100V (BigBoy^ royt.KGR/SJ

it i i i i rgiTi i iwi i i - ]^

BnBiiy8[]iiv80 CREATE A BASE TEXT LAYERSave your existing image as a PSD file. Create a

new image that's a similar width to the first,but about twice as high. With the foreground colour setto Black, type the site's name, using Impact (again, partof the Creative Suite package) as the font and 150pt asthe s i ze . Use se lec t ions to reduce the s i ze o f the lowercase letters to 120pt.

0 TWEAK THE TEXTThe automatic kerning (letter spacing) of characters sometimes doesn'tlook correct, but it can be edited. For example, select the 'T' character and

press Alt+left arrow to reduce the kerning, moving subsequent letters leftwards sothat there's more of an overlap with the 'o'. Continue to edit other characters,judging things by what looks good to your eye.

Quick tipM A K E I M A G E S

M O R E V I B R A N TA commonly used trickin print media is tomake photographicimages more saturatedthan they would be ifstandard lighting andl e v e l s w e r e u s e d . I n

Photoshop, this effect Iseasy to achieve: selectImage > Adjustment >Levels and drag the twoo u t e r m o s t h a n d l e s

inwards, until the imagelooks more powerful -b u t d o n ' t o v e r d o i t l

6P A

3 . A

Ûnt i t ted- l « (bar« ,RC8/8)I r t m

BtaBoysToysiint imiTCP

D imnnBiTtpA D D T H E S T A M P

WM Copy and paste the 'Unlimited' stamp completed earlier on to a new layer.Use the Free Transform tool (Ctrl+T) to reduce the size of the stamp and to

rotate it. Note that to reduce the size of the stamp proportionately, you must holddown the Shift key while dragging a corner handle.

U n t i t l e d 1 1 0 0 r ( O r d e r / i n f u l i n e ; 5 0 0 2 9 6 - 1 0 2 3 .

©ADD MORE TEXTUsing the Type tool, add the opening hours and telephone numberunderneath the logo. We've used Arial for the font: the first line is in bold at

22pt, while the subsequent lines are sized at 20pt. Once you're done, use the Crop toolto remove excess white space around the logo.

BtaBoysTovs

E M P H A S I S E T H E S T A M PThe stamp needs to be more prominent. With the stamp layer selected, selectLayer > Layer Style > Stroke. Set Size to 2 and change the Color setting to

White. This will add a white line around the edge of the stamp. Assuming you deletedthe white areas earlier, this line will follow the uneven edges of the stamp.

BaBmisTiunuffiSB r^'^"

'ffBHiBmisTB^ynumiTtP

I

JfoLBiiysTfvBH^ûnmiSB "HonumigB ™HSI r f t < 1 { > K >

S A V E A N D E X P O R T T H E I M A G ESave the image as a native Photoshop PSD file, so that you can edit itsseparate layers in the future. For the web, the image needs to be smaller,

so flatten it (Layer > Flatten Image), reduce its size (Image > Image Size) and use File> Save for Web to export it. O


P o d c a s t

Get your freepodcast now!

In the new Practical Web Designpodcast - freely available online every twoweeks - 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

• Correct at time of going to press


Thoughtprocessor...

A/®/*?

PCPkis, .r e i n v e n t e dOn Sale Now

Subscribe todayand save 35% □ myfavou r l t e

magazines.co.uk

www.myfavouritemagazines.co.uk/ppd/p021

the I'the ^

Web designer's toolkit

t o o l k i tBuilding websites on a tight budget? Get maximum bang foryour buck with open source tools. Karl Hodge picks 20 of the best

. O N T H E C D

I t :

-..Mm ^

uilding a toolkit for web design

E2 can be a costly undertaking.Applications such asDreamweaver, Flash and

Photoshop can be expensive, to say the least.If you bought them all in one fell swoop, you

certainly wouldn't have much change left froma grand. Fortunately, as the saying goes,i n f o r m a t i o n w a n t s t o b e f r e e .

Open source software is one of the Internet'sgreat success stories. The Internet makes it easyfor teams of talented volunteers to get together

and build the kind of software they want to usethemselves. In other circumstances, commercial

developers make cut-down versions of theirapplications available for free. Either way,you're the one that benefits.

We ' v e c h o s e n 1 0 o f t h e w e b ' s b e s t f r e e

programs for web designers. Where possible,we've picked programs that work on Windows,Mac OS X and L inux . In cases where th is i sn ' t

feasible, we offer alternatives that are everybit as useful as their counterparts on other

platforms. Into this mix, we've included 10online tools that can speed up your workflow,

help you out with design decisions and evenhelp to publish your website. The resultingbundle of 20 applications (even more when youcount the alternative packages we've cited insome cases) amounts to a comprehensive toolkitof open source offerings that commercial

companies would find hard to top.Open source isn't just free software; it's a

whole philosophy. The programs aren't just freeto use, they're free to amend and expand. Asa result, one of the greatest benefits of using

open source tools is that they're oftenextendable via plug-ins, or can be customised

with templates. The feature sets in opensource software expand according to the

. demands o f t he use r, and upda tes come

\ thick and fast.\ We wanted to cover all bases in our

\ selection, assembling a set of toolsthat designers might use every day.Of course, we recommend

replacement applications for thebig three web 'essentials' -

\ Dreamweaver, Flash and\ Photoshop - but we also look at\ less obvious applications. You'll\ wonder how you lived without\ one or two of the extensions

and programs we've picked

1 . , E v e r y t h i n g i n t h i s l i s t i stried and tested. They do

exactly what they're supposedto and come with the backingof a community of satisfied

users in each and every case.Let's begin our countdown ...


Featu Web designer's toolkit

Nvu 1.0-.1

w w w . n v u . c o m

Based on Mozilla code, drag-and-drop authoringtool Nvu is the open source Dreamweaver-beaterPronounced 'enview', Nvu is a drag-and-dropsite authoring tool based on the same codeas IVIozilla Editor, which, in turn, is based on

Netscape Composer. Using these as a startingpoint, the Nvu team has added extensiveCSS support, with layers for layout, site

management tools, coding views and documentnavigation aids. In operation, it's similar toearlier versions of Dreamweaver, yet with

support for more current web standards, suchas XHTML. Like Dreamweaver, it's extensible,and there's a growing throng of add-onsavailable from http://nvuext.mozdev.org.

Nvu is in its first full version, but you'll besurprised at how slick and efficient it is. Thereare support pages and tutorials at www.nvu.com, and a user forum can be found at forum.

nvudev.org. For Windows, Linux and Mac OS X.

D E S I G N M O D E SU I Nvu has four modes: a normal drag-and-drop window; a

hierarchical HTML Tags window (useful for composing semanticstructures); a source window, which is a straightforward code listing; andPreview, which reveals how your page will look in a browser.

Advanced Property Editor

C u r r e n l a t t r i b u t e s f o r i < d i v >

I E . - -

Prooar ty Value

position absolute

top 3 1 p xheight 300pxleft 4 0 p xw k t h 600px

Cfck on an item above to edit its vdue

P r o p e r t y : V a l u e :

R e m o v e

] C a n e d Help

CODE ATTRIBUTESU J Right-clicking on any HTML element brings up a contextual menu

where you can choose to display advanced properties for thatitem. Some attributes may already be filled in. You can add further HTMLattributes by choosing the attribute from a drop-down menu beforetyping in the value in the text box next to it.

Nvu Is based onopen source code fromMozilla, and includesadvanced CSS layoutcomponents

„ C S S L A Y E R SThe program enables you to create layer-based CSS layouts.The tools are a little difficult to find, though. You'll find the

'Layer' icon next to the 'Choose a Font' drop-down menu. Click the iconto add a new layer, then drag and drop it into position onscreen. Youcan then drag the handles of the layer object to resize it in the document.

S h w t s a n d n i e sSinternai stylesheet

.bodytext

P W W f f fl r W T B I F W i H ! ! ! H f flFort family:(* unspecifiedC predefined;

I Afici, HeJveWca, sans-«r#C Use custom fort family:

F o r t s i z e :

Line height:" 3 ^

|unspec#iedASgrment: | unspedHed Te x t d e c o r a t i o n s :

r~ Overine

r Line-throughr UnderSne

P Blinking

r N o n e

The quick brown fox Jumps over the lazy dog

Unkdt. I StY»i!<*. | Riie |P Expertmode

E X T E R N A L S T Y L E SNvu also has a built-in, menu-driven CSS editor that's similar to the one in Dreamweaver.Go to Tools > CSS Editor to launch it. Click 'Style elf, then give the new style sheet a name.

Click 'Create Stylesheet', then 'Rule', to create a new rule based on HTML elements, or a new, namedstyle. Use the tabs to edit the style. "



Firefox Web Developer Extensionhttp://chrispederick.com/work/webdeveloper

Web Developer transforms your humble Firefoxbrowser into a must-have design tool

One of the best things about Firefox is itsextensibility. The Web Developer Extension willtransform your web browser into a kind of webpage analysis and editing suite, enabling youto delve deep into the structure of any pagew i t h i n t h e b r o w s e r w i n d o w .

T h i s u s e f u l e x t e n s i o n a d d s a n e w t o o l b a r

under your address box, with a list of commandsreadily accessible. You can disable features fortesting purposes, such as JavaScript or evenpage colours. You can also view cookie

information in pages, see form informationand validate code on-the-fly. The most usefultools reveal the structure of the page you're

working on, and can be found in the CSS andInfo menus. Here, you can toggle-on objectinformation, see ID and Class names, or getan outline of every block element.

We've employed Web Developer side byside with an HTML editor; a combinationthat renders drag-and-drop authoring toolsvirtual ly redundant.

|y- • « a y ^ [£IStOlMUr- CooMK

m F . » r

, C S S ' ' ' F o m w / b M Q W I *

D l f p ( i y £ 3 S 6 y H « « a Ty p »CbHSMf t+C

^ Outtne- O Resw © TooJs-s Z l o 1 ^

Monday, April 17.

^ U M r S t y t e S h M t . . .

£ d K C 5 S a r t 4 - S h f t 4 «

UM Border Sox Hodd

^hoQDLESI I r i n

Mecha Jimmy the Doughnut

J Wa drew theie In th« pub, my W«nds •nd I,t u p o n Wo b b l y B o b « n d e o n t r » b « n d p o i n u t j .

J put them on t'Intemrt. If you cMck the ImnI b e c o m e e n d o r s e d w t t b p b e l t .

I DOODLESI M e c h « J i m m y t h e D o u c h n u t■ J t m m y t h e D o u g h n u t

I A r e Yo u M y M u m m y ?' V o t e f o r M e . . .

I M o r e V l t s n r f n C t h e n » n O n n g e• N o A r m s N e v l U e

I Whit Citi Think• I t W k A ( ( Ye U o w

I Firt PropeUed Self Portntt' C h - c h - e U o . . .

; ARCHIVES• M * r e h 2 0 0 6

I ApHiaXK

1 UNKSI The All New Lucky BoysI C o l n e Va l l e y C h « o $

! Mr Twtin

w N l e h o p p e d ~A n d n o w w e ' v e

t h e y w i l l

Jimmy the Doughnut These stupid pictures are Ucensed under » Creat ive

ommons A t t r i bu t ion -NonCommerc la l -NoOer iM 2 .5 L i cense .

STYLE INFORMATION0 J You can edit an external style sheet manually using the Web Developer Extension, with a

live update in your browser. Here's how to do it; navigate to the page you want to edit inFirefox, then choose CSS > View Style Information from the Web Developer toolbar.

E D I T C S SSelect CSS > Edit CSS. This displays thecurrent style sheet in a separate pane

on the left. Hover over any element you wish toedit to see a list of CSS classes that affect it inthe status bar Alternatively, click on an elementto see a list of styles that apply to the selection.


AA IQSWd I

^ S l l

Ttlis essential extension is the work of one man, Chris Pederick. You can findfull documentation at his website, http://chrispederlck.com

1 0 O N L I N E T O O L S1 T H E C O L O R C O O R D I N A T O RWithout design training or an artistic eye, it's not alwayseasy to pick colour schemes that are complementaryFortunately, The Color Coordinator does it all for you:w w w . c o l o r c o o r d i n a t o r . c o m

1

S _ m 1

2 M Y I M A G E RNeed to convert, crop or colour an image for the web? _ J —-mylmager is a free online application that offers Sozens oftools and filters for editing images: www.myimager.com

3 . H T A C C E S S T O O L S-htaccess files aje invisible text documents that containcommands that configure Apache webservers for localfolders. This site contains several tools to automate theprocess: www.htaccesstools.com

M A K E C H A N G E SSwitch back to the main tab to findthe classes in your external CSS file and

make any edits you wish to make. When you'vefinished editing the CSS file manually, you canclick the Save icon on the toolbar of the Edit CSSpane, then upload the amended file to yourwebserver Refresh the page in your browserto see the changes applied.

4 ess LAYOUT GENERATORPart of CSS Creator, a site that offers hints and tips onbuilding CSS-powered pages, this form-based tool helpsyou to create CSS-powered, three-column layouts:w w w . c s s c r e a t o r . c o m

5 W 3 C V A L I D A T O R SThe World Wide Web Consortium has a collection of CSSand HTML validators. You can input code directly intothem, or link to files already online: www.w3.org

6 GOOGLE ANALYTICSThe latest free Google tool for web designers is'GoogleAnalytics, a remotely hosted traffic statistics system that'seasy to install on any page within your site:http://analytics.google.com

7 B L O G G E RBlogger is a full, free online content management system.You can host pages in your own web space or on Blogger'sown BlogSpot servers; www.blogger.com

8 N I C H E B O TTweak your site content for maximum search enginevisibility with NicheBOT, which features keyword suggestionand analysis tools: www.nichebot.com

Nic^OT

9 W 3 S C H O O L SNot so much an online tool as an indispensable resource.The CSS and XHTML references are essential for handc o d e r s : w w w. w 3 s c h o o l s . c o m

l i r

1 0 M O R G U E F I L EYou won't find any 80s office shots here, as this extensivearchive is freshly stocked and frequently topped up with the]cutting edge worl< of young, new photographers. Free fornon-profit use: www.morguefile.com

I morguepije


CopperminePhoto Gallery 1.4http : / / coppermine-ga l le ry.ne t

A dynamic photo album you can customiseat will to fit in with any websiteThere are several decent photo album and

gallery tools available as open source. The PHP-pov\/ered Gallery 2 (http://gallery,menalto.com)is a popular favourite, as is the remotely hostedFlickr {www.flickr.com), which, in recent months,has enjoyed a massive upturn in popularity.When choosing one tool for this particularfeature, though, Coppermine Photo Gallery wasour first pick. Like Gallery 2, it's a PHP script witha MySQL back-end. Though both have standoutfeatures, Coppermine is easier to use andcustomise, and is more extensible. It alsointegrates well with another open sourcefavourite: message board application phpBB.

In fact, the default template for Coppermineis based on the phpBB layout.

Some of Coppermine's unique featuresinclude batch upload, image rotation, aslideshow viewer, shared user management withvarious nnessage board systems, and random

picture display. It also has all the features youshould expect from any online photo album,such as user comments and private galleries,

category and album creation, automatic pictureresizing, thumbnails and automatic generationof gallery navigation.

Chief among Coppermine's features areextensive tools for customising the look of yoursite with the use of themes. As they're CSS-styled, there's a lot you can do without actuallyaltering any HTML. There are alternate themesavailable for download at Coppermine's

SourceForge page at http://sourceforge.net/projects/coppermine/.

Like Gallery 2, many of the imagemanipulation functions are dependent on PHPplug-ins ImageMagick and GD Library. Most webhosts will support these, but you can only installthem if you're running your own webserver, asthey're part of the PHP configuration.

>n iirt« c»pp«ftnln*,rtt

CopRermjneCoppermine Photo Gallery (Stable)

Demo for cpgl.4^.K

Home :; Register;: FAQ :: LoginForum :; Album list:: Last uploads i: Last comments :: Most viewed :; Top rated ;; My Favorites :;

S e a r c h

Choonithtmt jjj Ch»«M youi Ijnguig* ^

A n i m a l s P l a n t s

4 i f l l « * . ) « t o n « 4 4 4 t d « n J 4 n 1 0 . 2 0 0 e N O B 1 2 f l l M . l u l e n * i d d t d « n J i n 1 7 . 2 0 0 6

m B i

E lH e t w e t 4 ( < h l * t

1 2 7 1 w t m wA K « U p h t M M M M u i o k d *

P V A P

L a s t a d d i t i o n s • N a t u r e

K 4 W l i nr m b n 4 K k « « d - y e u ? B r i g h t . y M « n < ( « d * f t c h r i . 4 n i « * S i M p y p u p p y

2 7 7 . v i « » . 2 4 t l v . ^

S Audacity 1.2http: / /audac i ty.sourceforge.net

Get wired for sound with Audacity,the podcasters'favourite recorder

On the broadband web, no web designer's toolkit is complete withoutone comprehensive free sound recording and editing tool for creatingpodcasts. Audacity is it. It's a critically acclaimed audio editing system forWindows, Mac and Linux. It can also be used to convert audio files toWAV or the open source Ogg Vorbis format; or you can use it to recordyour own chart-topping CD. Aside from being a useful sound sampleediting tool, it's a fully functional multitrack recorder.

Tracks, in this case, are separate audio channels that can be playedback simultaneously For example, you might put some stereo on trackone, a few sound effects on track two and a voiceover on track three.You can then mix each track individually, placing them at differentpoints in the stereo field, changing their volume and adding effects.The result can then be mixed down to a single stereo file and saved ina format that's ready for the web and for registering with iTunes.

Any budding musicians may want to take note that this is exactlythe same basic process that professional sound studios use to recordthe pop hits of the day. Remember this before you splash the cashfor a hardware recording system.

For podcasting, you'll need the LAME Encoder (http://lame.sourceforge.net) to save in MP3 format. Unfortunately, it's illegal forus to distribute it to you because of licensing issues. Find out more ath t tp : / / t i nyur l . com/bka3e

t| Fte El* vtow ProlBrt Cenarate Effect flnalyw Hotp

M i " -

P«««r*d by Ctppt rmint Phste 0* l t t ry

Coppermine Gallery's customisation and integration features make it a safe choice for all kinds of websites•This professional-standard recording and audio editing program can be usedto create button sounds, soundtracks for Flash movies and podcasts



Gimp 2.2w w w. g i m p . o r g

The Gimp is the open source Photoshop: it's powerful and stable, yet it's completely freeIf there were prizes for the most loved Linuxapplications, GIMP (or The Gimp) would havea full trophy cabinet to boast about. The GNUImage Manipulation Program is, essentially,a free alternative to industry heavyweightPhotoshop, All of your favourite features arepresent and correct: powerful painting tools,support for massive image files using a tiledmemory system, layers, transformations, webanimation, and support for all the web's mostimportant file formats. It can also open AdobePDFs and save Photoshop format files. Naturally,it's able to save work In JPEG, PNG and GIF

formats, and enables you to work with web-smart colour palettes. Starting life on Linuxonly, it's now available in versions for Windowsand Mac OS X.

There are several features that are ofr t a r + i r i i l a r i r v + o r o c t i n r \ A / e k K H o c l n n i s r c T K a fi i m n

The Gimp may be free, but it still beats many commercialapplications when it comes to the features on offer

image editing

saves table data in HTML format, for example,and there are built-in plug-ins for generatingbuttons and banners. If a feature you need

appears to be missing, you may be able toplug it in using one of many useful plug-insavailable from around the web. For example,

you can generate JavaScript rollovers or staticweb galleries using free plug-ins from http;//

reg is t ry.g lmp.org.The Gimp may have many of Photoshop's

basic features, but the workflow is quitedifferent. It's modular and menu-driven, sonew users may find that it takes some timeto navigate around its 'alternative' interface.

Fortunately, there's a thriving community ofusers ready to take care of you, and the worku n d e r t a k e n o n r e c e n t v e r s i o n s h a s f o c u s e d o n

cleaning up the general clutter. Head to http://gug.sunsite.dk for tutorials and forums aplenty.

GMail Drive/gDiskwww.viksoe.dk/code/gmail.htm (Windows)li t tp;/ /gdisk.sourceforge.net (Mac)

2GB of online Storage for free?That's what GMail gives you

NoteTab Ught 4.95/CreaTextwww.notetab.com (Windows), ht tp: / /creatext.sourceforge.net (Mac)

Hand coders sometimes need a bit of help. This is where NoteTaband CreaText come in handy...

G M a i l D r i v e s h e l l e x t e n s i o n

S'T'-o r

*1C - i r. x .X ■

. X ;

e

^ Q « l

JC."- A , . X t m j . p m

lh« creates a virtual fitesystem aroufid your (5oogte GmalGMaM Or>v« ts a Sh«l NamespaaccoiM, aloMtng you to us9&meil as a storage medium

GMa) Dnv» awtts a virtuaf fliesystem on ttp of your Google Gma»( account and enabtes you to saw andretneve dies stored on your Gmail accetrt directVfrom inside WliKtowB E*ptofer GMail Dnve Irteca#/ adds anew dfPrt to your computer under Ihe n, co.»ut.r totder, *»nereyO(j can create new lowers, copy anddragWdropftlesto

F i e E d t S e a r c h V t o w M o d i f y

\ a a a » t s

•GMail Drive can be accessed on your computer like any other storagedevice. Files are saved as mail attachments

GMail's great and, of course, free - which makes the 2GB of storagespace it provides in order to save email even more generous. At onetime, the site was super-exclusive, with new members able to join byinvitation only. You still need an invite to sign up with GMail, but withso many users, each one of them with 99 invites to send, it's relativelyeasy to get an account.

And when you've got a GMail account, you can send a second inviteto yourself, getting a second account to use for online storage. GMailDrive for Windows (or gDisk for the Mac) allows you to add a GMailaccount to your machine as a virtual hard drive, so you can drag anddrop files to and from the account. It's an ideal way to share largefiles between members of your design team.

H T M L

Dooment Favortes Tools Hot'

__e ta i <1! M w M; 1ft e ^Roadme.M Readmootti' WhaWwi.bit 1

HTML Terrplalei N e w W e b p a g eDocument Elements) B a t ei Basefont1 Bod^9 HTMLbegr! H T M L e r x jt Last updated...I L inki M e t ai Styte) TUeAnchor Elementsi Bookmark» Hyperink) H>^wrfink - description} Hyperfrk to bookmarki Hyperink with image1 M ^ oBlock Formattingi Addressi Blockquote1 Centeri Drv» Fonti L r i e b r e ^

R E X D H E . T Z T l o r N o t e T a b L i g h t " 4 . 9 5 ( F r e e v a r e v e r s i o n )

V e l c o n e t o N o t e T a b L i g h t !T h e u l t i m a t e f r e e N o t e p a d r e p l a c e s t e n t a n d a c a p a b l e H T H L e d i t o r .

I f y o u a r e r e a d i n g t h i s fi l e i r o n y o u r n e w N o t e Ta b p r o g r a m , o p e n t h efi l e

R e a d m e . o t l t o q u i c k l y d i s c o v e r s o m e o f i t s m o s t o r i g i n a l f e a t u r e s . I fy o u a r e

n o t f a m i l i a r v l t h t e c h n i c a l t e r m s , y o u v i l l fi n d h e l p b y v i e w i n g t h eG l o s s a r y . o t l fi l e t h a t c a n b e a c c e s s e d f r o m t h e B e l p m e n u . S e e t h eV h a t s N e v . t x t

fi l e f o r i n f o r m a t i o n o n t h e m o s t r e c e n t c h a n g e s m a d e t o t h e p r o g r a m .

T i p : p u tt h e c u r s o r o n a n y o f t h e s e fi l e n a m e s a n d h i t t h e T 7 f u n c t i o n ) c e y t oo p e n i ti n n t e d l a t e l y .

C o n t e n t s

1 . I n t r o d u c t i o n

Every web designer needs at least one good texteditor, and preferably one that makes HTMLmarkup easier to place. We've always been fansof HTML-Kit, available for download fromwww.chami.com. Yet, for the purposes of thislist, we've decided to opt for NoteTab Light.While HTML-Kit has its own charm and unique

features, NoteTab Light comes with FTP, a libraryof sample code, and HTML markup tools. It alsointegrates with TopStyle Lite for CSS editing.

NoteTab Light is more than a replacement forNotepad, with advanced text and code features

NoteTab is for Windows only, so we've chosenCreaText for Mac OS X. It's a straightforwardHTML editing tool with great features, such as

tag colour coding, a colour chooser and menu-based CSS editing. You can preview your codein multiple browsers, with buttons displayedfor each browser installed on your system.



Rico/Prototypewww.openr ico .org , h t tp ; / /p ro to type.conto .ne t

Ajax Libraries make coding Web 2.0 interfacesmuch easier, but which do you choose?

Inkscapewww. inkscape .o rg

An open source challenger to the vector features found in Flash

Inkscape is a vector drawing package in themould of Adobe Illustrator that lets you output

your images in a variety of web formats. It alsosupports a range of standard scripting formatssuch as CSS, XML and SVG (or Scalable Vector

Graphics), which is the W3C's XML-baseds t a n d a r d f o r s t a t i c a n d a n i m a t e d v e c t o r

illustration. There's native support for SVG inFirefox, Opera and Apple's Safari browser, butInternet Explorer users need a helper

application to view files.

Inkscape's SVGoutput is becomingmore important asusers turn away fromInternet Explorer

Inkscape's drawing tools also make it idealfor creating web images, including all mannerof buttons, banners and logos. You can evenuse it on prototype and web page layouts.

Documentation is mature and readily

available, and it's popular enough to have itsown WikI (wiki.inkscape.org), where you'lldiscover a full user manual and some basic, yethelpful, tutorials, plus galleries full of Inkscapeart. Versions are available for Mac OS X, Linuxa n d W i n d o w s .

Build online widgets that update using dynamic data with Rico's generouslibrary of Ajax interface components

Ajax (Asynchronous JavaScript and XML) has been around for quite sometime, but a recent upsurge in use has been accompanied by a slew of newtools. Microsoft is currently beta testing Atlas, a suite of scripts that helpsyou build Ajax-enhanced pages in ASP.NET 2.0. Adobe weighs in with Spry,which is a similar framework of user interface controls and code snippets.Even Google has got in on the act.

The Ajax framework we recommend has a longer history of use and is

actually based on two technologies. First, there's Prototype, a library ofbespoke 'classes' for file, form and external data handling. Rico is a libraryof ready-made interface components, effects and interactive elementsbuilt on Prototype's extended classes. Rico and Prototype are not for

beginners, but together they make the programming of Ajax interfacesa lot easier.

flwGeeklog 1.4www.geek tog .ne t

Geeklog is a content management system packedwith powerful features for building dynamic sites

Pitched somewhere between the simplicity of blog applicationWordPress and the multiple bells and whistles of full-blown content

management portal PHP-Nuke, Geeklog is a powerful foundation for allkinds of websites. It can easily handle daily news updates, blogs,brochures, fan portals, documentation sites and more besides.

Geeklog and PHP-Nuke look quite similar, yet Geeklog is a morestreamlined application. Still, Geeklog is modular and extensible, so ifthe default installation lacks any features you feel you really need, youmay find a plug-in online. It also integrates with a range of existing off-the-shelf open source applications. Want to add a message board toyour site? Geeklog integrates directly with phpBB. How about a photogallery? Simply plug in Gallery 2 using the bridging application GL_Gallery 2 (http://snipurl.com/glgallery2). More modules can be found athttp;//5nlpurl.com/galleryintegration.

Geeklog enthusiasts claim that the software is more secure thanits rivals in the Nuke family It was originally built for Security Geeks(http://schmoo.com), so this makes a lot of sense.

These same enthusiasts also point to Geeklog's focus on contentmanagement and blogging as core features, complete with commentingand trackback URLs, such as WordPress. PHP-Nuke and PostNuke try to

C o n t r f c u t B D o w n i o a t t e F o f u m W e b R e s o u r c e s

v eeklogL . w e l c o m e t o Q e e k t o a

saarrh i TKfsday. Xrw 06 2006 O 06:31 AM

Qettt ig started* O o w n i o a d G e a k i o Q

♦ ^..Dqcs..♦ D e m o S i t e l

S u p p o r t♦ f f i Q

* M a i n g L i s t s

A S u a

♦ P|LignPgv9tQPff';<iirlR♦ (as

S e c t i o n s

H o m eG e e k l 0 Q ( l B 4 )G e e k t o Q 2 f 2 B )fi fmccensDis (196)

Geeklog 1.4.0sr3 and 1.3.11sr6Sunday, May 28 2006 • 11; 15 AM EOTConbtmindbyiQiiView: 1 ,055

The Seojlty Science Researchers Institute Of Iran (KAPDA.r) has reported the fotowTig saorttyissues n Geeklog:

1. Posstile SQL Injection and authentication bypass2 . P o s s l i l e X S S3 . P a t h d s d o s u r e h t h e i w « » i « . > » o f s o f T » t h e m e s , e . g . t h e P r o f e s s i o r w I t h e m e

Addtlonaly, an nterrwl code revtew has revealed another possfaie SQL mjectlon m the story suiDfrtoion.

We are therefore robas^Tg Qeeklog 1.4J)sr3 (cofrplete tarb^. utaorade arcl-we) and Ocofcfcig U.llsr6{upgrade active, combo update) to adcêss these Issues and woiid suggest that you hstal these as soonas posstte.

R e a d o n f c r m o r e N b r m a t i o n . . .

r e a d m o r e ( 3 7 6 w d s ) P o s t a c o r r r n e n tC o m m e n t s fl 5 ) T r a c k b a d c s f n

P l u a n s ( 2 2 )S e r v e r ( 2 4 )

Scan (7)

U s e r R n c t i o n s

L a t e s t F b r \ « n P o s t s

General HeÎ n s t a l a t l o n

QenerdHetI n s U t i t o n

G e n e r d H e f e )

Whjt CMS shaidlpftk? Need h„.Can ' t Log In

d o n o t u s e s p a c e s

r w i p I r i a r i n n t - h i r n

H e l p t r o u b t e s h o o t i n q L t s e r f e t . . .

*Q (K/WAK 06)09

The i.ltmate Webiog Sysi.^

W h o ' s O n l n e

Gues t Use rs ; 23

W h o ' s N e w

e m o s m a c kt h e l s i v s r w d f

What Is Geeklog?Geeldog is a PHP/MySQLbased appfcation formanajng dyrwrmc webc o n t e n t ,

"Out of the bo*', it is a Wgengrie, or a ^ withsuppoit for comments,t[ad(bKl<% miitttesyrflcatton formats, spamprotection, and al the othe

v r t a l f e a t i r e s o f s u c h asystem.

The core Goottegd b t r t u t i a n c a n e s l y b eextended by the manycommunity developedpluîs to radcaly after Itsfunctionalty. AvalableD l u a r i s h d u d e f a n m s . I n a a

gata'ioi, and many mere.

be all things to everybody, and come crammed with extra featuresthat not every site will need. On the other hand, Geeklog lacks thecommunity support that the Nuke family portals enjoy, providingusers with fewer plug-ins, hacks and extensions to play with, andit faces stiff competition from tools such as Joomlal O

•We cliose Geeklogfor i t s ba lancedapproacli to contentmanagement

V- " ■ ■'■.a.-.

' ■ - jt - ■"' I. ■. i J i ' ? . . . • P . 1 ' '

Website build-off Listings site

II The weB SiteWflP - Off

Our four web design experts apply their copiousdesign skills to the humble listings site

It's all very well enjoying the whole gamut of Internet eye-candy at our disposal, but I thinkwe all admit that one of the net's more practical functions is for finding things, such as a goodrestaurant, a decent price for a lawnmower, or a second home in Gibraltar.

Our four experts - Andres Rojas, David Foreman, Paul Wyatt and Marc Peter - have once again "come up with the goods when it comes to designing something quite different from the usual

staid listings site. Now you can choose from the features they've used, andlet their individual design styles inspire youin your own website builds.

T H I S M O N T H ' S B R I E F :

Create a functional, user-friendly(yet funky) listings site.

* ■

Le t scetReaOy

xi to RUMPLEP a u l

w y a t t


Website build-off Listings siteo

I —

'H'he information provided and the resultsdisplayed depend on the mood you select. Younever know what you need until you see it'A n d r e s R o i a slllumina Digita 1 www.illumina.co.uk

Key features

CDT O P N AV I G AT I O N

D i r e c t o r y -companies, services, etc.Features - galleries,comments, suggestionst h a t f o l l o w t h e t h e m e

of the week. Top 10 -refers to the best thingsyou can do according tocategory or mood.

ijgv THE MOODM E T E R

Th is i s the sea rch too l

for specifying the moodyou're in. Dependingon the mood you've

chosen, the colourscheme of the toparea will change.

T E M P E R AT U R E ,DATE & CITY

Depending on thecity you've selected,and perhaps the

temperature, the toplandscape will change along with the backgroundcolour. The colour scheme alteration will take placeif you haven't chosen a mood with your search tool.

L E F T N AV I G AT I O N

Where you can access categorised Information.

M A I N F E A T U R E

(J)

The theme of the week, featuringuseful info as well as tips and tricks.

©BOOK NOW FORThis is a feature that keeps you up to datewith forthcoming events, so that you can bookw e l l i n a d v a n c e .

N E E D D I R E C T I O N S ?

A handy map, so that you don't get loston the way to your new adventure!

Abou t t he s i t eTo follow the brief, Iwanted to design a listingssite than not only lookedmore pleasing to the eyethan a conventional listingssite, but offered animproved, personalisedsearch experience. This isa site that attempts to

adjust itself to people'sexpectations and moods.

The site provides resultsthat are not only relevantto a specific search, but area l s o r e l a t e d t o t h e m o o d o f

users and perhaps to whattime of day it actually is.You may be searching for

heavy metal bands, but whyn o t h a v e a l o o k a t d a r k

clothing if you're in thats o r t o f m o o d ?

The functionality of thesite is based on the type ofmood you select. There arefour categories: sad (I needa tissue), angry (grrrrrl),neutral (whatever) and

great! This feature could be expanded further to incorporate a morevaried range of emotions.

IVIy research included visiting listing sites that are related to goingout, eating, dancing, and so on, as well as weather sites and air

conditioning companies. You might be asking 'what doesthe weather and air conditioning have to do with

listings?' Well, the mood idea came from aninteractive tool for an American air conditioningcompany, where, depending on the temperature

you choose, the colour scheme of theinterface changes accordingly.

I thought that this could be effectivelyapplied to our listings site not only interms of the colour scheme, but also in

terms of the information provided and theresults displayed. The result is a site that's

useful and fun; you never know what youmight need until you see it in front of you.

The rest of the site elements are add-ons to thisparticular concept. When searching for specific

information, users are presented with relevantinformation that other people (who happen to be

in the same mood) also recommend. This turns an

ordinary listings site into something more dynamic.

A b o u t m e :As 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 H :I've been working on a couple ofprojects for the BBC, including as c i e n c e w e b s i t e a n d a n o n l i n e

i n t e r a c t i v e d r a m a . I ' v e a l s o w o r k e d

on a brand new web project for apublishing house,

T H E S I T E S I ' V E B E E N V I S I T I N G :wvvw.barbican.org.ukGreat use of colours, lovely rollovers,easy to use.

w w w . a t h l e t e . m u

Cm not such a fan of the band itself,b u t t h e w e b s i t e ' s u r b a n f e e l a n d

innovative interactivity has been aninspiration for me.

w w w. c s s z e n g a r d e n . c o mNot so much for the looks, but for theoverall message and approach to CSS,I've been recommending this site tobeginner- and advanced-level webdesigners alike.

WHAT I'VE BEEN WATCHING:TropicaltaA c e l e b r a t i o n o f B r a z i l i a n c u l t u r e a t

the Barbican, including an exhibition,and concerts by Brazilian and Britishmusicians. Tropicalla Is the nameof the cultural revolution that has

changed Brazilian art, politics, musicand fashion since the 1960s.

'The Last Picture Show'. I've alwaysliked 70s cinema, and this film alwaysstrikes a chord with me. 1 like the paceof this bittersweet tale of life in ableak, disintegrating town in them i d d l e o f n o w h e r e .

'Brick'. I found this film mostenjoyable. It's an Ingenious attemptto use film noir in an otherwise trivialhigh school tale.

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 H :Boards of Canada - music that neverfails to soothe me while I'm working.



( (

A b o u t m e :As 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 Pictures, Canal Plus andCarlton Television. View my work atwvvw.paulvvyatt.co.uk.

W H A T I ' V E B E E NDOING THIS MONTH:As usual, we've been busy creatingsome rather smashing new areasof the Lycos site. We've also beenworking with Nintendo on itsNintendogs product, producing a verycool microsite with the all-important'Rate My Pooch' section - priceless!

THE SITES I'VE BEEN VISITING:

Early portal sites were generally chock-fullof links on their opening pages. There wasno enticement^ no content and no colour^^Paul WyattLycos www.lycos.co.uk

Key featuresSTYLE, TONE a LAYOUTA very calming tone to this site, as it's easy on the

eye and reflects the ,subject matter well.It's important todo this with your

designs. Forinstance, itwouldn't be a goodi d e a t o h a v e

designed this sitein pillar-box red.

F O N T C H O I C E

A k b a r w a s

u s e d f o r t h e E c o l i s t

h e a d e r . T h i s w o r k s

w e l l w i t h t h e

subject matter andhelps to set thet o n e o f t h e s i t e .

Always use a fontthat's appropriate;d o n ' t e n t e r t h e

f o n t h a l l o f s h a m e

with some poorlyc h o s e n s e r i f .

©TOPICALL I S T I N G S

Hook youra u d i e n c e . P r o m o t e

from the homepage

your most topicall i n k s i n t h e m a i n

promotional spot.

£COaST 02£(vJVlfiOM€WrAL C0«£

f l O M t 6 f l E £ N i s s u e s A 6 €M C 1 € S C D f « - € i i e M C £ S l « C ! f C L I N 6 D W E C T O W

f O C U S O N L M ^ R E ,RESERVES

nature reserves in the UK. Wel i r t t h c m e H !e O T 9 l , I S T f ^ $ > >

F O C U S O N : R E C Y C U N G

i v t y d n g t i t e i w h e r e e n dto recydi. We've got llftte o f where you an re tydecant, paper and text i les

G O T O I J 5 T « l < ; S »

contervatkoa use. me t t o ra t i on and deve tepmen t o f

t h e i n l a n d w a t e r w a y s

M T O l B T M G S »

iMEl fTA lUPCOMING ENVIRONMElfrAL EVENTS

1 2 X > « 3 0 0 f i ; T h e N a c y c H n f 4 Wa r t * M a o a g am e n t a s h i t o i t t o n , } 2 - 1 4 S e p t e m b e r i 0 0 6 N E C

Birmingharrj, b the etserHial annual eyertt for theindustry. The event showrcases the latest produas

and services from ower 400 top quality companies,indudtng the highlyMlttr outdoor exhibitionf e a t u r i n g v e h i c l e d c m o r u t r a t t o n

ised sei^Wssto

n

IThe specialised senff^msstons are free of chargean6 offer you access to the top industry expertstalking sense about the hot issues that affert yourbtfinets. This year's sK.. Tue, t3 Jun200« 0«.00:12GMT Waste 2006 {Stratford upon Avon, UIO

l a O S O M S ; T h « F o u r t h t i e n n i a l I n t e r n a t i o n a lConfaranc* provtdingwastemanasemcnt profes-siorvis with a forum to debate the managemernand regula t ion o f cont ro l led wastes.

Waste 2006 fol lovirs the tradi t ion establ ished sinuWaste 2000 o f a b ienn ia l In te r iu t iona l Conferennwhich debates the latest strategic planning A regulatory guidance, the best applied research and theshCMKasingof practical and cost-effective solutions

E N V I R O N M E N T A L E D U C A T I O N

Links counesy ofygggr/iatgrtnet.net

X h P 9 » » e t i^ ^ ( f o r l igt^»Ovrc»se, . .very good asc ttudksV i F t y t l fi s i i t e g r k

O r i d £ f w i r o n { n f n U j C e n t r a :The Nat iona l Gr id run aset o f we l i ^nown andver )

wel l resourced educat ion centres around theccHXitry. This Kst wi* show you tha nearest to you.

nesy e i puiatgrtnet • to/|Ti Schools

urces a JîN>hf-orier

C A R E E R S f t T R A I N I N G

If your looking for a career inMolving theenwirorwTtent then you should start

looking here. We have listings of all therelevant recruiters to help you in yo<*search .

G Q T O U S T J H e W

O ;A CLEAR PAGE HIERARCHY

Structure your pages. Don't have uneven contentboxes floating around the page. When it comes tocontent, it's important to have this information on aconsistent modular grid.

CLEAR TOP-LEVEL ACCESS POINTS

>4 This top navigation bar is clear and well-structured. Think carefully about your categories andmenu bar choices. Don't overwhelm the visitor - keepi t c l ea r and conc i se .

Abou t t he s i t eThe brief this month called for a listings site. Now what does that

instantly make you think of? Gigs, venues, pubs and restaurants?Yes, there are certainly plenty of these kinds of website all over the

web, so I decided to breakaway from the norm formy project.

After browsing for awhile, I noticed that there'san amazing variety ofhigh-qual i ty informationa v a i l a b l e o n t h e w e b a b o u t

t h e e n v i r o n m e n t . I d e c i d e d

to pool this info to createt h e E c o l i s t w e b s i t e .

At the heart of Ecolist,

you'll find a listings sitewith a wide variety ofinformation at your

fingertips, from greenissues and upcoming eventsto local rallies and tips on

recycling. You'll find it alll i s ted he re .

The page I've designed isthe gateway to this listings

site, and is hopefully moreinteresting than a plain olddirectory-style front page. Ifyou like, you can alwaysaccess these pages directlyfrom the top drop-down

navigation bar. However,the gateway page shouldbe a little more 'involving',and should encourage thevisitor to delve deeper.

Take a lesson from the early portal sites, whichwere generally chock-full of links on theiropening pages; there was no enticement, nocontent and no colour. The design of Ecolist is

such that it initially looks like anenvironmental portal bursting withcontent. Well, it is, but the content is

found on the links to the events andinfo it provides. It just makes it that moreinteresting and informative for the visitor.

When designing a site such as this, it's agood idea to keep it clear and asaccessible as possible. Make sure youpromote event-driven listings to adda topical flavour, and keep the siteregularly updated.

T h t € ; H * » 1 i S n f 9 r l > r « l » m < L i « 5 S P < i # n dprciect - involved in environmental education in Scotland'This orte's for yoaThe Assoda t i on f o r He r t t aoe I n te rp reu t ^ - used t o beStBH. Look up the articles from the Journal, there arek>adi of good ones In their archive.The Inst i tute for Earth tducat lof t (U.K.)f r » e ! } 4 t « f t o i . » r t hCoastal explorer proiect from Kent with an onlinebook. Ideal for teachers and students rteeding coastalCeoâphy resources at Key Stage 2.M 0 R E »

^ J K J f SFind the r igh t Erw i ronmerâ l

Agertcy to help you. We haveful l l ist ings of al l Internat ionalagencies and o^nisationt thatcart help you with all your environmenta l concerns .

wvinA/.nlntendogs.co.ukI've been working with these guys thismonth and I'm getting a little bitaddicted to these virtual pups!

w w w . fi n d a p r o p e r t y . c o mI'm looking for a flat! Very much inthe theme of this month's brief. Find aProperty is a listings site for anyonelooking to buy or rent a new home.

www.drawright.comI've started a drawing course at SaintMartin's College of Art and Design. Ithought it was high time I got back tobasics! Betty Edwards has a brilliantmethod of teaching, and it works.Give it a try - release your inner artist,

W H A T I ' V E B E E N W A T C H I N G :I went to see 'Ziggy Stardust and theSpiders from Mars' at the NationalFilm Theatre. This was Bowie's lastouting as Ziggy from a concert at theHammersmith Odeon iri 1973. Mad,bonkers and very colourful. Loved it.

WHAT I'VE BEEN LISTENINGT O T H I S M O N T H :I've bought myself an iPod! Cm notused to carrying my whole musiccollection on one tiny device. Hence,I've been listening to EVERYTHING!


Website build-off Listings siteo

concentrated on keeping the front pagefairly busy^ with plenty of links that take youstraight into the content of the siteD a v i d F o r e m a nToast Design www.toastdesign.co.uk

A b o u t m e :I'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 small brochure-style static sitesto large content-managed monsters.As a creative working with a widerange of clients (and budgets), I havequite a bit of experience in dealingwith different types of websites andcontent requirements.

W H AT I ' V E B E E ND O I N G T H I S M O N T H :Working on a large site for a lasermanufacturer, a promotional micrositefor a national charity, and some initial'look and feel' developments for anational pub chain.

T H E S I T E S I ' V E B E E N V I S I T I N G :

" T W » 2 0 / 4 0

http://istockphoto.comI ' v e h e a r d i t r e f e r r e d t o a s " t h e

designer's dirty little secret", and thisi s n ' t f a r f r o m a c c u r a t e . O f t e n w i t h

tight budgets, imagery suffers, but thissite offers stacks of royalty-free imagesfor less than the price of a pint.

www.myfonts.com/WhatTheFontThis site is incredibly useful, and I useit quite a lot if t need a hand inidentifying fonts, simply by uploadingan image of the font I want to use.C l e v e r s t u f f .

h t t p : / / t h r e a d l e s s . c o mIt's worth checking out this site whenthey have a $10 sale - great T-shirts!

WHAT I'VE BEEN WATCHING:I've hardly watched anything over thel a s t m o n t h . I h a v e f a r t o o m u c h t o d o !

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 H :The usual mix as supplied by 6 Music,Y e a h Y e a h Y e a h s a n d T h e F u t u r e h e a d sat the Carling Academy, Birmingham.

Key features

(3)H E A D E R

Bold navigation and a

strong use of colour serve toprovide easy navigation andstrong branding.

© :P R O F I L E S

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

the newest listings on the site,complete with thumbnails forquick reference of style/content.

©FOCUSA more detailed listings

option for selected content. Thisa r e a w o u l d f e a t u r e a c r e a t i v e

freelancer, perhaps, and providethem with free exposure. Ifthe site was charging peoplefor listings, this would be

premium space.

© ;

n o (3>

C O M M E N T

Something for the siteowners - a space to promotediscussion among the listedm e m b e r s a n d v i s i t o r s . C o n t e n t

that changes and encouragesi n t e r a c t i o n a n d r e t u r n v i s i t s .

©LINKFEEDA section that allows registered users to submittheir own news and links. This encourages potentialsign-ups and the overall popularity of the site.

©MENU LISTSHere, we can providel i n k s i n t o t h e s i t e

without eating intoscreen space. Itcou ld be a l i s t o f

'premium' members,other sites or pageswithin the listingss i t e i t s e l f .

A M I > « i > T 4

I I B S I I

©M a r k J e n k i n s•I have quite a definedstyle - a sort of mishm a s h o f i m a g e s ' . . . m o r a

B e n H a w k e s' I ' m s u r r o u n d e d b y j u n kwhen at my desk - them o r e , t h e b e t t e r ' . . . m o r a

Vincent Chor>g'I th ink I 've final ly foundmy cal l ing. Wel l , for nowa n y w a y ' , . . m o r a

C a r o l Y e h'I use nature as myi n s p i r a t i o n ; I ' m v e r yinfluenced by Japanesec u l t u r e ' . . . m o r a

M i k e P r i c e' P l u m b e r s s a l a r i e s a r enow look ing hea l thy '. . . m o r a

Kirst ie Reynolds' I h a v e b e c o m e l e s s

s c u l p t u r a l , m o r ef u n c t i o n a l ' . . . m o r a

li&LM a r c u s P e r k i n s

L o n d o n - b M « d p h o t o t o g r a p h c rM a r c u s P e r k i n t t * l l s u s a b o u t h i sh u m a n i t a r i a n p h o t o g r a p h y w o r k .

. . .My approach Is a lways the same: taket ime to understand the subject so that Ican do it justice. 1 believe in not hidingbeh ind techno logy, bu t hav ing thepat ience and perseverance to capturethe essen t ia l d ign i ty o f sub jec ts . . .mora

(J)W e l c o m e t o o u r v i r t u a l t s l e .

M a r c u s P e r k i n s

...My approach is always flWme; taketime to understand the subj«ct so that I


. . .My approach i s a iways ^e same; taket ime to understand the subject so that I


. . .My approach is a lways the same; taket ime to understand the subject so that I

M a r c u s P e r k i n s. . .My approach Is a lways the same: taket ime to understand the subject so that I


. . .My approach is a lways the same: taket ime to understand the subject so that t

M i g h t y l s l a n d .Y o u a r e h e r e .

Welcome to our island, ac rea t i ve pa rad i se .. . . m o r a

[ Mightylsland Information

[ Friends of Mightylsland I J ©[ Eteck Issues

( f y o u w o u l d l i k e t o f e a t u r e d i n afor th-comir>g is«u«, c i lck hera.

T h i s m o n t h s C o v a r .

Ju l y ' s cove r comescou r tesy o f MarkW i l l i a m s o f T o a s t ,

C h e e r s .

A b o u t t h e s i t eListings websites are generally useful, providing quick and simplereference material if you happen to be looking for something specific,like an upcoming event, or a good local restaurant. This month,

conversely, we decided to approach our task from the creative angleand have a look at a listings site for creative people that could act asboth a mini portfolio site for the creative freelancer, and also as a poolof potential talent for the rest of us to plunder.

Our first thoughts regarded the branding of the site. A quick searchon Google provided a vast selection of creative listings sites, someplain, some strongly branded. We opted for the latter approach for

our own project, feeling that a well-designed site with a bold, visible

personality would make a memorable impact.We've concentrated on keeping the front page fairly busy, with

plenty of links that take you straight into the content of the site; notwasting bandwidth (or time) on nonessential eye-candy (listings sitescan get busy, so if we have to present a lot of information, we figuredit should be for the content rather than the overuse of images).

With this in mind, the layout we've opted for is straightforward, andwe've used the careful placement of colour, and a well-planned overallstructure, to differentiate the page sections. In order to avoid a huge,vertically scrolling homepage, we've added a weighty portion of sub-page links into pop-up navigation.



fr \

new entry is a good starting point for debate(even if if s not a new book)^ and there ^s anopportunity to gather opinion by voting^^M a r c P e t e r

^ On-IDLE www.on-idle.com

A b o u t m e :After studying typography, Ifreelanced for five years as a graphicand web designer. I 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 l e c t u r e a t O n l i n e L a b o r a n d t h e

University of Art and Design in Zurich.

W H A T I ' V E B E E ND O I N G T H I S M O N T H :

;Pepper - an existing client - wrotea story chronicling the life of af o o t b a l l f a n . I t w a s s u c h a s u c c e s s

that it was published for the WorldCup in book form. I designed thebook, cover and layout (you can orderit from www.pepper.ch). I've alsohelped to launch interactivecalculators for the retail banking sitefor the Saudi British Bank, and learnedthat remote working has itslimitations when factoring in athree-hour time difference, Arabicc h a r a c t e r s a n d I s l a m i c w e e k e n d s

(Thursday and Friday).

T H E S I T E S I ' V E B E E N V I S I T I N G :www.google.com/analyticsI finally got an account and wow ~what a great tool! I'm now spendingmornings working out how it worksand setting up client websites,

w w w . b o x . n e t

During research for a new clientproject, I came across this free 1GBvirtual online storage facility.

w w w . t h i n k v i t a m i n . c o m

A very nice portal for designers talkingto designers. Worth a visit every day,

http://dei.icio.usFor inspiration on context-sensitivetagging for this article.

Key features

©CATEGORISED NAVIGATIONBorrowed Books - the inspiration forthe site. Top-line essential, yet out of the

way buttons for Home and Contact. Thebook categories double as navigation

buttons, giving one-click access to a specificlist (or directory). This caters for future sitegrowth, as categories can be added easily.

©CLICK TO VOTEOffers an opportunity for user

interactivity. I collect the votes in a MySQLdatabase and, once there are enough, eachbook will have its rating revealed.

N E W B O O K S

Constantly updated information keepsthe listings (and the site) alive. The information isclear and essential: thumbnail cover, title and author.

©ADD YOUR TAGSThe tags describing and categorising the booksare displayed. Visitors are invited to add their owntags, providing a more balanced opinion. The way thetags are displayed is visually more interesting than atext description.

0F A V O U R I T E B O O K S

These are determined by the number of tags andthe level of popularity of specific tags. This serves as atechnical showcase, but also reveals which booksand terms are popular. The thumbnail cover

image and essential information adds a visualelement to keep the site interface engaging.

©INFORMATIONEach category has a necessarysubdivision that's used in place of asearch button: by author, bypublisher, by designer and by year.The basic information (title and

author) is displayed for each book.

I ' M A D E S I G N E R

Vat I like beautiful images and, even ona listings page, I'll find a space for them.The category image is different andrelevant to every category, and gives the

page a designed feel without divertingattention away from the actual content.

A b o u t t h e s i t eI like this month's topic. I'm a collector, and the brunt of many in-housejokes about my boxes of books, flyers, menus and mags. I'm preciousabout my books, which is fast approaching library proportions, but I'malso forever trying to work out who's borrowed what. 1 don't mindlending them, it's just that sometimes they don't come back. A place tokeep a list of who's borrowed what would solve this problem, and I'meven toying with the idea of a 'hall of shame'.

I'm actually going to build this site as a personal project: my personalbook list. By putting all of my books In an online directory, I canactually see what I've got. I can now blog or chat to other designersand friends about them. Taking inspiration from Del.icio.us tagging

would be perfect for this site. I can then add interactivity andmotivate visitors to keep coming back by inviting them to

input their own tags, too; even voting to get favourites,bringing life to what could be a boring A to Z.

I made a list of categories and tested that I can fit

every book on the shelf into one: Typography,Graphic Design, Branding, Art & Literature and

Comics. I moved the other books to my wife'sshelves (the London A-Z or Pasta Recipes has no

place on this site). Further drilling down wouldhelp me find a specific book through author,

publisher, designer and year.A listing can quickly become stagnant if it's not

updated regularly A new entry is a good starting point fordebate (even it's not a new book as such), and there's an

opportunity to gather opinion by voting.I was trying to work out how to design the listing without

being cluttered, not so simple that it's boring, and reflecting myown personality. I settled on a grid that allocates specific positions

for content/site functions: information, features, interaction, new,

navigation and imagery. One thing became clear; this wouldn'tbe a typical search-engine-style listings page. O

W H A T r V E B E E N W A T C H I N G :Ever the sucker for a freebie, I buy theSunday Tjmes for the free DVDs.Watched the Fritz Lang classic'Metropolis'. It's quite frightening ifyou see how people saw 'our time'when the film was produced in 1927.A l s o w a t c h e d K a t e W i n s l e t ' s ' H i d e o u s

Kinky' and was glad I didn't fork outt o s e e i t a t t h e c i n e m a .

W H A T r V E B E E N L I S T E N I N GT O T H I S M O N T H :A friend gave me an Italian languagecourse CD box-set. I'm making aneffort, but I find that I'm morei n t e r e s t e d i n I t a l i a n f o o d t h a nItalian language.


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!

A d v a n c e dWeb Hos t ing

from £l 8.95 / month*

Developers depend on our triedand trusted hosting architecture todeliver a consistent service to theirc 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 as ASP.Net, MS SQL™,MS SharePoint Serv ices™, MS

Exchange™ are changing the wayorganisations work.* Gotd Plus Plan indudes choice of Standard POP3 email or

MS Exchange™, MySQL and PHP5 (Unux^ or ASP, Net andMS SQL (Windows), Urchin Advanced Analytics, FREE |:^onesupport 24 hours a day, and SiteControi - our powerful admincontrol panel. 30-day money back guarantee.

D e d i c a t e d -H 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• Powerful solution without l imits• Flexible pricing

Managed Servers -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 .

/ T

E n t e r p r i s eH o s t i n g

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

call US FREE on 0808 180 1880 * sales(ghostway.co.uk ■ www.hostway.co.ukDNR • Email Hosting • Web Hosting • Ecommerce • Resellers • Dedicated Sen/ers • Enterprise Solutions

h o s t w / v y :T H E H O S T I N G C O M P A N Y

^ HOW TO SHOOT ITPro techniques explained in plainEnglish - it's easy when you know how

' ■ Y - " i U . *

^ POST-SHOOT EDITSImprove your shots with step-by-

step tutorials on horizons, colour and more

A great new monthly from the makers of...

h l f

^ STUNNING SUNSETS^ Get amazing results with our guideto bracl<eting, white balance and aperture

S AV E £ 1Photography Focus Guides - Issue 1 or 2b the customer: This coupon can be used in part payment against Photography Focusluides issue 1 or 2 (on sale 28/06/2005,25/07/2005) One coupon per item purchased,'lease do not attempt to redeem this against any other product or issue as refusal toccept may cause embarrassment. Voucher expires 03/08/2006 Offer subject tovailability

b the retailer; Please accept this £1.00 coupon as payment towards a copy of'holography Focus Guides issue 1 or 2 (on sale 28/05/2005,26/07/2005). One couponer item purchased. Marketforce (UK) reserves the right to refuse payment againsttcorrectly redeemed coupons. Claims to your Marketforce wholesaler must be made by8/09/2006 A 2p handling allowance is credited for each coupon redeemed.

Shoot greatlandscapes!Your complete guide to better photographs...

upermarkets and Multiple retail groups:lease submit coupons to; NCFI Department030, Corby, Northants, NNl 71NNy 09/11/2006 Coupon value OOOl p.

IFFERS VALID IN THE UK ONLY.oupon value 0.001 p.ICHNO; 110314442 9 9 4 571 1

The secrets of stunning depth and colourGet exposure right first time, every timeMaster the tricks of pin-sharp focusingCoasts, mountains, rural, urban & moreIncludes CD-ROM packed with software

Avai lable at

W T H S m i t h

2 >

Subscribe UK

UK SUBSCRIPTION OFFER

Save 35Only £12.49 everyS months whenyou subscribe by Direct DebitP r a c t i c a l ! ■ Owebdesign•FREE delivery to your door•Pay only £3.85 per issue if

you subscribe*•CD packed with great

software 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.

GET THE LATEST PRACTICAL WEBDESIGNDELIVERED TO YOUR DOORSTEP NOW!

C A L L 0 8 7 0 8 3 7 4 7 2 2QUOTING OFFER CODE P015OR VISIT www.myfavouritemagazines.co.uk/pwp/pOI SOFFER ENDS 31 AUGUST 2006


design trends/cutting

knowledge/creativeinspiration/webculture how toredesign a site/pro

v i e w s

fdesign develop discover

develop discover design M

n e t★ T h eredesign

i s s u e

Tlie UK's number one webmagazine iias undergonea radical t ransformat ion.After twelve years as theleading magazine for webenthusiasts, .net is movinginto a new era with a freshnew lool(, an impressivearray of contributors that

inc lude the web 's finestdesigners, developers,technologists and innovators,and rev i ta l ised content to

help you build great-lookingwebsites using contemporarystyles and technologies. Forthe first issue, we take an

in-depth look at how best tomanage website redesignsand showcase some of thehottest trends right now.There's also tons of practicaladvice on improving yoursite building skills with CSS,PHP, JavaScript and more.Brand new sec t ions w i l l

help you keep on top ofsearch engine optimisation,web careers plus advice onmarketing and strategy.Don' t miss the new lookissue - you'll find a specialsubscription offer inside.

>Hot Ikstyles for

your site

friday 30 june

P r a c t i c a l Tu t o r i a l s


Tu to r i a l sThe best web-building projects, delivered withcrystal clarity by the best web designers

Oon't panic! Practical Web Designmight have changed editors in mids t r e a m ( o a i a c e c o u d ? N o . i u s t D a nOon't panic! Practical Web Designmight have changed editors in midstream (palace coup? No, just Dan

seizing the opportunity to move to our'big sister' mag, .net), but we'vestill got our usual step-by-stepguides, written by experts intheir fields, to help you buildthe best websi tes ever!

Among the tutorials thismonth, we show you how toload images dynamically inFlash, style data tables, add apowerful PHP shopping cart, andkeep your CSS neat while simultaneouslycatering for the quirks of Internet Explorerusing conditional comments.

Look out for our 'On the CD' logo forsource files that can help you. Get stuck in!

I ^ I Alex Summersby, editor O

T h i s m o n t h50 Password-protect pages

w i t h D r e a m w e a v e rProtect sensitive web pages from prying eyes

Sort out yourpodcast withP o d S e r v eSet up and publicize apodcast feed withoutstretching bandwidth

60 Use conditional commentsw i t n e s sClean up your CSS by separating out the hacl<s

Load images dynamicallyw i t h F l a s hHow to load content into a Flash movie

72 Design attractive datatables in CSSstyle up and present tabular data using CSS

78 S^ll ^''om your site withZen Car tCreate a PHP-powered shopping cart

Your expertsr

Karl HodgeA veteran journalist andexpert in creativitysoftware, Karl Hodge hasbeen using Dreannweaversince version one. He alsoregularly contributes toComputer Arts and .net.

Craig GrannellCraig Grannell is a writerand web designer who'sbeen messing around withthe internet for a decade.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 i 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

Rob 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.

Paul BoagPaul is a founding partnerat web design agencyHeadscape. He hostshis own podcast and alsoh o s t s t h e P r a c t i c a l W e b

Design podcast, which isn o w a v a i l a b l e o n i T u n e s .

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.


TUTORIAL: D RE A M WEAVE: rPassword-protect pages

D e t a i l sS K I L L L E V E LAdvanced

Dreamweaver 8,

phpMyAdmin, PHP,MySQL and Apache

D r e a m w e a v e r 8 . 0 2UpdaterThis update is amust-have if you useDreamweaver to createserver-side code or insertFlash movies.w w w . a d o b e . c o m /support/dreamweaver/downloads updaters.h t m l

PHP Da tabase

Security UpdatesIf you use DreamweaverMX or MX 2004 to builddatabase-driven pages,the updater mentionedabove won't help Youneed to manually updateyour server behaviours.w w w . a d o b e . c o m /go/30037473

E m a i l L o s t P a s s w o r d sTutorial covering howto automatically emaillost passwords to yoursite's users.w w w . a d o b e . c o m /d e v n e t / d r e a m w e a v e r /a r t i c l e s / e m a i lpassword.html

Password-protect pagesDave McFarland shows you how to use a combination of Dreamweaver,PHP and MySQL to protect sensitive web pages from prying eyes

The files you need tocomplete this tutorialare available on the CDin the DreamweaverTutorial folder.

Ocme web pages just aren'tsuitable for public viewing. For

example, you don't wantstrangers stumbling across the

web pages you use to update your company'sproduct catalogue; and your long-term careerprospects will be better served if your onlinephotos of last year's Christmas party arehidden from your boss. Fortunately,Dreamweaver provides the tools for keepinguninvited eyeballs from viewing your mostsecret web pages.

To begin with, the first thing you need todo i s c rea te a da tabase o f t hose use rs who

are actually allowed access to your site. Theminimum information required is a usernameand password for each person. Usually, a simpleemail address will suffice as the username,a n d a r a n d o m s e r i e s o f n u m b e r s a n d l e t t e r s

is used as a password. The more complex the

password, the more difficult it is to crack, soopt for a series of numbers and a mix of

lowercase and capital letters, such as

'A59gkdi00' or '7u57uaOI'.Additionally, you should assign different

levels of access for your users. You may onlyhave a few pages that you want to protect atfirst - perhaps administrative pages used to

As your sitegrows, you may

want to l im i ta c c e s s t o a r e a s

update databases on your web server. But, asyour site grows in complexity, you may want tolimit access to other areas of the site, such as a'members only' section. In this case, you won'twant those people to view your databaseadministration pages, and you don't want the

general public to view the 'members only'i pages. The answer is to create an 'access level'

for each user; something like 'admin','member' and 'guest'. With these in place,Dreamweaver enables you to limit page accessto an authorised user who only has a particularaccess leve l .

After the database is set up, you need tocreate a form that allows users to log in, anda d d a D r e a m w e a v e r s e r v e r b e h a v i o r t h a t

, handles the password val«lat.iicm procedure. To

i password-protect a page, you apply anotherserver behavior (this should be done for each

page you wish to protect). You don't need to; add a password to every page on your site, but

the ones you do wish to keep secret have to bedynamic, server-side pages (filenames shouldend in .php, .asp, .cfm, .jsp or .aspx). For thistutorial, you'll be using PHP.

Finally, you should be familiar with buildingpages with Dreamweaver, and have access to aweb server that supports PHP and MySQL.


Tutorial Password-protect page?

XAMPP for MacOS X

W e l c o m e t o X A H P P f o r M a c O S X 0 . 5 !

C O C o » e c t i o n

BiorhythmC u « s t B o o kI n s u n t A r t

R a s h A r t

phptnfeOP h o n e B o o k

T o o l s

phpMyAdmmp^pSQLJteA<lmtn

w e b « t i 2 e f

L a n g u a g e sEr»gJish

0 « u t s t h

Now you can start using Apache and Co. Firstty you should try »Status« on the left navlgatkvt to make sureeverything works fine.

After testing you may take a look at the examples betow the test tink.

If you want to start pro^p^mming PHP or Perl (or whatever;) please take a took at the XAMPP manual first andget nwe Information about your XAMPP lr>staUatk>n.

G o o d h j c k ,K r i s t i a n H a r t r o f t . F t o r l a n P o l H n l & Te a m

pt^i4<jAamin

Welcome to phpMyAdmIn 2.6.4'pl3M y M L « n l o e a t h M t • • f i l O l a c a l h — t

p h p M i

' ) & « * * < » a ^ L«ngu«»»M y S Q L U T F 4 U n k « d « < u M )

« ( i > — ' B w ^ r i i i w i I *q ,SS Show PHP tntomaten

{ C h . 0 9 . L 0 g l I C « ] ^ 1

I N S TA L L T E S T I N G S E R V E R A N D L O A D F I L E STo begin, Install a testing server on your computer with a fully functioningwebserver, application server and database server (Apache, MySQL and PHP).

See 'Installing a Testing Server' on p53. Copy the 'password' folder from theDreamweaver folder into the testing server's document root folder.

0 CREATE A NEW DATABASEphpiVlyAdmin is a common way of managing MySQL databases. Most ISPs haveit, and many installations of Apache/PHP/WIySQL include it. If you used the

instructions in the 'Installing a Testing Server' box, launch a browser and type: http://localhost/phpmyadmin/. Name your database in the text field and click 'Create'.

y loealhMt ^ ^ ••crvioe

O a t a b a s * • • c r * ( O B h a « b « « r t c r « « t » d .

CTTABASE MCfMCS :

]Ed«]{Cniata PHP Cod*)

N o t a b i t s f o u o d i n ( l a t s b a w.

l a s P QO a t « t ) B s e :

t M C T M M M H h

M c n t o a

N o t a b l e s f o u t M l t n c t a t a t o s e .

tJ iww tibl« «n database tacraOB:N a n w ; j u M f * jN u i r t b e f o f B a W a : 1 4 ( C f f )

0 C R E A T E A N E W T A B L EThe information for controlling who has valid access to a password-protectedpage is kept in a table inside the database. Type 'users' in the Name field, type

'4' in the Number of fields box, and then click the 'Go' button to add a new table tot h e d a t a b a s e .

B t W T y p * ® L a n 9 « i Wa t t M * * ( M t o t l o n 1 O m h u M T IE ® S3 ~ [35v t m t t D 1 W T _■ 1 i L ,Pr ; no.™- ' M o . i n c n m M t M e 0 0 O □

V A K H A K J » l " I L . #1^ notnutJ i i■ » o o o » o

:pmMioid .1 VAMCHW J B i » 1 ( _- - S I ' < n o o o 9 □

|aocaM 11 VMCHM J B 1 5 I C W t { j i C h * 1 : 0 o o © □T a b t o o c m R w n t t : T » W. t y » « ;

' MylSMil m

(J) A D D F I E L D S T O T H E TA B L EType the name of each field in the Field column: 'userlD', 'username','password' and 'access'. In the Type column, set the 'userlD' value to INT, and

type '32' in the Length/Values boxes for the last three fields. For the 'userlD' field,ensure autojncrement is set in the Extra menu, and also the primary key radio button.

| | |

f M

•

T * » # 1 ^ v.tu. ^U M M) t i T D ! 1

„ t

m m

A D D A U S E R T O T H E TA B L Eli/O Click the Insert link for the newly created table.

Add values for a new record in the database;leave the 'userlD' field's Value box empty (the databasefills this in automatically), type 'bigCheese' for theusername, 'openSesame' for the password, and 'admin'for the access field. Click the 'Go' button.

^toeaWiMtA " " 1 1

f t f t p r i i n l t t ^ Add a n«wUMrt o s q g

DaubBse : U M r n a n . :

H - - :

M c r M MP M w m d . t M t r i

eJ B I u M n . . . . . . . . . . . .

t = i

1

O l e t o l p i 1 v a * f M

C h M k A l U n d t M h M

O t m t k ^ k r m M n M a t a t f o n

^ m m 0 C M B H 0 w d w

( i f u n x r Q A i a n i Qi a > Q f M H Q W W X p I M C m

• n r e □ n m Q u l o r j

0 n u □ c u m n w o w » T n n n Q s o p n o wQ mi9 tMRMSU

i M t o Q u t t t m u n

M t K d o D i i u i m a m > 4 0»«»KHCI»m z » i M u n i t M O k ^ 0 □ m a m

i l u ~ ~Quick tipKEEP YOUR TESTINGS E R V E R I N S Y N C H

If you already have aMySQL database at aweb hosting company,use the same database,t a b l e a n d d a t a b a s e

usernames for theversion of MySQLrunning on your localtesting server.

C R E A T E A N E W D A T A B A S E U S E RlliO Click the Localhost link at the top of the page; click the 'privileges' link, then

select 'Add a new User'. Type a name in the User name field, 'localhost' in theHost field, and the same password in the Password and Re-type fields. Check the Select,Insert, Update and Delete boxes and press the 'Go' button at the bottom of the page.

p ' - . -f Practical Web Design 51

Tutorial Password-protect pages

( 3 s q q

M c n i t D *

S t>M>(1 UMrt

Welcome to phpMyAdmin 2.6.4-pl3M y S Q L S . r « S « m W n g o n t o c a t f i M l r o o t O t o M l t t M t

% S Q 1 . r a l o a d M l

S t M W M y S O L r u n h r m a i f o n n i t i D n

SbOwMySOLayatoniwwMila* 0

ShowpmoaMS ®

C h M C t w S a t e a n d C o l i t i D f t *

S k m g * E n fl i M S

R»loxt Ms QL ®P w i t g * .

O a « « b M « »

A l p o r t

^ Tlwiw / Style; _aygy|Q pIvWyAAnindwuiSQ 8^owPWMcMl lwb

f5J Offid*) phpMyAdmn Hon{ C » > « n f l * L o f l ] f C V S l

R E L O A D T H E D A T A B A S E P R I V I L E G E SClick the Localhost link at the top of the screen to return to the mainphplVlyAdmin page. In order for the new database user to have access to the

database, you need to reload the database privileges. Clicking the Reload MySQL linkgets the job done.

D E F I N E A N E W S I T EIn Dreamweaver, choose Site > New Site. Make sure the Advanced tab isselected. Type 'Password' in the Site name field, then click the folder icon to

the right of the Local root folder field and select the 'password' folder you copied intoyour testing server's root folder.

0 DEFINE THE TESTING SERVERSelect the 'Testing Server' category of the Site Definition window. SelectPHP MySQL from the Server Model menu, Local/Network from the Access

menu, then click the folder icon to the right of the Testing server folder field and selectthe same folder from step 01. In the URL Prefix box, type: http;//localhost/password/.C l i ck OK to c l ose the w indow and c rea te t he s i t e .

0 START DATABASE CONNECTIONOpen the file 'login.php' from the Files panel. Choose Window > Databasesto open the Databases panel in the Application panel group - Dreamweaver's

control centre for adding dynamic, database-driven features to your web pages. Clickthe 'plus' icon at the top-left of the Databases panel and select MySQL Connection.This opens the MySQL Connection window.

^ Quick tipA L W A Y S U S EA C C E S S L E V E L S

Make sure you have atl e a s t t w o l e v e l s o f

access, 'admin' and'member', so that youcan limit access to yourultra-secret pages to ane v e n s m a l l e r l i s t o f u s e r s .

MySQL Connection

C o n n c c t t o n t v

MySQL Mfwr: ktamasi

U s e r n j

P a s s w o r d :

IW; <MwSKi«toi~

1 3 3 "

D a u b A s t : s c c m O t

D A T A B A S E C O N N E C T I O NType a name in the Connection name box: useany name you like, but don't add spaces or non-

alphanumeric characters. Type 'localhost' in the MySQLserver field. Type the name and password you entered instep 06, then type the database's name in the last box.C l i c k t h e O K b u t t o n .

P r e f e r e n c e s

CategoryC e n e r a J

Code ColoringC o d e F o r m a tC o d e H i n t sCode RewritingCopy/PasteCSS StylesFile CompareFile Types / EditorsF o n t sH igh l igh t ingI n v i s i b l e E l e m e n t sLayersLayout ModeN e w D o c u m e n tP r e v i e w i n B r o w s e rS r t eS t a t u s B a rV a l i d a t o r

Accessibi l i ty

Show attributes when inserting:

^ Form objeas^ Frames^McdU0 Images

0SET UP FORM PREFERENCESChoose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac) toopen the Preferences window. Click the Accessiblity category and make sure

the Form objects tickbox is checked. This will make it easy to add labels to the formfields you'll be adding in the next section of this tutorial.


Tutorial Password-protect pages— — — 0

k b g : e 9 e : a B i 8 S o i B Q

B U I L D ALOGIN FORM

Login Required

N O ! « « ^ 4 i B

i t

I N S E R T F O R MOn the 'login.php' page, click beneath the 'Login Required' headline. Insert aform by either selecting the Form category from the Insert Bar and clicking the

Insert Form button, or by choosing Insert > Form > Form. Use the Property Inspectorto name the form 'login'.

i r a . . ! 5 r - 1 M: * 1 <5 B. la.

^ Login RequiredVNct'tAiX

I ; « o * * f t a

0 ADD THE PASSWORD FIELDNow you need to place an empty paragraph below the field. Either click the<label> tag in the tag selector at the bottom status bar of the document

window, or choose Edit > Select Parent tag. Press the right arrow key and hit return tocreate a new paragraph. Repeat step 06: use the label 'Password' and name the field'password.' Click the Password radio button in the Property Inspector.

Login Requiredm

. % O ^ ♦ a ' 4 i B■r y »u • PtHMi4 iltKMtasti HD'

» 1 ^ '

A D D A S U B M I T B U T T O NDo the same as in the last step to add an empty paragraph below the passwordform field. Insert a 'Submit' button by choosing Insert > Form > Button. Select

the 'No label tag' radio button in the 'Input Tag Accessibility Attributes' window andclick OK. Use the Property Inspector to change the Value of the button to 'Login'.

B S l a i s J a l a ' * ■ 3# »t »1 0 a a.

A D D A U S E R N A M E F I E L DAdd a text field to the form by clicking the Text Field button, or chooseInsert > Form > Text Field. Type 'Username' in the Label field, and check the

'Wrap with label tag' and 'Before form item' buttons. Click OK. Click your text field and,in Property Inspector, type 'username' in the TextField box.

O Installing a Testing ServerThe simple way to install a powerful webserver on your desktop

A testing server lets you run afull-blown webserver, applicationserver and database server righton your desktop. This is a greatway to develop dynamic,database-driven web applications.Because you can build and testthese complex pages right on yourown computer, you won't sufferthe delay associated with sendingfiles halfway around the worldto your web hosting company'sserver for testing.

Even though the Apachewebserver, PHP programminglanguage and MySQL databaseserver are industrial-strengthtechnologies capable of runningthe most demanding webapplications, they're not verydifficult to set up on a regular

Windows or Mac desktopcomputer. Your best solution is anall-in-one package to install therequired software. XAMPP is across-platform solution (Windows,Mac and Linux) that's quitepopular and works well. Downloadthe ins ta l l e r f rom the XAMPP s i te ,and doub le -c l i ck t o i ns ta l l t hes e r v e r c o m p o n e n t s o n y o u r

computer. The installer places allof the required files in one locationon your system (C:\XAMPP onWindows, or Applications:xamppon Mac), so your system isn'tc l u t t e r e d w i t h t h o u s a n d s o f fi l e sscattered wildly about. The bestnews of al l is that XAMPP is

absolutely free. Visit www.a p a c h e f r i e n d s . o r g / e n / x a m p p .h t m l f o r m o r e i n f o r m a t i o n .

Support XAMPP, Make A DonattonI

If you enjoy using XAMPP and would like to help in carrying some of thefinancial burden of the project, we would greatly appreciate your voluntarysupport payment. Please note that this is nc^ considered a tax-deductibled o n a t i o n .

D O N W T C

□ XAMPPMany people know from their own experience that It's not easy toinstall an Apache web server and it gets harder If you want to addMySQL, PHP and Perl.

XAMPP is an easy to install Apache <fetribution containing MySQL, ^

XAMPP offers an all-in-one, simple to implement cross-platform solution


Tutorial Password-protect pages

©ADD THE LOGIN BEHAVIORIn the Application panel group, click the Server Behaviors tab. Click the 'plus'icon and select User Authentication>Log In User. The first three options should

already be set; choose the name of the connection you created for the 'Validate usingconnection' menu. The other options should match the above image.

RESTRICT ACCESS TO A PAGEOpen the file 'secret.php' - this is the page you'll add a password to. Bear inmind that Dreamweaver can only password-protect dynamic pages (those that

end in .php, .asp, .jsp and so on), not regular web page files ending in .html. From theServer Behaviors panel, choose User Authentication>Restrict Access To Page.

Restrict Access To Page

R«stria based on; Q Usemame and password

@ Username, password, and access tevelS e l e c t l e v e l ( s ) : i ( D e fi n e . . . ^

: o K '

( Cancel )

( H e l p )

If access denied, go to: J ( Browse -. ^

D E F I N E A N A C C E S S L E V E L114 in Restrict Access To Page, check the second radio button and click 'Define'.

The Define Access Levels window appears. Type 'admin' in the name box andclick OK. This defines who can access the page: the value 'admin' must match the valuein the database table's 'access' field. Click the browse button and locate 'login.php'.

(JBi TO P S E E C R E T: F O R Y O U R E Y E S O N LY

Lonm ipsum dolor «ft amet, consecletuer adlpisdng elK. sect diai«ncKhint ut laoreet dolore magna alkûam erat volutpaL Ut wtsi«n o r t r u d e w L o » O u t u i . rD u i s a u l a m t

n ad minim veniam, quit

b l a n d t t

L o f a m .t i n o d u o t u tn o a ^ e x aD u i st l l u m d o k K abtandii prai ~

Lôutwlwn 9 UnkcM m s m :

U)wn ipaum dotor srt amet consactetuer adlpisctng alit »ed diam nonunvny nibh aulsmodtuKidunt ut taorset dokm magna aliquam ara( volulpat. Ut wiai anim ad mtnim vaniam, quisnoatrud axerci tation ullamcofper susdptt fobortis nisi ut aliqulp ax aa commodo consaquatH i i K M i M t m w A l M i m I m i m W n i n r i n h A W f m r i t I n v u l n i i t n * ) u a I< * ' > « « u . « u »

- ( t - J T G Ir m n m i ]

T>

0 ADD A LOGOUT LINKOn the web page, click after the word 'Only' in the headline. From the ServerBehaviors panel, click the 'plus' icon and select User Authentication>Log Out

User. In the Log Out User window, ensure the first radio button is selected; click 'Browse'and locate and select the file 'login.php'. Click the OK button to apply the behavior

f r -M o r e i n f oNEED MORE HELP?Setting up your systemfor working with server-side web pages isn't awalk in the park. If youfind you need more helpsetting up a testingserver, and gettingD r e a m w e a v e r t o t a l k t o

it, get a free PDF tutorialdiscussing the process at;w w w . s a w m a c . c o m /

p w d / p h p

P R E V I E W A N D L O G I NSave the page. Press the F12 key (Windows)or Ctrl+F12 (Mac) to preview the page. You

won't see the 'top secret' page - instead, you'll be takento the login screen. Type 'bigCheese' in the Usernamefield, and 'openSesame' in the Password field. Click the'Login' button.

4i- o #hnp://127.0.0.1/passwDrd/TMP2s72zabkv.phplAlCooldM* M^C5S^ QForms- Omforrrwtkin* l^MtcdUneoui•

" © ' K f -

( J P T O H S E C R E T ; F O R Y O U R E Y E S O N L Y

L o r e m I p s u m D o l o r S a t

Lorem ipsum dotor sit amet consectetuer adipiscing eiit sed diam nonummy nibh euismod tirKiduntut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit iobortis nisi ut aiiquip ex ea commodo consequat. Duls autem vel eumiriure dolor in hendrerit in vutputate velit esse molesde consequat vet ilium dolore eu feugiat nulia^dlisis at vero eros et accumsan et iusto odio dignissim qui btandit praesent luptatum zzril delenit a

Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam tônummy nibh euismod bnciduntut taoreet dotore magna aliquam erat votutpat. Ut wisi enim ad minim veniam, quis nostmd exercitation ullamcorper suscipit Iobortis nisi ut aiiquip ex ea commodo consequat Duis autem vel euminure dotor in hendrerit in vutputate velit esse molestie consequat vet ilium dolore eu feugiat nutiafacilisis at vero eros et accumsan et iusto odio dignissim qui btandit praesent luptatum zzril deienit a

Lorem ipsum dolor sit aut laoreet dotore ma

ing elit sed diam nonummy nibh euismod tinciduntIt votutpat Ut wisi enim ad minim veniam, quis nostmd exerci

tation ullamcorper suscipit Iobortis nist ut aiiquip ex ea commodo consequat Duis autem vet eumiriure dolor in hendrerit in vutputate velit esse molestie consequat vet ilium dolore eu feugiat nullafecilisis at vero eros et accunrtsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a

0 LOGOUTOnce logged in, you'll see the 'top secret' page. In fact, you could, at thispoint, access any other password-protected page on the site. To make sure no

one else gains unauthorised access to password-protected pages after you leave, clickthe 'Log Out' button. This returns you to the login screen. O


Iynda.comOnline Training LibraryGreat fo r 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 monthUnlimited access to over 14,000tutorials on hundreds of subjects.

No long term commitmentSubscriptions start at just $25 a month.

• W - V • \k H : ^ ■ '

Try it for FREE today!www.lynda.com/freepass/PracticalWebDesign/0706

T U T O R I A L : PODCAST"N GSort out your podcast with PodServe

BPodServef t 6 i a I N J r t F fl H T O O l

m y p o d c M t s p o d s e r v e d i r e c t o r y a b o u t f a q b l o g l o g o u tD e t a i l s

Beginner

iTunes, and any modernbrowser capable ofsupporting Ajax

m s s n ^ s m i ^WikipediaJust about everything youcould ever want to knowabout podcasting, fromhistory to standards spec.http:/ /en.wikipedia.org/wiki/Podcast

podCast 411Tutorials, resources andlinl<s to alternative sites,plus interviews with otherbroadcasters about

podcasting.www.podcast411 .com

AppleThe home of iTunes andthe iTunes Music Store.Sells GarageBand as well,which includes a 'podcastrecording studio'.www.apple.com

crea te new podcas t * soc ia l podcas ts * pub l i c podcas ts

Practical Web Design is the UK's l>est magazine for web building tutorialsand advKe (covering the likes of HTML, CSS, PHP, MySQL, Dreamweaver,Flash, fireworks, an Photoshop).

edit I invite contrttxitors j edit podcast mles | delete | Invite listeners | add a new show |re<fuest a podcall

Practical Web Design tells all (1 subscribers)by Practical Web Design ( 1 show) QHow to use PodS«rve to create a podcast artd share It with others

Typa: Sodal Podcast (l contrtbotore)Category: Entertainment Tagged as: podcast webiogSocial: add to delJdo.us | digg it | add to ma.grtolla ( report podcast

ALPHA VERSION!

You are part ic ipat ingi n l ^ e a l p h a t e s t i n gof PodServe. Help usby submi t t ing bugsa n d w i n a t * « h i r t l

a

S h o w t i t i * D e s c r i p t i o n

Q Getting to grip withpodc fs 8

Learn how to use Pod5«rve to add podcasts toyour site.

Show added on 06/08/2006by Rob Buckley. Total t imeof th is podcast: 00:18:51

I ASTFS l KhV IKW

BIG IN JAPAN TOOLS

i P o d S e r v e

F r a n k e n F e e d

E l f U R L

I n s t a n t F e e d

S o c i a l M a i l

F e e d V a u t t

M a i l F e e d

Q w i k P i n g

F o n e F e e d

S t a t s T o o l

Q i

Sort out your podcastw i t h P o d S e r v eRob Buckley demonstrates how to set up and publicize a podcast feedwithout stretching your bandwidth limitations

• PodServe providesa simple way tomanage a feedand publicize It

©ewspapers do It, TV shows do It,even educated ninja do It (and Itisn't falling In love). Podcastingh a s b e c o m e a m a s s i v e s u c c e s s

because It's such a simple Idea, ifs like Sky+for Internet radio: you look through the

programme guide for an Interesting show,and if you find something, you simply clickon the big Subscribe button. Each time a new

programme becomes available, your humblepodcasting application downloads it readyfor you to listen to it whenever you want;and, if you have an MP3 player, whereveryou happen to be.

So, if you have something to say orsomething to play (if you're musical) and youexpect there will be more to come, a podcast isan ideal method of providing more for yourusers, and will give your site extra oomph.

The mechanics behind podcasting are morecomplicated than they may first appear, but inthis brief tutorial, we're going to make it as

simple as we can by using an online servicec a l l e d P o d S e r v e ,

For any podcast, you need what's known asa 'feed'. This is an XML file that obeys amodified version of the RSS standard, and goeso n t o l i s t a l l t h e s h o w s a v a i l a b l e t o d o w n l o a d .

A podcast application needs this feed so that it

titi I

If you havesomething tosay or play, a

podcast IS ideal 55can find out where to download files from,what their titles are, and so on. Putting one ofthese together isn't such as easy task unless

you have an application to do all the hardwork for you. You also have to find somewhereto store your podcast files. Most podcasts usethe MP3 file format, which, at a few

megabytes each, won't take long to fill yourserver quotient. Figure in the bandwidth

necessary for all your subscribers to downloadt h o s e fi l e s a n d i t s o o n b e c o m e s c l e a r t h a t

i podcasting can be quite an expensive pastime.Then there's formatting the feed to make

it look good in a podcasting application,formatting the podcasts themselves,and publicising the feed to attract moresubscribers (and visitors) to your website.There's no escaping the fact that this takesa lot of effort and technical expertise.

The great news is that PodServe takes careof almost all of these issues. All you have to dois tell it about your podcast, upload all of your

i 'broadcasts' and it generates the feed for you.You'll find yourself listed in directories, andPodServe will also help you publicise the

podcast, clean up your podcasts and allowothers to collaborate with you by uploadingtheir own podcasts to your feed. It's free, andall you need in order to be able to use it is ah u m b l e w e b b r o w s e r .

You can listen to our very own PracticalWeb Design podcast by visiting www.pwdmag.co.uk, and you can find us on iTunes, too.


IS uSisaa qaM |e3!J3eid

s^seDpod ppe jo aiaiap 'Aj.!poLU oj ,mol|S Mau e ppe, pue,0j0|0p, ',i!p0, SB L|Dns suo!;do 0sn os|b ubd noA •06ed Sjn; oi >|3eq auj03 noA j0A0U0L|m

p01.epdn 0q ||!m s|!B}0p snouBA :06Bd lunoMB jnoA uo jeadde aôu p|noL|sp00^ jnoA •0Aj0spO(j oj b;bp am i]ujqns 's6bi jnoA pajaûa aA.noA ajuQ

3 I A I I i 9 N i a 3 3 d

•paiMBis ia5o ; n ^ D p o d > I > ! P 1 1 ^ 3

auoi|d jno/^ pjo:)aj jj|M %]pue noA ){e:> aAjaspo<J

u e D n o A ' u m o j n o A

luaiudmbd 6u|pjOD3JAue DAey l,uop noA

3 f n e A ( > » » d

l t e w { » p o s

p M j j u B j s u r

S K X U N V d V r K l 9 ( 8

M t A B W t M u u a g s p t w w i p o d • a w ,8 { s m o M s 0 ) u 6 i s » a q » M A q

(u»qM>sanK 0} l ie sim u^s»q q»M icattau,

K , • U | M { H I *

E L

» d fCH •»*4»s{»d io

cqdi* »m U)6ufl»<t!3{>Jtd »Jt n«A

i N O t S M A W « n VHe uns »q wm p t9 ) a û . - j snpod s im ) ) fwqe q j o i q c pp« o i a j »u ) p i o

* j s w p o d 3 t i q n < t . q » w p « f | « i » s > } s * > p « l m

Luaijj :isa66ns-ojnB ||!AA aAjaspoj ';sjxa ApBaj|B Aaqi j.! -SBLULUOD Aq paiBJedas 'a>|!| noA SB Aublu sb ja;ua uej noA■s6bi 3!^pads asoqi joj. saqDjBas u] jeaddB o; paa^ jnoAMO||B asaqi isBDpod jnoA jo^ s6bi aiuos jajua pinoqs

noA 'AjBuiujns E euuaûa Aq puB '(Ajopaj]p s.aAjaspoju] euueaddB iSBDpod aî juaAajd ||!AA uogdo

isa; aqi) suojido jaqjo Aue 6u!>|3aqD Jayv

D V i D N I A V I d

N O d y W M O i N I I S T H M d

t H o < $ ) a A < n w w

■suojpnjjsu! jaqunj. BujuiBjuoj nBLua UB aAjaDaj ||,noA mq 'qDnuu op i.uoaa .saunn,6u{){3|q suojido ,U! isp, aqi 6u|sn Aq u| pa;s|| )a6 ||,noA sauopajip qîqAA aujiujaâp

UBD noA Ajopajja D!Sn|/\| saunn aqj uj puB ai]s aAjaspoj aqj uo AB|ds!pIIIAA }eqAA Sj Sjqi .'paaj. jnoA joj. uooj ub >|3!d noA sia| uounq yy JBao^ aqi

S i D V d 3 H i i s n r (J)sauo 6u!;sajaiu! aqi oi ;a6 oi s;sBDpod ûeAaiajjj q6nojq} apBAA oi SABq l,uop

sauopajjp 6u!SM0jq a|doad jBqi os Ajo63;b3 b >|D!d oj paau ||,noA nuauj Ajo6aie3uAAop-||nd aqj eujsn Aq oj 6u]pB0|dn aq ||,noA Ajo6a;BD ;bl|aa aAjaspod

||ai uaqi 'paa^ jnoA joj. aiuBu b ja»ua 'uaajjs uojiBuijoûi ;sB3pod aqj uq3 1 0 H N 0 3 9 l d V O I N I I I O N I l l I d 0

j o o X W S

P M u l M O d

6UW>|IM{>

p M j I t a w

V i # A P » ^

i t i n i i a

p M j u a ) | u c i j

• A J * $ P 0 4 ^

. STOOJ. NV^ Nl 0I«

MR i» m }ou aMjtcsi« ${ isnpod sim O<i)cr>p«d ;<r>PV □ :suOHdo

( W W | 6 o i p n p u i ) a j 9 t j M A u v i . u o o ~

09P0» o n i i 0 , u !

u6is»a gsM ir>tl*Jd;

• M r « p u *

sO<iq 6uf»|u<C|nf Aq»fl (t)«H •WSSPOd JO

S u i t w n K » W f l w6 i J ! } « t | 3 R i « » u c n o A

{NCHsnA yH<m.

(It «|}»J u6»$ao q»M lesiPe-M

NOiXVWUOJNI ISVDQOd

s t j q n d . s ) » e ? p o < l | « i » o « . ) « « 3 P « d m m

f fi H

( O e ^ q O S

p j W d M O d

p e a j | < * W

p a a j i u n s u i

l Y i f v a

r x x u N V 4 v r n « o i a

« » t M p u t

V tuWHluiNsAs 6u(ieMda -

M M V O S .

»J*K»5 UMlQ -i m p o j .

» i n i t N Y M u a t > s

CII N 0 I S * 3 A V H d T V

lit snai u6(S»o q»M l»3iWid

N 0 l J . r W « ) i N 1 I S Y D O O d

sts f f spod S tnnd . s ( *opod i« i70 f . t t npod m»u a )«» j3

auoAjaAa o) uado s| :^SE:}pod Djjqnd e ajiqAA ':^SB3pod|B|Dos B oi ppB UBD paiiAui aA.noA a|doad A|uo 'j.usaop jse^pod jbujjou, b anqAA

'paa^ jnoA oj siSBDpod pBO|dn sjaq;o s}a| jsBDpod piiqnd, b jo ,|Bpos, b :adAiB >|D!d oi paau noA paa^ ;sB3pod ;sj!j. jnoA aiBajj ubd noA 'uo]iEJiS!6aj jayv

B d A l l S V D a O d V ) I D I d

Ajopajjp aAjaspod aq). u{ a^jsqaAn jnoA aiooiojd o) pasn aq ue:> '>{U!| a)|sqaA/\ jnoApuB 'sBbiu! poo6 V ino ya| aq ub3 sijBiap |Buosjad inq 'ssajppB nBLua ub apjAOjd

o; aABq noA snBiap jnoA jajua puB dnuBjs/jasn/uioi nBBiq'SAjaspod//:duq o} og aAjaspod uo paa^ iSEDpod b aiBajD oj lunoDDB ue paau ||,noA

3 N n 9 N l l S V 3 a O d 3 H 1 N 0 N 9 I S

n o o i N v ^ v r w M i

« « » « ( k o w u a q m« n < «

E iS » C T 3 p O d r » P O S

) — —

SAJsspOcj L|1!M iseDpod jnoA mo jjos leMO nx

Tutorial Sort out your podcast with PodServe

I intrp««CMt* I« podos t ' MO* ! podcMt j • pubHc po4cH ts

Invite contributors to join your Social Podcast.S«ci«l PodCMB tvptcaily con»M sf two or more cantributort «ho witi InMrt showsWO »DW (KK»tas t i . Ywj c»n Q)« t r shows or a l low lh»m to pos t wrBwut

oo

o

S a l c c t a s o c i a lp o d c a c t :

|dan.olive'r@ tur

C o m e a n d c o n t r i b u t e t o t h e n e wP r a a i c d l W e b D e s i g n p o d c a s t

A L P H A V S t S K W I

T o g » r t p a r t M p a t l r t q

l n t h « « l p h » t M t i n «of F'QtfScrve, H«tp ^by submitbog bugs

■ I C I N J A PA M r o O l ^

E i r U A L

S 0 ( l * I M l t i l

F « « d V « u f t

K « i « r c c t f

<lwlkP»09

D ' Y A W A N N A B E I N M Y G A N G ?WM If you have a social podcast, you can use 'Invite contributors' to ask others to

join you in uploading podcasts to your feed. They may refuse, but there's noharm in asking. If you've decided to change your podcast to a social podcast, you canuse the 'edit' option on your account page to alter the settings accordingly.

0 ON WITH THE SHOWFrom the account page, click 'add a new show'. In the dialog box thatappears, you can select the MP3 file you want to upload, give it a title and

description, and tag it appropriately so that it will appear separately in directory andcategory searches. Click Submit when you've finished.

m — '^ Quick tipP O D C A S TR U L E S R U L E !If you're creating asocial or public podcastthat other people cancontr ibute to. don' t

forget to letc o n t r i b u t o r s k n o w w h a t

they can and can't dousing 'Podcast Rules'.

A t M A V B t S K M t

LASTEST REView

O p « n ) m « 9 ( * n N c w W » f M l M 'O p « n < m « 9 « i n N « w Ta bSm image to *tM«mlaads'Add lm«9t to IPhoco UbrvyCopy Mrw9e AMt««sC o p v l m a 9 r

C«py Link HTML Tag

T H E M I S S I N G L I N KHHI Adding this podcast feed to your website is

straightforward. The standard orange RS5symbol has a link to the feed, which you can copy andlink to by using any text or visual element on your pages.You should also provide an easy way for someone tocopy the URL from your web pages, so that they canpaste it into their podcasting application.

m p o < l c « t • M C ( « t p o c t c a r a < p u b l i c i M d u t t s

CHdc hen to add a blurb about tnis podcast. The text wUI be seen by alu s e r s .

ALPHA VCKSIONf

V»u a re parbapa t togin the alphaof PodSarve. Maip uiby tubmlttlr>g bugsa n d n r t n a t - a h l r t t

Practical Web Deaign telii aR (o subscrilMrt)bV Practical Wab Dasign ( o abows) g}Hm to UM PMServe to ottbe a podcast and share n tvftti oQiars

BIG IN JAPAN TOOLS

t i t e f w v : e n t a r t a m m e r t Ta t a « d a ta t digs It I add to ma.gnotla t t«port pi

F r a n k a n F a a d

E i n m i .

I n s t a n t f e a d

S o c t a l M a l l

Fee t fVau l t

H a i > F « * d

Q w l k P I n g

0 SELLING YOURSELFBefore you begin publicizing your podcast, you need to provide adescription of it. At the top of the screen, move your cursor to the text

that's inviting you to click it, replace the default text with a description of yourpodcast, then click OK. This text will appear in PodServe and the ITunes Music Store.

Praoical Web Design i» the UlCs best magazine Iter web buiWmg tutorialsartd MMoe (coMring the Rkes of HTML, CSS, PHP, MySQU Dreamweaver,Flath, nreivonu, an Photoshop).

A L P H A V E R S I O N !

BIG (H JAPAN TOOLS

Practical Wab Daslftn taUs aR (l subscrlbera)by Practical Wab Design (1 show) T

I Gvtting to gnp DfKhodcarts t

L A S T E S T R E V I E W

» u t e P g d S t r v * t o a d d p s e c M C t uH a t t F M d

Qw1k?w<9

F « n * f c a d

aK POD PEOPLEy Provided there's nothing wrong with it, the podcast will now appear in the^ main feed list. You can delete or play it by clicking on the appropriate icons. Itwon't have any reviews yet, but once people have started listening to it, you'll be ableto scroll down and read any comments other PodServe users might have made.

M A K I N G I T W O R K W E L L W I T H I T U N E SThings can be made easier if you think most of your users will have iTunes.Even though they could paste the URL into ITunes' 'Subscribe to podcast'

dialog, if you change the URL's protocol from 'http: //' to 'pcast://', clicking on the linkedelement will open iTunes and subscribe them without them having to do anything.


Tutorial Sort out your podcast with PodServe

G O T O T H E[ill PODCAST DIRECTORY

There's only one way to add a podcast to theiTunes Music Store and that's by manually using ITunes,Click on Music Store in the source list, then look downthe left-hand side of the main page until you seePodcasts, Click on that. On the next page, in more orless the same place, you'll find Submit a Podcast.

I D E N T I F Y Y O U R S E L FThis is why PodServe can't automatically submit your feed to the iTunesMusic Store. To prevent spamming, Apple requires you to enter an Apple

ID to submit a podcast. You can get one of these for free if you haven't already gotone (it's the same one you use to buy things from the Apple Store or from the iTunesMusic Store).

IpagglnBassEHsail

i WirTepltMed

Rtun t l yMav tdi|Te»2$Met(l1(v*4

(2) Review Podcast

N a m t W t b O c « ^ t « H i 1 1 1

AMhof' KoMMfctey

SKirtOtKrtpnon How tc UM fttdSifvc re cfM* a |

Ung Detcrtption H«w to us* fodS«fvt to crcjic < 1

! t « h » c i * l e n M i

M a n d t h t r t w t t h o t h t n

M t n d i h i r t K w t t h a t h m

" i n

Eng«ih

t t c k a i i

O Enhancing podcastsSound good and look good - it's all in the details

All MP3 files have metadata tags. These provide information about theMP3 file, including the artist, album, lyrics and composer, but they alsohave an album artwork field. Most podcast players will use thesemetadata tags, so unless you fill them in somehow, your podcast willlook poor when it's actually played.

The easiest way to change these fields and add artwork is by utilisingiTunes, which is available as a free download for PCs (Windows) andMacs. Before uploading your podcast, simply import it into iTunes, selectGet Info from the File menu, then fill in all the fields. Don't forget toadd some artwork; you'll need something that's square, and preferablyat least 150x150 pixels.

Alas, if you want to enhance your podcasts even further withchapters and hyperlinks, you'll need to use the AAC format that Appleuses, but PodServe doesn't support this yet.

iTunes is free and very useful anyway, so it's a good all-round choiceas an MP3 tag editor and media manager.

S t o r e

i t t c

l U t e d

rtr Added

M0ltP1*y«d

REVIEW THE DETAILSApple will now grab your podcast's details and verify that everything's all right.You need to choose a category and subcategory for your feed, so that it can be

filed in the podcast directory. Once you click Submit, you have to wait while Applereviews your podcast, but if it's approved, it will appear in the directory fairly quickly O

C«nn9 to gfip wUh podc«»ts

Summj i rv in to - Opt ion* l y r tcs Ar twork

t o ' s H p "A f t l t t ~ "Prac t i ca l Web Des ign

A t e t i f fi

Pract ical W«b Design let ls a l f

V M T

2 0 0 6

T r a c k N v

How to use PodServe to create a podcast and share f t wi th others. In this

podcast. we look at the categories PodServe uses.

Ccnr* _P o d c a s t ' 8 C f a t o f .

( C » > a l ^ w a i

• Metadata tags will ensure that your podcast looks good and is informative


TUTORIAL: CSSUse conditional connments with CSS

D e t a i l sSKILL LEVEL

In te rmed ia te

A text editor or yourHTML editor's codeview; Photoshop

W3Schoo ls CSSA thorough CSS sectionthat helps you learn howvarious CSS propertyvalues affect your designs.w w w . w 3 s c h o o l s . c o m /C S S

A List ApartA regular web magazinethat explores CSS layoutand other web-or ienteddesign tasks.www.al istapart.com

W3C CSS Va l i da t i onS e r v i c eCheck that your CSS isvalid and tagged correctlyhttp: / /val idator.w3.org

In the CSSl folder, you'llfind all of the files createdfor this feature, includingin-progress examples.

fite;Wtocalhost/Y;/Desktop/PWD31%2... -Fie Eitt View Boo)lITl^rks Tools Help

9ypen Surf the full Web with your mobile phonei4ini I Get Opera Mini from http:/ mini.opera.com

Q New page

H E A D I N GLorem ipsum dolor sit amet,consectetuer adipisdng elit. MorbicDmmodo^ ipsum sed pharetragravida^ ord magna rhoncusneque^ id pulvinar odio lorem nonturpis. Nuilam sit amet enim.Suspendisse id velit vitae ligulavolutpat condimentum. Altquamerat volutpat. Sed quis velit. Nullaf a d l i s i . N u l l a l i b e r o . V i v a m u s

pharetra posuere sapien. Namc o n s e c t e t u e r .

H E A D I N GLorem ipsum dolor sit amet,consectetuer adipisdng elit. Morbicommodo; ipsum sed pharetragravida, ord magna rhoncusneque^ id pulvinar odio lorem nonturpis. Nuilam sit amet enim.Suspendisse id velit vitae ligulavolutpat condimentum. Aliquamerat volutpat. Sed quis velit. Nullaf a d l i s i . N u l l a l i b e r o . V i v a m u s


a Y;\Desktop\PWD31 codeVfor the a)\con... - 0

<}>Back ' ^ ®1

^Search »; J Address^ ^ Search • »

" 3

M o z i l l a F i r e f o x

jfseaity

0 ® ®Edt Sew So Bookmarks loots Uelp O O□ f i«// /V;/DMlct_nt/«»eb_pageJitml X Q

H E A D I N GLorem ipsum dolor sit amet,consectetuer adipisdng elit. Morbicommodo, ipsum sed pharetragravida, ord magna rhoncusneque, id pulvinar odio lorem nonturpis. Nuilam sit amet enim.Suspendisse id velit vitae ligulavolutpat condimentum. Aliquamerat volutpat. Sed quis velit. Nullaf a d l i s i . N u l l a l i b e r o . V i v a m u s

H E A D I N GLorem ipsum dolor sit amet,consectetuer adipisdng elit. Morbicommodo, ipsum sed pharetragravida, ord magna rhoncusneque, id pulvinar odio lorem nonturpis. Nuilam sit amet enim.Suspendisse id velit vitae ligulavolutpat condimentum. Aliquamerat volutpat, Sed quis velit. Nullaf a d l i s i , N u l l a l i b e r o . V i v a m u s


i]| Donez \

I n t e r n e t

Use cond i t iona lcomments with CSSCraig Grannell presents a way to ensure that your CSS rennainsclean by separating out the hacks used to cater for buggy browsers

•You can getCSS-dr iven

layouts to workI n I n t e r n e t

Explorer withouthacking yourmain CSS file

©eb standards evolve slowly butsurely as changes are made tot h e r e c o m m e n d a t i o n s t h a t f o r m

t h e b a c k b o n e o f t h e I n t e r n e t .

Over time, we've seen tags and technologiescome and go. Browsers evolve, too, but theyhave an unfortunate tendency to not keeppace with the rapid and ongoing changes toweb technologies.

The nnost notable case Is Microsoft's Internet

Explorer, which tends to be the bugbear ofevery web designer thanks to each versionhaving fairly major bugs that cause layouts tonot work as intended. Most of the other big

players, including Opera, Safari and Firefox,tend to play ball, but they're used by less thana fifth of the web's total audience. Ultimately,

you have no choice but to deal with InternetExplorer and its bugs.

Sadly, users of Microsoft's browser are alsothe least likely to regularly upgrade. WhileFirefox and Opera users eagerly downloadeach new version as it arrives, many IE usersstick with ageing versions of the browser, onlymoving to a new version when they purchasean entirely new PC. This explains why so manypeople still surf the web with IE 5.5, a browserthat fails to deal correctly with fundamentalrules concerning the box model, thereby

screwing up many CSS layouts. Thankfully,usage of IE5 has dropped significantly of late;even though you should still test that contentis accessible with it, it's arguably acceptable tonow class this seven-year-old relic as obsolete,and avoid tearing your hair out attempting tohack s i tes to work in i t .

However, even IE6 - while superior to

previous versions - still trips up when it comesto some elements of CSS. For example, itignores the 'fixed' value for the CSS 'position'property; and unless you're willing to dabble incomplex proprietary code, Microsoft's browsercannot deal with PNG images that contain true

transparency. (It instead fades the image to asolid background colour.)

As you may have seen from various tutorialsin previous issues, there are workarounds thatdeal with many of these problems. Perhaps themost common is Tantek ^elik's box model hack,which uses a couple of lines of CSS to trick lES.xinto terminating a rule, thereby enabling youto define property values for that browser andthen a second set of property values for more

compliant browsers. (See www.tantek.com/CSS/Examples/boxmodelhack.html for morei n f o r m a t i o n a b o u t t h e b o x m o d e l h a c k a n d

how to implement it.) Although this hackworks well, it does mean you never have

■ entirely clean CSS if you use it. Also, there's

another version of IE on the horizon that maycome with its own set of problems, although it

, will fix many existing issues. Soon enough,

you'll be adding hacks for versions 5.5, 6and 7, and trying to juggle them all fromwithin a single style sheet.

With all of this in mind, it now makes senseto create a style sheet that works in standards-

compliant browsers (and will probably work,i more or less, with IE7), and separate out the

hacks. It's possible to do this by usingconditional comments. Here, we show youw h a t c o n d i t i o n a l c o m m e n t s a r e a n d h o w t o

use them in your own style sheets. By the endof this tutorial, you should feel confident aboutcreating future-proof, standards-based CSS

! websites that cater for ageing and buggybrowsers as well as modern, efficient releases.

U l

IE tends to bethe bugbear of

every webdesigner


Tutorial Use conditional connnnents with CS.

O Apply conditional commentsCreate a separate syle sheet to deal with flaws in Internet Explorer

Two of the most common problems in InternetExplorer 5 - problems that almost every webdesigner will come up against at some point -are its inability to deal correctly with the boxmodel and its incorrect mapping of CSS font-size keywords. Both require explanation if

you're to understand the various elementsc o v e r e d l a t e r.

In CSS, every element is considered to bewithin its own box. For any of these boxes, youcan define its width and height, and then addpadding, borders and margins, either globallyor to each individual side. According to the CSSspecification as defined by the W3C (www.w3c.org), padding, borders and margins areadded to a box's defined dimensions.

Therefore, if you set the width of a CSS box(such as a div) to 200px and its height tolOOpx, then set padding to BOpx, the totalspace this element should take up is 260px inwidth and 160px in height. IE5 for Windowsgets this wrong, though, placing padding andborders within the defined dimensions. Thismeans that, in the aforementioned example,the CSS box would remain 200px wide andlOOpx high in Internet Explorer, reducing theamount of space available for content. Clearly,this causes problems for cross-browser

consistency, especially when you consider thatthe later IE6 gets the box model right.

Then there's fontsize. You're probably awarethat you can define font sizes using keywords.Typically, this is done in the 'body' rule, with akeyword such as 'small' used as a baseline size.Percentages and ems can then be used to sizetext for specific elements. Unfortunately, IE5incorrectly maps the keywords to Netscape's'font size' tags, which results in text appearingone keyword size larger than it should.

For our example page, we're going to lookat how lES's issues affect a simple page design,which will consist of a single centred div thatcontains some text. The fact that the div iscentred will highlight another of lES'sproblems: its inability to correctly positionelements where the 'margin' property hasb e e n s e t t o ' a u t o ' .

®ADD SOME WEB PAGE CONTENTStart with a copy of the files in the'boilerplates' folder within the CSS1 folder onthe CD. Add the following to the 'body' sectionof 'web_page.htmr (you can use your choiceof text in place of our 'lorem ipsum' copy):

) r t > i d = " b o x " > " 1H | 1 > h e a " d i i M < / h 1 > ^ i<p>Lorem ipsum dolor sit amet, consectetueradipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque.

id pulvinar odio lorem non turpis. Nullam sitamet enim. Suspendisse id velit vitae ligulavolutpat condimentum. Aliquam erat volutpat.Sed quis velit. Nulla facilisi. Nulla libero.Vivamus pharetra posuere sapien. Namconsectetuer. </p>

©ZERO PADDING AND MARGINSAdd the following rule to 'style_sheet.CSS' to remove padding and margins from allelements, so you have a clean sheet to start:

©STYLE THE BODY ELEMENTAdd the following rule, which definesthe font size and family for the page, thedefault font colour and the padding aroundyour page content (so that it doesn't hug thepage edges):

body{lant: small Verdana AriaL sans-serif:M o r : # O O O O O Q i " - ' ' . ' . ' M ipatadir^tOpg

S T Y L E T H E B O XAdd the following rule to style the 'box'

div. Its width is set to 200px, and the paddingensures the div's content doesn't hug its edges.The 'background' and 'border' property valuesadd some shades of grey, differentiating theregion from the page's white background.Remember how we said the box model workedearlier: this box now effectively has a width of250px in compliant browsers (200px from the'width' property value, 20px of padding oneach side, and a 5px border on each side:200-i-20+20+5-i-5=250). The 'margin' value isshorthand, setting the vertical margins to zeroand the horizontal ones to 'auto', therebycentring the div in compliant browsers.

# b o x {

piKldlhsf:Dund: feeeeee;

tWtijr: SM'solid #dddddd;iiiiinro auto;}

S T Y L E T H E F O N T SThis final rule styles the font elements

added to our HTML page in step 01. The <h1>heading is set to bold Arial in uppercase; the

h e a d i n gLorem ipsum ddors i t a m « t ,

c o n s e c t e t u e r

adtpisdng elit. Morblcommodo, Ipsumsed pharetragravida, ord magnartroncus neque, Idpulvinar odio loremnon turpis, NuHams i t a m e t e n i m .

Suspendisse id velitvltae llgula volutpatc o n d i m e n t u m .

Allqusm eratvolutpat. Sed quisv e l i t . N u l l a f e d l i s i .N u l l a l i b e r o . V i v a m u s

pharetra posueresapien. Namc o n s e c t e i x i e r .

E * a o » > a h n a r i < s l o o k

♦ ' - j g O @ Q a .o o

H E A D I N GLorem ip jum do lor s i t «m«t ,consectetuer edip isdng el i t . Morbicommot io, ipsum sed ph«r«tr%grev ide , o rd megne rhoncusrteque, id pulviner odio lorem nonturpis. NuHam sit emet enim.Suspendisse id yel i t v i tM Kgulevo tu tpe t cond imen tum. A l i queme r a t ^ ^ « « l i k . M u l t efacilisi. Nulle libero. Viverr»wsphere t ra posuere sap ien. Namc o n s e c t e t u e r .

two values, separated by a forward slash,define the heading's font-size and line-height.Finally, the standard paragraph's format font-size and line-height property values are bothdefined under 'p':

t i i { ^ :tHj-transforrr}: u|p|(-ca^^ilwt bold 120%/lem AHaTsans-serifj) ^ ^

l in t -s ize : 85^

You can find the completed files so far in the

'box_model_compliant' folder on the CD. Try itout in standards-compliant browsers such asFirefox and you'll see the grey box positionedhorizontally at the centre of the browserwindow. Open it up in IE5, however, and you'llfind several errors: the box's width is wrong,d u e t o t h e a f o r e m e n t i o n e d b o x - m o d e l

. problems; the text is too large, due to theI keyword-sizing issue mentioned earlier; the

box isn't centred in the browser window,' because IE5 doesn't deal properly with 'margin:

auto'; and the heading isn't in uppercase, dueto a bug where that property is sometimesignored if line-height is defined within thes a m e r u l e .

Two of the problems - the incorrect box' width and text size — can be dealt with by

I using the box model hack, which enables youJ to define values for lES.x and separate values

for compliant browsers. The centring issue can, be fixed by centring the whole page and then

adding an override to the 'box' div. Finally, thetext-transform issue can be fixed by placing

> that property/value pair in a rule of its own.i Doing all of this results in the following CSS:

• Compliant browsers renderour box and text^s expected,but IE5 makes a number oferrors, as shown to the left

^ uicktipU S E F I R E F O XFirefox is a compliant,

cross-plat form browser,so get into the habit ofusing it as the basis foryour site developmentr a t h e r t h a n t h e e c c e n t r i c

Internet Explorer.


Tutorial Use conditional comments with CSS

O Mac hackThe Mac version of Internet Explorer also has numerous bugs

The Mac version of Internet Explorer is one ofthose sad riches-to-rags tales. When first released,it was undoubtedly the most compliant browseron the market, giving the Windows version asevere kicking in that area. Unfortunately, yearsof neglect and Apple's decision to create theKonqueror-based Safari (vwvw.apple.com/safari)led to the Mac version of IE effectively beingmothballed. Version 5.2 eventually arrived, butsoon after, Microsoft canned the browser. Thething is that some people still use it, so although

its market share is tiny, there are rare occasionswhere you may have to deal with its annoyingquirks and foibles. For example, you might bedesigning an intranet for a company that uses theMac version of IE, or creating a site for a primarilyMac-based audience, many of whom have chosento st ick with IE or can' t run Safar i or Firefox ontheir old Mac. Usefully, a MacEdition article(www.maced i t i on . com/cb / i e5macbugs ) de ta i l sthe vast majority of problems with the browser,enabling you to work around them.

• Canned and obsolete, but in some cases, you may stillhave to ensure your sites work with the Mac version ofInternet Explorer

V C Sisardi - -Si iO ^ 1392 btactod j Check -

OMozilla Firefox

^ V i e w S p Q D o i m a r k s l o c k OBle:///¥:/Deslrt_nt/wcb_paQeiitmi X Q

H E A D I N GLorem ipsum dolor sit «met>consectetuer «dip<sc)ng elit. Morbicommodo, ipsum sed pharetrdgravida, ord magna rhoncusneque, id puivinar odio lor«m nonturpis. NuHam sit smet «nim>Suspendtsse id velit vitae ligulavolutpat condimentum. Al iquamerat volutpat. Sed quis veht. NullafadUsi. Nulla iibero. Vivamuspharetra posuere sapten. Namc o n s e c t e t u e r .

H E A D I N GLorem ipsum dolor sit amet,consectetuer adipisdng elit. Morbicommodo, ipsum sed pharetragravida, ord magna rhoncusneque, id puivinar odio lorem nonturpis. Nullam sit amet enim.Suspendisse id velit vitae ligulavolutpat condimentum. Al iquamerat volutpat. Sed quis velit. Nullaf a d l i s i . N u l l a I t b e r o . V i v a m u s


stays in place, and you add a comment to yourHTML file to add a separate CSS file:

E IllSt -tVansVorm: l|P|F|I1

IjTadd code here..^![endif]->

•Using the box-modelhack and other fixes, orseparate CSS files andconditional comments,you can get your siteslooking as they shouldin Internet Explorer 5

As you can see, the CSS Is now more complexand has various hacks littering the previouslyclean code. The 'body' rule now has a largelyredundant 'text-align' property, overridden inthe '#box' rule. Only IE5 needs these. The

'voice-family' lines are the box-model hack,used twice here: once in the 'body' rule to dealwith the font-size issue, and then in the '#box'rule for the box's width. Furthermore, thereare now two 'hi' rules to ensure IE5 appliesthe 'text-transform' value. Of course, the messcaused by such fixes gets worse when thenumber of rules expands.

Conditional comments are a neater methodof hacking your CSS. Your original CSS code

You can set version numbers by replacing [if IE]with something like '[if IE 5]'; define a more

specific version ('[if IE 5.5]'); or target versionsreleased before a certain milestone ('[if It IE 6]',where 'It' means 'less than'). The last of these isuseful now: IE6 is fairly well-behaved, so wewant to target earlier versions of the browserand provide these with a style sheet where the

styles override those in the 'clean' CSS createdprior to the box-model hack section.

Using the files from the 'box_modeLcompliant' folder as a starting point, add thefollowing code after the end of the 'style'element in the 'head' section of the web page:

jggf It IE gfc<link rel="stylesheet" type="text/css" href="ieSJiacks.css" />

iiil|e.ndatr»..

CREATE VIRTUALM A C H I N E SMultiple versions ofInternet Explorer onyour PC won't deal withc o n d i t i o n a l c o m m e n t s a s

expected - they'll allbehave the same as thelatest version you havei n s t a l l e d . G e t a r o u n d

this by using the likes ofP a r a l l e l s W o r k s t a t i o n /

Desktop (www.parallels.com) to run virtualmachines, each with itso w n I E I n s t a l l .

I d " E £ % '

t: small Verdana, Xrial, sans-serif;

p a c M ^ ^

t t t t o v

round: #eeeeee; - -

border: 5px solid #ddd(|ck^n : 0 a u t o i i n

I v o i c e - f a m i i r .voice-famiferliwite

i bold 120%/lem Arial. sans-serifj•Opera (above) and Firefox are updated more often than Internet Explorer, so they're more current thanMicrosoft's browser when it comes to web technologies and standards compliance


Tutorial Use conditional comments with CS[c

0^1^ Quick tipE S T A N D

V A L I D A T EEven though your IE-specific style sheets aretargeted solely atMicrosoft 's browser, i tstill pays to keep themvalid (if possible), toensure ease of updatinga n d m a i n t e n a n c e .

Validate all of your stylesheets at http://jigsaw.w3 .o rg / css -va l i da to r.

OMart»)etai(>d»>g hwothot of jm. Aarian fttaan far wtfwit fcr thouft trf whn wi* w>» ar an »»meUng HtX h* erevkUd the wchtve * we# * *s support through hb ewT^any, 6hB0gh[iD,ay$lak rou e»n lee morel f t»»meoor i M h te e reh ive i n rwu i r vMr f te f i t .

lASEtb M that cwoK^ itarr a

M e c w i t C h e m e e l o U m A r d i h r * ^[ z o M - i o - a i ]A d A t d f i D r u n u x , M a c 0 6 X W M t w t r « d o « n

t 3 0 0 S - 0 1 - 2 l }MM a lee nrab in l and Phoenix , and Canwa. aka CMmera; added ^ f>* f i ? .a tar Windows «>dM a c ; a d d e d Q i a . H u l a a r m t f o i a f a t U M I X / U n u x ; B r t w w e a . a ( o r A m i a B{ 2 0 0 4 - t 0 - l S ]

1 ^ . M r f t . « s . o i s n , 5 . S S M . f e . Q ^ e o u r t e a f f t v a nM i i M t « » « * A r t t m * m e y t > h » - M f t e u m t » l e e c f t m t o w m a t .

b r o " . v s * » : r

S c i e n a T U v e l i r I n t e m a d o n a iM fi M ks c r y * m .

M o a a t cS w ^

M u l t i W f t b V l a w T

S t e t M T t B r a d MM v B f o w r

W i v l q t t w

•Get into the habit of not relying on the latest release of IE when creating and testing websites. Evolt(http://browsers.evolt.org) enables you to download current and old releases of almost any browser

Then, create a new style sheet called 'ie5_hacks.css', and populate it with the overridesthat address lE's deficiencies in rendering thebox-model specifications correctly:

tW-alj^: center;fant: x-small Verdana, Arial, sans-serif:

hvri'^ ■fli'' iliir ■

E I ]tttrt-transforn-i:'

Non-Microsoft browsers ignore the conditionalcomment. IE6 and above see it, but don't linkto the style sheet. Releases of Internet Explorerbefore version 6 will access the 'ie5_hacks.css'

style sheet and use its rules to override thosefrom 'style_sheet.css'. Your main CSS remainsclean and easier to use and maintain, and ismore future-proof because most hacks arebased on bugs that are sometimes fixed (andall of your hacks and fixes are in one place).See the 'box.modeLconditional' folder onthe CD for the completed files.

The downside to this method is that it'sdifficult to test without several PCs, each witha different version of IE installed. However,there are pieces of software available thatenable virtualisation, so you can run severalinstances of Windows at the same time: try

Virtual PC from Microsoft. Also, because thebox-model hack works fine with the standaloneIE builds available from http://browsers.evolt.org/?ie/32bit/standalone, you can work up aversion of your CSS that includes hacks. Once

you've tested everything, move the hacks to aseparate file, effectively following theworkflow explored here.

With IE7 due for final release over the nextfew months, it's even more important tomaster conditional comments. IE7 will finallysupport PNG transparency. You may end upoccasionally using this in designs for compliantbrowsers, using a conditional comment tooverride such images (replacing them orturning them off) for versions 6 and below ofIE ('[if It IE7]'), then using a set of hacks for IE5,a s o u t l i n e d e a r l i e r .

You may be wondering if we're headingback to the days when designers used to codeseparate sites for each browser. This isn't whatwe're advocating here. Best practice assumesno changes to the HTML at any point, and onlythe most essential of CSS fixes to tailor the sitefor the various IE releases. Full-scale CSS

replacement is unnecessary.

O Create a PNG in Photoshop

• T h e C e n t r i c l e . c o mwebsite provides anoverview of CSS hacksfor al l web browsers athttp;//centricle.com/ref/c s s / fi l t e r s

How to make the transparent badge we'll use overleaf

SET UP THE IMAGEfll Create a lOOpx image. Delete the Backgroundlayer. Set the foreground colour to White, On anew layer, select the Polygon tool. In the Options bar, setSides to 20; in the bar's drop-down menu, tick Star andset Indent Sides By to 15%. Draw a star shape. Duplicatethe layer and set the bottom layer's opacity to 50%.

ADD TEXT AND EFFECTSSelect the top star layer. Go to Layer > LayerStyle > Stroke. Set Size to 1 px. Position to

Inside and Color to Black. Set this layer's mode toMultiply in the Layers palette. Select the bottom starlayer, go to Layer > Layer Style > Drop Shadow. SetAngle to 120°. Add centred text in a sans-serif font.

FLATTEN AND EXPORTSave your image as a PSD file so you can edit itlater. Select one of the non-text layers, then go

to Layer > Merge Visible. Use Edit > Free Transform torotate the image anti-clockwise slightly, and then go toFile > Save for Web. In the dialog box, choose PNG-24as your format and ensure Transparency Is ticked.


Tutorial Use conditional connments with CSS

C Manage PNG transparencyUse a transparent image in modern browsers and a solid image in IE

M o r e i n f oIf you'd like moredetails on conditionalcomments and relatedtopics, visit thefo l lowing page onM i c r o s o f t ' s M S D N

websi te: ht tp.7/msdn.m i c r o s o f t . c o m /

w o r k s h o p / a u t h o r /d h t m l / o v e r v i e w /

c c o m m e n t . o v w. a s p

Web graphics are limited in many ways.Most designers stick to GIFs for line art andJPEGs for images with continuous tones.A variation on GIF enables you to remove oneor more colours for a kind of transparencyeffect, but unless the 'hole' is entirely straight-edged, the messy result is a long way from thekind of effect you see in Photoshop.

The PNG format enables full transparencyeffects, but IE doesn't render them properly.This will reportedly be fixed in the next majorrelease, but if you opt to use PNG effects, youstill need to cater for older versions of IE.

In this tutorial, you'll create a page with CDcover art and overlay an 'on sale now' sign.Because the sign is a PNG with transparency,the div's background, the image and theimage's border will be seen through the sign.

©CREATE THE WEB PAGEUse the 'png_start_here' folder fromthe CD as the basis for this tutorial. Add the

following code to 'sign.html' to add the coverart inside a div with a class value of 'artwork'and set up a blank div for the sign, which willbe added later using CSS.

Bliv class="artworlc">»ali» class="sHn "></div><img src="cd_artwork.jpg" ait="Cover art"Wi€^' '300''hei|it i . ' '300;'></div> . „

©ADD THE CSSOpen 'sign.css' and add the stylesbelow. The first rule removes padding and

margins from all elements; the 'body' ruleadds 20 pixels of padding to the web page.

m

Add the following rules to style the 'artwork'div and images within. The '.artwork' rulemakes the div's dimensions 50 pixels largerthan the BOOpx image's, and sets thebackground to light grey. The '.artwork img'rule sets margins around the image's edgesand also defines a dark grey image border

i ^gh t : 350px ;BS cground: #ddc33

• | a ; Q G o G o o g l e

fi l s s i• From left to right: how a transparent PNG looks by default in Internet Explorer; the PNG swapped fora different image with an IE hack; and proprietary code that adds transparency to a PNG in IE

The 'ie_hacks.css' style sheet is accessed by allversions of IE lower than 7 (which will probablyhave full PNG transparency support).

©USE AN ALTERNATE IMAGECopy 'on_sale_now_ie.gif' from the'png_ie_swap' folder on the CD to the folderwhere your web files are. Create the style sheet'ie_hacks.css', place it in the same folder anda d d t h i s r u l e :

The following rule defines styles for the 'sign'div. The 'background', 'width' and 'height'settings define 'on_sale_now.png' as thebackground and set the div's dimensions tothose of the image. Using 'position: absolute'r e m o v e s t h e d i v f r o m t h e d o c u m e n t fl o w

(placing it over the 'artwork' div), while the'margin' definition moves the div (and theimage) slightly down and to the right.

N r { I .

i f fl C

pc^lon:n*rgin:>i|^ 0 0

iprgtn: lOpx 0 0 lOpx, v

HlgHtrWpx,Pkkground: url(on_sale_now_ie gifif; i'n . T ' ; ; '

gickground: url(on_sale_now.phg|;

©HACK FOR IEEverything works in compliantbrowsers, but IE gives the PNG a backgroundcolour, so we need an IE-specific hack. Usingconditional comments to attach a style sheetfor IE enables the hack to be contained. Workwith a copy of your files and add the followingto 'sign.html', under the 'style' element:

Load the web page into IE to see that the star

shape has been replaced by a rectangular GIF.

©USE PROPRIETARY CODEAn alternative option is to replace the'.sign' rule in 'ie_hacks.css' with:

Sclink rel="stylesheet" type="text/css" href="ieJiacks.css" />T B i f f r ;

ilter:progid:DXImageTransform.Microsoft.iSJphalmageLoader(src='on_sale_now.png',

|izi||^ethpd^^iift_L i i i i r o u r v i ; n o i s I Z ^ ; 3 !}

This uses the PNG image and displays it withtransparency. The filter property doesn'tvalidate, but this is less of a problem if youseparate your IE hacks from your main CSS. O


OVERSEASSUBSCRIPTION OFFER^$! i53n5HrB l a i t T m a c c o m p a t i b l e m

P r a c t i c a l

•CREATE CUSTOMISED SEARCH TOOLS•EXTRACT MEDIA FROM SWF FILES• PHOTOSHOP & CSS VIDEO TUTORIALS

o % * /

Helping you build better wel

Build your sitefor free!Revealed: 20 must-have free programsand online tools for authoring, graphics,content management and more

MOW TO. .

M a k e Im o n e y ^n o w !

6 6PAGES OFE X P E R TA D V I C E

• Password -protect pages in

D r e a m w e a v e r

• Load imagesdynamicallyusing Flash

T H I S M O N T H

Is video killingthe Internet?

. . P e r f e c t -Podcastsinjustl

■■ (tSfii

Subscribe Overseaso

R e c e i v e13 issuesfor only

€105u s$155• 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, £72)•• Payment will be debited in Pounds Sterling (USA, £84)

Exchange rates correct at time of going to press, June 2006. Payment by credit card only*** 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 issues.

GET THE LATESDELIVERED

PRACTICAL WEB DESIGNO YOUR DOORSTEP NOW!

C A L L + 4 4 1 8 5 8 4 3 8 7 9 4QUOTING OFFER CODE P015OR VISIT www.myfavouritemaqazines.co.uk/pwp/p015OFFER ENDS 30 SEPTEMBER 2006


TUTORIAL; FLASHLoad images dynamically with Flash

D e t a i l s

Flash Team WeblogInformation about Flash,direct from the source.

http://weblogs.t n a c r o m e d i a . c o m /fl a s h t e a m

MovieClipLoader 6An open source versionof MovieClipLoader that'scompatible with FlashPlayer 6.http://osflash.org/moviecliploader6?s=moviecl iploader6

MovieClipLoaderd o c u m e n t a t i o nThis documentat ion isextremely helpful inproviding you with all ofthe events and methodsof the MovieClipLoader.http:// l ivedocs.m a c r o m e d i a . c o m /fl a s h / 8 / m a i n /0 0 0 0 2 S 3 8 . h t m l

Load images dynamicallyw i th F lashKris Hadlock shows you how to load content into a Flash movie,with progress reports and error messages to add interactivity

The finished script andworking SWF file are inthe Flash Tutorial folderon the CD.

Olash has come a long way sinceits mid-1990s debut - dynamicdata and loading images didn'teven exist back then. Nowadays,

dynamic data has become the norm, as itshould be, and loading images is somethingthat every Flash designer or developer shouldunderstand if they plan on creating somethingmore ambitious than basic animations.

Flash 5 was the first version of Flash thathad functionality to load an image dynamically,using the Movie clip method loadMovie. Thismethod was very exciting when it came out: itenabled you to load images from a local diskor from a server, so that you could finallyintegrate Flash with other dynamic contentand add those fancy animations that are nototherwise possible. There were issues withshowing loading progress, calculating whenan image was loaded so that you could applyactions to it, and understanding what wentwrong if there was a load error.

With the release of the MovieClipLoader

object in Flash MX 2004, these issues were no

longer a worry. This object contains all themethods that Flash developers were always

having to find hacks for, so that they couldwork around the issues. MovieClipLoaderenables you to load an image, then use anevent listener to check its progress. The listenerc a n r e c e i v e n o t i fi c a t i o n a b o u t d i f f e r e n t s t a t e s

of the loading progress, such as when it starts.

4fiiFunct ions thatwere tricky to

ach ieve are noweasy to include V

when it is complete and when it is ready tobe modified - all conditions you can exploitin the behaviour of your Flash project.

MovieClipLoader is a huge improvement tothe practices of loading images, and it allows

for much more flexibility and control over theprocess. Functions such as creating progressbars or applying actions to images and other

functionality, which were tricky to achieve andunreliable in practice, are now easy to Includein your projects, thanks to the events thatMovieClipLoader manages.

This tutorial will teach you how to useM o v i e C l i p L o a d e r \ . o a v w a g eloader with a dynamic progress bar and errorhandling. We will cover the inner workings ofthe MovieClipLoader and all of its events andthe events parameters, as well as the basics of

dynamic loading. You'll create a containerobject before using ActionScript to addintelligent monitoring features to it.

Yo u w i l l a l s o fi n d o u t h o w t o a d d a l i s t e n e r

to the movie to receive the events during the

loading process, then discover how to handleand use these events to your advantage whenthey are fired. MovieClipLoader is quitepowerful and can provide some extraordinarypossibilities: it's all up to you and how you puti t to use.


Tutorial Load images dynamically with Flash

C R E A T E A D O C U M E N Tstart by opening Flash and choosing the Sizebutton in the Properties panel. If you don't

have the Properties panel open already, select the menuoption Window > Properties > Properties. Change thewidth to lOOpx and the height to lOOpx. We must startby creating a new symbol we can load an image Into.

I N S E R T A N E W S Y M B O LSelect Insert > New Symbol, which will prompt you with a dialog box. Namethis symbol 'container' and make its type a Movie clip. The new Movie clip

symbol provides us with a container to hold our dynamic image - the only supportedway to load an image into Flash.

M O V I E C L I PI N H E R I T A N C EBecause we're loadingan image Into a Movieclip, the image wiltinherit the Movie clipproperties by default.

I M A G E

A D D A N D I D E N T I F Y T H E C O N T A I N E RNow you can return to the main timeline by selecting the blue arrow abovethe timeline. Add the Movie clip by dragging it from the Library to your

Stage area. To target the new symbol with code, we must give it a name in theProperties panel. For this tutorial, we will name this instance 'container'.

T H E M O V I E C L I P L O A D E R O B J E C T^ 9 MovieClipLoader is an object that enables developers to add listeners which

trigger callback events. The callback events can then tell us informationabout the status of the loaded image. You can see the full details using Flash'sbuilt-in Help system.

B ▶ Dobugger▼ A c t i o n s - F r a m e

f t iS © V S © sf .l^var iBcLoader:KovieClipLoader - new MovieClipLoader (} ;

i i » H i ! i p ^a K w i i r ^

▼ A c t i o n s - F r a m e ' "

I jS e V 1 (g 8C>.itvar mcLot tderrHovieCl ipLoader - new HovieCl ipLoadei : ( ) ;2 ! m c L o a d e r . a d d L i s t e n e c ( t h i s ) ;

I N S T A N T I A T E A M O V I E C L I P L O A D E R O B J E C T

li/y To begin using the MovieClipLoader to dynamically load our images, wemust first create an instance of it. Before we write any other code, we'll

create an instance of the object by simply declaring a new MovieClipLoader. Makesure you've selected the frame in the left-hand list before starting this ActionScript.

A D D A L I S T E N E RIIIO To prepare our file to receive events from MovieClipLoader, we must add

a listener. In this example, we will be adding the listener to 'this', whichrepresents the current file. This means our events can fire as root functions and noth a v e t o b e a t t a c h e d t o a n y o b j e c t s . 5 /



▶ Hetp

▶ Debuggw

H ▼ Acthmf ' Frame

^ I ( ^ 8 ^ 11 v a r a i c L o a d e r i H o v i e C l i p L o a d e r '2 i D c L o a d e r . a d d L l s t . e n e r ( t h i s ) ;

3 i n c L o a d e r . l o a d C l l p C i i n a g e . j P a ' ' ,

n e w H o v i e C l i p L o a d e r ( ) ;

□ %

/ p

1 A

o a✓ ✓

i

L O A D A N I M A G E

11 ^ Now the part we've been waiting for; loading the image. In this example,we're loading 'image.jpg', which should reside in the same directory as the

final SWF file. This is loaded into the 'container' Movie clip we created earlier, byspecifying 'container' as the second parameter of the loadClip method.

0THE BASICS OF LOADINGOne important thing to know about dynamically loaded images is theplacement of the image within the Movie clip. When we dynamically load

an image into a Movie clip, the image's top-left corner will be placed at theregistration point of the Movie clip.

P A R TT W O

CREATE LOADINGSTATES

H: 17.6 .vt 41-6 J ^ J[1□AUokam

> Debuggsr

V A c t i o n s - F r a m e

■ f e e V 1 © 8 1 5. v a r i D c L o a d e r : H o v i e C l i p L o a d e r - n e v H o v i e C l i p L o a d e r ( ) ;: i B c L o a d e r . a d d L i 9 t e n e r ( C h i s ) ;

: n c L o a d e r . i o a d C l i p C ' i i D a g e o p g ' ' / c o n t a i n e r ) ;

2

3

4

5 funct ion onLoadProgress (»c iHov ieCl ip , by tesLoaded;Nu«ber, by tesTota l zNueober)6 (

v a r l o a d P e r c e n t a g e t N u i B b e r - H a t h . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a l ) * 1 0 0 ) ;p r e l o « u i e r . t x t r i e i d . t e x t - l o a d P e r c e n t a g e

C R E AT E A P R E L O A D T E X T F I E L D

IIJ Now create a text field, which will show the progress of our loading image.To dynamically display text inside it, choose the Dynamic Text option from

the Properties panel for that text field. Next, click the Embed button and select theoptions from Uppercase through to Punctuation to get the font to render correctly.

0 TRACK THE LOAD PERCENTAGEThe onLoadProgress event provides us with two values: bytesLoaded andbytesTotal. As the image is loading, this event is continually fired. We can

take the values and divide bytesLoaded by bytesTotal, then multiply them by 100 toget our load percentage. We can then add the figure to the preloader text field.

P — ^^ Quick tipI M A G E F I L EC O M P A T I B I L I T Y

Mov ieCl ipLoaderrecognises SWR JPEG,G I F a n d P N G fi l e s - b u t

you should note thatreleases of Flash Playerb e f o r e v e r s i o n 8 c a n ' tuse G IF o r PNG.

/ e x p e r t a n c e/ t h a

^ m r e v o l u t i o n

m a c f o m a d u *

FLASH-P layer 8

« «

. i - -o t \

« 4

o q

R

. " • :

C R E A T I N G A P R E L O A D B A Rf|JC4 Showing a visual beside a text percentage is a

fairly common practice. To achieve this, create aline 50 pixels long. Convert the line into a Movie clip bychoosing Modify > Convert to Symbol and setting theregistration point to the middle-left. This sets up theopportunity to make the graphic progressively growfrom the registration point in order to enhance thevisual, but there's a little ActionScript work requiredto make this happen.

»[>sbug9arA c t i o n s - F r a m e

4 © V 1 O 8 0 .v a r n c L o a d e r : H o v i e C l i p L o a d e r - n e v H o v i e C l i p L o a d e r ( ) ;

B i c L o a d e r . a d d L i s t e n e r ( t h i a ) ;m c L o a d e r . l o a d C l i p ( " u n a g e . j P C f " / c o n t a i n e r ) ;

f u n c t i o n o n L o a d P r o g r e s s ( w e : H o v i e C l i p , b 7 t e s L o a d e d : N u i n b e r , b y t e s T o t a l i N u n b e r )

v a r l o a d P e r c e n t a g e z N u n b e r - H a t h . r o u n d n b y t e s L o a d e d / b y t e s T o t a l )

p r e l o a d e r . t x t F i e l d . t e x t - l o a d P e r c e n t a g e

p r e l o a d e r . b a r . _ » i d t h - ( l o a d P e r c e n t a g e / 2 ) ;

1 0 0 ) ;

C A L C U L A T E T H E P R E L O A D W I D T HWe'll make the 'preload' Movie clip grow in a similar way to how we'redisplaying the percentage in the text field. The only difference is that we

must take the loadPercentage that we calculate and divide it by two: our final Movieclip size is only 50 pixels, and we don't want its width to grow beyond that.



• 3 4t i B I I

S S f t l t > M < 4 : t t !S i u n :

a H !■ 4

■ M . , i a » a i H i ) ' • *

! < ^ 9 ! - .

D I S P L A Y T H E P R E L O A Dli/»J Now that we've completed all the pieces of the preloader, we will combine

it all into one Movie clip, which we'll appropriately name 'preloader'. We'veanticipated the naming of this component in the script we've already written, sothere's no need to go back and add the name to the target paths.

T S r a S T^ A c t i o n s - F r a m e

I jS 0 v' 1 (5 8Pv a r a c L o a d e r t B o v l e C l i p L o a c i e c - n e w H o v l e C l i p L o a d e r ( ) ;

l e c L o a d e r . a d d L l s t e n e r ( t h i s ) ;

K c L o a d e r . l o a d C l l p ( " i w a g e . j p g " , c o n t a i n e r ) ;

f u n c t i o n o n L o a d P r o g r e s s ( a i c : H o v l e C l l p , b y t e s L o a d e d : N u a b e r , b y t e s T o t a l s N u R i i e r )

6Hv a r l o a d P e r c e n t a g e z N u K b e c ' n a t b . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a l ) * 1 0 0 ) ;p r e l o a d e r . t x t T i e l d . t e x t - l o a d P e r c e n t a g e

p r e l o a d e r . b a r . _ « l d t h * ( l D a d P e r c e n t a g e / 2 ) ;10' }1 1 -

1 2 . f u n c t i o n o n L o a d l n t t ( m e r B o v i e C l l p )

13[ (14j trace("onLoadlnit: " + wc);i s f )1617j function onLoadStart (inc:HovleCllp)le; (i s f t race("onLoadSteur t : " + mc) ;

2 0 ]

^He ip

r> MxjgoerA c b o n s -

^ i ^ V i1 var T tcLoadet ;Mov ieCl lpLo«der - new Hov ieCl ipLoader ( ) ;2 n c L o a d e r . a d d L i s c e n e r ( t h i s ) ;

3 x n c L o a d e r . l o a d C l i p ( " i m a g e , j p g " , c o n t a i n e r ) ;

f u n c t i o n o n L o a d P r o g r e s s ( » c : M o v i e C l i p , b y t e s L o a d e d : N u i B b e r , b y t e s T o t a l : N t i i r t o e r )

{

7 ' v a r l o a d P e r c e n t a g e : N u i t t o e E - M a t h . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a i ) • 1 0 0 ) ;l | p re loader. t x t r i e ld . tex t " l oadPercen tage9 ; p r e l o a d e r . b a r . _ v l d t h - t l o a d P e r c e n t a g e / 2 ) ;

lo' >1 1

f u n c t i o n o n L o a d l n i t ( m c : H o v i e C l i p )

t r a c e ( " o n L o a d l n i t : " + h i c ) ;

0 THE LOAD INIT STATEThe onLoadlnit event is the last event in the sequence of MovieClipLoaderevents. It's fired when the actions of the first frame of the container clip

have been executed. This isn't relevant here, because we don't have any actions Inour container's first frame, but it can provide a lot of flexibility in other situations.

▼ A e t t o M - F r i m w

■ f e P e V 1 f ? 8 0 ,v a r » i ; l . o a d e r : H o v l e C i l p L o a d e r -

a e l o f t d e c . A d d l , i a t e n e r ( c b i a ) ;B c L o a d e E . l o a d C l l p ( " u a o g e . i p g " ,

I H o v l e C l l p L o a d e E O ;

l e t i o n o t t L o s d P r o g r e s s l n e i l o v l e C l l p , b y t e s L o s i l e d : H u g ± i e r , b 7 t e a T o c a l : N u i i l > e E )

v a r X o « d P e c c e a t a g e : N u a * ) e i : • H a t h . r o u n d C ( b T C e s L o a d e d / b y t e s T o t a l ) • 1 0 0 ) ;

p r e l o a d e c . t x t r i e l d . t e x t - l o a d P e r c e n t a g e

p r e l o a d e r. b a r. _ v l d t h • ( l o a d P e r e e n t a g e / Z ) ;

f u n c t i o n o n L o a d l n i t ( z a c i H o v i e C l l p )

{

t r a c e C o n i o a d l n i t ; " * s i c ) ;

)

f u n c t i o n o n L o a d S t a r t ( a i c s B o v i e C l i p )

t r a c e ( " o n L o a d S t a r c : " + b c ) ;

f u n c t i o n o n L o a d C c n B p l e t e ( i B c ; H o v i e C l i p )

t r a c e C o n L o s d C o n p l e t e : " - «■ b b ) ;

T H E L O A D S TA R T S TAT E

¥M The onLoadStart event is fired when the image that we're loading hasbegun to download. In this event, as in all of the others, we receive a Movie

clip parameter by default, which is the target Movie clip that we are loading theimage into.

0THE LOAD COMPLETE STATEThe onLoadComplete event is the first event that's fired once the image hascompletely downloaded and appeared in the Movie clip. This is a good place

to begin other functionality, such as adding actions to the image. onLoadCompletecan optionally report the HTTP status of the server delivering the image.

O Apply a dynamic action Take care to get the timing right

> DebuggorA c t i o n s • F r a m e

^ © V J (S 8<51 1 f u n c t i o n o n L o a d C o m p l e t e ( )

2, i3' )

!fr^ Help▶ Debugger

A c t i o n s - F r a m e

■fe ,0 © V s (S? 8P

"ij function onLoadComplete (mcrMovieClip)2|(3 ! >

▶ Hetp

b e b u ^F r a m e

jS> e V Il ! f u n c t i o n o n L o a d C o m p l e t e ( m c i H o v i e C l i p )

2| <m c . o n P r e s s • f u n c t i o n ( )3 '

4 ; <

t r a c e ( ' T h e u s a g e h a s b e e n p r e s s e d ' ) ;

P A T I E N C E B R I N G S R E W A R D STo apply actions to a dynamically loaded image,you must make sure you don't try to trigger an

action too soon. To get the timing right, we must firstwait for the onLoadComplete event to fire before wetry to do anything else in ths script.

T A R G E T T H E M O V I E C L I PThe onLoadComplete event will contain thetarget Movie clip we're using in our project as

a parameter, therefore all we have to do is catch it. Theprecise name of the parameter depends on thelabelling conventions you're using.

0A D D A N A C T I O NNow that we have waited and are receiving theMovie clip parameter, we can apply any action

that we like to the Movie clip that contains the newlyloaded image. Here, we're using onPress to monitor forthe user clicking the image.


Tutorial Load images dynamically with Flasho

L r

* p ® V 1 e 8 6 :: s K o v u C i i p l . < r a d e t ■

t : a c l e a d c r . u t d L l i c c D C t tK L o a d c t . I r M d C l l p r ^ i M g e o p V "

t u B e t t o & e D l o * c t P r a 9 r « s j | B c :

w ■o v i c C l t p l o a d s r O /

3 rft

i .

b n « » ' ' O a a t e > t U v t t i b e t , b r t e s T o c « i i N < a * > e i : |

t e t h . c o u i u i | ( b 7 t e « L o w l e d / b 7 t e s To e a l | * 1 0 0 ) ;

I P e r e e a t « a « / 2 ) ;

2 fu l tedoB onLoadlB i t CaetM

a;

I

O D L o a d S t w e C B e s l l o v ^ c C l . l p t

R o v i e C l i p , c r r a c < M * ; 3

e c f t c e C I r c o i : C « 4 * : " * • r r o r C o d e ) ;

USING ERRORD E T E C T I O N

E R R O R H A N D L I N Gllll Error handling begins with the onLoadError event: this fires when there

are issues with the load process. It also provides details such as the targetMovie dip, the error code and the HTTP status to help us determine what wentwrong with the load.

0 CREATE AN ERROR TEXT FIELDWe'll create a new text field the same as we did for the preload text. Thisfield will be placed in a new layer above the content, so that if an error

occurs, it's the top element that is displayed. If you get the layers the wrong wayaround, your user may never see the error report.

^IWIM o r e i n f oActionScript.org (www.actionscript.org) is awelcoming forum foranyone looking fora n s w e r s t o I n t e r a c t i v e

Flash and scriptingissues, with a communityof helpful folk on hand.

C R E AT E A N E R R O R M O V I E C L I PNow that we have a text field, we'll create aMovie clip that combines the text field with a

background, which will hide all the content behind itwhenever an error message is presented.

/yK DISPLAYING ERRORS1^ We can display the error any way that we please. In this example, we'resimply writing the error code and the HTTP status to the text field. To

provide more details about the error, we could create a switch statement thatchecks for the different codes and provides the meaning of each error

P A R TF O U RCLEANING UP b r t * « T e t « l s N u

. t k . r e u n d ( ( b i r t t * L o M l e i l / b r t M T a e a l ) • i

2 4 ' t « a e t l n o i i L a a d C a a v K t c ( a B i a o v i e t l l i )

U N L O A D I N G A N I M A G EWe'll now add unloadClip code to the loaded image's onPress action. Thisunloads the clip when the image is pressed. As you can see, this code has to be

placed within the onLoadComplete method, because the image needs to be fullyloaded before we can unload it. If we try to unload the image sooner, we'll get an error.

0 R E M O V E Y O U R L I S T E N E R SIf you plan on not using the listener that you added any further, it's agood idea to remove it from memory. We can do this by simply calling the

removeListener method just as we did the addListener, referring to the same objectand using the same MovieClipLoader instance as before. O


Back in black!Full review of Apple's new iBook replacement

The July issue of MacFormat magazine is on sale now> Get more ^from your Iviac

Apple Mxfiook Pro 17'in(h

m

_ kApple's®I F O R M AT i K w h w i i e

GET MORE FROMY O U R M A C -

NeverpayforaMacprogramag^n! WOiscwerlhebestHtEEatefnadves.. . ¥

AND THEY'RE All ON yOURDVlH I

Mac questions answered The best reviewsFun tutorials and practical advice All the latest Mac kit on test

TUTORIAL; CSSDesign attractive data tables in CSS

D e t a i l sBeginner

B EAny text or HTML editor

I Can'tA gallery of table styles forinspiration. You can evensubmit your own design.http.7/icant.co.ukycsstablegallery

Web Page Designfor DesignersThis comprehensive CSStutorial for beginnerscontains a section allabout styling data tables.www.wpdfd.com/e d i t o r i a l / b a s i c s /i n d e x . h t m l

Somacon WeblogPlay with CSS table styles,then ask the site togenerate the CSS for you.w w w . s o m a c o n . c o m /p141.php

I I I I MThe code and image fileyou need for this tutorialare in the CSS2 folder onyour CD.

^ THE 86TH PGA CHAMPIONSHIPAugust $-15, io64 • WhisUing StraitsKohfer. WJtcotisiii USA

P<iA.coni's coveragesponsored by CADILLAC

P fi A m o r e P G A H O M E N E W S S C O R I N G P L A Y E R S E V E N T I N F O C O U R S E H I S T O R Y M U L T I M E D I A S T O R E

S C O R I N GP C S P L A Y E R

S C O R I N G T O P A R R O U N D ST O T A L

T O D A Y T H R U T O T A L 1 2 3 4

1 * V l j a y S i n g h - t - 4 F1

- 8 6 7 6 8 6 9 7 6 2 8 0

2 ♦ 6 C h r i s D I M a r c o - 1 F - 8 6 8 7 0 7 1 7 1 2 8 0

2 J u s t i n L e o n a r d + 3 F - 8 6 6 6 9 7 0 7 S 2 8 0

4 ♦ 1 E r n i a E l s - H F - 7 6 6 7 0 7 2 7 3 2 8 1

4 ♦ 1 Chr is Ri ley + 1 F - 7 6 9 7 0 6 9 7 3 2 8 1

' F ina l Summary' L e a d e r b o a r d

C o u r c e S t a t i s t i c s' P layer Scorecards

P r i z e M o n e y B r e a k d o w nPa i r ings & Tee Times

p O M t r e d b y

% Book your, next golf trip on PGA .com Expedia.COm

6 * 1 2 K . J . C h o i

6 - f r 1 9 P a u l M c G l n l e v

- 2 f - 6 6 8 7 1 7 3 7 0 2 8 2

- 3 F - 6 6 9 7 4 7 0 6 9 2 8 2

r - - ' A SThere's no better place forofficial gear than the PGAChampionsh ip S to re . Vou ' l lfi rx j ha ts , sh i r t s ,accesso r i es , books awJm o r e '

Design attractivedata tables in CSSYou can use CSS to transform HTML tables into attractive andusable features of your site. Rachel Andrew shows you how

Oables have received a pretty badpress in the last few years. Withpeople describing site layoutusing CSS rather than tables as

•When you have complexinformation to present, atable makes it easy to read -and styling helps even more

"table-free site design", you would be excusedfor thinking that tables were not advisableunder any circumstances. But tables are in factan important part of the HTML specification

designed to be used to display tabular data.The HTML 4.01 recommendation (www.

w3.org/TR/htm I401/struct/tables.html#h-11.1)states: "The HTML table model allows authorsto arrange data - text, preformatted text,images, links, forms, form fields, other tables,e t c - i n t o r o w s a n d c o l u m n s o f c e l l s . Ta b l e s

should not be used purely as a means to layoutdocument content, as this may present

problems when rendering to non-visual media.Additionally when used with graphics, thesetables may force users to scroll horizontally toview a table designed on a system with a

larger display. To minimize these problems,authors should use style sheets to controllayout rather than tables."

Ta b u l a r d a t a i s c o n t e n t t h a t c a n b e d e s c r i b e d

best within a table. If you have information to

display on your site that would be right athome in a spreadsheet with rows and columns,then you probably have tabular data; and

(X)HTML gives you elements to mark it up sothat it can be understood easily. Some

examples of tabular data Include: financialdata, such as publishing accounts on the web;a t a b l e o f s i t e u s e r s a n d t h e i r I n f o r m a t i o n i n a n

administration section; or a table of events,with information about where and when theyare to take place. Where tables are notadvisable is actually where they have beenmost used - for site layout. You're advised touse CSS positioning rather than table cells to

position your layout in the browser.In this tutorial, we will be creating a basic

data table that contains no presentational

markup, which would immediately tie the waythe table looks to its structure. This markupwi l l c rea te a t ab le t ha t ' s access ib le t o sc reen -

reader users, but has no borders or any otherstyling that could make it hard to quickly readi n a b r o w s e r.

Once we have our basic table, we can startto look at how to style it using CSS. We'llcreate two different table styles to look at

some of the different ways that you can goabout designing a table.

The first table style we'll create takesadvantage of the fact that table borders can becollapsing or non-collapsing, to create a stylethat leaves space between the different tablecells. You can clearly see the borders betweeneach cell, and the header is visually distinctivef r o m t h e t a b l e c o n t e n t s .

The second design uses a tiled image tomake the header section more fancy anddemonstrates how you can use background

images in your table designs to createa t t r a c t i v e e f f e c t s . T h i s d o e s n ' t m a k e t h e t a b l e

any less accessible, because the style is alwaysd i v o r c e d f r o m t h e c o n t e n t i n t h e t a b l e .

Tables are animportantpart

o f t h e K T M Lspecification


Tutorial Design attractive data tables in CSSc

O Build and style your tableStore your data in the table and leave the design to your CSS code

B U I L D T H E T A B L E

We need to start with a simple table ofdata. In this example, we'll mark up a playlistof songs as our sample data. All of the

following code can be found on the cover CD.(X)HTML does contain several presentational

t a b l e e l e m e n t s a n d a t t r i b u t e s . T h e s e i n c l u d e

border, alignment attributes, cellpadding and

cellspacing. Most are deprecated - flagged forremoval - from future versions of (X)HTML.Instead of using these deprecated elementsthat tie the look of our table to its structure,we use CSS to change the look of our table.So the table we create will be simple, just usingstructural elements to mark up the informationa s r o w s a n d c o l u m n s .

< t a b l e > - — -I < t h e a d > I

I < t r > " 1<th scope="col">Song</th>< t h c o l " > A r t i s t < / t h >

I < t h c o l " > A l b u m < / t h >

I </tr></ thead> l

< t d > S e c o n d l n t e r m i s s i o n < / t d >

< t d > A n i D i F r a n c o < / t d >

< t d > E v o l v e < f t d >

< / t r >

< t r >

W s h < / t d >

< t d > A n i D i F r a n c o < / t d >

< t d > L i t t l e P l a s t i c C a s t l e < r t d >

< / t r >

< t r >

< t d > A n o t h e r P l a c e t o F a l l < / t d >

< t d > K T T u n s t a l l < f t d >

<td>Eye to the Telescope</td>< / t r >

< t r >

<td>Closil^Timp.r/tri^< t d > S e m i s o n i c < r t d >

Choos* a p lanA var iety of p lans to fit everyone'sneeds. You can cftange plans at anyt ime so there 's no wrong answer

m m m m o p q \ b a c k M B M i t - c o l o r : # f f f ;

<td>Feeling Strangely Fine</td>I < / t r >I < t r >i < t d > G e n e r a t i o n Y ? < / t d >I <td>Thea Gilmore</td>

</tr>< t r>

<td>lnstead Of Hf Saints</td>I < td>Thea G i lmo re< / t d>

<td>Burning Dorothy</td>< / t r >

</ tbody>I <ftable>

f c b l e . ^ i s t |: border: T solid #CFDCE&

hordpr-rollap^: no-COll^

color: #000;font: 0.8em Arial, Verdana, Helvetica, .

s a n s - s e r i f j j - ; : : ;

•This price table at www.basecamphq.com/signup.php highlights the most important options

The CSS for the table element adds a one-pixelsolid border. We've set the border-collapse

We start the table with an opening table tagw i t h n o a t t r i b u t e s . T h e n c o m e s t h e h e a d

section of the table with our table headings.This section can be placed inside <thead></thead> tags. We use the 'th' element to mark

up the header text. This helps screen readersto understand that these are table headingswith a specfic relationship to the rest of thetable. The attribute 'scope', with a value of

'col', explains the relationship between the 'th'element and the rest of the data; these arecolumn headers, so we use a scope of 'col'. If

you had headers down the left-hand side ofthe table to describe the rows, you could give avalue of 'row' to explain their role.

Close the 'thead' element and open 'tbody'.The main content of the table goes inside thiselement. After completing all of the rows ofthe table, close the 'tbody' and 'table' elementsand your table is complete. If you view it in

your browser at this point, you'll see thatit isn't very easy to read, and it doesn't have

any borders or visual styling to help you tor e a d t h e d a t a .

©STYLE THE TABLEWe can now use CSS to change the wayour table looks. The code can be in an existingstyle sheet or attached in a brand new one.Create a CSS rule for 'table.playlist' - thisapplies to any table with a class of 'playlist', sogo back to your table and add 'class="playlist'"to the opening <table> tag.

• & . -M l C e o U M - a f w n a -

Itets browMrt titpport chMi

TA« hop.//CSS0 ) n f o f m « ) o n * Q R M I M * © T o ® h ' t v i ^ S o u r t * '

1c1W i n d o w s

N e t s c a p e17 .1

M o H l t a1 .4

O p e r a7 . 1 1

M a c i n t o s h

IE 5.2 M u l l l a

1 . 4O p e r ae .o

S a t a n1 .0

S l m D l a t e t Y M Ye s Ye s Ye s Y e s Y e s Ye s Y e s Ye s Y e s

S h r m l fl l i a r l a u a n i b i t U M R Y M Ye s Ye s Ye s Y e s Y e s Ye s Y e s Ye s Ye s

Y e s Ye s Ye s Y m Y e s Y e s Y e s Y e s Ye s Ye s

U i lnq imMwfOfb t ffl t t Y M Ye s Ye s Ye s Y e s Y e s Y e s Y e s Y e s Ye s

b u t e t gY e s Ye s Y e s Ye s Y e s Y e s Y e s Y e s Ye s Y e s

jYes Ye s Ye s Y e s Y e s Y e s Ye s Ye s Y e s

E r i e M f t v a r g P a n a H a a Y « Ye s Y e s Ye s Y e s Y e s Y e e Ye s Y e s Y e s

R o l t a w l l M t M | v « Y e s Ye s Y e s Y e s Y e s Y e s Y e s Ye s

S S N O NO 1 Yes Ye s Y e s Y e s Y e s Ye s Y e s Y e s

A 1 ta t T f tpflhfl M i l m m Y e s Y e s Ye s Y e s Y e s Y e s Ye s Y e s Ye s

PrwttSgvtn'8 Ufrerysi m m y Y e s Ye s Y e s Y e s Y e s Y e s Y e s Ye s

B i r t c f B a t a t a ' s H « Ye s Ye s Y e s Ye s Y e s Y e s Y e s Ye s Yes , Ye s

V e r t c a l b m t o n s Ye s Ye s Y e s Y e s Y e s Y e s Y e s Y e s

Ye s Ye s Y e s Ye s Y e s Y e s Y e s Ye s Y e s Y e s

a i L i m fi o y m b h r t Ye s Ye s Y e s Ye s Y e s Y e s Y e s Ye s Y e s Ye s

□o u b l a b o f O a r ■ ijYes Y e s Y e s Y e s Y e s Y e s Ye s Ye s Ye s

CoDonocooona '8 Pcm Pad Us t Ye s Ye s Y e s Y e s Y e s Ye s Y e s Y e s

lEHACKtof-ErtcMav^s Ye s Ye s Y e s Y e s Y e s Y e s Y e s Ye s Y e s Ye s

property to 'no-collapse', because we wantspace between the table cells for this tabledesign. Give the table a background colour andtext colour, and set the font for the data withinthe tab le . We 've used ems to se t t he f on t : 1 em

is the default size of the text in your user'sbrowser, so 0.8 ems is going to give a slightlysmaller size than the default. Using ems meansthat the text will resize depending on the

settings your user has in their browser, whichmeans they can easily enlarge the text if it'st o o s m a l l f o r t h e m .

©THE HEADER SECTIONIf you apply styling to the 'th' element,the built-in style sheet of most browsers will

display it centred, and in bold to distinguish itfrom the rest of the table. We can use CSS,

however, to distinguish the headers in any waywe like. You could obviously use CSS to removet h e d i f f e r e n c e b e t w e e n t h e t a b l e h e a d e r s a n d

the main body of the table, but this might leadto confusion for anyone trying to understandt h e d a t a .

f c i t f e - i t i i i s t t h l z i l l . ; r r . ;

•The Listamatic site (http://csimaxdeslgn.com.au/l istamaticbrowser-support.htm) marksevery other row with a CSSclass to get a dark background

backaround-color: #507EA1jcolor: #fff^

I border-bottom: 11 solid #406480;I border-left: 11 solid #406480;i iWiiii: 0-,5An3A2emJ.5e^ m t

We've given the header a background colour,a n d a d d e d a d a r k e r b o t t o m a n d l e f t b o r d e r t o

give a slight 3D impression. We've also giventhe table header cell padding to make it larger,and set the text-align property to 'left' to alignt h e t e x t w i t h i n t h e c e l l .

As our table already has a class of 'playlist',we don't need to add anything else to the

. u i N G S P I E C I F I CUnless you only haveone table stylethroughout your site,make life easier bycreating specific styles,as we have here byaddressing the style to'table.playlist'.

— f ! n


Tutorial Design attractive data tables in CSS

E Hforeach($result as $row) {jtheclass = ($n++ % M ? 'evens':'

O Striped rows with dynamic dataUse your server-side scripts to calculate which rows in a table should be striped

If you have built your table using a server-sidescripting language such as PHP, you'll need to usethat scripting language to apply the class 'evens'to every other table row if you want to create thestriped tables effect. In PHP, this can be doneq u i t e s i m p l y . }

First you need to set a counter to 0 and thenstart a loop analysing your table rows. Inside the When the table is displayed in HTML, you willloop, check to see if each row number can be find that odd rows will have an empty classdivided by 2. If it can, then the variable 'Stheclass' attribute ('<tr class="">'), and even rows wills h o u l d b e s e t t o ' e v e n s ' ; o t h e r w i s e , s e t i t t o " . h a v e ' < t r c l a s s = " e v e n s " > ' .

! echo '<tr class="'. Stheclass.I //build the rest of t a b l e r o w h e r e

•If you create tables In PHP, you also need to use thelanguage to check which rows are odd and which areeven, so that you can apply the correct CSS class

e o o Ta b l e s f o r d a t a C D

)(Disable^ j Cookies" £^CSS' flPorms* i?>lmages* 0>nforma

Song A r t i s t A l b u m

S e c o n d I n t e r m i s s i o n A n i D i F r a n c o E v o l v e

Deep Dish A n i D i F r a n c o L i t t l e P l a s t i c C a s t l e

A n o t h e r P l a c e t o F a l l K T T u n s t a l l Eye to the Telesmpe

Closing Time S e m i s o n l c Feeling Strangely Fine

G e n e r a t i o n Y ? T h e a G i l m o r e The Lipstick Conspiracies

Instead Of My Saints T h e a G i l m o r e Burning Dorothy

D o n e

0 O O^Disable lAjCookies'

T a b l e s f o r d a t a O

£ l i C S S ' i j f ' I m a g e s ' © I n f o r r r i a t

A r t i s t

S e c o n dI n t e r m i s s i o n

A n i D i F r a n c o E v o l v e

Deep Dish A n i D i F r a n c o L i t t l e P l a s t i c C a s t l e

A n o t h e r R a c e t oF a l l

K T T u n s t a l l Eye to the Telescope

Closing Time S e m i s o n i c Feeling Strangely Fine

G e n e r a t i o n Y ?T h e aG i l m o r e

The LipstickConspiracies

Instead Of MyS a i n t s

1

T h e aG i l m o r e Burning Dorothy

•The first table stylethat we create for our

playlist uses lightcolours and a 3D effecton the headers

m — •^ Quick tipA L I G N M E N TTo align text withintable cells, you can usethe text-al ign propertyset to 'left', 'right' or'center'. To alignvertically within the cell,use ve/t icai-ai ign ' top'o r ' b o t t o m ' .

HTML table nnarkup to get these styles to take

effect, because the rule is addressing any 'th'element in a table with a class of 'playlist'. The

styles you create here won't change the look ofany other tables you might have on your site -only those that have a class of 'playlist'.

©THE TABLE BODYWith the table header styled, wecan turn our attention to the body of thetable, creating a rule that applies to all 'td'elements in tables with a class of 'playlist'.

t i i i b i e i i w i i s t ^ i \ ^

In the shorthand version, the order of thevalues starts at the top and moves aroundclockwise; top, right, bottom, left. You can usethe shorthand way of writing out values forthe margin on an element as well as padding.

©CREATING ALfERNATELYS T R I P E D R O W S

Your table should be starting to look a lot

nicer, with the data spaced out properly and anattractive header. One way to create distinctionbetween the rows without adding a border to

every cell or row is to create alternately stripedt a b l e r o w s .

•Using the same markup and changing the CSScode, we create a style using an image gradient

table headers. To make this rule function,

you need to apply the class 'evens' to the <tr>tag of every other row in the table. View thepage in a browser to see the completed, styledtable and check your HTML markup.

A D I F F E R E N T S T Y L E

i MddiM: 0^^ 0.2em_0.5em O.Jem;)

This rule gives the 'td' element the samepadding as the 'th' element. The shorthandformat is the equivalent of this longhand rule:

tablejlMlist td I ; _padding-top: O.Sem;patkfiltShrtBht: 0.2em;paddlrtg-bottom: O.Sem;pa«Wing-left: 0.2em;

HblejlMLst tr.eyens td fback round -co lo r :

i border-bottrmr solid #CCCCCC; |' b o r d e r - l e f t : T s o l i d # C C C C C C ; \

}

This rule addresses any 'td' inside a 'tr' elementthat has a class of 'evens', and that's withina table element that has a class of 'playlist'.

It simply adds a background colour to eachaffected table cell, plus a border to give a 3De f f e c t s i m i l a r t o t h e o n e w e c r e a t e d f o r t h e

One of the great things about CSS isthat you don't need to change your markup tochange the look of elements in your design. Ifyou had several tables in your site using thesame look and wanted to change them all,editing the style sheet would change the lookof every table without you needing to findand update each one individually.

We've added very little markup and fewc lasses t o ou r HTML tab le t o c rea te ou r l ook .

Using classes sparingly is a good aim. A lotof the time, when you choose to use a class,there's already an element in the markup youcan address to create the look you want, whichsaves adding superfluous markup to the table.

We can now create a completely differentlook for our table. Edit the class name applied


Tutorial Design attractive data tables in CSSo

to the opening table element to 'playlist2',then create a set of CSS rules for the newlyn a m e d s e l e c t o r t a b l e .

I border: T solid #737A80:' faorder-collaWli collaBllit

}

Here, we've given the table a one-pixel borderand also set the border-collapse property to

'collapse'. This collapses the borders betweencells, so if you add a one-pixel border to the'td' element, you won't end up with a two-pixel border where the 'table.playlist2' and' t d ' b o r d e r s m e e t .

®THE HEADING OF PLAYLIST2We can now style the headers for the

playlist2 class. For this table design, we aregoing to use an image in the background toapply a gradient effect to the header. You canuse background images in your tables, just asyou would in any other element. Careful useof images can create some really nice effects,

although overuse can make the data in thet a b l e s h a r d t o r e a d .

I t e ! e j « i s t 2 j ^ £I hnrrler- Ipa tnlirl #737A80;

background-color: #AAAAAA;background-image: url(playlist2-header.gif);background-repeat: repeat-x;background-position: bottom left;font: lem Georgia, "Times New Roman"Times, serif:

0 . 2 e m ;

f color: #f^

First, we give the 'th' element the same bordercolour as the main table, and a backgroundcolour of #AAAAAA (a midtone grey). Theborder that we apply to the main table in eachof these examples will simply wrap a bordera r o u n d t h e o u t s i d e o f t h e t a b l e . I t w i l l n o t

create borders around the table heading ordata cells (you need to add these borders when

you style the cells).We can then add our background image.

This is a four-pixel-wide image with a gradient

applied, which we want to tile over thee n t i r e a r e a o f t h e ' t h ' e l e m e n t . To c a u s e t h e

image to tile, you set 'background-repeat' torepeat along the x coordinate and position itb o t t o m - l e f t .

Finally, we set the font to a large serif style,add some padding and set the colour to white('#fff'), so that we can see the text on top ofthe gradient background.

tTHE TD ELEMENTMoving to the table data cells

themselves, we're going to keep these quitesimple. We've created a fancy heading style,and we don't want the design fighting itself.

H Ie.'pfaylistJ td {I font: 0.9em Aria! Verdana, sans-seritT"

padding: 0.2em;! border: 11 solid #737A80;

We ' v e m a d e t h e f o n t s a n s - s e r i f a n d s e t i t a t a

smaller size than the headings, then given thecell some padding. We've also added the sameb o r d e r u s e d f o r t h e m a i n ' t a b l e ' a n d ' t h '

e l e m e n t s . T h i s m e a n s t h a t t h e t a b l e a n d e a c h

cell will have a uniform one-pixel border.

T A B L E R O W S

Finally for this new table design, wecan style the table rows. In the previous table,w e n e e d e d t o a d d r e s s t h e ' t d ' e l e m e n t s w i t h i n

the table rows when creating our striped tableeffect. This was because we wanted to keepthe spacing between our cells white. This time,we have no spacing between the cells, so wecan simply add the background colour to the' t r ' e l e m e n t .

ist2 tr (MirtaroTrnd-color:"#EFEFEF;

&blejliliiist2 tr.ei: backaround-color: #CECECE,*

The first rule styles all 'tr' elements, givingthem a background colour of #EFEFEF - a verylight grey. If you view the table now, all rowsapart from the header (which has a morespecific style applied to the 'th' elementsthemselves) will be that light grey.

T h e s e c o n d r u l e a d d r e s s e s t h e r o w s t h a t

have a class of 'evens' applied to the 'tr'element, making them a slightly darker greyand creating our striped table effect. Itoverrides our light grey rule in those cells.

Save your files and view your work in abrowser. To change between the two differenttable styles that we've created, just change theclass name applied to the 'table' element in

your HTML between 'playlist' and 'playlist2'.The two table styles we created should give

you an understanding of how to style tables,and you can now create attractive table stylesthat fit into your own sites.

^ Quick tipC O L O R S C H E M E DIf you're having troubleselecting colours foryour tables, the ColorSchemer tool at http;//wellstyled.com/tools/c o l o r s c h e m e 2 / j n d e x -

en.html is really useful,helping you to pickcomplementary andcontrasting colours.

O CSS shorthand rulesSave typing and use the connpact way to define CSS values

During the main tutorial, we've looked brieflyat the use of shorthand formats to specifypadding in a table cell. There are several CSSproperties that may be written in a shorthandway, which can help to trim down your stylesheets and save you some typing!

Padding and margin can be written longhand,writing out the values for margin or paddingtop, right, bottom and left as separateproperties and values. Alternatively, you canwrite these out in a single property;

t d {■in: 0.2em 0.4em 0.2em 0.4em;

}

These rules are written out in the order top,right, bottom, left - clockwise from the top. Ifyou want all four to have the same value, youcan simply use;

maM'n: 0.2emi.}

There are other properties that can be combinedin a shorthand manner. When specifying a font,for example, you would normally write:

body {r font-famUr verdana. ariel, Helvetica, sans-serifj ~~|I f o n t - s i z e : 0 . 9 e m ; )

line-helBht: 1.6em:}

Alternatively, you could use:

body{■ ' font: 0.9em/1.6em verdana, ariel, Helvetica,

■ i : s a n s - s e r i f ; ■& . ■■■

s t y t e & . C M

1 rF<>™«T*T S iO

i '

b o . ^ {f o n t : • . 9 e i ^ . 6 e i v e rd a n o , o r i e l , h e l v e t i c a , » $ - $ e K f ;p o k t i r q : » . $ «■ 9 , 2 m t . S a i

}

• Keep your CSS code trim with shorthand definitions

This only works if you're going to specify boththe font size and the font style, otherwise youwill need to use the longhand rules. You can alsoadd the values for font-weight, font-variant andfont-style to this rule:

body {font: 0.9em/1.6em bold italic smai verdana, ariel i

sans^serifj}

If you don't specify the line-height, font-weight,font-variant and font-style values, they willdefault to normal. Once again, there are noc o m m a s b e t w e e n t h e d i f f e r e n t v a l u e s .


Tutorial Design attractive data tables in CSS

C Add a hover effectMake your table more interactive with automatic highlighting

M o r e i n f oAnother approach to

creating striped tablerows is to apply thestripes using JavaScript.It's useful for existingsites, because you don'tn e e d t o a d d t h e c l a s s t o

every second row. Learnthe JavaScript techniqueat www.a l l s tapar t . com/a r t i c l e s / z e b r a t a b l e s

One way to enahnce a table style is toi n t r o d u c e a h o v e r e f f e c t o n t h e t a b l e r o w s :

when the user is moving across the table withtheir mouse pointer, the current row they areon will change colour. This is something that

you frequently see in interface cJesign -perhaps when the table is part of a form andyou have to click checkboxes within a table cellto indicate which items in the table you wishto work with. Highlighting the current rowthat the user is on helps them to see where

they are in the data, especially if the table islarge or complex, and so adds an additionallevel of usability

H O V E R I N M O Z I L L A

Creating a hover effect on a table rowwould be a really simple thing to do if we onlyh a d t o c o n c e r n o u r s e l v e s w i t h M o z i l l a - b a s e d

browsers, such as Firefox. They support the'rhover' dynamic pseudo-class on elementsother than links, but Internet Explorer 6

supports this rule only on links. We will firstfi n d o u t h o w t o c r e a t e t h i s e f f e c t i n a l l t h e

browsers that support ':hover' on other

elements, then will move on to a method thatwill enable you to support this effect inInternet Explorer 6 as well.

To get your row hover effect in the newer

browsers, add the following to your style sheet:

ilblejafartist2 tr:hover I' background-color:

['color: #FFFFFF:

©HOVER IN INTERNET EXPLORERSave the code and reload your page ina M o z i l l a - b a s e d b r o w s e r . Yo u s h o u l d n o w s e e

the rows changing colour as you move yourmouse pointer over the table.

To get this to work in Internet Explorer, wewill need to use a bit of JavaScript. There area few ways to do this, but the method we're

using here is a simple approach. First, edit theCSS rule so that i t looks l ike this:

table.playlist2 trihover, table.p1aylist2Tt^ite {i b a c k r o u n d - c o i o r : # A A A A A A ; ji c o l o r : # F F F F F F ; I}

©CREATE A JAVASCRIPT HOVERAfter the table in your HTMLdocument, add the following JavaScript code:

«K)rij«1WJ«!«ft«StiS«V#script"> ^I var rows = document.getElementsByTagName

b t i

© O © Ta b l e s f o r d a t a CZ>

^Disable* j^Cookies'' ^CSS* j^Forms' ii^lmages' Oinformati

Song A r t i s t A l b u m

S e c o n dI n t e r m i s s i o n

A n ! D i F r a n c o E v o l v e:>

Deep Dish A n i D i F r a n c o Li t t le Plast ic Cast le

A n o t h e r P l a c e t oF a l l

K T Tu n s t a l l Eye to the Telescope

Closing Time S e m i s o n i c Feeling Strangely Fine

G e n e r a t i o n Y ?T h e aG i l m o r e

The LipstickConspiracies

Instead Of MyS a i n t s

T h e a

G i l m o r e Burning Dorothy

D o n e

• Because pages that use CSS layouts tend to have simple underlying structures, it's often straightforwardto rework them in mere minutes without having to touch your HTML code

rowspl.onmouseover = functionQ {this.className += ' hilite';

} ~rawiflonmouseout = functionBi

this.className = this.className.replace

fhilite', 1}

EEm

for(var i = 0; i < royys.||n8M( i++) { ,

If you save your page and then view it inInternet Explorer 6, you should find that yourtable row highlighting works in that browseras wel l as F i re fox.

The script works by finding all of the 'tr'elements in your table and responding to themouse cursor. When you mouse over a row, the'onmouseover' dynamically applies the class'hilite', and when you move the mouse pointeragain, the 'onmouseout' function removes theclass, or rather replaces the class with no class.

This is an example of using JavaScript to

plug the holes in browser support for CSS. Themost important job, however, is to make yourtable usable without the highlighting. Thatway, it doesn't matter to your users if theydon't get the highlighting effect, which willstill be the case if they have JavaScript turnedoff in Internet Explorer 6.

You could change any design feature of thetable rows when using this type of effect.

though it's generally not a good idea tochange elements such as font size or padding.This will cause the table to appear to jigglearound as the user runs their mouse over it,which isn't a very pleasant effect. Other waysin which you could use this technique on atable would be to higWight Individual cells by

switching the ':hover' class to apply to a 'td'element instead of 'tr'. In the JavaScript code,

you would also need to change the 'tr'r e f e r e n c e i n t h e s e c o n d l i n e t o ' t d ' .

You could also change the JavaScript codeto activate 'onclick' - for example, when a userclicks into a form field in a table row, you could

highlight the row that is being completed.There are lots of subtle ways in which carefulusage of JavaScript, along with CSS, can reallyenhance your users' experience of your site.Just always make sure first that the sitefac i l i t i es a re s t i l l usab le i f t he use r doesn ' t have

JavaScript turned on. O

One way toenhance a table

is to introducea hover effect

w


ON SALE NOWCOMPUTER ARTS 125VISIT WWW.COMPUTERARTS.CO.UK ORCALL +44 (0)870 837 4722 TO ORDER YOUR COPY

TUTORIAL; PHPSell from your site with Zer Cart

D e t a i l sIntermediate

c s i i n m a H iZen Cart 1.3

R E S O U R C E SZ e n C a r t

On Zen Cart's homepage,you'll find documentation,templates, examples andthe latest patches.w w w . z e n - c a r t . c o i n

PayPalZen Cart works with aPayPal merchant account,which is no more difficultto set up than a standardpersonal account,www.paypal.com

Gallery 2Integrate older versionsof Zen Cart with popularonline image albumGallery 2,http://codex.gallery2.org/index.php/Gallery2;Modules:z e n c a r t

The full version ofZen Cart 1.3 is includedon the CD this issue

M y A c c o u n t

S m e l l yS t u f f k

B a t h t i m e

H o m e S e a r c h

B a t h t i m e - >

A l l P r o d u c t s . . .

There are currently noproduct reviews,

I n f o r m a t i o n

shipping & ReturnsPrivacy NoticeC o n d i t i o n s o f U s eC o n t a c t U sSite MapGift Certificate FAQDiscount CouponsN e v \ / s l e t t e rU n s u b s c r i b e

Hello Karl! Would you like to see our newesta d d i t i o n s ?

Only the best in smelly stuff...

If you're looking for:

. Cabbage scented soap

. C h e e s e fl a v o u r e d d e o d o r a n t

. Donkey dropping face packs

. C r e o s o t e m o l s t u r l s e r

. Chocolate curling tongs. T b A r n , K n > i I c a w i o i f . o l l ,

I Enter search keywords hSearch |

A d v a n c e d S e a r c h

H a v e y o u s e e n

z e n c a r tth0 Oft of

L a n g u a g e s

C u r r e n c i e s

•Even if you're selling stuff thatstinks, Zen Cart is the answerSell from your

site with Zen CartKarl Hodge shows you how to create a PHP-powered shopping cart withopen source econnnnerce application Zen Cart 1.3

Oen Cart 1.3 helps you build aPHP-powered website, with allthe features you'd expect froma commercial online shopping

system. It has brochure-style features thatenable you to create a database of products,complete with full descriptions. In turn,those products and categories can be furtherarranged into genre or product types.

Zen Cart doesn't skimp on functionality justbecause it's free: there are featured products,a news system, inventory systems and a built-insearch engine. You can change the look ofyour site easily by using commercial templates,or by editing the CSS files they're shipped with.You can even give your site a full makeoverand build your own template in your favouriteauthoring program.

Of course, no shopping cart is completewithout payment options, and Zen Cart doesn'tskimp here either. You can opt to connect yourZen Cart to PayPal, or configure the credit cardprocessing features to work with just aboutany merchant system.

With such a sophisticated script, it'sunderstandable that there's a quite a list of

requirements to get everything functioningcorrectly. It runs on most webservers and theirplatforms, from IIS on Windows to Apache onLinux or Mac. Whether you're installing it

locally to test the system or building a site on aremote server, you'll also need PHP and MySQL

support. Zen Cart works with PHP 4.1 or later

U l

You need topay attentionto the security

suggestionsand MySQL 3.2 or later. If your host is runningMySQL 5, you may get a recognition warningduring installation, but don't worry; thesoftware should still work. However, if you canswitch to an earlier version of MySQL, we

suggest you do so.Zen Cart doesn't create a new database, so

you'll need to make one in MySQL before youstart. On most hosting systems, this is usually a

case of clicking a couple of buttons on yourcontrol panel. Make sure you take note of theusername, password and database name, as

you'll need them during the installation.Another system requirement point of order:

Zen Cart can be run on a secure server usingSSL. This will encrypt data about transactions,

giving your customers (and yourself) an extralayer of security. To use this option, you'll needt o h a v e t h e C U R L P H P m o d u l e t h a t ' s i n s t a l l e d

t o m a k e s e c u r e c o n n e c t i o n s v i a H T T P S . D o n ' t

worry if you don't have this, though. You don'tactually process payments with Zen, so it'sentirely optional. You do, however, need topay attention to the security suggestions thedevelopers make. Reset write permissions att h e e n d o f i n s t a l l a t i o n a n d r e m o v e t h e d e f a u l t

install directory.In our walkthrough, we'll take you from

installation to a working shopping cart. Whenthe software is safely installed, we'll addproducts to the database and customise thelayout, formatting the appearance of yourpages. No one need ever know that you'reusing free software to launch your ecommerceempire. Now let's take a look at the features...


Favorkes Toots Help

t j ^ Search Folders j

a O i J a O uJ alasEi c a c h e d o c s d o w n l o a d e m a l ex t ras h b n l a r e a

uJ uJ CI LJ 0I m a g e s Inc ludes m e d b p u b zc.hstal hdex.php l n s t a l . b ; t

0 41ipnjnain.h,,. l c e n s e . t x t n d ± i c , h b n J page jwtJ . . .

Itctftbk- i4l Codaw' a CSS- Fermr- £ 1: d < 3 ' " i a

^ f ^ O J U n r □ t o g * ' ( t j

S e t P e r m i s s i o n s o n f o l d e r s

Now, ctiange the permissions on the following drectodes to 777 (read/wnte/execute).

s /etigXlsb/htad^ lacludea

/ c a t a O o q / e a c b e/ c m t a I o g / i M 9 « c/ c a t « l o 9 / l M ; l < i d » « / J. • ' = « t a J j > g / « c d l »/ c * t * l o g / j > u b

t : / c a t « X o g / * d B x e i / b « c - k u p >

j{ /eataXe>g/«chKls/'>Mi9e9/9rttpb9V Note: open the catalog/images directory and change all of the siJt>dlrectortes and their subdlrectohes

to 777 as well. For example (this Is a partial list):/ c a t a l o g / i a i ^ j e a / ^ e t c l b w t e #

!■ / c a e f t l ^ / i M g e s / ^ t v d* ' /catalog/uMêB/ lmc^■' -atiOogîaagfeB/Jarê/civd

n/c at alog/iMes/Mdiw/ c a t a X o q / m o g e a / w p l o a d

/iwages and try to useji NOTE: If you miss any of the Images directories and subdlrectorKi: them later, you will get an error message that you cannot write to these drectones.

As for other folders and flies, they can be CHMOD 644, or 444, depending on your webserverconftguratton.

B e f o r e R u n n i n g t h e I n s t a i l e

E X T R A C T F I L E Sstart by moving the Zen Cart ZIP file to your hard drive from the CD andextract all the files. It's a good idea to rename the main folder (the one

containing the application scripts) to 'zen'. Upload this folder and its contents to yourwebserver using Windows' built-in FTP client.

0 SETTING FILE PERMISSIONSThe Zen Cart script needs write access to your server. The file 'l.readmeînstallation.html' in /zen/docs/ sets out a full list of the files and folders you'l

need to amend in the section 'Set Permissions on Folders'. Study it carefully to makesure you identify the right ones.

I

J F

j H

T y p e : F A e P o l d e rL o c a b o n ; ^ / p o b X c j T t m i y

Modified; 06 Mwch 2006, 15;59

P e r m i s s t o n s : R e a d W r i t e E x e c u t e

O w r w B B

Group B B B

A l U s e r s B B B

j M&<m //19Z. I6e.:.4/»n»didw/

R m m t M s f c a m

M o v a t l t t t m

Q Copvthktm

Q MyDoonants

^ MyltabwrfcPUct;

uJ U u f i J a O o o a ad e s s e s e * t r a _ c a r t „ . axtre_ca#l... axtra.data,.. h M b m M e x j f t e r s M t j n d u d a s l a n ^ j a g a i m x U a t

a i i i k k k ktemtriatas WPluban. . , VPkabon... autolMdJ... ctiinter.ptv <l«UbaseJ.,.j | Jton«nM.[<p fan»_(tied...

0«ienl.)s l r ) d a x , h t i d i M l n . c a r t . . , ,

0sptd*rs.bt

0 FINDING FOLDER PROPERTIESTo change the permissions on remote folders and files using Windows FTP,right-click on the target in Network Places and choose Properties. You'll see

a grid with three columns and three rows: tick all the boxes to set permissions to'777'. This allows read, write and execute access for that folder to all users.

RENAMING CONFIGURATION F ILESLocate the file '/zen/includes/dist-configure.php' on your remote server.Right-click and choose Rename from the menu, then rename the file to

'contribute.php'. Set permissions for the file to '777' (as you did earlier). Find the file'/zen/admin/includes/dist-configure.php' - rename and set permissions.

Welcome To Zen Cart ' " - The Art of E-Commerce

m Cart" truly is the art of a-eammaica; « frea, usar-fhandly, open sourceshopping cart system. Tha software is bair>g developed l»v group of like-mmded

shop owners, programmers, designers, endJ be, and should be, done Afterenttv.

Simderty, other programs are nearly impossible tc

and shoppers

j s e w i t h o u t a n I T

Copyr*!^ 0 2003-2006 ?an Cart""

START THE INSTALLERMly When you've finished with the configurationfiles, you're ready to steam ahead withconfiguring your shopping cart. Open your web browserand go to 'http://[yourdomain]/zen/zc_install/index.php',or simply go to 'http://[yourdomain]/zen/' instead. Youshould be confronted by the generic Zen Cart welcomepage for the installer.

; Zen Cart™ Setup - System Inspection

Take a moment to check whether you webserver supports the features required for Zen Ca-t**" tooperate. Ptease resolve any errors or waminQs before conthung. Then dck on to continue,- System lr>spectint RestJts

Webserver - Apache/2,2.0 (Win32) DAV/2 mod_sst/2,2.0 OpenSSL/0.9.8amod_autoindex color PHP/5,1,2

H T T P H o s t - 1 9 2 , 1 6 8 . 2 . 4

Path_TransUted - C:/Program Fles/WebOev/xampp/ht±cs/ien/zc_instal/inde*,p (SCRIPT_FIL0WiNC)PHP 0/S - WINNTPHP API Mode - apache2handterPHP Max Execution Time per page « 60

^ Register Oobak - OFf^ MySQL Support - ONCD MySQl Vemon^ PHP Version-5,1,2^ PHP Safe Mode - OFF^ PHP openâêdir restrictions -

CBck here for more irrf

jyK SERVER SYSTEM SETTINGSlliy Accept Zen Cart's terms and conditions to proceed to the next page,which will examine your system. Any problems will be highlighted with anexclamation mark. These are generally associated with PHP modules that Zen Cartuses. Any problems will have a link next to them that says "click for more info".

uMt need to directlyedit a couple of PHP filest o r e m o v e t h e " S a l e s

Message Here" and"Cong ra tu l a t i ons ! Youhave successfullyinstalled..." messages.Y o u ' l l fi n d t h e m a t V z e n /

Includes/languages/englishydassic/header.php' and 7zen/includes/languages/english/index.php' respectively.


Tutorial Sell from your site with Zen Cart

;; Zen Cart™ Setii(5 - System Setup

We yJ now setup the Zen Carf*" System environment. Please carefuly review each settmo, and chaigeIf necessary to suit your drectory layout. Thendck on Ssva System Settings to axttlnje,

- Server Settings

Physical PathPhysical Path to yourZen Cart directory,Leave no trailing slash, more Info...

V i r t u a l H T T P P a t h

Virtual Path to yourZen Cart drectory.Leave no traing slash, more info...

V i r t u a l H T T P 8 S e r v e r

Virtual server for yoursecure Zen Cart directory.

jiWfi na vana itetii iwmi titBi.i

ICôgrom Files/vVeb Dev/yampp/htdow/zen

|h«p;//192.166.2.4/!en

|h«ps://n92.168.2.'l

R U N T H E I N S T A L L E RClick 'Install' to continue. On the next page, the installation paths for yourset-up should have been automatically filled in, but check carefully that

they're right. Only enable SSL if your PHP installation supports it through theOpenSSL and CURL PHP modules. Click 'Save System Settings' to go to the next page.

This section of the Zai Cart"" setup tool wH help you begin setting up your basic store setthgs. You wlbe able to change any of these settings later using the administration tod. Enter each value carefJyand press Sive Store Settivf^ continue,

" * S t o r e I n f o r m a t i o r ^

What is the name of your Zen Cart store? more Info... jSpodgod's Smelly Stuff

r of your Zen Cart store? more Info... ISpodgodS t o r e O s i m e r

W h o l s t h e o v fl i

S t o r e O w n e r E m a i l

What Is the Zen Cart store owners email address? moreI n f o . . .

Store CountryWhat country is your Zen Cart storelocated in? more Info...

|bieh®mQdeupaddressliere.com

j United Kingdom H

©ADD YOUR DETAILSWe're entering the home straight now. Add your details to the final form,giving the name of your shop, your own name and email details. Choose

'United Kingdom' from the Store Country menu, but ignore the menu that asks youto select a region (we'll do this later). Similarly, ignore the Currency menu for now.

m — '^ Quick tipCURRENCY ISSUESDuring the configurationstage, Zen Cart offersonly dollars or eurosas currency options. Ifyou w/ant to set yourcurrency to sterling,go to Locali2ation>C u r r e n c i e s i n t h e A d m i n

s e c t i o n . C l i c k ' n e w

currency' and enter'Sterling' as the titleand 'GBP' as the code.You can get the currentd o l l a r v a l u e o f t h e

pound fromw w w . x e . c o m

R L c —

i l U *

1

P A R TT W O

A D D I N GC O N T E N T

CHANGE THE FRONT PAGEf|¥B To edit the default content within the cart's

pages, start by defining an HTML editor in theConfiguration section. Go to Configuration>My Storeand select HTMLAREA as your HTML editor. If you'resawy, and used to using a different server-side editor(such as FCKeditor, for example), you can install andc h o o s e t h a t i n s t e a d .

c ar t^f r - c e m m e r e t

;; Zen Cart™ Setup - Database Setup

Next Viê need to know some Information on your database settings. Please carefuly enter each settingh ttv appropriate box and press Sstê Dstibase Settings to continue.'

I MySQL *1Database TypeChoose the database type to be ised. more Info...

S t o r e I d e n t i fi e r ( T a b l e - P r e fi K ) ,What is the prefix you would ice used for database tables? Example: un_ iLeave empty If no prefb( is needed.You can use prefixes to alow more than one store to share the same database, more Info...

D a t a b a s e H o s t

W h a t i s t h e d a t a b ? The database host can be m the form of a jlocalhoslhost name, such as 'dbl.myservw.com', or as an IP-address, such as '192.168.0.1'. more Info...

D a t a b a s e U s e r n a m e -

What Is the usemame used to connect to the database? An example root

0 POPULATE YOUR DATABASESkip the next page by clicking 'Save phpBB Settings' and go to DatabaseSetup. Here, you'll enter the database, host and user names for the database

you created on your webserver. Don't install the demo data, as we'll add our own.The installer will connect to your database and write the table structure for your cart.

; Zm Ca r t ' " Se lu |D F i n i shed

CofTgratulatior«!You have successfulv Instaled Zen Cart'*' on your system!

N E X T S T E P S

For secunty, you wi need to reset your configureîhp fles located m tfie /admln/includes/ and/Includes/ folders bade to read^vily mode before alowing people to access you store,

AddKlonaly, youl want to remove or rename the /zc_lnstal folder so that someone cant re-mstal yourshop again and wipe out your database! Warnings wl appear until the folder has been removed arenimed,

C O N F I G U R A T I O N

We encourage you to begin by readbig the FAQ's In our online support forums for usefiJinformaticn to assist with conftguring arvl customizkng your orine shop the way you wish It to look andoperate,If you have qjestlons, this is the first place to look! If you're sturrcied, feel free to post a questioni Wehave a helpful, friendly, knowledgeable community who welcomes you.

Y O U ' R E T H E B O S S■ ly Before you can start adding stuff to your cart, you'll need to set up anAdministrator. Enter a name, password and email address and then save the

settings. You'll be taken to a final page with some important security information, andlinks to both your (empty) shopping cart and the administration section.

D E F t N E P a g e s E O f T O R F O R I t N G t l S H fseiSTfleinSr" 3 TEXT Editor | HTMLm jfe|r a n t t e m p t a t o o v e r H d a d i r e c t o r y. E

- - t a n o gf t e7 m

Mn P»gt Sanqila Uxk ..

Iht Mcboo of tot It fr«m the De&e P«ge« Editor located uoder Tools n Ifae A<ltxiia.

To remove liu lectoo c^the test, delete it from the De&ie ?4ge« Edttor

Hu fie IS loctfedn /laoguaocv/anallah/htal^lacludas/clMSlc/

NOTE; Ahnys barknp tha filat ini « « W f f a a / a n « l i a h / h t a l _ l n o l w l a a / r o a r _ t t a v X a t e

L J L J L c w i ^

0 CHOOSE THE RIGHT FILEGo to Tools>Define Pages Editor. From the menu, select 'define_main_page.php'. You should see the content of the file appear in the editor. You may get

a message telling you that you need to set permissions to '777' on the file to edit it. Goto your remote server in Network Places and change permissions on the file listed.


Tutorial Sell from your site with Zen Cart

A a 7 i i « « . « • i ®~ « » a n < > g ? 0 3

Only the best In smelly stuff...ir you're looking for;

« Cabbage scented soap|« Cheese f lavoured deodorant• Donkey dropping tace packs• Creosote motsturlser• Chocolate curling tongs

Then you come to the wrong place • we only sell the very best herel

None of the Spodgod's Smelly Stuff is tested on children or vegetattes

0 WHAT YOU SEE...The HTMLAREA editor works like a word processor. You can format text usingthe icons along the top of the document windows. These are translated into

HTML and written to the PHP file when you click Save. You'll need to edit the 'index,php' file manually to remove the remaining text.

CATtGowes / Products - Top

T.ME4IM. iHTMLaM^CM*«MMi/Pf»4i>ctDi*H*vOr4Mi |C4lagaaMSatOKt(i,Cil«)ainN«M J

I

I ' - J S a t h t M i e

I

Q M M t t t y U s t w f S w t0 o f 0 • c » i * e 0 0

" 2

o o S i

T S e n c a r t

E - C M M M f n E K t b M c * » v r t « l > t « 2 0 0 3 Z e n C e r t ~

0 DESCRIBING NEW CATEGORIESBelow the Category name box, you'll find a Description box, which allows youto enter HTML-formatted content, including links and images. For now, we'll

just type in 'Soaps, bath gel and bath oils' just to get the ball rolling. You can alsoupload an image to represent the category if you wish. Click Save when you're done.

©CREATING NEW PRODUCTSWhen you've finished, click on the new category. At this point, you can createas many new categories within the first as you need, and make categories

within them if necessary, as you can see in our screenshot. For now, we'll add our firstproduct by selecting a subcategory and clicking the 'New Product' button.

. x l h s i f l J i i ^ g s " . «■ i & j t e

ADDING NEW CATEGORIESTo populate your cart's database with products, you should define categoriesand subcategories to list them under, then add the products themselves. Go to

Catalog>Categories/Products and click the New Category button. Type in CategoryName 'Bathtime' (you can change this later).

O Create a templateHow to design your own custom templates for an easier life

To create a new template, go to your remote server and find the folder '/zen/includes/templates/'. Create a new folder inside called 'custom', then a folder insidethat called 'images'.

You'll need to copy some files to your new 'custom' folder. Open the original Zenarchive file on your local machine. Copy the folder 'ess' and its contents from '/zen/includes/templates/template_defaults/' to the 'custom' folder on your web host.

In the same way, copy over the file 'template^info.php' to the custom folder.You'll need to edit this file in a text or script editor so that the line '$template_name= 'Default Theme" now reads '$template_name = 'Custom Theme". To start usingthe new template, go to Admin in Zen Cart and go to Tools>Template Selection.

Choose Custom Theme from the available options. To change the look of thisnew theme, edit the CSS file that you placed in the folder '/zen/includes/templates/custom/css/stylesheet.css'.

• Because Zen Cart templates are simple CSS layouts, you're not stuck with default layouts


P r o d u c t i n C a t s c o r v : ' B a t h t i m f > C m a R o p e "

P r o d u c t M a t t e r

C a H e a r r :10# 7 On a Rope

NOTE: Na<t«r Category i< u*ed for pr ic ing purposef where Wieproduct ca tegory a f fec t * the pr ic ing on Un i ted products , eMampte: Sa les

P r o d u c t * S t a t u e ^ I n S t o c * f Out of Stock

D a t e A v a i l a b l e :

( * v v y - M M - D W [2006'06-16 ■P r o d u c t s M a n u f a c t u r e r :

B B K — —

P r o d u c t • * F r e e :

n S j F V m M y

Y e s ^

P r o d u c t i s C e M f o r P r « c e r Y o s N o

Product Priced bTA t t n b u t o s :

r » .

T a x C l a s s : l-nona- . l iP r o d u c t s P r i c e lis,Products Price (Gross): 1 "

P r o d u c t » V i r t u a l :^ Yes, Skip Shipping Address No, Shipping Address

Required

F I L L I N T H E F O R MThe New Product form is complex, reflecting the variety of purchase optionsthat are available, the need to track inventory, and so on. Worl< your way

through the form, adding an example product and leaving the taxation option setto 'none'. You can preview how the product page will look before you save it.

M o r e i n f oZ E N C A R T F O R U M ST h e b u n d l e d

documen ta t i on , f oundin the 'Docs' folder ofthe installation, is fairlycomprehensive. For thereally tricky stuff, turnt o t h e Z e n C a r t

community. You'll findlots of helpful stuff inZen's forums - frombeginners' tutorials tomore advanced hacks:w w w . z e n - c a r t . c o m /

m o d u l e s / i p b /

P A R TT H R E E

C U S T O M I S EY O U R C A R T Vou have soccessfuUy

lied your Zen Cart'*' E-Conwtierce

; S h t p p t n g 6 fi a t u m s

; Pnv»cy Nobca; c o f t d * i o n « o f u s t

> C o n t « t U «

[Sim MapicACvroriCMeFAQ: O t s c o u n t C o u p o n s

; N « w s l M » r

>8O!4

Only the best In smelly stuff...

iryoi/ra looking for:

. Csbbsg* sc«nt*d soap> C h t e s * f l a v o u r « d d f t o d o r a n t. Oonkty dropping Tbc* packs. C r s o s o t * m o l s t u r l s a r. Ctioeolat* curling tongs

Then you cam* to tha wrong piaca • wa only sailtha vary bast harai n = r - a

" z e n c a r ttka wt vf

St<ON U<iV*d«4«ct

CATccoRies / Products - Batktime

M « u 0 * { I A « 4 I

«C3 Edible«DN«v«lty7 C ) o « a l U M

O o f O M b v *

0 e < 0 « e b v «

" z e n c a r t

E ' C * i » i n * r c < E i t l l o * * 2 0 0 $ Z * l >

P O S T P R O D U C T I O N E D I T I N GCategories and products can be edited, deleted or moved (to a new category)by clicking on the 'e', 'x' or'm' icons in the Action column of the Categories/

Products section of the cart's Catalog page. You can also disable a category or producttemporarily by clicking the green Status icon in the Status column.

ADD A NEW LOGO(MlB The default logo image that says 'Powered by

Zen Cart' can easily be replaced by going to'/includes/templatesftemplate_default/images/' andswitching 'logo.gif with your own image. Make sure youback up the original file before replacing it, and thenrefresh your cart to see the result.

nl Jtasjn ™»;r

QPA l '

S M

£ M

A

• H a i Q C S S S t y l e s h e e t

' 8 p « c k a 9 e t e a p l a t e S ; s c e »

▶ gcopyt ight Copyright 2003-2005 Zen C«t De7eiop*ent' 6copYti9bt Potcions Copyzighc 2003 osCcmierce» S i i c e n s e h t t p : / / w n r. 2 e n - c a t t . c o » / l l c e n s e / 2 _ 0 . t x t G N V^ 07et:s ioQ $Id: scylesbeet.css 3215 2006-03-20 06:0S:5

■ ^ I f O H !i d

. . . . . .

w w m' ^ c s s

"ess Styles[current

No CSS properties onily to tiw current selection. Pleaseselect 4 styW element to see Mhch CSS properties apply.

* r (M i g l n : 0 :

« o n t - C a » i l y : v e r d a n e , a r i a i , h e l v e t i c a , a a n a - a e c i C ;f o n t - a l s e : 6 2 . 5 % ;

c o l o c : # 0 0 0 0 0 0 ;

>

a l a g ( b o c d e c ; n o n e ; )

a : l i n k , f n a v G Z P a g e s T O C u l l i tc o l o r ; i 3 3 0 0 r r ;

t e x t - d e c o c a t i o n : n o n e ;

|a:visited {c o l o c : I 3 3 0 0 n - ;t a x t - d e c o c a t l o o : n o n e ;

No property Is currentf^ selected above.

» r e t e M i w r e r ' M T-

TSfSl

c « A xf o n t - f a f n l y, Font-SBef M r g i n

_ #000000Verdana, artal, helvetica, sans-serif6 2 . 5 %

0 CHANGE CSS STYLESAll the cart's layout and formatting is stored in the custom template's stylesheet. To change the look of this new theme, we can edit the default CSS file

bundled with Zen in '/zen/includes/templates/template_default/css/stylesheet.css'. Openit in any code or text editor and change colour and text values, but back it up first!

Senca r tI the qft of ««commefc«

TagLine Here

Congra^lations! You have successfully installedyour Zen Cart^ E-Commerce Solution.Hello Karl! Would you like to see our newest

; a d d i t i o n s ?

Thi* tacUon of text it from the Define Page* Editor located under Toolf In

a t h i s s e c t i o n o f t h e t e x t , d e l a t e i t f r o m t h a D e fi n e P a g e s E d i t o r .

Shipping (i ReturnsPrivacy NoticeConditions of UseC o n t a c t U sS i t e M a pGift Certificate FAQDiscount CouponsN e w s l e t t e r U n s u b s c r i b e

I Page 2i P a g e 31 Page 4

N E W T E M P L A T E SBecause Zen Cart is template-based, you can make quite extensive changes tothe appearance of the cart without changing the core code. Alternatively, you

can download and install custom templates to change the look of your shop. You'll finda selection to get you started at http://snipurl.com/zentemplates.

fzencart |ChacKtoUpda»»l

m mC O I . U M N B o x e s c l a s s i c

aeKB* Path: C:/Pro«ram Fit»$/W«

L f F u m w rc o I i m N

tKlabox«</docum*nt_c«ttg«n«t .php

( tdabo] i«> /w i ia ts_nt« .ph»sidabox«iM*r>ufaetur«rs .ph{

» K M > o x » s / r * v w w f « h p

t id»box*«f*afa>r*d .php

o c s / t t n / i r i d u d v i / m o d u i e ! / . . .

L S F T o r

U C H TC O L U M N

l £ F T

L S F T

L E F T

L E F T

L E F T

L E F T

^ $tn9l« C«lumo Statui: OFT

«id«boztf / tann«i-_taf lx.»hp

sidabaxat/*zpa«*s .php

f l4eboxet / r *eerd_ce inpam«».php

0 ▶ Bom Detail*:A ^ frox Name; order_hrttory.phpX LtfVRight Column Status: OFFV Location: (Sin^la Column i^nara* thit0 (D lattms) LEFTQ (D Calumn Sort Or<lar; 00 ®

0 ( D0 ( D0 00 0 )

0<C0 ( C0 00 00 00 0

(J) C O N T R O L L A Y O U T B O X E SYou can edit the look of your shop easily by going to Tools>Layout BoxesController in the Admin section of Zen Cart. Select a listed box and click 'Edit'.

You can select whether the selected box appears on the left Of tight, cw itwieed whetherit appears at all. Click 'Update' to make your changes stick. O


We've brought together all the web building adviceyou could wish for into one jam-packed section

These awards are given to theb e s t s o f t w a r e a n d s i t e s t h a t w e

f e a t u r e e a c h m o n t h .

■edi tos s tarve* * * * * * * * * *

elcome to Practical Web Design's

yy Ultimate Resource section, packed full ofuseful reference materials, design

inspiration and expert reviews.This issue, we have something of a video

theme going on, with no less than four strongvideo-centric software applications under thescrutiny of Mark Penfold (page 84). There's evenmore software on the CD, including FlashDecompiler and Search Engine Studio (page 98).

There's also our regular information sources,with a glossary to refer to while you're readingthe magazine, and details of dozens of firmsthat can help you getyour website online.

S h a u n W e s t o n

Production Editor O

Fk* Up your own Unux

1 0 2

This issue:84 SoftwareVideo-related applications are givena thorough going over by IVIark Penfold

88 BooksDOM Scripting explained, plus Ajax,and building HTML and CSS sites

93 Site envyThe new sites and redesigns, includinga snazzy CSS-designed food website

98 On your CDFlash Decompiler and Search EngineStudio, plus videos and tutorial files

102 Builder's bookmarksEssential links to help you enhance yoursite-building and design skills

108 HostingDozens of web hosting firms surveyed- choose the one that's best for you

112 GlossaryAll the key terms of web buildingexplained in a handy reference format

P l u s :

111 Back issuesL i m i t e d s t o c k s a v a i l a b l e


TESTS YOU CANR E A L LY T R U S T

P R I C I N G U S I N G T H EI N F O R M A T I O N S C O R I N G S Y S T E M 1We provide you with the most

up to date information on all ofthe sites, software and servicest h a t w e f e a t u r e i n P r a c t i c a l W e b

Design magazine.

★ ★★★★ When we give it five, it rocks!★ I t ' s g o o d , b u t c o u l d b e b e t t e r★ * * 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

Reviews Video software

D e t a i l s

0 7 7 1P u b l i s h e r

Participatory CultureFounda t i onTelephone+ 1 508 756 7496 (USA)W e b s i t e

www.getdemocracy.conn

Find Broadcast Machine Iin tine Tutorials section Io f t h e C D . ■

Broadcas t Mach ineA free video publishing tool with a superb support network

©ritten in PHP, Broadcast Machineprovides you with a rapid andwidely compatible method forpublishing your videos so that

you can become part of the Internet TVphenomenon. The burgeoning audienceo f u s e r s o f v i d e o i P o d a n d o t h e r d e v i c e s

means that this technology is going to bemassive. Broadcast Machine enables you to

get involved; whether your content is anygood remains to be seen.

T H E P R I N C I P L E

Internet TV sounds like a high-maintenance

concept, and without the intervention of TheParticipatory Culture Foundation, it probablywould be. However, its open source solution isend-to-end simplicity.

There are three further components thatwork alongside Broadcast Machine, togetherforming an entire system. Democracy Playeris a desktop tool for watching Internet TV.Available for Windows, Mac or Linux, it's

plugged into the whole network of onlineprogramming. It also features a handy channelguide, the second key element.

Third is Video Bomb (www.videobomb.com), a central point of contact. In effect, youcreate your own personalised TV channel thatyou can enjoy and others can subscribe to.

U P L O A D A N D D O W N L O A D

Creating your own channel is easy. Just uploadthe Broadcast Machine folder to your webserver and call it up in a browser window.Create a new account, then upload your file,add whatever detailing you feel like, and

• Part of the Broadcast Machine ecosystem, Democracy Player has a central role In the process of gettingyour Internet TV out to a wide audience. It's via this application that viewers subscribe and view content

episode one is now available for download.You can either host the videos directly on yourown server or you can arrange the transfers astorrents to minimise your bandwidth woes.

T E E T H I N G T R O U B L E S

Broadcast Machine is based on PHP, so itshould have wide web host compatibility. Butthere are bugs, and the system doesn't work

everywhere. Thanks to the choice of PHP as afoundation stone, this is fixable, but for now,it pays to just check the package works beforespending hours preparing videos to upload.

There's also a lot more to producing videost h a n s e e m s o b v i o u s t o t h e c a s u a l d o w n l o a d e r .

Compression is important, as are lighting andsound. Get it wrong, and people might not bewatching you for the reasons you'd hoped. O

v/ebdes^nverdictBroadcast Machine is a crucial part of a completesystem, all free. Even as a simple video player, it'sfun, and as a platform for public access IPTV, itcould be significant as long as those bugs get fixed.

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 W O N E YT O T A L

* * * ★★ ★ ★ ★ ★

★ ★ ★ ★ ★

Key features

LOG INTO YOUR ACCOUNT|tj|§ Possibly Broadcast Machine's greatest selling

point is its ease of use. PHP is all it takes. Thatmeans pretty much every host will be able to support it,and you don't need to go through crazy MySQL set-upseither. Just log in and upload the files.

P U B L I S H Y O U R V I D E OOnce you've created your admin account andproduced a video, it's time to start publishing.

Create a channel with push-button simplicity, thenupload a file (if you're not planning to torrent it), filli n t h e d e t a i l s a n d h i t P u b l i s h .

0 0BOMBThe final part of the system is getting othersto watch your content. This is helped by the

Video Bomb website, where you can publicise yourchannels for free to an audience that simply subscribethrough Democracy Player. It's all very civilised.


Reviews Video softwareo

D e t a i l s

P CWindows 2000/XP400MHz Pent ium128MB RAM

M a c

Mac 05 X 103.9 or later400MHz PowerPC G3128MB RAM

P u b l i s h e r

Apple ComputerTelephone0800 0391010W e b s i t ewww.apple,com/uk

QuickTime 7 ProApple's video converter delivers encoding that's streets ahead

Opple's QuickTime video systemis popular, powerful and well-

designed. If you're doing thebasic yet essential tasks of

online video, it's an important ally, encoding

effectively and quickly while also providingsome fundamental editing options.

T h i s I s a n e n d - t o - e n d s o l u t i o n . C o n n e c t

your DV camera up to your PC or Mac andQuickTime Pro enables you to record yourfootage directly. You can then edit It, applyeffects and output your various downloadoptions. The comparatively new H.264 codecIs also making QuickTime a popular choice,

improving noticeably on MPEG4 alternatives.

GET IT ONQuickTime seems to be cleaning up on theweb thanks to Its broad appeal. The free

player Is arguably the nicest-looking mediaviewer around: It opens multiple clips, canhandle a broad range of file types withoutcrashing, and Is the only act In town when itcomes to Apple's newly developed codecs.

This means previewing your work InQuickTime Pro Is a pleasure. Even at fullscreen, the player just keeps things flowing.Hit Export to bring up a clearly lald-out Savescreen. There's no option to create your own

presets or batch process facility, but thesoftware does offer to reuse previous settings.

S O U N D S G O O DAudio is also well catered for In QuickTime Pro.Minute control over your audio track's pitch,volume, equalisation and balance areimportant factors, all the more so for their

•QuickTime Pro is versatile enough to enable simple editing like Trim To Selection. Using simple sliders,you select the piece of footage you're after, then either copy and paste or trim down

negligible effect on file size. The inclusionof music and volce-speclfic codecs with the

package Is also a genuine advantage.So it sounds good and the video looks

great, but what about custom players? Applehas come up with an answer to this problem,

enabling designers to use pretty much anyv i s u a l c o n c o c t i o n a s a c u s t o m s k i n f o r

QuickTime. There's a bit of messing aboutto go through, but there are plenty of step-by-step tutorials out there.

N O W I N D O W S M E D I A

QuickTime Pro uses a container technologythat supports many different media types.

Including Flash, but Windows Media and DIvXare not among them. So as good as it Is, It'snot an across-the-board solution. o

\^designverdictQuickTime is popular and flexible, and the Proupgrade is inexpensive. The reach this package has,combined with its simplicity, makes it a must-havetool for video recording, encoding and optimisation.

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

• k - k - k - k - k

Key features

E X P O R T O P T I O N SThere may be formats that QuickTime cannotreach, but the ones It does support cover a

terrifically broad spectrum. The controls are of superiordesign, and the package, on both Mac and PC, performswithout a hitch every time.

M P E G 4 E X P O R TMPEG4 is popular because it meets web users'need for quality while also being acceptable In

terms of file size and download time. Apple's H.264codec Is the latest and greatest MPEG4 encoder and,like its forebears, provides fine control.

A U D I O C O N T R O L SThe audio component of any compressionsolution Is crucial to the final user experience.

QuickTime doesn't have huge numbers of bells andwhistles, but it does have nice controls, as well as AIFFand specialised export formats.


Reviews Video software

De ta i l s

P C

Windows 98/Me/2000/XP233MH2 Pentium II128MB RAMInternet Explorer 6

M a c

Mac OS XI 0,3 or laterPowerPC G4 or later; Intelprocessors not supported128MB RAMSafari 2 or IE 5

s s s n s a m mP u b l i s h e rOn2 TechnologiesTelephone+1 646 292 3533 (USA)W e b s i t ew w w. o n 2 . c o m

•CurrerKy conversion

Flix Pro 8.5An extremely accessible Flash Video encoder with creative credentials

Othe developer of the VP6 codecused to create Flash Video has

produced a first-rate piece ofsoftware for encoding. On2's

Flix Pro is a package you would be wise toconsider if your target is Flash Video.

Not content with delivering a codec that

produces superior quality video, On2 hasadded creative tools, including chroma keyingand vector video, alongside the labour-savingessential batch processing.

C L E A R A S C R Y S TA LThe VP6.2 codec upon which Flix is built reallydelivers the goods, producing obviouslysmoother and more watchable footage than

MPEG4, though not always better than Apple'sH.264. Particularly at lower bandwidths, VP6s t a n d s h e a d a n d s h o u l d e r s a b o v e t h e r e s t .

Encoding times are fast too, even frompure, unsullied DV. Crunching 256MB downto 1.9MB in just over three minutes is areasonable figure. But if you have severalitems to encode in the same fashion, that'swhen you begin to feel the benefit of the Flixbatch processor (and your stress levels will

begin to drop).The addition of several simple filters such as

noise reduction, brightness and contrast meansthat you have the power to correct any minor

problems with lighting or motion artifacts. Thisdoesn't always deliver pin-sharp results, but it

•Top of the extras tree is the addition of chroma keying. With just a few attempts, this option givesyou some great results. Your blue wall can quickly be transformed into any location you like

can under the right circunnstances offer adramatic improvement in overall quality.

U S E R S

If you're working with Flash 8 anyway, thenyou'll be using this codec in its full two-passglory. Yet, outside of that application, Flix isthe only show in town. There's several flavoursto choose from, though, each aimed at adifferent market, so it's important to makesure you study what's on offer.

F l ix Pro in ter faceFlix offers a simple interface for some fundamental, yet often complex, video calculations

QUICK ACCESSFlix Pro's main panel manages toc r a m a l o t o f i n f o r m a t i o n i n t o asmall space without becomingover-crowded. This icon bar givesyou rapid access to pretty muchthe entire application.

;L]; : M [A »; w X: m imTS W F A u d t o V M « o C i w V K t o f V W 2 '

O u t p u t / U m t j / i

( tfowx ) ( W«y )

( trww) ( Wy)1 ? K B r o a d b a n d V h k o ( F U s h g f L V )

g Link M o v t * T » f 9 M ' 8

O U T P U T S E T T I N G SClick between the various settingspanes to ensure that your output isup to scratch. There's lots of slidersand boxes to be ticked, so that youcan tailor your encoding as closelyas possible to your requirements.

P R E S E T SIn most circumstances, you won't needto change the settings, as Flix has a hugerange of presets, all accessed from thisdrop-down menu. It could be as simpleas finding a file and choosing a preset.

_ H T » « l

. Eim '

□ i M f r a m *

_ K K f > o ^ t t a r

_ W n P r . m w

ifowrt*

a Expo r t v i dM

' Cna»li lS«VF 9FUth«aV

; C M x n w O t « F i vQ Q

t ^ < M « ' Za Export

E N C O D EFind youroriginal mediaa n d d e t e r m i n ei t s fi n a ld e s t i n a t i o n a sw e l l a s i t s t i t l e .

Once everything'sin place, just hitE n c o d e a n dw a t c h t h e

sparks fly!O

I N T E R A C T I V I T YYou may want to add someinteractivity in the shape of ahyperlink to your movie, orperhaps you want to controlhow linking will occur. This iswhere it all happens.

C H O I C E SFlix is all about Flash Video, FLV andSWF The big advantage of FLVs isthat they don't have the 16,000f r a m e s l i m i t t h a t S W F s s u f f e r w i t h .This area gives you a rapid summaryof what you're about to do.

The full, standalone application gives you allthe Flix Pro tools, two-pass encoding and aseries of interesting creative options, such asVector translation. Meanwhile, the Flix

Exporter brings the VP6 codec to anyQuickTime application so that you can plug itin to the l i kes o f F ina l Cu t o r A f te r E f fec ts .

There's also a Flix Standard, but when theOn2 sa les b lu rb no tes t ha t t h i s i s f o r " sma l l

businesses who don't require the high video

quality", you know it's not going to cut themustard. Of the three options, the Pro versiono f f e r s t h e m o s t a d d e d v a l u e .

A D D E D V A L U E

Aside from some top-notch video encoding,Flix Pro delivers a number of creative featuresthat should be of interest to most video users.Chroma key tools open up the almostunlimited world of compositing without goingto any ridiculous expense. Similarly, the FlixPro Vectorisation option turns video framesinto smoothly rendered vector animation.These features, though not entirely 'pro' innature, will offer the seasoned designer someinteresting avenues to explore. O

vt ebdesignverdictFlash Video offers a way of enhancing the capabilitiesof Flash player, delivering high-quality video playbackto the masses. Flix Pro is capable of producing resultscomparable to MPEG4 and sometimes even better

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


Reviews Video softwareo

D e t a i l sU i l W$599 (£329*)

R E Q U I R E SM a c

Mac OS X 10,3 or laterPowerPC G4128MB RAM35MB hard disk space1,024x768 16-bit display

P u b l i s h e rAutodeskTelephone01252 456600W e b s i t ewww.au todesk . co .uk

•Currency conversion

Au todesk C leaner 6 .5The industry standard compression tool adds to its impressive feature set

h e n i t c o m e s t o v i d e o

A T 1 * A optimisation and encoding.Cleaner is the leader of the packfor good reason. Capable of

handling input of virtually any format, andproducing output in any other, it's the onlytrue one-stop solution if you want to ensuremaximum penetration for your files.

Although QuickTime Pro is a much cheaperoption. Cleaner remains the most promisingencoding package. Stable, easy to use andhighly flexible, it has developed over time tobecome an industry standard. (Autodesk alsooffers a separate product for Windows,Cleaner XL 1.5, for the same price.)

I N / O U T

Cleaner can encode to more than 60 differentformats. With MP4 output on the Mac

hamstrung by an untraced bug that arrivedwith QuickTime 7.1, it highlights anotherbenefit of using Cleaner - namely thatAutodesk won't just shrug its shoulders at the

problem. It will devote resources to fixing it.The latest media types are also catered for:

3GP and Sony MQV for handheld devices,Kinoma for Palm OS and two-pass Flash Video.

S H A K E I T A L L A B O U TCleaner has two basic windows and a thirdmonitor pane. The first is the file managementor Batch pane. It's here that you drag and dropbase media files, determine their outputdestination and access the next, moresignificant settings module.

Of course, speed is essential, particularlyif you find yourself needing to encode

• It's a huge advantage be able to split your Project window's screen in half and preview the A/Bdifference your choice of settings has made before you commit to processing your footage

everything to multiple formats. Cleaner hasthis side of things stitched up. You can quicklybatch process your files by dragging them tothe main window, use the A/B preview modeto ensure you have the right settings, and

publish directly to video servers.

A L L - R O U N D E RWhile Cleaner is a flexible and wide-rangingapplication than wouldn't look out of place ina well-equipped editing suite, it may not bethe right choice for everyone. With theaccessibility of QuickTime and Flash Video, themajority of web users can be reached easilywithout recourse to Cleaner. That said, if

you're unsure of which formats you'll beneeding, at least Cleaner is a safe bet becauseit covers them all, and does it well. o

wefadesignverdictCleaner offers the last word in video compressionand optimisation for the web. You can be sure tohit pretty much every video viewer on the planetbut for this luxury, you pay a premium price.

R A T I N G SF E AT U R E SP E R F O R M A N C E ★★★★EASE OF USEVA L U E F O R M O N E Y

Key features9 O U M T M . M l l i M .

j

1 ir«>|1 Mill0 ^ J M t M t o l

M M S

O M W 1 * • « « « . ,

B A T C H E N C O D I N GThe main point of entry for most encoding jobswill probably be the batch encoding window.

Getting started is simple: drag and drop files into theframe. A right-click gives access to each file's settings,while the green play button activates the crunching.

M E D I ACleaner is capable of handling an array ofmedia, from FLVs to 3G media for mobile

devices. Thankfully, for the novice, each of thesepossibilities has a well-tuned selection of presets waitingto be used as is, or edited to suit.

P R O J E C T W I N D O WThe project window allows you to preview yourfootage before you commit, and provides direct

access to all of those underlying settings in case youdon't like what you see. This window is where you'llprobably spend most of your time when using Cleaner.


Reviews The newest web-related books, hot off the press

Web designw i s d o m !Shaun Weston brings you the besto f t h i s mon th ' s books

hen Brett McLaughlin's 'Head Rush Ajax' book droppedon my desk this month, I was delighted in the way

only a true web design obsessive can be: unusually so.Yet, Ajax isn't the only web concept I need to get

my head around, with DOM scripting, HMTL and CSSoccupying my time in equal measure.

If you have a book you would like us to feature,drop me a line at [email protected]

DOM ScriptingP u b l i s h e r : f r i e n d s o f E D

A u t h o r ; J e r e m y K e i t hA programming book that's aimed squarely atweb designers is never a bad thing, especiallywhen it's compiled in such a way that evenscript-o-phobes will sleep easily. The authorhas a tendency to overstate examples of DOMscripting, yet this should do nothing to deterthe uninitiated from getting their hands dirtywith a bit of code for a change. Available atw w w . a m a z o n . c o . u k

P r i c e ; £ 1 5 . 8 3

Head Rush AjaxP u b l i s h e r : O ' R e i l l yA u t h o r ; B r e t t M c L a u g h l i nLike many of our loyal readers, I'm new toAjax, so I was keen to find out more from thereputable publisher of the Head Rush series.Despite not being a coffee drinker, its'caffeinated learning style' was just what Ineeded! Available at wvvw.amazon.co.ukP r i c e : £ 1 8 . 8 1

Build Your Own WebSite the Right WayUsing HTML & CSSP u b l i s h e r ; S i t e P o i n t

Au tho r ; I an L l oydThe prescriptivist in me recoiled in horrorat the number of typos in this tome, yetit would be unfair of me to harshly judgewhat is actually a well-structured booksimply because I'm a grammar geek.A v a i l a b l e f r o m w w w . a m a z o n . c o . u k

P r i c e : £ 1 3 . 8 5


Web DirectoryTo advertise here, please call Practkaii ■ oStuart Oashwood on 01225 822873 WBDClGSIQnor email: [email protected] Heiping>„„bu,idb.t.,web»,es 9

/ Win an Olympus MJU 700Free entry online, no purchase necessary, closing date August 10th 2006

_ S A C K Y O U R B O S S !Mow would you like to earn thousands of £££'s

DV using your PC and copying this idea to create thefinancial freedom that you want and desire?So that you can finally SACK YOUR BOSS?Hi I Ii I mm com to find out how!

10,000 UK visitors to your websitefor just £60.00 - Guaranteed.wwwTra fRc -UK .com

If we provide the traffic, can you deliver the sales?

e a s y w e b s t o r e• Simple to use instant online shop• Secure credit card processing

• N o h i d d e n c o s t s a n d n o m i n i m u m c o n t r a c t

• Free promotion of your website with Froogie• Fully integrated shopping cart

• Standalone solution or adds to your website• Free search engine submission

www.easywebstore.co.uk or call 08456 44 93 64 today

m o n t h l y

Bu i ld ing an on l ine shopisnt as difficult as you think

SpCA/vershop: no assembly requiredevorything you need for Just

£■ I «

i n i i i i i i , Xcall our sales hotline0 8 7 0 0 1 3 0 6 2 6

. ^try oar free online demo at

e k m p o w e r s h o p . c o . u k

^ I N KV F A C T O R S

www.inkfactory.com

All makes and models supplied^^*^Orig inal & Compat ib le

Inkjet, Laser & FaxC 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 8 7 0 0 1 1 2 0 0 5 F a x : 0 8 7 0 0 1 1 2 0 0 6

S E A R C H

www.shopping.netwww.shopping.co.uk

Qua l i ty Web Space^^ m O u t

1

Easy to use Web Site Builder24/7 Support via email

ians start at £1.69 per monthw i t h a F R E E D o m a i n N a m e

w w w . f a s t e r s p a c e . n e t

We accept all majorc r e d i t & d e b i t c a r d s

-

D o e s l o s i n g f o ra G H o s t

d o t h t o y o u ?

It dT%esn'''th a v e t o

I II I I ID- m

A t t p r i c e s e x c l u d eV . A . T « 1 7 . 5 %

M m © M5 0 m b H o s t i n g P l a no n l y ^ p mAdvanced Cpanel PHP, CGI and SSIP 0 P 3 M a i l b o x F R E E Te c h S u p p o r t

D o m a i n N a m e sf r o m p yFREE Web / Email ForwardingF R E E P a r k i n g R e g i s t r y F e e

R e s e l l e r A c c o u n t s

o n l y p m1 G B o f W e b s p a c e

- U n l i m i t e d U s e r sH o s t 2 0 D o m a i n sa n d l o t s m o r e . . .

F o r m o r e i n f o o r t o o r d e r p l e a s e c a l l0 8 7 1 2 2 0 5 1 2 1 o r v i s i t w w w . c o m p l l a . c o m

C i " » e d B T - P t t k 7 S i p p f i C a i < t t o n o n 9 T w s t ' » ^ a - .

iP E R S O N A L

40mb disk space1,000 MB Data Transfer Per Month£29.95 per year

B U S I N E S S250nib disk space2,000 MB Data Transfer Per Month£49.95 per year

B U S I N E S S P L U S

SOOmb disk space5,000 MB Data Transfer Per Month£79.95 per year

A L L O U R H O S T I N G P L A N S I N C L U D E

FREE .co.uk domain nameU n l i m i t e d E m a i l A d d r e s s e sWeb Based Con t ro l Pane lWeb Si te StatsU n l i m i t e d F T P A c c e s s

FrontPage ExtensionsCustomised Error PagesFree Email Technical Support 24/7Plus lo ts more.

R E S E L L E R P A C K A G E SA L S O A V A I L A B L E

W W W . P U R P L E - P A W . C O M

rjii HAISQFTWEB HOSTING f I¥ I M t u j / * ; • •

www.haisoftxo,ukC A I L S A L B S O M ;

0 1 1 5 8 7 } 8 7 4 6

DOMAIN NAMESFRO** £4.99 PERttta

.CO.UK' .COM - .NET - ORG - .INFO - .BIZ

HAISOFTPERSO

100 MbFROM

£1.49Ptii MONTH M,9TOUpime

SpaaIGbMonthlyTransferPteskContrd Panel

HAISQFT PRO

FROM

£4.16

MULTI-DOMAIN

FROM

£8.33p t s M o w m

1.5 Gb Storage Space15 GB Monthly Transfer25 OoinainsPlesk Control Panel

P r a c t i c a l

Helping you build better web sites

Single Site Hosting•3GB UK Web Space■ 3GB Premium Bandwidth> Unlimited MySQL Databases■ Unlimited POPS

■PHP4, CGI, Peri, FrontPage£ 9 9 ,

Multi Site Hosting

' (£2^• 10GB UK Web Space ^■ 5GB Premium Bandwid th. H o s t U n l i m i t e d S i t e s I 1» H o s t U n l i m i t e d D o m a i n s " * V p m» Advanced Domain Pointing SystemV or £200pa )

New Updated Packages

2 M o n t h s F R E E

Virus & Spam Protection

99.99% Uptime

Reseller Hosting■ Unlimited UK Web Space• U n m e t e r e d P r e m i u m B a n d w i d t h■ Unlimited Spam & Virus Protection/• Unlimited MuKi Site Accounts■ Resel ler Control Centre

• Custom Cont ro l Panel• Personal Name Servers

£ 3 0 JorC300pa )

PER MONTH 99.99% Uptime

HMSOn-No S347«2«>R«»offic*:M«rcufyHo«it«-No(1hG«t.Noting NG7 7m-AlprtcM art jnauMVorVA-

To advertise here,please call

S t u a r t O a s h w o o d o n0 1 2 2 5 8 2 2 8 7 3

o r e m a i l : L

[email protected] 1

^i^WWW.BPWEB.NETMulti-Domain Hosting Specialists

Call NOW 087074244743P per minute from BT Landlines, prices may vary from other providers. AD prices shown exclude VAT @ 17,S%.

W i n d o w s o r L i n u xFA S T U K S E R V E R S

Ltd INCLUSIVE F i rewa l l p ro tec t ionI N C L U S I V E S i t e c o n t r o l P a n e l

INCLUSIVE Graph ica l S ta t is t i csINCLUSIVE Password p ro tec ted d i rec to r ies

UNE CONTROL PANELW e g i v e v o u c o n t r o l !

Our control panel will provide you with all the toolsto make life as easy as possible for you.

T ^ AJL Jl. *

A l l t h i s a n d m o r eJ ^ a v a i l a b l e f r o m j u s t

£ 2 . 4 9 p e r m o n t h !There are NO CHARGES for transfering

A U domains to or from InterHost, and nosetup charges!

MySQl I PHP4 j PERL | AUTO-RKPONDERS j EMAIL FORWARDING | ASP + .NET | GRAPHICAL STATISnCS | FREE SUPPORT

w w w . I n t e r H o s t . c o . u k

0870 3212222 <!!I N T E R H O S T

A web partnercut from a

different cloth.

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 0151718 Click: www.webtapestry.netMail [email protected]

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

co.uk

. c o m

tv/.cc

£2.59.. fel.co.uk/.org.uk/.me.uk doma*"

£ 8 . 9 9 p , ,.com/.nety.org/.lnfo.b iz / .name

£30.95pa|wwo«£i

The web doesn'tget any easier! -reg.co.uk

u n l e a s hyou r r c rea t i ve

p o t e n t i a lI n t e r a c t i v e M e d i a :

Web Design + DevelopmentBA (Hons) Multimedia ArtsF i lm Mak ing :

C o m p u t e r G r a p h i c s :3 D A n i m a t i o r

ih&SwS-:

SAE Institute s a Itile dfegrt to the a^e:^ cdle^NA^

specrise in the creali^ indslriest gvirg )oj the ec^ v^(hen it

oarnes Id edication and pcrtibfo developmert Interactive

Media cou'ses combre ptfesscrd web des^ and

L o n d o n 0 2 0 7 6 0 9 2 6 5 3

L i v e r p o o l 0 1 5 1 2 5 5 1 3 1 3G l a s g o w 0 1 4 1 4 2 9 1 5 5 1

w w w . s a e u k . c o m

DIYDating.com

d e v e t e p m a r t o t h e r t e r f r c t e g e s

Film Making bnr^ out the hdden prtxiuosr dt^tor h

>cu Or if >aj dream h three drrenscns, the 3D Animation

diploma 6 Sy >ouVtst the vveb^ ncvv to ordsr a bfodxre.

Over 40 schools woridwideEstablished in 1976 ^ ~= ^= =

State ofthe art equipmentHands-on training

IndiN^dual practical timeI N S T I T U T E

FREE templates

□ Web based contrcri panel[ ] Huge database of contacts

□ Full Site stats

100% Free to set-up

Price per year inclusive of all fees. Some domains are payable 2-yearly, visit 123-reg.co.uk for more info.Prices exclude VAT @ 175%. 123-feg.co.uk is part of the Pipex Group.

For more information go to:

www.diy-dat ing.comor phone:

0 1 9 2 2 7 11 2 11

THE ONLYPOKER MAGTHAT PUTSYOU ATTHE TABLE

ie biggest prizesie hottest games

The best playersWe're ail in - are you?On sale now Y O U R F I R S T

3 ISSUES FREE!Sign up at

www.wptmag.com

iPakef1—1 THE OFFICIAL WORLD POKEB TOUR MAGAZINE

S T R I K I N GIT RICH...How to keep yourcooi after a brg wir

MEET WISEM A N C H A N

. Poker pearls from thegame's oriental king

' H o m e g a ^ s c ^ . v ^ e▶ t o p f a y - p o d c e t F ^ e s

Site envy Projects to inspire youo

Submi t a s i te !

@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:We shouldn't covet our neighbour's site, but

sometinnes we just can't help ourselves! [email protected]

C h o w h o u n dCREATED BY: I n -houseU R L : w w w . c h o w h o u n d . c o m

B o a r d s | F « a t i i f « s t D i g e s t j m y C H O W | G e t t i n g S t a r t e d C H O W

Manhattan's best burgers and other

topics are discussed at length on amessage board for avowed foodies. Theslideshow graphic on the homepage

highlights several articles withoutdistracting from the main business of theongoing discussions. The Digest pagepicks the best messages posted, a realconvenience for anyone without time tob r o w s e . N e w c o m e r s a r e m a d e w e l c o m e

with a page explaining how you can usethe site, preventing Chowhound from

becoming a clique.

h o w h o u h d . c o mtN LATE

CHOWHOUi lDL A T E S T P O S T S F R O M T H E B O A R D S

w e b

STAR SITE* * * * *

• In Chowhound, the best ongoing message board discussions are highlighted with magazine-style headlines and photography

•The message boards themselves are easy to read, with indentedareas showing you which messages are replies to earlier comments

•To stop your own message board becoming a closed shop, emulateChowhound by welcoming new visitors with advice for getting started


Site envy Projects to inspire you

S late Thursday, June 29, 2006I A B O I ' T U S

M A K E v S L A T E M Y I t O M E P A C F .

F R I D A Y S A T / S U N M O N D A Y T U E S D A Y W E D N E S D A Y T H U R S D A Y

T O D A Y ' S

B R I E F I N G C A R T O O N ST O D A V SD O O N E S B I H Y

P R I N T

p D I S C V S S

m K M A I L

i N E W 5 L E T T K B S

RS.S

P O D t ^ A S T l N G

B L O G S +

P R E S S B O X

Pro jec t i le Vot ing

K A U S F 1 L K 5

F o u r L e v e l s o f

K o s o t a !

T H E H A S - t E E N

D e a d M e n

Talking

N E W S & A R I S I

p o L i T i C N S h o c k i n gW h y Y o u B i b l eS h o u l d n ' t D i s c o v e r yL e a v e Y o u r W h a t ' s R eMor>eytoYour on Moses'K k l s T a b t e t s .

A R I S I H E N E W S &

S h o c k i n g p o i . t r uB i b l e C h r t s t i a r

O i s c o v e r y t C o n s e r v

T h e 1 0 0 M o s tC h r i s t i a n I n s p i r i n gC o n s e r v a t i v e s M o v i e s E v e r ?

A R T S & L I K E A R T S & L I F E

T h e 1 0 0 M o s t A L o v e L e t t e r

I n s p i r i n g t o L o i s L a n e

What's Really Abanctontheo n M o s e s ' G O P

S l J D E S i l O W

LethemtoGehry: Harxto Off Brooklyn!

H E R E ' S T O

B E E R

E G Y P T ' S N E W

T O M B R E V E A L E D

ASupreme Court ConversationPartsanshp was the only thing,p o t t e d J u n . 2 0 . 2 0 0 6 O i l n g * * a n dO fl h k * L i h M C l i

b Wal-Mart Good for the

• Glide your mouse over the section headingsto v iew the la tes t contents

S la te• i M W M w n l i t n r . k K

•Slate s new homepage is packed, leavmg you in no doubt that there s plenty to read, yet the day s best stones remain prominent

The popular online magazine's 10th- i provide access to section conann ive rsa ry refi t has won as much 1 fo r t he da i l v homeoaae a rch

C R E A T E D B Y :

Helicopter www.hellochopper.comU R L : w w w. s l a t e . c o m

The popular online magazine's 10th-

anniversary refit has won as muchpanning as praise thanks chiefly to thenumber of ads stuffed on every page. Butthe homepage is worth studying, bothf o r i t s a d v e n t u r o u s u s e o f r o l l o v e r s t o

provide access to section contents, andfor the daily homepage archive along thetop. The articles themselves are models ofhow to make long text pieces readable,and many are available in audio, as wellas written form, via podcasts.

• Previous homepage contenaccessible via the top menu

AcademyC R E AT E D B Y: F a l l o n w w w. f a l l o n . c o mURL: www.brawnyacademy.com

A k i t c h e n t o w e l a i m e d a t h e - m e n

needs all the clever promotion it can

get. Flash dominates this site, withplayful, discreet animation on thehomepage and a series of embeddedv i d e o s t o w a t c h .

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

establish a rugged, outdoor tone thatsuits the brand to a tee. The designers

cleverly allow different elements tomove to accommodate your browserw i n d o w w i d t h .

•Tongue-in-cheek videos are presented inFlash, with a choice of resolutions to suit

a t " j l y f r

•The welcome page adjusts its side elements to suit the size of your browser window


Site envy Projects to inspire youo

5pieces.comCREATED BY: I n -houseURL: www.5pieces.com

John Henry Donovan's personal blog covers design, movies and more. The homepagefits in a lot of content without feeling crowded, while article pages offer attractivetouches such as a small calendar icon that shows the date off clearly. Sections focusedon tutorials and portfolio work extend the blog structure to make the site's scopemuch broader, though the logo takes up a lot of space on each page.

n n M

IQQQ ^0211 CS33 fOQUl ^S3 ^331

yjM ffltT "O O i O J O J g l " M lo C T J O I I j j p W M

II MMtfUcwtErtm

a » r r * c ( M K M S j . a c o w e v M c e

. , 1 4 » a a * t e m p t s

; 'nwbrtrfwMtHttmpk.dnaiBdecnrtoiuivigittF. w e h « t e f D r M i « B H « b a t r S a i H i « C - f e b t t a t n' )Qtr{(nrtF«MiliOKmutoipnKn<nwitIiKitpm(i4j*

£ » » » « .

« O R M / ) W » • U » * »

IT@Cort Web 2.0 Conference Cofk

; t a t l r a < M t h « n M l i p M b k a w < t W < > b s . » i M ( f - < U y

> c o n f t i F S c e t e C a t , I r r t w d . I ' m j e k l t i i i i v t h e

i i«i dUn't mrn^dow the went e*(.*pt far; tbeodd<ri i>p.

• Clearly designated areas, a prominent navigation bar and careful use of space keep whatcould be a busy homepage feeling well-organised

Tattered FlyCREATED BY: Thin Slice http://thinslice.netURL: www.tatteredfly.com

Dan Bachman's blog lovingly covers fly-fishing and the outdoor way of life that goeswith it. Thin Slice's design evokes a strong rural feel through a well-considered colourscheme, while the structure points you to recent and popular articles and external links,all without taking you down the page. The Google text adverts are surely too brief togenerate any interest, though. For your own site, think carefully about whether it'smore important to find an audience or make money, then design accordingly.

R v F i i H i n a F I v F i t h i n n t e fl f o i i i T r o u

A FLY FISHING SHORT STORY« O t t H f • i , t T

L - h«(«h«rr h»K» KCCP REAOINO 0

•This fly-fishing blog makes you feel like you're outside, and the structure is excellent. Welove the big 'Keep reading' icons, making it clear that there's more to read

thepixelageC R E AT E D B Y: I n - h o u s eURL: www.thepixelage.com

This Singapore agency's redesigned sitelooks lovely, with drop shadows andsubtle textures softening the look.T h e f a m i l i a r s c r i b b l e d n o t e i l l u s t r a t i o n

suggests creativity, and case studies ofrecent projects are made obvious. Butthe homepage's welcome introductiondescribing the company up-front isundermined by marketing gobbledegook.It's a shame the simplicity of thelanguage lags behind that of the design.

we adopt a 'listen, fotrnulate, realise"

philosophy...

VVi are a proviuof of .3 .-iiitions >-"thcreative de^ian blfcnc' id inj. > it.

Wt *r« hcf« te het^ your bi w t g e t t h c f fi w l e u lI m n o w l i w t d M B

n w i d u h i t t a n t .

CaseI n o n U - t f c W - Vo

t y r W - A * 441,^ tin

Recent blog entriesR t v t R Q t T t i a r a p y

Sit* upditt tip *3: Mak* yourttif htanf

WWt ttic TWW tooiK we dKMM wMtad to diMgetlw tcp» gf mt mtMlta. We tt* witMtt* » notonly ihMNiuM ew *tn*c*a, tMt stw t« tend * humanvoK« t« tiie mbMt. And tenee. tNs Hot MM torn.

V i P r o i t w O K

des^nportfolio

• if your own web design is looking too stark, try thepixelage's approach of soft-focusgraphics to take the edge off

t h l i n l i p

\\

c o n p t n y » t r v i c * i « t x » t t o ) i c c t t e s t u < b n t s i c a

less is more

more often than never.

• Portfolio pages are a combination of clear navigation and prominent example images,but you can leave out the meaningless marketing-speak


£

www.pure-communicat ion.beU R L : w w w. f r i e k e . c o m

Driven by Flash, this photographyportfolio opens with one of the mostuncompromising homepages you're lil<elyto see: a small logo, a mass of pixelsforming a vague image, and a clickablemenu button that reveals the few

navigation options. The portfolio itselfuses a plain brown colour scheme tosupport the pictures, while thumbnails

• i t

J A N S S E N S

H o m « S p e a k e r s P o d c a s t B u t t o n s C o n t a c t

i l i l B l P i M

J.Cbno\roct

IJ.1^

dCenstruct is an affordable, ont-<Uy confertnc* aimed at those buildingthe latest generatron of web-based applications. The event discusses hownew lechnologv Is uinsrorming the web from a document deHvery systeminto an application platform.

Registration Open Soon!Last year d.Construct sold out in under half an hour, so make sure you'reamong the first to know when tickets go on sate.

O &«9nuptO(heClt«M)ftSScv*msf*ed

ft would have been even better ifthe organisers provided a date

Last year saw the inaugural event, the first of its kind in the UK and possibly inEurope. Internationally renowned speakers from organisations including Yahoo),the BSC and the Eiectronk Frontier Federation discussed hot topics such as web

9am-S:30pm, 8th SepBrighton Corn Exchange

SponsorsIf you r tMd lo Qct your m«su9C to

w e b ( l « s « 9 n t r » , t o f t M r t d e v e l o p e r s ,creattvet. tnfluennal Mog9«rs or welthe«)«d t r>Qhto( i res idents , then

tponsorinf) d.Construct iwotjid b« a«m*r t MY to do t t .

F o r n d t h t

madgexb a c k s t a g e . b b c . c o . u k

•Any questions? The d.Construct conference website is a textbook example of how tocommunicate information succinctly and effectively


Site envy Projects to inspire you

Kineda MagazineCREATED BY: I n -houseU R L : w w w . k i n e d a . c o m

A frothy celebration of Asian American pop culture, Kineda has made a dramatic switchfrom austere white to chocolate brown in Its redesign. The homepage successfullybreaks the standard blog template, though it's certainly still there underneath. Whilethe use of light text on a dark background isn't something we would recommend forwordier sites, in this instance it serves to highlight the model photos that are the mainpurpose of the site.

• Less is more on the Kineda homepage,with the designer resisting the temptationto smother us with links and emphasisingwhat ' s new ins tead

» J .

Jarah Mariano Models for Victoria's Secret

» X %

Looking for a Japanese Gtrlfriend?

• A luxurious colour scheme doesn't competewith the photos, while clever use ofgradients to define areas on the page stopsthings becoming monotonous

Design ObserverCREATED BY: I n -houseURL; www.deslgnobserver.com

After two years, the well-known designblog moves from a standard Movable Typetemplate to its own precise look. The keychange is a welcome shift from reversed-out type, making the intelligent writingmore pleasant to read. The logo on theright emphasises the articles further. Butyou have to scroll down to see the list ofrecent entries, and the green links are

attracting a lot of criticism for their lack ofcontrast, so points are lost for accessibility.

•The weekly Observed column of linksIs now on every page, though the poorcontrast makes them difficult to spot

•The Design Observer redesign uses a tight grid. The 'Observer' in the logo, the subheadbelow and the text In the right-hand column are all the same width, for example O

F O R E

All packages quote PWIO

Web-100 - 750MB disk space. lOGBmonthly bandwidth, Linux (Fedora Core 4)/'*W i n d o w s 2 0 0 3 , 2 0 0 P O P 3 a c c o u n t s

£47.99 yearWeb-2S0 - 1.5GB disk space, 20GBmonthly bandwidth, Linux (Fedora Core A)lW i n d o w s 2 0 0 3 , 4 0 0 P O P 3 a c c o u n t s

£ 8 . 9 9 m t h £ 8 9 . 9 9 y r

Web-SOO - 3GB disk space, 40GBmonthly bandwidth, Linux (Fedora Core 4)/W i n d o w s 2 0 0 3 , 8 0 0 P O P 3 a c c o u n t s

£16.69 mth £ 166.99 yWeb-1100 - 3GB disk space, 80GBmonthly bandwidth, Linux (Fedora Core AWindows 2003, 1600 POP3 accounts

£29.99 mth £299.99 y

F o r f u r t h e r i n f o r m a t i o n :p r a c t i c a i @ x c a i i b r e . c o . u k* * * 0 8 7 0 0 5 0 0 0 8 0

www.xca i i b re .co .u i c /p rac t i ca l

All prices ex VAT, terms & conditions apph* Only available using discount code -

*♦ Windows 2003 available for an extra cos

BT customers pay up to Sp a min,otiier companies may vary.

C O M M U N t C A T l C

On your CD Web designer's toolkit, and much more

On your CDIt's true - there are things in life better than raspberry AngelDelight, and here's our latest jam-packed CD to prove it

re we spoiling you? Yes,

probably,but we love packingloads of great stuff onto

our CD, and this issue's two full packagesare testament to our generosity. Eltima'sFlash Decompiler (www.eltitna.com), forinstance, offers a fantastic opportunity fornovice Flash users to study Flash elementsfrom the web by deconstructing themand turning SWF files into native FLA.

If it's search functionality you're lookingfor, try Xtreeme Search Engine Studio(www.xtreeme.com). This will enable youto generate a search facility for your ownwebsite and is a great alternative toinstalling a generic Google box.

This month's training videos focus ondesigning various navigation elementswith the ubiquitous Adobe Photoshop,and we've also thrown in a selection ofvideos to help you hone your CSS skills.

j We've taken all of the! links from the Builder's

Bookmarks section and put: them on the CD, so there's no

need to type them in by hand.You'll also find the project files

, for following this issue's tutorials.To access the content, place your

CD into your PC or Mac. From the frontpage, you'll be able to access everythingon the CD in three clicks or less! O

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 restartingyour 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 for how to get a free replacement.

Navigating your interface

V I D E O S

Watch an hour-long introductionto image editing for web builders,including projects and exercise filescourtesy of Lynda.com,

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 versionsof Eltima Flash Decompiler and XtreemeSearch Engine Studio; two greatapplications for taking your webdevelopments skills even further. Moreinformation available at www.eltlma.com and www.xtreeme.com respectively

TUTORIAL FILESAccess all the files you need to followthe tutorials in the magazine.

E S S E N T I A L S

Whether you need a browser, a'firewall, antivirus software or animage editing«package, we providethe top tools that cover all the bases.

D I R E C T O R Y

We've put all the Builder'sB o o k m a r k s l i n k s o n t h e C D I


On your CD Web designer's toolkit, and much moreo

_ynda.com videos.We've teamed up with the leading provider of video lessonsto bring you the web builder's guide to image editing and CSS

Ohese training tutorialsfrom Lynda.com willshow you how to getto grips with Photoshop

CS2, including the creation ofnavigational buttons and Smart Objects.We'll also explore coding with CSS2,

concluding our series with a look at the

properties of links, rollovers, hiddenCSS, dealing with IE importing, CSS indifferent media (including print) and

general troubleshooting.Before you start, check that you have

QuickTime installed (you can download itat www.quicktime.com). As part ofthe Photoshop overview, you can follow

some simple projects if you own thesoftware or download the trial fromw w w . a d o b e . c o m .

M O R E G R E AT V I D E O S

If you enjoy the projects, and want accessto more than 10,000 videos, pay a visit to

wvvw.lynda.com today!

LET'S GET THIS PARTY STARTED

Once you have loaded and startedrunning your CD, select Videos from theleft-hand section menu. You will then betaken to a screen that provides more infoon this month's projects. Click the WatchVideos button at the bottom-right to

enjoy the first clip.

vSebdesignHelping you build better web sites

Directory

Stock tmages

V i d e o sWe've Beamed up witft Lyixla • the leading online resource for web(tesigf trainirig videos - to bring youa 60-[T*r»u» axjrse on gettingstarted with navigation in Adobe Photoshop and manipuJatir g links inCSS2,

OeiAILS:These training tutorials will sach you how to get id pips withPhotoShop CS2, including the cieation of navigational buttons andSmart Objects Well also look at axjing with CSS2, concluding ourseries with a look at links, importing and troubleshooting

CETSTARItO:first you must have the QuickTime Player installed (you can downloadit at www.(|uicktime.com). Now hit the Watch Videos button in thebottom-ftght of this scneen. then select the video you'd li)£ to watch

To access nxxe than 1 aOOO training videos, why not pay a visit towww.lynda.cofn todayl

l y n d a . c o m

o n l i n e n o w ! w v f w. m y f a v o u r i t s m a g a z i n « s . c o . u k

L E T ' S G E T I T S TA R T E DMake 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.0 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 willautomatically open in your installed QuickTime software.

O P E N F O L D E RTo open a folder containing all of the videos in that particularchapter, simply dick, on the bold chapter title. You will be swiftly

taken to the folder that contains all of the videos you'd like to view.

S I T B A C K A N D E N J O YNow you can sit back and enjoy 60-odd minutes of Photoshop imageediting and CSS coding enlightenment. It's recommended that you

watch these videos in the right order (to prevent brain-ache).


On your CD Web designer's toolkit, and much more

•ull ProductsCreate online search tools in minutes, and learn Flash the easy way

Xtreeme Search Engine Studio

Otreeme's Search EngineS t u d i o e n a b l e s a

c u s t o m l s a b l e s e a r c h

f u n c t i o n t o b e a d d e d t o a

w e b s i t e i n a m a t t e r o f m i n u t e s . R a t h e r

than adding a Google search bar to your

site, create something that feels moreprofessional and individual. The programis extremely powerful and, although itcan seem daunting at first if you're notafraid of a trial and error approach, you'llbe creating search tools in no time.

This clever application Includes a handywizard to get you started, and willgenerate search bars via code (which canbe pasted into any web page), templates(selecting Dreamweaver pages and searchbar position), or blank pages that can be

added to a website and referred to asthe 'search page'. But the best thing aboutSearch Engine Studio is that it can be usedto produce HTML code to drop a searchbar into any existing web page, or toenable search functionality on a CD-ROM.

F I R S T T H I N G S F I R S TUsing the pop-up wizard, follow the onscreeninstructions to select HTTP mode (for an online

search tool, your URL, PHP or CGI script output), how andwhere the search files are to be saved, and how you wantto administer the search tool into your site.

0 GENERATE SEARCH PAGEIn this example, we've selected 'No frames ortemplate file' in order to generate the blank

search page to drop into our website. The next step is totake all the files (SDB, PHP etc.) that were generated bySearch Engine Studio and save them to our root folder

0 UPLOAD AND CUSTOMISEUpload the search files to your web space usingFTP You can now visit the page on the Internet

and use it to search through your site. The final stage isto customise the page by opening it in a page editor andadding graphics, Intro text, navigation, and so on.

Eltima Flash Decompiler

Oltlma's Flash Decompileris an amazing tool forthose of us wanting to

get into Flash design butfinding ActionScript a real obstacle. Thedecompiler will take any SWF file and

split it into its component parts,providing easy access to scripts, sprites,graphics and audio files.

If you've ever seen a Flash element onsomeone's homepage and wondered'How did they do that?', now you can

find out! Although it's possible to use thistool for nefarious purposes, it's at its most

powerful when used to offer you a step-up to the next level in Flash design.

The following tutorial will show youh o w t o a c c e s s fi l e s f r o m t h e w e b a n d

analyse their ActionScript instances to getto grips with how the professionals do it.

As with any decompiler, make sure youseek permission before you use otherpeople's code or media objects in anyproject of your own.

S E T T I N G U PliJI View a site that contains a Flash object. Go to

your temporary Internet files (eg C:\Documentsand Settings\user\Local SettingsVTemporary Internet Files\Example.swf) and copy this file to your desktop.

D E C O M P I L I N GIn Flash Decompiler, open the same file andyou'll see the SWF play in the main view. On the

right-hand side, you'll see a 'tree' of all the componentsthat go into making that SWF.

E X P O R T I N GUse the tree to select the code or media objectyou're interested in and click 'Export'. Once

you've selected a location for your exported files (and theformat), you can start to explore the assets in Flash. O


iDisital

of the Year 2

The best photography competition of the year isnow open for entries! This is tine leadingcompetition for anyone with a passion for digitalphotography and is open to both amateur andprofessional photographers of any nationality. Thereare fantastic prizes to be won in each of the sixcategories, plus the overall winner bags a pair ofaround-the-wor ld t ickets f rom Trai lfinders worth£15,000! Full details on our website...

Enter now at http://poty2006.dcmag.co.uk

Win a £15,000 photography holiday of a lifetime!

r

Enter your pics at: http://poty2006.dcmag.co.ukO f fi c i a l P a r t n e r

T R A I L F I S D E R S &Sponsored by

Cap i ta l Go ld.3l'4jS. Royal

PhotographicS o c i e t y Aperture

Builder's bookmarks Essential online resources for all web designers

O N T H E C DBui lder 's bookmarksare also on our CD

All the sites you need!We've scoured theInternet to bring youdetails of the bestwebsites dedicatedto web design anddevelopment

O here's a wealth ofknowledge, tools andresources out there, andmuch o f i t i s ava i l ab le f o r

free. It's 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 dallyreadingA List Apartw w w. a l i s t a p a r t . c o mThe definitive web design blog for pros.

Digital 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 u 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 i u e . c o mDave Shea, creator of the influential CSSZen Garden, writes on all things web, andprovides links to other topical articles.

E :

%

r r

S i t e p o i n t

I

w 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 articlesand access to a rch ives

o o f p r e v i o u s a r t i c l e s .^ Y o u c a n s u b s c r i b e

STAR SITE to Sitepoint'ic'if "if if "ic newsletters and

get help on itsvery active forum.

S t y l ega law w w. s t y l e g a l a . c o mNews, features and resources on

standards-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 withpowerful 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 t s can be r a the r du l l .

Movable Typewww.sixapart.com/movabletypeA popular PHP-based weblog platform forpeople who have their own web hosting

C o l o u r

Slayero fficeht tp : / / s l aye ro f fice . com/ too l s / co lo r pa le t t eEnter a hexadecimal colour value and this handytool will give you 10 shades of the base colour at

varying opacities.

C o l o r P a l e t t e G e n e r a t o rw w w. d e g r a e v e . c o m / c o l o r - p a l e t t eThis 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 swww. raquedan .com/ random 10O.phpGot 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 bw w w. s m a r t p i x e l . n e t / c h r o m o w e b / u k s /i n d e x g b . h t m lCheck out the Chromoflash, 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 1 0 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 5Gazillions of groovy pattern backgrounds here.

S q u i d fi n g e r sw 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 TravisBeckham, 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 w 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.

C o l o r B l e n d e rh t t p : / / c o l o r b l e n d e r. c o m

This handy tool for colour matching and palettedesign allows you to save the blends you concoct.

You choose a base colour and ColorBlender makes

up the rest of the palette. You can then save thepalette as a named blend or save it out as a small file


Builder's bookmarks Essential online resources for all web designerso

account. Requires some technical skills 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 theYa h o o ! n e t w o r k .

e Blogger

c a ;

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 forbeginner 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 blog

template. 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.

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.

WBb . *

STAR SITE★ ★ ★ ★ ★

Graphics andm u l t i m e d i a

F o n t s

Web Type Primerwww.efuse.com/Design/web_fon ts_bas i cs .h tm lDaniel Will-Harris's website is a greatintroduction to the art of using typefacescorrectly on a web page. He also offerslots of other excellent advice on buildingthe perfect site, from getting the content

right 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, fordesigners" - is packed with loads ofinspirational resources.

Design Snacicwww.designsnack.comServing 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 l < 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 m

Quite 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 yhttp://extelligence.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.

m m M

Gaping Voidw w w. g a p i n g v o i d . c o m /Moveab le_Type /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 are 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 designinspiration: exhibitions of desktops

and patterns, imagesfrom design

w e b e v e n t s , a m a j o rCTAD CITP project everyD I Ah ill t week, listings★ ★★★★ and 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.

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 ockpho tow w w . i s t o c k p h o t o . c o mAffordable image library.

W h a t T l i e r e n t ? !

I

Design Packsw w w. d e s i g n p a c k s . c o mFree image collections for designers.

r l ^ l IM y F o n t sw w w . m y f o n t s . c o mWith a staggering 45,599 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 you ,to upload a scanned font sample, orsupply the URL where the file can befound, thensurvey thec l o s e s t •matches SJAR SITE

* * ★ ★ ★the MyFontsd a t a b a s e .



Stock.xchngw w w . s x c . h uMore than 100,000 free stock photos.

Image Afterw w w. i i n 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 .

Unp ro 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 your

presence 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 got

through this lot - all 7,073 tutorials.Actually, the pickings for web buildersare a fraction of the total, but there'splenty here to make it a useful link.

The great thing about this site isthat all the tutorials are submitted, and

rated, by registered users. So, you canshare your own skills and

tips as much as you canweb ' gain from others',

r x A n C I T C w h i c h a l l a d d s t oSTAR SITE★ ★ ★ ★ ★

the 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 l l - i n - o n e / t o o l .loading-time-checl<er.htmA 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 l 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.

ility nj,res m

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 l s .o rgw w 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 - l c 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.comw w w. a c c e s s i f y. c o m / t o o l s - a n d -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.

Deja Vuwww.dejavu.orgUsing 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!

"b' ■ Practically speaking,of course, it allowsyou to check how* your site will appear

t o t h o s e w i t h o l d

browser versions.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 r i c h v e i n o f F i r e w o r k s a n d F l a s h t u t o r i a l s

for web designers.

Computer BasedTraining Cafew w w . c b t c a f e . c o mWeb-based tutorials covering the mostpopular web design and graphicssoftware applications.

JavaScript Kith t t p : / / w s a b s t r a c t . c o mGeneral tutorial site, with a leaningtowards JavaScript.

F lashguru

i c a n t . c o . u kw w w . i c a n t . c o . u l <C 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 uw 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.

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 yw w w. w e b m o n l < 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 .

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 .

w w w. fl a s h g u r u . c o . u kAll things Flash, plus links to even more

things Flash.

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 Li n d e x . h t m l

Straight from the horse's mouth.

Content with Stylew w w. c o n t e n t w i t h s t y i 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.

Zvon .o rgh t t p : / / z v o n . o r gNews, tutorials and reference material forXML-based technologies (XSL, HTML, CSS).

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.

W 3 S c h o o l sw w w . w 3 s c h o o l s . c o mHuge 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 .

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 h e r e . L o o k n o f u r t h e r

MySQL 5.0 ReferenceM a n u a lh t t p : / / dev.mysq l . com/doc /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.0

queries and problems.


Search enginesS t e p f o r t hw w w. n e w s . s t e p f o r t h . c o mA generous, up to date helping ofsearch engine news, tips, articles andwhite papers.

Seomoz.orgw w w . 5 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 / t o o l sThis keyword suggestion tool willdetermine which phrases are searchedfor most often and give a keyword

ranking monitor.

GoogEd 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.

M a r k e t l e a pSearch EngineMarket ing Toolswww.marketteap.com/verifySan Francisco Internet marketing firmMarketleap offers some useful tools onits site. The keyword verification, searchengine saturation, and link popularitycheckers are a

breeze to use,w h i c h m a k e s i t w e b °all the more SJAR SITEsurpnsing 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 / 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 t p : / / t o o l s . s e o b o o k . c o m /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 linking intoa page or website.

S E O 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 l 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 mw w w . d e v t o o l 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, theiroptimisation and marketing. If you're abeginner, this is a great place to come foran understanding of how to steer trafficto your site.

W e b W o 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.

S e a r c h B l i s sw w w . s 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.

SearchEngineWatchh t t p : / / s e a r c h e n g i n e w a t c h . c o mA 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 couldever want to know, including all thela tes t news and t r ends .

P o o d l e P r e d i c t o rw w w. g r i t e c h n o l o g i e s . c o m / t o o l s /s p i d e r. g oCheck to see what your site will look likein search engine results.

S i t e o m e t r i c sw w w . s i t e o m e t r l 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 rwww.webal ley.net/webannouncerWeballey's Web Announcer allows you to submityour site to about 70 search engines, including Google,Lycos and AltaVista, in one fell swoop.

Tra fficZapw 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 allowsyou to register your domain name, butgenerates available domain names VKeb 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.



Software si tesand applications

D 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 and

Mac, featuring user ratings, number ofdownloads and some editor ratings tohelp you pick the best.

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 .

t o r r e n t s p yw w w . t o r r e n t s p y . c o mThere's lots of legal (and illegal -beware!) software, music, moviesand games available for

downloading here. To downloadthem, you'll need to install theBitTorrent cooperative distribution

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 mh t t p : / / w e b m a s t e 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 c s l i s t e d .

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 SEO Tipsw w w. m y s e o t i p s . c o mAn informative blog on how to optimiseyour website for search engines.

S i t e 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 nw w w. c s s z e n g a r d e n . c o mZen Garden allows you to apply differentCSS style sheets to a single page - the codestays, the page is transformed, but onlythe external CSS file changes.

VisualDesignerw w w. v i s u a l d e s i g n e r. n e t

i This 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 2I w w w . b e s t fl a s h a n i m a t i o n

s l t e . c o m / v o t e

Nestling in this ample resource of FlashL resources are the sites voted as Best Flash* Sites for the current week, plus the

i archives of previous weeks.

I The Weekly Standardsw w w. w e e k i y s t a n d a r d s . c o m

i Highlighting websites that take

full advantage of standards-baseddevelopment techniques.

CSSBeautyw w 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.

Re fe rence

WBSSiib'sma *

m i

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 youit reckon you've got what

web it takes, you couldalso submit youro w n w e b s i t e f o r

★ ★★★★

e 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 i s / c s s / i n d e x . h t m lAs the author writes, "this is not not a

complete resource: this is a fast resource".This list presents links with answers tomost of the coding questions you'll have.

y w u 11

, I T f ^c o n s i d e r a t i o n . L e t u s

know if you win!

Stylegala CSS Referencew w w. s t y l e g a l 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, includingexamples, 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 m /4 5 5 . c f m

i More 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 Referencesw w w. z v o n . o r g / i n d e x . p h p ? n a vi d = r e f e r e n c e sComprehensive reference site forall things XML.

D e v x . c o mvvww.devx.com/projectcootProject 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 l 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 ewww.w3schoo l s . com/css / css_re fe rence.aspThe W3C Schools e-learning portal is

completely free and a fantastic resourcefor training materials. Whatever aspectof web building you want to learnabout, they cover it, 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'll• f i n d a n y w h e r e . I n

addition, you'll

STAR SITE find plenty morehelp on their very

a c t i v e f o r u m .

Web authoringand site designThe Link ExchangewnATw. l ink-exchange.wsFree link exchange directory with

categorised listing of sites that activelyexchange links.

Evo l t . o rgw w w . e v o l t . o r gCreated and maintained by volunteers,Evolt's ad-free pages collect the latest

; 106 Practical Web Design


WcbDes ignersB 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 l<eep 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 into

helpful categories - much as we'vedone for you in thisb o o k m a r k s s e c t i o n .

Y o u d o n ' t e v e n w e b °Yo u d o n ' t e v e n

have to typeout the URLs

y o u r s e l f - j u s tclick and go!

STAR SITE★ ★ ★ ★ ★

Usability andaccessibilityWebusabil i tyAccessibi 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 /01 OS.phpThis 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 i i m i t s . h t m iSize limits for web pages to allowdesired loading times at variousconnection speeds.

R o b e r t ' s Ta l kwww. robertnyma 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. ^

i i a i v i c r

W e b x a c thttp://webxact.w a t c h fi r e . c o mThis s i te o f fe rs a f ree serv ice tha t

tests single pages for quality,

accessibility and privacy issues.Advanced options include

S 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.

you make theo s t o f t h e m .

w e b °

STAR SITE* ★ ★ ★ ★

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 webresources . There ' s a l so the B rowser

Archive, the largest archive anywhere fortesting sites for browser compatibility.

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.

FreeStickywww.freesticky.com/stickywebG 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.

The SiteExpertsC o m m u n i t yw w w. s i t e e x p e r t s . c o mLively forum and tutorials, withdemonstrations covering building,designing and maintaining websites.

Big Webmasterw w w. b i g w e b m a s t e r . c o mThere are scripts galore in any languageyou care to think of at this web designer'sresource s i t e .

W e b * ? j a s t e r s C h a n n e l .c o . nwww. webmasterschannt^' com6,500 links to web design andmaintenance resources, listed in categoriesthat include design, programming,marketing and ecommerce.

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 oii^sessed, or even beginners!

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.

CSS Playhttp;//cssplay.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 .

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 /academy/css_tutoria l/i ndex. htm IAn 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.

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 Sheetsw w w. c b e l . c o m / s t y l e _ s h e e t sLinks 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 tw 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 Va u l tht tp : / /cssvaul t .conn/resources .phpThe a im 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 'I M B D

p a g e - y o u c o u l d " "even suggest STAR SITEy 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 All the latest hosting deals available to you

Choose a site hostYour web host holds the key to a

consistent web presence, but do youwant the basics or something more?

The question we get asked the most atPractical Web Design is: 'Where can I getthe best hosting?'. Unfortunately, there'sno magic solution to this question, andthe answer is dependent on what yourneeds are. Maybe you need a Unixaccount, maybe your main concern is

price, or perhaps you're gagging forsome MySQL hosting. Whatever your

, requirements, over the next threepages, you'll find a host to suit you,and the next time you feel the urgeto ask someone 'that question', you'llknow where to go.

( Q

E( 0Z

11

o

■SI

J

(30c

aa

1

5*S

t r

§.

" i• c

y jKJ

o

a

a

Ic

8

I Ii l

I

a

3SE

X

a

I

sc

1

S 3V V V V \ V V V V V V V \ \ V

w w w . i ^ j r e g . c o . u K 0 9 0 0 2 2 1 11 2 3A " ^

✓ ✓ X X ✓ £ 1 9 11 0 0 M B ✓ . ✓ X ✓ ✓1 & 1 l n t e r n e t w w w . o n e a n d o n e . c o . u k 0 8 7 ^ ^ ^ 3 0 5 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A 5 0 0 M B ✓ ✓ ✓ ✓ ✓ X

1 0 0 P e r c e n t I T L t d w w w. l M i ^ M t ^ B 0207556 1070 , ✓ X■ ✓

X ✓ , X ✓ ✓ £ 1 5 0 '^ 150MB ' ✓✓ i ✓ X

1 2 3 c o n n e c t w w w. 1 2 3 c o n n e c t . c o . u k t o0 8 4 5 1 3 0 4 5 0 3 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 4 9 N / A ✓ ✓ ✓ ✓ ✓ ✓

2 0 2 0 M e d i a w w w . 2 0 2 0 m e d i a . c o m f • 0 8 7 0 7 3 9 2 0 2 0 . ✓ ✓ ✓ ✓ ✓ ✓' ✓

✓ £ 1 0 0 l O O M n ✓ . ✓ ✓ ✓ ✓ V I2 f 3 I n t e r n e t w w w. 2 f 3 . c o m 0 1 3 1 4 6 8 4 6 8 4 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 0 0 1 G b ✓ ✓ ✓ ✓ ✓ X

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

5 StarOM^wwwBlaillMgilll&co.uk 0 8 7 1 8 7 1 8 8 9 1 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ P O A P O A ✓ ✓ ✓ ✓ ✓ ✓

A W e b t t M M t w w w M M O M H n M r 0 2 0 8 3 9 9 6 6 7 5 ✓ X ✓ X ✓ ✓ X ✓ £ 3 4 . 9 5 1 0 M B V ✓ ✓ ✓ ' ✓ ✓

rXce Internet www.aceintemet.co.uk 0 8 7 0 7 4 0 7 5 5 5 ✓ ✓ ✓ X X X X ✓ £ 2 5 2 0 M B ✓ ✓ ✓ ✓ ✓ ✓I A G C C W o H d 07050 657322. . ✓ X

■ ✓X X X ✓ ✓ £ 2 4 4 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 AGUK-lnternei Solutions aiMl 0 7 0 9 2 1 7 5 7 0 7 ✓ ✓ ✓ X X X X ✓ £ 2 5 1 0 M B ✓ ✓ ✓ X ✓ ✓

1 AlC-Entanet www.aic.co.uk 0 1 2 7 9 3 0 6 6 7 7 ✓ ✓ ✓ X X ✓ . ✓ ✓ £ 3 5 N / A ✓ ✓ 1 x . ✓ V ■ x 1i Airtime www.airtime.co.uk 0 1 2 5 4 5 0 4 4 2 0 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ P O A N / A ✓ X X ✓ ✓ X

1 Aiivewww Ltd. www.alivewww.com 0 7 7 6 4 1 5 6 3 11' ✓

X ✓ X ✓ X X ✓ £ 2 9 . 9 9 5 0 0 M B ✓ ✓ ✓ . ✓ . ✓ '

IflBEHBBiLtd www.altohi^RaMM 0 1 6 5 3 5 7 3 3 3 0 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

A r c h l t e c ^ H ^ ^ V S o l u t i o n s L t d w w w . a r c h i t e c n e t c o . u k 6912 429 062 V X . ✓ , X X ✓ ✓ ✓ ' £ 3 01 0 0 M B ✓ ✓ , ✓ ✓ ✓ ' x

[ w w w d M M M M M K c o m n / a ✓ ✓ ✓ X ✓ X ✓ ✓ P O A SOOMB ✓ ✓ ✓ X ✓ ✓A S f t 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 v m . d s r m a i n t e n a n c e . c o m 0161320'1918 ✓ ✓ ✓ n / a ✓ ✓ ✓ X P O A N / A ✓ ✓ X ✓ ✓ ✓

A v i a t o r s N e t w o r k w w w . a v i a t o r s . n e t ^ 07002 742867 ✓ ✓ ✓ X ✓ X ✓ X £ 4 5 5 0 M 6 ✓ ✓ ✓ ✓ ✓ ✓

B u s i n e s s 1 s t v i w w. b - l s t c o m 0 8 7 0 7 5 7 4 1 4 1 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ P O A N / A . ✓ ✓ X ✓ X

B u s i n e s s S e r v e I h w w w . b u s i n e s s s e f v e . c o . u k 0 8 7 0 7 5 5 5 5 6 5 ✓ ✓ ✓ ✓ ✓ X X ✓ £ 9 9 . 9 5 2 5 M B ✓ ✓ ✓ ✓ ✓ X

1 A l H M L t d w w w A H ^ M A u k 0870 516 8160^ ✓ , ✓ ✓ ✓ X X ✓ ✓ . P O A N / A _' ✓

✓ ✓ ✓ V ✓

1 Ciara.net Ltd wv^.clara.net 0 8 4 5 3 5 5 2 0 0 0 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 9 . 9 9 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Colt www.cott-teiecom.co.uk _p80[p 358_3p41 ✓ , ✓ , X ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ X ✓ ✓

1 t t M M L t d w w v \ « M i A M M 0 2 0 8 2 8 9 3 0 3 9 ✓ X ✓ X X ✓ ✓ ✓ (50MB ✓ ✓ ✓ ✓ ✓ X

1 Conxion www.conxion.net 0 2 0 7 5 3 7 6 2 4 0 ✓ X ✓ ✓ . ✓ ✓ ✓ ✓ P O A P O A , ✓ ✓ ✓ ✓

C W C S w w w. c w c s . c o . u k 0 8 7 0 7 0 3 1 0 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 1 0 7 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

] B A H i i n t e r n e t w w w t fl f t H f t c o . u k 0 1 5 1 2 2 7 4 2 4 4' X

, ✓ ✓ ✓ ✓ ✓ ; ✓ , ✓ £ 1 0 0 5 0 M B ✓ , ✓ » x , ✓ V ✓

f DataNet www.data.net.uk 0 8 0 0 0 8 5 0 0 1 0 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ £ 1 0 0 2 5 M B ✓ ✓ X ✓ ✓ X

1 Oatex UK www.datexuk.co.uk 0 8 7 0 7 4 6 1 7 8 8 ✓ ✓ ✓ ■ ✓✓ ✓ ✓ ✓ £ 1 8 5 ., 3 0 0 M B ✓ ✓ ✓ ✓ ✓ 1*^

D e d i c a t e d S e r v e r s w w w. d e d i c a t e d - s e r v e r s . c o . u k 0 8 7 0 0 1 2 6 6 0 0 X X X ✓ ✓ ✓ ✓ X P O A N / A ✓ ✓ ✓ ✓ ✓ ✓

D 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 ✓

ipMMgn R Web Solutions www.designrweb,co.uk 0 1 2 0 4 6 5 0 1 3 2 ✓ X ✓ X X ✓ X ✓ £ 3 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓S e r v e r s L t d w w w. d s v r . c o . u k 0 8 0 0 1 9 5 8 0 6 0 ✓ X . ✓ X

■ ✓✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ X

D o m a i n B u s t e r w w w . d o m a i n b u s t e r . c o m 0 8 7 0 7 4 1 1 4 3 8 ✓ ✓ ✓ X ✓ X ✓ ✓ P O A 5 0 M B ✓ ✓ X ✓ ✓ X

DRS 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


Hosting All the latest hosting deals available to youo

£■ o

sA

I 1E3C

oco

• o

I<D

■gc

a3

■ o

O )< t r

JSO )c

' a&

Sj

I3

s.So

to

£3( / >

?a

g 'o

s

. a

S

•oic

52c

p

sc

X

Sc

£

■2|13

V V \ V N . \ V V v \ \ V \ V

f E Business Services Ltd www.ebjzs.net 0 8 0 0 1 6 9 5 8 6 7 X ✓ ✓ X ✓ ✓ ✓ ✓ £ 8 5 7 5 M B ✓ ✓ ✓ ✓ ✓ ✓

Easynet www.ea&ynet.net n / a ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 9 9 5 0 M B ✓ ✓ X ✓ ✓ ✓

Eaiyspace www.easyspdce.com 0 8 7 0 7 5 5 5 0 8 8 ✓ X X ✓ X ✓ X ✓ , £23 1|60MB ✓ ✓ ✓ X ✓ ✓

Edipse 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

1 Efficient www.efficienthost iBco.uk 0 7 0 2 0 9 7 1 2 6 2 ✓ X ✓ X X ✓ X ✓ £ 1 3 1 5 0 M B ✓ ✓ ✓ X ✓ ✓

E 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

1 EliteUKServe.Net ||ia://eliteukserve.net 0 8 7 0 7 4 1 5 8 9 8 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 4 9 S O M B ✓ ✓ ✓ ✓ ✓ ✓

E 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 ✓ ✓

E u r o f a $ t h o 5 t . c o m w w w . e u r o f a s t h o s t . c o m 0 8 0 0 0 7 2 9 1 6 0 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 2 9 . 9 9 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

iiylHl Ltd www.e^^^^t!l.com 0 1 3 2 5 3 0 3 111 ✓ X ✓ X ✓ ✓ X X £ 8 5 S O M B ✓ X X ✓ ✓ ✓1 Fasthosts www.fasthosts.co.uk 0 1 4 5 2 5 4 1 2 6 0 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £19.991 100MB ^ . . . ✓ ✓ ✓ ✓ ✓

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 S O M B ✓ ✓ ✓ X ✓ X

F i « t D i r e c t S o l u t i o n s L t d w w w. f i r s t d i r e c t s o l u t i o n s . c o . u k 0 1 3 2 4 4 8 9 4 4 8 ✓ X ✓ X ✓ ✓ X ✓ £ 3 9 . 9 9 S O M B X ✓ ✓ ✓ ✓ ✓F i r e t - W e b N e t w o r k S o l u t i o n L t d w w w . f j r s t - w e b . n e t 0 8 7 0 7 4 0 9 2 2 3 X ✓ ✓ X X ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

1 Freedom 2 Surf www.freedom2surf.net 0 1 7 2 7 8 11 5 3 0 ✓ X ✓ ✓ ✓ X ✓ ✓ £ 2 4 SOMB ✓ ✓ ✓ ✓ ✓ ' X

F r e e V i r t u a i 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 ✓ ✓ ✓ £15 ]tl50MB ✓ ✓ ✓ X ✓ ✓F r e e z o n e I n t e r n e t VAW W. f r e e z o n e . c o . u k 0 8 4 5 11 7 0 3 6 6 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 3 9 . 9 0 S O M B ✓ ✓ ✓ ✓ ✓ X

F 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 ✓ ✓ ✓ ✓ ✓ ✓

j Future Internet Services WAVw.futurelnternetservices.com 0 8 4 5 6 4 1 0 7 7 6 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 9 . 9 9 |25MB ✓ ✓ ✓ ✓ ✓ X

Gtacom 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 ✓ ✓ ✓ ✓1 Global (Sold Network Ltd wwwjtfobatallAro.iiic 0 1 9 9 2 3 0 3 0 9 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 7 8 SOMB ✓ ✓ ✓ ✓ ✓ X

Globell Business Solutions Ltd www.globell.co.uk 0 8 0 0 0 2 7 4 1 4 1 X ✓ ✓ X ✓ ✓ ✓ ✓ £ 9 9 3 0 M 8 ✓ ✓ ✓ ✓ ✓ X

Hariequlnd^atns www.hartequindomains.com 0 8 0 0 0 8 3 2 0 7 7 X ✓ ✓ X ✓ ✓ ✓ ✓ £ 4 2 0 I G B ✓ ✓ ✓ ✓ ✓ ✓Hocling UK www.hostinguk.net 0 8 7 0 2 0 0 3 0 4 4 X ✓ ✓ X ✓ X ✓ ✓ £ 4 9 . 9 9 1 0 0 M 8 ✓ ✓ ✓ ✓ ✓ ✓

H o t C h i l l i I n t e r n e t S o l u t i o n s v y w w. h o t c h i H i . c o m 0 8 7 0 7 5 8 9 9 9 9 ✓ ✓ ✓ ✓ ✓ ✓ X ✓ £ 11 0 1 0 0 M B ✓ ✓ ✓ ✓ X

H o t l i n k s I n t e r n e t S e r v i c e s w w w. h o t l i n k s . c o . u k 0 2 0 8 8 8 3 0 0 0 0 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 1 0 0 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓1 HubNut Ltd www.hubnut.net 0 1 6 1 2 2 3 9 4 3 5 ✓ X ✓ X X X X ✓ £ 5 5 1 0 0 M B ✓ ✓ ✓ X '✓ "" X

Hyperactive Hosting Services wvvw.hostituk.com 0 1 2 0 2 4 2 11 0 6 ✓ X X X X X X ✓ £ 5 0 1 0 M B ✓ ✓ ✓ ✓ ✓ X

1 I U h M w w w . h H l i i V u k . c o m 0 2 0 7 2 3 1 7 7 6 6 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ £ 7 9 . 5 0 1 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

interComputttf Technoiogy Ltd vtA^.inctech.com 0 2 0 7 4 8 6 9 6 0 1 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ ✓

1 Interhost www.jnterhost.co.uk 0 8 7 0 7 6 5 1 2 0 8 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 0 " 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

Internet Advertising Corporation www.iaclnet 0 8 7 0 0 1 2 1 2 3 4 X ✓ ✓ ✓ X ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

1 internet Central Limited www.netcentral.co.uk 0 1 7 8 2 6 6 7 7 8 8 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ 2 5 M 6 ✓ ✓ ✓ ✓ ✓ ✓

I n t e r n e t F o r B u s i n e s s L t d w v m . i f b . n e t 0 1 2 2 4 3 3 3 3 7 0 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 3 0 0 SOMB ✓ ✓ X ✓ ✓ X

1 Internet Promotions Ltd vmw.interne'MHrtfans.co.uk 0 1 8 4 7 8 9 2 8 9 2 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 0 t lOMB ✓ ✓ ✓ ✓ ✓ ✓I n t e r n e t t e r s L t d w v i w . i n t e r n e t t e r s . c o . u k 0 8 0 0 3 1 6 3 3 7 7 ✓ X ✓ X X ✓ ✓ ✓ £ 7 0 5 0 0 M B ✓ ✓ X ✓ ✓ X

I n t o n e t L t d w w w . j n t o n e t . c o . u k 0 2 0 8 9 4 1 9 1 9 5 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ IjtiOMB ✓ ✓ X ✓ ✓ X

I n t r a l i n x I n t e r n e t S e r v i c e s w w w. i n t f a l i n x . n e t 0 8 7 0 1 2 2 2 2 2 4 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 6 0 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 3lnweb Networks www.inweb.co.uk 0 8 0 0 0 6 1 2 2 2 2 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ 1l o m a r t w w w . i o m a r t . c o m 0 8 4 5 2 7 2 0 0 5 2 ✓ ✓ X ✓ ✓ X ✓ ✓ ^ £ 2 5 J1 5 0 0 M B ✓ X ✓ ✓ ✓ ✓

! IZ3R Solutions www.izr.com 0 8 7 0 7 4 4 7 7 9 9 X ✓ ✓ ✓ X ✓ ✓ ✓ P O A 1 N/A ✓ ✓ ✓ ✓ ✓ X

K e C o n n e c t w w w . k e c o n n e c t . c o . u k 0 1 4 7 3 4 0 3 0 2 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ X £ 2 1 0 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

1 I n t e r n e t w w w . k e n c o m B i n e t 0 1 5 3 9 7 2 4 5 6 4 X ✓ ✓ ✓ ✓ X ✓" £49

2 5 M B ✓ ✓ ✓ ✓ ✓ X

0 1 2 7 4 2 2 0 0 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 9 6 2 0 M B ✓ ✓ X ✓ ✓ X

LeSgend JSM Net www.le9endism.c0.uk 0 1 2 1 7 2 2 2 0 4 0 ✓ X ✓ ✓ ✓ X ✓ X £ 2 5 2 0 M 8 ✓ ✓ X ✓ ✓ X

L u n a i n t e r n e t w w w . l u n a . c o . u k 0 8 4 5 3 4 5 0 1 7 5 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 4 9 1 0 M B ✓ ✓ ✓ ✓ ✓ X

1 Lumison www.lumison.net n / a ✓ ✓ ✓ X ✓ X ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ ✓

tingle Moments wwwJiM^ic-moments.com 0 8 0 8 1 0 0 6 2 0 0 ✓ X ✓ ✓ ✓ ✓ ✓ ✓ £ 7 9 . 5 0 6 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓1 Mailbox Internet Ltd www.maiibox.net.uk 0 8 4 5 1 7 7 3 4 4 5 ✓ ✓ ✓ ✓ X X X ✓

" £ 1 0 02 5 M B ✓ ✓ X ✓ ^ - ✓

Mwcys Internet Solutions www.maxys.net 0 11 5 8 4 7 8 1 4 6 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 4 9 3 0 M 8 ✓ ✓ X ✓ ✓ X

1 Metronet www.metronet.co.uk 0 2 0 8 4 2 6 4 4 4 6 ✓ ✓ ✓ ✓ ✓ X X ✓ £ 7 9 3 0 M B ✓ ✓ X ✓ ✓ X

MidtandWeblliillpwww.midlandwebdesign.co.uk 0 1 5 4 3 5 7 1 2 0 0 ✓ X X X X X X ✓ £ 9 5 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓1 Mistral Internet wv^w.mistral.co.uk 0 8 0 0 3 2 8 7 2 5 3 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ P O A N / A ✓ ✓ ^ , ✓ ✓ ' ✓

N a m e s c o v t ^ w w. n a m e s . c o . u k 0 8 7 0 1 2 0 8 8 8 8 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 4 9 . 9 9 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

f NetBenefitwww.netbenefit.com 0 8 0 0 9 1 7 0 1 4 2 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ■ £99N / A ✓ ✓ ✓ ✓ ✓ ✓ J

N e t c e t e r a L t d w w w. i n e t c . n e t 0 8 0 0 2 9 8 7 2 1 4 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 0 1 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓

1 Netkonect Communications lit www.netkonect.net 0 8 0 8 1 6 3 0 0 0 0 ✓ ✓ ✓ X ✓ X ✓ ✓ £ 6 0 2 0 0 M B ✓ ✓ X ✓ ✓Netlink Solutions Ltd www.netlink.info 0 8 7 0 7 4 1 0 9 0 2 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ ✓ ✓ ✓


Hosting All the latest hosting deals available to you

Net Magik www.netmagik.netN e t M a t t e r s w w w . n e t m a t t e r s . n e t

N e t N a t i o n C o m m u n i c a t i o n s w w w . n e t n a t i o n . c o m

N e t s c a / i b u r U K L t d w w w. n e t s c a l i b u r . c o . u k

N e t s c a n U K w w w. n e t s c a n u k . c o m

NewNet pic www.newnet.co.ukNildram www.nitdram.net.NSDesign Ltd www.nsdesign.co.ukN T T / Ve r i o w w w. v e r i o . c o . u k

One Stop Hosts www.onestophosts.com

Onyx lnternetwww.onyxnet.co.ukO r b i t I n t e r n e t w w w . o r b i t - l n t e r n e t . c o m

OrbitalNet Ltd www.orbital.netO s c u r a L t d w w w. o s c u r a . c o . u k

Paradise Internet www.pins,co.uk

Pay as you Host www.pay-as-you-host.comPinnacle Internet www.pinnacle.netuk

Pipemedia Business Communications www.pipemedia.netPIPEX lnternetwww.pipex.netPLANT hosting & co-location www.plant.nlPlugtn.co.uk Ltd www.ptugin.co.ukPortland Communications Ltd www.portland.co.ukPower internet Ltd www.powernet.co.ukProweb (UK) www.proweb.co.ukPuqiitPaw Ltd www.purplt^)aw.co.ukQawebhosting www.qawebhcsting.comQuik Internet www.Quikinternet.co.ukRapidhost Ltd www.rapidhost.co.ukREDNET Ltd www.red.netSAQ Internet Ltd www.saqnet.co.ukS c o t l a n d O n L i n e w w w. s c o t t a n d o n l i n e . c o . u k

S u r f Z l t w w w. s u r f 2 i t . c o . u k

Ta l k - 1 0 1 w w w, t a l k - 1 0 1 . c o m

The Cyber Mill Ltd www.cybermill.co.ukThe Host For You www.thehostforyou.co.ukT h e N a m e w w w . t h e n a m e . c o . u k

Timewarp Internet Ltd www.timewarp.co.ukTotal CormaclMty Providers Ltd www.tqi>.co.ukTr i n i t e L t d w w w. t r i n i t e . c o . u k

UKFAST www.ukfast.netUKIP Ltd www.ukip.co.ukUnited Web Hosting www.unitedwebhosting.co.ukU V N e t w w w . u v . n e t

Va l u e W e b H o s t s w v v w . v a l u e w e b h o s t s . c o m

Ve l n e t w w w. v e l n e t . c o . u k

V i r t u a l I n t e r n e t w w w . v i . n e t

V 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

Web Age www.01webdesign.co.ukWeb Tapestry Ltd www.webtapestry.co.ukW e b F u s i o n w v w . w e b f u s i o n . c o . u k _

W e b s u r f U K w w w . w e b s u r f . c o . u k

X c a l t b r e c o m m u n i c a t i o n s L t d w w w. x c a l i b r e . c o . u k

Zen Internet www.zenwebhosting.com

S e l r e t t o w w w. s e i r e t t o . c o m

Shared Knowledge Ltd vyA^A^ .sharedkncMvlt((J^,netSmartways Internet www.smartways.netS O S I n t e r n e t L t d w w w. s o s i . n e t

S t u d i o Z O n i i n e w w w. s 2 o . c o . u k

Z e ^ e t S e r v i c e L t d w w w . z e t n e t . c o m

Phone number Unix-shared hosting Windows-shared hosting 'Shared servers bacl<ed up?Own data centre? Z'Service Level Agreement? Shopping cart available? Dedicated servers available? Microsoft FrontPageserver extensions? Lowest price per year* Basic storage allocation CGI scripting support? 'Database eg MySQUSQL? 'Web control panel? Non-premium phonetechnical support?Email technical support? '24-hour technical

0 1 8 5 8 4 6 8 6 8 1 ✓ X ✓ X ✓ ✓ X ✓ £ 6 0 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 7 4 5 6 9 9 4 X X ✓ X X ✓ X ✓ £20 J 5 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 0 0 0 2 8 1 8 6 9 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 7 0 3 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 0 0 0 7 2 0 0 0 0 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 3 2 4 1 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 0 0 7 3 1 8 4 4 7 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 1 2 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓0 8 4 5 3 5 5 4 4 5 5 ✓ X ✓ ✓ ✓ ✓ ✓ ✓ £ 2 3 2 0 0 M B ✓ ✓ X ✓ ✓ ✓0 8 0 0 0 2 6 0 9 5 3 ✓ ✓ X ✓ ✓ X ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ ✓

0 7 0 9 2 2 2 2 0 8 4 ✓ ✓ ✓ X X X X ✓ £ 2 9 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

0 2 0 7 7 6 7 3 7 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 0 9 5 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 4 4 4 0 8 9 7 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 9 9 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 4 5 7 7 1 5 7 1 5 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓0 1 2 5 3 7 4 0 5 0 0 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ P O A 1 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 0 0 3 8 9 1 3 8 7 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 2 9 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓0 11 8 9 5 9 7 6 0 0 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 2 0 5 0 M B ✓ ✓ ✓ ✓ ✓ X

0 7 0 6 9 9 0 3 7 3 3 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 2 8 5 1 0 M B ✓ ✓ X ✓ ✓ ✓

0 8 7 1 8 7 1 1 8 1 5 ✓ X ✓ ✓ X X X X £ 4 7 . 8 8 1 0 0 M B ✓ ✓ ✓ X ✓ X

0 8 7 0 9 9 0 8 4 1 8 ✓ ✓ ✓ X ✓ X ✓ ✓ £ 1 0 0 5 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 4 5 5 8 2 8 2 1 8 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 9 9 N / A ✓ ✓ ✓ ✓ ✓ ✓

0 8 7 0 6 0 0 4 4 5 4 ✓ X ✓ ✓ ✓ ✓ ✓ ✓ £ 7 9 . 5 0 6 0 0 M B ✓ ✓ X ✓ ✓ X

+ 3 1 2 0 5 6 2 6 6 2 6 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 9 0 3 G B ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 0 7 5 8 4 4 6 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 9 9 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 7 0 7 4 1 0 9 9 4 ✓ ✓ ✓ ✓ ✓ X X X F r e e 1 5 M B ✓ ✓ ✓ ✓ X ✓

0 1 9 0 8 6 0 5 1 8 8 ✓ ✓ ✓ ✓ ✓ X ✓ ✓ £ 6 0 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 5 0 0 6 3 6 3 4 3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 9 . 9 9 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

n / a ✓ X ✓ X ✓ ✓ X ✓ £ 4 0 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 3 2 5 3 0 1 8 7 9 ✓ ✓ X X X X X ✓ £ 5 0 1 5 0 M B ✓ ✓ ✓ ✓ ✓ X

0 1 2 7 0 2 1 2 1 9 9 ✓ X X X X X X ✓ £ 6 0 2 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 6 2 8 4 0 0 6 5 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 6 0 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 4 9 4 5 1 3 3 3 3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

0 8 7 0 7 3 7 7 7 0 0 ✓ ✓ ✓ X ✓ X ✓ ✓ P O A 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓0 8 0 0 0 2 7 2 0 2 7 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A 2 5 M B ✓ ✓ ✓ ✓ ✓ ✓0 7 9 0 9 6 9 6 8 4 0 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 4 9 1 5 M B ✓ ✓ ✓ X ✓ X

0 1 7 0 7 8 8 5 8 0 0 X ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 5 0 5 0 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 6 0 4 6 7 0 5 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 7 6 9 5 7 4 4 5 7 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 7 4 1 7 2 2 6 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P O A N / A ✓ ✓ ✓ X ✓ X

n / a ✓ X ✓ X X ✓ X X £ 4 7 . 5 0 1 0 M B ✓ ✓ ✓ ✓ ✓ X

0870 754 1011 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ P O A N / A ✓ ✓ X ✓ ✓ X

0 1 7 5 7 2 4 9 3 4 2 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 0 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 7 4 4 1 6 0 7 X ✓ ✓ X ✓ ✓ ✓ ✓ £ 6 2 . 5 0 5 0 M B ✓ ✓ X ✓ ✓ X

n / a ✓ X X X X X X ✓ £ 6 0 2 5 M B ✓ X ✓ X ✓ ✓0 8 7 0 7 5 7 11 4 0 ✓ X ✓ X ✓ ✓ ✓ ✓ £ 2 0 i 1 5 0 M B ✓ ✓ X ✓ ✓ X

0 2 3 8 0 5 7 1 3 0 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 9 9 1 5 M B ✓ ✓ X ✓ ✓ X

0 1 2 9 6 3 0 0 3 0 0 X ✓ ✓ ✓ ✓ X ✓ ✓ £ 3 0 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 4 5 4 5 8 4 5 4 5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 9 9 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 7 7 2 9 0 8 0 0 0 ✓ X ✓ ✓ X X ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 1 5 2 7 5 0 2 3 6 7 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 5 0 N o l i m i t ✓ ✓ ✓ ✓ ✓ X

0 1 7 5 3 7 7 6 6 9 9 ✓ X ✓ X ✓ ✓ ✓ X £ 4 8 1 0 M B ✓ ✓ X ✓ ✓ ✓n / a ✓ X ✓ X X X X ✓ £8.99 1 No limit ✓ ✓ ✓ X ✓ X

0 8 7 0 7 4 4 0 1 5 1 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 2 9 2 0 M B ✓ ✓ ✓ ✓ ✓

0 8 0 0 11 7 7 4 4 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 1 2 0 2 5 M B ✓ ✓ ✓ ✓ ✓

0 8 4 5 1 2 3 2 6 9 4 ✓ X X X X X ✓ ✓ 1 2 5 M B ^C- ✓ ✓ ✓ ✓ X

0 8 7 0 0 11 6 6 2 1 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 1 4 9 1 0 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 0 0 0 1 5 1 7 1 8 ✓ ✓ ✓ X X ✓ ✓ ✓ £ 3 5 1 0 M B ✓ ✓ ✓ ✓ ✓ ✓0 1 1 5 9 1 7 0 0 0 0 ✓ X ✓ ✓ ✓ ✓ ✓ ✓ £ 9 9 . 9 5 1 . 5 G 8 ✓ ✓ ✓ ✓ ✓ ✓

0 7 9 3 1 3 8 6 4 5 5 ✓ ✓ ✓ X ✓ ✓ ✓ ✓ £ 1 2 0 N / A ✓ ✓ ✓ ✓ ✓ ✓0 8 7 0 0 5 0 0 0 8 0 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ £ 3 9 . 9 5 5 0 M B ✓ ✓ ✓ ✓ ✓ ✓

0 8 7 0 6 0 0 0 9 7 1 ✓ ✓ ✓ ✓ X X ✓ ✓ £ 5 0 5 0 M B ✓ ✓ ✓ ✓ ✓ X

0 8 7 0 7 4 3 0 5 6 5 ✓ ✓ ✓ ✓ X ✓ ✓ ✓ £ 5 0 5 0 M B ✓ ✓ X X ✓ X

a t


.Backi s s u e s Practical S!


Back issues

NOW INSIDE • AMA/INC. WEB ALBUM SOFTWAREa l l t h e t u t o r i a l fi l e s y o u n e e dV I / n \ / IV I . flash v ideo lessons and more . .

• •

Spice up Mmyoursite!|f Jw Discover the too 20 features thatHdPDiscover the to|> 20 features that

keep visitors glued to your pagpsi

6 6P A G E S O F

E S S E N T I A L. T U T O R I A L Sk &ADVICE

Google IAnalytics |

YOUR QUESTIONS^ANSWERED! 1livi'p<q>'in(v«vbbuildiiw] tip\ ftiHTi

WIN! A PC, WEB HOSTING, DOMAIN NAMES, AND MORE INSIDE...

Issue 28J u n e 2 0 0 6■ Spice up your si teD i s c o v e r t h e f e a t u r e sthat'll keep visitorsglued to your pages■ PLUS: Track your sitevisitors, animateb u t t o n s w i t h F l a s ha n d c r e a t e a t t r a c t i v e

pullquotes with CSS■ T E S T E D ; S e a r c h

Engine Composer, RSSF e e d M i x a n d 1 & 1

Dynamic Content1^ ON THE CD;

WebAlbum Lite, XPW e b B u t t o n s a n d a nhour of Flash training

N O W I N S I D E • a c c l a i m e d e c o m m e r c e s o f i w a r ern -RAM • "Y IU TORIA l F ILE YOUIL NEED jtfUIVI ♦CSSVIDEOPROJECTSANDMORfc... J

• •

Show me the.

moneyllEarn a mint from Goodeadfr,Earn a m trtt from Google ads . J10 great ways to make Mgi:Sell stuff from your siteasjr^

^ e t f u p' start setling today

withafuflcopyof■ A c t i n i c C a t a l o g 2 5

LCI IF ! 1

W E B S I T E B U I L D - O F F ! C S S B E A U T Y T I P S F U C K R P O W E R !C X H H M j f i w x k u g n v n i h i w y v u w t v t K C i » A * i t u n n ( i g b s b w U i C S S ^ ^ D i M P V « > « w l o k M d H c k i u l t 3 ( M n i at9k«tOv-»rsv»J»tJVi«»«*temxt»tth idttt3l«y><Mr«t*ct>iK*iitiniry** »n>*<*v<*hth»pc«*o«;4v3S(<^

I s s u e 2 9

July 2006■ S h o w m e t h e

money Quick and easyways to make moneyfrom your web site■ P L U S ; C r e a t e

stunning lists with CSS,load Flickr photos intoany site and earn amint from Google ads■ TESTED; vBulletin,phpBB and two moreo n l i n e f o r u m

management tools■ O N T H E C D ; S t a r t

selling today with a fullcopy of Actinic Catalog25, plus CSS videos

r\NOW (NSDL -EVERY TUTORIAL FILE YOU COULD NEEDrn-ROM ♦ilSOOFDEVILISHLYGOODSOFTWARE JWJ It • PHOTOSHOP VIDEOS AND MUCH MORE J

• •

iSEVEN .DEADLY I

/> SINSANDHOWTOBEATTHBVI !

T h e h o t t e s ttu to r i a l s eve r !• tJwign site ii?tTipl,«« v/frti CSS

• AcJd YojTt/lw video toymir 5W

^Sitei r b u i l d - o f f !Seehowfburpro<l«$igners9et to grips with cfeugning

__ a site for a pub

P A G E S O FS i Z Z U N G

T U T O R I A L SA N D A D V I C E

THIS MONTH

hould Microsoftcall it a day,

If 1IMPROVE YOUR SITE PROBLEMS SOLVED!

I s s u e 3 0

August 2006■ Seven dead lydesign sins Tips too v e r c o m e c o m m o n

design mistakes» P L U S ; E m b e d

Yo u T u b e v i d e o i n

your site, create a FlashMP3 player, and useP H P t o c r e a t e f o r m s■ TESTED; Fireworks 8,Xara Xtreme, Inkscapea n d C o r e l D r a w S u i t e» . O N T H E C D ; D T P

with Serif PagePlus 8,TwistedBrush, andPhotoshop techniquev i d e o t u t o r i a l s

Br If you've missedan issue, just pick

up the phone and call;

O v e r s e a s

UNITED KINGDOM - £7.99nEUROPE - £8.99

REST OF WORLD-£9 9^

Visit our website today! www.pwdmag.co.ukPractical Web Design 111

Glossary Avoid confusion with our handy description of design terms

Glossary typically define colours using RGB(red, green, blue).

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 doesnot 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. It'sheld on a server but works on yourcomputer, typically inside a browser.

A R C H I V EA file that combines a number ofother files into one for transfer. Theseare 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. Amultimedia 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. It's a server-side scriptinglanguage, mostly used on Windowsplatforms for interactive functions.

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 userto look at various kinds of Internetresources. The two most widely usedbrowsers are Microsoft InternetExplorer (IE) and Mozilla Firefox.

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 graphics files.

C O N T E N TThe words, images, pictures or soundsthat mal<e up a website.

C O O K I EA cookie is a file, held on yourcomputer, that's associated with aspecific website. Cookies identifywebsite visitors to the site, enablingyou to customise web pages for them.Get consent from your visitor beforeyou 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.

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 AT I O NThe method used to identify a user,program or computer on the web.

B A N N E RA banner is a graphic image (static,animated or rich media) that is placedon websites as an advertisement.

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 ofrules that define how a web servercommunicates with another pieceof software on the same machine,as well as how the other piece ofsoftware talks to the web server.When a user fills out a form on aweb page, the server passes theinformation to a small program thatprocesses the information and maysend back a confirmation message.The CGI standard defines howthe 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.

E s m

A graphic image that's composed of apattern of dots, or pixels. Also knownas raster graphics. Common bitmapformats include are GIF, JPEG and PNG.

A computer or software programthat is used to contact and obtaindata from a server, typically acrossthe Internet or a network. Each clientprogram 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 AT E D L I N EA permanent connection to theInternet that's separate from atelephone line.

Dynamic 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 topics 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 an Internet addressthat Is its unique identification, e.g.'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 devicesee ppi.

Digital Subscriber Line. A fast Internetconnection over a regular phone line.

D Y N A M I CA dynamic web page has elementsadded to it between when it isrequested 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 viewingdata as it travels across the Internet.

E X P O R TTo save a file in a different format,often one associated with anotherprogram. For example, many AdobePhotoshop files can be exported tobecome GIF or JPEG files.

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 ofnetwork communicat ion. Most of tenused between an individual computera n d t h e I n t e r n e t .

Vector graphic software fromMacromedia that allows a singleanimation file to play on all browsers,as long as the Flash plug-in isinstalled. One of the advantages ofFlash animations 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 s

distinct 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 ESoftware distributed free on the net.

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) hasb e e n v i e w e d o r d o w n l o a d e d .

H O M E P A G EThe main or first page of a website.

H O S T I N GThe act of storing and providinginformation over the Internet.Hosting companies offer hostingspace for lease, enabling companiesor individuals to set up their ownw e b s i t e s o r o t h e r I n t e r n e t c o n t e n t .

Hypertext Markup Language. HTMLis the language of the web. HTML is aset of tags that are used to define thecontent, layout and the formattingo f t h e w e b d o c u m e n t . W e b b r o w s e r suse 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 TText that is cross-linked to otherdocuments 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.

Breaking an image into smallerpieces to make it load into a webbrowser faster

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 .


Glossary Avoid confusion with our liandy description of design terms

Apple's computer music application,now upgraded to include the world'slargest downloadable music store.

A programming language designedfor the web. Java is similar to the 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.

An abbreviation for kilobyte or 1,024bytes.

Kilobits per second - a measure ofbandwidth, particularly used withmodems and slower broadband lines.

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.

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.

M E G A B I TOne eighth of a megabyte. Ameasurement unit most often used todefine broadband and other networkspeeds. Mbps is megabits per second.

M E T A T A GA Specific kind of HTML tag thatcontains information about thepage itself. Typical uses of metatags are to include information forsearch engines to help them bettercategorise a page.

Mult ipurpose Internet eMailExtension. A standard used when acomputer needs to communicate withanother program about the type offile being sent.

To maintain an exact copy of a fileor files held on another server. Busydownload sites often make mirrorarrangements to ease the demand ontheir own servers.

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 .

Portable Document Format. PDFfiles can be viewed using Adobe'sAcrobat cross-browser, cross-platformcompatible text viewing software.

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.

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.

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.

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

N A V I G A T I O NS T R U C T U R E

The 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.

N E T I O U E T T EAcceptable behaviour online - forexample, don't write emails entirely incapital letters, because many peopleconsider these uncomfortable to read.

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 .

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 informationcollected from different sources.

Portable Network Graphics. Agraphics format supported by theweb, though not by all browsers.

Stands for pixels per inch. Used todescribe screen resolution.

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.

c U l 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 SReferrals are tracked in websitelogs, 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 anHTML document. While an absolutelink includes the whole address(e.g. http://vvww.thisdomain.com/glossary/thls.page.html), arelative link shows only the path tothe page from the position of thepage in which the link is placed (e.g./glossary/thls.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) usetwo characters each to describe thecolour'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 capability.

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.

u mReally Simple Syndication (formerlyRich Site Summary) Is a platform overwhich a webmaster can instantlydeliver summarised Information aboutthe 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 ESoftware that searches onlinedocuments 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 .

S E R V E RA computer that holds files on theInternet, ready for other computers orclients to access.

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. Manyare database-driven for easierorganisation 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.

Each cell within a table can containtext, images or both.

A series of posts, related to the samesubject, in a discussion group or forum.

I I W MTagged Image File Format. A high-quality image format.

D n a z i n K KAn HTML tag that's used to define awebsite's header, appearing at thetop of a browser window.

T R A F F I CThe number of visitors to a givenwebsite. It's measured with stats suchas hits and page access.

A group of information pages on aw e b s i t e .

A computer program - hidden inanother program - that destroyssoftware or collects informationabout the use of the computer.

l i l l l l l l l l — | i IThe 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 it 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,such as HTML and CSS.

An HTML structure used to organiseweb content into rows and columns.

X H T M LExtensible Hypertext MarkupLanguage. An XML/HTML hybrid.

Extensible Markup Language.A format for defining pieces ofinformation and how they relate toeach other within a set of documents.

Extensible Style Language. Aspecification for separating stylefrom content when creating HTML orXML web pages. Similar to the layoutfunctionality that CSS provides.


P r a c t i c a l

Next month

P L U S !Create killer forms in Dreamweaver

Use the flexibility of CSS to create tab-style navigationMake text resizable with inline browser widgets

Add PHP tools to your site with open source scripts... and much, much more!


Practical Web Design, Future Publishing,30 Monmouth Street, Bath BA1 2BW, UKTel: +44 (0)1225 442244 Fax: +44 (0)1225 732295

E D I T O R I A L• Editors Dan Oliver (So long, Dan, and best of luck!)

& Alex Summersby, alex,sunnmersby@futurenet,co.ul<• Art editor Julian Jefferson

[email protected]• Product ion edi tor Shaun Weston

shaun.weston@futurenet .co.uk• CD editor Sam Cavender

sam.cavender@futurenet,co.uk• Selected contr ibutors Rachel Andrew,

John McAllister, Tom Hughes, Rob Buckley, DavidForeman, Craig Grannell, Alex Haylock, Richard Hill,Karl Hodge, Paul Hoskins, Phil Hoskins, Gary Marshall,Mark Penfold, Marc Peter, Andres Rojas, Paul Wyatt

• Cover photographer Kath Lane-Sims• Cover stylist Ami Penfold

A D V E R T I S I N G• Advertising manager Rosa Smith

[email protected],uk• Key account manager Giles Crosthwaite-Scott

[email protected]• Display sales executive Helen [email protected]

• Classified sales executive Nejia [email protected]

P R O D U C T I O N & C I R C U L A T I O N• Product ion contro l ler Mark Anson

mark.anson@futurenet .co.uk• Ad production coordinator Tiffany Nicholas

[email protected]• Software copyright coordinator Sarah Williamssarah.wi 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

S U B S C R I P T I O N E N Q U I R I E S• To order, renew or check your subscription details you

can go to www.myfavourltemagazines.co.uk.Alternatively, call our orderline +44 (0) 870 837 4722or 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. Contartus 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 SEl 9LSTel; 020 7633 3333. Overseas distribution byFuture Publishing Ltd. Tel: 01225 442244.

• Future Publishing Ltd is part of Future pic.Future produces carefully targeted special-interest magazines, websites and

events for people v^ho sfiare a passion. We aim tosatisfy that passion by creating titles offering valuefor money, reliable information, smart buying adviceand which are a pleasure to read or visit. Today we

C|JK|J|*0 publish more than 150 magazines, 65 websites and aMEDIA WITH PASSIOH growing number of events in the UK, US, France and

Italy Over 100 international editions of ourmagazines are also published in 30 other countries across the world.

Future pic is a public company quoted on the London Stocl( Exchange(symbol: FUTR),

• Non-executive Chairman: Roger Parry• Chief Executive: Stevie Spring• Group Finance Director: John Bowman

Tel: +44 1225 442244 www.futureplc.com

The text paper in this magazine is totally chlorine free. Thepaper manufacturer and Future Publishing have beenindependently certified in accordance with the rules of theForest Stewardship Council,

F S CM t x « d S o u r c e s

(Correct at time of going topress but subjea to change)

recycle114 Practical Web Design

V^an yo« hov« finistwd w»rt»this mogazine plM$* r*c/cla rt.

DISCOVER BETTER HOSTING"t's about time you joined our users, and discovered better hosting from SupaNames. With hosting from under £14 + VAT per year,Deluding a free domain and risk free 30 day money back guarantee, you'd be crazy not to give us a try.

B E T T E R VA L U E

Dhoose from our selection of Linux & Windows packages startingrem under £14 per year, with a free domain & free setup.

BETTER CARE FOR YOUR SITE

rriple daily backups & monthly offsite backups, plus a39,9% money back uptime guarantee with all packages.

w w w . s u p a n a m e s . c o m

BETTER FEATURES

Useful features like SMS email alerts, webmail and anexclusive control panel included as standard.

B E T T E R S U P P O R T

Unlimited support from real people, anytime. You're alwaysgiven the name of the person you're dealing with.

SupaNames■ DISCOVER BETTER HOSTING"

FREE P0P3 Mailboxes & 4 Page Website+ r

Register 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 lFREE Email Forwarding

' FREE Onl ine Domain Tools

Transfer in . uk FREE!Transfer your Nominet. uk domain

names to us completly FREE OFC H A R G E !

freefjja rking.co.ukFreeparking Registrars Inc. (HostingFort) DE19810, USA

H / r

Modify your domain names quicklyand easily using our suite ofindustry leading online domainmanagement tools. Use our OnlineDNS Manager to maintain youro w n z o n e fi l e . Yo u w i l l n e v e r n e e dto "transfer" a domain name again.Don't let your old host hold domainn a m e t o r a n s o m !

Accredited Registrars

L9LISB I K I

C e n t r a l N i c "Accredled Regietrar

A C C R E D I T E D ,R E G I S T R A R

A m ^ m b ^ o f N o m i n e t . m AU K i N T t R N t 1 O M G A M l S A T l O M

r e g i s t r a r

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