home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Allgemeines zu HTML 5

HTML 5 ist kein neues HTML im Sinne von richtig neu, sondern es dient einfach nur der Verbesserung des "alten" HTML.

Heißt, dass es neue Funktionen,Tags und Input-Typen gibt, welche das Leben des Web-Entwickler respektive der Web-Entwicklerin vereinfachen soll.

Zum anderen wurden lange notwendige Standardisierungen, welche lange Zeit über nur als "de-facto-Standard" da waren, durchgeführt. 

Des Weiteren ist es zum ersten Mal der Versuch, über die neuen HTML 5 Funktionalitäten hinaus, die sogenannten "de-facto-Standards" formell zu dokumentieren. 

Neue Elemente (Tags)

Das <video>-Tag

Eines der wichtigsten neuen Elemente unter HTML 5 ist sicherlich das <video> -Tag. Über dieses Tag kann man Videos in die eigene Webseite einbinden.

Um diesen Vorteil zu verstehen, muss man wissen, dass bis HTML5 bisher Videos nur durch externe Plug-ins wie Apple QuickTime oder Adobe Flash möglich war.

Diese Element wurde so entworfen,dass es ohne Erkennungsskripte genutzt werden kann. 

Dabei geht man eben so vor,dass man für die jeweiligen Browser die unterstützten Videoformate in der Hinsicht unterstützt, in dem man die Videos in mehreren Formaten zur Verfügung stellt.

Wenn man beispielsweise nur den Firefox unterstützen wollen würde, so wäre ein Video im Theora-Format benötigt(.ogg bzw.ogv). Beim Internet Explorer wäre es aber beispielsweise MP4(.mp4).

Ein weiterer Vorteil ist, dass Browser die HTML 5 nicht unterstützen, diesen Tag einfach ignorieren.

Die unterschiedlichen Video-Formate erhält man durch eine Konvertierung des ursprünglichen Formats in das gewünschte Zielformat. Hierbei helfen Tools wie der Miro Video Converter.

Im folgenden ein kleines Anwendungsbeispiel, wo mehrere Videos eingebettet werden:

 

<html>

<head>

</head>

<body>

<h1>Video</h1>

<video width="320" height="240" autoplay controls>

<source src="Video0009.mp4" type="video/mp4" />

<source src="Video0009.ogv" type="video/ogg" />

</video>

</body>

</html>

 

In diesem Beispiel fällt vor allem der befehl 'autoplay control' im öffnenden video-Tag auf. Das 'autoplay' wird dafür verwendet, um das Video automatisch beim Laden der Seite zu starten. Der Befehl 'controls' wiederum ist dafür da, dass der Benutzer das Video pausieren,wiederholen oder vorspulen kann. Heißt, es gibt dem Benutzer quasi Kontrolle über das abspielen des Videos.

Weitere Strukturelemente

HTML 5 dreht sich nicht nur darum, bestehendes Markup zu verkürzen, sondern es definiert außerdem  einige neue Strukturelemente. All jene Strukturelemente die im folgenden behandelt werden mussten vor HTML 5 über <div>-Blöcke und entsprechende IDs voneinander abgetrennt werden. Um nun eben nicht in dieser "div-Hölle" zu ersticken hat man sogenannte semantische Elemente bei HTML 5 hinzugefügt. Damit ist einfach nur gemeint, dass diese Strukturelemente genau die Struktur erfüllen bzw. abgrenzen, die auch semantisch mit der Benennung des Bezeichners verdeutlicht wird. Wie zum Beispiel <nav> einfach nur für "navigieren" steht und genau das soll auch in einen solchen Bereich rein, Elemente die zur Navigation dienen. In der Vorlesung wurden einige angesprochen, wobei es zu zweien nun eine kurze Erklärung gibt, was dieses Element bewirkt:

<nav>

Dieses Element beschreibt einen Abschnitt einer Seite, der auf andere Seiten oder oder Teile in der Seite verlinkt. Dies bedeutet nun aber nicht, dass man alle Linkgruppen in einem nav-Element stehen müssen. Es reicht beipielsweise immer noch aus, wenn man die Verweise am Fuße einer Website, die innerhalb der gleichen Seite navigieren, mit einem footer-Element ohne ein umschließendes nav-Element benutzt.

Ein kleines Anwendungsbeispiel, wo es einfach dazu benutzt wird zur nächsten und vorherigen Seite zu navigieren und auf die Home-Seite:

<html>

<head>

<title>navigation tag Example.</title>

</head>

<body>

<h2>Example of &lt;nav&gt; navigation tag of HTML5.</h2>

