Multimedia and Hypertext

Transkript

1 Multimedia, Hypertext Multimedia and Hypertext Markup Languages

2 Common Gateway Interface Forms CGI - Common Gateway Interface

3 TCP/IP and HTTP TCP/IP and HTTP as Communication Platform Request HTML files CGI Respone SSI HTTP Client HTTP Server HTTP programming model

4 CGI Mechanism 1. Browser generates request Browser Server 5. Server sends document Instrument Sensor Database 4. Server compiles new document CGI program 2. Server parses document with "CGI" command 3. CGI program calls external tools (resources)

5 Common Gateway Interface - CGI INTERNET Anwendungen HTML Browser CGI Anwendungsprogramme Betriebssystem Client SQL-DBMS Webserver

6 Java Application/Applet (without CGI) INTERNET Anwendungen Java-Applet HTML Browser Java- Anwendungs- Server CGI Anwendungsprogramme Betriebssystem Client SQL-DBMS Webserver

7 Forms Programming Forms in HTML FORM -Tag INPUT -Tags

8 Forms, Tags Tag <form> <input> <textarea> <select> <option> Attribut action method type rows cols name name size multiple selected Art des Eingabefeldes Description auszuführendes CGI-Skript oder Programm Methode der Datenübergabe: GET: über QUERY_STRING, POST: über stdin. Definiert einen Textbereich Höhe des Textbereiches Breite des Textbereiches Definiert den Variablennamen Definiert den Variablennamen Anzahl der angezeigten Elemente Mehr als ein Element kann ausgewählt werden Standardmäßig ausgewähltes Element (default)

9 Forms, Tags Type submit reset image hidden Attribut value value src name name value "Übergabe"-Schaltfläche definieren Text auf der Schaltfläche "Reset"-Schaltfläche definieren Text auf der Schaltfläche Definition einer Abbildung zur Formularübergabe URL des Bildes Variablenname Definition einer verborgenen Variablen Variablenname Wert von NAME Description

10 Forms, Tags Type radio checkbox text Attribut name value checked name value checked name value size maxlength Description Definition eines "Radiobuttons" Variablenname Wert von name Vorauswahl (default) Definition einer "Checkbox" Variablenname Wert von name Vorauswahl (default) Variablenname Wert von name Zeichenzahl angezeigte Größe des Textfeldes

11 Forms, Tags: Example 1

12 Forms, Tags -Page with input

13 Forms, Tags -Page with input <html> <head> <title>formulare</title> </head> <body> <hr/> <h2>beispiel für die Verwendung von Formularen in HTML-Dokumenten:</h2> <hr/> <br/> FORM (next page) <hr> <a HREF="xpintst_2.html">Nächste Seite</a> </body> </html>

14 Forms: Example 1 <form action=" method="post"> <h3>bitte geben Sie die geforderten Daten ein:</h3> <table> <tr><td>vorname<td><input name="vorname"><td>hochschule<td> <input type="checkbox" name="auswahl" value="fh-kiel" CHECKED> FH-Kiel <input type="checkbox" name="auswahl" value="fh-flensburg"> FH-Flensburg <input type="checkbox" name="auswahl" value="fh-heide"> FH-Heide <tr><td>nachname<td> <input name="nachname"><td>abschicken<td> <input type="submit" value="senden"> <tr><td>straße<td><input name="strasse"><td><td ROWSPAN=4> <input type="image" name="fh_kiel" SRC="fhbld33p.gif" ALIGN="TOP"> <tr><td>stadt<td><input name="stadt"> <tr><td>jahr<td ALIGN="CENTER"> 1997<input type="radio" name="jahr" value="1997" checked> 1998<input type="radio" name="jahr" value="1998"> 1999<input type="radio" name="jahr" value="1999"> <tr><td>passwort<td><input type="password" name="password"> </table> </form>

15 Forms: Example 1 action attribute: provides the URL of the program to be used for processing the form. method attribute: specifies the method -get or post -used to transmit the data of the form to the server: get: browser transfers data appended to the URL (single transmission), data available through environment variable "QUERY_STRING". post: form input information will be transmitted separated from the URL in a two-part message (header, form data), data available through standard input channel.

16 CGI-Script (C) Languages for CGI-Programming: C, C++ Perl Unix scripts, others Output of CGI-program (CGI-script): a) MIME-type: Content-Type/Sub-Type e.g. text/html b) New line (required, "\n") c) Data

17 CGI-Script (C) #include <stdio.h> #include <stdlib.h> #include <string.h> int main () { int i; int length; char DATA[1000]; char *str_len = getenv("content_length"); length = strtod (str_len, NULL); for (i=0; i<length; i++) { scanf("%c", &DATA[i]); } } printf("content-type: text/html\n\n"); printf("%s\n", DATA); return (0);

18 Environment Variables AUTH_TYPE LAST_MODIFIED REMOTE_IDENT CONTENT_LENGTH PATH REMOTE USER CONTENT_TYPE PATH_INFO SEARCH DOCUMENT_NAME PATH_TRANSLATED SERVER PROTOCOL DOCUMENT_ROOT POST SERVER SOFTWARE DOCUMENT_URI QUERY_STRING SERVER Name DATE_GMT QUERY_STRING_UNESCAPED SERVER Port DATE_LOCAL REMOTE_ADDR SERVER Root GATEWAY_INTERFACE REMOTE_HOST SCRIPT_NAME HTTP_ACCEPT REQUEST_METHOD

