Modul 2: Website

1. Broadcast: http://join.me/flashbroadcast Modul 2: Website Undervisere: Stefan ogHelle Hvad handler moduletom? Udviklingaf websites Webdesign Dokumentation

2. Hvadskal I lærepåmodul 2? Interaktion Html Css Webstandarder Javascript jQuery jQueryMobile Dokumentation Visualisering Visuelt perspektiv på websites Kommunikation Kommunikationogwebsider Skrivgodttilnettet Usability   Virksomhed Personlig branding

3. Projektopgave I skalindividueltudvikle et portfolio-website tilpræsentationafjeresegne Photoshop- og Flash-arbejderframodul 1 (vi vender tilbagetilopgavensidstpådagen)

4. Program for i dag • Intro • Vigtigebegreber: web-server ogweb-client • Installation afKomodo Edit til html-kodning • Html-kodeningafden førstewebside • Installation afFilezilla ftp-program • Læg den førstewebsidepånettet • Grundigpræsentationafmodulopgaven----------------------------- • Efterundervisning: I arbejder med den førsteafleveringsopgave, en html-kodetwebside(deadline iaften kl. 23.59). • Alleskal have installeretbrowserne: Safari, Chrome og Firefox.

5. HvaderWWW (World Wide Web)? WWW er en stor del afinternettet På www ligger web-pages påweb-servers. Web-pages kanindeholde links tilandre web-pages. Påweb-clientener der installeretet program til at henteog vise web-pages: En browser Eksemplerpåbrowsere: IE, Crome, Firefox, Safari Indbyrdes sprog (protokol): http

6. Vigtigebegreberom websites htmlernavnetpå en mappe,web-siden ligger i http://websites.keaweb.dk/html/eks1.html eks1.html erweb-sidensfilnavn websites.keaweb.dker host-adressen,somfortællerhvilken web-server web-siden skalhentesfra httperdet sprog, computernepå www bruger Browser-vindue Adressefelt med web-page adresse

7. Kildekode Højreklikpå en web-side ibrowseren for at se kildekoden

8. Web-client – web-server Web-server Web-client med browser 1. En http-request sendesafstedfraweb-client til web-server 2. Web-server finder web-sidenogsender den returtil web-client 3. Web-clientenåbnerfilenoglæser den.Den sender evt. request efterandre filer, sombrugesafwebsiden – f.eks. billedfiler, lyd-filer, videoerellerlayoutfiler 4. Web-clientenviser web-sidenpåskærmen Videoer, du evt. kan se: http://youtube/qv0XCaUkfNkhttp://www.youtube.com/watch?v=1wUxWxYOdTEhttp://www.youtube.com/watch?v=7_LPdttKXPc

9. Installation af Komodo Edit Komodo Edit er et program tilkodningaf html, css, javascript, php etc. Programmetergratisogfindestilbåde Mac ogPC Hvorforikke Dreamweaver? Find downloadsidenved at google dig frem(fx: “Komodo Edit download”)(vi skal have fat i Komodo Edit, version 8) DownloadProgrammet Installérprogrammetpå din computer

10. Indstillingaf Komodo - encoding Åbnprogrammet. VælgKomodo, Preferences, Internationalization Under Language-specific Default Encoding vælger du:html5ogutf-8

11. Indstillingaf Komodo – new files VælgKomodo, Preferences, New Files Under Specify the Language for files created using the ‘New’ button: vælghtml5 KlikOK

12. Første web-side: 1. Opretmappe, læg tom navngivetfilimappen • Opretførst en mappe, eks1, påskrivebordet • ÅbnKommodo Edit • I venstre side afskærmenskal der være en lyseblåkolonne med mappe- ogfil-lister. Mangler den: vælgView, Tabs & Sidebars, Places • Klikpå den lilleblomstøversti den lyseblåkolonne, ogvælgOpen Directory. • Åbn den mappe, du ligeharoprettet. • VælgFilesogNew for at åbne en nyfil • Gem den nyetommefil under navneteks1.html imappen eks1 påskrivebordet.

13. Første web-side2. Skrivtekstenind Websiden vi skal lave, skal se sådanud: Start med at skrive al tekstind.

14. Første web-side3. Se sidenlokalt Gemwebsiden (cmd+sellerFiles, Save) Når web-sidenergemt, ligger den lokaltpå din egenmaskine – ikkepåinternettetendnu Du kan se den lokaltved at finde den imappenpåskrivebordetogdobbeltklikkepå den, elleråbne den i en browser (i de flestebrowseretrykker man cmd+ofor at åbnelokalesider) Men du kanogsååbneKomodosindbyggede browser: klikpåGlobus

15. Første web-side4. h1- og p-tags tiloverskriftogsætninger • Som du kan se, skrivesteksten bare udi en langtekststreng. • For at fåsidenvistbedre, skal den opmærkes med html • Vi starter med overskriften: • For at opmærkeoverskriftensætter vi h1-tags udenomden: • <h1>Silkehalen</h1> • Gem filen, og se, hvordan den nu serudibrowseren • De næste to linjeritekstenersætninger. Sætningeropmærkes med p-tagget: • <p>Silkehalener en nydeliglillefugl.</p> • <p>Den spiser:</p> • Gem filenog se den ibrowseren

