Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om? Broadcast: http://join.me/flashbroadcast Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om? Udvikling af websites Webdesign Dokumentation

Hvad skal I lære på modul 2? Interaktion Html Css Webstandarder Javascript jQuery jQuery Mobile Dokumentation Visualisering Visuelt perspektiv på websites Kommunikation Kommunikation og websider Skriv godt til nettet Usability Virksomhed Personlig branding

Projektopgave I skal individuelt udvikle et portfolio-website til præsentation af jeres egne Photoshop- og Flash-arbejder fra modul 1 (vi vender tilbage til opgaven sidst på dagen)

Program for i dag Intro Vigtige begreber: web-server og web-client Installation af Komodo Edit til html-kodning Html-kodening af den første webside Installation af Filezilla ftp-program Læg den første webside på nettet Grundig præsentation af modulopgaven ----------------------------- Efter undervisning: I arbejder med den første afleveringsopgave, en html-kodet webside (deadline i aften kl. 23.59). Alle skal have installeret browserne: Safari, Chrome og Firefox.

Hvad er WWW (World Wide Web)? WWW er en stor del af internettet På www ligger web-pages på web-servers. Web-pages kan indeholde links til andre web-pages. På web-clienten er der installeret et program til at hente og vise web-pages: En browser Eksempler på browsere: IE, Crome, Firefox, Safari Indbyrdes sprog (protokol): http

Vigtige begreber om websites html er navnet på en mappe, web-siden ligger i http://websites.keaweb.dk/html/eks1.html eks1.html er web-sidens filnavn websites.keaweb.dk er host-adressen, som fortæller hvilken web-server web-siden skal hentes fra http er det sprog, computerne på www bruger Browser-vindue Adressefelt med web-page adresse

Kildekode Højreklik på en web-side i browseren for at se kildekoden

Web-client – web-server Web-client med browser 1. En http-request sendes afsted fra web-client til web-server 2. Web-server finder web-siden og sender den retur til web-client 3. Web-clienten åbner filen og læser den. Den sender evt. request efter andre filer, som bruges af websiden – f.eks. billedfiler, lyd-filer, videoer eller layoutfiler 4. Web-clienten viser web-siden på skærmen Videoer, du evt. kan se: http://youtube/qv0XCaUkfNk http://www.youtube.com/watch?v=1wUxWxYOdTE http://www.youtube.com/watch?v=7_LPdttKXPc

Installation af Komodo Edit Komodo Edit er et program til kodning af html, css, javascript, php etc. Programmet er gratis og findes til både Mac og PC Hvorfor ikke Dreamweaver? Find downloadsiden ved at google dig frem (fx: “Komodo Edit download”) (vi skal have fat i Komodo Edit, version 8) Download Programmet Installér programmet på din computer

Indstilling af Komodo - encoding Åbn programmet. Vælg Komodo, Preferences, Internationalization Under Language-specific Default Encoding vælger du: html5 og utf-8

Indstilling af Komodo – new files Vælg Komodo, Preferences, New Files Under Specify the Language for files created using the ‘New’ button: vælg html5 Klik OK

Første web-side: 1. Opret mappe, læg tom navngivet fil i mappen Opret først en mappe, eks1, på skrivebordet Åbn Kommodo Edit I venstre side af skærmen skal der være en lyseblå kolonne med mappe- og fil-lister. Mangler den: vælg View, Tabs & Sidebars, Places Klik på den lille blomst øverst i den lyseblå kolonne, og vælg Open Directory. Åbn den mappe, du lige har oprettet. Vælg Files og New for at åbne en ny fil Gem den nye tomme fil under navnet eks1.html i mappen eks1 på skrivebordet.

Første web-side 2. Skriv teksten ind Websiden vi skal lave, skal se sådan ud: Start med at skrive al tekst ind.

Første web-side 3. Se siden lokalt Gem websiden (cmd+s eller Files, Save) Når web-siden er gemt, ligger den lokalt på din egen maskine – ikke på internettet endnu Du kan se den lokalt ved at finde den i mappen på skrivebordet og dobbeltklikke på den, eller åbne den i en browser (i de fleste browsere trykker man cmd+o for at åbne lokale sider) Men du kan også åbne Komodos indbyggede browser: klik på Globus

Første web-side 4. h1- og p-tags til overskrift og sætninger Som du kan se, skrives teksten bare ud i en lang tekststreng. For at få siden vist bedre, skal den opmærkes med html Vi starter med overskriften: For at opmærke overskriften sætter vi h1-tags udenom den: <h1>Silkehalen</h1> Gem filen, og se, hvordan den nu ser ud i browseren De næste to linjer i teksten er sætninger. Sætninger opmærkes med p-tagget: <p>Silkehalen er en nydelig lille fugl.</p> <p>Den spiser:</p> Gem filen og se den i browseren

