coap 2000 fall 1 2013 creating web pages with image maps & forms (dave hallmon) webster university...

7/29/2019 COAP 2000 Fall 1 2013 Creating Web Pages with Image Maps & Forms (Dave Hallmon) Webster University Week 5 Lesson Fall1 2013

1/87


2/87


3/87

AListApartisagreatblogfor"peoplewhomakewebsites."Itexploresthedesign,

development,andmeaningofwebcontent,withaspecialfocusonwebstandardsand

bestpractices.ThisweekspostisalittleCSSheavybutthepointsthatIwanteveryone

towalkawaywiththetheoverarchingtheme,i.e.,separatingthecontentfromthe

visualdesign.Thisisanimportantthingtothinkaboutasweareallgettingstarted

workingon

our

movie

genre

fan

websites.


4/87


5/87

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwillactually

helpsolveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite.ThenthesolepurposeofthewebsiteistomakesurethattheusercandoX.Thatiswhy

thewebsiteisthereinthefirstplace.Thenknowingthiswecanleverageourentire

designandfunctionalitybasedonthatpurpose.

Thisthenallowsustoconsiderhowthewebsitefunctionsasameansofsolvingthe

problemoransweringaquestion, ratherthanjusthavingcoolfunctionalityfor

functionalitysake.

Readquoteonslide


6/87

Restassuredthatwearenowinthehomestretchwithgettingoursitescompleted,but

atthesametimeneedingtomakesurethatoursitesareinfactcompleted.Whenwe

gettothispointweneedtomakesurethatyoursitedoeswhatitneedstodo.

Specificallyitneedstobetestedanddeterminewhatneedstobechangedsothatthey

candowhattheyneedtodo.Forexample,howwillyourtargetaudiencewanttonavigateyoursite?Byknowingthis,youcanfinetunethesitesfunctionality.Therecouldbebarriersthatyoumightnotofmeanttobeputupthatwouldneedtobetaken

down.


7/87

Validatingourwebpagesisanimportantstep,whichcandramaticallyhelpimproveand

ensuringthequalityofoursitesanditcansavealotoftimeandmoney.Validationis,

however,neitherafullqualitycheck,norisitstrictlyequivalenttocheckingfor

conformancetothespecification.

Thepointofallofthesequestionsbelowistoensurethattheuser'sexperienceis

effortlesssothattheycangetwhattheyneed.Rememberitisalwaysabouttheuser.


8/87

Oftenthingscomeupatthistimelikecompatibilityissues(viewingdifferencesbetween

differentwebbrowsers)andweneedtoensurethatourwebsitesareoptimizedtobe

viewedproperlyinthemostrecentbrowserversions.


9/87


10/87

So,don'tthrowoutthebabywiththebathwater!Thedatathatyougatheredwiththe

clientinthoseearlyphasesissocrucial!Evenaswearereviewingandtestingoursites.

Don'tthrowitout!


11/87

Asyoutestyoursitewithactualusers.Wheredotheygetconfused?Aretheyableto

dowhattheyneedtodo?

11


12/87

Remember.Thecontentiswhattheuserwants.Itiswhattheyneed.Iftheycantfindit

ordontbelieveinittheyhitthebackbuttonandgosomewhereelse.

Theirexperiencewiththecontentislargelydeterminedwithinthefirst10seconds.

Thedesignofthesiteiswhatslapstheuserinthefaceassoonastheyaccessthesite.

Andthenthefunctionalityiswhattheuserhastodotogetwhattheywant.

12


13/87

DontforgetthatourWebDevelopmentLifeCycleisaprocessthatallowsustogoback

andforth.Itdoescostmoremoneytogobackwards,butsometimesthathasto

happen.Thekeyismakingsurethattheusergetswhattheyneed.Soifyoudidgetyour

cartbeforeyourhorseyoumayhavetoredosomethings.

Thisclassisasimulation.Butbesurethatyourememberthesewarningsinthefuture

whenyouareworkinginafirmorhandlingafutureclientsasafreelancer.


14/87

14


15/87

Letschatalittleaboutimagemapsandhowwewillbeusingthemhereinthiscourse.

