© 2008 TravelTainment The Amadeus Leisure Group HTML 5 und CSS 3 – Fortschritt oder Hype? Seminarvortrag Henry Ziegelmann 17. Dezember Betreuer: Herr Hon.-Prof. Dr. H. J. Pflug 2. Betreuer: Herr Dipl.-Math. (FH) Uli Schmidt

© 2008 TravelTainment The Amadeus Leisure Group 2 Inhalt  Motivation  Begriffe  Historie  Hintergründe  HTML  JS  CSS  Beispiel  Fazit  Fragen

© 2008 TravelTainment The Amadeus Leisure Group 3 Motivation  neue Standards in Entwicklung  versprechen Verbesserungen und neue Möglichkeiten  dadurch ggfs. Einsparung vieler Arbeitsstunden  Ist dem wirklich so? Antwort auf folgenden Folien …

© 2008 TravelTainment The Amadeus Leisure Group 4 Wichtige Begriffe  HTML  HyperText Markup Language  Auszeichnungssprache zur textbasierten Strukturierung von Texten, Tabellen, Bildern, uvm.  JS  JavaScript  dient zur Manipulation von Webseiten in einem Browser  CSS  Cascading Style Sheets  deklarierende Stylesheet-Sprache zur Dokumentstrukturierung

© 2008 TravelTainment The Amadeus Leisure Group 5 Historie  HTML  erste Erwähnung 1989 durch Tim Berners-Lee  1991 HTML 1  zunächst nur Textdarstellung und Bildintegration  aktuelle Version (4.01) von 1999  11 Jahre alter Standard vs. sich schnell entwickelnde Internet (Web 2.0 z.B.)  JS  erste Version 1995  aktuelle Version (1.8) von 2008  CSS  erste Gedanken 1993  1996 Level 1  aktuelle Level (2.1) von 2002  8 Jahre alter Standard  z.T. bis heute nicht in allen Browsern vollständig implementiert

© 2008 TravelTainment The Amadeus Leisure Group 6 Hintergründe  Was ist HTML 5?  Verbund aus HTML selbst, JS und CSS  Wer steckt dahinter?  Kooperation aus:  World Wide Web Consortium (W3C)  XHTML 2  Web Hypertext Application Technology Working Group (WHATWG)  Web Forms  Wie lauten die Ziele?  einheitliches Verhalten (Geräteunabhängigkeit)  Verzicht auf externe Plugins  Aufwandsminimierung (neue Tags, Selektoren, etc.)

© 2008 TravelTainment The Amadeus Leisure Group 7 HTML  Doctype  Festlegung Dokumententyp (Anwendung Spezifikation)  bei Version 4.01 drei schwer zu merkende Varianten wie:   jetzt: 

© 2008 TravelTainment The Amadeus Leisure Group 8 HTML II  Tags zur Strukturierung  statt Div-Container (früher auch Tabellen und Frames)  beschreibt Inhalt  neue Tags (Auszug): TagBeschreibung Dokumentunterteilung in einzelne Abschnitte Dokumenten-/Sektionsanfang; kann u.a. Überschriften enthalten Kennzeichnet Text, z.B. aus Blog Dokumenten-/Sektionsende; kann z.B. Copyrightinfos enthalten

© 2008 TravelTainment The Amadeus Leisure Group 9 HTML III  Audio und Video  Vermeidung Plugins wie Flash  deren Nachteil der fehlenden Verfügbarkeit egalisiert  Standard zur Einbindung solcher Medien  Codecs zur Wiedergabe werden standardmäßig bereitgestellt  Tags:   „alte“ Einbindungsweise (z.B. wegen speziellen Codecs) dennoch möglich

© 2008 TravelTainment The Amadeus Leisure Group 10 HTML IV  Web Forms 2  wesentlicher Teil Neuerungen in HTML 5  Elemente (Auszug):  Input-Typen (Auszug): datalistspezifiziert Liste von Optionen für Input-Feld, d.h. definiert Auswahl- bzw. Eingabemöglichkeiten outputElement zur reinen Ausgabe, z.B. nach Berechnungen für -Adressen numberfür numerische Werte rangefür Werte aus Zahlenintervall

