• Save
Så funkar det (del 3) -  webben
Upcoming SlideShare
Loading in...5
×
 

Så funkar det (del 3) - webben

on

  • 440 views

Teknisk kurs i datorer och internet för webannonssäljare 2004.

Teknisk kurs i datorer och internet för webannonssäljare 2004.

Statistics

Views

Total Views
440
Slideshare-icon Views on SlideShare
440
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Så funkar det (del 3) -  webben Så funkar det (del 3) - webben Presentation Transcript

    • Så funkar...webben Teknik i Media BITS Peter Antman 2004
    • Så funkar...webben Webben Det vi kanske närmast kopplar till Internet. Vid sidan av ordbehandling och mail det vi gör mest.
    • Så funkar...webben Webben Att med hjälp av en "browser" hämta och läsa dokument som inte ligger lokalt. En adress: http://www.sydsvenskan.se
    • Så funkar...webben En sida i en browser
    • Så funkar...webben
    • Så funkar...webben Källkoden bakom sidan
    • Så funkar...webben
    • Så funkar...webben Dessa tre vardagliga, enkla saker utgör de tre ben som webben står på:
      • Adress format: URL (Uniform Resource Locator).
        • Var finns resursen
      • Internetprotokoll: HTTP (HyperText Transport Protocoll)
        • Hur skall den hämtas.
      • Dokumentformat: HTML (Hypertext Markup Language)
        • Hur skall den visas upp
    • Så funkar...webben Webben kom ganska sent i Internet-floran
    • Så funkar...webben Historia Vannevar Bush (1945)
      • artikeln "As We May Think,"
      • Information overload
      "There is a growing mountain of research. But there is increased evidence that we are being bogged down today as specialization extends...Mendel's concept of the laws of genetics was lost to the world for a generation because his publication did not reach the few who were capable of grasping and extending it; and this sort of catastrophe is undoubtedly being repeated all about us, as truly significant attainments become lost in the mass of the inconsequential....The summation of human experience is being expanded at a prodigious rate, and the means we use for threading through the consequent maze to the momentarily important item is the same as was used in the days of square-rigged ships."
      • Lagra information baserad på associationer
      • Memex
    • Så funkar...webben
    • Så funkar...webben Ted Nelson
      • 1965 Hypertext
      • 1967 XANADU, föregångaren till webben
      Bill Atkinson
      • 1987 Hypercard
    • Så funkar...webben Grundaren: Tim Berners-Lee
      • Arbetade på CERN (Partikelaccelerator Geneva).
      • Många forskare jorden runt bidrog med forskning och rapporter.
      • Svårt att få dem att använda gemensamt dokumentformat.
      • Behövde ett system för att hantera information runt forskningen.
    • Så funkar...webben 1989: "This proposal concerns the management of general information about accelerators and experiments at CERN. It discusses the problems of loss of information about complex evolving systems and derives a solution based on a distributed hypertext system."
    • Så funkar...webben Krav:
      • enkelt
      • decentraliserat
      • länkat
      Arkitektur: Klient-Server Fick inget direkt gehör.
    • Så funkar...webben Satte ihop ett eget system. Baserat på klient-server tillståndslösa accesser länkning till andra dokument/servrar
    • Så funkar...webben
    • Så funkar...webben Bestod redan då av de bekanta:
      • Ett protokoll för att hämta informationen från en server (HTTP).
      • Ett adressschema (URL)
      • Ett dokumentformat (HTML)
      • En server som levererade dokumentet (Webserver)
      • En klient/Browser med vilken man kunde hämta dokumenten, få dem visade försig och följa länkar i dem. Kallade programmet för WorldWideWeb.
    • Så funkar...webben Lade upp det publikt 1991 och släppte källkoden. Växte sedan ryktesvägen. National Center for Supercomputing Applications (NCSA)
      • Webserver (nr 2)
      • Mosaic (Marc Andreesen)
      • Utökade HTML
      • Lade till inline bilder.
    • Så funkar...webben
    • Så funkar...webben Arkitektur
      • Ett system för text.
      • Enkelt - "An HTTP daemon is such a simple thing that a simple shell script will often suffice."
      • Dokumentformatet text
      • Protokoll i klartext.
      Låt oss börja med en överblick.
    • Så funkar...webben
    • Så funkar...webben URL (Uniform Resource Locator) Var finns det vi söker? Hanteras av IETF RFC1738 (1994) (Uniform Resource Identifiers RFC2396 1997)
    • Så funkar...webben URL (Uniform Resource Locator) protokoll :// hostname [: portnummer]/resurs[#partid]
      • Den ger oss också ett schema som avgör vilket protokoll som skall användas.
      • Ger oss ett hostname.
      • Om inte portnummer är angivet ges det från protokollet
      • En resurs att hämta.
    • Så funkar...webben HTTP (HTTPS)
      • Hypertext Transport Protokoll
      • Hur skall vi hämta resursen?
      • Spec hanteras av IETF
      • RFC 1945 (1.0, 1996, informational)
      • RFC 2608 (1.1, 1997)
      • RFC 2616 (1.1 1999)
    • Så funkar...webben Textbaserat protokoll.
      • Format för hur man anger en resurs som man vill hämta.
      • Format för hur svaret skall se ut.
      • Standardiserade svarskoder.
      • Headers
      • Innehåll
      • Går bra att köra direkt med telnet.
    • Så funkar...webben [pra@pra pra]$ telnet localhost 80 Trying 127.0.0.1... Connected to localhost.localdomain (127.0.0.1). Escape character is '^]'. GET / HTTP/1.0 HTTP/1.1 200 OK Date: Tue, 03 Feb 2004 08:59:25 GMT Server: Apache/1.3.23 (Unix) (Red-Hat/Linux) mod_jk/1.1.0 mod_python/2.7.6 Python/1.5.2 mod_ssl/2.8.7 OpenSSL/0.9.6b DAV/1.0.3 PHP/4.1.2 mod_perl/1.26 mod_throttle/3.1.2 Last-Modified: Tue, 09 Apr 2002 18:56:58 GMT ETag: "52c045-b4a-3cb3397a" Accept-Ranges: bytes Content-Length: 2890 Connection: close Content-Type: text/html
    • Så funkar...webben <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2 Final//EN&quot;> <HTML> <HEAD> <TITLE>Test Page for the Apache Web Server on Red Hat Linux</TITLE> </HEAD> <!-- Background white, links blue (unvisited), navy (visited), red (active) --> <BODY BGCOLOR=&quot;#FFFFFF&quot;> <H1 ALIGN=&quot;CENTER&quot;>Test Page</H1> <P>This page is used to test the proper operation of the Apache Web server after it has been installed. If you can read this page, it means that the Apache Web server installed at this site is working properly.</P> </BODY> </HTML>
    • Så funkar...webben Kommandon:
      • GET - enkelt URL baserad hämtning av resurser
      • POST - Bäddar in innehåll i textmeddelandet (för att skicka upp argument, eller t.ex filer)
      • HEAD - kolla enbart headers.
    • Så funkar...webben [pra@pra pra]$ telnet localhost 80 Trying 127.0.0.1... Connected to localhost.localdomain (127.0.0.1). Escape character is '^]'. HEAD / HTTP/1.0 HTTP/1.1 200 OK Date: Tue, 03 Feb 2004 09:02:49 GMT Server: Apache/1.3.23 (Unix) (Red-Hat/Linux) mod_jk/1.1.0 mod_python/2.7.6 Python/1.5.2 mod_ssl/2.8.7 OpenSSL/0.9.6b DAV/1.0.3 PHP/4.1.2 mod_perl/1.26 mod_throttle/3.1.2 Last-Modified: Tue, 09 Apr 2002 18:56:58 GMT ETag: &quot;52c045-b4a-3cb3397a&quot; Accept-Ranges: bytes Content-Length: 2890 Connection: close Content-Type: text/html Connection closed by foreign host.
    • Så funkar...webben Svarskoder - några exempel
      • 200 OK
      • 301 Resursen har flyttat permanent till: XXX
      • 303 Se annan (redirect)
      • 401 Autentiering krävs
      • 403 Access förbjuden
      • 404 Sidan inte hittad
      • 500 Internt serverfel
    • Så funkar...webben Content-Type
      • Mime
      • Kan vara annat än text
      • Här ser vi att det är HTML
    • Så funkar...webben HTML (Hypertext Markup Language) Hanteras av World Wide Web Consortium (www.w3c.org)
      • Från början baserat på dokumentspråket SGML(Standard Generalized Markup Language).
      • Utvecklat på 80-talet för dokumenthantering.
      • Så kallat strukturerad information.
      • Skilja utseende från innehåll.
      • Göra innehåll meningsbärande.
    • Så funkar...webben <!doctype linuxdoc system> <article> <title>Artikelrubrik <author>Peter Antman <date>2004-01-27 <toc> <sect>Inledning <p>Detta dokument handlar om </article>
    • Så funkar...webben HTML inspirerades från SGML men blandade också in element som beskrev utseende. Ett enkelt HTML dokument
    • Så funkar...webben <HTML> <HEAD> <TITLE>Mitt HTML dokument</TITLE> </HEAD> <BODY> <H1>Här är ett exempeldokument</H1> <P>Vi skriver lite <I>kursiverad</I> text</P> <P>Och lägger in en bild <IMG SRC=&quot;mybild.jpg&quot;></P> <P>Och en länk <A HREF=&quot;ettannatdoc.html&quot;>En länk</A></P> </BODY> </HTML>
    • Så funkar...webben
      • 1994 Netscape
      • Internet Explorer
      Drev på utvecklingen av både HTTP och HTML. Grunden är fortfarande densamma, men det ingår så mycket mer i dag.
    • Så funkar...webben Det som från början och i grunden var ytterst enkelt kan i dag också vara ytterst komplex. Nästan all modern systemutveckling sker med webben som grund.
    • Så funkar...webben Rikare media – från text till “tidning”
      • Bilder (png, gif, mp3, jpeg, kompression)
      • CSS
      • Hjälp-applikationer
      • Plugins (pdf,mp3)
    • Så funkar...webben Bildformat för webben
      • Behövs inte tryck-kvalitet
      • Hålla nere bandbredden
      • Komprimering
    • Så funkar...webben Komprimering
      • Att pressa ihop
      • Två tekniker
      • Ersätta mönster med kortare uttryck (icke förstörande)
      • Reducera informationsmängden (förstörande)
    • Så funkar...webben Komprimering – exempel Här är allt bara bra. (21 tecken * 8 bitar) space={3,5,9,13}; är=1; ra=2; H11alltba2b2. (13 tecken * 8 bitar) Om tabellen tar mindre plats än 64 byte har vi sparat utrymme.
    • Så funkar...webben GIF (Graphical Interchange Format)
      • Icke förstörande
      • Normalt inte mer än 256 färger
      • Vanligt för logotyper och liknande
      • Ej bra för fotografier
      • Patentproblem – licenskostnad vid kommersiell användning
    • Så funkar...webben JPEG (Joint Photography's Expert Group)
      • Förstörande komprimering
      • God kompression för fotografier
      • Fri att använda
    • Så funkar...webben PNG (Portable Neetwork Graphics)
      • Internetstandard (RFC 2083)
      • Ersätter GIF
      • Icke förstörande
      • 24-bitars färg
      • Inga patentproblem
      • Klara dock inte animering
      • Bör användas i stället för GIF!
    • Så funkar...webben Andra format
      • Mp3 – komprimerade ljudfiler, lider av samma typ av patentproblem som GIF
      • Og Vorbis – Fri Mmp3 ersättare
      • Mpeg – film format
      • Divx - “mp3” för film.
    • Så funkar...webben CSS (Cascading Style Sheets)
      • För snyggare formgivning av websidor
      • Skilja mellan form och innehåll
      • Första specen 1996
      • Formen bestäms utanför websidan, för en hel site, applikation eller dyligt i externa filer
      • Innan dess måste man ange fonter, färger och dyligt för varje enskilt html element
      <font face=”Verdana” size=”6”><p>Hej</p></font>
    • Så funkar...webben CSS (Cascading Style Sheets) <HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE=&quot;text/css&quot;> P { font-size: 6;font-family: helvetica;} </STYLE> </HEAD> <BODY> <P>Hej</P> </BODY> </HTML>
    • Så funkar...webben Externa applikationer/Plugins
      • För att visa data av typer som inte stöds direkt av browsern.
      • Styrs av Content-Type, alltså vilke mime-typ webservern anser sig skicka
      • Applikationer startas utanför browsern
      • Plugins tar över delar av browsern
    • Så funkar...webben Dynamiskt – från tidning till applikation Klienten (Cookies,Javascript,Javaplugin,Flash) Servern (CGI, Databaser,ASP,JSP, Applikationsserver)
    • Så funkar...webben Dynamiskt – klienten Att programmera browsern Java 1995 – att göra klienten/browsern “interaktiv” Demo av Gosling 1995: As the talk began, Gosling noticed that many people were only casually paying attention. After all, what was so exciting about a new language driving a page of text and illustrations in a clone of Mosaic? Then Gosling moved the mouse over an illustration of a 3D molecule in the middle of the text. The 3D molecule rotated with the mouse movement. Back and forth, up and around. The entire audience went `Aaaaaaah! Their view of reality had completely changed because it MOVED.&quot; Now everyone was paying close attention.
    • Så funkar...webben Dynamiskt – klienten Plugin i Netscape för Java 1995 Användes mest till att göra animationer och annat i början Plågades länge av långsamhet och ostabilitet Problem med licenserna för Windows
    • Så funkar...webben Dynamiskt – JavaScript 1995 LiveScript Skapade för att kunna interagera med Java applets Gör att det går att skapa dynamik i klienten direkt i HTML-sidorna Exekverar i browsern Standardiserat via ECMA och ISO Netscape och Internet Explorer hade länge inkompatibla versioner
    • Så funkar...webben <html> <body> <form name=&quot;demo&quot;> <input type=&quot;button&quot; name=&quot;show&quot; value=&quot;Press Me&quot; onClick=&quot;document.forms['demo'].elements['show'].value='You Pressed Me';&quot;> </form> </body> </html>
    • Så funkar...webben
    • Så funkar...webben Flash
      • Börjat ersätta Java-applets
      • Utvecklat av Macromedia
      • “Filmer”
      • Stöd för Javascript
      • “Rich cklient”
      • Binärt och proprietärt
    • Så funkar...webben SVG (Scalable Vector Graphics)
      • Utmanare till Flash
      • XML-baserat
      • Standard
      • Många plugins
      • Stöd av Adobe
    • Så funkar...webben Dynamiskt – på server
      • Viktigare än dynamiken i klient var att skapa dynamik på serversidan.
      • Från början: färdiga textfiler i filsystemet som innehöll HTML (statiskt).
      • Skapa sidorna “on-the-fly”, via program
    • Så funkar...webben CGI (Common Gateway Interface)
      • Skapade 1993 i webservern NSCA
      • Gränssnitt mellan webserver och ett externt program
      • Webservern startar program (skrivet i shellskript, perl, c eller dyligt)
      • Ger programmet tillgång till anropet som “mijövariabler”
      • Programmet skriver ut HTML:en dynamsiskt
      • Webservern returnerar sidan som om det vore en statisk sida.
    • Så funkar...webben CGI (Common Gateway Interface) Anropa “sida” Starta program Skapa html Skicka tillbaka sida
    • Så funkar...webben CGI (Common Gateway Interface) #!/bin/sh cat << END Content-Type: text/html <HTML> <HEAD> <BODY> <p>Du använder browser: $HTTP_USER_AGENT</p> </BODY> END
    • Så funkar...webben CGI (Common Gateway Interface)
    • Så funkar...webben Cookies
      • Webben tillståndslöst
      • Nytt anrop för varje “sida”
      • Svårt att skapa applikationer
      • Måste ha något sätt att minnas vad som gjor tidigare
      • Länka anropen till varandra.
      • Cookies – skapades 1994 av Netscape
      • Från UNIX magic-cookie
    • Så funkar...webben Cookies En cookie är ett namn- och värde-par som servern kan be browsern att
      • lagra undan på disk
      • Alltid skicka med i varje anrop
      Två vanligaste användningsområdena
      • Personalisering – att hålla reda på en identifierad person
      • Skapa en “session”
    • Så funkar...webben Cookies
      • En cookie är alltid kopplad till en URL.
      • Måste minst vara kopplad till ett hostnamn.
      • Bowsern skickar enbart cookien när URL:er anropas som stämmer med det hostnamn/URL som cookien är knuten till.
    • Så funkar...webben Cookies Om inte cookien är satt, skickar servern den med första responsen HTTP/1.1 200 OK Set-Cookie: JSESSIONID=6C3F124C208EC065B1FE526392F461A9; Path=/xplanner Content-Type: text/html Content-Length: 125 Date: Fri, 13 Feb 2004 14:35:36 GMT Server: Apache-Coyote/1.1 Connection: close
    • Så funkar...webben Cookies När den väl är satt skickar browsern den i varje anrop GET /xplanner/planner.jsp HTTP/1.1 Cookie: JSESSIONID=6C3F124C208EC065B1FE526392F461A9;
    • Så funkar...webben Skriptspråk utvecklas för serversidan Nackdelar med CGI:
      • Ingen specifikt stöd för webutveckling
      • Tungt att starta en extern process för varje anrop
      • Svårt att hålla “state”, programmet körs vid varje anrop
      Första steget: integrera skriptspråken i webservern:
      • Perl: mod_perl för apache
      • PHP (Personal Home Pages)
    • Så funkar...webben Arkitekur
      • brandvägg
      • proxy
      • Lastbapalserare
      • round robin
      • webfarm
      • HA
      • session
      • ticky session
      • Cookie
      • Single-Sign-on
      • Passport
      • Autentiering/Autorisering
      • Kluster
      • URL-rewrite
      • 404
      • Forward
      • virtual domain
      • cachning.
    • Så funkar...webben Plattform
      • CGI
      • J2ee
      • .net
    • Så funkar...webben Programmering
      • Java
      • JSP
      • servlet
      • Perl
      • PHP
      • ASP
      • C#
      • Runtime
      • Remote Call
      • RMI
      • Corba
      • Transaktioner
      • Säkerhet
    • Så funkar...webben Datalager
      • Satabas
      • Disk
      • spegling
      • oracle
      • mssql
      • mysql
      • DatabasDriver
      • JDBC
      • ODBC.
    • Så funkar...webben Utveckling Open Source XML Webservice, SOAP, WSDL, UDDI.