Wearegoingtobecreatingimagemapsforrectangularobjectstoday.Yourtexthasan

entirechapterdevotedtocreatingthesefromscratchandfindingthecoordinates

yourself.Asyoumayknow.Iamabigfanoflazy.Soittherearewaystomakethings

easierforusbutatthesametimelearnwhatweneedtolearnIwillteachusthat

method.

15


16/87

Butbeforewegetintocreatinganimagemap,Ineedtohighlightforyouthreethings

aboutimagemaps.

16


17/87

Ourimagesarerectangularimages.Thetopleftcorneris(0,0).Ourtextdiscussesthe

processforcreatingimagemapsthatarecirclesandpolygons.Foracircleyouwould

needtoknowtheradiusandthexaxisfortheedgeofthecircle.Forapolygon,you

wouldneedtoknowthecoordinatesforalloftheedges.

17


18/87

Todefinetheshapeweneedtoknowthetoprightcorneroftheimageandthebottom

rightcorneroftheimage.Thesyntaxofthenewimagemapelementwillincludethe

coordinateattributeandthenvalueoftheattributewillbethecoordinatesforthose

twopoints.

18


19/87

Whatarealloftheattributesthatyouseeherewithintheareaelement?

19


20/87

Sothecoordinatesattributeiswithinthelargerareaelement.Asweknow,elements

arecomposedwithvariousattributes.

Whatarealloftheattributesthatyouseeherewithintheareaelement?Wehavetheshapeattribute,inthiscasethevalueofthatisdescriptiveoftheshape,

i.e.,rectangle.

Thecoordinatesattributehasthecoordinates.i.e.,thex,y,x,y,coordinatesofthe

rectangularhotspot

WealsohaveourHTMLreferencewhichiswilltakeouruserstothespecifiedlink

locationforthathotspotontheimagemap.

AndthealternatetextforthatHTMLreference.

20


21/87

Dontforgetthatwecanalsohaveelementswithinelements.Inthiscase,ourarea

elementiswithinthemapelement.Wealsohavetogiveourelementaname.Inthis

casethephotothatIamgoingtouseisacollage,soIgavethemapnamecollage.

Thecollage

of

images

will

allow

users

to

click

on

the

various

images

within

the

collage

whichwillthentakethemtovariouswebsites.

Wealsoneedtogiveitanidwhichwetalkedalittleaboutlastweek.Forour

purposes,wewilljustputmap.

Thisisallwithinthemapelement.

21


22/87

Nowthatweknowwhatanimagemapiswecannowchataboutthedisadvantages.

Yourtexttalksatlengthaboutthedisadvantagesofusingimagemaps.

Whatifauserisblockingimages.Alwaysremember,theusercanchoose.Sowouldyou

want

to

leave

avery

key

piece

to

your

site

that

the

users

need

designed

within

an

imagemap?Iseestudentscreatetheirentirewebpagenavigationwithinanimage

map.Thisisnotagoodideabecauseiftheiruserisblockingimagesthenhowwillthey

navigatetheirsite?

Remember.Ourdesignsshouldberesponsive.Iftheimageisreallylargewilltheybe

abletoviewitontheiriPhoneandclickandutilizetheimagemap?

Thisiswhyweshouldalwayskeepatextversionofthelinklocationssomewhereelsein

thewebpagesothatthewebsitecanstillfunction.

22


23/87

Yourtextalsotalksaboutthedifferencesbetweenserverandclientsiteimagemaps.In

thiscourseandthewaythatwehaveaccesstoourWebsterserver,Labwebs(moreon

thatinabit)wearenotreallyabletodoalotwithserverscriptsandsuch.Other

coursesinthedevelopmentcertificatewillgetintothatmore.

Soforourpurposeswewillbecreatingclientsideimagemaps.Thisiswherethe

clientsbrowser,i.e.,theusersbrowserdoesallofthework.

23


24/87

Thistooldoeslookalittledated.IamalwaysafraidthatIamgoingtogetreadyfor

teachingthisclasstofindthatthistoolisnolongeravailablebutitisstillherekicking.

Youaregoingtoseesomeadvertisementsandthecodethatitwritesforuswillbe

puttingin

