Projekt Vollpension Teil III. Web. Einführung & Grundlagen. Niels Heidenreich, Januar 2004

Transkript

1 Projekt Vollpension Teil III Web Einführung & Grundlagen Niels Heidenreich, Januar 2004

2 Netzwerkschichten ( SMTP) News (Usenet) ( NMTP) Telnet FTP World Wide Web ( HTTP) IRC (Chat) Instant Messaging Internet ( TCP/IP )

3 Netzwerkschichten: Protokolle ( SMTP) News (Usenet) ( NMTP) Telnet FTP World Wide Web ( HTTP) IRC (Chat) Instant Messaging Internet ( TCP/IP )

4 Das Internet News (Usenet) Telnet FTP World Wide Web ( HTTP) IRC Instant Messaging Internet ( TCP/IP )

5 Das Internet: Geschichte (1) Das Internet: Geschichte (1) Entwicklung des US-Militärs während des Kalten Krieges Konzept 1962 von Paul Baran (RAND Corporation) vorgeschlagen Zunächst (ab Ende 60er) als ARPANET, basierend auf NCP (Network Control Protocol) Ab 1982 basierend auf TCP/IP

6 Das Internet: Geschichte (2) Das Internet: Geschichte (2) Zugang zum ARPANET durch Dept. of Defense beschränkt US-Unis entwickeln CSNET ( ), Basis UUCP Anschluß CSNET an ARPANET via TCP/IP TCP/IP kostenlos, in UNIX integriert (starke Verbreitung) Anfang 80er Standard (Dept. of Defense) 1986: NSFNET-Backbone in Betrieb löst 1990 aufgelöstes ARPANET ab

7 Das Internet: Konzept Das Internet: Konzept Paul Baran (RAND Corporation), 1962 Ausfallsicherheit im Atomkrieg Dezentrales Netzwerk (Keine zentrale Steuerung/Kontrolle) Daten in Pakete aufgeteilt (gelangen ggf. auf getrennten Wegen von Sender zu Empfänger) Netzkapazität besser nutzbar; verlorengegangene/defekte Pakete wiederholt sendbar

8 Das Web News (Usenet) Telnet FTP World Wide Web ( HTTP) IRC Instant Messaging Internet ( TCP/IP )

9 Das Web: Geschichte (1) Das Web: Geschichte (1) Erforderliche»Pionierleistungen«, Teil 1: Internet Protocol, Transmission Control Protocol (TCP/IP) [Vint Cerf et al.] und Domain Name System (DNS) [Paul Mockapetris et al.] Basis für das Internet, ermöglichte seit Beginn Dienste wie (in USA seit den 80ern verbreitet)

10 Das Web: Geschichte (2) Das Web: Geschichte (2) Erforderliche»Pionierleistungen«, Teil 2: Hypertext [Vanevar Bush (1945), Ted Nelson, Doug Engelbart (1960s)] Fusion durch Tim Berners-Lee (Forschungszentrum CERN, Genf, 1989) Internet + Hypertext/Hypermedia = World Wide Web Seine Leistung: HTTP, HTML, Webserver, Web-Client (»Browser«)

11 Das Web: Konzept (1) Das Web: Konzept (1) Einfacher Austausch von Informationen auf Basis vorhandener Netzwerk- Infrastruktur (Internet) und Verknüpfung nach der Hypertext-Idee Basis: 1. Übertragungsprotokoll: HTTP (Hypertext Transfer Protocol) 2. Dokumentensprache: HTML (Hypertext Markup Language)

12 Das Web: Konzept (2) Das Web: Konzept (2) HTTP (Netzwerkprotokoll) setzt auf TCP/IP als Netzwerk/ Transportschicht auf regelt Austausch von Hypertext-/ Hypermedia-Daten HTML (Dokumentensprache) definiert Struktur von via HTTP übertragenen Dokumenten

