2

ButmakesurethatyouknowthatforthepurposesofthiscourseyourgoalIamassuming istogetagradeofyourchoosing.EverytimeIteachthiscoursethegradesalwaysfallina similarpattern.Thebellcurveisreallyfoundinsomanyareasoflifeandthesameistrue forthiscourse. Generallyspeaking,studentswhohaveshoweduptoclasseverydayandcompletedall assignmentstothefullestoftheirpotentialwillmostlikelygetanAinthecourse.Notice thedepartmenthasitsetupwheremostofthegradesinthiscoursearecompletion grades.IfyoutriedallaspectsoftheassignmentandIcanseethatyouhaveimplemented mypreviousfeedbackyouwillgetfullcredit.Althoughthisisnotthecaseforthequizzes, exams,andthetermproject.

Thisallbeingsaid,perhapsamoreimportantcurvetolookatisacreativitycurve.This curveisntbasedongradesbecauseIcannotgradecreativity.Astudentcouldhaveareally creativedesignbutitcouldbeterriblymarkedupandriddledwitherrors.YourTPisgraded onveryspecificobjectivesoutlinedinthesyllabus.Noneofwhichhavetodowith creativity.Buttheparadoxthatweneedtorememberisthatcreativityisoftenwhat catchestheuserseye.Thisiswhatsells.Thisiswhatouruserswant.Wejustneedtomake surethatthesetwographsarealigned. Ihaveseencasesinthiscoursewheretheyarenotaligned.

Asifyoucouldpossiblyforgetbythistimeinthecourse.Thereasonwegothrougha processlikethisisbecausewearetryingtohelpouruserssolvetheirproblems.Helpthem dosomething,seeksomething,etc.Soinorderforustodesignsitesthathelpthem accomplishthiswemustgothroughaspecificprocesstotakeourideasintofruition.

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

Whatdoyouthinkweneedtoconsiderwhenwearepublishingoursitesintermsofour users?

10

WhataresomeexamplesofgettingourcartbeforeourhorseintermsofPublishingand Maintaining?

LetsbrieflyreviewwhatwelearnedinWeek1whenwechattedabouttheWorldWide Webandhowitwasorganized.

12

Discusshierarchy

13

Thisiswhatouruserswantandtheywanttofindeverythingthattheyneedwithinitright? Butinorderforthemtoaccessthiswhatdotheyneed? ISP UserAgentw/aBrowser URL AppropriatePermissions

14

15

16

17

Dontforgetthiscoursehasbeenasimulation.Youarenotactuallyregisteringthisdomain name,ArnoldfromKingofQueensandthekidsfromTwo&AHalfMenarenotyour realusers,andyouareyourownclient.Whenyoustartmakingsitesasafreelanceweb designerorworkingwithinafirmyouwillmostlikelyuseasimilarwebdevelopment process.

18

19

20

Dependsonthecontext... Forourpurposes,itiscontentlike: text,images,audio,andvideo Inmyfieldthisisusuallycalledmultimedia Mixingoftext,images,audio,andvideo

21

Somecallitdigitalmedia Forourpurposes,somethingthattransmitscontentlike: text,images,audio,andvideo

22

SomepeoplewouldcallthesetoolsWeb2.0.Overthelast10yearsthistermhasbecome ubiquitousandperhapsoverused.Thereareevenvaryinginterpretationsofwhatit actuallymeans.Oftencallingsomething2.0or3.0wouldindicatethatthereisanew versionofsomethingorinthiscaseanewversionofthewebForourpurposesweget behindthedefinitionthatitisanewwayforuserstointeractwiththecontentoftheweb andeachother.Socially.

23

Sothenyouareprobablythinkingwow,therearesomanywaysforouruserstointeract witheachotherandthecontent.Whichonesshouldwechoose?Well,dontbe overwhelmed.

24

Perhapsitwouldbehelpfultorealizethatthereisntonesocialmediatoolouttherethat isthebestfitforyoursite.Somesitesmightneedtousevarioustoolsbasedonwhattheir usersneedtodoorwhattheywanttoprovidetotheirusers.Remember,itisalwaysabout theuser.Sohowdoyoufigureoutwhattooltouse?

25

