HTML5 Tutorial


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:html5 number opera
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:html5 range opera
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:html5 datetime opera
html5 datetime opera
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&gt </canvas>

Ein Canvas (weiß), welcher ein balues Rechteck beherbergt. das ganze zieht erstmal nicht sonderlich spetakulär aus, das gebe ich zu:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Ein Koordinatensystem, welches durch die canvas-Funktionen moveTo() und lineTo() erzeugt worden ist:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Eine Rotation des gesamten Zeichensystems:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Eine Skalierung des Zeichensystems. In diesem Fall wird die x- und y-Achse mit dem Faktor 1,5 skaliert (vergrößert):

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Bildermanipulation

Selbstverständlich können auch Bilder in Canvas-Objekte eingefügt und manipuliert werden. Im Beispiel wurde das Bild verkleinert angezeigt:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Hier wird ein Bildausschnitt aus dem Canvas pixelweise ausgelesen und unten rechts angezeigt:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Farbverlauf

Es lassen sich mit einfachsten Mitteln ohne Bildbearbeitunsgprogramme, wie Photoshop oder Gimp, ein komplizierter Farberverlauf erstellen:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser

Es lassen sich auch kreisförmige Verläufe erzeugen, allerdings kommt es dabei in verschiedenen Browsern meist zu unterschiedlichen Ergebnissen:

html5 canavas operaIhr Browser kann diese Grafik leider nicht darstellen.
Darstellung in Opera 11.01Ihr Browser
html5 canavas operahtml5 canavas opera
Darstellung in Chrome 8.1Darstellung in Firefox 3.6.1
html5 canavas operahtml5 canavas opera
Darstellung in Safari 4.1Darstellung in Internet Explorer 8.1

Nach dem Buch: