Internet und Webdesign (Historisches Dokument)

54
Internet und Webdesign Ein Referat von Eric Eggert

description

 

Transcript of Internet und Webdesign (Historisches Dokument)

Page 1: Internet und Webdesign (Historisches Dokument)

Internet und Webdesign

Ein Referat von Eric Eggert

Page 2: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

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)

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)

3 Säulen des WWW

WWW

Hypertext

HTTP

UR

I

HTM

L

Page 9: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

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)

Webtechnologien

Page 15: Internet und Webdesign (Historisches Dokument)

Grundsätzliche Einteilung

Server-seitige

AusführungHTML

Client-seitige

Ausführung

Page 16: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

Fehler im Webdesign

An einem praktischen Beispiel Fehler aufgezeigt.

Page 21: Internet und Webdesign (Historisches Dokument)

Startseite

Ganz schlechter Titel!

Ganz hässlicher Schriftzug!

Ganz dummer Spruch!

Page 22: Internet und Webdesign (Historisches Dokument)

Startseite

Page 23: Internet und Webdesign (Historisches Dokument)

Klick...

Ganz schlechter Titel!

Frames!

Page 24: Internet und Webdesign (Historisches Dokument)

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)

Und so „sieht’s“ ein Blinder...

Nicht sehr aufschlussreich...

Auch nicht besser...

Page 26: Internet und Webdesign (Historisches Dokument)

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)

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)

Eine weitere Version

Alles in allem: Hässliches Design

Keine Frames!

Lustige (???) Gesichter...

Page 29: Internet und Webdesign (Historisches Dokument)

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)

Layout-tabellen

Benutzen von unsichtbaren Tabellen als Gestaltungs-raster

Wesentlich weniger Tabellen!

Page 31: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

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)

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)

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)

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)

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)

Spezifikationen für (X)HTML XHTML 1.1

Konsequentes Fortsetzen der Reform. Rückbesinnung auf eine Version.

Page 41: Internet und Webdesign (Historisches Dokument)

Das Problem

Browserhersteller brachen die Standards

Dadurch: Fragmentierung des Internets

Schaden für:• Designer• Entwickler• Nutzer• Unternehmen

Page 42: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

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)

Was dagegen tun?

Page 48: Internet und Webdesign (Historisches Dokument)

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)

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)

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)

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)

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)

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)

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%