Neue Webtechnologien HTML5 & CSS3

HTML5 & CSS3
Jakob Vesely Reife- und Diplomprfung 2013
Neue Webtechnologien
1. April 2013
Versionsnummer: 286 HTBLuVA St. Plten Abteilung Elektronik Schwerpunkt Technische Informatik Schuljahr 2012-13
Inhaltsverzeichnis
1 HTML und seine Geschichte...................................................................3
1.1 Anfnge von HTML und der Weg zu HTML5................................................................3 1.2 Die Entwicklung von HTML5 beginnt............................................................................3 1.3 HTML Aktuell und Zukunft.............................................................................................5
1.3.1 Kompatibilitt von Browsern............................................................................................................6
2 Grundlagen zu HTML, CSS und JavaScript............................................7

2.1 HTML..............................................................................................................................7 2.2 CSS..................................................................................................................................8 2.3 JavaScript.......................................................................................................................9
3 HTML5....................................................................................................10
3.1 bersicht......................................................................................................................10 3.2 Browser Prfixe............................................................................................................11 3.3 Offline...........................................................................................................................12
3.3.1 LocalStorage......................................................................................................................................12 3.3.2 SessionStorage.................................................................................................................................13 3.3.3 Cache Manifest.................................................................................................................................14 3.4.1 Neue Input Typen.............................................................................................................................16 3.4.2 Neue Attribute...................................................................................................................................19 3.5.1 Video-Element...................................................................................................................................22
3.4 Formulare.....................................................................................................................16 3.5 Audio/Video..................................................................................................................22
4 CSS3.......................................................................................................24
4.1 Neue Eigenschaften.....................................................................................................24
4.1.1 4.1.2 4.1.3 4.1.4 Calc......................................................................................................................................................24 opacity.................................................................................................................................................25 border-radius.....................................................................................................................................26 Transitions.........................................................................................................................................27
4.2 Background..................................................................................................................29
4.2.1 Kompatibilitt....................................................................................................................................29 4.2.2 bersicht neuer Eigenschaften in CSS3......................................................................................29 4.2.3 Linear Gradient Background..........................................................................................................34
5 Anhang...................................................................................................35
5.1 Verwendete und weiterfhrende Literatur..................................................................35
5.1.1 HTML5 Leitfaden fr Webentwickler........................................................................................35 5.1.2 Mobile Anwendungen mit HTML5 und CSS3.............................................................................35 5.1.3 Ntzliche Webseiten........................................................................................................................36
5.2 5.3 5.4 5.5
Abbildungsverzeichnis................................................................................................37 Tabellenverzeichnis.....................................................................................................38 Listings.........................................................................................................................39 Literaturverzeichnis.....................................................................................................40

Seite 2 von 40
Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely
1 HTML und seine Geschichte

1.1 Anfnge von HTML und der Weg zu HTML5
Tim Berners-Lee arbeitete im Jahr 1989 am CERN 1 in Genf. Er erkannte das Problem des Austauschens von Inhalten und Forschungsergebnissen und entwickelte das WorldWide-Web. Dafr brauchte er eine Beschreibungssprache um die Inhalte sichtbar zu machen. Die erste Version von HTML wurde am 3. November 1992 verffentlicht. Diese Urversion orientierte sich rein an Text. Ein Jahr spter folgte eine neue Version (wieder ohne Versionsnummer), die neben den Text auch Attribute, Bilder, Fett- und Kursiv[1] Darstellung enthielt. Der aktuelle HTML-Standard ist die Abbildung 1: Tim Berners-Lee Version 4.01 aus dem Jahr 1999. Im 21. Jahrhundert ging es dann mit der Entwicklung des XHTMLStandards weiter. Die Entwicklung von XHTML2.0 wurde im Jahr 2006 eingestellt. Wie es dazu kam, hat direkt mit der Entstehung von HTML5 zu tun.
1.2 Die Entwicklung von HTML5 beginnt

Im Jahr 2004 schlugen Mozilla und Opera die Weiterentwicklung von HTML, CSS und DOM dem World-Wide-Web-Consortium (W3C) vor. Da man aber schon zuvor HTML4 durch XHTML, XForms, SVG und SMIL ersetzte, war es nicht verwunderlich, dass das W3C XHTML2 und nicht HTML5 als neuen Web-Standard fr die Zukunft weiterentwickeln wollte. Mit der Abstimmung im W3C die knapp mit 8:11 Stimmen gegen HTML5 ausging, war nun klar, dass die Entwicklung von HTML5 neben dem W3C ablaufen [2] msse. Ian Hickson, ein Vertreter von Opera der auch fr das Abbildung 2: Logo des W3C Positionierungspapier fr die Entwicklung von HTML5 verantwortlich war, schrieb nach der Abstimmung folgendes in seinem Blog: Die Punkte sind diskutiert, die Positionen bezogen, jeder wei, wo der andere steht, jetzt ist es Zeit, sich zu beruhigen und mit der eigentlichen Arbeit zu beginnen. - Ian Hickson Nur zwei Tage nach dem Workshop im W3C wurde die WHATWG (Web Hypertext Applications Technology Working Group) als loses, inoffizielles und offenes Gemeinschaftsprojekt (eigene Bezeichnung der WHATWG) von den Browserherstellern Safari, Opera und Mozilla gegrndet. Das Projekt setzte sich zum Ziel mit einer aktiven Community an drei grundlegenden Spezifikationen zu arbeiten: Web Forms 2.0 (HTML-Formulare), Web Apps 1.0 (Web Applikationen) und Web Controls 1.0 (Interaktive Widgets). Die Zusammenarbeit der Community wird ber die Website der WHATWG www.whatwg.org koordiniert. ber einen Blog, Mailinglisten, Forums, ein Wiki und einen IRC Channel knnen Entwickler an der Entstehung des neuen Standards mitwirken. Parallel zur WHATWG arbeitete die XHTML2 Working Group des W3C an einem vllig neuen Standard fr das Web. Die WHATWG legte, ganz im Gegenteil zur XHTML2 WG, ein Augenmerk auf die Rckwerkskompatibilitt von HTML.
Europische Organisation fr Kernforschung bei Meyrin (Schweiz)
Seite 3 von 40
Elemente wie Forms, Frames und die DOM Events sollten durch XForms, XFrames und XML Events ersetzt werden. Jedes Element sollte die Attribute href und src erhalten, die berschriften h1 bis h6 sollten von h-Elementen in Verbindung mit section-Elementen ersetzt werden. Durch die fehlende Untersttzung der Browserhersteller, erkannte auch das W3C mit der Zeit, dass die Entwicklung nicht zielfhrend ist. Im Oktober 2006 lenkte schlielich Tim Berners-Lee, Direktor des W3C, ein und sprach sich fr die Weiterentwicklung von HTML aus. Er erklrte in seinen Blog, dass er zur Einsicht kam HTML weiter zu entwickeln: Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work. - Tim Berners-Lee Er kndigt auch die Grndung einer neuen HTML Working Group im W3C auf breiter Basis mit den Browserherstellern an. Dass er zum Entschluss gekommen war, dass XHTML2 keine Zukunft hat und man jetzt an einen sehr wichtigen Projekt fr die Zukunft arbeiten werde, schrieb er zu Schluss in seinem Blog-Eintrag: This is going to be a very major collaboration on a very important spec, one of the crown jewels of web technology. Even though hundreds of people will be involved, we are evolving the technology which millions going on billions will use in the future. There won't seem like enough thankyous to go around some days. But we will be maintaining something very important and creating something even better. - Tim Berners-Lee Es ergingen nun an alle Mitglieder der WHATWG Einladungen, sich der neuen Working Group des W3C anzuschlieen. Die WHATWG war sehr Erfreut ber diesen Schritt und so konstituierte sich im Mrz 2007 die neue HTML Working Group (HTML WG) des W3C. Einige Monate spter wurde in der HTML WG darber abgestimmt, ob die bereits ausgearbeiteten Spezifikationen der WHATWG von der neuen HTML WG bernommen werden sollten. Im Gegensatz zu der Abstimmung im Jahr 2004 ging diese klar mit 48:5 Stimmen fr die bernahme der Spezifikationen aus. Es gab aber natrlich weitreichende Differenzen zwischen der HTML WG und der WHATWG, zum Beispiel nannte die HTML WG das 3. Quartal 2010 und Ian Hickson von der WHATWG das Jahr 2022 fr die Recommendation. Sie waren sich also nicht einig wann HTML5 nun offiziell verabschiedet und zum fertigen Standard werden sollte. Auch die Arbeitsweisen der zwei Working Groups waren sehr verschieden. Whrend die WHATWG ihre Spezifikation stndig weiter schrieb, folgte man im W3C dem sogenannten Heardbeat, einen bestimmten Rhythmus zur nderung und Erweiterung ihrer Spezifikationen. Nach arbeitsreichen Jahren wurde 2008 die erste Version von HTML5 verffentlicht. Der erste Draft, welcher von Ian Hickson geschrieben wurde, floss in die erste Version ein. Es wurden natrlich weitere groe nderungen angekndigt, die auch spter hinzukamen. Im gleichen Jahr ist Mozillas Firefox der erste Browser der HTML5 untersttzt. 2010 sollte das erste groe Jahr fr HTML5 werden. Im Jnner bot YouTube erstmals einen HTML5-Video-Player an. Im April steuerte Steve Jobs (unabsichtlich) seinen Teil fr die Popularitt von HTML5 bei. In einen offenen Brief erklrte er warum Flash niemals auf Apples mobilen Gerten laufen werde: Flash was designed for PCs using mice, not for touch screens using fingers. - Steve Jobs Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 4 von 40
Durch diese Aussage und die allgemein immer grer werdende Popularitt von HTML5 erkannten viele Unternehmen und Entwickler, dass es Zeit sei sich mit dem neuen Standard zu befassen. Nun begann der groe Hype um HTML5. Im Mai wechselte der Online-Dokumente Dienst Scribd bei einigen Anwendungen auf HTML5. Im Dezember verffentlichte Google seinen Web Store in Chrome, der auf HTML5 Apps basiert. Auch im darauffolgenden Jahr 2011 geht die Eroberung des Webs weiter. Im Mrz kauft Disney ein HTML5-Spiele Startup auf. Im August bietet Amazon eine auf HTML5 basierende Webversion des Kindle Readers an und Twitter gibt eine HTML5 Version fr das iPad frei. 34% der Top 100 Websites verwenden im September bereits HTML5. Zum Ende des Jahres stoppt Adobe die FlashEntwicklung fr mobile Gerte. Flickr bekommt 2012 einen HTML5 Uploader und LinkedIn gibt eine native App fr das iPad frei. In diesem Jahr beendeten auch die HTML WG und die WHATWG ihre Zusammenarbeit. Das W3C hat Ende 2012 die Arbeit an wesentlichen Teilen fr abgeschlossen erklrt. [3]
1.3 HTML Aktuell und Zukunft