19 Forms, CGI-output Eingabe mit "Submit" bestätigt: VORNAME=Peter&Auswahl=FH-KIEL&Auswahl=FH-HEIDE& NACHNAME=Mustermann&STRASSE=Sackgasse+1&STADT =33333+Irgendwo&Jahr=1997&Password=geheim Eingabe mit "Image-Click" bestätigt: VORNAME=Peter&Auswahl=FH-KIEL&Auswahl=FH-HEIDE& NACHNAME=Mustermann&STRASSE=Sackgasse+1&STADT =33333+Irgendwo&Jahr=1997&Password=geheim&FH_Kiel.x =83&FH_Kiel.y=41 Im zweiten Fall werden zusätzlich die Koordinaten des aktivierten Bildpunktes ausgegeben (x=83, y=41).

20 Forms, Tags: Example 2

21 Forms, Tags -Page with input

22 Forms, Tags: Example 2 <form action=" /cgi-bin/xpin/xpintest.cgi" method="post"> <h3>benutzung eines Textfeldes mit Reset:</h3> <textarea name="meinung" COLS="60" rows="5" align="bottom"> Ich benutze diesen Beispieltext! </textarea> <input type="reset" name="reset" value="neuer Text"> <input type="submit" value="senden"> </form>

23 Forms, Tags -Page with input <h3>beispiel einer Menüleiste:</H3> <form action=" /cgi-bin/xpin/xpintest.cgi" method=post> <select name="menue" multiple> <option selected value="kiel" multiple>kiel</option> <option multiple>hamburg</option> <option multiple>flensburg</option> <option>luebeck</option> <option>berlin</option> </select> <input type="submit" value="senden"> </form>

24 Forms, CGI-output Textfeld: Meinung=Der+Text+wurde+%FCberschrieben.%0D%0AAuss erdem%0d%0awurden+neue+zeilen+eingef%fchrt%21%0d %0A Menüleiste: menue=flensburg

25 Forms, advanced application (JavaScript)

26 Forms-Calculator, CGI-output Ausgabe nach "Berechnen" und "Senden": Eingabe=5%2B6*%2810%2F5%29&Ausgabe=17

27 Forms in Search Engines Example: "MetaCrawler" <html> <head> <title> MetaCrawler</title> </head> <body> <form action=" method="get"> <br> <a href=" <br> <input type="text" name="general" value=""> <br> <input type="radio" name="method" value="1"> any <br> <input type="radio" name="method" value="0" checked> all <br> <input type="radio" name="method" value="2"> as a phrase <br> <input type="hidden" name="go2net" value="1"> <input type="submit" name="type" value="suche"> </form> </body> </html>

28 Search Engines: Google

29 Search Engines: Google <form action="/search" name=f> <input maxlength=256 size=40 name=q value=""> <input type=hidden name=ie value="iso "> <input name=hl type=hidden value=de><br> <input type=submit value="google Suche" name=btng> <input type=submit value="auf gut Glück!" name=btni> <a href=/advanced_search?hl=de>erweiterte Suche</a> <a href=/preferences?hl=de>einstellungen</a> <a href=/language_tools?hl=de>sprachtools</a> Suche: <input id=all type=radio name=meta value="" checked> <label for=all>das Web</label> <input id=lgr type=radio name=meta value="lr=lang_de" > <label for=lgr> Seiten auf deutsch</label> <input id=cty type=radio name=meta value="cr=countryde" > <label for=cty>seiten aus Deutschland</label> </form>

30 Example: frame based web page Summary: Internet and Web Technologies and Applications

31 Internet Technologies Web Technology Trends Client/Server Architecture Hyper Text Markup Language Hyper Text Transport Protocol Common Gateway Interface Web Trends Web Application Architecture Java

32 Internet Concepts Global Hypertext publishing concept information world in which all information can be accessed in a consistent and simple way scheme to address different types of data (text, image, sound, video) Universal Readership concept common interface for reading documents from any platform browsers and supporting applications Client/Server concept easy growth without centralized control

33 Web Technology Browsers core functionality plug ins advantage of plug-ins Client/Server Architecture Information providers run servers Web Servers, other servers Browsers on client side Advantage of CS-Architecture

34 Client/Server Architecture Two-Tier Client/Server Three-Tier Client/Server Client Client Application Server Corporate Databases Corporate Databases

35 Client/Server Architecture Information Browsers MS-Windows Apple Unix Portable Addressing Schemes (URL), Transfer Protocols (HTTP) Document Format Identification and Negotiation (MIME) FTP Server HTTP Server WAIS Server Gopher Server Database Server Network News Server Information Servers WAIS: Wide Area Information Server

36 Browsers: Universal Readership Information Browsers JPEG viewer MPEG Player Acrobat Viewer HyperText Markup Graphics (GIF, TIFF) Motion Video (MPEG) Adobe PostScript Tex, LaTex, ASCII Internet News Supporting Applications Core WWW Browser

37 Extending HTML HTML <INPUT> <IMG> <EMBED> <APPLET> <TABLE> Form controls Pictures Office Docs Java Applets Layout <MARQUEE> <A> <SCRIPT> <OBJECT> Effects Hyperlinks Parsers/ Compilers Generic

38 Information We are drowning in information but starved for knowledge. Wir ertrinken in Informationen und hungern nach Wissen. John Naisbitt, American Trend Analyst, Futurist, Author Where's the wisdom we have lost in knowledge, Where's the knowledge we have lost in information? T.S.Eliot (The Rock)

39 Information The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom. Isaac Asimov, Scientist and writer ( )

40 Information The stone age was marked by man's clever use of crude tools; the INFORMATIONage, to date, has been marked by man's crude use of clever tools. Anonymous

41 Information Wisdom Weisheit Knowledge Wissen Information Information Data Daten