some

erroneous

things

that

Iwill

show

us

how

to

remove.

This

is

common

for

freestuffonthenet,e.g.,embeddingslideshows,socialmedia,etc.

WhenyouareeveronsiteslikethisIwouldalsobecarefulaboutclickingon

advertisementsandsuchintermsofmalwareandspyware.

24


25/87

Demousingimagemaps.com

25


26/87

26


27/87

Itisimportanttonotetheformsarearequiredfeatureofyourtermprojectand

studentsusuallyputthemonacontactpage.Perhapssetitupforyourusersto

contactyouwithaquestiontheymayhaveorperhapssomethingmorecreative.

Whatyou

see

here

is

just

the

very

basic

structure

of

the

makeup

that

we

will

write

to

createaform.Allofitiscontainedwithinaformelement.Withinitwewillhave

differentinputcontrolsthatwillallowtheusertoinputtheirinformationand

inevitablysubmit.

27


28/87

28


29/87

ThinkoftheWDLCwhendesigningyourform.


30/87

30


31/87

31


32/87

Therearedifferenttypesofsites

32


33/87

Whenwedesignwebsitesweshouldbecreatingsomethingthatsatisfiestheneedsfor

boththeclientandtheuser.Forthepurposesofthiscoursewearemostlythinking

abouttheuser.

Weshouldalwayshaveafirmunderstandofoursites goals.Thisinformationoftenwill

comefromtheclient.Whydoestheclientwantitonline?Forthepurposesofthiscourse,weareourownclients.Anotherkeyelementtoknowhereiswhatarethe

userssupposedtodo?BuyingthebandsCDs,findingtheirconcerts,readingtheir

recentnews,ordiscussingonthemessageboard?Theclientwillhelpusunderstand

whichgoalisthemostimportant.Knowingthiswilldrivetheorganizationofthesite.

33


34/87

34


35/87

35


36/87

36


37/87

37


38/87

38


39/87

39


40/87

40


41/87

41


42/87

Allofthesethingsshouldaddvaluetotheusersexperience.Ifitisntaddingvaluethen

whatisitdoing?Itisdistractingthem.

Soyes.Ifyoufindsomethingthatisdistractingyouavoiditlikeanadvertisement.You

closethe

window,

hit

the

back

button,

and

move

on

42


43/87

Remember.Thecontentiswhattheuserwants.Itiswhattheyneed.Iftheycantfindit

ordontbelieveinittheyhitthebackbuttonandgosomewhereelse.

Theirexperiencewiththecontentislargelydeterminedwithinthefirst10seconds.

Thedesignofthesiteiswhatslapstheuserinthefaceassoonastheyaccessthesite.

Andthenthefunctionalityiswhattheuserhastodotogetwhattheywant.

43


44/87

44


45/87

Formsprovideinteractionbetweenauserandawebserver.Usersinteractwiththe

formusing"inputcontrols,"e.g.,textboxes,radiobuttons,dropdownmenu,textarea,

etc.Eachinputcontrolisdesignedforaspecificuseandifyouweretouseoneincorrectlythenyourusermightbeconfused.Somakesurethatyoulearntheuseofeachoftheseasdescribedinyourtextbook.Alsonoticethedistinctionbetween"fontenddesign"ofHTMLformsand"backend

development"ofHTMLforms.Forourpurposesinthiscoursewewillonlybefocusing

onthefrontenddesignandhaveourforms"actions"submittoanemailaddress,i.e.,"mailto:[email protected]" ratherthancommunicatingwithawebserver.Othercourseswithinthedevelopmentcertificatewilldealwiththissubmissionmethodand

theprograminglanguagesrequiredtodoso.Soouropeningformtagwillhavethe

followingrequiredattributes:

45


46/87

Howmanytextfieldsdoyousee?

46


47/87

47


48/87

Whatweneedtodoisaddsomeuniquetextdatafieldsforourusertoinputtheir

contactinformation.Whileyourbookdoesntmentionit,whendesigningaformitiskeytocreateeachdatafieldwithonevariableofuniquespecificinformation. Forexample,therearedisadvantagestocreatingafieldwiththeusersfirstandlastname.

