AListApartisagreatblogfor"peoplewhomakewebsites."Itexploresthedesign, development,andmeaningofwebcontent,withaspecialfocusonwebstandardsandbest practices.ThisweekspostisalittleCSSheavybutthepointsthatIwanteveryonetowalk awaywiththetheoverarchingtheme,i.e.,separatingthecontentfromthevisualdesign. Thisisanimportantthingtothinkaboutasweareallgettingstartedworkingonourmovie genrefanwebsites.

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwillactuallyhelp solveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite.Thenthe solepurposeofthewebsiteistomakesurethattheusercandoX.Thatiswhythewebsite isthereinthefirstplace.Thenknowingthiswecanleverageourentiredesignand functionalitybasedonthatpurpose. Thisthenallowsustoconsiderhowthewebsitefunctionsasameansofsolvingthe problemoransweringaquestion,ratherthanjusthavingcoolfunctionalityfor functionalitysake. Readquoteonslide

Restassuredthatwearenowinthehomestretchwithgettingoursitescompleted,butat thesametimeneedingtomakesurethatoursitesareinfactcompleted.Whenwegetto thispointweneedtomakesurethatyoursitedoeswhatitneedstodo.Specificallyit needstobetestedanddeterminewhatneedstobechangedsothattheycandowhatthey needtodo.Forexample,howwillyourtargetaudiencewanttonavigateyoursite?By knowingthis,youcanfinetunethesitesfunctionality.Therecouldbebarriersthatyou mightnotofmeanttobeputupthatwouldneedtobetakendown.

Validatingourwebpagesisanimportantstep,whichcandramaticallyhelpimproveand ensuringthequalityofoursitesanditcansavealotoftimeandmoney.Validationis, however,neitherafullqualitycheck,norisitstrictlyequivalenttocheckingfor conformancetothespecification. Thepointofallofthesequestionsbelowistoensurethattheuser'sexperienceiseffortless sothattheycangetwhattheyneed.Rememberitisalwaysabouttheuser.

Oftenthingscomeupatthistimelikecompatibilityissues(viewingdifferencesbetween differentwebbrowsers)andweneedtoensurethatourwebsitesareoptimizedtobe viewedproperlyinthemostrecentbrowserversions.

So,don'tthrowoutthebabywiththebathwater!Thedatathatyougatheredwiththe clientinthoseearlyphasesissocrucial!Evenaswearereviewingandtestingoursites. Don'tthrowitout!

Asyoutestyoursitewithactualusers.Wheredotheygetconfused?Aretheyabletodo whattheyneedtodo?

11

Remember.Thecontentiswhattheuserwants.Itiswhattheyneed.Iftheycantfinditor dontbelieveinittheyhitthebackbuttonandgosomewhereelse. Theirexperiencewiththecontentislargelydeterminedwithinthefirst10seconds. Thedesignofthesiteiswhatslapstheuserinthefaceassoonastheyaccessthesite.And thenthefunctionalityiswhattheuserhastodotogetwhattheywant.

12

DontforgetthatourWebDevelopmentLifeCycleisaprocessthatallowsustogobackand forth.Itdoescostmoremoneytogobackwards,butsometimesthathastohappen.The keyismakingsurethattheusergetswhattheyneed.Soifyoudidgetyourcartbefore yourhorseyoumayhavetoredosomethings. Thisclassisasimulation.Butbesurethatyourememberthesewarningsinthefuture whenyouareworkinginafirmorhandlingafutureclientsasafreelancer.

14

Letschatalittleaboutimagemapsandhowwewillbeusingthemhereinthiscourse.We aregoingtobecreatingimagemapsforrectangularobjectstoday.Yourtexthasanentire chapterdevotedtocreatingthesefromscratchandfindingthecoordinatesyourself.Asyou mayknow.Iamabigfanoflazy.Soittherearewaystomakethingseasierforusbutatthe sametimelearnwhatweneedtolearnIwillteachusthatmethod.

15

Butbeforewegetintocreatinganimagemap,Ineedtohighlightforyouthreethings aboutimagemaps.

16

Ourimagesarerectangularimages.Thetopleftcorneris(0,0).Ourtextdiscussesthe processforcreatingimagemapsthatarecirclesandpolygons.Foracircleyouwouldneed toknowtheradiusandthexaxisfortheedgeofthecircle.Forapolygon,youwouldneed toknowthecoordinatesforalloftheedges.

17

Todefinetheshapeweneedtoknowthetoprightcorneroftheimageandthebottom rightcorneroftheimage.Thesyntaxofthenewimagemapelementwillincludethe coordinateattributeandthenvalueoftheattributewillbethecoordinatesforthosetwo points.

18

Whatarealloftheattributesthatyouseeherewithintheareaelement?

19

