AListApartisagreatblogfor"peoplewhomakewebsites."Itexploresthedesign, development,andmeaningofwebcontent,withaspecialfocusonwebstandardsand bestpractices.ThisweekspostisalittleCSSheavybutthepointsthatIwanteveryone towalkawaywiththetheoverarchingtheme,i.e.,separatingthecontentfromthe visualdesign.Thisisanimportantthingtothinkaboutasweareallgettingstarted workingonourmoviegenrefanwebsites.

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwillactually helpsolveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite. ThenthesolepurposeofthewebsiteistomakesurethattheusercandoX.Thatiswhy thewebsiteisthereinthefirstplace.Thenknowingthiswecanleverageourentire designandfunctionalitybasedonthatpurpose. Thisthenallowsustoconsiderhowthewebsitefunctionsasameansofsolvingthe problemoransweringaquestion,ratherthanjusthavingcoolfunctionalityfor functionalitysake. Readquoteonslide

Restassuredthatwearenowinthehomestretchwithgettingoursitescompleted,but atthesametimeneedingtomakesurethatoursitesareinfactcompleted.Whenwe gettothispointweneedtomakesurethatyoursitedoeswhatitneedstodo. Specificallyitneedstobetestedanddeterminewhatneedstobechangedsothatthey candowhattheyneedtodo.Forexample,howwillyourtargetaudiencewantto navigateyoursite?Byknowingthis,youcanfinetunethesitesfunctionality.There couldbebarriersthatyoumightnotofmeanttobeputupthatwouldneedtobetaken down.

Validatingourwebpagesisanimportantstep,whichcandramaticallyhelpimproveand ensuringthequalityofoursitesanditcansavealotoftimeandmoney.Validationis, however,neitherafullqualitycheck,norisitstrictlyequivalenttocheckingfor conformancetothespecification. Thepointofallofthesequestionsbelowistoensurethattheuser'sexperienceis effortlesssothattheycangetwhattheyneed.Rememberitisalwaysabouttheuser.

Oftenthingscomeupatthistimelikecompatibilityissues(viewingdifferencesbetween differentwebbrowsers)andweneedtoensurethatourwebsitesareoptimizedtobe viewedproperlyinthemostrecentbrowserversions.

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

Asyoutestyoursitewithactualusers.Wheredotheygetconfused?Aretheyableto dowhattheyneedtodo?

11

Remember.Thecontentiswhattheuserwants.Itiswhattheyneed.Iftheycantfindit ordontbelieveinittheyhitthebackbuttonandgosomewhereelse. Theirexperiencewiththecontentislargelydeterminedwithinthefirst10seconds. Thedesignofthesiteiswhatslapstheuserinthefaceassoonastheyaccessthesite. Andthenthefunctionalityiswhattheuserhastodotogetwhattheywant.

12

DontforgetthatourWebDevelopmentLifeCycleisaprocessthatallowsustogoback andforth.Itdoescostmoremoneytogobackwards,butsometimesthathasto happen.Thekeyismakingsurethattheusergetswhattheyneed.Soifyoudidgetyour cartbeforeyourhorseyoumayhavetoredosomethings. Thisclassisasimulation.Butbesurethatyourememberthesewarningsinthefuture whenyouareworkinginafirmorhandlingafutureclientsasafreelancer.

14

Letschatalittleaboutimagemapsandhowwewillbeusingthemhereinthiscourse. Wearegoingtobecreatingimagemapsforrectangularobjectstoday.Yourtexthasan entirechapterdevotedtocreatingthesefromscratchandfindingthecoordinates yourself.Asyoumayknow.Iamabigfanoflazy.Soittherearewaystomakethings easierforusbutatthesametimelearnwhatweneedtolearnIwillteachusthat method.

15

Butbeforewegetintocreatinganimagemap,Ineedtohighlightforyouthreethings aboutimagemaps.

16

Ourimagesarerectangularimages.Thetopleftcorneris(0,0).Ourtextdiscussesthe processforcreatingimagemapsthatarecirclesandpolygons.Foracircleyouwould needtoknowtheradiusandthexaxisfortheedgeofthecircle.Forapolygon,you wouldneedtoknowthecoordinatesforalloftheedges.

17

Todefinetheshapeweneedtoknowthetoprightcorneroftheimageandthebottom rightcorneroftheimage.Thesyntaxofthenewimagemapelementwillincludethe coordinateattributeandthenvalueoftheattributewillbethecoordinatesforthose twopoints.

18

Whatarealloftheattributesthatyouseeherewithintheareaelement?

19

