Tải bản đầy đủ - 0 (trang)
Chapter 1. You Must Have Fun

Chapter 1. You Must Have Fun

Tải bản đầy đủ - 0trang

anyuseofCascadingStyleSheets(CSS),images,ScalarVector

Graphics(SVG),orFlash,andthepagecontinuestobeWeblikeanduseful.

Graphicsarenotnecessarytothewebexperience.Theycan,

however,addimmeasurablytotherichnessoftheWeb,making

thedifferencebetweenasitethat'slively,compelling,and

exciting,andonethat'smerelyfunctional.Bylookingatweb

graphicslessasanessentialcomponentoftheWebandmore

asanexhilaratingcompanionandaccessory,wecanbeginto

freeourselvesfromtherestrictionson,andrequirementsfor,

webgraphicsthathavesprungupovertheyears,andtopush

againstthe"musts"thathaveconstrainedtheiruse.Mustssuch

asthefollowing,forexample:

Webanimationisgood.Ontheotherhand,webanimation

isbad.SameforFlash,Ajax,scriptedeffects,SVG,the

canvasobject,andsoon.

Thecreationanduseofwebgraphicsshouldbelefttothe

professionals.Onemusthaveyearsoftrainingandbe

hugelydedicatedtoworkwithwebgraphics.

Sophisticatedgraphicsrequireexpensivesoftwareand

equipmenttoproduce.

Webgraphicsareinaccessiblebandwidthpigsthateat

mobiledevicesforlunch.

Webgraphicsareseriousbusinessbecause,aseveryone

knows,workingwithwebgraphicsishard.

Somanymusts,solittletime.

I'mremindedofoneofmyfavoritescenesfromtheKevin

CostnermovieRobinHood.Inthemovie,aMoornamedAzeem

(playedbyMorganFreeman)issittingattheedgeofavillage

celebration,lightshiningonhisdarkskin.Acutelittlevillage

girlapproacheshimshylyandasks,"DidGodpaintyou?"



Azeemrespondsinsurprisewith,"DidGodpaintme?"Hethen

laughsgentlyandreplies,"Forcertain.""Why?"sheasks.

"BecauseAllahloveswondrousvariety."

Allthevariousformsofwebgraphics—fromCSStoimages,

FlashtoSVG—canbemanythings,includinguseful,functional,

andprofessional.Leavingasideallthesepractical

considerations,though,Iliketothinkthatwhatgraphicsaddto

theWebisawondrousvariety.Tosupportsuchaview,one

can'tbehelddownbyallthemusts;theonlyreal"must"with

webgraphicsisthattheydon'tinterferewiththefunctionalityof

thepage.Oncethat'sassured,anythinggoes.

Intherestofthischapter—therestofthisbook,infact—we'll

lookatthewondrousvarietyofwebgraphics.Intheprocess,

we'llalsoshowwecanbusteveryoneofrulesjustdescribed,

andhaveablastdoingso.



1.1.WhatWasGoodEnoughfor

Grandpappy…

Afunctionalworldmightbeefficient,butit'snotterribly

interesting.Itwouldbelikelivingonadietofbananas,nutand

seedgranolabars,andvitaminwater—itmightkeepyoualive,

butitwouldn'tbefuninthelongrun.Intheend,when

functionalityispushedupagainstindividualityandchoice,

individualitytriumphs.BlackcarsweregoodenoughforFord,

butnottherestofus.BlackandwhiteTVwasuseful,butwe

wantedInLivingColor.ThewholepremisebehindtheiPhoneis

thatonecanneverhavetoomanycolorbuttonstotouch.The

pushforvarietyhasbeentheforerunnerfortheoverall

evolutionofanyinventioninthepast,andtheWebisno

exception.

Ifallwebpagesweresimpletext,wewouldn'tneedthe

enhancementswe'veachievedinservingupwebapplications.

Weaddedgraphics,though,whichpushedthecolor

requirements,aswellasthesizesofpages.Ourmonitors



improved,bothinsizeandnumberofcolorssupported.

Thenwethought,howniceitwouldbetobeabletoadd

interactionandanimationtopages.WecreatedanimatedGIFs,

Flash,andJavaScript-driveneffects,whichattractedmore

peopletomoreapplications,increasingthedemandontheWeb

yetagain,leadingtoyetmoreimprovementsintheunderlying