Sothecoordinatesattributeiswithinthelargerareaelement.Asweknow,elementsare composedwithvariousattributes. Whatarealloftheattributesthatyouseeherewithintheareaelement? Wehavetheshapeattribute,inthiscasethevalueofthatisdescriptiveoftheshape,i.e., rectangle. Thecoordinatesattributehasthecoordinates.i.e.,thex,y,x,y,coordinatesofthe rectangularhotspot WealsohaveourHTMLreferencewhichiswilltakeouruserstothespecifiedlinklocation forthathotspotontheimagemap. AndthealternatetextforthatHTMLreference.

20

Dontforgetthatwecanalsohaveelementswithinelements.Inthiscase,ourarea elementiswithinthemapelement.Wealsohavetogiveourelementaname.Inthis casethephotothatIamgoingtouseisacollage,soIgavethemapnamecollage. Thecollageofimageswillallowuserstoclickonthevariousimageswithinthecollage whichwillthentakethemtovariouswebsites. Wealsoneedtogiveitanidwhichwetalkedalittleaboutlastweek.Forourpurposes, wewilljustputmap. Thisisallwithinthemapelement.

21

Nowthatweknowwhatanimagemapiswecannowchataboutthedisadvantages.Your texttalksatlengthaboutthedisadvantagesofusingimagemaps. Whatifauserisblockingimages.Alwaysremember,theusercanchoose.Sowouldyou wanttoleaveaverykeypiecetoyoursitethattheusersneeddesignedwithinanimage map?Iseestudentscreatetheirentirewebpagenavigationwithinanimagemap.Thisis notagoodideabecauseiftheiruserisblockingimagesthenhowwilltheynavigatetheir site? Remember.Ourdesignsshouldberesponsive.Iftheimageisreallylargewilltheybeable toviewitontheiriPhoneandclickandutilizetheimagemap? Thisiswhyweshouldalwayskeepatextversionofthelinklocationssomewhereelsein thewebpagesothatthewebsitecanstillfunction.

22

Yourtextalsotalksaboutthedifferencesbetweenserverandclientsiteimagemaps.Inthis courseandthewaythatwehaveaccesstoourWebsterserver,Labwebs(moreonthatina bit)wearenotreallyabletodoalotwithserverscriptsandsuch.Othercoursesinthe developmentcertificatewillgetintothatmore. Soforourpurposeswewillbecreatingclientsideimagemaps.Thisiswheretheclients browser,i.e.,theusersbrowserdoesallofthework.

23

Thistooldoeslookalittledated.IamalwaysafraidthatIamgoingtogetreadyfor teachingthisclasstofindthatthistoolisnolongeravailablebutitisstillherekicking. Youaregoingtoseesomeadvertisementsandthecodethatitwritesforuswillbeputting insomeerroneousthingsthatIwillshowushowtoremove.Thisiscommonforfreestuff onthenet,e.g.,embeddingslideshows,socialmedia,etc. WhenyouareeveronsiteslikethisIwouldalsobecarefulaboutclickingon advertisementsandsuchintermsofmalwareandspyware.

24

Demousingimagemaps.com

25

26

Itisimportanttonotetheformsarearequiredfeatureofyourtermprojectandstudents usuallyputthemonacontactpage.Perhapssetitupforyouruserstocontactyouwitha questiontheymayhaveorperhapssomethingmorecreative. Whatyouseehereisjusttheverybasicstructureofthemakeupthatwewillwriteto createaform.Allofitiscontainedwithinaformelement.Withinitwewillhavedifferent inputcontrolsthatwillallowtheusertoinputtheirinformationandinevitablysubmit.

27

28

Formsprovideinteractionbetweenauserandawebserver.Usersinteractwiththeform using"inputcontrols,"e.g.,textboxes,radiobuttons,dropdownmenu,textarea,etc.Each inputcontrolisdesignedforaspecificuseandifyouweretouseoneincorrectlythenyour usermightbeconfused.Somakesurethatyoulearntheuseofeachoftheseasdescribed inyourtextbook. Alsonoticethedistinctionbetween"fontenddesign"ofXHTMLformsand"backend development"ofXHTMLforms.Forourpurposesinthiscoursewewillonlybefocusingon thefrontenddesignandhaveourforms"actions"submittoanemailaddress,i.e., "mailto:youremail@email.com"ratherthancommunicatingwithawebserver.Other courseswithinthedevelopmentcertificatewilldealwiththissubmissionmethodandthe programinglanguagesrequiredtodoso.Soouropeningformtagwillhavethefollowing requiredattributes:

29

Howmanytextfieldsdoyousee?

30

31

Whatweneedtodoisaddsomeuniquetextdatafieldsforourusertoinputtheircontact information.Whileyourbookdoesntmentionit,whendesigningaformitiskeyto createeachdatafieldwithonevariableofuniquespecificinformation. Forexample, therearedisadvantagestocreatingafieldwiththeusersfirstandlastname.Thiswould makethingsdifficultforqueriesmadetothedatabase,searching,etc.

32

33

34

<p> Firstname:<inputname="first"type="text"/> Lastname:<inputname="last"type="text"/> <br/> Address:<inputname="address"type="text"/> City:<inputname="city"type="text"/> State:<inputname="state"type="text"/> Zip:<inputname="zip"type="text"/> <br/> Emailaddress:<inputname="email"type="text"/> </p>