Sothecoordinatesattributeiswithinthelargerareaelement.Asweknow,elements arecomposedwithvariousattributes. Whatarealloftheattributesthatyouseeherewithintheareaelement? Wehavetheshapeattribute,inthiscasethevalueofthatisdescriptiveoftheshape, i.e.,rectangle. Thecoordinatesattributehasthecoordinates.i.e.,thex,y,x,y,coordinatesofthe rectangularhotspot WealsohaveourHTMLreferencewhichiswilltakeouruserstothespecifiedlink locationforthathotspotontheimagemap. AndthealternatetextforthatHTMLreference.

20

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

21

Nowthatweknowwhatanimagemapiswecannowchataboutthedisadvantages. Yourtexttalksatlengthaboutthedisadvantagesofusingimagemaps. Whatifauserisblockingimages.Alwaysremember,theusercanchoose.Sowould youwanttoleaveaverykeypiecetoyoursitethattheusersneeddesignedwithinan imagemap?Iseestudentscreatetheirentirewebpagenavigationwithinanimage map.Thisisnotagoodideabecauseiftheiruserisblockingimagesthenhowwillthey navigatetheirsite? Remember.Ourdesignsshouldberesponsive.Iftheimageisreallylargewilltheybe abletoviewitontheiriPhoneandclickandutilizetheimagemap? Thisiswhyweshouldalwayskeepatextversionofthelinklocationssomewhereelsein thewebpagesothatthewebsitecanstillfunction.

22

Yourtextalsotalksaboutthedifferencesbetweenserverandclientsiteimagemaps.In thiscourseandthewaythatwehaveaccesstoourWebsterserver,Labwebs(moreon thatinabit)wearenotreallyabletodoalotwithserverscriptsandsuch.Other coursesinthedevelopmentcertificatewillgetintothatmore. Soforourpurposeswewillbecreatingclientsideimagemaps.Thisiswherethe clientsbrowser,i.e.,theusersbrowserdoesallofthework.

23

Thistooldoeslookalittledated.IamalwaysafraidthatIamgoingtogetreadyfor teachingthisclasstofindthatthistoolisnolongeravailablebutitisstillherekicking. Youaregoingtoseesomeadvertisementsandthecodethatitwritesforuswillbe puttinginsomeerroneousthingsthatIwillshowushowtoremove.Thisiscommonfor freestuffonthenet,e.g.,embeddingslideshows,socialmedia,etc. WhenyouareeveronsiteslikethisIwouldalsobecarefulaboutclickingon advertisementsandsuchintermsofmalwareandspyware.

24

Demousingimagemaps.com

25

26

Itisimportanttonotetheformsarearequiredfeatureofyourtermprojectand studentsusuallyputthemonacontactpage.Perhapssetitupforyourusersto contactyouwithaquestiontheymayhaveorperhapssomethingmorecreative. Whatyouseehereisjusttheverybasicstructureofthemakeupthatwewillwriteto createaform.Allofitiscontainedwithinaformelement.Withinitwewillhave differentinputcontrolsthatwillallowtheusertoinputtheirinformationand inevitablysubmit.

27

28

ThinkoftheWDLCwhendesigningyourform.

30

31

Therearedifferenttypesofsites

32

Whenwedesignwebsitesweshouldbecreatingsomethingthatsatisfiestheneedsfor boththeclientandtheuser.Forthepurposesofthiscoursewearemostlythinking abouttheuser. Weshouldalwayshaveafirmunderstandofoursitesgoals.Thisinformationoftenwill comefromtheclient.Whydoestheclientwantitonline?Forthepurposesofthis course,weareourownclients.Anotherkeyelementtoknowhereiswhatarethe userssupposedtodo?BuyingthebandsCDs,findingtheirconcerts,readingtheir recentnews,ordiscussingonthemessageboard?Theclientwillhelpusunderstand whichgoalisthemostimportant.Knowingthiswilldrivetheorganizationofthesite.

33

34

35

36

37

38

39

40

41

Allofthesethingsshouldaddvaluetotheusersexperience.Ifitisntaddingvaluethen whatisitdoing?Itisdistractingthem. Soyes.Ifyoufindsomethingthatisdistractingyouavoiditlikeanadvertisement.You closethewindow,hitthebackbutton,andmoveon

42

Remember.Thecontentiswhattheuserwants.Itiswhattheyneed.Iftheycantfindit ordontbelieveinittheyhitthebackbuttonandgosomewhereelse. Theirexperiencewiththecontentislargelydeterminedwithinthefirst10seconds. Thedesignofthesiteiswhatslapstheuserinthefaceassoonastheyaccessthesite. Andthenthefunctionalityiswhattheuserhastodotogetwhattheywant.

43

44

