1

Togetusstarted,Iwouldlikeusalltowatchthefollowingvideodocumentaryfrom Code.org whichisanonprofitdevotedtothevisionthateverystudentineveryschool shouldhavetheopportunitytolearnhowtocode.Theybelievethatcomputer programmingshouldbepartofthecorecurriculumineducation,alongsideother scienceandmathcoursessuchasbiology,chemistryandalgebra!

Anybodyknowwhothisis?

ThisisBillGatesatage20.AroundthetimehestartedMicrosoft.

Andthis?

ThisisSteveJobsatage21.

Andthis?

Sowhatdothesetechmogulshaveincommon? ButonethingthatIwouldliketomentionistheirexpertabilitytomakethecomplex understandablethroughtheirwritingandpresentations.Fromeverythinglikehowto useaMicrosoftOS,thetechbehindtheiPhone,andthemeaningofaFacebookpoke. Iftheycouldntexplainitwelltootherstheywouldntandtheircompanieswouldntbe wheretheyaretoday.

10

Designersneedtobeabletotalkwithdevelopers

11

Andbothneedtobeabletotalktothebusiness,eitheraclient,sales,management, etc.

12

WithoutanabilitytodothispeoplelikeBillGates,SteveJobs,andMarkZuckerberg wouldnothavebeenassuccessful.

13

14

15

Thisiswhyinthisclasseachweekyouwillbeaskedtowriteupyourthoughtsand prepareaminidiscussion/presentationofyourthoughtsintwoassignments.TheGood, Bad,andtheUglyorGBUandtheTermProjectJournalorTPJ. Sothisclassismuchmorethanjustlearninghowtocode.Studentswillleavethisclass withskillstorecommendhowawebsitecanberedesigned,recommendbest practices,analyzeusers,planasite,andofcoursethebasicsofcodingasite.

16

Sotomakesurethatweunderstandtheseassignmentsletstakealookatthecourse syllabus.

17

Oneofthereasonswewentwiththisbookisbecauseofthisemphasis.Youwillfindin thisclassIwilldiscussatlengththeimportanceoftheuserandhowattimesIthinkit shouldbemoreabouttheuserthanevenlearninghowtocode. IhaveaccesstoasoftversionofthechaptersinthisbookandIputallofthetextfrom Chapter1intoafreewordcloudprogramcalledwordle.Whattheprogramdoesisit makesthemostcommonwordslargerthantheotherwordstoconveyimportance. Thebookteachesyouthebasicswiththeuseratthecenter.

18

TheInternet beganwithaconnectionofcomputersandcomputernetworks.Asweall knowtheInternethaschangedthewayweliveourlivesandinteractwitheachother. Togetusstarted.Letstalkaboutwhatsomethingsarethatweusetheinternetfor? Searchforinformation Communicatewithotherpeople Paybills Etc. HowhastheInternethasrevolutionizedthewaybusinessandindustriesfunction? Companiesnowneedwebsites Customerslookforcompaniesonthenet TalkaboutTopsUrWay

19

TherearealotofthingssharedontheInternet.Thefirstthreebulletsherecanreallybe onebulletcalledcode,butmorespecifically,HTML,CSS,scripts,text,images,files, etc.Fileslikeimages,documents,audio,videos,etc.canbethoughtofascontent. Browsers interpretthisinformationfortheuser intothewebpageswehavejustbeen discussing.Browsersthenallowtheusertodosomething,seeksomethinganything thattheywantontheInternetiftheyhavepermissionorknowhowtofindit.

20

YouwillfindoutinthiscoursethatIwillharponhowimportantitistounderstandyour user.Haveyoueverheardthesaying,Thecustomerisalwaysright?Well,forthe purposesofthiscourse,theuserisalwaysright.Andtheyknowwhattheywant.Itisall aboutthem. Ifyoulearnonethinginthiscoursepleaselearnthatitisalwaysabouttheuser.Ihavea closefriendwhoisawebdesigneratafirmoverinIllinoisandheisaskeddailyto designsomethingthatheknowswillnotworkfortheuser.Himrealizingthisallowshim toaskthesalesdepartmenttocontacttheclientandgetthingscorrected.Whatwould youthinkwouldhappenifmyfrienddidntnoticethingslikethis? Badwebsite Customerunhappy Etc. Doesanyoneknowhowmuchthetextbookcosts?

21

Oneofthereasonswechosethistextbookforthiscoursewasbecauseofthesentence foundinchapter1Itisworthitsweightingold! Comprehensiveplanningandanalysisensuresthatdesignersanddeveloperswill providewhattheiruserswant.IfyoustarttocodeyourWebpageswithoutthorough planningandanalysis,youruntheriskofmissingpertinentinformation.Itismuchless expensivetomakecorrectionstoaWebsiteintheearlyphasesofaproject developmentthatitistoalterWebpagesthatarecompleted. Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteiffortheuser.Notforthe designerortheclient.AmazonswebsiteisnotforthecompanyAmazon.Itisfortheir customerstheusers.

