WWW I 1 © Kaj GrønbækHypermedia Internettet Internet første Internet (ARPANET) i slutningen af 60erne - udviklet til det amerikanske forsvar. første anvendelser: , konferencer og hypertext Unix, UUCP udvikles også FTP og Ethernet USENET News - elektroniske opslagstavler 1979 DNS navneservice introduceres i 1984 Internet Engineering Task Force etableres i 1989 skal styre udviklingen af Internet Indtil da godt nok til edb-folk, men ikke til alm. brugere - for teknisk! WWW introduceres i 1991 gennembrud for almindelige brugeres anvendelse af Internet

WWW I 2 © Kaj GrønbækHypermedia World Wide Web Et globalt hypermediesystem på Internet Integration af mange (alle?) Internet services Gopher, FTP, WAIS, News, Mail,... En protokol: HTTP = HyperText Transfer Protocol En navne konvention: URL = Uniform Resource Locator Eks. ‘ Client/server kommunikation på fælles netværksstandard og standardiserede dataformater Netscape/MS-Explorer browsere med plug-ins til billeder, lyd, video, virtual reality Java og ActiveX programmeringsmuligheder browsere indholder programmeringssprogsfortolkere Se

WWW I 3 © Kaj GrønbækHypermedia WWW Tidslinie 1989 : Tim Berners- Lee fremsætter forslag om World Wide Web projektet på CERN i Schweiz 1990 : Første Webserver og klient klar i december : WWW software tilgængelig for download på Internettet : Protokoller defineres og revideres 1993 : Marc Andreessen udvikler Mosaic på NCSA : Tim Berners- Lee vælges til direktør for W3 Consortium. Marc Andreessen Tim Berners- Lee

WWW I 4 © Kaj GrønbækHypermedia WWW Tidslinie : Marc Andreessen & James Clark starter Netscape : Digital åbner AltaVista for offentlig adgang 15. september 1996 : Internettet løber tør for IP-adresser 1996 : Tim Berners- Lee får Distinguished Fellowship of The British Computer Society

WWW I 5 © Kaj GrønbækHypermedia Stigning i Internet brug

WWW I 6 © Kaj GrønbækHypermedia Anvendelser af WWW WWW på Internet Publicering af dokumenter - “Digitalt Bibliotek” Reklame og “Corporate Image” Udveksling af dokumenter i interessegrupper mv. Bestilling af varer og tjenesteydelser Intranet (WWW mv. anvendt bag en “brandmur”): Virksomhedsinformationer - personale, håndbøger mv. I stigende omfang adgang til traditionelle informationssystemer Diskussionsfora Samarbejde Extranet (Externe partnere koblet på Intranet): Samarbejde med underleverandører i produktionsvirksomheder

WWW I 7 © Kaj GrønbækHypermedia Tendenser omkring Intranet Intranet = Internet protokoller anvendt bag en brandmur Fra “IBM's Intranet Offerings: Pathways to New Heights” (Forrester, "The Full Service Intranet", 3/96.): 16% af store virksomheder har intranet og andre 50% planlægger det

WWW I 8 © Kaj GrønbækHypermedia WWW arkitektur adressering (URL) + protocol (HTTP) + format (MIME) + gateway interface (CGI) PCMacUnix/X... Web servere News Eksisterende databaser Gateways Internettet Klienter Servere

WWW I 9 © Kaj GrønbækHypermedia Dataformater, HTML, GIF, VRML og andre HTML (HyperText Markup Language) - et simpelt programmeringssprog for tekst GIF/JPEG billedlagringsformater VRML (Virtual Reality Modelling Language) - et programmeringssprog for 3D verdener. Quicktime/MPEG videolagringsformater RealAudio - lyd i CD kvalitet Shockwave - animationer lavet med Macromedia... HTML eksempel: Vinduets titel Overskrift på niveau 1 <IMG SRC=" HEIGHT=240 WIDTH=320 ALIGN=TEXTTOP> En link til DAIMI Overskrift på niveau 2 Punkt1 Punkt2