technology.

Music.Didsomeonementionmusic?Musictodownload,music

toshare,musictocreateandpublishonline,andmusictosell.

Injustafewshortyears,theiTunes,eMusics,andAmazons

haveredefinednotonlyhowweusetheWeb,buthowwefind,

purchase,andlistentomusic.

Ofcourse,nowwe'refacedwiththeultimatemedia:video,

includingcompletemoviesbeingstreamedfromsites.Let'ssee,

tonightIthinkI'llwatchCorethroughNetflix.OrperhapsI'll

watchMaxHeadroomthroughJoost.

Pop!TherewenttheWeb!NoneofthisisessentialtotheWeb,

buthavingaccesstosuchthingshasbecomeessentialtous.

SomewouldsayitwastheeconomyoftheWebthatpushed

improvementsinwebservices.Iputsuchimprovementsfirmly

onthegraphicalgoodies.

Whichoftheitemsmentioned,though,arewebgraphics,the

topicofthisbook?Mostpeoplethinkofimagefileswith

extensionsofJPEG,GIF,orPNGwhentheyheartheterm"web

graphics."However,Iconsideranythingthatimpactsthe

visualizationofawebpage,aboveandbeyondthecomponents

thatprovidetheinitialstructure,partofthefamilyofweb

graphics.Thisincludes:

Imagefiles,aswewouldexpect

Visualattributesassociatedwiththepageelements,and

theCSSthatcontrolsthem

Embeddedorintegratedgraphics,suchasVML,VRML,SVG,



andthecanvaselement/object

Scriptedeffects,suchasthosemadepopularwithDHTML

andnowAjax

Packaged,interactiveanimationssuchasthoseprovidedby

Flash

Frameworksandlibrariesthatgenerategraphicaleffects

usinganyoftheabove

Theoneitemmissingisvideo,andthat'sprimarilybecause

videoexamplesarealittlehardtoembedinbookpages.

Perhapsbythetimethisisreadyforthesecondedition,we'll

haveaworkaroundforthisparticularchallenge,andI'lladdit

tothelist.Fornow,otherthanvideoandFlash,theseitems

formthebasisofthisbook.



Chapter1.YouMustHaveFun

Doyourememberyourveryfirstwebpage?Thefirstoneyou

eversaw?IrememberthefirsttimeIsawawebpage.I'mnot

sureifsuchamemoryisunusual,orifmanypeopleremember

theirfirstglanceatwhatwastobecomeubiquitousinavery

shorttime.

Thetimewaslate1993orearly1994.IwasworkingatIntelas

acontractsoftwaredeveloperwhenoneoftheotherdevelopers

askedmeifI'dseenthisapplicationcalledMosaic.Iwasn't

amongthefirsttoseethisnewtypeofapplication,butatthat

timetheWebwasstillinitsmostprimitiveform.Thefirstweb

pageIsawhadawhitebackground,alarger,bolderheader,

andtextformattedintoseveralparagraphs.Itwasn'tanything

special,andnothingtoexciteinterest.However,inthepage

wasathingcalledahypertextlink,anunderlinedpieceoftext

that,whenclicked,openedanotherpage—oneonacompletely

differentcomputer,connectedtothefirstonlybyadomaindrivenlocation.

Thesecondsite,likethefirst,wasalsoincrediblysimple.It

featuredthesameblacktextonawhitepage,andtheonly

typographicalvariationwasthelargerfontforthetitles.Itwas

completelyemptyofanygraphics.NoCSS;noimagesorFlash;

notevenaFONTorBLINK.However,thetwopagesdid

demonstrateallthatwascriticalabouttheWeb:bothpages

wereavailabletoanyonewithanInternetconnection,eachwas

ataspecificlocationthatcouldbecalledupagain,andthe

pageswereservedthroughacoordinationbetweenserverand

clientthatwasbothunprecedentedandmesmerizing.

Whatanoddwaytobeginabookaboutgraphics:describing

plainwebpagescompletelydevoidofanygraphics.Thereisa

purposebehindmymadness.Bydescribingthisearliestglimpse

oftheWeb,Ihopetomakeanimportantpoint—thatweb

graphicsarenotanessentialcomponentofthewebexperience.

Wecanstripapagedowntothemostminimalmarkupwithout



anyuseofCascadingStyleSheets(CSS),images,ScalarVector

