4

Lastweek,wetalkedabouthowimportantitwasforusalltohaveasolid understandingofhowthewebworks,whoyouaretryingtoreach(I.e.,the user),andwhattechnologiesareinvolvedincreatingawebsite

Withoutafirmunderstandingofallofthischancesareyourdesignisnot goingtowork.So

LastweekIintroducedustooneofourLyndacourses,HTMLEssential Training.Thosevideosgaveusagreatoverviewofhowthewebworkedand thetechnologiesinvolved. Tonightwearetalkingmoreaboutourroleasadesignerandwillsoonget intotheWebDevelopmentLifeCycle.ThereasonIwantustowatchthisnext clipisthatIwantyoutobeginthinkingaboutwhatyoumightuseyournew designskillsforandhowtheymightfitintoyourfutureprofession.Itis importantforustothinkaboutthinkaboutthesethingsfromtimetotime becauseIdoubtyoutookthisclassjusttolearnhowtogetanAontheterm project. WatchVideo So,whoinherereallywantstobecomeaprofessionalwebdesigner?Why?

Forthepurposesofthiscourse,Iamgoingtoassumethatweallwanttobe professionalwebdesigners.Inasecond,wearegoingtowatchavideothat discusesaHobbyistwebdesigner.Eitherway,itisimportanttonotethat youshouldnottakeanyshortcuts.Butagaininthiscourse,Iamgoingto assumethatyouwanttobeaprofessional. Sopleasedonttakeanyshortcutswhencreatingyourtermprojector learningaboutHTML.Feelfreetogoaboveandbeyondthescopeofthis class.Thekeyistolearnsomethingnewanduseitorapplyittosomething thatmeetsyourneeds.

So,donttakeshortcutsandusetemplates. Whiletherearetemplatesout therethatwillcreateabasicsiteforyouandthenallyouhavetodoisgoin andinsertyourcontent. Thetruthisthatoftenprofessionalsdonotuse these.Mostlikelyeachsitetheycreatewillneedtobespecifictotheuserand theirneeds.Theseneedsdonotoftenfitnicelyintoadownloadable template.So,pleasedonottakeanyshortcutswhencreatingyourwebsite foryourtermproject.

10

So,donttakeshortcutsanduseanIDE. Whiletherearetoolsavailablethat willallowyoutocreateyoursitesvisuallyandthengeneratethecodeforyou, e.g.,Dreamweaver,NetObjects,ExpressionWeb,Frontpage,VisualBasic,etc. thetruthisthatveryfewofthosetoolscreateprofessionallevelcode.Ona sidenoteifyoudoendupwantingtouseoneoftheseafteryouhavetaken thisclassplease,please,stayawayfromFrontPage. Ataminimum,aprofessionalwebdesigner/developeryouwillneedtoknow alloftheinsandoutsofXHTMLandCSSandsoonHTML5.Ihavedesigned thiscoursetogiveyouafoundationinthesetwoareas.Itisuptoyouto builduponthatfoundation.Forexample,inyourhomeworkfromlastweek InoticedthatmanyofyouwereexploringstylesandevensomeCSS.Thisis exactlywhatIwanttosee. So,pleasedontcauseyourselfadisservicebyusingoneoftheseuntilyou leanthebasics.Perhapsyoucantakemyeditorsclassinthespring,wherewe willlearnhowtouseDreamweaverbasedonwhatyouhavelearnedinthis class.

11

UserAccessibility,SEO,andMultipleDevices TemplatesandIDEscannothelpwiththeseissues.Thesearethe responsibilityofthewebdesigner.LikeIwassayingearlier,adesignerhasto haveasolidunderstandingofhowthewebworks,whoyouaretryingtoreach (I.e.,theuser),andwhattechnologiesareinvolved.

12

Doesanyonewanttochangetheiranswerfromearlier?Doyouconsider yourselfmoreofahobbiestorprofessional?

Soletsgetstartedtodaybyrecapingwhatthosethingsarethatwedesign? So,aswebdesignerswhatdowedesign? Ans:RawcontentforthewebthroughtheuseofHTML,CSS,etc.

15

16

Wedesigntheseforthewebnotnecessarilycreatethecontentitself.

17

18

Sowhatdoweuseallofthesedesignsfor?Whatdotheyworkon?Whoare theyfor?Etc. Ans:Multipledifferenttypesofuseragents,e.g.,browsers,screenreaders, pads,phones,etc.ALLUSEREXPERIENCES

20

21

22

23

24

Nowletsdiscusshowthesedesignsfunction?Whatdotheydo?Whatdo theyallowtheusertodo? Ans:Ecommerce,forms,databases,searching,navigation,etc.Whatabout embeddingservicesfromothersites?

26

27

28