Sotohelpusallsiftthrougheverythingoutthereandfigureoutwhatisbestforourusers,I cameupwiththePeriodicTableoftheInternet.Thisdivideswhatisoutthereonthe internetinto18differentgroups.Insteadofsolid,liquid,andgaswehavesearchengines, blogs,socialnetworking,etc.Eachelementortoolwouldhavethesiteurl, abbreviation,andhaveGooglespagerank.Forexample,checkouttheeverpopular Facebook.Itiswithinthe14th groupingentitled,SocialNetworking,hasthesymbolFb,and hasaGooglepagerankof29. JustkiddingArentinfographicsfun?

26

27

Inordertodiscussthesethreedifferentwayswehavetounderstandtherelationshipof thecontentwiththeclientbutalsowiththeuser.

28

29

30

31

32

Sothepurposeofthisslideisjusttohithomethefactthatthispurposethatwehavebeen discussingistheheartofthewebsite.Whatarewewithoutourhearts?Arewesuccessful? SopleaseknowthatawebsiteismorethanjustitsXHTMLandCSSishasaspecificpurpose tosolveausersproblem. Thepurposeofawebsiteistheveryreasonforitsexistence!Everyotherelementshould bebuilt,createdanddesignedtosupportthatpurposeinsomeway.Ifitisnotsupporting thepurpose?Thenwhatisitdoing?

33

Youwouldthinkitwouldbeanobrainer,butaftersomeresearchwehavediscoveredthat functionalitygoeshandinhandwithknowingyourtargetaudience.Thisiskeytothe designoftheentiresite,asdesignerswillneedtomakethewebsiteaccessibleand appealingourusers.

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

AHTMLboxhasmargin,border,andpaddingsurroundingitscontentarea. Accordingto theW3Cspecification,'width'and'height'CSSattributesonlydefinethewidthandheight ofthecontentarea,nottheboxitself. Thebox'spadding,border,andmarginarenot consideredtobepartsofthecontentarea. SothefollowingCSSrulewillrendera150pixelwideandheigh'myBox'DIV,althoughits CSSwidthandheightaresetto100pixels: boxwidth=width+2*(padding+border+margin)=100+2*(10+5+10)=150 However,IEdecidestohaveitsownboxmodel.IEincludespaddingandborder(not margin)inwidthandheight.SotheaboveCSSrulewillproducea120pixelwideandheigh box. boxwidth=width+2*margin=100+2*10=120

67

AHTMLboxhasmargin,border,andpaddingsurroundingitscontentarea. Accordingto theW3Cspecification,'width'and'height'CSSattributesonlydefinethewidthandheight ofthecontentarea,nottheboxitself. Thebox'spadding,border,andmarginarenot consideredtobepartsofthecontentarea. SothefollowingCSSrulewillrendera150pixelwideandheigh'myBox'DIV,althoughits CSSwidthandheightaresetto100pixels: boxwidth=width+2*(padding+border+margin)=100+[2*(10+5+10)]=150 However,IEdecidestohaveitsownboxmodel.IEincludespaddingandborder(not margin)inwidthandheight.SotheaboveCSSrulewillproducea120pixelwideandhigh box. boxwidth=width+2*margin=100+2*10=120

68

69

AHTMLboxhasmargin,border,andpaddingsurroundingitscontentarea. Accordingto theW3Cspecification,'width'and'height'CSSattributesonlydefinethewidthandheight ofthecontentarea,nottheboxitself. Thebox'spadding,border,andmarginarenot consideredtobepartsofthecontentarea. SothefollowingCSSrulewillrendera150pixelwideandheigh'myBox'DIV,althoughits CSSwidthandheightaresetto100pixels: boxwidth=width+2*(padding+border+margin)=100+2*(10+5+10)=150 However,IEdecidestohaveitsownboxmodel.IEincludespaddingandborder(not margin)inwidthandheight.SotheaboveCSSrulewillproducea120pixelwideandhigh box. boxwidth=width+2*margin=100+2*10=120

70

71

72

#myBox{ width:250px; height:250px; padding:10px; border:5px; margin:10px; backgroundcolor:#000; color:#FFF; } </style>

<body> <divid="myBox"> PlaceholderText </div> </body>

73

</html>

73

74

75

76

77

78

79

80

81

82

83

87

88