16. Første web-side med Komodo5. hentbilledfiloglægimg-tag ind • Imellem de to sætningerskal der ligge et billede. • Billederfår man indpåwebsider med et img-tag, somrefererertilbilledet. • Deternødvendigt at have billed-filenliggendesammen med html-filen, hvisdetskalfungere. Start derfor med at downloadebilledetafsilkehalen – du finder detpå: • http://websites.keaweb.dk/html/img/silkehale.jpeg • Læg billed-filenisammemappesom html-filen ligger i: eks1. Tjeki Komodo, at billedfilen nu ligger imappen, og at den hardetrigtigenavn (silkehale.jpeg). • Lægherefterimg-taggetindpå en nylinjemellem de to sætninger, for at fåbilledetfrem: • <imgsrc="silkehale.jpeg"> • Gem filenog se den ibrowseren

17. Første web-side med Komodo6. Unummereretliste Efter den sidstesætningkommer en liste. Detskalvære en liste med bullets, en unummereretliste. I html- heddertagget for unummereretlisteul. Sætul-tags udenom de trepunkter: <ul> Kernerfrakorn Larverogorm Fluerogmyg </ul> Gem, og se resultatet. Der kommer en indrykningog et linjeskifttil slut; men de trepunkterskrivesudi en køre, og der eringen bullets. For at få bullets, skal de enkeltepunkteropmærkes med liste-element-taggetli: <ul> <li>Kernerfrakorn</li> <li>Larverogorm</li> <li>Fluerogmyg</li> </ul> Gem og se resultatet

18. Første web-side med Komodo7. Link tileksternwebside • Den sidstesætningskalvære et linktil en anden web-side, som handler om • Silkehaler. • Webadressenpådennewebsideer: http://da.wikipedia.org/wiki/Silkehale • Link-tekstenskalomgivesafa-tags: • <a href="http://da.wikipedia.org/wiki/Silkehale">Mere info omsilkehalen</a> • Gem web-sidenog se den ibrowseren – den er nu færdig. • Næstetrinbliver at få den lagtpånettet

19. Udvekslingaf filer påinternettet: ftp Ftp er en andenvigtig del afinternettet. Påsammemådesom der på WWW findes web-servereog web-clienter, findes der på ftp både ftp-servereog ftp-clienter. Detindbyrdes sprog på ftp er ftp-protokollen. Hvis man installerer en ftp-client på sin maskine, kan man up- ogdownloade filer tilogfra ftp-servere Din websideskalpåinternettet, derforskal den up-loadestil web-serveren. Du uploaderfilenved at få din egen ftp-klientil at tale med en ftp-server, som ligger påserveren.

20. Download oginstallérFilezilla Du skalbruge et ftp-program, somkanflytte filer fra din egen computer og op til en web-server. Find Filezillapånettet, ogdownloadprogrammet (søgfxpå “Filezilla download”), installérogåbnprogrammet

21. Ditpersonligedomæne Man kanikke bare fålovtil at lægge sine web-sider hvorsomhelst. Du skal have adgangtil et domænepå en webserver Allestuderendehar et personligtsubdomænepåvores webserver, keaweb.dk. Ditdomæne-navnerdetsammesomditbrugernavntilFronter(kun détforan @-tegnet). Adgangskodener den sammesomtilFronter.

22. Upload din mappetildomænet • Udfyld de treøverstefelteriFilezillasvindue: • 1. Host: xxx.keaweb.dk(hvor xxx erditdomænenavn) • 2. Username: xxx (hvor xxx erditdomænenavn) • 3.Password: yyy (hvoryyyerditdomænenavn) • 4. KlikpåknappenQuickconnect • 5. Find din mappe (eks1) under Local site • I nederstehøjrevinduedobbelklikker du påmappenpublic_html(nårnogetlæggesindidennemappe, kommerdetpånettet). • 6. Trækfraøverstevenstrevinduemappen eks1 nedinederstehøjrevindue • I nederstehøjrevindue, skal du kunne se, at mappen nu dukker op, ogdobbeltklikker du på den, åbnes den, og du kan se de to filer i den: web-sidenogbilledfilen. • Åbn en browser og find websidenpåadressen: http://xxx.keaweb.dk (xxx erditdomæne)

23. Upload din mappetildomænet 4 2 3 1 5 6

24. Afleveringsopgavei dag Opret en nywebside, somviser en madopskrift. Opskriftenskalindeholde: En overskrift Et billede En ingrediensliste En beskrivelseaffremgangsmåden Et link til en mad/kokke-side efteregetvalg Tip: hvis du brugeræ, ø, åi dine tekster, skal du øversti din kode have en linje med tagget: <meta charset="utf-8"> - ellers vises dissetegnforkert. Websidenskaluploadestilditdomæne, ogopgavenskalafleveressom et link. Deadline: iaften kl. 23.59. Ekstra, ekstra! Desudenskal du indenimorgen have installeretbrowserneChrome, FirefoxogSafaripå din computer, hvis du ikkealleredehardem ;)

25. Modul-opgave Se opgavenpåFronter