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.