Webbpublicering

Webbpublicering
Teknikintroduktion 1
Jody Foo ([email protected])
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)
• 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 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
Systemresurskrav
Statiska
Lägre
Dynamiska
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
Sämre
Bättre
Väldigt låg
Hög
Flexibilitet
Interaktion med
besökare
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)
• 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
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
• Olika representationer av innehållet
• Sparad bandbredd
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
•
Andra ska ha kunna och ha rätt att läsa materialet
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?
•
•
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)
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
•
Andra ska ha kunna och ha rätt att läsa materialet
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?
•
•
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.