HTML

Bewertung: 
0
Bisher keine Bewertung

Bildformate im Web

JPG / JPEG (Joint Photographic Experts Group)

Geeignet für: Fotos, Verläufe

Das JPG-Format kann bis zu 16,7 Millionen Farben darstellen und arbeitet mit einer verlustbehafteten (lossy) Kompression. Da die Kompression zu Kantenunschärfe führt, ist diese Format nicht für Bilder mit harten Kanten – wie zum Beispiel Vektorgrafiken – geeignet.
JPGs können in unterschiedlicher Qualität abgepeichert werden. 100% gibt dabei die maximale Qualität an, was aber nicht bedeutet, dass das Bild verlustfrei gespeichert wird.
Ein JPG kann auch als Progressives JPG gespeichert werden. Progressive JPGs setzten sich beim Ladevorgang anders als das normale JPG nicht zeilenweise zusammen, sondern erscheinen von Beginn an als ganzes, aber sehr unscharfes Bild, welches sich nach und nach scharf stellt.

PNG-24 (Portable Network Graphics, 24 Bit)

Geeignet für: transparente Grafiken, Verläufe

Das PNG-24-Format kann bis zu 16,7 Millionen Farben darstellen und unterstützt Transparenz einzelner Farben und Alphakanäle. Man unterscheidet 24-Bit PNGs und 8-Bit PNGs, wobei PNG-8 dem GIF-Format sehr nahe kommt und auch nur 256 Farben unterstützt. Des weiteren unterstützt PNG-8 genauso wie GIF lediglich eine 1bit-Transparenz, wohin gegen PNG-24 auch problemlos Halbtransparenzen darstellen kann. Zu beachten ist, dass der Internet Explorer bis zur Version 6 nicht in der Lage ist Halbtransparenzen zu vearbeiten und darzustellen. Die Kompression bei PNG ist verlustfrei (lossless). Wie beim Progressivem JPG ist ein schneller Aufbau eines Vorschaubildes in niedriger Auflösung möglich, indem man beim Speichern die Option Interlaced wählt.
 

GIF (Graphics Interchange Format)

Geeignet für: animierte Grafiken, transparente Grafiken, Logos, Bilder mit scharfen Kanten

Das GIF-Format unterstützt 256 Farben, mehrere Einzelbilder pro Datei und 1Bit-Transparenz. Die Kompression ist verlustfrei (lossless).
GIFs können als Interlaced gespeichert werden und unterstützen das sogenannte Dithering. Wie beim PNG-8 können hier weitere Einstellungen vorgenommen werden, wie zum Beispiel die Anzahl der Farben und die Kompressionsrate (Lossy).

Das GIF Format bietet heutzutage nur noch wenige Vorteile und wird immer mehr von PNG-8 und SWF abgelöst.

www.zfamedien.de/ausbildung/mediengestalter/tutorials/dictionary.php

 

Bewertung: 
0
Bisher keine Bewertung

HTML-5-Struktur

header
umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.

nav
für Hauptnavigationsblöcke gedacht.

article
ist der Ort für die eigentlichen Inhalte der Seite.  Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten.  article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.

aside
beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.

footer
beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise.  footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

section
Entsprechend der Spezifikation des <article> Elements steht für eine weitere Untergliederung der textuellen Inhalte innerhalb des <article> Elements das <section> Element zur Verfügung. Die einzelnen Abschnitte eines Artikels lassen sich somit semantisch korrekt strukturieren.

 

Das wäre das Grundgerüst:

 

 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

 

Das wäre die Struktur:

<div id="doc">

 

<div id="doc">
<header id="header">
<h1>HTML5 Layout</h1>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
</header>
<section id="content">
<article>
<h2>Artikel Überschrift</h2>
<p>Lorum ipsum...</p>
</article>
</section>
<aside>
<h2>Sidebar</h2>
<p>Lorum ipsum...</p>
</aside>
<footer>
<a href="#">Impressum</a>
</footer>
</div>

Weiterführende Links

http://www.html-seminar.de/html-5-strukturierende-elemente.htm

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

HTML-DOM

Das Document Object Model (DOM) ordnet die Ansammlung von Objekten einer HTML-Seite in einer Objekthierarchie und legt darüber fest, wie die einzelnen Elemente z.B. über JavaScript angesprochen werde können.

