Вы находитесь на странице: 1из 135

2

ButmakesurethatyouknowthatforthepurposesofthiscourseyourgoalIam assumingistogetagradeofyourchoosing.EverytimeIteachthiscoursethegrades alwaysfallinasimilarpattern.Thebellcurveisreallyfoundinsomanyareasoflife andthesameistrueforthiscourse. Generallyspeaking,studentswhohaveshoweduptoclasseverydayandcompleted allassignmentstothefullestoftheirpotentialwillmostlikelygetanAinthecourse. Noticethedepartmenthasitsetupwheremostofthegradesinthiscourseare completiongrades.IfyoutriedallaspectsoftheassignmentandIcanseethatyou haveimplementedmypreviousfeedbackyouwillgetfullcredit.Althoughthisisnot thecaseforthequizzes,exams,andthetermproject.

Thisallbeingsaid,perhapsamoreimportantcurvetolookatisacreativitycurve. ThiscurveisntbasedongradesbecauseIcannotgradecreativity.Astudentcould haveareallycreativedesignbutitcouldbeterriblymarkedupandriddledwith errors.YourTPisgradedonveryspecificobjectivesoutlinedinthesyllabus.Noneof whichhavetodowithcreativity.Buttheparadoxthatweneedtorememberisthat creativityisoftenwhatcatchestheuserseye.Thisiswhatsells.Thisiswhatourusers want.Wejustneedtomakesurethatthesetwographsarealigned. Ihaveseencasesinthiscoursewheretheyarenotaligned.

Asifyoucouldpossiblyforgetbythistimeinthecourse.Thereasonwegothrougha processlikethisisbecausewearetryingtohelpouruserssolvetheirproblems.Help themdosomething,seeksomething,etc.Soinorderforustodesignsitesthathelp themaccomplishthiswemustgothroughaspecificprocesstotakeourideasinto fruition.

So,don'tthrowoutthebabywiththebathwater!Thedatathatyougatheredwith theclientinthoseearlyphasesissocrucial!Evenaswearereviewingandtestingour sites. Don'tthrowitout!

Whatdoyouthinkweneedtoconsiderwhenwearepublishingoursitesintermsof ourusers?

10

WhataresomeexamplesofgettingourcartbeforeourhorseintermsofPublishing andMaintaining?

LetsbrieflyreviewwhatwelearnedinWeek1whenwechattedabouttheWorld WideWebandhowitwasorganized.

12

Discusshierarchy

13

Thisiswhatouruserswantandtheywanttofindeverythingthattheyneedwithinit right?Butinorderforthemtoaccessthiswhatdotheyneed? ISP UserAgentw/aBrowser URL AppropriatePermissions

14

Thisiswhatouruserswantandtheywanttofindeverythingthattheyneedwithinit right?Butinorderforthemtoaccessthiswhatdotheyneed? ISP UserAgentw/aBrowser URL AppropriatePermissions

15

16

17

18

Dontforgetthiscoursehasbeenasimulation.Youarenotactuallyregisteringthis domainname,ArnoldfromKingofQueensandthekidfromTwo&AHalfMen arenotyourrealusers,andyouareyourownclient.Whenyoustartmakingsitesasa freelancewebdesignerorworkingwithinafirmyouwillmostlikelyuseasimilarweb developmentprocess.

21

22

23

24

25

Whatdoyouthinkweneedtoconsiderwhenwearepublishingoursitesintermsof ourusers?

26

27

28

29

30

31

32

33

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

34

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

35

SomepeoplewouldcallthesetoolsWeb2.0.Overthelast10yearsthistermhas becomeubiquitousandperhapsoverused.Thereareevenvaryinginterpretationsof whatitactuallymeans.Oftencallingsomething2.0or3.0wouldindicatethatthere isanewversionofsomethingorinthiscaseanewversionofthewebForour purposeswegetbehindthedefinitionthatitisanewwayforuserstointeractwith thecontentofthewebandeachother.Socially.

36

Sothenyouareprobablythinkingwow,therearesomanywaysforourusersto interactwitheachotherandthecontent.Whichonesshouldwechoose?Well,dont beoverwhelmed.

37