22

InthiscoursewewillutilizeaprocesscalledtheWebDevelopmentLifeCycleasa frameworktocreateourtermprojects,i.e.,thewebsitesthatwewillbecreating. Aswebdesigners/developers,weneed(should)tofollowaprocesswhenweare creatingpagesandsitesforourselvesasa"hobbyist"ora"opportunist"freelanceweb designer.Moreonthatnextweek. Thediagramrepresentsthatprocess.Itrulyhopethatyouwillutilizethisprocessfor anyfurtherwebsitesthatyouwillevermakeasadesignerordeveloper.Besuretopay specialcloseattentiontothediscussionofthiscycleinyourtextbookandthe correspondingweeklylectures.

23

ThisisareallycoolphotooftheEmersonLibrary.Thephotoisheartohelpremindus thattheinternetbeganasawayforuniversitystudentslikeyourselftoshareresearch content.In1969thereneededtobeawayforacomputeratoneuniversitytoconnect withanotheruniversity.Thissimplenetworkhasnowevolvedintobillionsofusers accessingandsharingcontent. LikeIwassayingearlier.Contentcouldbetext,graphics,sound,video,etc.Inthecase ofthe1969usersIamguessingitwassimpletextfilesofresearchcontent.Modern universityusersaresharinglargerfileslikemusicandvideos. Nowinthepresentday,ifuserswanttoaccesscontentontheInternet,theymusthave anaccountwithanInternetServiceProvider(ISP).IdontknowwhoWebstergetstheir internetfrom,butatourhomesifwehavetheinternet,weallhaveanISP. WhatISPsdowehaverepresentedtonight? Charter AT&T Etc. Whileitmightfeellikeitsometimes,thesecompaniesdontowntheInternet.They provideusaccesstotheInternetthroughaDSLorCableconnectionlinessotheirusers

24

canaccesscontent.andasweknowtheychargeapremiumforthis.

24

WhenyouhearWWWorWorldWideWeb,thinkofitasacollectionofwebcontent. Tosupportthesepages,documents,files,ormultimedia forusers,thereneededtobe somesortofprotocolforhowtheycouldaccessthem.ThisiswherewegettheHyper TextTransferProtocolyouknow,(HTTP)whichisasetofrulesforexchangingthe content,e.g.,images,audio,video,text,etc.thatarefoundoftenfoundonwebpages.

25

Discusshierarchy

26

Thisisanexampleofawebsitewhichisacollectionofwebpagesmaintainedbyweb designersanddeveloperslikeourselves. Eachhasahome(i.e.,indexpage)whichtheiruserswillnavigatetofirstandthen navigate tootherareasofthewebsite(ifitiswelldesigned). Eachofthesepagesarestoredonawebserversomewhere.Thesearesometimes calledahost,becausetheyhostthespaceforthesite. Forthepurposesofthiscourse,wewillcreatealocalhostwhichjustmeansthatour computerswillbehostingoursites.Wewilleventuallybeuploadingor FTPingthese toWebstersstudentservercalledLabwebs. Onceasiteissetup,theirusersessentiallymakerequeststotheseserverswhich servetheuser. Whatisarequest? Remember,ausercanonlymakearequesttotheserveriftheyhavetheappropriate permissionsandknowthelocationofthecontentthatyouwant,i.e.,aUniversal ResourceLocatoror(URL).

27

Ohwait.TheyalsoneedanISPandabrowser.Whatbrowsersdoyouliketouse? IE Firefox Crome Safari

27

LikeIwassaying,inorderforausertomakearequestwithaURL,theymusthavean ISPthatcanaccesstheWWWandabrowsertointerpretthecontent.Thereare protocolsforthis SoabrowserinterpretstheHTML,CSS,scripts,etc.todisplaythecontentfortheuser. Thisisoneaspectofthemediumthatwearedesigningwithin.Ourcanvastopaint:). Otheraspectsofthismediumwillbediscussedlater.

28

LetsgounderthehoodofWebsterswebsite. Noticehere,aswearenowunderthehoodorWebsterswebsite.ThisistheHTML usedtocreatethiswebpage.Itisfilledwithspecialinstructionscalledelements that aremarkedupwithtags anddefinethestructureandlayoutasitisdisplayedinthe browser.

29

Beforewegoanyfurther,letswatchashortclipfromoneofourLyndatrainingcourses thatIhavelistedonthesyllabus.Remember,itisnotrequiredtohaveasubscriptionto Lynda.combutIwillbebringinginvideoresourceshereforthisclass. WatchHTMLEssentialTraining *WhatisHTML?

