W ebdesign og webkommunikation 2, I T U niversitetet, forår 2011. I ntroduktion til det praktiske 1. Målsætning Før vi går i gang med kurset, skal du have de helt lavpraktiske ting på plads, så du er helt klar til at lave (X)H T ML uden bøvl fra næste øvelsesgang. D enne lille praktiske forberedelse vil variere alt e er, om du tænker at benytte I T U s computere til øvelserne fremover, eller om du vil bruge din egen bærbare computer. V ælger du at bruge din egen maskine, er det dit ansvar, at den virker og har det nødvendige so ware installeret. D er er computere til alle studerende på holdet i øvelseslokalerne. (H vis du vil bruge I T U s computere til øvelserne fremover, kan du springe afsnit 2 over) 2. H vis du vil br uge egen computer til øvelser ne H vis du ønsker at bruge din egen computer til øvelserne, skal du følge nedenstående vejledninger til, hvilke programmer, vi anbefaler, at du bruger. H vis du allerede har dine egne favoritter, kan du blot fortsætte med dem. For at tilgå dit H -drev (og herunder public_html mappen som er roden af dit website) fra din egen computer enten på I T U eller hjemmefra, skal du bruge et FT P-program. I nden du kan begynde at opsætte en forbindelse til din serverplads på I T U, skal du downloade og e erfølgende installere et p-program og en tekst-editor. Til M ac findes et program, som kan begge ting. 2.1 Brug af PC T il PC anbefaler vi p-klienten FileZilla og tekst-editoren NotePad++. Begge programmer er gratis. (note: Filezilla kan også bruges til M ac og Linux) 2.1.1 FT P: Filezilla 1. Hent og installer FileZilla (http://filezilla-project.org/). 2. G å ind under File i hovedmenuen og klik Site M anager. 3. K lik N ew Site i menuen nederst og giv webstedet et navn, fx I T U. 4. U dfyld menuen til højre med følgende oplysninger: H ost/vært: ssh.itu.dk Port: 22 Protocol: SFT P - - SSH File T ransfer Protocol Logon T ype: Ask for password User: [BRUGERNAVN] - - som er dit Unix-navn, altså det samme som du bruger til skolens pc'er, W ebmail etc. K lik OK 1
Du kan nu let få adgang til dine filer på I T U s server ved at klikke på den lille pil øverst til venstre (se billede) og vælge dit nytilføjede websted I T U. D et eneste du skal, er at skrive dit password i boksen der kommer frem. D u skal bruge dit U nix-password, det som du også bruger på W ebmail mm. 5. N år du har oprettet forbindelse, vil du se tre undermapper til højre i Filezilla: cgi-bin private public_html D et er public_html-mappen du skal bruge, når du afleverer opgaver. A lt hvad du lægger i mappen public_html, kan tilgås fra en hvilken som helst webbrowser. public_html mappen fungerer som roden af dit 2
website svarende til adressen http://itu.dk/people/[br U G E R N A V N ]. D et er i public_html mappen du skal ligge dine H T ML og CSS filer til øvelserne fremover og allerede næste gang vil du i denne mappe lave den første hjemmeside og linke til den fra bloggen. Private-mappen er det kun dig, der kan tilgå, når du er logget ind. D et er altså et slags netværks-usb-stik, om man vil, hvor du kan gemme dine filer T il venstre i Filezilla er de mapper, som du har liggende lokalt på din egen maskine. 2.1.2 Editor: NotePad++ 1. H ent og installer N otepad++ (http://notepad-plus-plus.org/) 2. G å ind under Settings i hovedmenuen øverst og klik på 'Preferences'. 3. Find fanebladet N ew D ocument/ D efault D iretory og markér UTF-8 ud for Encoding, og html under D efault language. N u kan du under File vælge N ew D ocument, og du er klar til dit første html-dokument. D u kan altid senere ændre documentets 'language' fra H T M L til fx C SS senere via menuen Language. 2.2 Mac T il M ac anbefaler vi, at I bruger C oda. C oda er en editor og en p-klient på samme tid, og vi finder programmet meget ligetil at bruge. C oda findes desværre kun til M ac. Selvom at C oda også er en p-klient, og at du der kan uploade dine filer direkte fra programmet til I T U s server, anbefaler vi alligevel, at du altid venter med at uploade dine filer til serveren, til du er færdig med opgaven. 1. Download og installer programmet fra PANIC (http://www.panic.com/coda/) 2. Opsætning af FT P: Å bn programmet og vælg Sites i ikonmenuen øverst 3
T ryk på A dd Site i nederste venstre hjørne U dfyld følgende: Nickname: V algfrit navn til siden. D ette ville ikke blive vist på selve siden - kun i C oda Root URL: www.itu.dk/people/[brugernavn] (brugernavnet er dit Unix-navn, altså det samme som du bruger til skolens pc'er, W ebmail etc.) Server: ssh.itu.dk U ser Name: [BRUGERNAVN] Password: Dit Unix-password. (D et er ligesom med brugenavnet det samme, som du bruger på I T U webmail) Port: 22 Protocol: SFT P List Encodi ng: UFT-8 V ælg Save 4
U nder Sites vil du for fremtiden kunne finde et billede af din hjemmeside. D obbeltklik på billedet og du kommer til din hjemmesides root. I din root vil du finde tre mapper: cgi-bin private public_html D et er public_html-mappen, du skal bruge, når du afleverer opgaver. A lt hvad du lægger i mappen public_html, kan tilgås fra en hvilken som helst webbrowser. Public_html mappen fungerer som roden af dit website svarende til adressen http://itu.dk/people/[br U G E R N A V N ]. D et er i public_html mappen du skal ligge dine H T M L og C SS filer til øvelserne fremover og allerede næste gang vil du i denne mappe lave den første hjemmeside og linke til den fra bloggen. Private-mappen er det kun dig, der kan tilgå, når du er logget ind. D et er altså et slags netværks-usb-stik, om man vil, hvor du kan gemme dine filer Husk at bruge local (som er alle dine lokale mapper), indtil du er klar til at aflevere. 5
For at lave nye mapper og filer, kan du højreklikke på public_html-mappen H usk at kalde din forside for index.html 3. H vis du br uger I T U s computer e/h -drevet Opretter du forbindelse via en FT P forbindelse vil du få adgang til H -drevet - sidder du på I T U s computere behøver du ikke et FT P-program da du har direkte adgang til at arbejde på dette drev. Du kan altså arbejde direkte på serveren når du sidder på I T U s computere - det er dejligt nemt. V ælg eksempelvis D enne computer og find frem til H -drevet blandt de mange drev-ikoner. N år du har klikket dig ind på H -drevet vil du se tre undermapper: cgi-bin private public_html Alt hvad du lægger i mappen public_html, kan tilgås fra en hvilken som helst webbrowser. public_html mappen fungerer som roden af dit website svarende til adressen http://itu.dk/people/ DINE_MAIL_INITIALER. Det er i public_html mappen du skal ligge dine H T M L og C SS filer til øvelserne fremover og allerede næste gang vil du i denne mappe lave den første hjemmeside og linke til den fra bloggen. Private-mappen er det kun dig, der kan tilgå, når du er logget ind. Det er altså et slags netværks-usb-stik, om man vil, hvor du kan gemme dine filer. 4. I ntroduktion til bloggen 6
K ursusbloggen finder du, som du måske allerede ved, på adressen: https://blog.itu.dk/dwdk2-f2011/ Bloggen er vigtig, da det er den officielle kommunikationskanal mellem underviser, jer og hjælpelærerne. D et er også på bloggen, du afleverer dine øvelsesopgaver. For at skrive på bloggen skal du logge ind. Det gøres fra denne adresse: https://blog.itu.dk/dw DK 2- E2011/wplogin.php E ller på selve bloggen under punktet M eta data i menuen til højre. D u skal indtaste dine I T U -initialer som U sername (fx vil bent være I T U -initialer i e-mailen bent@itu.dk) og dit I T U -password som Password: Start med at tjekke at dit fulde navn er gemt i din Wordpress profil og det er dit fulde navn som vises når du kommenterer. D ette sikrer at dit rigtige navn og ikke brugernavn står noteret, når du kommenterer på siderne, hvilket gør det en del nemmere at kommunikere på bloggen og til timerne. K lik på dit brugernavn i øverste højre hjørne - - dette bringer dig til din profilside. Her skriver du dit rigtige fornavn og e ernavn og vælger dit fulde navn i dropdownmenuen Display name publicly as. 7
D u kan skrive kommentarer til andres indlæg samt nederst på de enkelte blogsider. V il du eksempelvis skrive en kommentar til et blogindlæg, klikker du på blogindlæggets overskrift, hvor du i bunden af siden kan kommentere. Fra øvelse 1 vil afleveringer af øvelser foregår ved at tilføje din aflevering som en kommentar på din hjælpelærers side. 8