Graphics(SVG),orFlash,andthepagecontinuestobeWeblikeanduseful.

Graphicsarenotnecessarytothewebexperience.Theycan,

however,addimmeasurablytotherichnessoftheWeb,making

thedifferencebetweenasitethat'slively,compelling,and

exciting,andonethat'smerelyfunctional.Bylookingatweb

graphicslessasanessentialcomponentoftheWebandmore

asanexhilaratingcompanionandaccessory,wecanbeginto

freeourselvesfromtherestrictionson,andrequirementsfor,

webgraphicsthathavesprungupovertheyears,andtopush

againstthe"musts"thathaveconstrainedtheiruse.Mustssuch

asthefollowing,forexample:

Webanimationisgood.Ontheotherhand,webanimation

isbad.SameforFlash,Ajax,scriptedeffects,SVG,the

canvasobject,andsoon.

Thecreationanduseofwebgraphicsshouldbelefttothe

professionals.Onemusthaveyearsoftrainingandbe

hugelydedicatedtoworkwithwebgraphics.

Sophisticatedgraphicsrequireexpensivesoftwareand

equipmenttoproduce.

Webgraphicsareinaccessiblebandwidthpigsthateat

mobiledevicesforlunch.

Webgraphicsareseriousbusinessbecause,aseveryone

knows,workingwithwebgraphicsishard.

Somanymusts,solittletime.

I'mremindedofoneofmyfavoritescenesfromtheKevin

CostnermovieRobinHood.Inthemovie,aMoornamedAzeem

(playedbyMorganFreeman)issittingattheedgeofavillage

celebration,lightshiningonhisdarkskin.Acutelittlevillage

girlapproacheshimshylyandasks,"DidGodpaintyou?"



Azeemrespondsinsurprisewith,"DidGodpaintme?"Hethen

laughsgentlyandreplies,"Forcertain.""Why?"sheasks.

"BecauseAllahloveswondrousvariety."

Allthevariousformsofwebgraphics—fromCSStoimages,

FlashtoSVG—canbemanythings,includinguseful,functional,

andprofessional.Leavingasideallthesepractical

considerations,though,Iliketothinkthatwhatgraphicsaddto

theWebisawondrousvariety.Tosupportsuchaview,one

can'tbehelddownbyallthemusts;theonlyreal"must"with

webgraphicsisthattheydon'tinterferewiththefunctionalityof

thepage.Oncethat'sassured,anythinggoes.

Intherestofthischapter—therestofthisbook,infact—we'll

lookatthewondrousvarietyofwebgraphics.Intheprocess,

we'llalsoshowwecanbusteveryoneofrulesjustdescribed,

andhaveablastdoingso.



1.1.WhatWasGoodEnoughfor

Grandpappy…

Afunctionalworldmightbeefficient,butit'snotterribly

interesting.Itwouldbelikelivingonadietofbananas,nutand

seedgranolabars,andvitaminwater—itmightkeepyoualive,

butitwouldn'tbefuninthelongrun.Intheend,when

functionalityispushedupagainstindividualityandchoice,

individualitytriumphs.BlackcarsweregoodenoughforFord,

butnottherestofus.BlackandwhiteTVwasuseful,butwe

wantedInLivingColor.ThewholepremisebehindtheiPhoneis

thatonecanneverhavetoomanycolorbuttonstotouch.The

pushforvarietyhasbeentheforerunnerfortheoverall

evolutionofanyinventioninthepast,andtheWebisno

exception.

Ifallwebpagesweresimpletext,wewouldn'tneedthe

enhancementswe'veachievedinservingupwebapplications.

Weaddedgraphics,though,whichpushedthecolor

requirements,aswellasthesizesofpages.Ourmonitors



improved,bothinsizeandnumberofcolorssupported.

Thenwethought,howniceitwouldbetobeabletoadd

interactionandanimationtopages.WecreatedanimatedGIFs,

Flash,andJavaScript-driveneffects,whichattractedmore

peopletomoreapplications,increasingthedemandontheWeb

yetagain,leadingtoyetmoreimprovementsintheunderlying

technology.

Music.Didsomeonementionmusic?Musictodownload,music

toshare,musictocreateandpublishonline,andmusictosell.

Injustafewshortyears,theiTunes,eMusics,andAmazons

