Internet und Webdesign

Ein Referat von Eric Eggert

Internet-Geschichte und Webtechnologie

Technologien, die im Internet verwendet werden sowie eine kurze Einführung in die Geschichte des Internets.

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)

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)

Geschichte des Internets Gründung des „EuropaNET“ mit

verschiedenen nationalen Forschungsnetzen

Gründung der RIPE (Réseaux IP Européens)

(3/3)

Dienste im Internet E-Mail Telnet und SSH File Transfer (FTP) Gopher Chat (IRC) Newsgroups (Usenet) World Wide Web (WWW)

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.

3 Säulen des WWW

WWW

Hypertext

HTTP

UR

I

HTM

L

HTTP(Hypertext Transfer Protocol)

WWW

Hypertext

HTTP

Das Hypertext Transfer Protocol ist eine Spezifikation für dieKommunikation zwischen Serverund Client (=Browser).

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.

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

HTML(HyperText Markup Language)

WWW

Hypertext

HTM

L

HTML ist eine Spezifikation einer Auszeichnungssprache für Web-Dokumente.

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

Webtechnologien

Grundsätzliche Einteilung

Server-seitige

AusführungHTML

Client-seitige

Ausführung

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)

PHP Einbettung direkt in HTML via <?php ... ?> -Tags

Beispiel:<?phpecho "Hallo Welt!";?>

Beim Benutzer kommt aber nur „Hallo Welt!“ an.

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.

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!)

Fehler im Webdesign

An einem praktischen Beispiel Fehler aufgezeigt.

Startseite

Ganz schlechter Titel!

Ganz hässlicher Schriftzug!

Ganz dummer Spruch!

Startseite

Klick...

Ganz schlechter Titel!

Frames!

Und so sah’s 2001 aus...

3 Frames bedeutet:

3 HTML-Seiten,3 Head-Bereiche,3 Server-Anfragen

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

Nicht sehr aufschlussreich...

Auch nicht besser...

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.

Noch eine Version

Bescheidene Farbgebung!

Wieder Frames...

Imagemap als Navigation ist von Screen-readern so gut wie nicht zu entziffern

Eine weitere Version

Alles in allem: Hässliches Design

Keine Frames!

Lustige (???) Gesichter...

Layout-tabellen

Benutzen von unsichtbaren Tabellen als Gestaltungs-raster

18 (!!) Tabellenmit 83 (!!!) <td/>-Tags

Viel Bandbreite dadurch verschwendet...

Layout-tabellen

Benutzen von unsichtbaren Tabellen als Gestaltungs-raster

Wesentlich weniger Tabellen!

Vorteile vonWebstandards

Wieso Web-standards gut für das Internet sind und warum sie trotzdem so selten verwendet werden.

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.

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.

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

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“

Die Auszeichnungssprache HTML HTML ist mittels SGML (Standard

Generalized Markup Language, ISO-Norm 8879) definiert

Mittlerweile: Redefinition mit dem XML-Standard XHTML

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

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.

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.

Spezifikationen für (X)HTML XHTML 1.1

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

Das Problem

Browserhersteller brachen die Standards

Dadurch: Fragmentierung des Internets

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

Das Problem

Manche Webseiten konnten nicht aufgerufen werden, wenn man den falschen Browser benutzte.

Besonders betroffen: Behinderte Menschen und Menschen mit besonderen Bedürfnissen.

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%

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

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.

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

Was dagegen tun?

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

Das Web Standards Project

Zunächst: Widerstand bei den Browser-Firmen

Dann: Durchsetzen mit Hilfe der Software-Ingenieure

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.

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.

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

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

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%