Perhapsitwouldbehelpfultorealizethatthereisntonesocialmediatoolout therethatisthebestfitforyoursite.Somesitesmightneedtousevarioustools basedonwhattheirusersneedtodoorwhattheywanttoprovidetotheirusers. Remember,itisalwaysabouttheuser.Sohowdoyoufigureoutwhattooltouse?

38

Sotohelpusallsiftthrougheverythingoutthereandfigureoutwhatisbestforour users,IcameupwiththePeriodicTableoftheInternet.Thisdivideswhatisoutthere ontheinternetinto18differentgroups.Insteadofsolid,liquid,andgaswehave searchengines,blogs,socialnetworking,etc.Eachelementortoolwouldhave thesiteurl,abbreviation,andhaveGooglespagerank.Forexample,checkoutthe everpopularFacebook.Itiswithinthe14th groupingentitled,SocialNetworking,has thesymbolFb,andhasaGooglepagerankof29. JustkiddingArentinfographicsfun?

39

40

Inordertodiscussthesethreedifferentwayswehavetounderstandthe relationshipofthecontentwiththeclientbutalsowiththeuser.

41

42

43

44

45

Sothepurposeofthisslideisjusttohithomethefactthatthispurposethatwehave beendiscussingistheheartofthewebsite.Whatarewewithoutourhearts?Arewe successful? SopleaseknowthatawebsiteismorethanjustitsHTMLandCSSishasaspecific purposetosolveausersproblem. Thepurposeofawebsiteistheveryreasonforitsexistence!Everyotherelement shouldbebuilt,createdanddesignedtosupportthatpurposeinsomeway.Ifitisnot supportingthepurpose?Thenwhatisitdoing?

46

Youwouldthinkitwouldbeanobrainer,butaftersomeresearchwehavediscovered thatfunctionalitygoeshandinhandwithknowingyourtargetaudience.Thisiskeyto thedesignoftheentiresite,asdesignerswillneedtomakethewebsiteaccessible andappealingourusers.

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

AHTMLboxhasmargin,border,andpaddingsurroundingitscontentarea. According totheW3Cspecification,'width'and'height'CSSattributesonlydefinethewidthand heightofthecontentarea,nottheboxitself. Thebox'spadding,border,andmargin arenotconsideredtobepartsofthecontentarea. SothefollowingCSSrulewillrendera300pixelwideandhigh'myBox'DIV,although itsCSSwidthandheightaresetto250pixels: boxwidth=width+[2*(padding+border+margin)] =250+[2(10+5+10)]=300

89

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

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

90

</html>

90

91

92

93

However,IEdecidestohaveitsownboxmodel.IEincludespaddingandborder(not margin)inwidthandheight.SotheaboveCSSrulewillproducea120pixelwideand highbox. boxwidth=width+2*margin=250+2*10=270

94

95

SolvedasofIE8

96

97

#myBoxBlack{ width:250px; height:250px; padding:10px; border:5px; margin:10px; backgroundcolor:black; color:#FFF; float:right; } </style>

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

98

</body> </html>

98

99

#myBoxBlack{ width:250px; height:250px; padding:10px; border:5px; margin:10px; backgroundcolor:black; color:#FFF; float:right; } </style>

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

100

</body> </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

TalkaboutHTML5semanticelements.Asemanticelementclearlydescribesits meaningtoboththebrowserandthedeveloper.

116

117

TalkaboutHTML5semanticelements.Asemanticelementclearlydescribesits meaningtoboththebrowserandthedeveloper.

118

TalkaboutHTML5semanticelements.Asemanticelementclearlydescribesits meaningtoboththebrowserandthedeveloper.

119

120

AswehaveseensofartodayandmanyofexistingwebsitestodaycontainHTMLto definevarious<div>slike<divid="nav">,<divclass="header">,or<divid="footer">, toindicatenavigationlinks,header,andfooter. HTML5offersnewsemanticelementstoclearlydefinedifferentpartsofawebpage whichwehavebeenseeingallalonginoursample.htmlpage.

121

122

AswehaveseensofartodayandmanyofexistingwebsitestodaycontainHTMLto definevarious<div>slike<divid="nav">,<divclass="header">,or<divid="footer">, toindicatenavigationlinks,header,andfooter. HTML5offersnewsemanticelementstoclearlydefinedifferentpartsofawebpage whichwehavebeenseeingallalonginoursample.htmlpage.

123

124

125

129

130

131

132

Вам также может понравиться