13 Das Web: Ein Erfolgsmodell Das Web: Ein Erfolgsmodell Leistungsfähigster, komfortabelster und populärster Internetdienst Möglichkeit der Integration diverser anderer Internetdienste Zugriff auf beliebige Informationen über nationale, gesetzliche und sprachliche Barrieren (kontrovers) Zahl der Inhalte-Anbieter und -Konsumenten wächst ständig & stark

14 Das Client-Server-Prinzip Das Client-Server-Prinzip Server (»Bediener«): Daten-Lieferant Client (»Kunde«): Daten-Abnehmer Client Internet Server

15 Das Client-Server-Prinzip Das Client-Server-Prinzip Server (»Bediener«): Daten-Lieferant Client (»Kunde«): Daten-Abnehmer 1. Client schickt Anfrage (Request) Client Internet Server

16 Das Client-Server-Prinzip Das Client-Server-Prinzip Server (»Bediener«): Daten-Lieferant Client (»Kunde«): Daten-Abnehmer Client Internet Server 2. Server schickt angeforderte Daten

17 Das Client-Server-Prinzip im Web Das Client-Server-Prinzip im Web Web-Client (Browser) Internet Web-Server

18 Das Client-Server-Prinzip im Web Das Client-Server-Prinzip im Web 1. Client schickt Anfrage (Request): GET Web-Client (Browser) Internet Web-Server