Die aktuelle Version von HTML ist genau genommen noch immer 4.01 aus dem Jahr 1999. Aber auch der aktuelle XHTML-Standard ist nicht sehr viel jnger, denn seit den frhen 2000er Jahren wurde auch hier nichts neues verffentlicht. Laut dem Zeitplan des W3C soll HTML5 2014 offiziell verabschiedet werden. Dass heit, dass HTML5 zu einer offiziellen W3C Recommendation werden soll. Im Mai 2011 erhielt HTML5 beim W3C den Status Last Call, welcher als letzte Aufforderung dienen soll, Kommentare zum HTML5Entwurf einzureichen. Die WHATWG hat den Status Last Call bereits am 27. Oktober 2009 ausgerufen. Der Status Last Call bedeutet aber auch, dass HTML5 faktisch bereits einen fertigen Zustand angenommen hat, welcher mit einem Release Candidate vergleichbar ist.
Seite 5 von 40
1.3.1 Kompatibilitt von Browsern

Eines der grten Probleme bei der derzeitigen Verwendung von HTML5 ist die aktuelle Browserkompatibilitt. Allerdings arbeiten die Browserhersteller sehr energisch an der Implementierung des neuen Standards in ihre Browser. Google ist hier beispielsweise im ihren Browser Chrome federfhrend. Der aktuelle Stand der Browserimplementierungen kann mit Hilfe von Webseiten wie www.html5test.com oder www.html5readiness.com analysiert werden.
Abbildung 3: Browserkompatibilitt von HTML5 (Stand: 31.03.2013) Wie in der Abbildung 3 zu sehen ist, steigt die HTML5 Untersttzung der Browser sehr stark. Vor allem Google und Apple und Opera liegen mit ihren Browsern sehr gut im Rennen. Microsofts Internet Explorer, das lange Zeit als Stiefkind von HTML5 galt, hat auch in letzter Zeit stark aufgeholt, liegt aber noch immer weit hinter den fhrenden Web-Browsern.
Seite 6 von 40
2 Grundlagen zu HTML, CSS und JavaScript

