Internet und Webdesign        Ein Referat von Eric        Eggert
Internet-Geschichteund Webtechnologie     Technologien, die im     Internet verwendet     werden sowie eine     kurze Einf...
Geschichte des Internets   Basis: US-amerikanische    Militärtechnologie   Wissenschaftliche Verwendung des    ARPA-Net ...
Geschichte des Internets 80er-Jahre: Einführung des Begriffs  „Internet“ In Europa: Gründung von RARE  (Réseaux Associés...
Geschichte des Internets Gründung des „EuropaNET“ mit  verschiedenen nationalen  Forschungsnetzen Gründung der RIPE (Rés...
Dienste im Internet E-Mail Telnet und SSH File Transfer (FTP) Gopher Chat (IRC) Newsgroups (Usenet) World Wide Web ...
Geschichte des WWW   Tim Berners-Lee entwickelt bis 1990 die    Grundzüge des World Wide Web.   Erste Webseite: info.cer...
3 Säulen des WWW           WWW                      HTML   HTTP              URI          Hypertext
HTTP(Hypertext Transfer Protocol)                  WWW            Das Hypertext Transfer Protocol            ist eine Spez...
URI(Universal Resource Identifier)                   WWW            Die URI ist eine Spezifikation für            die Addr...
Domain Name Service(DNS)   Domains: Eindeutige Zuordnung eines    Namens zu einer IP-Adresse   Beispiele:       csszeng...
HTML(HyperText Markup Language)                 WWW           HTML ist eine Spezifikation           einer Auszeichnungsspr...
Geschichte des WWW Marc Andreessen entwickelte den  ersten Browser mit grafischer  Oberfläche: „Mosaic“ Mitbegründer der...
Webtechnologien
Grundsätzliche Einteilung   Server-             Client-   seitige    HTML     seitige Ausführung          Ausführung
ServerseitigeProgrammiersprachen   Perl und CGI (Common Gateway    Interface), deren Mittel begrenzt sind.    Deshalb ent...
PHP Einbettung direkt in HTML via  <?php ... ?> -Tags Beispiel:  <?php  echo "Hallo Welt!";  ?> Beim Benutzer kommt abe...
ClientseitigeProgrammiersprache   JavaScript (≠Java) hat sich gegen das    proprietäre VBScript (Microsoft)    durchgeset...
Plugins   Programme, durch die andere Formate in    HTML-Dokumenten zugänglich gemacht    werden kann   Arbeiten Clients...
Fehler im Webdesign     An einem     praktischen Beispiel     Fehler aufgezeigt.
StartseiteGanz schlechterTitel!Ganz hässlicherSchriftzug!Ganz dummerSpruch!
Startseite             
Klick...Ganz schlechterTitel!Frames!
Und so sah’s 2001 aus...3 Framesbedeutet:3 HTML-Seiten,3 Head-Bereiche,3 Server-Anfragen
Und so „sieht’s“ ein      Blinder...Nicht sehraufschlussreich...Auch nichtbesser...
Navigation Klick auf einen Navigationspunkt  ändert immer 2 Frames. Normalerweise funktioniert das per  JavaScript. Hie...
Noch eine VersionBescheideneFarbgebung!Wieder Frames...Imagemap alsNavigation istvon Screen-readern so gutwie nicht zuentz...
Eine weitere VersionAlles in allem:HässlichesDesignKeine Frames!Lustige (???)Gesichter...
Layout-tabellenBenutzen vonunsichtbarenTabellen alsGestaltungs-raster18 (!!) Tabellenmit 83 (!!!)<td/>-TagsViel Bandbreite...
Layout-tabellenBenutzen vonunsichtbarenTabellen alsGestaltungs-rasterWesentlichwenigerTabellen!
Vorteile von WebstandardsWieso Web-standards gut fürdas Internet sindund warum sietrotzdem so seltenverwendet werden.
Was sindWebstandards?Sie sind Definitionen, wie Dateien im  Internet aussehen sollen, um bei  einer größtmöglichen Zahl an...
Wer definiertWebstandards?Diese Technologien werden vom World Wide Web Consortium (W3C) und anderen Organisationen entwick...
Welche Webstandardsgibt es?   Struktursprachen:     HTML 4 (HyperText Markup Language)     XHTML 1.0 und 1.1 (eXtended ...
Welche Webstandardsgibt es?   Objektmodelle:    Document Object Model (DOM) Level 1 (Core)       DOM Level 2           ...
Die AuszeichnungsspracheHTML HTML ist mittels SGML (Standard  Generalized Markup Language, ISO-  Norm 8879) definiert Mi...
Spezifikationen für (X)HTML   HTML 1.0    Auszeichnungen für Standard-Elemente    wie Überschriften, Textabsätze, für    ...
Spezifikationen für (X)HTML   HTML 3.2    Inoffizielle Version 3.0 ging an den    Realitäten im Web vorbei, deshalb    vö...
Spezifikationen für (X)HTML   HTML 4.0    Zurückbesinnung auf eigentliche    Aufgaben von HTML. Einführung von 3    Varia...
Spezifikationen für (X)HTML   XHTML 1.1    Konsequentes Fortsetzen der    Reform. Rückbesinnung auf eine    Version.
Das ProblemBrowserhersteller brachen die StandardsDadurch: Fragmentierung des InternetsSchaden für:    • Designer    • Ent...
Das ProblemManche Webseiten konnten nicht aufgerufen werden, wenn man den falschen Browser benutzte.Besonders betroffen: B...
Das DilemmaEntweder:     Entwickeln verschiedener Versionen      einer Seite für verschiedene BrowserOder:     Browser v...
Die EntwicklerSie sahen keinen Sinn darin Standard-  Webseiten zu erstellen, die kein  Browser unterstützt.Viele kannten d...
Die FolgenEntwickler setzten nur die ältesten und algemeingültigsten Web- Technologien ein (HTML 3.2 oder niedriger!)    B...
Die FolgenAndere: WYSIWYG-Editoren oder Redaktionssysteme, die etliche Versionen an Markup und Code für jeden Browser gene...
Was dagegen tun?
Das Web Standards Project   Gründung des WaSP: 1998   Ziele:      Bekannt machen der       grundlegenden Webstandards    ...
Das Web Standards Project   Zunächst: Widerstand bei den    Browser-Firmen   Dann: Durchsetzen mit Hilfe der    Software-I...
Das Web Standards Project    Seit 2000: Ein Browser nach dem     anderen unterstützt Webstandards.    Das ermöglicht es En...
Das Web Standards Projectgibt’s immer noch!   Zehntausende professionelle     Webdesigner und Entwickler     verwenden ver...
Das Web Standards Project   Hochbezahlte Fachleute    produzieren weiterhin nicht-    valide, unzugängliche    Websites:  ...
Folgen nicht-validen CodesWebseiten sehen in allen Browsern gleich aus und lassen sich gleich bedienen,Aber:   Die Websei...
Vorteile von Webstandards Seiten laden schneller  (Einsparungen von          -30%  30% und mehr!) Webstandards helfen ei...
Nächste SlideShare
Wird geladen in …5
×

Internet und Webdesign (Historisches Dokument)

1.109 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.109
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
49
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Internet und Webdesign (Historisches Dokument)

  1. 1. Internet und Webdesign Ein Referat von Eric Eggert
  2. 2. Internet-Geschichteund Webtechnologie Technologien, die im Internet verwendet werden sowie eine kurze Einführung in die Geschichte des Internets.
  3. 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. 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. 5. Geschichte des Internets Gründung des „EuropaNET“ mit verschiedenen nationalen Forschungsnetzen Gründung der RIPE (Réseaux IP Européens) (3/3)
  6. 6. Dienste im Internet E-Mail Telnet und SSH File Transfer (FTP) Gopher Chat (IRC) Newsgroups (Usenet) World Wide Web (WWW)
  7. 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. 8. 3 Säulen des WWW WWW HTML HTTP URI Hypertext
  9. 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. 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. 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. 12. HTML(HyperText Markup Language) WWW HTML ist eine Spezifikation einer Auszeichnungssprache für Web-Dokumente. HTML Hypertext
  13. 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
  14. 14. Webtechnologien
  15. 15. Grundsätzliche Einteilung Server- Client- seitige HTML seitige Ausführung Ausführung
  16. 16. 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)
  17. 17. PHP Einbettung direkt in HTML via <?php ... ?> -Tags Beispiel: <?php echo "Hallo Welt!"; ?> Beim Benutzer kommt aber nur „Hallo Welt!“ an.
  18. 18. 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.
  19. 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. 20. Fehler im Webdesign An einem praktischen Beispiel Fehler aufgezeigt.
  21. 21. StartseiteGanz schlechterTitel!Ganz hässlicherSchriftzug!Ganz dummerSpruch!
  22. 22. Startseite 
  23. 23. Klick...Ganz schlechterTitel!Frames!
  24. 24. Und so sah’s 2001 aus...3 Framesbedeutet:3 HTML-Seiten,3 Head-Bereiche,3 Server-Anfragen
  25. 25. Und so „sieht’s“ ein Blinder...Nicht sehraufschlussreich...Auch nichtbesser...
  26. 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. 27. Noch eine VersionBescheideneFarbgebung!Wieder Frames...Imagemap alsNavigation istvon Screen-readern so gutwie nicht zuentziffern
  28. 28. Eine weitere VersionAlles in allem:HässlichesDesignKeine Frames!Lustige (???)Gesichter...
  29. 29. Layout-tabellenBenutzen vonunsichtbarenTabellen alsGestaltungs-raster18 (!!) Tabellenmit 83 (!!!)<td/>-TagsViel Bandbreitedadurchverschwendet...
  30. 30. Layout-tabellenBenutzen vonunsichtbarenTabellen alsGestaltungs-rasterWesentlichwenigerTabellen!
  31. 31. Vorteile von WebstandardsWieso Web-standards gut fürdas Internet sindund warum sietrotzdem so seltenverwendet werden.
  32. 32. Was sindWebstandards?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. 33. Wer definiertWebstandards?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. 34. 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
  35. 35. Welche Webstandardsgibt 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. 36. Die AuszeichnungsspracheHTML HTML ist mittels SGML (Standard Generalized Markup Language, ISO- Norm 8879) definiert Mittlerweile: Redefinition mit dem XML-Standard  XHTML
  37. 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. 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. 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. 40. Spezifikationen für (X)HTML XHTML 1.1 Konsequentes Fortsetzen der Reform. Rückbesinnung auf eine Version.
  41. 41. Das ProblemBrowserhersteller brachen die StandardsDadurch: Fragmentierung des InternetsSchaden für: • Designer • Entwickler • Nutzer • Unternehmen
  42. 42. Das ProblemManche Webseiten konnten nicht aufgerufen werden, wenn man den falschen Browser benutzte.Besonders betroffen: Behinderte Menschen und Menschen mit besonderen Bedürfnissen.
  43. 43. Das DilemmaEntweder:  Entwickeln verschiedener Versionen einer Seite für verschiedene BrowserOder:  Browser vernachlässigen und damit Besucher und/oder Kunden zu verlieren.Egal, wie die Entscheidung ausfällt: Der Preis ist zu hoch! % +25
  44. 44. Die EntwicklerSie 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. 45. Die FolgenEntwickler setzten nur die ältesten und algemeingültigsten Web- Technologien ein (HTML 3.2 oder niedriger!) Begrenzte Attraktivität und Funktionalität der Website.
  46. 46. Die FolgenAndere: 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
  47. 47. Was dagegen tun?
  48. 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. 49. Das Web Standards Project Zunächst: Widerstand bei den Browser-Firmen Dann: Durchsetzen mit Hilfe der Software-Ingenieure
  50. 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. 51. 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.
  52. 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. 53. Folgen nicht-validen CodesWebseiten sehen in allen Browsern gleich aus und lassen sich gleich bedienen,Aber:  Die Webseiten sind viel „schwerer“  Redesigns werden effizienter und schneller umzusetzen
  54. 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

×