Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om?

Lignende præsentationer


Præsentationer af emnet: "Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om?"— Præsentationens transcript:

1 Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om?
Broadcast: Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om? Udvikling af websites Webdesign Dokumentation

2 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

3 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)

4 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 ). Alle skal have installeret browserne: Safari, Chrome og Firefox.

5 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

6 Vigtige begreber om websites
html er navnet på en mappe, web-siden ligger i 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

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

8 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:

9 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

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

11 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

12 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.

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

14 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

15 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

16 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å: 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

17 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

18 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: Link-teksten skal omgives af a-tags: <a href=" 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

19 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.

20 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

21 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 Adgangskoden er den samme som til Fronter.

22 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: (xxx er dit domæne)

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

24 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 Ekstra, ekstra! Desuden skal du inden i morgen have installeret browserne Chrome, Firefox og Safari på din computer, hvis du ikke allerede har dem ;)

25 Modul-opgave Se opgaven på Fronter


Download ppt "Modul 2: Website Undervisere: Stefan og Helle Hvad handler modulet om?"

Lignende præsentationer


Annoncer fra Google