© 2008 TravelTainment The Amadeus Leisure Group 11 HTML V  Input-Attribute (Auszug): min, max, stepEinschränkung möglicher Eingabewerte hinsichtlich Gültigkeitsbereich und Schrittweite (nur bei number, range und date) patternbeim Versenden des Formulars wird Eingabe mit vermerkten regulären Ausdruck geprüft placeholderStandardtext innerhalb Eingabefeld (so lange bis dieses editiert wird) requiredverhindert Absenden eines Formulars, wenn entsprechende Eingabefeld nicht ausgefüllt (required="required")

© 2008 TravelTainment The Amadeus Leisure Group 12 HTML – Zusammenfassung  einfachere DocType-Notation  neue Strukturierungsmöglichkeiten  weitestgehende Vermeidung Plugins für Medienwiedergabe  neue Formularelemente, Eingabeattribute und –Typen

© 2008 TravelTainment The Amadeus Leisure Group 13 JS  neue Selektoren  Auswahl von Elementen mit gleichen Merkmalen  document.getElementsByClassName("klassenname")  alle Elemente mit übereinstimmender CSS-Klasse  document.querySelectorAll("div.klassenname")  alle Elemente mit übereinstimmenden Eigenschaften  im Beispiel alle Div-Container mit CSS-Klasse „klassenname“  Drag & Drop  erstmals native Unterstützung  ermöglicht Elemente auf Webseite zu bewegen

© 2008 TravelTainment The Amadeus Leisure Group 14 JS II  Web Storage  clientseitige Datenspeicherung  2 Varianten:  localStorage  persistente Datenspeicherung  sessionStorage  Datenspeicherung nur für aktuelle Session  bislang Realisierung durch Cookies  dabei nur kleine Datenmengen (KB-Bereich) speicherbar  werden bei jeder Serveranfrage mitgesendet  Performanceverlust  Vorteile:  ständige Mitsenden bei Web Storage nicht mehr nötig (aber möglich)  Vorgehen „crash safe“ (nach Browser-Absturz Daten vorhanden)  Nachteile:  Daten können überschrieben werden (gleicher Variablenname)  Daten müssen an Server gesendet werden, wenn Weiternutzung mit anderem Browser / Rechner gewünscht

© 2008 TravelTainment The Amadeus Leisure Group 15 JS III  Web SQL Database  clientseitige Datenspeicherung  Nutzung von Structured Query Language (SQL)  damit komplexere Verarbeitung von lokalen Daten möglich  z.B. Sortieren  Entlastung Server durch lokale Auslagerung der Daten  Web Workers  multithreaded JS  Auslagerung rechenintensiver Aufgaben (insbes. durch JS)  kein „Einfrieren“ Browser

© 2008 TravelTainment The Amadeus Leisure Group 16 JS - Zusammenfassung  neue Selektoren verkürzen JS-Quellcode  „bewegliche“ Webseiten  Elemente einer Webseite können beliebig angeordnet werden  jedem seine Seite  lokale Datenspeicherung bringt Serverentlastung  SQL-gestützte Operationen  multithreaded JS

© 2008 TravelTainment The Amadeus Leisure Group 17 CSS  Selektoren  neue Selektoren (Auszug):  z.B.:  div:not(.klassenname) { }  a[href^="mailto:"] { } SelektorBeschreibung E[foo^="bar"], E[foo$="bar"] selektiert alle Elemente, dessen Attribut ("foo") mit Wert "bar" beginnt ("^") oder endet ("$") E:nth-child(n), E:nth-lastchild(n) wählt n-te Kind-Element aus (Zählung beginnend am Anfang oder Ende) E:not(s)Negation