<nav>

<a href="http://www.roseindia.net/tutorial/html/html5/HTML5hrTag.html">

Previous</a> <a href="http://www.roseindia.net/">Home</a> <a

href="http://www.roseindia.net/services/">next</a>

</nav>

<br>

</body>

</html>

 

 <article>

Dieses Element beschreibt eine abgeschlossene Einheit in einem Dokument, einer Anwendung oder einer Website, die seperat vom Rest der Site verbreitet oder wiederverwendet werden kann, wie beispielweise bei RSS-Feads. Oder beispielweise ein Forenbeitrag oder ein Blog-Eintrag sein.

<article>

<h4>Umweltfreundliche Städte 2032</h4>

<p>Die Regierung plant bis zum Jahre... einen Abbau des

CO2-Gehaltes</p>

[...]

<p>Des Weiteren soll der Anteil an Elektroautos dramatisch erhöht

werden</p>

<p>Konstanz, den 14.06.2006</p>

</article>

Zur Vertiefung der einzelnen Struktur-Elemente kann man diese Einführung empfehlen, welche einen sehr guten Überblick gibt.

input-Typen

 

Im Zuge der HTML 5 Neuerungen gibt es in HTML 5 nun eine ganze Reihe von neuen input-Typen. Bisher konnte man bei Webformularen vielleicht einen input-Type 'password' oder 'submit' verwenden.

HTML 5 bietet hierbei einige Neuerungen vor allem im Bezug auf Smartphones. Dank der neuen Typen, kann man durch die neuen Typen sogar bestimmen, welche Tastatur erscheint beim Klick auf das Texfeld.

 

//Suchfelder:

<input type="search">

//Zahlenfelder:

<input type="number">

//Telefonnummern:

<input type="tel">

//Webadressen:

<input type="url">

//Email:

<input type="email">

//Datum:

<input type="type">

//Farbwähler:

<input type="color"

 

Zur Zeit werden aber noch nicht alle neuen Typen von jedem Browser unterstützt. Vor allem die Browser,die häufig Verwendung finden, wie Firefox, Chrome und Internet Explorer unterscheiden sich hierbei sehr stark. Wie bereits oben genannt ist der größte Vorteil vor allem bei "mobile devices", da bei diesen die richtige Tastatur automatisch eingeblendet wird. Ein weiteres Argument für diese neuen Typen besteht auch darin, dass man mit den Typen bereits Funktionen "mitgeliefert" bekommt, die überprüfen ob beispielsweise ein Datum korrekt ist. Hierfür musste man vor HTML 5 eine JavaScript-Funktion definieren die diese Überprüfung an Hand eines regulären Ausdrucks bspw. überprüft.

Weitere wichtige HTML 5-Technologien

Im folgenden möchte ich noch kurz auf drei Beispiele für weitere HTML 5 Neuerungen eingehen , die  sehr nützlich sind.

Geolocation

Geolocation ist die "Kunst", herauszufinden, wo Sie sich auf der Welt befinden, und dies (aber nur wenn man es auch möchte) allen anderen mitzuteilen, denen man vertraut. Hierbei gibt es unterschiedliche Art und Weisen den eigenen Standort herauszufinden- über die IP-Adresse,WLAN oder spezielle GPS-Hardware. Im folgenden ein Code, der aufzeigt, wie Geolocation bspw. verwendet wird, um die ausgelesen Daten an Google Maps weiterschickt.

Ein Beispiel in dem die Standortdaten an Google-Maps verschickt werden:

 

[...]

function getLocation() {

if (navigator.geolocation) {     

// Funktion showPosition aufrufen, wenn Geolocation verfügbar

  navigator.geolocation.

getCurrentPosition(showPosition,hand_error);

} else {

    document.getElementById('result').innerHTML ="Ihr Browser"+

"unterstützt leider die Geolocation-Funktion nicht!";

}  

}          

function showPosition(position) {  

currentPos = position.coords.latitude+","+position.coords.longitude;

document.getElementById('result').innerHTML = "<a href=

'http://maps.google.com/?hl=en&q=loc:" +

currentPos + "'>Auf Google Maps anzeigen</a>";

    }

[...]

 

Wichtig ist hierbei vor allem, dass die Methode 'getCurrentPosition()' immer zwei Parameter übergeben bekommen muss. Hier wird nun einfach eine zweite Funktion namens 'hand_error', welche eine Fehlerbehandlung durchführt, definiert. Über die Funktion "showPosition" liest man die Standortdaten des aktuellen Systems aus und speichert diese in einer Variablen. Diese werden dann an Google-Maps weitergeleitet.

Local Storage

Persistente lokale Speicherung ist einer der Bereiche, in denen Clientanwendungen Webanwendungen überlegen waren. Daher wurden Cookies früh in der Geschichte des Webs erfunden und können dazu genutzt werden, um kleine Datenmenge dauerhaft lokal zu speichern. Dies hat aber folgende Nachteile:

  • Cookies werden in jede HTTP-Anfrage eingeschlossen und bremsen dadurch die eigenen Webanwendungen aus.
  • sehr geringe Speicherkapazität, aber genug um die Anwendung auszubremsen

Deshalb hat man nach einer ernsthaften Alternative hierzu gesucht und hat bei HTML 5 mit dem sogenannten "Local Storage" oder auch "Web Storage" eine Technologie geschaffen, die die oben genannten Nachteile nicht hat. "Local Storage" bedeutet einfach gesagt nicht anderes, als das der Browser die Möglichkeit hat, benannte Wert-Paare lokal im Client Webbrowser zu speichern. Nach schließen des Browsers bleiben die gespeicherten Daten vorhanden. Im Gegensatz zu Cookies werden hierbei aber die Daten niemals verschickt, außer man macht es manuell.

Im folgenden ein kleines Beispiel zum einfach mal ausprobieren, wie das aussieht. Hier das "Herzstück" des Codes für einen Local Storage:

 

 

 

[...]

<script type="text/javascript">

function save() {

window.localStorage.

setItem('Eingabe1', document.test.Eingabe1.value);

window.localStorage.

setItem('Eingabe2', document.test.Eingabe2.value);

}

function wiederherstellen() {

document.test.Ausgabe1.value =

window.localStorage.getItem('Eingabe1');

document.test.Ausgabe2.value =

window.localStorage.getItem('Eingabe2');

}

</script>

[...]

 

In der Funktion save sieht man einen der beiden Schlüsselwörter, die zur Erstellung eines Local Storage benötigt werden. Der Aufruf 'window.localStorage.setItem('key',value)'dient dazu,dass ein Storage angelegt wird in Tabellenform. Die erste Spalte enthält den Schlüssel zum wieder Aufruf der gespeicherten Daten.In der zweiten Spalte wird der eigentliche Wert gespeichert. An Hand des in save() definierten Schlüssels wird nun der gespeicherte Inhalt geladen und in eine Textbox weitergeleitet. 

 

Local Storage
Erster zu speichender Wert
Zweiter zu speichender Wert
Storage Ausgabe 1
Storage Ausgabe 2

<canvas>-Element

Zu guter letzt möchte ich noch kurz auf das <canvas>-Element eingehen. Unter HTML 5 wird es wie folgt definiert:" Das <canvas>-Element ist eine auflösungsabhängige Bitmap-Leinwand zur unmittelbaren Zeichnung von Diagrammen,Spielgrafiken und anderen visuellen Bildern." Oder kurz gesagt ist Canvas ein Rechteck in unserer Seite, in das man mit Hilfe von JavaScript nach belieben zeichnen kann. Doch wie sieht denn eigentlich nun ein Canvas aus? Nun eigentlich nicht sehr spannend, denn ein <canvas>-Element hat an sich keinen Inhalt oder Rahmen und sieht wie folgt aus:

 

[...]

<canvas width="400" height="325" id ="b"></canvas>

[...]

 

Dem kann man leicht Abhilfe schaffen, in dem man einen onclick-Handler einsetzt, um eine Funktion aufzurufen mit der man anfangen kann zu zeichnen. Hier ein kleines Beispiel, wie man mit Hilfe von JavaScript nun ein Rechteck zeichnet.

In der zweiten Zeile beginnt nun das eigentliche Malen, indem man die Dimension der Zeichnung angibt. Hierbei muss gesagt sein,dass es im Moment noch kein 3D-Canvas gibt. In der dritten Zeile lässt man nun ein Rechteck malen mit dem aktuellen Füllstil, welches aktuell auf schwarz(default) gesetzt ist. Der Default-Wert kann natürlich beliebig geändert werden. So nun haben wir ein schwarzes Rechteck zeichnen lassen. Hierbei möchte ich es in diesem Zusammenhang auch belassen. Genaueres dazu findet ihr im Internet, HTML-Slide und natürlich auch in zahlreicher Literatur.

 

[...]

function draw(){

var canvas = document.getElementById("b");

var context = canvas.getContext("2d");

context.fillRect(50,25,150,100);

}

[...]