haveredefinednotonlyhowweusetheWeb,buthowwefind,

purchase,andlistentomusic.

Ofcourse,nowwe'refacedwiththeultimatemedia:video,

includingcompletemoviesbeingstreamedfromsites.Let'ssee,

tonightIthinkI'llwatchCorethroughNetflix.OrperhapsI'll

watchMaxHeadroomthroughJoost.

Pop!TherewenttheWeb!NoneofthisisessentialtotheWeb,

buthavingaccesstosuchthingshasbecomeessentialtous.

SomewouldsayitwastheeconomyoftheWebthatpushed

improvementsinwebservices.Iputsuchimprovementsfirmly

onthegraphicalgoodies.

Whichoftheitemsmentioned,though,arewebgraphics,the

topicofthisbook?Mostpeoplethinkofimagefileswith

extensionsofJPEG,GIF,orPNGwhentheyheartheterm"web

graphics."However,Iconsideranythingthatimpactsthe

visualizationofawebpage,aboveandbeyondthecomponents

thatprovidetheinitialstructure,partofthefamilyofweb

graphics.Thisincludes:

Imagefiles,aswewouldexpect

Visualattributesassociatedwiththepageelements,and

theCSSthatcontrolsthem

Embeddedorintegratedgraphics,suchasVML,VRML,SVG,



andthecanvaselement/object

Scriptedeffects,suchasthosemadepopularwithDHTML

andnowAjax

Packaged,interactiveanimationssuchasthoseprovidedby

Flash

Frameworksandlibrariesthatgenerategraphicaleffects

usinganyoftheabove

Theoneitemmissingisvideo,andthat'sprimarilybecause

videoexamplesarealittlehardtoembedinbookpages.

Perhapsbythetimethisisreadyforthesecondedition,we'll

haveaworkaroundforthisparticularchallenge,andI'lladdit

tothelist.Fornow,otherthanvideoandFlash,theseitems

formthebasisofthisbook.



1.2.DrawMe!

Backwhenmatchbooksproliferatedaboutasmuchassmokers

welcomeinrestaurants,manyofthematchbookswouldhavea

pictureofaclownordogorsomeothercharacterwiththe

words,"DrawMe!"acrossthefront.Thematchbookswereput

outbyvariousartschools,andaspiringartistswoulddojust

that,sendingintheresulttogetanevaluationoftheirskill.

Evidently,totheschools,weallhavealittleartistinusbecause

fewpeoplewouldbedissuadedfromsigningupforacourse.

Figure1-1.Matchbookcoverwithapictureofadogand

"DrawMe!"



Oneofthe"musts"associatedwithwebgraphicsisthatwe

"must"beartists,orwe"must"bedesigners,oreventhatwe



"must"haveadegreeorspecializedtraining.Creatingweb

graphicsdoesrequiresomeartisticability,butastheearly

matchbookartschoolsdiscovered,there'salittleartistinallof

us.

Whileaprofessionalgraphicartistmaybenecessaryformany

effects,it'snottrueforall.Infact,therearemanyeffectsthat

canbecreatedwithonlyaminimumoftraining,alittle

technology,andawillingnesstogivesomethingnewashot.

Forinstance,laterinthebookI'llcoverSVG,awaytocreate

graphicsusinganXMLvocabulary.Theapproachseems

intimidatingatfirst.Howdoesonecreateasophisticated

graphicfromsimpleprimitiveelementssuchasthefollowing?





Yetthereareby-the-numberapproachesonecantaketomake

copiesofanoriginaldesignandthenconvertpartorthewhole

toSVG,usingatoolnomorecomplexthanatexteditor.

Well-knowncomputertechnologistSamRubyusesSVGicons

foreachoftheentriesinhisweblog.They'requitenice,and

thissurprisedmealittlebecauseIneverthoughtofSamasa

nascentartist.Hewroteapostthatdescribedhowhecreated

theicons,usingnothingmorecomplexthanvi,apopularUnix

texteditor.

Thestepshefollowedare:

1. EmbedthepatterntobecopiedorconvertedintoanSVG

document.

2. Resizeit,ifnecessary.

3. Tracetheareasontheoriginalgraphicusingasequenceof

SVGelements,suchascirclesandsquares.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 1. You Must Have Fun

Tải bản đầy đủ ngay(0 tr)

×