SlideShare ist ein Scribd-Unternehmen logo
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




                      HTML
   HTTP




              URI



          Hypertext
HTTP
(Hypertext Transfer Protocol)


                  WWW

            Das Hypertext Transfer Protocol
            ist eine Spezifikation für die
            Kommunikation zwischen Server
     HTTP




            und Client (=Browser).




                Hypertext
URI
(Universal Resource Identifier)


                   WWW

            Die URI ist eine Spezifikation für
            die Addressierung beliebiger
            Dateien im Web und im übrigen
      URI




            Internet.
            Oft wird auch der Begriff URL
            (=Uniform Resource Locator)
            benutzt.
                 Hypertext
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

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




                Hypertext
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-             Client-
   seitige    HTML     seitige
 Ausführung          Ausführung
Serverseitige
Programmiersprachen
   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:
  <?php
  echo "Hallo Welt!";
  ?>
 Beim Benutzer kommt aber nur
  „Hallo Welt!“ an.
Clientseitige
Programmiersprache
   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 (!!) Tabellen
mit 83 (!!!)
<td/>-Tags

Viel Bandbreite
dadurch
verschwendet...
Layout-
tabellen
Benutzen von
unsichtbaren
Tabellen als
Gestaltungs-
raster

Wesentlich
weniger
Tabellen!
Vorteile von
 Webstandards
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 Webstandards
gibt 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 Webstandards
gibt es?
   Objektmodelle:
    Document Object Model (DOM) Level 1 (Core)
    

   DOM Level 2
                                  t“
                             crip
                        avaS
 Scriptsprache:
                      „J
   ECMAScript 262

   Zusätzliche Präsentationssprachen:
       MathML 1.01 und 2.0 (Mathematical Markup
        Language)
       SVG 1.0 (Scalable Vector Graphics)
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.0
    Erster 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.0
    Erste 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 und
    Funktionalitä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: 1998
   Ziele:
      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 Project
gibt’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%
  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

Weitere ähnliche Inhalte

Ähnlich wie Internet und Webdesign (Historisches Dokument)

1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
Ulrich Krause
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
Jürg Stuker
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Plone im Kontext des WCMS Marktes
Plone im Kontext des WCMS MarktesPlone im Kontext des WCMS Marktes
Plone im Kontext des WCMS Marktes
Alexander Loechel
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
Ulrich Krause
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
Claus Brell
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
Peter Micheuz
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
Christian Hauschke
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
Ulrich Krause
 
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher SoftwareEinsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher SoftwareAndreas Schreiber
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
Ulrich Krause
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
 
Das Internet
Das InternetDas Internet

Ähnlich wie Internet und Webdesign (Historisches Dokument) (20)

1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Plone im Kontext des WCMS Marktes
Plone im Kontext des WCMS MarktesPlone im Kontext des WCMS Marktes
Plone im Kontext des WCMS Marktes
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher SoftwareEinsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
Das Internet
Das InternetDas Internet
Das Internet
 

Mehr von Eric Eggert

ARIA Serious
ARIA SeriousARIA Serious
ARIA Serious
Eric Eggert
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
Eric Eggert
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
Eric Eggert
 
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
Eric Eggert
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
Eric Eggert
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWG
Eric Eggert
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0
Eric Eggert
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15
Eric Eggert
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web Accessibility
Eric Eggert
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Eric Eggert
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with Notes
Eric Eggert
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notes
Eric Eggert
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Eric Eggert
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web Design
Eric Eggert
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Eric Eggert
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Eric Eggert
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Eric Eggert
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnEric Eggert
 
HTML5 Fragen und Antworten
HTML5 Fragen und AntwortenHTML5 Fragen und Antworten
HTML5 Fragen und AntwortenEric Eggert
 

Mehr von Eric Eggert (20)

ARIA Serious
ARIA SeriousARIA Serious
ARIA Serious
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWG
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web Accessibility
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with Notes
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notes
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web Design
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus Pixeln
 
HTML5 Fragen und Antworten
HTML5 Fragen und AntwortenHTML5 Fragen und Antworten
HTML5 Fragen und Antworten
 

