Post on 03-Jan-2020
WebbpubliceringTeknikintroduktion 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 serverDO 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)
• Webbserver (t.ex. Apache/Tomcat m.m.)
• Filserver (t.ex. Samba, FTP, NFS)
• 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 designhttp://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äsareURL
URL - webbadressenUniform Resource Locator
• http://hnu.ida.liu.se/webpub/forum
• protokoll, server, sökväg på servern
Slå upp adress via DNS
servernamn/hostname = IP-adresswww.ida.liu.se = 130.236.177.26www.google.com = 66.249.93.9www.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)
• innehåll och sidstruktur
• CSS-fil (style.css)
• layout och form
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
HTMLHypertext 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”>
CSSCascading 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
body {
color: black;
padding: 1em;
}
Typ-selektorer
.intro {
font-weight: bold;
}
Klass-selektorer
#footer {
font-size: 0.8em;
}
ID-selektorer
Varför dela upp innehåll, layout och form?
• Skilda roller under skapandet av en webbplats
• Enklare uppdatering
• Olika representationer av innehållet
• Sparad bandbredd
Exempel på omdesign
• A List Apart - Retooling Slashdot with Web Standardshttp://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-klienterMicrosoft Windows och Mac OS X
Filezilla (endast FTP)
Yummy FTP (FTP/SFTP)
Cyberduck (FTP/SFTP)
WinSCP (SFTP)
Ladda upp till rätt katalog
• På IDA
• ~/www-pub/
• Andra exempel
• ~/public_html/
• /var/www/
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
• Webbflöden (web feeds)
• Vad är AJAX
• Webbhotell och domännamn
• Kommentarsspam, referrerspam m.m.