© 2008 TravelTainment The Amadeus Leisure Group 18 CSS II  eigene Schriften  jeder Browser nutzt Standardschriftarten (Arial, Courier, Times New Roman)  nicht vorhandene werden durch ähnliche ersetzt  daraus folgen 2 Nachteile:  unsaubere Darstellung beim Einsatz Ersatzschriftart (da Webseite nicht für diese optimiert)  Einschränkungen hinsichtlich Gestaltungsmöglichkeiten  jetzt neu:   { src: url("Pfad/zur/Schriftart.ttf"); font-family: meineSchriftart; }  Benutzung:  font-family: meineSchriftart, Arial;

© 2008 TravelTainment The Amadeus Leisure Group 19 CSS III  Visualisierung  abgerundete Ecken  bislang nur mit Bildern für alle Browser einheitlich umsetzbar  border-radius  Schatten  ebenfalls Bilder, aber auch durch gestapelte Div-Container  Nachteil: Aufwand  text-shadow  box-shadow

© 2008 TravelTainment The Amadeus Leisure Group 20 CSS IV  Spiegelungen  ebenfalls durch Bilder  box-reflect  Transformierungen  Elemente rotieren lassen, etc.  transform, rotate(), skew()

© 2008 TravelTainment The Amadeus Leisure Group 21 CSS - Zusammenfassung  einfacherer Selektierung von Elementen gleicher Merkmale  Einbindung eigener Schriftarten möglich  visuell ansprechendere Designs ohne Mehraufwand (Spiegelungen, Schatten, etc.)  neue Gestaltungsmöglichkeiten mittels Transformierungen

© 2008 TravelTainment The Amadeus Leisure Group 22 Beispiel  Minimalbeispiel zu HTML 5 und CSS 3  Erstellung Bewertungsformular  mit Namen, , …  Warum Formular?  Formulare nahezu auf jeder Webseite  Web Forms 2  vielversprechende Änderungen

© 2008 TravelTainment The Amadeus Leisure Group 23 Beispiel II  CSS-Part – layout.css  "UTF-8";  eigene { src: url("TrashHand.ttf"); font-family: TrashHand; } body { font-family: TrashHand, Arial; }  Div-Container (des Formulars) #border { background: #EEE; border-radius: 20px; box-shadow: 5px 5px 10px #AAA; transform: rotate(-5deg ) skew(-5deg, -5deg); }

© 2008 TravelTainment The Amadeus Leisure Group 24 Beispiel III  Spiegelung Überschrift header > h1 { box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.2))); }  HTML-Part – index.htm  DocType  Html-Header BEWERTUNGSBOGEN

© 2008 TravelTainment The Amadeus Leisure Group 25 Beispiel IV  Html-Body Bewertungsbogen Name: Datum: Bewertung: Copyright © by H. Ziegelmann

© 2008 TravelTainment The Amadeus Leisure Group 26 Beispiel V  Ergebnis: -webkit-box-reflect -webkit-gradient -webkit-box-shadow -webkit-transform Beispiel (Safari)  Fazit:  nur Minimalbeispiel (ohne Feinheiten)  tolle neue Möglichkeiten bei Formularen, einem wichtigen und vielgenutzten Element einer Webseite  Anpassungen derzeit nötig  noch nicht alltagstauglich

© 2008 TravelTainment The Amadeus Leisure Group 27 Fazit  Fortschritt oder Hype?  viele gute und auch neue Möglichkeiten  Einsparung Arbeitsaufwand gegeben  bei Listingvergleichen bis zu 90% Codeeinsparung  dadurch Wartung deutlich vereinfacht  aber:  noch kein Standard  entsprechend unterschiedlich viele Features aktuell in Browsern umgesetzt  dennoch:  FORTSCHRITT  da Ziele erreichbar / erreicht  viele neue Features (nicht einmal alle Features angesprochen)

© 2008 TravelTainment The Amadeus Leisure Group 28 Fazit II  Ausblick  noch nicht alle Features von Browserherstellern implementiert  Kniffe nötig  für Internet Explorer Framework (Google)  noch keine Standards  viele Änderungen und Ergänzungen möglich  im Skript  diverse Listings  weitere Ausführungen

© 2008 TravelTainment The Amadeus Leisure Group 29 Fragen? auch per

© 2008 TravelTainment The Amadeus Leisure Group 30 Vielen Dank!