Formsprovideinteractionbetweenauserandawebserver.Usersinteractwiththe formusing"inputcontrols,"e.g.,textboxes,radiobuttons,dropdownmenu,textarea, etc.Eachinputcontrolisdesignedforaspecificuseandifyouweretouseone incorrectlythenyourusermightbeconfused.Somakesurethatyoulearntheuseof eachoftheseasdescribedinyourtextbook. Alsonoticethedistinctionbetween"fontenddesign"ofHTMLformsand"backend development"ofHTMLforms.Forourpurposesinthiscoursewewillonlybefocusing onthefrontenddesignandhaveourforms"actions"submittoanemailaddress,i.e., "mailto:youremail@email.com"ratherthancommunicatingwithawebserver.Other courseswithinthedevelopmentcertificatewilldealwiththissubmissionmethodand theprograminglanguagesrequiredtodoso.Soouropeningformtagwillhavethe followingrequiredattributes:

45

Howmanytextfieldsdoyousee?

46

47

Whatweneedtodoisaddsomeuniquetextdatafieldsforourusertoinputtheir contactinformation.Whileyourbookdoesntmentionit,whendesigningaformitis keytocreateeachdatafieldwithonevariableofuniquespecificinformation. For example,therearedisadvantagestocreatingafieldwiththeusersfirstandlastname. Thiswouldmakethingsdifficultforqueriesmadetothedatabase,searching,etc.

48

49

50

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

51

52

Lookatoursimpleforminthebrowser.Ifwedonotspecifythelengthoftheinput fields,theywilldefaulttothesesizeswhichis20.Wecanadjusttheirsizewiththe sizeattributetoincreasethedesignoftheform:

<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.Noticehowthedatais stillthere.Thatisbecauseitisbeingstoredinyourbrowserscash.Soonwewilladd aresetbutton,butfornowifyouhavedatainthere,holddownCTRLandpressF5.

53

Noticehowwecanputasmuchinformationineachfiledthatwelike.Itisbestpractice tolimiteachfieldtoareasonablelengthsothattheuserdoesntinsert100characters inthestateareawhichcouldcauseproblemswiththeserver.Wecanadjustthe numberofcharactersauserenters(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>

54

Howmanyradiobuttonsdoyousee?

55

56

Nowletsaddsomeadditionalinputcontrolstoourform.Wearegoingtoaddtwo radiobuttonsforuserstosaywhetherornottheyhaveseenamovie.Todothisweare goingtoaddanotherinputthathasboththenameandtypeattributes. Remember,thenameattributelabelsthedataforprocessing.Itcouldbecalled anything,butitshouldbedescriptivetothetypeofdatathattheuserisentering. Andthistimethetypeattributeisgoingtoberadio. Butwearealsogoingtoaddthevalueattribute. ValueAttribute isthedatathattheuserisselecting.Thisshouldbedescriptivetowhat theuserisselectingasitwillcategorizethedatawithinthenamecategorization. Itisimportanttonoteatthispointthataradiocontrollimitstheusertoonlyone ofthechoicesfromalistofchoices.

57

58

Howmanytextfieldsdoyousee?

59

60

Nowletsaddsomeadditionalinputcontrolsthatwillallowtheusertoselect multipleitemsfromalistofitems.Sometimestheselistsaresinglelist.Wearegoingto utilizethesameinputcontrolsyntaxthatwehavebeenusing. WhenIdesignformsIplaceinputcontrolsnexttoeachotheriftheyhavetomakea choicebetweenthetwo,andunderneatheachotheriftheycanselectmultipleoptions.

61

62

Howmanytextfieldsdoyousee?

63

64

65

66

Ifyoudonotwantthefirstchoicechosenbydefault,intermsofdesignyoucouldput thewordchooseasanoption

67

68

Thisisquitetediousforstatessowhatwecandoisstealthecodefromsomewhere else,i.e.,google,<optionvalue="AL">Alabama</option>,copycodeandinsertitinto thatformelement.

69

Howmanytextfieldsdoyousee?

70

71

72

Nowletscreateatextareawheretheusercanaddadditionalcommentstotheir survey:

73

Wecouldprefilltheboxwithcontent:

74

Wecanalsodeterminehowbigthetextboxisbydeterminingthesizeinrowsand columns.Idontknowwhythesyntaxisntjustwidthandheight. Noticethatascrollbarcomesupwhenthetextexceedsthebox.Alsonoticethatsome browsersallowtheusertodetermineboxsize. Ifyoudonotwanttheusertobeabletotypeuntilthecowscomehome,youcouldadd inthemaxlengthattribute.

75

76

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

77

78

79

Youwillnoticethatyouwillreceiveanerrorforthemaxlengthinthetextarea formelement,becausethatattributehasbeendepreciated.Ifyouareneedingtofollow strictstandards,thatattributeshouldnotbeusedthere.

80

81

85

86

87