Die neuen Funktionen und Anwendungen von HTML5 im Überblick
Die neuen Formulare
Auch bei Formularen hat HTML5 interessante Neuerungen implementiert. Die Benutzerfreundlichkeit wird durch die neuen Funktionen verbessert, die zwar schon vorher durch Javascript-Bibliotheken vorhanden waren, jedoch jetzt endlich auch ohne aktiviertes Javascript benutzt werden können. Dies gilt im Übrigen für fast alle neuen Funktionen.
number
Mit einem einem input-Formular des Typs number, ist es möglich Zahlenwerte vom User einfacher abzufragen, sowie einen Wertebereich sowie einen Mindestabstand zwischen den möglichen Wahlwerten vorzugeben ohne den User mit komplizierten Regeln zu überfordern.
Aktuell kann nur Opera diesen Typ darstellen. <input type="number" min="18" max="65" step="1">
| Darstellung in Opera 11.01: |  |
| Ihr aktueller Browser: |
range
Das range-Element erzeugt einen Schieberegler mit denselben Funktionen wie das number Formular.
Aktuell kann nur Opera, Safari und Chrome diesen Typ darstellen. <input type="range" min="18" max="65" step="10">
| Darstellung in Opera 11.01: |  |
| Ihr aktueller Browser: |
url, telephone und email
Das <url> Element dient zur Eingabe von URLs und ist besonders auf dem iPhone empfehlenswert, weil dort bei der Eingabe eine spezielle Tastatur eingeblendet wird.
Es existieren auch spezielle Eingaben für Telefonnumern, Emailadressen und Suchfelder. <input type="url">
datetime
Das <datetime> Element dient zur Eingabe von Datumswerten. Es ist besonders, wenn Eingaben von Benutzern valide eingelesen werden sollen, wenn bspw. Daten in eine Datenbank geschrieben werden sollen oder damit Berechnungen durchgeführt werden sollen.
Aktuell kann nur Opera diesen Typ darstellen. <input type="datetime">
| Darstellung in Opera 11.01: |   |
| Ihr aktueller Browser: |
Die Geolocation-API
Mit Hilfe der Geolocation Schnittstelle soll es jetzt möglich sein, die Position des Users zu bestimmen, wenn dieser einwilligt(!) seine Geo-Daten freizugeben. Dabei wird die x und y Koordinate auf der 2 dimensionalen Erdoberfläche des jeweiligen Gerätes (Pc,Laptop, Handy) über Dienste des Betriebssystems ausgelesen. Aktuell kann nur Firefox, Safari, Opera, Chrome diese Daten liefern. Zum Testen können Sie gern die von mir programmierte Seite wo bin ich jetzt.de besuchen und sich dort selber orten mit Ihrem Browser.
Das <time> Element
Mit dem neuen <time> Element ist es nun möglich einen suchmaschinenlesbaren Zeitstempel für Artikel oder Teile einer Webseite zu definieren.
Es ist absehbar, dass ein solcher Content bevorzugt von Suchmaschinen behandelt wird, weil dadurch die vierte Dimension
für Google und Co freigegeben wird. Dieses Tag ist besonders wichtig für Content-Provider.
<time datetime="2010-07-06T14:18:00Z" pubdate>06.07.2010 um 14:18 Uhr </time>
Das <mark> Element
Das <mark> Element hebt für den User und
insbesondere für Suchmaschinen wichtige Schwerpunkte hervor. Schlüsselwörter können so nicht nur im Header sondern auch im Text markiert werden, um mehr Informationen über den Inhalt einer Webseite zur Verfügung zu stellen.
Wenn für den Hintergrund keine Farbe angegeben wird, dient dieses neue HTML-Tag der Erschließung des Inhaltes von Webseiten durch Suchmaschinen.
<mark style="background-color:yellow;">Element</mark> Element
Das <canvas> Element
Das <canvas> Element ist eines der interessantesten, leistungsfähigsten und verwunderlicher Weise auch das am weitesten
implementierte HMTL5 Feature. Alle gängigen Browser und sogar der Internet Explorer ab Version 6 unterstützen dieses Feature.
Im Prinzip ist es programmierbares Bild-Element mit dem sich Videos und Animationen erstellen lassen, wie
es zur Zeit nur mit dem Flash-Format möglich ist. Da Flash allerdings nicht vom iPhone unterstützt wird und außerdem für die Entwicklung
erst eine extrem teure Lizenz erworben werden muss, wird sich auf langer Sicht das canvas-Element durchsetzen.
Die Dynamik dieses Elements wird dadruch möglich, dass der Inhalt pixelgenau mit Javascript nach eigenen Wünschen verändert werden kann in 2D, 3D und 4D. An 5D arbeiten die Physiker noch.
<canvas> </canvas>
Ein Canvas (weiß), welcher ein balues Rechteck beherbergt. das ganze zieht erstmal nicht sonderlich spetakulär aus, das gebe ich zu:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Ein Koordinatensystem, welches durch die canvas-Funktionen moveTo() und lineTo() erzeugt worden ist:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Eine Rotation des gesamten Zeichensystems:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Eine Skalierung des Zeichensystems. In diesem Fall wird die x- und y-Achse mit dem Faktor 1,5 skaliert (vergrößert):
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Bildermanipulation
Selbstverständlich können auch Bilder in Canvas-Objekte eingefügt und manipuliert werden. Im Beispiel wurde das Bild verkleinert angezeigt:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Hier wird ein Bildausschnitt aus dem Canvas pixelweise ausgelesen und unten rechts angezeigt:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Farbverlauf
Es lassen sich mit einfachsten Mitteln ohne Bildbearbeitunsgprogramme, wie Photoshop oder Gimp, ein komplizierter Farberverlauf erstellen:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
Es lassen sich auch kreisförmige Verläufe erzeugen, allerdings kommt es dabei in verschiedenen Browsern meist zu unterschiedlichen Ergebnissen:
 |
|
| Darstellung in Opera 11.01 | Ihr Browser |
 |
 |
| Darstellung in Chrome 8.1 | Darstellung in Firefox 3.6.1 |
 |
 |
| Darstellung in Safari 4.1 | Darstellung in Internet Explorer 8.1 |
Links:
Open Video Sliding Puzzle – Bilder Puzzle
html5rocks – Powerpoint Website-Scolling, alle neuen HTML5 Features interaktiv
Frameworks:
InfoVis Toolkit – Javascript Visualisierungsbibliothek
Raphaël – Framework für Canvas
Processing.js – Framework für Canvas, vom Entwickler von JQuery John Resig
Nach dem Buch:
