Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Transkript

1 Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

2 Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare, servrar, FTP, HTTP, uppladdning

3 Föreläsningsöversikt Föreläsning 2 Dynamiska webbplatser Webbflöden (web feeds) Vad är AJAX Webbhotell och domännamn Kommentarsspam, referrerspam m.m.

4 Webbpublicering? Vad är icke-webbpublicering? Text Bild Ljud Rörliga bilder Webb-tjänster?

5 Lite historia

6 Internet och webben Internet = ett nätverk av datorer som öppnats upp för alla Webben = En tjänst som är tillgänglig via Internet

7 Tidslinje för webben ARPANET International Packet Switched Service IPSS = Europa, USA, Canada, Hong Kong, Australien NSFNet (National Science Foundation) Nätverket öppnas upp för kommersiella aktörer Internet World Wide Web, CERN - Tim Berners-Lee (HTML + HTTP) Webbläsaren Mosaic Mosaic Netscape Internet Explorer Mozilla Firefox 1.0

8 This machine is a server DO NOT POWER DOWN!!

9 Klienter och servrar Praktiska beskrivningar: Klient: Program tar initiativ till kontakt och som ber om något från ett annat program Server: Program som tillhandahåller tjänst, eller själva datorn som kör programmet/ programmen

10 Exempel på klienter Webbläsare E-postprogram FTP-program Download managers Mediaspelare som spelar upp webbradio

11 Exempel på servrar E-postserver (t.ex. POP/IMAP/SMTP) Filserver (t.ex. Samba, FTP, NFS) Webbserver (t.ex. Apache/Tomcat m.m.) Databasserver (t.ex. MySQL, MSSQL, Oracle m.m.)

12 Webb* Webbplats Webbsida Webbsajt Webben är inte samma sak som internet, även om de ofta används som synonymer.

13 Webb 1.0? 2.0? Webb 1.0? Webb 2.0? Nytt uppsving för internet-ekonomin Social interaktion, social navigation, Kommunikation mellan webbtjänster Ny design

14 Statiska webbplatser - översikt Vad är statiska och dynamiska webbplatser? Vad händer när man besöker en webbplats? Webbläsare Webbserver Typer av innehåll Layout och formgivning av webbsidor

15 En statisk webbplats Webbsidor som inte har dynamiskt innehåll. Allt innehåll lagras i färdigt skick. Innehåll och layout lagras oftast i filer vars innehåll inte kan ändras på av servern. Alla ändringar görs av ägaren manuellt.

16 En dynamiska webbplats Innehållet skapas dynamiskt - olika delar sätts ihop till en helhet. Webbsidor där innehållet kan växla beroende på t.ex. när, vem och hur man besöker sidan utan att manuella ändringar måste ske. Lagring av information sker ofta i en databas. Webbservern möjliggör dynamiken. Bygger på samma koncept som statiska webbsidor.

17 För- och nackdelar Statiska Dynamiska Systemresurskrav Lägre Högre Uppdateringar Mer omständiga Mindre omständiga Flera författare Svårare Lättare Olika roller i produktionskedjan Sämre stöd Bättre stöd Flexibilitet Sämre Bättre Interaktion med besökare Väldigt låg Hög

18 Vad händer när man besöker en webbsida? Förenklat: Skriv in URL i webbläsare Slå upp IP-nummer via DNS Kontakta webbserver Överföring av själva sidan Rendering av sidan i webbläsare

19 Webbläsare URL

20 URL - webbadressen Uniform Resource Locator protokoll, server, sökväg på servern

21 Slå upp adress via DNS servernamn/hostname = IP-adress = = =

22 Vad är en webbsida? Struktur: Layout, innehåll, sajthierarki Innehållskategorier: Text, inbäddad multimedia, länkar Teknik: HTML, CSS, plugins/tillägg/ extensions, rendering av webbläsaren Ovanstående existerar som filer i kataloger, eller produceras dynamiskt genom med hjälp av t.ex. skript och data från en databas

23 Webbsidor

24

25

26