WWW I 10 © Kaj GrønbækHypermedia Links i HTML en-vejs indlejret i kildeteksten til dokumenter, altså link- objekter point-to-node, point-to-point ingen typer Laves med anchor- tag f.eks:..

WWW I 11 © Kaj GrønbækHypermedia Komposition i HTML Indlejrede billeder og objekter F.eks. Frameset benyttes til komposition af flere sider til én ny side Et frame kan indeholde en default URL Kan også navngives så andre URL’er kan benytte den Frames kan indlejres, altså frames inden i frames inden i... Når der er et FRAMESET i en side ignoreres BODY

WWW I 12 © Kaj GrønbækHypermedia Embedding af vilkårlige MIME datatyper

WWW I 13 © Kaj GrønbækHypermedia Embedding specifikation Eksempel Quicktime VR movies: <EMBED SRC="vhouse01.mov" HEIGHT=288 WIDTH=512 CONTROLLER=false CACHE=true HOTSPOT107=kas.html HOTSPOT103=dtu.html HOTSPOT31=udd.html HOTSPOT70=bev.html HOTSPOT135=depot/depot.html HOTSPOT113=rob/robframe.html HOTSPOT252= aku/akuframe.html HOTSPOT102=mrsk/mrskframe.html> Quicktime plug-in fortolker de givne parametre Se evt.

WWW I 14 © Kaj GrønbækHypermedia Programmer til afvikling i Web browsere Java og ActiveX Programmering i generelle Objekt-orienterede sprog Web browserne har en fortolker for sprogene indbygget og Kald af JAVA programmer JavaScript – specialiseret programmeringssprog der kan blandes med HTML i Netscape browserne Mere senere!

WWW I 15 © Kaj GrønbækHypermedia 3D - VRML #VRML V2.0 utf8 CosmoWorlds V1.0 Group { children[ Transform { childrenAnchor { childrenTransform { childrenShape { appearanceAppearance { materialMaterial { ambientIntensity0.25 diffuseColor specularColor emissiveColor0 0 0 shininess1 transparency0 } } geometrySphere { radius } }. translation rotation scale } url"test2.wrl" description"" parameter"" } translation e-07 } ] } Mere senere!

WWW I 16 © Kaj GrønbækHypermedia Image map - eksempel Der sendes f.eks.: ap?237,158

WWW I 17 © Kaj GrønbækHypermedia Image map specifikation URL for Danmarkskortet ISMAP attribut specificerer, at der bruges et CGI script på serveren til at beregne link ud fra sendte koordinater USEMAP attribut specificerer, at der bruges et lokalt MAP element i klienten til at beregne links ud fra sendte koordinater Eksempel:

WWW I 18 © Kaj GrønbækHypermedia Specification af Image Map i Pagemill

WWW I 19 © Kaj GrønbækHypermedia Links i Image maps i Pagemill

WWW I 20 © Kaj GrønbækHypermedia Form – eksempel på udseende Der sendes flg: kgronbak/hyper/Ordre1.py?Name=Kaj+Gr%F8nb%E6k&Addr=%C5bogade+3 4&Tlf= &Fax=

WWW I 21 © Kaj GrønbækHypermedia “Forms” - formularer/skemaer Interaktiv mekanisme der åbner for brugerens input til Webservere Definerer standard brugergrænseflade objekter: Checkboxes, radiobuttons, pushbottons, fields … Del af BODY elementet i HTML Server- side interaktionen foregår via CGI protokollen

WWW I 22 © Kaj GrønbækHypermedia Forms eksempel på specifikation Kundeoplysninger Navn: Adresse: Tlf: Fax:

WWW I 23 © Kaj GrønbækHypermedia Common Gateway Interface - CGI Støtter dynamisk generering af HTML sider CGI- scripts udføres på server siden – typisk en UNIX maskine eller en Windows NT maskine Der kan sendes parametre til CGI-scripts. CGI - I/ O Post - læser parametre fra STDIN Længden af input læses fra en “environment variabel” kaldet CONTENT_LENGTH Get - læser fra en “environment variabel” kaldet QUERY_STRING Ny HTML side skrives på STDOUT. Se

WWW I 24 © Kaj GrønbækHypermedia CGI scripts Skrives i et vilkårligt sprog, der kan håndtere environment variable og standard I/O strømme C/C++, Java, BETA, PERL, Python,TCL, Unix shell scripts, Visual Basic, AppleScript Eksempel på kald kgronbak/hyper/Ordre1.py?Name=Kaj+Gr%F8nb%E6k&Addr=Gertrud+Ras ks+Vej+7%2C+8200+%C5rhus+N&Tlf= &Fax= Vi skal prøve Python i dette kursus

WWW I 25 © Kaj GrønbækHypermedia CGI eksempel simpel – Ordre1.py #!/usr/local/bin/python import cgi print "Content-type: text/html" print print " " print " Ordrebekræftelse " print " " Form = cgi.FieldStorage() # Kontroller at nødvendig data er sendt! ErrorMsg = " Følgende data mangler: " Error = 0 if not Form.has_key("Name") or Form["Name"].value == "": ErrorMsg = ErrorMsg + "Navn ikke angivet. " Error = 1 if not Form.has_key("Addr") or Form["Addr"].value == "": ErrorMsg = ErrorMsg + "Adresse ikke angivet. " Error = 1.

WWW I 26 © Kaj GrønbækHypermedia Ordre1.py... if Error == 1: print ErrorMsg stop # Nødvendige felter er udfyldt # Skriv kunden i databasen db = open("db.dat","a") # Åbn "db.dat" i append-mode db.write("Navn: " + Form["Name"].value + "\n") db.write("Adr: " + Form["Addr"].value + "\n") db.write("Tlf: " + Form["Tlf"].value + "\n") db.write("Fax: " + Form["Fax"].value + "\n") db.close# Luk databasen print " - Tak for din bestilling "

WWW I 27 © Kaj GrønbækHypermedia Eksempel på svar

WWW I 28 © Kaj GrønbækHypermedia Rigtig bestilling

WWW I 29 © Kaj GrønbækHypermedia Større bestillingsformular

WWW I 30 © Kaj GrønbækHypermedia Håndtering af bestillingsformular – Ordre.py #!/usr/local/bin/python import cgi print "Content-type: text/html" print print " " print " Ordrebekræftelse " print " " Form = cgi.FieldStorage() # Kontroller at nødvendig data er sendt! ErrorMsg = " Følgende data mangler: " Error = 0 if not Form.has_key("Name") or Form["Name"].value == "": ErrorMsg = ErrorMsg + "Navn ikke angivet. " Error = 1 if not Form.has_key("Addr") or Form["Addr"].value == "": ErrorMsg = ErrorMsg + "Adresse ikke angivet. " Error = 1.

WWW I 31 © Kaj GrønbækHypermedia Ordre.py... if Error == 1: print ErrorMsg stop # Nødvendige felter er udfyldt # Skriv kunden i databasen db = open("db.dat","a") # Åbn "db.dat" i append-mode db.write("Navn: " + Form["Name"].value + "\n") db.write("Adr: " + Form["Addr"].value + "\n") db.write("Tlf: " + Form["Tlf"].value + "\n") db.write("Fax: " + Form["Fax"].value + "\n") if Form.has_key("KreditKortType"): db.write("Korttype: " + Form["KreditKortType"].value + "\n") if Form.has_key("KortNavn") and Form["KortNavn"].value != "": db.write("Indehaver: " + Form["KortNavn"].value + "\n"); if Form.has_key("KortNr") and Form["KortNr"].value != "": db.write("Kortnummer: " + Form["KortNr"].value + "\n"); if Form.has_key("UdloebsDato") and Form["UdloebsDato"].value != "": db.write("Udløbsdato: " + Form["UdloebsDato"].value + "\n");.