19 Das Client-Server-Prinzip im Web Das Client-Server-Prinzip im Web Web-Client (Browser) Internet 2. Server schickt angeforderte Daten (Webseite index.html von Web-Server index.html

20 Das Client-Server-Prinzip im Web Das Client-Server-Prinzip im Web Web-Client (Browser) Internet Web-Server 3. Client (Browser) liest und interpretiert den HTML-Code in index.html, wandelt diesen in eine Bildschirmdarstellung um und bringt diese zur Ausgabe. Dazu müssen meistens weitere Requests vom Client an den Server geschickt werden, z. B. wenn eine Webseite Bilder und andere Objekte enthält, die zunächst heruntergeladen werden müssen.

21 Aufgaben von Webserver und -Client: Server Aufgaben von Webserver und -Client: Server empfängt laufend Requests von unterschiedlichsten Clients sendet angeforderte Dateien zurück führt ggf. serverseitige Skripte und Programme (CGI) aus, die an Client zu übertragende Daten dynamisch (zur Laufzeit bzw. je nach Bedarf) erzeugen (Beispiele: Perl, PHP, ASP, ColdFusion)

22 Aufgaben von Webserver und -Client: Client (Browser) Aufgaben von Webserver und -Client: Client (Browser) sendet Requests für jede benötigte Datei (angeforderte Webseite und eingebettete Medienobjekte, Stilvorlagen [CSS], etc.) dekodiert, interpretiert und rendert HTML-Dokumente und stellt sie dar, ggf. inkl. clientseitiger Skripte (Java- Script) und Programme (Java-Applets) Ermöglicht Interaktion (meist via GUI)

23 Terminologie (1) Terminologie (1) Webseite: einzelnes Web-Dokument Website: Menge aller zu einem Web- Informationsangebot gehörigen Inhalte Homepage: Startseite einer Website

24 Terminologie (2) Terminologie (2) JavaScript: üblicherweise clientseitige Skriptsprache, vom Browser interpretiert, meist für interaktive Webseiten und DHTML (Dynamic HTML) Java: Programmiersprache für plattformunabhängige Anwendungen, benötigt Virtuelle Maschine; auch im Web als Java-Applets verbreitet

25 HTML: Intro HTML: Intro Auszeichnungssprache, in der alle Web- Dokumente (»Seiten«) codiert sind HTML ist keine Programmiersprache! Stark vereinfachtes SGML-Derivat Ziel: Strukturierung von Inhalten, nicht jedoch Steuerung der Darstellung HTML-Konzept von Browser- und Editorherstellern (Netscape, Microsoft) vielfach kompromittiert

26 HTML: Tags & Attribute (1) HTML: Tags & Attribute (1) HTML ist sehr einfach! HTML-Code strukturiert Inhalte durch Einschließen in Tags <title>seitentitel</title> Öffnender Tag: <title> Schließender Tag: </title>

27 HTML: Tags & Attribute (2) HTML: Tags & Attribute (2) In Attributen definiert man Zusatzinformationen (bei vielen Tags erforderlich) <a href="ich.html">ich</a> a-tag: Link (Hypertext-Verknüpfung) href-attribut mit Wert ich.html spezifiziert das Ziel des Links

28 HTML: Tags & Attribute (3) HTML: Tags & Attribute (3) Durch Tags strukturierte Inhalte können wiederum in Tags eingeschlossen werden (Verschachtelung) <p>absatz mit <em>hervorgehobenem Text</em></p> p-tag: Absatz (paragraph) em-tag: Hervorhebung (emphasis)

29 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <html> </html>

30 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <html> <head> </head> </html>

31 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <html> <head> <title>meine erste Webseite!</title> </head> </html>

32 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <html> <head> <title>meine erste Webseite!</title> </head> <body> </body> </html>

33 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <html> <head> <title>meine erste Webseite!</title> </head> <body> Hier kommt der Inhalt meiner Seite hin... </body> </html>

34 HTML: Seitengrundgerüst HTML: Seitengrundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <title>meine erste Webseite!</title> </head> <body> Hier kommt der Inhalt meiner Seite hin... </body> </html>

35 HTML: Die wichtigsten Tags (1) HTML: Die wichtigsten Tags (1) html head body title HTML-Container Seitenkopf Seitenrumpf Seitentitel p em b i Absatz (paragraph) Hervorhebung (emphasis) Fetter Text (bold) Kursiver Text (italic)

36 HTML: Die wichtigsten Tags (2) HTML: Die wichtigsten Tags (2) a Verknüpfung (Link)/Anker (anchor) href Ziel (URL) der Verknüpfung (hypertext reference) img Einzubettendes Bild (image) src Bild-Quell-URL (source) width Breite in Pixeln height Höhe in Pixeln alt Beschreibung (alternate)

37 HTML: Die wichtigsten Tags (3) HTML: Die wichtigsten Tags (3) h1 h2 h3 Überschrift 1. Ordnung (headline) Überschrift 2. Ordnung (headline) Überschrift 3. Ordnung (headline) ul ol li Ungeordnete Liste (unordered list) Geordnete Liste (ordered list) Listeneintrag/Element (list element)

38 HTML: Die wichtigsten Tags (4) HTML: Die wichtigsten Tags (4) table tr th td Tabelle (headline) Tabellenzeile (table row) Spaltenüberschrift (table headline) Tabellenzelle style (CSS-) Stilvorlage script (JavaScript-) Skriptprogramm meta Metainformation

39 Webdesign: Intro Webdesign: Intro Web-Inhalte bestehen aus unterschiedlichsten Objekten Standard-Dokumentenformat: HTML Erstellung via Web-Editor oder»von Hand«mit Texteditor Bilder Bildbearbeitungssoftware Flash Flash, LiveMotion Ton Audiobearbeitungssoftware Film Videobearbeitungssoftware

40 Webdesign: Editor vs. Hand-Coden: Web-Editoren Webdesign: Editor vs. Hand-Coden Web-Editoren Dreamweaver, GoLive (semiprof.) MS FrontPage, Fusion etc. (nichtprof.) Bieten gewohnte Office-ähnliche WYSIWYG-Umgebung Schirmen den Anwender vom Code ab Erzeugen oft nicht standardskonformen (schlechten) HTML-Code Fördern oft schlechtes Webdesign

41 Webdesign: Editor vs. Hand-Coden: Hand-Coden Webdesign: Editor vs. Hand-Coden Hand-Coden Größere Einstiegshürde Durch Beschäftigung mit Technik, Sprachen, Standards etc. besseres Verständnis des Mediums Weniger Gefahr, sich schlechte Webdesign-Praktiken anzugewöhnen Leichterer Einstieg in Skriptprogrammierung (JavaScript, PHP, etc.)

42 Gutes Webdesign: Mediengerechtheit Gutes Webdesign: Mediengerechtheit Verstehen, dass Web ein anderes Medium ist als bedrucktes Papier Vermeiden, Drucksachengestaltung 1:1 ins Web zu übertragen Nachteile des Web gegenüber Print berücksichtigen (Bildschirmfläche,...) Vorteile des Web ausnutzen (Farbe, Aktualität, Interaktivität,...)

43 Gutes Webdesign: Plattformunabhängigkeit Gutes Webdesign: Plattformunabhängigkeit Websites nie auf spezielle Plattformen zuschneiden (z. B.»diese Seite am besten in Browser Q auf System X bei Auflösung Y mit Z Farben betrachten...«) Plattformabhängigkeit üblicherweise Zeichen für schlechten Code 100%ige Kontrolle über Darstellung oft nicht notwendig ( Mediengerechtheit)

44 Gutes Webdesign: Barrierefreiheit Gutes Webdesign: Barrierefreiheit Websites auch in alternativen Ausgabegeräten (z. B. Braillezeile) darstellbar sensorisch beeinträchtigte Personen nicht ausschließen Mediengerechte Websites oft automatisch barrierefrei

45 Gutes Webdesign: Text vs. Bild Gutes Webdesign: Text vs. Bild Bilder nur einsetzen, wenn Information nicht auch durch Text darstellbar Niemals»Buttons«verwenden! Möglichst generell keine Bilder als Navigationselemente verwenden Je mehr Inhalt in Form von Text, desto einfacher die Pflege, Übersetzung, Erzielung von Barrierefreiheit usw.

46 Gutes Webdesign: Frames sind böse Gutes Webdesign: Frames sind böse Frames: Aufteilung einer Webseite in mehrere auf einem Bildschirm dargestellte Einzelseiten Vorteil: Trennung von Seiteninhalten einfachere Erstellung und Pflege Nachteile: Probleme beim Ausdrucken und Indizieren durch Suchmaschinen, visuelle Trennung: Barriere!

47 Gutes Webdesign: Inhalt und Darstellung trennen (1) Gutes Webdesign: Inhalt und Darstellung trennen (1) Webseiten (HTML) sollen nur strukturierte, semantische Nutzdaten enthalten Steuerung der Darstellung in Stilvorlagen (CSS) ausgliedern Vorteil: unabhängige Pflege von Inhalt und Darstellung; HTML-Code leichter wartbar, umsetzbar, barrierefreier; Stilvorlagen wechselbar

48 Gutes Webdesign: Inhalt und Darstellung trennen (2) Gutes Webdesign: Inhalt und Darstellung trennen (2) Guter HTML-Code definiert nirgends, wie Inhalte dargestellt werden sollen, sondern strukturiert die Inhalte nach semantischen Kriterien Steuerung der Darstellung viel eleganter und präziser in externer Stilvorlage (CSS) Semantisch strukturiertes HTML plus CSS: Web, wie es sein sollte

49 Gutes Webdesign: Auf Dateigrößen achten Gutes Webdesign: Auf Dateigrößen achten Alle Web-Inhalte müssen übers Netz transportiert werden Nicht jeder hat DSL-Anschluß oder Hochleistungs-Standleitung 56K-Modem: maximal ~5 kbyte/s DSL (768 kbit/s): maximal ~75 kbyte/s 20 kb HTML-Seite mit 5 JPEG-Bildern à 10 kb = 70 kb...

50 Wie man ein guter Webdesigner wird Wie man ein guter Webdesigner wird Warm werden mit Web-Editoren, aber dann Finger weg von Dreamweaver, GoLive & Co.! Hände dreckig machen mit HTML Immer überall testen Beispiel an guten Sites nehmen PHP und JavaScript lernen Mübung macht den Eister *Fertich*

51 Quellen Quellen RRZN Hannover: Internet Eine Einführung in die Nutzung der Internet-Dienste selfhtml.teamone.de hotwired.lycos.com/webmonkey