Internet und Webdesign (Historisches Dokument)

  • 1. Internet und Webdesign Ein Referat von Eric Eggert
  • 2. Internet-Geschichte und Webtechnologie Technologien, die im Internet verwendet werden sowie eine kurze Einführung in die Geschichte des Internets.
  • 3. 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)
  • 4. 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)
  • 5. Geschichte des Internets  Gründung des „EuropaNET“ mit verschiedenen nationalen Forschungsnetzen  Gründung der RIPE (Réseaux IP Européens) (3/3)
  • 6. Dienste im Internet  E-Mail  Telnet und SSH  File Transfer (FTP)  Gopher  Chat (IRC)  Newsgroups (Usenet)  World Wide Web (WWW)
  • 7. 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.
  • 8. 3 Säulen des WWW WWW HTML HTTP URI Hypertext
  • 9. HTTP (Hypertext Transfer Protocol) WWW Das Hypertext Transfer Protocol ist eine Spezifikation für die Kommunikation zwischen Server HTTP und Client (=Browser). Hypertext
  • 10. URI (Universal Resource Identifier) WWW Die URI ist eine Spezifikation für die Addressierung beliebiger Dateien im Web und im übrigen URI Internet. Oft wird auch der Begriff URL (=Uniform Resource Locator) benutzt. Hypertext
  • 11. 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
  • 12. HTML (HyperText Markup Language) WWW HTML ist eine Spezifikation einer Auszeichnungssprache für Web-Dokumente. HTML Hypertext
  • 13. 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
  • 15. Grundsätzliche Einteilung Server- Client- seitige HTML seitige Ausführung Ausführung
  • 16. Serverseitige Programmiersprachen  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)
  • 17. PHP  Einbettung direkt in HTML via <?php ... ?> -Tags  Beispiel: <?php echo "Hallo Welt!"; ?>  Beim Benutzer kommt aber nur „Hallo Welt!“ an.
  • 18. Clientseitige Programmiersprache  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.
  • 19. 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!)
  • 20. Fehler im Webdesign An einem praktischen Beispiel Fehler aufgezeigt.
  • 22. Startseite
  • 24. Und so sah’s 2001 aus... 3 Frames bedeutet: 3 HTML-Seiten, 3 Head-Bereiche, 3 Server- Anfragen
  • 25. Und so „sieht’s“ ein Blinder... Nicht sehr aufschlussreich... Auch nicht besser...
  • 26. 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.
  • 27. Noch eine Version Bescheidene Farbgebung! Wieder Frames... Imagemap als Navigation ist von Screen- readern so gut wie nicht zu entziffern
  • 28. Eine weitere Version Alles in allem: Hässliches Design Keine Frames! Lustige (???) Gesichter...
  • 29. Layout- tabellen Benutzen von unsichtbaren Tabellen als Gestaltungs- raster 18 (!!) Tabellen mit 83 (!!!) <td/>-Tags Viel Bandbreite dadurch verschwendet...
  • 31. Vorteile von Webstandards Wieso Web- standards gut für das Internet sind und warum sie trotzdem so selten verwendet werden.
  • 32. 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.
  • 33. 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.
  • 34. Welche Webstandards gibt 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
  • 35. Welche Webstandards gibt es?  Objektmodelle: Document Object Model (DOM) Level 1 (Core)   DOM Level 2 t“ crip avaS  Scriptsprache: „J  ECMAScript 262  Zusätzliche Präsentationssprachen:  MathML 1.01 und 2.0 (Mathematical Markup Language)  SVG 1.0 (Scalable Vector Graphics)
  • 36. Die Auszeichnungssprache HTML  HTML ist mittels SGML (Standard Generalized Markup Language, ISO- Norm 8879) definiert  Mittlerweile: Redefinition mit dem XML-Standard  XHTML
  • 37. 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.0 Erster offizieller Sprachstandard 1995. Browser waren aber schon Meilenweit weiter, so unterstützte Netscape 2.0 bereits Frames und Multimedia- Referenzen
  • 38. 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.
  • 39. 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.0 Erste neudefinition per XML. Kaum Veränderungen gegenüber HTML 4.0 außer dem Kennzeichnen von physischen Tags (font, i, u, b) als deprecated.
  • 40. Spezifikationen für (X)HTML  XHTML 1.1 Konsequentes Fortsetzen der Reform. Rückbesinnung auf eine Version.
  • 41. Das Problem Browserhersteller brachen die Standards Dadurch: Fragmentierung des Internets Schaden für: • Designer • Entwickler • Nutzer • Unternehmen
  • 42. Das Problem Manche Webseiten konnten nicht aufgerufen werden, wenn man den falschen Browser benutzte. Besonders betroffen: Behinderte Menschen und Menschen mit besonderen Bedürfnissen.
  • 43. 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
  • 44. 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.)
  • 45. Die Folgen Entwickler setzten nur die ältesten und algemeingültigsten Web- Technologien ein (HTML 3.2 oder niedriger!) Begrenzte Attraktivität und Funktionalität der Website.
  • 46. 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
  • 48. Das Web Standards Project Gründung des WaSP: 1998 Ziele:  Bekannt machen der grundlegenden Webstandards  Ermutigen der Browser-Hersteller Webstandards zu benutzen  Sicherstellen des mühelosen Zugangs zum Internet für jeden Nutzer
  • 49. Das Web Standards Project Zunächst: Widerstand bei den Browser-Firmen Dann: Durchsetzen mit Hilfe der Software-Ingenieure
  • 50. 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.
  • 51. Das Web Standards Project gibt’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.
  • 52. 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
  • 53. 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
  • 54. Vorteile von Webstandards  Seiten laden schneller (Einsparungen von -30% 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