Webbteknik
En kort introduktion
Innehåll
Historisk återblick
Teknisk beskrivning
Märkspråk
Standardisering
Trender
1
Historisk återblick
‐89 CERN
Tim Berners‐Lee
Ett plattformsoberoende sätt att sprida forskningsinformation
‐93 NCSA Mosaic
National Center for Supercomputing
Applications, University of Illinois
Webbläsare
(‐93)
Safari (‐03)
(‐95)
(‐94)
Firefox (‐03)
Opera (‐96)
2
Teknisk beskrivning
Dator med webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Förfrågan processas
Webbsida visas
HTTP Response
Efterfrågad sida
returneras
begrepp
IP‐nummer
– Unikt nummer för varje dator
Domännamn
– Unikt ”smeknamn” som kan användas istället för IP‐numret
DNS – Domain Name System
– Kan jämföras med en telefonkatalog innehållande alla ”smeknamn” och tillhörande IP‐nummer
3
Begrepp
URL – Uniform Resource Locator
http://www.tfe.umu.se/webbkursen/index.html
Protokoll
Domännamn
Katalog
Fil
Subdomäner
Huvuddomän
Toppdomän
begrepp
HTTP – Hypertext Transfer Protocol
Datorer kommunicerar med varandra med hjälp av protokoll
Detta protokoll är speciellt framtaget för webben
Huvuduppgiften är att överföra webbsidor mellan server och datorer med webbläsare
HTTP – GET
Vanlig förfrågan efter en webbsida
HTTP – POST
Skickar data vid förfrågan (exempelvis data från formulär)
4
Märkspråk
SGML – Standard Generalized Markup Language
HTML – Hyperttext Markup Language
XML – eXtensible Markup Language
XHTML – Extensible Hypertext Markup Language
Innehåll, funktion och
utseende
HTML‐kod
– Kod som styr strukturen av en webbsidas innehåll
Stilmallar
– Kod som styr sidans utseende
JavaScript
– Kod som styr en webbsidas beteende
5
html
Hypertext
– text som via hyperlänkar är förbunden med andra texter
Uppmärkning sker med ”taggar”
HTML 4.01
Tre versioner:
Strict
Transitional
Frameset
Document Type Defenition
Standardiseringsorgan
6
stilmallar
CSS – Cascading Style Sheets
– Styr utseendet på ett strukturerat dokument
– Exempelvis font, färg, storlek och placering
Tre versioner:
Inline
Lokalt
Globalt
Standardisering
W3C – World Wide Web Consortium
– Över 500 medlemmar.
– Industrier, forskningsinstitut, standardiseringsorgan, regeringar…
Standardiserar bland annat:
HTML
XHTML
XML
CSS
7
trender
Statiska webbplatser B Databasdrivna
JavaScript B RIA (Flash, AJAX, Flex, Silverlight…)
Web 1.0 B Web 2.0
Stationär webb B Mobil
javascript
Ett standardiserat skriptspråk
Körs i webbläsaren
Baserar sig på DOM (Document Object Model)
Kan användas till ”multimediaeffekter” och vid validering av data i formulär
En av grundstenarna i AJAX
8
Javascript - Exempel
RIA
Rich Internet Application ‐ RIA
Finesser och funktionalitet som vanliga program
Kräver ingen installation
(körs i webbläsare eller annan spelare)
Arbetsfördelning mellan dator och server
9
Flash
Flash 1.0 (‐96) ‐ Ett vektorbaserat animeringsverktyg
Flash CS3 (‐07)
‐ Fullfjädrat utvecklingsverktyg för multimedia på webben
Inte XHTML, JavaScript etc
Kräver plugin: ”Flash Player”
AJAX
Asynchronous JavaScript and XML (AJAX)
Webbteknik för ökad: ‐ interaktivitet, hastighet, funktionalitet och användbarhet
Baserar sig på:
‐ XHTML (eller HTML), CSS, DOM, JavaScript och XMLHttpRequest
10
Web 2.0
Tim O´Reilly ‐04
Nästa generation av webbtjänster och affärsmodeller på webben
Användare bidrar
Användare har kontroll
Användbar och interaktiv design
System interagerar
}
Enligt O´Reilly
Web 2.0 - exempel
Web 1.0
Web 2.0
Ofoto
Akamai
mp3.com
Britannica Online
personal websites
screen scraping
publishing
content management systems
directories (taxonomy)
stickiness
Flickr
BitTorrent
Napster
Wikipedia
blogging
web services
participation
wikis
tagging ("folksonomy")
syndication
11
Mobil webb
Möjligheter och begränsningar!
RIA och Web 2.0
3G och stöd för WLAN
Mognad hos användare… och utvecklare!
Java 2 Mobile Edition – J2ME
Adobe’s Flash Lite
Google’s Android
Länktips
http://en.wikipedia.org (Allt möjligt!)
http://www.w3schools.com/ (HTML, CSS…)
http://www.w3.org/ (W3C, HTML, CSS…)
http://www.oreilly.com/pub/a/oreilly/tim/news/20
05/09/30/what‐is‐web‐20.html (Web 2.0)
12