Wecancreatedocumentslikethisusingatexteditorwhichallowsausertoenter, change,save,andprintHTML. OnPCyouwillmostlikelyuseNotepad++andonMac,TextWrangler.Thereareothers outthere.Somefree,somenot.Feelfreetofindonethatyouliketouse.

LetscodeourfirstpageinNotePad++.Togetstarted: 1. 2. 3. 4. Firstweneedtolocateourtexteditorthatwewilluse. EnableWordWrap CopytheseinitialHTMLTagsandcontentfromyourhandoutintoyourtexteditor Savethepageashello_world.htmlinafoldercalledweek1onthedesktop.Make sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefilein yourdefaultbrowser.

32

Isthispageontheinternet? Canyourneighboraccessyourpage? Whoishostingthispage?

33

34

35

RememberwhatHTMLstandsfor?Itisamarkuplanguagewhichmeansthatraw content,e.g.,text.ismarkedupwithelementsandtags(sometimescalled documentcontainers).Variouselementsmarkupthecontentaselementse.g., headings,paragraphs,links,lists,etc. Thesetagsareopenandclosedwithanglebrackets.Sometimesanelementwillenclose thecontentwithastartandendtag(oftencalledopenandclose)andsometimes therearewhatscalledanemptyelementbecauseitisnotmarkingupcontent. Forexampleanimageisanemptyelementbecauseallitisdoingisprovidingawindow tothecontentandnotactuallymarkingitup. Thew3consortiummandatesthatallelementsclosesoforourpagestobefully XHTMLcompliantwehavetouse<br/>butnoticethedifferenceintheuseofthe backslash.

36

LetscodeasecondpageinNotePad++.Togetstarted: 1. Savethehello_world.htmlaswhat_is_html.html 2. CopytheseinitialHTMLTagsandcontentfromyourhandoutintoyourtexteditor 3. Save

37

Ablocklevelelementisanelementthatcreateslargeblocksofcontentlikeparagraphs orpagedivisions.Usingthemoftenstartsanewlineinthedocumentandtheycan containotherblockelementsaswellasinlineelements. Howmanyblocklevelelementsdoyousee?

38

Five

39

40

Aninlineelementisanelementthatdefinescontentwithinablocklevelelement,e.g., strongmakestheenclosedtext(not)stronglyemphasizedandemwillitalicisethe text(markuplanguage).Theydon'tstartnewlineswhenyouusethem.Theycan containotherinlineelementsbutyouhavetowatchyoursyntax.

41

Whichoftheseishasanerrorinsyntax?

42

43

44

Thereisalsoa4thtypeofelementinHTML thosethataren'tdisplayedatall.These tagsaretheonesthatprovideinformationaboutthepagebutdon'tnecessarilyshow upinthevisibleportionofthepage.ThisrepresentsthecontentonoursimpleHTML page.

45

Forexampleinthe STYLEtodefinestylesandstylesheets,METAtodefinemetadata,andHEADtohold thoseelements. Therearemanydifferentdocumentsontheweb.Abrowsercanonlydisplaya documentcorrectly,ifitknowswhatkindofdocumentitis. TherearealsomanydifferentversionsofHTML,andabrowsercanonlydisplayan HTMLpage100%correctlyifitknowstheexactHTMLversionusedinthepage.Thisis what<!DOCTYPE>isusedfor.

46

47

Attributesoftentellthebrowserhowtovisuallyrenderthecontentoftheelement.For exampleletssaythatwewantedtocenteraheading.Wefirsthavetoattachthe alignattributeandthengivetheattributeavalue,i.e.,center.Thesyntaxisvery specificandmustbeindoublequotes. Rememberouremptyimageelement?Inthiscase,thevalueofthesrcattributetells thebrowserthelocationoftheimage.

48

WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyleSheets. Theserulesdefinehowallparagraphsorlistsmightlookonapage.Thesedealmore withtheappearanceofawebpage.CSSisnotcontent.

49

Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar. Youcantakethecar,whatisunderthehood,thebodyandaddcolortoit.Addleather seats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstillsaysitsa FordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstillaMustangand functionslikeaMustang.Whileitlooksdifferent,itisstillaMustang.

50

Toillustratethispoint,letsallcheckoutCSSZenGarden.com

51

XHTMLisastricterandcleanerversionofHTML. XHTMLissupportedbyallmajorbrowsers. XMLisamarkuplanguagewheredocumentsmustbemarkedupcorrectlyand"well formed". Therefore bycombiningthestrengthsofXML,HTML,andXHTML.HTML5was developed.

52

