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!
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.
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;
}
}
Aufgabe1: 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:
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 1:
· 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.
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. Disen 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);
HTML5 Neuerung - Webfonts :
@font-face war zwar schon Teil von CSS2, aber wurde von 2.1 auf CSS3 verschoben, da die Probleme mit der Lizensierung erst gelöst werden mussten.
WOFF (Web Open Font Format) ist ein vom W3C standardisiertes Format für Web-Schriften, das die Formatvielfalt und Unsicherheit der frühen Webfonts beendet. WOFF ist ein komprimiertes TTF mit zusätzlichen Informationen, das von den Mainstream-Browsern und Font-Designern unterstützt wird.
WOFF wird von allen Aktuellen Browsern unterstüzt. (IE ab v.9)
per CSS einbinden:
Dateiname der Schrift im Webordner +
|
@font-face { font-family: Route; src: url(coolerFont.woff); }
^ ^ ^ ^
| | | |
| | | +- Link zur Schriftdatei
| | |
| | +- Frei wählbarer Name für die Schrift
| |
| +- Schriftart
|
+- @font-face-Regel zum Einbinden einer Schriftdatei
Mit allen Prefixes beste art der Einbindung mit Fallback:
@font-face {
font-family: 'coolerFont';
src: url('../../fonts/coolerFont-webfont.eot');
src: url('../../fonts/coolerFont-webfont.eot?#iefix') format('embedded-opentype'),
url('../../fonts/coolerFont-webfont.woff') format('woff'),
url('../../fonts/coolerFont-webfont.ttf') format('truetype'),
url('../../fonts/coolerFont-webfont.svg#webfontj1CI1MAi') format('svg');
}
Mit CSS nutzen:
font-family: 'coolerFont', arial, sans-serif;
^
|
|
+- Fallback
per HTML einbinden:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