Thiswouldmakethingsdifficultforqueriesmadetothedatabase,searching,etc.

48


49/87

49


50/87

50


51/87

Firstname:

Lastname:

Address:

City:

State:

Zip:

Emailaddress:

51


52/87

52


53/87

Lookatoursimpleforminthebrowser.Ifwedonotspecifythelengthoftheinput

fields,theywilldefaulttothesesizeswhichis20.Wecanadjusttheirsizewiththe

sizeattributetoincreasethedesignoftheform:

Firstname:

Lastname:

Address:

City:

State:

Zip:

Emailaddress:

Insertsomedataintotheformandclicktherefreshbutton.Noticehowthedataisstillthere.Thatisbecauseitisbeingstoredinyourbrowserscash.Soonwewilladdaresetbutton,butfornowifyouhavedatainthere,holddownCTRLandpressF5.

53


54/87

Noticehowwecanputasmuchinformationineachfiledthatwelike.Itisbestpractice

tolimiteachfieldtoareasonablelengthsothattheuserdoesntinsert100characters

inthestateareawhichcouldcauseproblemswiththeserver.Wecanadjustthe

numberofcharactersauserenters(i.e.,userdata)withtheMaxLengthattribute.

Firstname:

Lastname:

Address:

City:

State:

Zip:

Emailaddress:

54


55/87

Howmanyradiobuttonsdoyousee?

55


56/87

56


57/87

Nowletsaddsomeadditionalinputcontrolstoourform.Wearegoingtoaddtwo

radiobuttonsforuserstosaywhetherornottheyhaveseenamovie.Todothisweare

goingtoaddanotherinputthathasboththenameandtypeattributes.

Remember,the

name

attribute

labels

the

data

for

processing.

It

could

be

called

anything,butitshouldbedescriptivetothetypeofdatathattheuserisentering.

Andthistimethetypeattributeisgoingtoberadio.

Butwearealsogoingtoaddthevalueattribute.

ValueAttribute isthedatathattheuserisselecting.Thisshouldbedescriptivetowhattheuserisselectingasitwillcategorizethedatawithinthenamecategorization.

Itisimportanttonoteatthispointthataradiocontrollimitstheusertoonlyoneofthechoicesfromalistofchoices.

57


58/87

58


59/87


59


60/87

60


61/87

Nowletsaddsomeadditionalinputcontrolsthatwillallowtheusertoselect

multipleitemsfromalistofitems.Sometimestheselistsaresinglelist.Wearegoingto

utilizethesameinputcontrolsyntaxthatwehavebeenusing.

WhenIdesign

forms

Iplace

input

controls

next

to

each

other

if

they

have

to

make

achoicebetweenthetwo,andunderneatheachotheriftheycanselectmultipleoptions.

61


62/87

62


63/87


63


64/87

64


65/87

65


66/87

66


67/87

Ifyoudonotwantthefirstchoicechosenbydefault,intermsofdesignyoucouldput

thewordchooseasanoption

67


68/87

68


69/87


70/87


70


71/87

71


72/87

72


73/87

Nowletscreateatextareawheretheusercanaddadditionalcommentstotheir

survey:

73


74/87

Wecouldprefilltheboxwithcontent:

74


75/87

Wecanalsodeterminehowbigthetextboxisbydeterminingthesizeinrowsand

columns.Idontknowwhythesyntaxisntjustwidthandheight.

Noticethatascrollbarcomesupwhenthetextexceedsthebox.Alsonoticethatsome

browsersallow

the

user

to

determine

box

size.

Ifyoudonotwanttheusertobeabletotypeuntilthecowscomehome,youcouldadd

inthemaxlengthattribute.

75


76/87


77/87


78/87

78


79/87

79


80/87

Youwillnoticethatyouwillreceiveanerrorforthemaxlengthinthetextarea

formelement,becausethatattributehasbeendepreciated.Ifyouareneedingtofollow

strictstandards,thatattributeshouldnotbeusedthere.

80


81/87

81


82/87


83/87


84/87


85/87


86/87

86


87/87

coap 2000 fall 1 2013 creating web pages with image maps & forms (dave hallmon) webster university...

Documents