Das DOM ist ein durch das W3C festgelegter Standard, der festlegt, wie Objekte durch Scriptsprachen angesprochen werden können. (Interface)

Objekte zeichnen sich durch Eigenschaften (durch Elemente und Attribute) und Fähigkeiten (Methoden: Funktionen, die im Bezug zu einem bestimmten Objekt stehen) aus.

Diese DOM eignet sich nun wohl optimal, um die Ziele eines "dynamischen HTMLs" umzusetzen:

Ziel ist, dass die Elemente einer Seite in ihrer Position und in ihrem Aussehen verändert werden können, ohne dass die Seite neu geladen werden muss.

W3C-Definition "Dynamisches HTML": Kombination aus einer Scriptsprache zur dynamischen Veränderung von Elemente sowie HTML und CSS.

Hierarchische DOM-Baumstruktur:

Diese besteht aus Knoten (folgend die wichtigsten):

  • Elementknoten (Element in HTML oder XML)
  • Attributknoten (Attribut in XML oder HTML)
  • Textknoten (Inhalt des Elements oder Attributs)
  • Kindknoten
  • assoziierte Knoten

Ein HTML-Dokument wird in eine hierarchische Knoten-Struktur gegliedert, so dass ein eingesetztes Script diesen "Baum" als Schnittpunkt erkennt und weiß, wie es die Elemente (Objekte) der Seite ansprechen soll...

siehe auch SelfHTML (http://de.selfhtml.org/dhtml/modelle/dom.htm)

Bewertung: 
0
Bisher keine Bewertung

HTML-Tabellen

Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen. Obwohl teilweise dafür genutzt, sollte man unbedingt auf die Layoutgestaltung mit Tabellen verzichten (siehe barrierefreies Webdesign).

Beispiel:

<table>
<tr>
<td>Print</td>
<td>Digital</td>
</tr>
</table>

Erläuterung

Wie in HTML üblich gibt es bei dem Tabellenaufbau einen Start- und einen End-Tag mit dem der Beginn und das Ende beim Auslesen der Datei beschrieben werden.

<table> Start-Tag
</table> End-Tag

Diese Tabelle hat normalerweise einen Rahmen (border), will man diesen unsichtbar machen muss man border="0" angeben. Möchte man einen dickeren Rahmen kann man natürlich auch Werte eingeben (1= normaler Rahmen, 2, 3, ...) Ohne Rahmen sähe es eingebunden dann folgendermaßen aus:

<table border="0">

tr-Tag

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert <td>Print</td> (td = table data = Tabellendaten). Am Ende einer Tabellenzeile wird ein abschließendes Tag notiert </tr> .

td-Tag oder/und th-Tag

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). 

<th> leitet eine Kopfzelle ein (th = table header = Tabellenkopf)
<td> leitet eine normale Datenzelle  (td = table data = Tabellendaten)

Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert (in diesem Beispiel "Print" und "Digital")

Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren (in XHTML beispielsweise sind Schluss-Tags generell vorgeschrieben).

Aufbaubeispiel (s.o. nur diesmal mit zwei Zeilen)

Das unten stehende Beispiel sieht wie folgt aus:
Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital in fett (als Überschrift/Header <th>) und darunter in normaler Schrift (<td>) CMYK und RGB:

Print      Digital
CMYK    RGB

<table border="1">

<tr>
<th>Print</th>
<th>Digital</th> 
</tr>

<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>

</table>

Desweiteren lassen sich natürlich auch Größe der Tabelle sowie Textanordnung in der Tabelle definieren siehe  Quelle: http://de.selfhtml.org/html/tabellen/aufbau.htm

 

Colspan & Rowspan

Durch Colspan (Anzahl der Spalten) lässt sich erreichen, dass sich eine Zelle  über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen).

In unserem Beispiel sähe das so aus, wenn die Überschrift "Farbräume" über beiden Spalten ("CMYK" und "RGB") stehen soll.

<table border="1">

<tr>
<th colspan="2">Farbräume</th>
</tr>

<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>

</table>

Durch colspan="2" geben wir an über wieviele Spalten sich die Zeile "Farbräume" erstrecken soll. Da wir 2 Spalten haben, also die 2.

Durch Rowspan (Anzahl der Zeilen) lässt sich erreichen, dass eine Zelle in einer Spalte sich über mehrere Zeilen erstreckt (rowspan = Zeilen spannen).