Sothepurposeofthisslideisjusttohithomethefactthatthispurposethat wehavebeendiscussingistheheartofthewebsite.Whatarewewithoutour hearts?Arewesuccessful? SopleaseknowthatawebsiteismorethanjustitsHTMLandCSSishasa specificpurposetosolveausersproblem. Thepurposeofawebsiteistheveryreasonforitsexistence!Everyother elementshouldbebuilt,createdanddesignedtosupportthatpurposein someway.Ifitisnotsupportingthepurpose?Thenwhatisitdoing?

29

30

31

32

33

Allofthesethingsshouldaddvaluetotheusersexperience.Ifitisntadding valuethenwhatisitdoing?Itisdistractingthem. Soyes.Ifyoufindsomethingthatisdistractingyouavoiditlikean advertisement.Youclosethewindow,hitthebackbutton,andmoveon

34

Whataresomethingsthataredistractingonwebsites?Whatarethings thatyouhateonwebsites?

35

36

37

38

39

40

41

42

43

Thereisevenadebategoingontoday.Whichismoreimportant?Thecontent, thedesign,orthefunctionality?Thiscouldbeaveryengagingdiscussionfor COAP2150,WebDesignPrinciplesI. Ultimatelyitreallyisjustabalancingactbetweencreatingsomethingthatis visuallyimpressivewebsitewithoutjeopardizingtheusability.Butalsowhatif somethingisvisuallyimpressivebutthecontentispoor?Whatthen? HonestlysubliminallyIhaveputcontentuphereatthetopforareason.This iswhattheuserismostlikelylookingfor?Theydontgosearchingforatea kettleandbuyonefromthemostimpressivevisuallystunningwebsite?Do they?Areusersthatsuperficial? Thinkaboutit.Ifthewebsiteseemstobetootrickytonavigate?What happensthen?Theymaythenleavethesitealtogether,whichdefeatsthe purposeofthewebsite.ItshouldbeRULE#1.Givetheuserwhattheyneed beforetheyleave!

44

Youwouldthinkitwouldbeanobrainer,butaftersomeresearchwehave discoveredthatfunctionalitygoeshandinhandwithknowingyourtarget audience.Thisiskeytothedesignoftheentiresite,asdesignerswillneedto makethewebsiteaccessibleandappealingourusers.

45

Witheritisateenagerlookingtobuyteeshirtsfromhisfavoritecartoonsor someonelookingforwaystheycanitemizetheirdeductionsontheirtaxes. Thosewebsitesshouldhelptheuseraccomplishwhattheyneedtodo.

46

Itisimportanttonownotethattheusercanchoose.WhatImeanbythatis thatWebDesignisdifferentthangraphicdesignwherethedesignisahard copy.Forawebdesignersdesigns,theusercanchoosetheirOS,browser, fonts,fontsize,internetspeed,whereandwhentonavigate,etc. Thetermuseragentsisoftenmentionedherewhichbasicallymeans somethingusedtoaccesstheWWWandtheyallfunctiondifferently.

47

So,weshouldunderstandthatweatsomelevelhavealackofcontrolover theenvironmentwearedesigninganddevelopingin.Sowhatdowedo? Weneedtolearnallthatwecanaboutthisenvironmentanddesigning specificallyforthismedium. So,weneedtolearnhowpresentationiscontrolledontheweb.Howto maximizereadabilityandusabilityforourcontent. Soweneedtounderstandwebstandardsthatgoverntheweb.Keepinmind thattheseareconstantlychanging.Itisbestforustoevolve. Weneedtoutilizewebdesignprinciplesfordifferenttypesofwebsites,e.g., howaecommercesitelooks,howabloglooks,howainformationalsite looks,etc.

Comprehensiveplanningandanalysisensuresthatdesignersanddevelopers willprovidewhattheiruserswant.IfyoustarttocodeyourWebpages withoutthoroughplanningandanalysis,youruntheriskofmissingpertinent information.ItismuchlessexpensivetomakecorrectionstoaWebsiteinthe earlyphasesofaprojectdevelopmentthatitistoalterWebpagesthatare completed. Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteisfortheuser.Not forthedesignerortheclient.Amazonswebsiteisnotforthecompany Amazon.Itisfortheircustomerstheusers.

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwill actuallyhelpsolveaproblemfortheuser.Thisthenisessentiallythepurpose ofthewebsite.Thenthesolepurposeofthewebsiteistomakesurethatthe usercandoX.Thatiswhythewebsiteisthereinthefirstplace.Thenknowing thiswecanleverageourentiredesignandfunctionalitybasedonthat purpose. Soaswebdesignerscanapproachworkingwithaclientbythinkingoftheir siteassolvingaproblemfortheuserandthewebsiteisthesolutiontothat problem.Thisthenallowsustoconsiderhowthewebsitefunctionsasa meansofsolvingtheproblemoransweringaquestion,ratherthanjust havingcoolfunctionalityforfunctionalitysake. AsIhavebeenteachingthiscourseformanyyears,Iseestudentsfallintothe snareofdesigninganddevelopingfunctionalityintheirsitesbasesonapple pickingofthecoolestfeaturesfromdifferentsitesallovertheinternet.When IstartseeingthisIquicklyremindthestudentofthedangerindoingso.Just becauseNikedoesitontheirsitedoesntmeanitwillworkforyours. Thesitemaycapableofdoingallsortsofreallyinterestingthings,butthe

functionalityisalmostcertainlygoingtoseemlikeadisjointedconfusingmessfor theuserwithoutpurposeorvision.Theusercantaccomplishwhattheyoriginally setouttodo. Soremember,thisquoteonpage14ofyourbookwillhelpusstayontrack.

50

Whenwedesignwebsitesweshouldbecreatingsomethingthatsatisfiesthe needsforboththeclientandtheuser.Forthepurposesofthiscourseweare mostlythinkingabouttheuser. Weshouldalwayshaveafirmunderstandofoursitesgoals.Thisinformation oftenwillcomefromtheclient.Whydoestheclientwantitonline?Forthe purposesofthiscourse,weareourownclients.Anotherkeyelementtoknow hereiswhataretheuserssupposedtodo?BuyingthebandsCDs,finding theirconcerts,readingtheirrecentnews,ordiscussingonthemessage board?Theclientwillhelpusunderstandwhichgoalisthemostimportant. Knowingthiswilldrivetheorganizationofthesite. ThisiswhatyouwillbediscussingwiththeclassinyourTPjournalseach week. Weshouldunderstandtheaudienceofoursites.Remember,yourtextstates onpage14.

51

Soafteralloftheanalysislegworkwethenneedtomakesurethatour contentiscentraltoourdesigns.RememberContentIsKing!Oursitescould havereallycoolimagesandvideosbutifourcontentisntclearand accessible,thenoursitesfail.Itisimportanttonotethatasitescontentis basedontheresultsofthepreviousphases,e.g.,thepurpose&analysis.Itis alsohighlypossiblethatasitedesignanddevelopmentteammighthavetogo backwordsandrethinkthepreviousphasesbecauseofwhatisfoundoutin thedesignphase. Sometimesasitesdesignactuallyrestrictswhattheuserislookingfor.Agood designisclear,concise,anduncluttered.Thevisualsofasiteshouldenhance theuserexperienceanddrawattentiontothecontentandnotdistractthem fromit.Ifyoucannotjustifyusingsomethingthatcreatesmorecompelling anddirectcontent..dontuseit.Becauseitscoolisnotajustification. OnoursyllabusImentioninthetermprojectsection: If there is ever a question about whether an image, video, color, etc. meets the needs of the user, then discuss it with your instructor. It may be determined that the object or tag should not be included. All attributes of a web site should

52

always be purposeful and not distracting to the user.

52

Tomakesurethatyoursitedoeswhatitneedstodo,itneedstobetested withyouruseranddeterminewhatneedstobechangedsothattheycando whattheyneedtodo.Forexample,howwillyourtargetaudiencewantto navigateyoursite?Byknowingthis,youcanfinetunethesitesfunctionality. Therecouldbebarriersthatyoumightnotofmeanttobeputupthatwould needtobetakendown. LastweekIwastellingyouaboutagoodfriendofminewhoworksinaweb designfirminIllinois.Heisadesignerinalargewebdesignshop.Clients cometothemforhosting,sitedesign,maintenance,etc.Eachdayhegets informationfromthesalesteamonwhattheclientwants.Becausehehasa trainedeye,heoftenfindsthingsthatwillbedistractingornotworkforthe userandwillsendthedesignbacktothesalesteamforthemtoreconfigure withtheclient.Soitisimportanttonotethatthewebsitedevelopmentcycle cangobackwards. Onthelastdayofclassthistermwhenyoupresentyourwebsitetotheclass, anotherclassmatewillcompleteausabilityformforyoursiteastheytestits functionalityanddesign.

53

54

Soletsgooutandgetsomesampletexttoplaywith.Iamgoingtograbsome andplaceitinmysample.htmlpageasonelargeparagraph. Makesuretogivethepageadescriptivetitleandsaveaswithanewfilename inyourWeek2folder.

Ifyouhaventsavedanewfileinawhile,letssavethisoneaslists.htmlaswe playwithlists.

<! InsertImage> <p><strong>RobertDeNiro</strong><br/> Thisismyfavoriteactorbecauseofhisearlywork: </p> <ul> <li>MeanStreets(1973)</li> <li>GodfatherII(1974)</li> <li>TaxiDriver(1976)</li> <li>DeerHunter(1978)</li>

<li>RagingBull(1980)</li> <li>OnceUponATimeInAmerica(1984)</li> </ul> Saveaslists.htmlinyourweek2folder.

59

Letsuseoneofourfilesandpracticeaddingcomments. Whyisitimportanttousecomments?

61

Sobeforewegetstartedweneedtogetoursample.htmlpagefromlastweek andopenitupinsaveitinafolderthatwewillcallweek2onthedesktop.We willcreatemanydifferentpracticepagesthisweekandsavetheminour practicefolderforthisweek.

Samewiththisone.Letscreateanewfileandcallitnoncharacterentities andsaveitinthesamefolder.

64

Letspracticeputtingintwodifferenttypesofimages.Theyreallyarenot differentimagestheyaredifferentintermsofwheretheyarelocated.Are theyinthedirectoryofthesite?Oraretheyfoundsomewhereexternallyon theinternet?SorememberallwearedoingiscodingourXHTMLsothatthere willbeawindowtowherethatimagewillbefound,I.e.,thesourceofthe image. TobefullyXHTMLcompliantweneedtohavethealternativetextattribute. Whydoyouthinkthatisrequired?Welloneofthew3sgoalsistomakethe webaccessibleforallusers.Someusersarevisuallyimpairedandthealt attributewillreadythedescriptionoftheimagetotheuseriftheyareusinga screenreader. Goourandrightclickonanimageandsaveitinyourweek2rootfolderina newdirectorycalledimages.Wealsoneedtofindanimagethatisonthe internetandgetitsuniversalresourcelocator,I.e.,URL. Togetthewidthandheight,rightclickandviewproperties.

65

<imgsrc="http://ia.media imdb.com/images/M/MV5BMjAwNDU3MzcyOV5BMl5BanBnXkFtZTcwMjc0M TIxMw@@._V1._SY314_CR12,0,214,314_.jpg"alt="RobertDeNiro" width="214"height="314"/>

<p><strong>RobertDeNiro</strong><br/> Thisismyfavoriteactorbecauseofhisearlywork: </p>

Saveasaddingimagesintheweek2folder.

Thereare4typesoflinks.

Syntaxisthesamebutthelinkisnotwithintherootofthesite(sitesmain directory)

Allexternallinksshouldhavethetargetattribute. Yourusershouldneverleaveyoursiteaccidentally.Ifyouownastoreatthe mallandsomeonecomesintotryonsomejeansyouwouldntwantthemto gointothedressingroomandthenaccidentallyleavethestorewouldyou?

Twostepprocess 1. Findwhereyouwanttoanchorto 2. Placethelinkthatwilldirecttheusertotheanchor.

Youcanevenanchorauseronaspecificpageonaspecificlocation.

Showtheemailaddressandnotclickhere Invitetheusertoemailyou

<aname="top"></a> <p>BesurethatyoucheckoutRoberton<a href="http://www.imdb.com/name/nm0000134/"target="_blank">Internet MovieDatabase(IMDB)</a>.</p> <p>WanttoknowmoreaboutRobert?Pleaseemailmeat<a href="mailto:davidhallmon33@webster.edu">davidhallmon33@webster.edu< /a></p> <ahref="#Top">BackToTop</a> Saveaslinks.htmlintheweek2folder.

77

Saveasdir_image.html

78

79

Mostlikelyasitehasmultipledirectoriesforimages,scripts,files,etc.But thereshouldnotbeanewdirectoryforeverypageofoursite!!!

WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyle Sheets.Theserulesdefinehowallparagraphsorlistsmightlookonapage.These dealmorewiththeappearanceofawebpage.CSSisnotcontent. Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar. Youcantakethecar,whatisunderthehood,thebodyandaddcolortoit.Add leatherseats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstill saysitsaFordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstilla MustangandfunctionslikeaMustang.Whileitlooksdifferent,itisstillaMustang. Toillustratethispoint,letsallcheckoutCSSZenGarden.com

81

WhatwouldbeadeclarationthatIcouldusetostylethisheading?

88

90

WhatwouldbeadeclarationthatIcouldusetostylethisheading?

93

HavestudentsgotoAppendixDintheirbook

Saveasinline_styles.html

96

Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatis outthereontheweb.Doessomethinglookincorrect?MaybeIcancontact themandhelpout?WowthatisreallycoolmaybeIcouldlearnhowtodo thatandaddittomysite. Weshouldespeciallybekeepinganeyeonthefunctionalityanddesign.This weekweexploredsitestoseegoodandbadexamplesofsiteswith meaningfulcontent.Thisiswherewekeepaneyeonthefunctionalityand design.Aswedevelopoureyesforthesethingsitwillhelpustomakesure ourfutureclientsanduserswillgetwhattheyneedandusallagreaterreturn onthewebsiteinvestment.

99

100

101