Haupt-Ziele für HTML5
-
Neue Funktionen/Features, basierend auf HTML, CSS und Javascript
-
Reduzieren der Notwendigkeit externer Plugins (wie Flash)
-
Bessere Fehler-Behandlung
-
Geräte-Unabhängigkeit
-
Mehr Markup-Elemente sollen Skripte ersetzen
-
Der Entwicklungsprozess sollte für die Öffentlichkeit einsehbar sein
Wichtigste Neuerungen in HTML5
-
Das Video- und Audio-Element welche endlich einen standardisierten, einfachen Weg zur multimedialen Website bieten sollen.
-
Bessere Methoden Daten offline zu speichern
-
Das Canvas-Element
-
Die Content-spezifischen Elemente (section, article, nav, etc.)
-
Die Formular-Elemente, welche unnötige Programmierarbeit ersparen und bessere Benutzerfreundlichkeit herstellen sollen.
-
Geolocation soll es ermöglichen den Standpunkt des Benutzers auf Anfrage zu ermitteln.
(Quelle: http://www.compufreak.info/wp-content/uploads/downloads/2011/01/Einstieg-in-den-Umstieg-auf-HTML5.pdf)
Weiterführende Links:
http://www.drweb.de/magazin/html5-ueberblick/
http://www.compufreak.info/wp-content/uploads/downloads/2011/01/Einstieg-in-den-Umstieg-auf-HTML5.pdf
Die folgenden Inhalte wurden verfasst von Fr.Hase
Das Video-Element
Das war überfällig: ein natives Browserobjekt, das ohne Plugin-Krücken Videodateien abspielen kann und über CSS gestalten und mit javascript angesprochen werden kann. Ein Schönheitfehler ist, dass sich die Browserhersteller aufgrund lizenzrechtlicher Schwierigkeiten nicht auf ein gemeinsames Videoformat einigen konnten. Aber es ist möglich, als Source mehrere Formate zu hinterlegen; der Browser sucht sich dann das passende aus und stellt es dar. Es gibt momentan drei wichtige Videoformate: mp4 (H264), webM(webM), ogg (Theora/Vorbis). Browser Ogg Theora (.ogg) h.264 (.mp4)
Firefox Ja
Internetexplorer
Opera Ja
Chrome Ja Ja
Safari Ja
iPhone Ja
Android Ja
Die Einbindung eines Videos ist denkbar einfach:
<video id="video" width="480" height="270" controls
poster="img/platzhalter.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
Dein Browser ist leider nicht mit HTML5 kompatibel.
</video>
Die Media-API
Über das controls-Attribut lässt sich der Player steuern. Die Media API ist jedoch ein gutes Beispiel dafür, wie in HTML5 APIs umgesetzt sind, um auf Objekte zuzugreifen. Deswegen – und weil wir komplette Kontrolle über unser Layout und unsere Funktionen haben wollen, denn jeder Browser hat seine eigene Darstellung der playereigenen Interface – bauen wir uns im Folgenden unser eigenes MediaPlayer-Interface. Zum Testen verwenden wir wieder Google Chrome, da im FF und IE jeweils eine Funktionalität nicht zur Verfügung steht.
Aufgabe: MedienInterface erstellen
-
Binden Sie die mitgelieferten Videos wie oben beschrieben in eine HTML5-Webseite ein. Lassen Sie das controls-Attribut dabei weg.
-
Wir brauchen 6 Buttons mit folgenden Beschriftungen: Start/Pause, Stummschalten, Lauter, Leiser, Schneller, Langsamer
-
Wir brauchen eine Fortschrittsanzeige, für das wir ein neues HTML5-Element verwenden: das <progress>-Tag.
Z.B:
<progress id="fortschritt" min="0" value="0" style="width:427px"></progress>
Achtung: Dieses Element ist im Internet Explorer 9 noch nicht implementiert.
Damit wäre der HTML-Teil abgeschlossen.
-
Zunächst programmieren wir eine Funktion, die das Video abspielt: Über eine einfache Statusabfrage lässt sich über den paused-Wert bestimmen, ob per click die pause() oder play()-Methode angewandt wird:
var video=document.getElementById('video');
function start()
{
if (video.paused)
{
video.play();
}
Johannes-Gutenberg-Schule Stuttgart, Zentrum für Druck und Kommunikation Lehrgang HTML5
Göhlich
else
{
video.pause();
}
}
Diese Funktion setzen wir mit einem Onclick-Event auf den Play/Pause-Button.
-
Ähnlich verfahren wir mit den Funktionen für die anderen Buttons. Hier müssen wir keine Methode anwenden, sondern nur entsprechende Werte setzen.
Funktion Werteabfrage, -setzen
Stummschalten video.muted
video.muted = true|false
Lauter/Leiser
Hinweis: Wert darf nicht <0 oder >1
sein!
video.volume
video.volume=0-1
Abspielgeschwindigkeit ändern
Hinweis: Funktioniert nicht im FIrefox
video.playbackRate
video.playbackRate=0-100
Wert 1 ist normale Geschwindigkeit
Für den Fortschrittsbalken benötigen wir die Gesamtlaufzeit des Videos. Diese können wir über element.duration auslesen, doch dazu muss der Browser das Video soweit geladen haben, dass er die Gesamtspielzeit kennt. Woher kennen wir den Zeitpunkt? Praktischerweise gibt es ein Event, das genau dann feuert, wenn der Browser die Metadaten (u.a. die Laufzeit) geladen hat: loadedmetadata. Diesen Wert setzen wir dann auf das Max-Attribut des Fortschrittbalkens:
var fortschritt = document.getElementById('fortschritt');
video.addEventListener('loadedmetadata',function(){
fortschritt.setAttribute('max',video.duration);
});
Jetzt müssen wir noch den Wert des Fortschrittsbalkens analog zur aktuellen Spielzeit des Videos setzen. Dafür rufen wir die currentTime des Videos regelmässig ab:
setInterval(function(){
fortschritt.setAttribute('value',video.currentTime);
},500);
Zum Inhaltsverzeichnis
Das oben erklärte Transition-Verfahren kann auch für Animationen verwendet werden. In folgendem Beispiel lösen wir eine Animation eines HTML-Elements beim Überfahren mit der Maus eines anderen Elementes aus.
Aufgabe: Quadrat animieren
-
Setzen Sie zwei div-Container nebeneinander und versehen beide mit einer id (z.B. div1, div2).
-
Setzen Sie bei beiden divs über CSS position:absolute, Breite, Höhe und Hintergrundfarbe.
-
Definieren Sie zusätzlich bei der zweiten Box:
Transition: 1s all;
für alle Browser. Damit legen wir fest, dass alle CSS Eigenschaften bei einer Änderung einen Übergang von einer Sekunde erfahren.
Zusätlzich legen wir einen Hover-Effekt fest:
#box1:hover+#box2
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
left:627px;
background:#ff0;
color:#000
}
Beachten Sie, dass durch den Operator + die zweite Box angesprochen wird, wenn bei der ersten ein Hover-Ereignis ausgelöst wird.
-
Testen Sie das Ergebnis im Firefox!
Zum Inhaltsverzeichnis
Spätestens seit über jedes Handy auf das Internet zugegriffen werden kann, steigt die Möglichkeit wieder, das zeitweise die Internetverbindung ausfällt. Webapps funktionieren dann nicht mehr – ein Grund, warum Online-Anwendungen, in denen WWW-Applikationen nicht der zentrale Punkt der Applikation sind, noch keine relevante Verbreitung erfahren haben. Mit HTML5 hat man zumindest die Chance, eine gewisse Funktionalität offline-tauglich zu machen.
HTML5 bietet mit DOM Storage eine Form der clientseitigen Datenbank und mit dem Application Cache einen Speicherberich zum Vorladen von statischen Ressourcen – nicht zu verwechseln mit dem herkömmlichen Browsercache. Im folgenden verwenden wir den Application Cache, um Seiten vorzuladen, die wir eventuell später aufrufen wollen.
Der Application Cache
Da beim Internet Explorer die Integration des Application Cache auf die Version 10 verschoben wurde und der Firefox in der Version 13 noch eklatante Fehler beinhaltet, müssen wir unsere Application Cache-Funktion im Chrome testen.
Welche Dateien im einzelnen im Application Cache speichert werden, legt eine separate Textdatei fest, z.B. aus zwei verschiedenen Abschnitten besteht. Die Datei muss UTF-8-codiert sein. Die Pfade zu den Dateien können entweder absolute oder relativ angegeben werden:
CACHE MANIFEST
# Folgende Dateien cachen:
about.html
NETWORK:
#Folgende Dateien nicht cachen:
blog.html
Diese Datei könnten wir cache-manifest.manifest nennen. Damit der Webserver die Datei mit dem richtigen MIME-Type
ausliefert, müssen wir in die Datei .htaccess folgende Zeile hinzufügen:
Addtype text/cache-manifest manifest
Wichtig dabei ist, dass wir das Manifest mit der Dateinamenerweiterung .manifest versehen haben.
Die Einbindung des Cache Manifests ist simpel. Die URL des Manifests wird dem manifest-Attribut im html-Element zugewiesen.
<html manifest= "cache-manifest.manifest">
Besonders beim Entwickeln und testen für verschiedene Browser ist es sinnvoll, die verschiedenen Cache-event abzufragen. Das realieren wir einfach mit per javascript-AddEventListener. Im folgenden wird das Event 'checking' abgefragt.
applicationCache.addEventListener('checking',function()
{
alert('Suche Manifest...')
},false);
Weitere selbsterklärende Manifest-Events: noupdate, downloading,progress,cached,updateready, error.
Aufgabe:
-
Erstellen Sie drei HTML5-Dateien mit je einem Text-Inhalt. Eine Datei (start.htm) muss Links auf die anderen zwei Dateien enthalten. Legen Sie alle Dateien in das htdocs-Verzeichnis unterhalb Ihres xampp-Verzeichnisses ab.
-
Legen Sie ein manifest an, in dem eine verlinkte Datei gecached wird und die andere nicht.
-
Ergänzen oder erstellen Sie die Datei .htaccess in Ihrem htdocs-Ordner.
-
Setzen Sie in der start.htm das manifest im head-Tag ein.
-
Starten den Apache und öffnen Sie Google Chrome. Öffnen Sie über localhost/IhrPfad/start.htm die Startseite mit den beiden Links.
-
Stoppen Sie Ihren Apache wieder und klicken Sie auf den Link zu der Datei, die laut Manifest gecached wurde. Die Seite sollte erscheinen.
-
Probieren Sie das gleiche für die Seite, die nicht gecached ist.
-
Schreiben Sie eine Javascript-Funktion, die alle Manifest-Events ausliest und in einem HTML-Element über innerHTML ausgibt.
-
Leeren Sie den normalen Browser-Cache (Strg+H bei Chrome), wenn Sie die Aktion wiederholen, um sicherzustellen, dass die zu cachende Datei tatsächlich aus dem Application Cache stammt.
Zum Inhaltsverzeichnis
Eine Neuigkeit in CSS3 sind die vielfältigen Möglichkeiten, Texte ein unterschiedliches Aussehen zu geben und sogar zu animieren. Wurde man beispielsweise bei senkrechten Texten (die insbesondere in schmalen Tabellenspalten sinnvoll erschienen) schnell versucht, wieder Bilder als Texte in die Webseite zu integrieren, reicht in CSS3 eine Zeile, um den Text um einen gewünschten Winkel rotieren zu lassen:
transform:rotate(360deg);
Aufgrund von Abwärtkompatibilitätsgründen müssen wir aber für jeden Browsertyp ein entsprechendes Präfix setzen,
also:
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
Ein weiteres echtes Plus ist die neue Angabe transitions, die einen fließenden Übergang zweier Zustände eines HTMLObjekts beschreiben. Dabei müssen wir die CSS-Eigenschaft und nach bedarf einige andere Eigenschaften bestimmen:
transition:color ease-in 0.3s,font-size ease-in 0.3s;
Diese Angabe bewirkt, dass sich der Wert des Attributs color bei einer Änderung innerhalb von 0,3 Sekunden von der Ursprungsfarbe zur neuen Farbe ändert. Sollen weitere Änderungen vorgenommen werden, können diese mit Komma getrennt dahintergeschrieben werden (hier: die Schriftgröße). Die Angabe ease-in beschreibt, welche Art der Transformation angewendet werden soll. Auch hier gilt: die Präfixe sollten gesetzt werden.
Aufgabe: Texte beim Überfahren mit der Maus verändern:
-
Erstellen Sie in einem HTML5-Dokument einen Text und versehen ihn über CSS mit einer Schriftgröße und einer Farbe.
-
Setzen Sie für die Farbe und die Schriftgrösse die Angabe transition.
-
Lassen Sie den Text um 45 Grad gegen den Uhrzeigersinn rotieren.
-
Setzen Sie beim hovern im CSS andere Werte für Farbe und Schriftgrösse.
Zum Inhaltsverzeichnis
Viele Neuerungen in HTML5 finden tatsächlich nicht im „normalen“ HTML statt, sondern beziehen sich auf JavaScript-APIs. Momentan sind Sie meist relativ komplex, noch unvollständig implementiert und daher nicht einfach zu benutzen. Die Ausnahme bietet die eher einfache und gut unterstützte Geolocation-API an, mit der sich relativ verlässliche Informationen über den Standort eines Surfers gewinnen. In allen aktuellen Versionen der Browser ist diese API bereits integriert.
Position auslesen
Die Geolocation-API erweitert das window-navigator-Objekt um ein Objekt geolocation. Zur Bestimmung der aktuellen Position dient die Methode getCurrentPosition().Diese Methode kann drei Parameter entgegennehmen. Der erste ist der Erfolgcallback, dem automatisch als Parameter ein Objekt mitgegeben wird, das wiederum zwei Eigenschaften besteht: coords und timestamp. Der zweite Parameter ist der Fehlercallback und mit dem dritten Parameter kann man ein Array mit Optionen übergeben. Dabei stehen enableHighAccurace, timeout und maximumAge zur Verfügung. enableHighAccurace wird mit einem booleschen Wert (true/false) befüllt und erzwingt eine möglichst exakte Positionierung ohne Rücksicht auf die Ortungsdauer. Mit timeout kann man die Ortungsdauer einschränken. Und maximumAge bestimmt, wie lange die Position in Sekunden gecachet werden soll. Der Wert 0 besagt, dass bei jedem Anfordern der Position diese neu bestimmt wird.
Bsp. Geolocation-Abfrage:
if (navigator.geolocation) // existiert das geolocation-Objekt überhaupt?
{
var opt = {enableHighAccuracy:true}; //jawoll, wir wollen es genau haben.
navigator.geolocation.getCurrentPosition(success, error, opt);
//Aufruf der getCurrentPosition-Methode und den Callback-Funktionen
}
Desweiteren wird der Erfolgscallback als Funktion benötigt, der über das übergebene Objekt position den Längen- und Breitengrad abrufen kann:
function success(position)
{
var long = position.coords.longitude //Längengrad
var lat = position.coords.latitude //Breitengrad
var timestamp = position.coords.timestamp //Zeitangabe
var accurancy= position.coords.accuracy // Genauigkeit der Lokalisierung
}
Dem Fehlercallback wird automatisch ein Fehlercode im Parameter error übermittelt:
function error(error)
{
switch (error.code)
{
case 0 : alert ('UNKNOWN_ERROR');
break;
case 1 : alert ('PERMISSION_DENIED');
break;
case 2 : alert ('POSITION_UNAVAILABLE');
break;
case 3 : alert ('TIMEOUT');
break;
}
}
Aufgabe 1: Ermitteln Sie Ihren momentanen Standpunkt als Längen- und Breitengrad.
-
Erstellen Sie ein HTML5-Dokument.
-
Erstellen Sie ein p-Tag mit der ID 'location'.
-
Erstellen Sie eine Geolocation-Abfrage nach obigem Beispiel.
-
Definieren Sie die Callbackfunktionen für den Erfolgs- bzw. Fehlerfall. Schreiben Sie im Erfolgsfall die Koordinaten, im Fehlerfall eine sinnvolle Fehlerbeschreibung in das p-Tag mit der ID 'location'.
-
Testen Sie das Script im Firefox oder im Internet Explorer.
Aufgabe 2: Google maps anbinden.
Mit den geografischen Angaben als Dezimalwinkel können wir wenig anfangen. Zum Glück stellt Google maps eine eigene Online-API zur Verfügung, über die wir Standpunkte auf einer Landkarte sichtbar machen können.
-
Binden Sie die mitgelieferte Datei googlemap.js und die google-api (online) wie folgt im head-Bereich ein:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="googlemap.js"></script>
-
Setzen Sie in der Erfolgs-Callback-Funktion den Funktionsaufruf
showPositionOnGoogleMap(latitude,longitude,accuracy)
mit der Übergabe von Längen-,Breitengrad sowie Genauigkeit.
Die Google API liefert aufgrund dieser Angaben eine Karte mit dem aktuellen Aufenthaltsort zurück. Im
Browser sollte ein Seitenaufbau wie folgt erfolgen:
Zum Inhaltsverzeichnis