Zurück zu unserem Beispiel:

<table border="1">

<tr>
<th rowspan="2">Farbräume</th>
<td>CMYK</td>
</tr>

<tr>
<td>RGB</td>
</tr>

</table>

Wie man sieht, wird immer der Zelle, die sich über andere Spalten oder Zeilen erstrecken soll, das jeweilige Attribut zugeschrieben.

Quelle: http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm

Bewertung: 
0
Bisher keine Bewertung

HTML-Validierung

Validierung = Überprüfung eines HTML-Dokuments auf Fehler (z.B. in Syntax und Grammatik). Dazu bietet sich der W3C Markup Validation Service an. Nach der Validierung gibt der Validator Auskunft über die Art der Fehler und wo (Zeile) sie im Quellcode zu finden sind.

Für die Validierung ist es wichtig, dass im HTML-Dokument der Doctype richtig bzw. überhaupt gesetzt ist, damit die entsprechenden Validierungsregeln angewandt werden können.

Im Sinne der Validierung fehlerfreie Websites, erhöhen die Wahrscheinlichkeit, dass die Site in jedem Browser korrekt geparsed und fehlerfrei angezeigt wird.

DOCTYPE:
Es gibt 6, dennoch sind nur 4 Zeitgemäß:

XHTML: transitional, strict. Um XML/Beschreibungssprache in der man eigene Tags machen kann/ oder anderen Beschreibungen und Sprachen erweiterbar, das HTML muss strenger geschrieben werden. Hier die Regeln:

XHTML-Doctype(strict oder transitional),
alles klein geschrieben,
jeder <tag> muss geschlossen sein (muss ein End-Tag haben) <p> bb </p>, Stand Alone Tags: <img /> <hr /> in sich geschlossen.
Jedes HTML Attribut muss eine Wertzuweisung haben:
<input    checked=“checked“ />
muss korrekt verschachtelt werden :
<div><div><p><em></em></p></div></div>
alle inline Tags müssen innerhalb vom Block-Tag sein

BlockTag: zur Strukturierung von Texten und Daten wie h1, p und div erzeugen einen Zeilenumbruch und werden auch als „Blockelemente“ bezeichnet, da sie einen visuellen Block aufziehen. Einige Blockelemente können selber wieder Blockelemente enthalten, so z.B. das div-Element.

Inline : Inlineelemente wie a und em erzeugen keinen Zeilenumbruch und dürfen keine Blockelemente enthalten. Insbesondere dürfen Inlineelemente nicht direkt innerhalb eines body- oder form-Elements liegen, sondern müssen immer innerhalb eines Blockelements liegen.


WIRD WAS FALSCH GEMACHT, WIRD ES BEI DER VALIDIERUNG ANGEZEIGT

HTML: strict, transitional
nicht mit XML erweiterbar,
Tags müssen kein Endtag haben: <p>,
<hr> <br> ---> simuliert ein Endtag,
Attribute gibt es auch ohne Wertzuweisung,:<input checked>,
inline tags können auch im body sein
und

frameset:strict,transitional
Hat einen eigenen Doctype,
Nachteile:Framesets sind nicht Barrierefrei,Mindeststandards sind somit nicht erfüllt,
werden heute nicht mehr benutzt: Suchmaschinen können diese nicht richtig durchsuchen
Vorteile: Ladegeschwindigkeit: besser, muss nur Teil der Seite laden

Strict:keine gestaltenden HTML- Tags und HTML Attribute,
keine gestaltenden Elemente wie z.B. Schriften und Farben.
<a href=“ tatatata.htm.>
<img src=“xy.jpg“ alt=“text“>
<img src=“xy.jpg“ alt=“text“ width=“20“ height=“50“ />
<p style=“color:red“>---->inline css style sind erlaubt
in HTML soll nur strukturiert werden

Transitional: im HTML gestaltende Attribute.
<h1 align=“left“>
<body bgcolor=“red“>
<a href=xy.htm“ target=“_blank“..../>

W3.org: Validator Consortium nachprüfen.

Bewertung: 
0
Bisher keine Bewertung

HTML5-Neuerungen

Inhaltsverzeichnis:
 

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

CSS3 - Animationen

 

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

Offline-Anwendungen

 

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

Texteffekte

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

Geolocation-API

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

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

HTML5-Neuerungen

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: