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:

Præsentationer af emnet: "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:"— Præsentationens transcript:

1 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: e-mail, konferencer og hypertext Unix, UUCP udvikles 1971 - 76 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

2 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. ‘http://www.w3.org/hypertext/WWW/TheProject’ 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 http://www.w3.org/

3 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. 1991 : WWW software tilgængelig for download på Internettet 1991- 93 : Protokoller defineres og revideres 1993 : Marc Andreessen udvikler Mosaic på NCSA. 1994 : Tim Berners- Lee vælges til direktør for W3 Consortium. Marc Andreessen Tim Berners- Lee

4 WWW I 4 © Kaj GrønbækHypermedia WWW Tidslinie... 1994 : Marc Andreessen & James Clark starter Netscape. 1995 : 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

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

6 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

7 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

8 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

9 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="http://www.daimi.aau.dk/~kgronbak/Image.gif" HEIGHT=240 WIDTH=320 ALIGN=TEXTTOP> En link til DAIMI Overskrift på niveau 2 Punkt1 Punkt2

10 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:..

11 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

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

13 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. http://www.daimi.aau.dk/~olavb/mme/forhal.html

14 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 http://www.javasoft.com/ og http://www.microsoft.com/ Kald af JAVA programmer JavaScript – specialiseret programmeringssprog der kan blandes med HTML i Netscape browserne http://www.gamelan.com/pages/Gamelan.related.javascript.html http://www.mpg-ana.uni-potsdam.de/local/js/ Mere senere!

15 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 diffuseColor0.748016 0 0.0400871 specularColor0.89697 0.89697 0.89697 emissiveColor0 0 0 shininess1 transparency0 } } geometrySphere { radius0.230145 } }. translation-1.54097 0.192054 -4.5 rotation1 0 0 3.14159 scale2.99953 2.99953 2.99956 } url"test2.wrl" description"" parameter"" } translation0.423659 -0.215546 2.38419e-07 } ] } Mere senere!

16 WWW I 16 © Kaj GrønbækHypermedia Image map - eksempel Der sendes f.eks.: http://info.denet.dk/dkmap.m ap?237,158

17 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:

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

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

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

21 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

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

23 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 http://hoohoo.ncsa.uiuc.edu/cgi/

24 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 http://www.daimi.aau.dk/cgi- kgronbak/hyper/Ordre1.py?Name=Kaj+Gr%F8nb%E6k&Addr=Gertrud+Ras ks+Vej+7%2C+8200+%C5rhus+N&Tlf=8942+3237&Fax=8942+3255 Vi skal prøve Python i dette kursus http://www.python.org/

25 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.

26 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 "

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

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

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

30 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.

31 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");.

32 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 "

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

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

35 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 " "

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

37 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, {http://www.imv.aau.dk/~fisken/trail, http://www.daimi.aau.dk/~piparum/gruppe4.html,...} Nelson, {http://www.imv.aau.dk/~fisken/trail, http://www.daimi.aau.dk/~piparum/gruppe4.html,...} 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

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

39 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. http://www.altavista.digital.com/av/content/about_our_technology.htm

40 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 email 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: http://www.daimi.aau.dk/~kgronbak/hyper98/bestil1.html http://www.daimi.aau.dk/~kgronbak/hyper98/bestil.html http://www.daimi.aau.dk/~kgronbak/hyper98/administration.html Reference materiale om Python findes på flg. sider: http://www.python.org/ 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 "