internet und webdesign (historisches dokument)
DESCRIPTION
TRANSCRIPT
![Page 1: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/1.jpg)
Internet und Webdesign
Ein Referat von Eric Eggert
![Page 2: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/2.jpg)
Internet-Geschichte und Webtechnologie
Technologien, die im Internet verwendet werden sowie eine kurze Einführung in die Geschichte des Internets.
![Page 3: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/3.jpg)
Geschichte des Internets Basis: US-amerikanische
Militärtechnologie Wissenschaftliche Verwendung des
ARPA-Net zum Austausch von Forschungsergebnissen
Entwicklung des TCP/IP-Protokolls (Betriebssystem unabhängig)
Gründung des Usenet von Studenten
(1/3)
![Page 4: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/4.jpg)
Geschichte des Internets 80er-Jahre: Einführung des Begriffs
„Internet“ In Europa: Gründung von RARE
(Réseaux Associés pour la Recherche Européenne) zur durchsetzung von „ISO-Normen“, die sich aber nicht gegen TCP/IP durchsetzen konnten.
(2/3)
![Page 5: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/5.jpg)
Geschichte des Internets Gründung des „EuropaNET“ mit
verschiedenen nationalen Forschungsnetzen
Gründung der RIPE (Réseaux IP Européens)
(3/3)
![Page 6: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/6.jpg)
Dienste im Internet E-Mail Telnet und SSH File Transfer (FTP) Gopher Chat (IRC) Newsgroups (Usenet) World Wide Web (WWW)
![Page 7: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/7.jpg)
Geschichte des WWW Tim Berners-Lee entwickelt bis 1990 die
Grundzüge des World Wide Web. Erste Webseite: info.cern.ch an
Weihnachten 1990 Seine Idee: Jeder sollte Webseiten online
bearbeiten können, sofern der Autor der Webseite ein Schreibrecht vergab. Dies konnte sich aber nicht durchsetzen.
![Page 8: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/8.jpg)
3 Säulen des WWW
WWW
Hypertext
HTTP
UR
I
HTM
L
![Page 9: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/9.jpg)
HTTP(Hypertext Transfer Protocol)
WWW
Hypertext
HTTP
Das Hypertext Transfer Protocol ist eine Spezifikation für dieKommunikation zwischen Serverund Client (=Browser).
![Page 10: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/10.jpg)
URI(Universal Resource Identifier)
WWW
Hypertext
UR
I
Die URI ist eine Spezifikation fürdie Addressierung beliebigerDateien im Web und im übrigenInternet.Oft wird auch der Begriff URL(=Uniform Resource Locator)benutzt.
![Page 11: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/11.jpg)
Domain Name Service (DNS) Domains: Eindeutige Zuordnung eines
Namens zu einer IP-Adresse Beispiele:
csszengarden.com yatil.de strohhalm.org
TLD (Top-Level-Domains): .com, .net, .org, .edu .de, .at, .ch .info, .biz
![Page 12: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/12.jpg)
HTML(HyperText Markup Language)
WWW
Hypertext
HTM
L
HTML ist eine Spezifikation einer Auszeichnungssprache für Web-Dokumente.
![Page 13: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/13.jpg)
Geschichte des WWW Marc Andreessen entwickelte den
ersten Browser mit grafischer Oberfläche: „Mosaic“
Mitbegründer der Firma „Netscape“ (jetzt von AOL/TimeWarner geschluckt), da ihm das Mosaic-Projekt zu klein wurde
![Page 14: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/14.jpg)
Webtechnologien
![Page 15: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/15.jpg)
Grundsätzliche Einteilung
Server-seitige
AusführungHTML
Client-seitige
Ausführung
![Page 16: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/16.jpg)
ServerseitigeProgrammiersprachen Perl und CGI (Common Gateway
Interface), deren Mittel begrenzt sind. Deshalb entwicklung von Alternativen:
ASP (Active Server Pages), Microsoft-Format, meist auf Windows NT-Webservern (€)
PHP (Hypertext Preprocessor), meist auf Linux-/Unix-Servern, freies Format (kostenlos: http://www.php.net)
![Page 17: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/17.jpg)
PHP Einbettung direkt in HTML via <?php ... ?> -Tags
Beispiel:<?phpecho "Hallo Welt!";?>
Beim Benutzer kommt aber nur „Hallo Welt!“ an.
![Page 18: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/18.jpg)
ClientseitigeProgrammiersprache JavaScript (Java) hat sich gegen das
proprietäre VBScript (Microsoft) durchgesetzt
Unterstützt wird JS durch das Document Object Model (DOM), welches beschreibt, wie auf Elemente in (X)HTML-Dokumenten zugegriffen wird.
JavaScript eigentlich Netscape-Entwicklung, in Microsoft-Browsern JScript-Engine. Praktisch kein Unterschied.
![Page 19: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/19.jpg)
Plugins Programme, durch die andere Formate in
HTML-Dokumenten zugänglich gemacht werden kann
Arbeiten Clientseitig Vertreter
Flash (Macromedia) Java (Sun) ActiveX (nur Microsoft, Sicherheitslücke!)
![Page 20: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/20.jpg)
Fehler im Webdesign
An einem praktischen Beispiel Fehler aufgezeigt.
![Page 21: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/21.jpg)
Startseite
Ganz schlechter Titel!
Ganz hässlicher Schriftzug!
Ganz dummer Spruch!
![Page 22: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/22.jpg)
Startseite
![Page 23: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/23.jpg)
Klick...
Ganz schlechter Titel!
Frames!
![Page 24: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/24.jpg)
Und so sah’s 2001 aus...
3 Frames bedeutet:
3 HTML-Seiten,3 Head-Bereiche,3 Server-Anfragen
![Page 25: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/25.jpg)
Und so „sieht’s“ ein Blinder...
Nicht sehr aufschlussreich...
Auch nicht besser...
![Page 26: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/26.jpg)
Navigation Klick auf einen Navigationspunkt
ändert immer 2 Frames. Normalerweise funktioniert das per
JavaScript. Hier: Kompliziert, dafür auch bei
ausgeschaltetem JS bedienbar, durch Zusatzframe.
![Page 27: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/27.jpg)
Noch eine Version
Bescheidene Farbgebung!
Wieder Frames...
Imagemap als Navigation ist von Screen-readern so gut wie nicht zu entziffern
![Page 28: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/28.jpg)
Eine weitere Version
Alles in allem: Hässliches Design
Keine Frames!
Lustige (???) Gesichter...
![Page 29: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/29.jpg)
Layout-tabellen
Benutzen von unsichtbaren Tabellen als Gestaltungs-raster
18 (!!) Tabellenmit 83 (!!!) <td/>-Tags
Viel Bandbreite dadurch verschwendet...
![Page 30: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/30.jpg)
Layout-tabellen
Benutzen von unsichtbaren Tabellen als Gestaltungs-raster
Wesentlich weniger Tabellen!
![Page 31: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/31.jpg)
Vorteile vonWebstandards
Wieso Web-standards gut für das Internet sind und warum sie trotzdem so selten verwendet werden.
![Page 32: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/32.jpg)
Was sind Webstandards?
Sie sind Definitionen, wie Dateien im Internet aussehen sollen, um bei einer größtmöglichen Zahl an Internet-Nutzern den größtmöglichen Nutzen zu erzielen.
Sie sollen die Langlebigkeit von im Internet veröffentlichten Dokumenten sicherstellen.
![Page 33: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/33.jpg)
Wer definiert Webstandards?
Diese Technologien werden vom World Wide Web Consortium (W3C) und anderen Organisationen entwickelt und ausgebaut.
Das W3C ist eine Kommission, in der Vertreter aller Bereiche des Internet-Geschäfts zu finden sind. Diese finanzieren das W3C auch.
![Page 34: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/34.jpg)
Welche Webstandardsgibt es? Struktursprachen:
HTML 4 (HyperText Markup Language) XHTML 1.0 und 1.1 (eXtended HTML)
Präsentationssprachen: CSS Level 1 (Cascading Style Sheets) CSS Level 2 CSS Level 3
![Page 35: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/35.jpg)
Welche Webstandardsgibt es? Objektmodelle:
Document Object Model (DOM) Level 1 (Core) DOM Level 2
Scriptsprache: ECMAScript 262
Zusätzliche Präsentationssprachen: MathML 1.01 und 2.0 (Mathematical Markup
Language) SVG 1.0 (Scalable Vector Graphics)
„JavaScript“
![Page 36: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/36.jpg)
Die Auszeichnungssprache HTML HTML ist mittels SGML (Standard
Generalized Markup Language, ISO-Norm 8879) definiert
Mittlerweile: Redefinition mit dem XML-Standard XHTML
![Page 37: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/37.jpg)
Spezifikationen für (X)HTML HTML 1.0
Auszeichnungen für Standard-Elemente wie Überschriften, Textabsätze, für Grafikreferenzen und natürlich für Verweise
HTML 2.0Erster offizieller Sprachstandard 1995. Browser waren aber schon Meilenweit weiter, so unterstützte Netscape 2.0 bereits Frames und Multimedia-Referenzen
![Page 38: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/38.jpg)
Spezifikationen für (X)HTML HTML 3.2
Inoffizielle Version 3.0 ging an den Realitäten im Web vorbei, deshalb völlige Umarbeitung. Tabellen werden Standard und auch Tags zur physischen Textauszeichnung.Mittlerweile werden viele dieser Tags „deprecated“ (misbilligt). Diese werden durch CSS ersetzt.
![Page 39: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/39.jpg)
Spezifikationen für (X)HTML HTML 4.0
Zurückbesinnung auf eigentliche Aufgaben von HTML. Einführung von 3 Varianten: Strict, Transitional und Frameset
XHTML 1.0Erste neudefinition per XML. Kaum Veränderungen gegenüber HTML 4.0 außer dem Kennzeichnen von physischen Tags (font, i, u, b) als deprecated.
![Page 40: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/40.jpg)
Spezifikationen für (X)HTML XHTML 1.1
Konsequentes Fortsetzen der Reform. Rückbesinnung auf eine Version.
![Page 41: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/41.jpg)
Das Problem
Browserhersteller brachen die Standards
Dadurch: Fragmentierung des Internets
Schaden für:• Designer• Entwickler• Nutzer• Unternehmen
![Page 42: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/42.jpg)
Das Problem
Manche Webseiten konnten nicht aufgerufen werden, wenn man den falschen Browser benutzte.
Besonders betroffen: Behinderte Menschen und Menschen mit besonderen Bedürfnissen.
![Page 43: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/43.jpg)
Das Dilemma
Entweder: Entwickeln verschiedener Versionen
einer Seite für verschiedene Browser
Oder: Browser vernachlässigen und damit
Besucher und/oder Kunden zu verlieren.
Egal, wie die Entscheidung ausfällt: Der Preis ist zu hoch!
+25%
![Page 44: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/44.jpg)
Die Entwickler
Sie sahen keinen Sinn darin Standard-Webseiten zu erstellen, die kein Browser unterstützt.
Viele kannten die Standards so gut wie gar nicht.
(Dazu, dass auch heute Multi-Millionen-Dollar-Agenturen nicht in der Lage sind Standards zu benutzen kommen ich später.)
![Page 45: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/45.jpg)
Die Folgen
Entwickler setzten nur die ältesten und algemeingültigsten Web-Technologien ein (HTML 3.2 oder niedriger!)
Begrenzte Attraktivität undFunktionalität der Website.
![Page 46: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/46.jpg)
Die Folgen
Andere: WYSIWYG-Editoren oder Redaktionssysteme, die etliche Versionen an Markup und Code für jeden Browser generieren
Verschwendung von Geld und Bandbreite
Webseiten, die in der nächsten Browser-Generation nicht mehr laufen
Webseiten, die nicht in alternativen Browsern oder Endgeräten funktionieren
![Page 47: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/47.jpg)
Was dagegen tun?
![Page 48: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/48.jpg)
Das Web Standards Project
Gründung des WaSP: 1998Ziele:
Bekannt machen der grundlegenden Webstandards
Ermutigen der Browser-Hersteller Webstandards zu benutzen
Sicherstellen des mühelosen Zugangs zum Internet für jeden Nutzer
![Page 49: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/49.jpg)
Das Web Standards Project
Zunächst: Widerstand bei den Browser-Firmen
Dann: Durchsetzen mit Hilfe der Software-Ingenieure
![Page 50: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/50.jpg)
Das Web Standards Project
Seit 2000: Ein Browser nach dem anderen unterstützt Webstandards.
Das ermöglicht es Entwicklern Struktur und Design zu trennen um die Portabilität und den Zugang von behinderten zu verbessern.
!Mit Vorsicht können Designer und Ent-wickler sogar das standardisierte DOM ver-wenden um ihre Websites mit ausgefeilten interaktiven Komponenten auszustatten.
![Page 51: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/51.jpg)
Das Web Standards Projectgibt’s immer noch!
Zehntausende professionelle Webdesigner und Entwickler verwenden veraltete Methoden.
Struktur wird weiterhin an das Design gekettet, manchmal wird sogar die semantische Struktur ganz missachtet oder (X)HTML als Design-Werkzeug missbraucht.
![Page 52: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/52.jpg)
Das Web Standards Project
Hochbezahlte Fachleute produzieren weiterhin nicht-valide, unzugängliche Websites: Strukturell bedeutungsloses
Markup Riesige Image-Maps Maßlos verschachtelte Tabellen Überholte Browser-Detection-
Scripts
![Page 53: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/53.jpg)
Folgen nicht-validen Codes
Webseiten sehen in allen Browsern gleich aus und lassen sich gleich bedienen,
Aber: Die Webseiten sind viel „schwerer“ Redesigns werden effizienter und
schneller umzusetzen
![Page 54: Internet und Webdesign (Historisches Dokument)](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5457e893b1af9f33608b4ff0/html5/thumbnails/54.jpg)
Vorteile von Webstandards Seiten laden schneller
(Einsparungen von 30% und mehr!)
Webstandards helfen ein Corporate Design auf den Seiten durch-zuziehen und es schnell zu ändern
Seiten sind auf jedem Gerät und für jeden Benutzer erreichbar
-30%