27 En grundläggande, statisk webbsida HTML-fil (index.html) CSS-fil (style.css) layout och form innehåll och sidstruktur

28 Kataloger och filer Kataloger - t.ex. skrivbordet c:\documents and Settings\jody\Desktop (Windows) /Users/jody/Desktop (Mac OS X) /home/jody/desktop (Vissa Linux) Tecknet tilde ~ hänvisar till er hemkatalog

29 Kataloger och filer forts. filnamn.filändelse Textfil - innehåller bara text..txt Ett word-dokument är aldrig en textfil. Exempel på andra filtyper bildfiler: jpg, tiff, gif, png ljudfiler: mp3, m4a, wav video: avi, mov, divx, mpeg arkiv (komprimerade/packade filer): zip, rar, tar.gz

30 HTML Hypertext Markup Language *.html *.htm ex: index.html, default.html

31 HTML-exempel <div class= journal_entry > This morning I took a picture of my breakfast. <span class= strong >Check it out</span>. <img src= / _a2ab9d7f6d.jpg /> </div>

32 HTML - Hyper Text Markup Language Document Type Definition (DTD) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " Element med slut-tagg <p>lorem ipsum</p> Element utan slut-tagg <br /> Attribut <p class= sidebar >

33 CSS Cascading Style Sheets Cascading - den sista, och mest specifika definitionen gäller *.css t.ex. style.css, layout.css, dark-skin.css, print.css

34 CSS - Cascading Style Sheets Selektorer + deklarationer Typselektorer, klasselektorer, ID-selektorer

35 Typ-selektorer body { color: black; padding: 1em; }

36 Klass-selektorer.intro { } font-weight: bold;

37 ID-selektorer #footer { } font-size: 0.8em;

38 Varför dela upp innehåll, layout och form? Skilda roller under skapandet av en webbplats Enklare uppdatering Sparad bandbredd Olika representationer av innehållet

39 Exempel på omdesign A List Apart - Retooling Slashdot with Web Standards

40 Orginalet

41 Semantisk omstrukturering av HTML-kod

42 Layout med CSS

43 Form med CSS

44 Alternativ form-css

45 CSS för utskrift

46 Att ladda upp en hemsida Mål: Att se till att allt material är tillgängligt på webben Det som behövs Konto på en webbserver - webbutrymme Verktyg för att ladda upp allt material - oftast en FTP-klient Materialet uppladdat till rätt ställe - Vilken sökväg ska den ligga under på servern? Andra ska ha kunna och ha rätt att läsa materialet Vilka rättigheter ska sättas på filerna? Vad kommer filerna få för URL?

47 Webbutrymme Webbhotell - Fö2 Konto - IDA, astmatix, LUKAS-konto

48 FTP-klienter Microsoft Windows och Mac OS X

49 Filezilla (endast FTP)

50 Yummy FTP (FTP/SFTP)

51 Cyberduck (FTP/SFTP)

52 WinSCP (SFTP)

53 På IDA Ladda upp till rätt ~/www-pub/ Andra exempel ~/public_html/ /var/www/ katalog

54 Webbservern och sökvägar /info/www-und /home/jodfo/www-pub/blogg

55 Sätta filrättigheter Nivåer: user, group, others Rättighetstyper: läsa, skriva, exekvera Besökare via webben räknas oftast som others För att få tillgång till din webbplats: läsrättigheter till filer läs- och exekveringsrättigheter till kataloger

56 Att ladda upp en hemsida Mål: Att se till att allt material är tillgängligt på webben Det som behövs Konto på en webbserver - webbutrymme Verktyg för att ladda upp allt material - oftast en FTP-klient Materialet uppladdat till rätt ställe - Vilken sökväg ska den ligga under på servern? Andra ska ha kunna och ha rätt att läsa materialet Vilka rättigheter ska sättas på filerna? Vad kommer filerna få för URL?

57 Nästa föreläsning Dynamiska webbplatser Vad är AJAX Webbflöden (web feeds) Webbhotell och domännamn Kommentarsspam, referrerspam m.m.