Today'smarketconsistsofdifferentbrowsertechnologies.Somebrowsersrunon computers,andsomebrowsersrunonmobilephonesorothersmalldevices.Smaller devicesoftenlacktheresourcesorpowertointerpreta"bad"markuplanguage.More onthisnextweek. RememberearlierwhenIwastalkingaboutmediums?1)beingthebrowser.Theother 2)istheUserAgent.

53

54

Thisisthedifferencebetweengraphicandwebdesign.Agraphicdesignercancreatea movieposterandthetheirusersallwalkbyitandhavethesameexperience.

55

Forusaswebdesignersweneedtotakeintoaccountthatourusersallusedifferent browsersanduseragents.Ourgoalistointheorygiveallofourusersthesame expreince.

56

Beforewegoanyfurther,letswatchtwoshortclipsfromoneofourLyndatraining coursesthatIhavelistedonthesyllabus. WatchHTMLEssentialTraining *ExaminingthestructureofanHTMLdocument *Understandingdocumentcontainers(onlywatchfirstpart)

57

TogetstartedcodingfullyXHTMLcompliant: 1. 2. 3. 4. Firstweneedtolocateourtexteditorthatwewilluse. EnableWordWrap CopytheseinitialHTMLTagsandsamplecontentfromyourhandoutintoyourtext editor Savethepageassample.htmlinafoldercalledweek1onthedesktop.Makesure youaddtheHTMLextension.Thiswilltellyourcomputertoopenthefileinyour defaultbrowser.

5. Nowwecanusethissample.htmlpagetodevelopotherpages.

58

59

Letsuseoursamplepagetocreatesomenewcontent. 1. Firstweneedtolocateourtexteditorthatwewilluse. 2. EnableWordWrap 3. Openyoursample.htmlpage 4. Addnewcontent. 5. Savethepageasxhtml_intro.htmlinafoldercalledweek1onthedesktop.Make sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefilein yourdefaultbrowser.

61

62

63

Yourtextmentionsothertexteditors,butpleasedonoteveruseaprogramlikeMS Wordtocreateawebpage.Whileitcandothis,itaddslotsofadditionalorerroneous uselesscodethatcaninterferehowthewebpagelooksindifferentbrowsers. DEMOCreatingAWebPageInMSWord Somebrowsersaremoreforgivingthanothers.Themainthingtoremember,wedonot everwantcodethatdoesntneedtobethere.Ourcodeshouldalwaysbesimpleand easytoread.

64

AWYSIWYGEditororwhatyouseeiswhatyougeteditorallowstheusertopreview thepublishedviewoftheHTML.Someevenallowtheusertoeditthepublishedview. InothercoursesinthisprogramyoumayhearaboutIDEsoranIntegrated DevelopmentEnvironment.TheseareprogramslikeDreamweaverwhichIuseona dailybasisfordesigningwebpagesorVisualBasictodevelopprogrammingand graphicaluserinterfaces(GUI)forawebpages.Dependingonwhichtrackyoutakein ourprogramhereyoumightgoonewayortheotherormaybeboth. Needlesstosay,beforeyougetintocreatingwebpagesinanIDE,youneedtoknowthe basics.ThebestwaytodothatistouseaTextEditor. Howgoodisahammerifyoudonotknowhowtouseit?Ihaveagaragefulloftools. Doesthatmakemeageneralcontractor?

65

ThisbringsustotheendofCh1.Theonlythingsthatarelefttocover,whichisa lectureinitselfaretheWebDevelopmentCycleandbeinganObservantWebUser.Be surethatyoureadaboutthesetwoconceptsaswewillbeutilizingthesethroughout thecourseandtherewillbequestionsonthequiznextweekdedicatedtotheseand howimportanttheyare.Somakesureyoureadthesesectionscarefully.Ifyoudonot haveyourtextyet,youcangetthechaptersintheTextbookeReservesfolderonour courseshomepage. WewillalsobeutilizingtheWebDevelopmentLifeCycletowalkusthroughthe creationofourwebsitesforourtermprojectsandIhopeanyfurtherwebsitesthat youwillevermakeasadesignerordeveloper.Inthisfirstweekwewillbeinthe planningphaseofthecycleforyourtermproject,i.e.,thewebsitethatyouwill createduringthisterm.

67

68

Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatisoutthere ontheweb.Doessomethinglookincorrect?MaybeIcancontactthemandhelpout? WowthatisreallycoolmaybeIcouldlearnhowtodothatandaddittomysite. Weshouldespeciallybekeepinganeyeonthefunctionalityanddesign.Oneofour weeklyassignmentswillbetheGood,Bad,&TheUglydiscussions.Thisiswhereyour eyeonthefunctionalityanddesignwillbedeveloped.Thiseyemightbeusedto makesureyourclientsusersgetwhattheyneedandsaveyouandyourcompanyalot ofmoneyorgetagreaterreturnonyourinvestment.