WWW I 32 © Kaj GrønbækHypermedia Ordre.py... print " Følgende bestilling er modtaget: " print " " # Kontroller bestillingsfelter (1 - 6) for item in range(1,7): mgd_str = "Maengde" + `item`# `` Quotes skal bruges, vare_str = "Vare" + `item`# for at angive at item er et tal if Form.has_key(mgd_str) and Form[mgd_str].value != "": if Form.has_key(vare_str) and Form[vare_str].value != "": ordre = Form[vare_str].value + ": " ordre = ordre + Form[mgd_str].value + "\n" print ordre + " "# Print ordre til skærm db.write(ordre)# Gem ordre i databasen db.close# Luk databasen print " " print " - Tak for din bestilling "

WWW I 33 © Kaj GrønbækHypermedia Ordrebekræftelse

WWW I 34 © Kaj GrønbækHypermedia administration.html Administration Administration Vis bestillinger Tilbage til bestilling

WWW I 35 © Kaj GrønbækHypermedia CGI script til at liste bestillinger #!/usr/local/bin/python print "Content-type: text/html" print print " " print " Ordrebekræftelse " print " " db = open("db.dat","r")# Åbn "db.dat" i read-mode data = db.readlines()# db.close# Luk databasen print " Bestillinger "# Uskriv kundeliste for line in data: if line[0:4] == "Navn":# Skriv navnet på print " "# kunden med header 3 print " " print line print " " else: print line print " "

WWW I 36 © Kaj GrønbækHypermedia Liste af bestillinger

WWW I 37 © Kaj GrønbækHypermedia Søgemaskiner – eksempel på CGI access til databaser Databaser med inverterede index vedligeholdes af såkaldte “webcrawlers”eller “spiders” Skånsom automatisk følgning af links og indexering af fundne dokumenter Inverteret index... Bush, { Nelson, { Søgning, opslag via Forms og CGI- scripts der laver forespørgsler (queries) på database med index Web’en er blevet for stor til at søgemaskinerne kan dække alt

WWW I 38 © Kaj GrønbækHypermedia Eksempel på søgemaskine: Alta Vista

WWW I 39 © Kaj GrønbækHypermedia Eksempel på søgemaskine: Alta Vista... Udviklet og tilbydes (gratis) af Digital Equipment Corporation Spideren kaldes “Scooter” og den indekserer 6 million sider pr. dag Indekset fylder “kun” 60 GB AltaVista klarer mere end 12 million forespørgsler om dagen Benytter en samling af de kraftigste 64-bit maskiner Digital nogensinde har lavet Indekseringsmaskinerne har 10 processors, 6GB RAM og 210GB disk. 100 megabits pr sekund forbindelse til Internettet Se evt.

WWW I 40 © Kaj GrønbækHypermedia Opgave 3 Lav et simpelt billetreservationssystem til en biograf, Musikhuset eller lign. Det skal indeholde følgende: En 'form', hvor man kan taste plads nr., navn, adresse, mv. og reservere en plads. CGI-script, der håndterer formen. Et 'image map' over pladserne, hvor man med et click på en plads får at vide, om den allerede er reserveret. CGI-script, der håndterer image map. Opgaven afleveres ved at sende en link til mig med senest mandag d. 26. oktober. Vink: 1) I kan hente inspiration ved at kigge på filerne i /users/kgronbak/public_html/scripts/hyper/ Ordre1.py, Ordre.py, DisplayOrdre.py De kan testes fra flg. sider: Reference materiale om Python findes på flg. sider: 2) I kan lave en simpel skitse over en tænkt biograf i PhotoShop, eller scanne en pladsoversigt, hvis I har en. PhotoShop kan gemme billedet i GIF format som bruges til image map. I kan evt. nøjes med at støtte opslag på en mindre del af pladserne, hvis det er for vanskeligt, at lave en fuldstændig dækning. 3) I skal huske at gøre scripts udførbare med "chmod +x " og databasefiler skrivebare med "chmod +w "