Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)
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
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.
Webbpublicering? Vad är icke-webbpublicering? Text Bild Ljud Rörliga bilder Webb-tjänster?
Lite historia
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
Tidslinje för webben 1969 - ARPANET 1978 - International Packet Switched Service 1981 - IPSS = Europa, USA, Canada, Hong Kong, Australien 1983 - NSFNet (National Science Foundation) 1985 - Nätverket öppnas upp för kommersiella aktörer 1990 - Internet 1991 - World Wide Web, CERN - Tim Berners-Lee (HTML + HTTP) 1993 - Webbläsaren Mosaic 1994 - Mosaic Netscape 0.9 1995 - Internet Explorer 2002 - Mozilla 1.0 2004 - Firefox 1.0
This machine is a server DO NOT POWER DOWN!!
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
Exempel på klienter Webbläsare E-postprogram FTP-program Download managers Mediaspelare som spelar upp webbradio
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.)
Webb* Webbplats Webbsida Webbsajt Webben är inte samma sak som internet, även om de ofta används som synonymer.
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 http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
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
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.
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.
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
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
Webbläsare URL
URL - webbadressen Uniform Resource Locator http://hnu.ida.liu.se/webpub/forum protokoll, server, sökväg på servern
Slå upp adress via DNS servernamn/hostname = IP-adress www.ida.liu.se = 130.236.177.26 www.google.com = 66.249.93.9 www.hitta.se = 195.149.181.5
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
Webbsidor
En grundläggande, statisk webbsida HTML-fil (index.html) CSS-fil (style.css) layout och form innehåll och sidstruktur
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
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
HTML Hypertext Markup Language *.html *.htm ex: index.html, default.html
HTML-exempel <div class= journal_entry > This morning I took a picture of my breakfast. <span class= strong >Check it out</span>. <img src= http://farm2.static.flickr.com/ 1083/1066221399_a2ab9d7f6d.jpg /> </div>
HTML - Hyper Text Markup Language Document Type Definition (DTD) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Element med slut-tagg <p>lorem ipsum</p> Element utan slut-tagg <br /> Attribut <p class= sidebar >
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
CSS - Cascading Style Sheets Selektorer + deklarationer Typselektorer, klasselektorer, ID-selektorer
Typ-selektorer body { color: black; padding: 1em; }
Klass-selektorer.intro { } font-weight: bold;
ID-selektorer #footer { } font-size: 0.8em;
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
Exempel på omdesign A List Apart - Retooling Slashdot with Web Standards http://www.alistapart.com/articles/slashdot/
Orginalet
Semantisk omstrukturering av HTML-kod
Layout med CSS
Form med CSS
Alternativ form-css
CSS för utskrift
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?
Webbutrymme Webbhotell - Fö2 Konto - IDA, astmatix, LUKAS-konto
FTP-klienter Microsoft Windows och Mac OS X
Filezilla (endast FTP)
Yummy FTP (FTP/SFTP)
Cyberduck (FTP/SFTP)
WinSCP (SFTP)
På IDA Ladda upp till rätt ~/www-pub/ Andra exempel ~/public_html/ /var/www/ katalog
Webbservern och sökvägar /info/www-und http://www-und.ida.liu.se/ /home/jodfo/www-pub/blogg http://www-und.ida.liu.se/~jodfo/blogg
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
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?
Nästa föreläsning Dynamiska webbplatser Vad är AJAX Webbflöden (web feeds) Webbhotell och domännamn Kommentarsspam, referrerspam m.m.