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 Internet Webbserver 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 Databasdrivna JavaScript RIA (Flash, AJAX, Flex, Silverlight ) Web 1.0 Web 2.0 Stationär webb 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: FlashPlayer 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 Flickr Akamai BitTorrent mp3.com Napster Britannica Online Wikipedia personal websites blogging screen scraping web services publishing participation content management systems wikis directories (taxonomy) tagging ("folksonomy") stickiness 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