Die hier angefhrten Beispiele entsprechen bereits der Syntax und den neuen semantischen Elementen von HTML5 und CSS3. Zum Einblick in die Syntax der drei Sprachen werden folgend kurze, einfhrende Beispiele gegeben.
2.1 HTML
HTML ist, wie in den vorherigen Kapiteln schon penibel beschrieben, eine Beschreibungssprache, die von Tim Berners-Lee in den 1990er Jahren entwickelt wurde und fr das World Wide Web von grter Bedeutung ist. HTML-Text wird in sogenannten Tags aufgebaut. Diese werden ineinander verschachtelt und ergeben eine HTML-Webseite. Eine HTML-Seite beginnt grundstzlich mit dem Tag <html> und endet mit </html>. Innerhalb dieser Tags gibt es wieder zwei groe Bereiche. Den Head- und den Body-Bereich. Im Head-Bereich werden Dinge wie der Titel der Seite, den zu verwendenden Zeichensatz oder Verweise auf CSS-Files definiert. Im Body-Teil finden sich die Elemente, welche auf der Seite dargestellt werden. <html> <head> <title>Titel</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css?v=1.0" /> <meta name="author" content="Jakob Vesely"> <meta name="description" content="Website von Jakob Vesely"> </head> <body> <header> <hgroup> <h1>Website von Jakob Vesely</h1> <h2>Semantisch richtige HTML5 Website...</h2> </hgroup> <nav> <ul class="menu"> <li><a href="#home">Home</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#about">About Me</a></li> <li><a href="#impressum">Impressum</a></li> </ul> </nav> </header> <section class="classenselektor"> <article> <h1>berschrift 1</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita rebum. Stet clita kasd gubergren, no sea </p> Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 7 von 40
<form action="post1.php" method="post"> <p> <label for="tag">Datum:</label> <input type="date" name="tag" /> </p> <p> <label for="anz">Anzahl:</label> <input type="number" name="anz" /> </p> <input type="submit" value="Bestätigen" /> </form> </article> </section> <footer> <p>© by Jakob Vesely 2013</p> </footer> </body> </html> Listing 1: HTML Beispiel
2.2 CSS
CSS dient zum stylen von HTML-Elementen. Mit HTML5 wird auch CSS immer wichtiger, da in den neuen Spezifikationen Tags die das Aussehen verndern nicht mehr gern gesehen werden und auch in den neuen Spezifikationen nicht mehr enthalten sind. Stattdessen soll das Komplette Aussehen mit CSS beschrieben und nur der semantische Inhalt mit HTML realisiert werden. CSS-Befehle, wie zum Beispiel width, height, position oder background werden zu einen sogenannten Selektor (Klassen-, ID-Selektor, ...) zusammengefasst und so dem richtigen HTMLElement zugewiesen. Als Beispiel ist hier ein Klassenselektor fr ein div-Element angefhrt: .classenselektor { width: 90%; height: calc(100%-100px); position: absolute; top: 100px; left: 5%; background: -moz-radial-gradient(center, #fff, #adf); background: -webkit-radial-gradient(center, #fff, #adf); background: -o-radial-gradient(center, #fff, #adf); background: -ms-radial-gradient(center, #fff, #adf); background: radial-gradient(center, #fff, #adf); } Listing 2: CSS Beispiel
Seite 8 von 40
2.3 JavaScript
JavaScript ist neben PHP die wahrscheinlich wichtigste Skriptsprache in der Web-Entwicklung. Mit HTML5 wird sie noch wichtiger. Viele Funktionen, wie zum Beispiel die Offline und Storage Features oder das Modifizieren von Video- und Audio-Element Funktionen lassen sich mit JavaScript realisieren. Auch moderne Plugins wie Jquery, GMAP3 oder node.js erfreuen sich immer grerer Beliebtheit und werden auch von vielen bekannten Webseiten verwendet. <script type="text/javascript" language="javascript"> var play_pause_button = function (ctrl) { if (video.paused) { video.play(); crtl.value = String.fromCharCode ('0x25AE', '0x25AE'); } else { video.pause(); crtl.value = String.fromCharCode('0x25B6'); } }; </script> Listing 3: JavaScript Beispiel
Seite 9 von 40
3 HTML5
3.1 bersicht
Die Funktionen von HTML5 knnen grundstzlich in folgende Teilbereiche eingeteilt werden:
Semantik
Offline und Speicher
Dateizugriff
Verbindung
Audio/Video
3D/Grafik und Effekte Leistung und Integration
CSS3
Der Umfang der HTML5 und CSS3 Spezifikationen is so enorm gro, dass in diesem Dokument die fr die zuknftige Webentwicklung am wichtigsten gehaltenen neuen Funktionen von HTML5 und CSS3 behandelt werden.
Seite 10 von 40
3.2 Browser Prfixe

Da vor allem frher, aber auch noch heute, viele Befehle in CSS3 noch nicht fertig standardisiert sind, wurden fr die Zeit der Entwicklung (Drafts, Betaphasen, usw.) Prfixe eingefhrt. Diese werden am Beginn des Befehls einfach vorangesetzt. Wenn die Befehle fertig spezifiziert sind, knnen diese Prfixe dann einfach weggelassen werden. In der folgenden Tabelle sind alle Prfixe aufgefhrt: Prfix -moz-ms-, mso-khtml-oBrowser Firefox Internet Explorer Konqueror Opera
-webkitChrome, Safari Tabelle 1: bersicht Browser Prfixe Ein derzeit noch aktives Beispiel ist die CSS3-Eigenschaft border-radius mit der Ecken abgerundet werden knnen. Hierzu das Beispiel: .klasse { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -khtml-border-radius: 12px; } Listing 4: Beispiel - Einsatz von Prfixen Ein prominentes Beispiel dafr dass sich bei den noch nicht standardisierten Befehlen schnell etwas ndern kann ist die fr den Hintergrund eingesetzte Funktion der Gradienten. Hierbei nderte sich mitten in der Entwicklungszeit noch die eigene Syntax. Background-image: Background-image: Background-image: Background-image: -Webkit-linear-gradient(weite 0%, #9FBFD2 100%); -mol-linear-gradient(weite 0%, #9FBFD2 100%); -o-linear-Gradient(weite 0%, #9FBFD2 100%); linear -gradient(weite 0%, #9FBFD2 100%); // // // // // Standard ohne Prfix Prfix fr Mozilla Prfix fr Webkit (Safari, Chrome) Prfix fr Opera Prfix fr KHTML
Listing 5: Beispiel Prfixe bei den Gradienten Funktion Grundstzlich gibt eben diese Prfixe um noch nicht standardisierte Befehle schon wesentlich frher einzusetzen und zu verwenden. Allerdings ist hierbei natrlich Vorsicht geboten, weil sich sehr rasch etwas in der Syntax der Befehle ndern kann.
Seite 11 von 40
3.3 Offline
Ein Bereich, der in den frheren HTML Versionen gar nicht vorhanden war, kommt in der neuen Spezifikation umso mehr zum Zug. Er Umfasst die Gebiete Offline und Storage. Nicht zuletzt durch den vorausschauenden Blick der WHATWG im Jahr 2004, die mit ihren eigenen Spezifikationen die Forcierung von Applications erkannt haben ist es zu verdanken, dass diese Technologien ihren Platz gefunden haben.
3.3.1 LocalStorage
Kompatibilitt
Google Chrome Mozilla Firefox MAC Safari Opera Internet Explorer iOS Safari Android Opera Mini Opera Mobile
4+
Funktion
3.5+
4+
10.5+
8+
3.2+
2.1+
11+
Der localStorage ist ein lokaler Speicher, welcher Clientseitig verwendet werden kann. Bisher war es blich Daten online, zum Beispiel in einer MySQL-Datenbank, zu speichern. Diese Datenbanken werden aber serverseitig betrieben und werden im Normalfall nicht fr die Speicherung von Wertepaaren herangezogen. Cookies sind fr stabile offline-Webanwendungen unzuverlssig. Abhilfe schafft hier der schon weit verbreitete localStorage. Damit ist es mglich Wertepaare lokal Clientseitig zu speichern.
Syntax
Wertepaare des localStorage knnen gespeichert (setItem), ausgelesen (getItem) und gelscht (removeItem) werden. Ebenso kann der gesamte Speicher geleert (clear) werden
Speichern eines Wertepaares:

localStorage.setItem(key, value); Listing 6: LocalStorage Speichern eines Wertepaares
Auslesen eines Wertepaares:

localStorage.getItem(key); Listing 7: LocalStorage Auslesen eines Wertepaares
Lschen eines Wertepaares:

localStorage.removeItem(key); Listing 8: LocalStorage Lschen eines Wertepaares
Lschen aller Wertepaare im localStorage:

localStorage.clear(); Listing 9: LocalStorage Lschen aller Wertepaare
Seite 12 von 40
3.3.2 SessionStorage
Kompatibilitt
4+
Funktion
3.5+
4+
10.5+
8+
3.2+
2.1+
11+
Der SessionStorage hat im Prinzip die gleiche Funktion wie der LocalStorage (siehe dazu 3.3.1 LocalStorage), bis auf den Unterschied, dass dieser Speicher nur fr die jeweilige Session verfgbar ist!
Syntax
Speichern eines Wertepaares:
sessionStorage.setItem(key, value); Listing 10: SessionStorage Speichern eines Wertepaares
Auslesen eines Wertepaares:

sessionStorage.getItem(key); Listing 11: SessionStorage Auslesen eines Wertepaares
Lschen eines Wertepaares:

sessionStorage.removeItem(key); Listing 12: SessionStorage Lschen eines Wertepaares
Lschen aller Wertepaare im localStorage:

sessionStorage.clear(); Listing 13: SessionStorage Lschen aller Wertepaares
Seite 13 von 40
3.3.3 Cache Manifest

Kompatibilitt
4+
Funktion
3.5+
4+
10.6+ 10+
3.2+
2.1+
3.2+
11+
Mit der Einfhrung des Cache Manifests ist es nun mglich Dateien offline bereit zustellen. Grundstzlich ist das Cache Manifest ein Textdokument, in dem Definiert ist, welche Dateien offline Zwischengespeichert werden. Dazu gliedert sich das Dokument in drei Grundbereiche. Je nach eingeteilten Bereich, wird das angegebene File offline zwischengespeichert, nur online verfgbar gemacht oder nur dann geladen wird, wenn ein definiertes File nicht gefunden werden kann. Die drei Bereiche heien wie folgt: NETWORK CACHE Fr diese Dateien ist eine Verbindung zum Server erforderlich. Bei allen Anfragen an diese Ressourcen wird der Cache umgangen, selbst wenn der Nutzer offline ist. Eintrge unter CACHE werden beim ersten Herunterladen explizit im Cache gespeichert. Diese Eintrge knnen auch unter CACHE MANIFEST stehen, dann ist der Eintrag CACHE nicht notwendig.
Fr den Fall, dass auf eine Ressource nicht zugegriffen werden kann, wird ein anderes File, das definiert wurde geladen. Die erste URI ist die Ressource, die zweite das Fallback. Beide URIs mssen relativ sein und denselben Ursprung haben wie die Manifest-Datei. Tabelle 2: Bereiche im Cache-Manifest
FALLBACK
Syntax
Einbindung in HTML-Dokument
Bei der Verwendung des Cache Manifests ist es wichtig, dass es in alle Dokumente, die im Manifest verwendet werden, eingebunden ist. <html manifest="manifest.cache"> </html> Listing 14: Einbinden des Cache Manifestes in einer HTML-Datei
Seite 14 von 40
Manifest-File
CACHE MANIFEST #Kommentar CACHE: index.html NETWORK: images/* FALLBACK: special/* only_online.html Listing 15: Beispiel - Cache Manifest Erklrung Beispiel: Die Datei index.html wird zwingend offline Zwischengespeichert. Der Eintrag unter NETWORK bedeutet, dass alle Daten die sich im Verzeichnis images befinden zwingend online Abgerufen werden mssen. Wie in der Funktionsbeschreibung erlutert wird mit dem Eintrag special/* only_online.html versucht alle Dateien aus dem Ordner special zu cachen. Schlgt dies fehl weil keine Verbindung vorhanden ist, wird das HTML-Dokument only_online.html aufgerufen.
Seite 15 von 40
3.4 Formulare
In HTML5 wurden zu den bereits bestehenden Formularen weitere Typen hinzugefgt und alle Tags mit neuen Attributen versehen. So gibt es nun beim Input-Element zum Beispiel eigene Typen fr Datums-Angaben, Zahlen ober Email-Adressen. Diese knnen mit diversen Attributen eingeschrnkt und bereits clientseitig berprft werden.
3.4.1 Neue Input Typen

Hier wird eine bersicht ber alle neuen HTML5 Input-Typs gegeben. In den nchsten Punkten, wird auf ausgewhlte Typen nher eingegangen. Eingabetyp tel search url email datetime date month week time datetime-local number range Verwendungszweck Zur Eingabe einer Telefonnummer Fordert Nutzer zur Eingabe von Text auf, nach dem gesucht werden soll Zur Eingabe einer URL Zur Eingabe einer E-Mail-Adresse oder einer Liste von E-Mail-Adressen Zur Eingabe von Datum und Uhrzeit auf der Grundlage der Zeitzone UTC Zur Eingabe eines Datums ohne Zeitzone Zur Eingabe eines Datums mit Jahr und Monat, jedoch ohne Zeitzone Zur Eingabe eines Datums bestehend aus einer Jahres- und einer Wochenzahl, jedoch ohne Zeitzone Zur Eingabe einer Uhrzeit mit Stunde, Minute, Sekunden und Bruchsekunden, jedoch ohne Zeitzone Zur Eingabe von Datum und Uhrzeit ohne Zeitzone Fr numerische Eingaben Fr numerische Bereichs-Eingaben
color Zur Auswahl einer Farbe ber ein entsprechendes Steuerungselement Tabelle 3: bersicht von allen neuen Input-Typen
Seite 16 von 40
3.4.1.1 Datum "date"

Kompatibilitt
20+
9+
5+
10+
Funktion und Syntax

Das Datum-Element bringt nun endlich ein einheitliches Eingabefeld fr Datumsangaben bei Formularen. <input type="date" /> Listing 16: Input-Element Datum Der Browser erkennt nun, dass nur ein Datum eingegeben werden kann. Chrome von Google ist einer der wenigen Browser der bereits den neuen Typen implementiert hat. Mit einem Klick in das Input-Feld stellt der Browser, wie in Abbildung 4 zu sehen ist, eine eigene Ansicht fr die Eingabe eines Datums dar.
Abbildung 4: Input-Type date
Seite 17 von 40
3.4.1.2 Zahlen "number"

Kompatibilitt
7+
5+
9+
3.2+
4+
10+
Funktion und Syntax

Ein weiteres Element ist ein eigener Typ fr Zahlen. Hierbei stellt der Browser das Eingabefeld mit zwei kleinen Buttons am Rand des Elements dar. <input type="number" /> Listing 17: Syntax Input-Type number Abbildung 5: Input-Type number
3.4.1.3 Farben "color"

Kompatibilitt
20+
11+
10+
Funktion und Syntax

Etwas neues ist auch ein Typ fr das auswhlen von Farben. Hierzu verwendet der Browser das bekannte Dialogfeld zur Farbauswahl. <input type="color" /> Listing 18: Syntax Input-Type color
Abbildung 6: Input-Type color
Seite 18 von 40
3.4.2 Neue Attribute

Wie zuvor bei den neuen Input-Typen wird hier zuerst eine bersicht ber alle neuen Attribute gegeben und anschlieend auf einzelne Attribute genauer eingegangen. Attribut autofocus placeholder form required autocomplete pattern dirname novalidate formaction formenctype formmethod Verwendungszweck Richtet den Fokus der Eingabe auf das Element, sobald die Seite geladen wurde Gibt dem Nutzer einen Hinweis darauf, welche Art von Daten eingegeben werden sollen Gibt ein oder mehrere Formulare an, auf das sich das Eingabeelement bezieht Ein boolesches Attribut, das angibt, dass das Element erforderlich ist Legt fest, dass ein Feld nicht auf der Grundlage der vorherigen Eingaben des Nutzers vom Browser automatisch vervollstndigt oder vorausgefllt werden soll Gleicht den Wert eines Elements mit einem regulren Ausdruck ab Sendet die Ausrichtung des Steuerungselements zusammen mit dem Formular Verhindert eine Validierung der Formulareingaben, sofern dies fr ein Formularelement angegeben ist berschreibt das fr das Formularelement angegebene Attribut "action" berschreibt das fr das Formularelement angegebene Attribut "enctype" berschreibt das fr das Formularelement angegebene Attribut "enctype"
formnovalidate berschreibt das fr das Formularelement angegebene Attribut "novalidate" formtarget berschreibt das fr das Formularelement angegebene Attribut "target" Tabelle 4: bersicht von allen neuen Attributen
Seite 19 von 40
3.4.2.1 Pattern
Kompatibilitt
10+
4+
5+
10+
10+
10+
Funktion und Syntax

Mit Pattern ist eine Clientseitige berprfung der Formulardaten mglich. Es knnen beispielsweise die Formate von Telefonnummern berprft werden. Die Funktionsweise soll anhand des Input-Typen tel fr Telefonnummern erfolgen: <form onsubmit="alert('Submitted');"> <p>Telefonnummern Format: +43(664)1234567<p> <input type="tel" pattern="[\+]\d{2}[\(]\d{3}[\)]\d{7}" /> <input type="submit" value="»" /> </form> Listing 19: Beispiel - Pattern Erklrung zum Beispiel: Das Formular bestand grundstzlich aus zwei Elementen. Einerseits das Eingabefeld fr die Telefonnummer und andererseits der Button zur Besttigung der Eingabe. Dem Attribut Pattern wurde folgende Syntax gegeben: [\+]\d{2}[\(]\d{3}[\)]\d{7} Abbildung 7: Fehlermeldung bei falscher Eingabe [\+], [\(], [\)] weit darauf hin, dass ein +, ( und ) an der jeweiligen Stelle bentigt wird. Die Angabe d{3} sagt aus, dass eine Dezimalzahl mit drei Ziffern einzugeben ist.
Abbildung 8: Bei richtiger Eingabe wird das Formular submitted Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 20 von 40
3.4.2.2 required
Kompatibilitt
10+
4+
5+
10+
10+
10+
Funktion und Syntax

Das Attribut ist ein sehr einfaches aber auch sehr wirkungsvolles Attribut. Mit diesem kann nmlich angegeben werden, ob ein Feld unbedingt ausgefllt werden muss, um das Formular abzuschicken. Wird ein solches Element nicht ausgefllt, Abbildung 9:Fehlermeldung bei nicht erfolgter Eingabe erscheint eine Fehlermeldung. <input type="tel" required /> Listing 20: Syntax required-Attribut
Zustzliches Styling im CSS

Es ist auch mglich das Input Feld mit CSS so zu formatieren, dass der aktuelle Status ber die richtige oder falsche Eingabe in die Formatierung mit einfliet. Hierzu werden die Pseudo-Selektoren Abbildung 10: Zustzliche Anzeige des Status invalid valid und invalid bentzt. Diese Selektoren beziehen sich aber nicht nur auf das required-Attribut sondern spricht auch auf falsche Eingaben an, welche mit Pattern begrenzt wurden.
Abbildung 11: Zustzliche Anzeige des Status valid
input:required:valid { background-image:url(valid.png); background-position:right center; background-repeat:no-repeat; } input:required:invalid { background-image:url(invalid.png); background-position:right center; background-repeat:no-repeat; } Listing 21: Beispiel - CSS Pseudo-Selektoren valid und invalid
Seite 21 von 40
3.5 Audio/Video
3.5.1 Video-Element
Kompatibilitt
4+
Browser
3.5+
4+
Version 9+ 6+ 3.6+ 5+
10.5+
9+
3.2+
MP4 Ja Ja Nein Ja
2.1+
WebM Nein Ja Ja Nein
Ogg Nein Ja Ja Nein Ja
11+
Kompatibilitt Video Formate

Internet Explorer Chrome Firefox Safari
Opera 10.6+ Nein Ja Tabelle 5: Kompatibilitt von Video Formaten mit dem HTML5-Video-Tag
Funktion
Unter HTML5 soll das Einsetzten von zustzlichen Erweiterungen, wie zum Beispiel Flash fr das Abspielen von Videos, nicht mehr notwendig sein. Mit einem in HTML5 integrierten Video-Player wird es in Zukunft einfacher Videos in eine Website einzubinden. Denn die Syntax und der Aufwand ist im Vergleich zu den frher verwendeten Flash-Anwendungen sehr stark gesunken.
Syntax
Einfaches Einbinden eines Videos:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ihr Browser untersttzt den video-Tag nicht! </video> Listing 22: Einbinden eines Videos in HTML5
Steuern mit JavaScript:

Mit JavaScript knnen Videos gesteuert werden. Dass heit, dass mit ein paar Befehlen Videos gestartet oder zum Beispiel angehalten werden knnen. Zu erwhnen ist, dass die angefhrten Methoden des hier bearbeiteten Video-Tags auch fr das HTML5 Audio-Element analog anzuwenden ist. In der folgenden Tabelle sind alle Methoden zusammengefasst:
Seite 22 von 40
Methode addTextTrack() canPlayType() load() play()
Beschreibung Fgt eine neue Textspur hinzu berprft, ob der Browser den spezifischen Videotypen spielen kann Ladet das Videoelement neu (reload) Startet das Video
pause() Pausiert das gerade spielende Video Tabelle 6: Methoden von Video- und Audioelementen in HTML5
Beispiel
<head> <script type="text/javascript"> function vidplay() { var video = document.getElementById("movie"); var button = document.getElementById("play"); if (video.paused) { video.play(); button.textContent = "||"; } else { video.pause(); button.textContent = ">"; } } function restart() { var video = document.getElementById("movie"); video.currentTime = 0; } </script> </head> <body> <video width="320" height="240" id="movie"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ihr Browser untersttzt den <video>-Tag nicht! </video> <button id="restart" onclick="restart();">[]</button> <button id="play" onclick="vidplay()">></button> </body> Listing 23: Beispiel Verwendung von HTML5-Video Methoden in JavaScript
Audio-Element
Das Einbinden von Audiodateien und die JavaScript-Funktionen wie play und pause funktionieren analog zum Video-Element. Als Tag wird wird <audio> verwendet.
Seite 23 von 40
4 CSS3
4.1 Neue Eigenschaften
4.1.1 Calc
Kompatibilitt
19+
Funktion
4+
6+
9+
6+
Die neu hinzugekommene Funktion calc() ist meiner Meinung nach eines der besten Dinge die sich in der neuen Spezifikation von CSS3 befinden. Diese Funktion erlaubt es endlich Berechnungen in CSS durchzufhren.
Syntax
eigenschaft: calc(<operation>); Listing 24: Syntax der calc()-Funktion
Beispiel
header{ width:100%; height:100px; } .content{ width:100%; height:calc(100%-100px); overflow: scroll; } Listing 25: Beispiel Anwendung der CSS3 Funktion calc() Das Beispiel zeigt eine typische Anwendung der calc() Funktion: Der Kopf der Seite hat eine fixe Hhe von 100px. Frher war es nicht mglich den Content-Bereich der Seite auf 100% aufzufllen. Nun werden einfach mit der calc() Funktion 100px von den variablen 100% abgezogen und die Seite ist genau auf 100% x 100% skaliert.
Seite 24 von 40
4.1.2 opacity
Kompatibilitt
4+
Funktion
2+
3.1+
9+
5.5+
3.2+
2.1+
5+
10+
Mit der Eigenschaft opacity ist es mglich die Transparenz von Elementen zu regulieren.
Syntax
opacity: <Wert>; /* Wert von 0 bis 1, Bsp.: 0.7 fr 70% Deckkraft */ Listing 26: Syntax von opacity
Beispiel
.classe_x{ background: #000; opacity:1; } .classe_x:hover{ opacity:0.8; } Listing 27: Beispiel Anwendung von opacity Im Beispiel ndert sich die Deckkraft von 100% auf 80% wenn der Mauszeiger ber ein Element mit der Klasse classe_x bewegt wird.
Seite 25 von 40
4.1.3 border-radius
Kompatibilitt
4+
Funktion
2+
3.1+ 10.5+
9+
3.2+
2.1+
11+
Der Border Radius ist eine bereits hufig eingesetzte Funktion, welche vor allem im Bereich von Div-, Formular- oder Bildelementen verwendet wird. Mit dieser Funktion werden runde Ecken erzeugt. Der dazu angegebene Wert ist der Radius der Ecke.
Syntax
border-radius: <value>; Listing 28: Syntax von border-radius
Beispiel
input{ border-radius: 2px; } Listing 29: Beispiel - Anwendung des border-radius
Seite 26 von 40
4.1.4 Transitions
Kompatibilitt
4+
Funktion
4+
3.1+ 10.5+ 10+
3.2+
2.1+
10+
Mit transitions knnen zeitgesteuerte Effekte nach speziellen Geschwindigkeitskurven ausgefhrt werden.
Syntax
transition: <property> <duration> <timing-function> <delay>; Listing 30: Syntax von transition Die einzelnen Bestandteile von transition lassen sich auch in mehrere Befehle verteilen: CSS-Eigenschaft Verwendungszweck transition-property Name der Eigenschaft die verndert werden soll transition-duration Gibt an wie lang der Befehl bis dass der fertig ausgefhrt ist dauern soll transition-timingfunction Gibt die Geschwindigkeitskurve an
transition-delay Gibt an wann der Effekt gestartet werden soll Tabelle 7: Einzelne Eigenschaften von transition
transition-timing-function - Bzierkurven
Die bereits erwhnten Geschwindigkeitskurven sind Funktionen, nach deren Verlauf der gewnschte Effekt angewendet wird. Die hierbei angewendeten Kurven sind die sogenannten Bzierkurven. Nach Bzier knnen alle Kurven durch vier Kontrollpunkte bestimmt werden. Zwei Kontrollpunkte befinden sich am Anfang und Ende einer variablen Linie, zwei weitere, die so genannten Kurvensttzpunkte, auerhalb der Linie. Die Kontrollpunkte werden als Kurvenpunkte oder Bzier Points Abbildung 12: Kubische Bzierkurve[4] bezeichnet, die Kurvensttzpunkte als Bzier Curve Points. Bei den beiden Kurvensttzpunkten handelt es sich um Anfasspunkte mit der die Krmmung der Bzier-Kurven beeinflusst wird. Sie sind fr die Definition der Tangentenvektoren in den Endpunkten mageblich. Mit den beiden Kurvenpunkten an den Linienenden knnen die Linien gestaucht und gestreckt werden. Durch Teilung komplexer Kurven in einzelne Kurvenzge knnen alle polygonen Kurven und Oberflchen nachgebildet werden.[5] Um die Anwendung dieser Funktion zu vereinfachen, gibt es voreingestellte Kurven. Es ist aber auch mglich Effekte nach eigenen Kurven abarbeiten zu lassen.
Seite 27 von 40
Kurvenname Beschreibung
linear Gleiche Geschw. vom Anfang bis zum Ende
ease-in Langsamer Start
ease-out Langsames Ende
ease-in-out Langsamer Start und langsames Ende
Cubic-bezier (n, n, n, n) Eigene Definierte Kurve mit vier Werten
Grafik und Werte der Kurven
0, 0, 1, 1 0.42, 0, 1, 1 0, 0, 0.58, 1 0.42, 0, 0.58, 1 n, n, n, n Tabelle 8: bersicht der Bzierkurven fr das Timing der Eigenschaft transition Die in Tabelle 8 gezeigten Bzierkurven knnen als transition-timing-function angewendet werden.
Beispiel
div { width:100px; height:100px; background:black; transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -webkit-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -o-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; } div:hover { opacity:0.5; -o-box-shadow: 0 0 10px blue; -moz-box-shadow: 0 0 10px blue; -webkit-box-shadow: 0 0 10px blue; box-shadow: 0 0 10px blue; width:200px; height:200px; } Listing 31: Beispiel - Anwendung von transition Im Angefhrten Beispiel wird ein DIV-Element mit einer den gleichen Seitenlngen von 100px, schwarzen Hintergrund und einem Schatten bei einer Mausbewegung ber das DIV-Element zu einem 200px groen Quadrat mit 50% Deckkraft und einen blauen Schatten. Dies passiert alles in einer Zeit von 300 Millisekunden nach der Geschwindigkeitskurve ease-out.
Seite 28 von 40
4.2 Background
4.2.1 Kompatibilitt
4+
3.6+
3.1+
10+
9+
3.2+
2.1+
5+
10+
4.2.2 bersicht neuer Eigenschaften in CSS3

Nachdem es beim Wechsel von CSS1 auf CSS2 beim Background-Element keine nderungen gab, wurden bei CSS3 einige neue Features eingebaut. Folgende Tabelle listet die neuen CSSEigenschaften beim Background auf: Eigenschaft background-size background-origin Beschreibung Beschreibt die Gre des Hintergrunds Beschreibt die Position eines Hintergrundbilds im Hintergrund selbst
background-clip Beschreibt die Painting-Area Tabelle 9: bersicht der neuen Eigenschaften beim Background in CSS3 In CSS3 kamen aber nicht nur komplett neue Background-Elemente hinzu sondern es wurden auch einige neue Werte fr das Background-Element eingefgt. Zum Beispiel die schon reichlich verwendete Gradient-Background.
Seite 29 von 40
4.2.2.1 background-size
Funktion
background-size ist, wie der Name schon sagt, eine Eigenschaft zum ndern der Gre des Hintergrundes. Vor allem durch cover und contain ist nun etwas mglich, dass bisher nur schwer zu realisieren war. So knnen nun sehr einfach Seiten mit einem ganzseitigen Hintergrundbild sehr einfach realisiert werden.
Syntax
background-size: <length>|<percentage>|cover|contain; Listing 32: Syntax von background-size
Option length
Beschreibung Setzt die Hhe und Breite des Hintergrundbildes. Der erste Wert beschreibt die Weite und die Zweite die Hhe. Wenn nur ein Wert angegeben ist, wird der Zweite automatisch als auto angenommen.
Beispiele background-size: 100px 100px; background-size: 20px 50px; background-size: 200px; background-size: 100% 100%; background-size: 50%;
percentage Setzt die Hhe und Breite des Hintergrundbildes in Prozent im Bezug auf das Mutterelement. Der erste Wert beschreibt die Weite und die Zweite die Hhe. Wenn nur ein Wert angegeben ist, wird der Zweite automatisch als auto angenommen. cover Skaliert das Hintergrundbild so, dass es so gro als mglich dargestellt wird und der gesamte Hintergrundbereich abgedeckt wird. Dadurch sind wahrscheinlich ein Teil des Hintergrundbildes nicht angezeigt.
background-size: cover;
Skaliert das Hintergrundbild so, dass es innerhalb des background-size: contain; Content Bereichs so grtmglich dargestellt wird. Tabelle 10: bersicht der Option fr background-size
contain
4.2.2.2 Beispiel
Das folgende Beispiel soll den Einsatz der Eigenschaft im Bereich einer Website mit einem vollflchigen Hintergrund zeigen. HTML: <html> <head> <title>FF Gemeinlebarn </title> </head> <body id ="img_full_front"> <button id="news_button">Aktuelle News</button> </body> </html> Listing 33: Beispiel Anwendung von background-size (HTML-Teil)
Seite 30 von 40
CSS: #img_full_front{ width:100%; height:100%; margin:0; padding:0; background: url('full.jpg'); background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Listing 34: Beispiel Anwendung von background-size (CSS-Teil) Wie in den beiden Abbildungen zu sehen ist, wird durch die Eigenschaft background-size: cover; das Hintergrundbild auf einer Seite immer mit 100% skaliert. Aufgrund des Seitenverhltnisses und Gre des Browserfensters wird im Hochformat die Hhe und im Querformat die Lnge mit 100% skaliert.
Abbildung 13: Skalierung im Hochformat
Abbildung 14: Skalierung im Querformat Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 31 von 40
4.2.2.3 background-origin
Funktion
Mit der Eigenschaft background-origin kann der Ursprung fr die Positionierung der Hintergrundgrafiken festgelegt werden.
Syntax
background-origin: border-box|padding-box|content-box; Listing 35: Syntax von background-origin
Beispiel
div { div {
width:300px; height:300px; padding:50px; margin:50px; background-image: url('css3-logo.png'); background-origin: content-box; background-repeat:no-repeat; border:2px solid #92b901;
width:300px; height:300px; padding:50px; margin:50px; background-image: url('css3-logo.png'); background-origin: padding-box; background-repeat:no-repeat; border:2px solid #92b901;
Listing 36: background-origin: content-box
Listing 37: background-origin: padding-box
Abbildung 16: Anwendung background-origin: content-box
Abbildung 15: Anwendung background-origin: padding-box
Seite 32 von 40
4.2.2.4 background-clip
Funktion
Mit background-clip legt man fest, welcher Bereich des Elements von der Darstellung des Hintergrundes betroffen sein soll.
Syntax
background-clip: border-box|padding-box|content-box; Listing 38: Syntax von background-clip
Beispiel
div { div {
width:300px; height:300px; padding:50px;; background-color:yellow; background-clip:content-box; border:2px solid #92b901;
width:300px; height:300px; padding:50px;; background-color:yellow; background-clip:padding-box; border:2px solid #92b901;
} Listing 39: background-clip: content-box
} Listing 40: background-clip: padding-box
Abbildung 17: Anwendung background-clip: content-box
Abbildung 18: Anwendung background-clip: padding-box
Seite 33 von 40
4.2.3 Linear Gradient Background

Kompatibilitt
4+
Funktion
3.6+
4+
11.1+ 10+
3.2+
2.1+
11.1+
Mit linear-gradient() ist es mglich Hintergrnde mit linearen Farbverlufen zu fllen.
Syntax
background: linear-gradient(<Anfangspunkt>, <farbe 1> <position 1>, <farbe 2> <position 2>, [<farbe n> <position n>]); white 75%); Listing 41: Syntax von linear-gradient
Beispiel
width: 1400px; height: 300px; background: #848484; /* fr alte Browser */ background: linear-gradient(to bottom, #848484 0%, black 100%); Listing 42: Beispiel Anwendung von linear-gradient()
Abbildung 19: Farbverlauf mit linear-gradient()
Seite 34 von 40
5 Anhang
5.1 Verwendete und weiterfhrende Literatur
5.1.1 HTML5 Leitfaden fr Webentwickler
Plug-In-freie Wiedergabe von Video & Audio, neue Wege der Interaktion, mehr Semantik und Struktur - der kommende Webstandard HTML5 bietet schon heute mehr Funktionalitt und Dynamik fr Webentwickler und -Anwender. Anhand vieler inspirierender Beispielprojekte geben Ihnen unsere Web-Experten Bernd ggl und Klaus Frster erste Einblicke in die klassischen Bestandteile von HTML5 wie u.a. Video, Audio, Canvas, intelligente Formulare, Offline-Applikationen oder Microdata sowie Geolocation, Web Storage, Websockets und Web Workers. [7] ISBN Autoren Verlag Jahr 978-3-8273-2891-5 Klaus Frster, Bernd ggl Addison-Wesley 2011 Abbildung 20: Buch HTML5[6]
5.1.2 Mobile Anwendungen mit HTML5 und CSS3

Entdecken Sie die Mglichkeiten von HTML5 und CSS3 fr die Entwicklung von modernen und plattformbergreifenden Apps. Egal, ob fr Tablets oder Smartphones, fr Android oder iOS. Schnell erhalten Sie ein Gefhl fr die technischen und gestalterischen Mglichkeiten einer mobilen Anwendung. Sie erstellen erste Apps, gestalten Zeitschriften und Bcher fr iPad und Co. und nutzen alle Mglichkeiten der mobilen Gerte. Inkl. Ausbau zu nativen Programmen und dem Einsatz von JavaScript-Frameworks. Abgerundet wird das Ganze durch eine Anleitung, die Ihnen zeigt, wie Sie Ihre Anwendung in Apples App Store und Google Play verffentlichen knnen. [9] ISBN Autoren Verlag Jahr 978-3-8362-1848-1 Florian Franke, Johannes Ippen Galileo Computing 2012 Abbildung 21: Buch Apps mit HTML5 und CSS3[8]
Seite 35 von 40
5.1.3 Ntzliche Webseiten

www.html5rocks.com Die Website www.html5rocks.com ist ein Projekt von Google. Dies erklrt auch die groe Anzahl an Autoren der Seite die bei Google arbeiten. Aber auch andere Autoren der Firmen Adobe oder Opera arbeiten am Projekt mit. Diese Entwickler erklren die neuen HTML5-Funktionen und schreiben Tutorials. Auf der grundstzlich englischsprachigen Website sind aber auch Teile in Deutsch bersetzt. Aktuell sind 59 Autoren hauptschlich Browserentwickler - an dem Projekt beteiligt. W3Schools ist eine hnliche Seite wie www.html5rocks.com. Hier werden ebenfalls die Erneuerungen von HTML5 vorgestellt. Die Seite bietet auch die Funktion gleich die neuen Funktionen direkt auf der Seite auszuprobieren. Die offizielle Website des W3C enthlt alle offiziellen Spezifikationen der einzelnen Drafts zu HTML5. Die offizielle Website der WHATWG mit den von der WHATWG eigens erarbeiteten Spezifikationen Diese Website beschftigt sich so wie es der Name schon sagt ausschlielich mit CSS. Und hierbei nicht nur mit CSS3.
www.w3schools.com
www.w3c.org www.whatwg.org www.css-tricks.com www.caniuse.com
Diese Website bietet einen detaillierten berblick ber den aktuellen Stand der Implementierung von HTML5 und CSS3 in die Browser. Tabelle 11: bersicht ntzlicher Webseiten
Seite 36 von 40
5.2 Abbildungsverzeichnis
Abbildung 1: Tim Berners-Lee[1]...........................................................................................................................3 Abbildung 2: Logo des W3C[2]...............................................................................................................................3 Abbildung 3: Browserkompatibilitt von HTML5 (Stand: 31.03.2013)..........................................................6 Abbildung 4: Input-Type date............................................................................................................................17 Abbildung 5: Input-Type number.....................................................................................................................18 Abbildung 6: Input-Type color...........................................................................................................................18 Abbildung 7: Fehlermeldung bei falscher Eingabe..........................................................................................20 Abbildung 8: Bei richtiger Eingabe wird das Formular submitted................................................................20 Abbildung 9:Fehlermeldung bei nicht erfolgter Eingabe................................................................................21 Abbildung 10: Zustzliche Anzeige des Status invalid................................................................................21 Abbildung 11: Zustzliche Anzeige des Status valid...................................................................................21 Abbildung 12: Kubische Bzierkurve[4]..............................................................................................................27 Abbildung 13: Skalierung im Hochformat.........................................................................................................31 Abbildung 14: Skalierung im Querformat..........................................................................................................31 Abbildung 15: Anwendung background-origin: padding-box.......................................................................32 Abbildung 16: Anwendung background-origin: content-box........................................................................32 Abbildung 17: Anwendung background-clip: content-box............................................................................33 Abbildung 18: Anwendung background-clip: padding-box...........................................................................33 Abbildung 19: Farbverlauf mit linear-gradient()...............................................................................................34 Abbildung 20: Buch HTML5[6].............................................................................................................................35 Abbildung 21: Buch Apps mit HTML5 und CSS3[8]........................................................................................35
Seite 37 von 40
5.3 Tabellenverzeichnis
Tabelle 1: bersicht Browser Prfixe..................................................................................................................11 Tabelle 2: Bereiche im Cache-Manifest.............................................................................................................14 Tabelle 3: bersicht von allen neuen Input-Typen..........................................................................................16 Tabelle 4: bersicht von allen neuen Attributen...............................................................................................19 Tabelle 5: Kompatibilitt von Video Formaten mit dem HTML5-Video-Tag.............................................22 Tabelle 6: Methoden von Video- und Audioelementen in HTML5...............................................................23 Tabelle 7: Einzelne Eigenschaften von transition............................................................................................27 Tabelle 8: bersicht der Bzierkurven fr das Timing der Eigenschaft transition...................................28 Tabelle 9: bersicht der neuen Eigenschaften beim Background in CSS3................................................29 Tabelle 10: bersicht der Option fr background-size...................................................................................30 Tabelle 11: bersicht ntzlicher Webseiten......................................................................................................36
Seite 38 von 40
5.4 Listings
Listing 1: HTML Beispiel..........................................................................................................................................8 Listing 2: CSS Beispiel..............................................................................................................................................8 Listing 3: JavaScript Beispiel..................................................................................................................................9 Listing 4: Beispiel - Einsatz von Prfixen...........................................................................................................11 Listing 5: Beispiel Prfixe bei den Gradienten Funktion.............................................................................11 Listing 6: LocalStorage Speichern eines Wertepaares...............................................................................12 Listing 7: LocalStorage Auslesen eines Wertepaares................................................................................12 Listing 8: LocalStorage Lschen eines Wertepaares.................................................................................12 Listing 9: LocalStorage Lschen aller Wertepaare......................................................................................12 Listing 10: SessionStorage Speichern eines Wertepaares........................................................................13 Listing 11: SessionStorage Auslesen eines Wertepaares.........................................................................13 Listing 12: SessionStorage Lschen eines Wertepaares...........................................................................13 Listing 13: SessionStorage Lschen aller Wertepaares.............................................................................13 Listing 14: Einbinden des Cache Manifestes in einer HTML-Datei.............................................................14 Listing 15: Beispiel - Cache Manifest.................................................................................................................15 Listing 16: Input-Element Datum........................................................................................................................17 Listing 17: Syntax Input-Type number............................................................................................................18 Listing 18: Syntax Input-Type color.................................................................................................................18 Listing 19: Beispiel - Pattern................................................................................................................................20 Listing 20: Syntax required-Attribut....................................................................................................................21 Listing 21: Beispiel - CSS Pseudo-Selektoren valid und invalid...................................................................21 Listing 22: Einbinden eines Videos in HTML5..................................................................................................22 Listing 23: Beispiel Verwendung von HTML5-Video Methoden in JavaScript......................................23 Listing 24: Syntax der calc()-Funktion...............................................................................................................24 Listing 25: Beispiel Anwendung der CSS3 Funktion calc()........................................................................24 Listing 26: Syntax von opacity.............................................................................................................................25 Listing 27: Beispiel Anwendung von opacity....................................................................................................25 Listing 28: Syntax von border-radius.................................................................................................................26 Listing 29: Beispiel - Anwendung des border-radius......................................................................................26 Listing 30: Syntax von transition.........................................................................................................................27 Listing 31: Beispiel - Anwendung von transition.............................................................................................28 Listing 32: Syntax von background-size...........................................................................................................30 Listing 33: Beispiel Anwendung von background-size (HTML-Teil).......................................................30 Listing 34: Beispiel Anwendung von background-size (CSS-Teil)...........................................................31 Listing 35: Syntax von background-origin........................................................................................................32 Listing 36: background-origin: content-box.....................................................................................................32 Listing 37: background-origin: padding-box....................................................................................................32 Listing 38: Syntax von background-clip............................................................................................................33 Listing 39: background-clip: content-box.........................................................................................................33 Listing 40: background-clip: padding-box........................................................................................................33 Listing 41: Syntax von linear-gradient...............................................................................................................34 Listing 42: Beispiel Anwendung von linear-gradient()................................................................................34
Seite 39 von 40
5.5 Literaturverzeichnis
[1] Bild von Tim Berners-Lee. Bild online im Internet: http://www.edht.org.uk/Images/TimBerners-Lee1.jpg, 13.02.2013 [2] Logo des W3C. Bild online im Internet: http://www.w3.org/Icons/w3c_home. , 14.02.2013
[3] W3C erklrt HTML5 fr fertig. Henning Behme, 2012, Online im Internet: http://www.heise.de/ix/meldung/W3C-erklaert-HTML5-fuer-fertig-1770814.html, 13.02.2013 [4] Kubische Bzierkurve. Bild online im Internet: http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Bezier_curve.svg/1000pxBezier_curve.svg.png, 28.03.2013 [5] Bzier curve. IT Wissen.info, , Online im Internet: http://www.itwissen.info/definition/lexikon/Bezier-Kurve-Bezier-curve.html, 27.03.2013 [6] Bild von Buch HTML5 - Leitfaden fr Webentwickler. Bild online im Internet: http://www.edvbuchversand.de/image.php?cnt=10&id=aw-3155, 10.03.2013 [7] Klaus Frster, Bernd ggl, HTML5 - Leitfaden fr Webentwickler, 2011
[8] Bild von Apps mit HTML5 und CSS3. Bild online im Internet: http://cover.galileopress.de/9783836218481.jpg, 10.03.2013 [9] Florian Franke, Johannes Ippen, Apps mit HTML5 und CSS3, 2012
Seite 40 von 40

Neue Webtechnologien HTML5 &amp; CSS3

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Neue Webtechnologien HTML5 &amp; CSS3

Hochgeladen von

Copyright:

Verfügbare Formate

HTML5 & CSS3

Jakob Vesely Reife- und Diplomprfung 2013

2 Grundlagen zu HTML, CSS und JavaScript............................................7

3.4 Formulare.....................................................................................................................16 3.5 Audio/Video..................................................................................................................22

5.2 5.3 5.4 5.5

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

1 HTML und seine Geschichte

1.2 Die Entwicklung von HTML5 beginnt

Europische Organisation fr Kernforschung bei Meyrin (Schweiz)

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

1.3 HTML Aktuell und Zukunft

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

1.3.1 Kompatibilitt von Browsern

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

2 Grundlagen zu HTML, CSS und JavaScript

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Offline und Speicher

3D/Grafik und Effekte Leistung und Integration

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.2 Browser Prfixe

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Speichern eines Wertepaares:

Auslesen eines Wertepaares:

Lschen eines Wertepaares:

Lschen aller Wertepaare im localStorage:

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Auslesen eines Wertepaares:

Lschen eines Wertepaares:

Lschen aller Wertepaare im localStorage:

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.3.3 Cache Manifest

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.4.1 Neue Input Typen

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.4.1.1 Datum "date"

Funktion und Syntax

Abbildung 4: Input-Type date

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.4.1.2 Zahlen "number"

Funktion und Syntax

3.4.1.3 Farben "color"

Funktion und Syntax

Abbildung 6: Input-Type color

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.4.2 Neue Attribute

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Funktion und Syntax

Funktion und Syntax

Zustzliches Styling im CSS

Abbildung 11: Zustzliche Anzeige des Status valid

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Ogg Nein Ja Ja Nein Ja

Kompatibilitt Video Formate

Steuern mit JavaScript:

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Methode addTextTrack() canPlayType() load() play()

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

3.1+ 10.5+ 10+

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely

Neue Webtechnologien HTML5 & CSS3

Neue Webtechnologien HTML5 & CSS3