35

36

Lookatoursimpleforminthebrowser.Ifwedonotspecifythelengthoftheinputfields, theywilldefaulttothesesizeswhichis20.Wecanadjusttheirsizewiththesizeattribute toincreasethedesignoftheform:

<p> Firstname:<inputname="first"type="text"size="30"/> Lastname:<inputname="last"type="text"size="35"/> <br/> Address:<inputname="address"type="text"size="30"/> City:<inputname="city"type="text"size="15"/> State:<inputname="state"type="text"size="2" /> Zip:<inputname="zip"type="text"size="5"/> <br/> Emailaddress:<inputname="email"type="text"size="77"/> </p> Insertsomedataintotheformandclicktherefreshbutton.Noticehowthedataisstill there.Thatisbecauseitisbeingstoredinyourbrowserscash.Soonwewilladdareset button,butfornowifyouhavedatainthere,holddownCTRLandpressF5.

37

Noticehowwecanputasmuchinformationineachfiledthatwelike.Itisbestpracticeto limiteachfieldtoareasonablelengthsothattheuserdoesntinsert100charactersinthe stateareawhichcouldcauseproblemswiththeserver.Wecanadjustthenumberof charactersauserenters(i.e.,userdata)withtheMaxLengthattribute. <p> Firstname:<inputname="first"type="text"size="30"maxlength="35"/> Lastname:<inputname="last"type="text"size="35"maxlength="40"/> <br/> Address:<inputname="address"type="text"size="30"maxlength="50"/> City:<inputname="city"type="text"size="15"maxlength="20"/> State:<inputname="state"type="text"size="2"maxlength="2"/> Zip:<inputname="zip"type="text"size="5"maxlength="5"/> <br/> Emailaddress:<inputname="email"type="text"size="77"maxlength="100"/> </p>

38

Howmanytextfieldsdoyousee?

39

40

Nowletsaddsomeadditionalinputcontrolstoourform.Wearegoingtoaddtworadio buttonsforuserstosaywhetherornottheyhaveseenamovie.Todothiswearegoingto addanotherinputthathasboththenameandtypeattributes. Remember,thenameattributelabelsthedataforprocessing.Itcouldbecalledanything, butitshouldbedescriptivetothetypeofdatathattheuserisentering. Andthistimethetypeattributeisgoingtoberadio. Butwearealsogoingtoaddthevalueattribute. ValueAttribute isthedatathattheuserisselecting.Thisshouldbedescriptivetowhatthe userisselectingasitwillcategorizethedatawithinthenamecategorization. Itisimportanttonoteatthispointthataradiocontrollimitstheusertoonlyoneof thechoicesfromalistofchoices.

41

42

Howmanytextfieldsdoyousee?

43

44

Nowletsaddsomeadditionalinputcontrolsthatwillallowtheusertoselectmultiple itemsfromalistofitems.Sometimestheselistsaresinglelist.Wearegoingtoutilizethe sameinputcontrolsyntaxthatwehavebeenusing. WhenIdesignformsIplaceinputcontrolsnexttoeachotheriftheyhavetomakeachoice betweenthetwo,andunderneatheachotheriftheycanselectmultipleoptions.

45

46

Howmanytextfieldsdoyousee?

47

48

49

50

Ifyoudonotwantthefirstchoicechosenbydefault,intermsofdesignyoucouldputthe wordchooseasanoption

51

52

Thisisquitetediousforstatessowhatwecandoisstealthecodefromsomewhereelse, i.e.,google,<optionvalue="AL">Alabama</option>,copycodeandinsertitintothatform element.

53

Howmanytextfieldsdoyousee?

54

55

56

Nowletscreateatextareawheretheusercanaddadditionalcommentstotheirsurvey:

57

Wecouldprefilltheboxwithcontent:

58

Wecanalsodeterminehowbigthetextboxisbydeterminingthesizeinrowsandcolumns. Idontknowwhythesyntaxisntjustwidthandheight. Noticethatascrollbarcomesupwhenthetextexceedsthebox.Alsonoticethatsome browsersallowtheusertodetermineboxsize. Ifyoudonotwanttheusertobeabletotypeuntilthecowscomehome,youcouldaddin themaxlengthattribute.

59

60

Nowletsaddoursubmitandresetbuttoninputcontrols. Thedatathatyoureceivefromsubmittingthisinformationideallywouldbesenttoa serverforprocessing.Sincewearepostingthedatatoanemailaddress,itwillactually opentheusersdefaultemailclientanditwouldbepastedtothebodyoftheemailwhich couldbesenttothedesignatedemailaddress(es).Someclients,e.g.,BlueHost,GoDaddy, etc.offerthistypeofserviceforanadditionalfee.

61

62

63

Youwillnoticethatyouwillreceiveanerrorforthemaxlengthinthetextareaform element,becausethatattributehasbeendepreciated.Ifyouareneedingtofollowstrict standards,thatattributeshouldnotbeusedthere.

64

65

69

70