Første web-side med Komodo 5. hent billedfil og læg img-tag ind Imellem de to sætninger skal der ligge et billede. Billeder får man ind på websider med et img-tag, som refererer til billedet. Det er nødvendigt at have billed-filen liggende sammen med html-filen, hvis det skal fungere. Start derfor med at downloade billedet af silkehalen – du finder det på: http://websites.keaweb.dk/html/img/silkehale.jpeg Læg billed-filen i samme mappe som html-filen ligger i: eks1. Tjek i Komodo, at billedfilen nu ligger i mappen, og at den har det rigtige navn (silkehale.jpeg). Læg herefter img-tagget ind på en ny linje mellem de to sætninger, for at få billedet frem: <img src="silkehale.jpeg"> Gem filen og se den i browseren

Første web-side med Komodo 6. Unummereret liste Efter den sidste sætning kommer en liste. Det skal være en liste med bullets, en unummereret liste. I html- hedder tagget for unummereret liste ul. Sæt ul-tags udenom de tre punkter: <ul> Kerner fra korn Larver og orm Fluer og myg </ul> Gem, og se resultatet. Der kommer en indrykning og et linjeskift til slut; men de tre punkter skrives ud i en køre, og der er ingen bullets. For at få bullets, skal de enkelte punkter opmærkes med liste-element-tagget li: <li>Kerner fra korn</li> <li>Larver og orm</li> <li>Fluer og myg</li> Gem og se resultatet

Første web-side med Komodo 7. Link til ekstern webside Den sidste sætning skal være et link til en anden web-side, som handler om Silkehaler. Webadressen på denne webside er: http://da.wikipedia.org/wiki/Silkehale Link-teksten skal omgives af a-tags: <a href="http://da.wikipedia.org/wiki/Silkehale">Mere info om silkehalen</a> Gem web-siden og se den i browseren – den er nu færdig. Næste trin bliver at få den lagt på nettet

Udveksling af filer på internettet: ftp Ftp er en anden vigtig del af internettet. På samme måde som der på WWW findes web-servere og web-clienter, findes der på ftp både ftp-servere og ftp-clienter. Det indbyrdes sprog på ftp er ftp-protokollen. Hvis man installerer en ftp-client på sin maskine, kan man up- og downloade filer til og fra ftp-servere Din webside skal på internettet, derfor skal den up-loades til web-serveren. Du uploader filen ved at få din egen ftp-klien til at tale med en ftp-server, som ligger på serveren.

Download og installér Filezilla Du skal bruge et ftp-program, som kan flytte filer fra din egen computer og op til en web-server. Find Filezilla på nettet, og download programmet (søg fx på “Filezilla download”), installér og åbn programmet

Dit personlige domæne Man kan ikke bare få lov til at lægge sine web-sider hvor som helst. Du skal have adgang til et domæne på en webserver Alle studerende har et personligt subdomæne på vores webserver, keaweb.dk. Dit domæne-navn er det samme som dit brugernavn til Fronter (kun dét foran @-tegnet). Adgangskoden er den samme som til Fronter.

Upload din mappe til domænet Udfyld de tre øverste felter i Filezillas vindue: 1. Host: xxx.keaweb.dk (hvor xxx er dit domænenavn) 2. Username: xxx (hvor xxx er dit domænenavn) 3.Password: yyy (hvor yyy er dit domænenavn) 4. Klik på knappen Quickconnect 5. Find din mappe (eks1) under Local site I nederste højre vindue dobbelklikker du på mappen public_html (når noget lægges ind i denne mappe, kommer det på nettet). 6. Træk fra øverste venstre vindue mappen eks1 ned i nederste højre vindue I nederste højre vindue, skal du kunne se, at mappen nu dukker op, og dobbeltklikker du på den, åbnes den, og du kan se de to filer i den: web-siden og billedfilen. Åbn en browser og find websiden på adressen: http://xxx.keaweb.dk (xxx er dit domæne)

Upload din mappe til domænet 2 4 1 3 5 6

Afleveringsopgave i dag Opret en ny webside, som viser en madopskrift. Opskriften skal indeholde: En overskrift Et billede En ingrediensliste En beskrivelse af fremgangsmåden Et link til en mad/kokke-side efter eget valg Tip: hvis du bruger æ, ø, å i dine tekster, skal du øverst i din kode have en linje med tagget: <meta charset="utf-8"> - ellers vises disse tegn forkert. Websiden skal uploades til dit domæne, og opgaven skal afleveres som et link. Deadline: i aften kl. 23.59. Ekstra, ekstra! Desuden skal du inden i morgen have installeret browserne Chrome, Firefox og Safari på din computer, hvis du ikke allerede har dem ;)

Modul-opgave Se opgaven på Fronter