Html 5 Tipps

 

Achtung! NEU!


HTML5 und CSS3 Tipps

Ältere Browser und HTML5

In Html5 gibt es viele neue semantische Elemente, die man anstatt Div Elementen einsetzt. In älteren IE Browsern funktioniert die Dom Struktur nicht mehr, wenn Elemente nicht erkannt werden. Man kann mit der Integration eines Javascript das Problem lösen. Problematisch wird es allerdings wenn Javascript nicht aktiviert ist. Siehe diesen Link:

http://code.google.com/p/html5shiv/

Detecting

Weitere Infos bei Dive into Html 5 / Detecting

Mit der Open Source Javascript Bibliothek Modernizr kann man schnell erkunden ob viele Html 5 und CSS Elemente unterstützt werden. Nachdem du die Bibliothek heruntergeladen hast, binde im Header die Bibliothek ein:

  <script src="modernizr.min.js"></script>

Nun kann man die Überprüfung auf folgende Weise vornehmen. Es wird der Boolsche Wert true oder false zurückgegeben.

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}
    LINKS / Dive into Html5
Modernizr.canvas Mit dem canvas Element Grafiken oder andere grafische Elemente darstellen.

canvas / diese Seite
Modernizr.canvastext Die canvas Text Api wurde später entwickelt.  
Modernizr.video Das <video>Element zur Darstellung verschiedener Videoformate

part1 container

part2 lossy video codecs

Video for Everybody!

 

       if (Modernizr.video) {
  // let's play some video! but what kind?
  if (Modernizr.video.webm) {
    // try WebM
  } else if (Modernizr.video.ogg) {
    // try Ogg Theora + Vorbis in an Ogg container
  } else if (Modernizr.video.h264){
    // try H.264 video + AAC audio in an MP4 container
  }
}
  the Video chapter
Modernizr.localstorage local Storage erlaubt das Speichern von Informationen auf dem Computer, ähnlich den cookies. Doch im Gegensatz dazu, können später nach dem Laden der Seite aufgerufen werden und sind nicht in der Größe limitiert. storage diese Seite
Modernizr.webworkers Mit webworkers werden mehrere Aufgaben gleichzeitig ausgeführt.  
Modernizr.applicationcache Hiermit lassen sich offline Webapplications erstellen. Nachdem der Browser die Seite einmal besucht hat, kann man die Seite auch offline erneut aufrufen.  
Modernizr.geolocation Es gibt verschiedene Arten den Standort des Users zu bestimmen. Geolocation Working Group
Input Types

Es gibt einige neue input types mit neuen Funktionen. Sollte die Funktion in einem Browser nicht zur Verfügung stehen, erfolgt keine Fehlermeldung oder Error.

 Formulare
Modernizr.inputtypes.date Html 5 liefert einen Auswahlkalender, Datepicker  
Modernizr.input.placeholder Placeholder Text befindet sich in einer Input Textbox solange kein eigener Text eingegeben wurde.  
Modernizr.input.autofocus Html 5 unterstützt ein Focus Attribut für alle web form controls an autofocus attribute on all web form controls
Modernizr.history Manipuliert die Historie des Browsers. HTML5 history API

Semantik

Semantik siehe auch Dive into Html 5 / What does it all mean

Eine Html Seite ist eine Struktur ineinander verschachtelter Elemente, wie ein Baum. Einige Elemente sind siblings (Abkömmling) wie 2 Äste eines gleichen Baumstamms. Oder "children" wie ein kleinerer Ast der aus einem größeren kommt. In der Gegenrichtung wäre der größere Ast das "parent" oder Elternelement oder "ancestor" (Vorfahr) von Enkelkindern. Elemente die keine "children" haben werden "leaf" genannt. Der Vorfahr aller anderen Elemente ist das "root" Element. Das ist ist in allen HTML-Seiten das <html> Element.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Titel der Seite</title>
</head>

<body>
</body>
</html>

Root Element / Doctype

Das ist der Html 5 Doctype.

<!doctype html>

Aber auch folgendes Element ist gültiger Html 5 code, obwohl Teile davon nicht mehr benötigt werden. Denn Html 5 ist immer XHTML und lang bezeichnet die Sprache von Html nicht die Sprache in der der eigentliche Text verfasst ist.

<html xmlns="http://www.w3.org/1999/xhtml"  lang="en"  xml:lang="en">

Character Encoding

<meta charset="utf-8" />

Link Relations

Dive into HTML 5/ Friends & (Link) Relations

< a href> Tags verweisen einfach auf eine andere Seite, während Link- Relations erklären, warum man auf eine andere Seite verweist:

Es gibt 2 Arten von Link relations.

<link rel="stylesheet" href="style-original.css" type="text/css" />

Da CSS Regeln immer in der text/css Sprache verfasst sind, kann man in Html 5 auf das type Attribute verzichten: 

<link rel="stylesheet" href="style-original.css" />

rel="alternate"

Das Attribute im Zusammenhang mit RSS oder Atom media type ermöglicht beispielsweise Google Readers sogenanntes "feed autodiscovery". Es kann auch im Zusammenhang mit PDF oder anderne Formaten genutzt werden.

Neue und geänderte semantische Elemente

Die folgenden Elemente sind Block Elemente. Wenn man sicherstellen will, dass ältere Browser, die diese Elemente nicht kennen, als Block Elemente anzeigen muss man dazu eine Style-Sheet Anweisung schreiben.

Siehe dazu "Dive into Html5" A long digression into how browsers handle unknown elements

article,aside,details,figcaption,figure,  footer,header,hgroup,menu,nav,section { 
     display:block;  
}
<section> Inhaltliche Unterteilungen, thematische Gruppierungen. z.B.: Seitenspalte / Hauptbereich  
<article> Ähnlich wie section eine inhaltliche Unterteilung, nur das hier isolierte Inhalte aufgeführt werden, die auch für sich alleine stehen könnten. Magazin, Forum Post, Blog Eintrag, Kommentar eines User oder irgendein anderer unabhängiger Beitrag. Jeder Article könnte einen header- und footer Bereich haben. Articles
<aside> Der Hautpinhalt macht auch ohne aside Sinn. Ein Bereich der Inhalt bereitstellt, der das Thema berührt. Sidebars, Gruppen von nav- Elementen, wie Menüs. z.B.: Wenn Seitenspalte und Hauptbereich beides section Elemente wären, wären beide gleichberechtigt. Die Seitenspalte als aside Element bedeutet hingegen, dass sie dem Hauptelement angefügt ist.  
<nav> Ein Bereich der zu anderen Seiten oder Bereichen führt. Es sollte sich jedoch immer um die Hauptnavigation handeln. Es können auch mehrere nav Element auf der Seite eingefügt werden. Es sollte aber nicht jede Linkliste ein nav-Element sein. Navigation
<hgroup> Es wird gebraucht um ein set von h1-h6 Elemente zu gruppieren, wenn man auf verschiedenen Leveln Überschriften anlegt.  
<header> Kopfbereich einer Seite oder eines Abschnittes. Vorstellung und/ oder Navigation, search Form, Logo etc. Man kann mehrere Header und Footerbereiche definieren, siehe Beispiel article. Headers
<footer> Fußbereich einer Seite oder eines Abschnittes. Infos über Author, links, copyright, Sie müssen nicht, aber erscheinen meist am Ende der Seite. Footers
     
<time> Zeit 24 Stunden Uhr, Kalender. Mit dem Attribut pubdate stellt das time-Element das Veröffentlichungsdatum eines übergeordneten articles dar <time pubdate>2013-11-4</time> Dates and Times
<mark> Markierter Text für Referenzen.  
<code> Das code Element sollte mit einer Klasse versehen werden, welche die Art der Scriptsprache definiert: <code class="language-javascript">  
<em> betont, durch Verschachtelung von em Elementen wird der Inhalt betonter  
<strong> wichtig, durch Verschachtelung von strong Elementen wird der Inhalt wichtiger  
<hr> Neben der weiterhin bestehenden Bedeutung einer Trennlinie hat hr auch eine semantische Bedeutung, denn damit werden Absätze voneinander getrennt. Beispielsweise in einem Dialog von 2 Personen, könnte man Text von Person A und Person B mit hr trennen. hr darf nur auf Absatzebene verwendet werden, also nicht zwischen 2 section Elementen.  
<small> Kleingedrucktes im herkömmlichen Sinne.  
<s> Durchgestrichen, nicht mehr relevante Inhalte, wie beispielsweise ein alter Preis, der durch einen Sonderpreis ersetzt wurde.  
<b> fett, der Inhalt ist gleich wichtig, wird aber anders dargestellt  
<i> kursiv,der Inhalt ist gleich wichtig, wird aber anders dargestellt im Gegensatz zu em, wo der Inhalt wichtiger ist.  
     

Outline Algorithmus

In html gab es die Überschriften h1 bis h6. Weitere Unterteilungen waren nicht möglich. In Html5 kann man die Überschriften innerhalb von section Elementen einfügen und erhält so die gleiche Hierachie. Beide Seiten bedeuten das gleiche.

html / html5 html5
<h1>Photoshop Tipps</h1>
<h2>Auswahlen</h2>
<h3>Auswahlwerkzeuge</h3>

<h1>Photoshop Tipps</h1>

<section>
<h1>Auswahlen</h1>

<section>
<h1>Auswahlwerkzeuge</h1>
</section>

</section>

Diese sogenannte outliner Strukturierung funktioniert nicht mit allen Elementen, sondern nur mit
section, article, aside, nav

Mit dem HTML5 Outliner, der auch als Chrome Extension erhältlich ist, kann man sich die Struktur anzeigen lassen. Siehe folgende Beispiele

hgroup Untertitel

Bleiben wir beim vorigen Beispiel und erweitern die erste Überschrift um einen Untertitel. Dann würde diese h2 Überschrift "Photoshop CS6" mit der Überschrift "Auswahlen" auf einer Ebene liegen.

<h1>Photoshop Tipps</h1>
<h2>Photoshop CS6</h2>

<section>
<h1>Auswahlen</h1>

<section>
<h3>Auswahlwerkzeuge</h3>
</section>

</section>

Damit sie als Untertitel angesehen wird, muss man den Untertitel mit der Überschrift in ein hgroup Element zusammenfassen. Das hgroup übernimmt nun den Wert des h1 Elements an. Die Untertitel werden quasi verschluckt. So ist die h2 Position in diesem Beispiel "Auswahlen".
Diese Unterteilungen sind im Browser eventuell nicht sichtbar, haben jedoch eine Bedeutung für Bildschirmlesegeräte und Suchmaschinen.

<hgroup>
<h1>Photoshop Tipps</h1>
<h2>Photoshop CS6</h2>
</hgroup>

<section>
<h1>Auswahlen</h1>

<section>
<h1>Auswahlwerkzeuge</h1>
</section>

</section>

Canvas

Siehe auch Dive into Html 5 / Lets call it Drawing Surface
Siehe auch HTML living Standard the canvas element
Siehe auch w3schools_canvas
Siehe auch w3schools canvas Referenz

Ein canvas Element ist ein Rechteck, in dem man Grafiken darstellen kann, also eine Art Zeichenbrett.

<canvas width="300" height="225"></canvas>

Das canvas Element selbst ist unsichtbar. Es folgt ein canvas Element mit Rahmen in CSS.

<canvas width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Man kann mehrere canvas Elemente auf einer Seite erzeugen. Um diese anzusprechen kann man ihnen eine id verpassen.

<canvas id="a" width="300" height="225"></canvas>

Auf diese Weise kann man es im DOM finden.

var a_canvas = document.getElementById("a");

Auf folgende Weise kann man etwas zeichnen.

function draw_a() { var a_canvas = document.getElementById("a"); var a_context = a_canvas.getContext("2d"); a_context.fillRect(50, 25, 150, 100); }

Erzeuge ein drawing- context- Objekt mit der Methode getContext darin die Parameterwertzuweisgung "2d". Ein "3d" gibt es noch nicht.

drawing context

Hier einige Methoden von drawing context:

fillStyle CSS Farbe, Muster, Farbverlauf
fillRect(x, y, widht, height) Rechteck, linke obere Ecke, Weite Höhe
strokeStyle CSS Farbe, Muster, Farbverlauf
strokeRect(x,y,widht, height) Rechteck ohne Füllfarbe nur Rand im aktullen strokeStyle
clearRect(x,y,width, height) löscht die Pixel in dem Rechteck

Reset canvas

Durch das erneute Setzen der width eines canvas Elements wird der komplette Inhalt gelöscht. Es kann sich dabei um die gleiche Breite handeln.

a_canvas.width = a_canvas.width;

Linien zeichnen, Path

Man kann gerade Linien zeichen mit folgenden beiden Methoden.

moveTo(x, y) definiert den Startpunkt der Linie.

lineTo(x, y) zieht eine Linie zum Punkt.

Man sieht die Linie jedoch erst, wenn man eine der ink- Methoden aufruft.

context.strokeStyle = "#eee"; context.stroke();

Beispiel canvas

  
 Ihr Browser unterstützt kein Html 5


Es folgt der Quellcode diese Canvas Elementes
Im Headbereich: 

<script src="Scripts/modernizr.js"></script>
<script type="text/javascript"> function draw_a() {

if (Modernizr.canvas) {

var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");
context.beginPath();
context.moveTo(10, 10);
context.lineTo(10, 200);
context.lineTo(300, 10);
context.strokeStyle = "#000000";
context.stroke();

} else {
// no native canvas support available :(
document.write("Das Canvas Element wird nicht unterstützt.");
}


}

</script>

Innerhalb des Bodytags, wird die Funktion aufgerufen. Selbstverständlich kann man das auch ohne Funktion machen.

<body onLoad="draw_a()">

Im Body an der Stelle, wo das canvas Element erscheinen soll, wird es erzeugt:

<canvas width="300" height="200" id="a">Ihr Browser unterstützt kein Html 5, oder Javascript.</canvas>

Es folgen einige Beispiele und Methoden

Es wird ein Canvas Element mit id erzeugt.

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Mittels Javascript werden Methoden aufgerufen.

Javascript

Info
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Rechteck zeichnen

  • ctx.fillStyle="#FF0000";
  • ctx.fillRect(0,0,150,75);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Pfad, Linien zeichnen

  • moveTo(x,y) defines the starting point of the line
  • lineTo(x,y) defines the ending point of the line

 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Kreis

  • arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Canvas Text

  • font - defines the font properties for text
  • fillText(text,x,y) - Draws "filled" text on the canvas
  • strokeText(text,x,y) - Draws text on the canvas (no fill)

fillText()

 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Text ohne Füllung

strokeText()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Gradient Farbverlauf
Es gibt 2 Arten linear und radial

  • createLinearGradient(x,y,x1,y1)
  • createRadialGradient(x,y,r,x1,y1,r1)

Wenn man ein gradient Objekt erschaffen hat muss man ein oder mehrere ColorStops definieren. Hier wird Farbe und Position zwischen 0 und 1 bestimmt.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);		  
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Draw Image

  • drawImage(image,x,y);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("bird");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

fillStyle pattern

Web Storage / Speicher

Achtung! dieses Thema habe ich sehr ausführlich in meinen neuen HTML5 Tipps aufgeführt.

Dive into HTML 5 / A Place to Put your stuff
w3schools WebStorage

Html 5 Storage bietet die Möglichkeit key/value Paare im Browser zu speichern und abzurufen, sogar nachdem der Browser geschlossen wurde. Die Daten werden auf dem lokalen System gespeichert und abgerufen und werden nicht über den Server geschickt.

Der key ist ein String, die Daten können alle möglichen Datentypen sein, werden aber auch als Strings gespeichert und müssen in Javascript mit enstprechenden Funktionen wie parseInt() umgewandelt werden.

Der Aufruf von setItem() mit einem key der schon existiert, überschreibt den vorhandenen ohne Warnhinweis. Der Aufruf von getItem() mit einem nicht existierendem key gibt null zurück.

Beispiel

var visitors = localStorage.getItem("counter");
  // ...  
localStorage.setItem("counter", 1);

Stattdessen kann man auch den Array Zugriffsoperator verwenden. 

var visitors = localStorage["counter"];
localStorage["counter"] = 1;

Oder man greift über die Punktsyntax darauf zu.

localStorage.counter = 1;

Außerdem gibt es noch die Methoden removeItem() und clearItem()

Man kann mit EventListenern den Storgage überwachen.

IE kocht mal wieder sein eigenes Süppchen (siehe else):

if (window.addEventListener) { 
   window.addEventListener("storage", handle_storage, false);
  } else {  
  window.attachEvent("onstorage", handle_storage);
  };
Es folgt die Funktion auch hier wird für IE mal wieder eine extra if Struktur benötigt. 
function handle_storage(evt) { 
   if (!evt) { evt = window.event; }
document.write(evt.key);
  }

Über den Parameter kann man Eigenschaften abfragen:

Eigenschaft Typ Beschreibung
key string der key, welcher hinzugefügt, gelöscht oder geändert wurde
oldValue any der vorige Wert (welcher nun überschrieben wurde) oder der Wert null, wenn ein neues Element hinzugefügt wurde.
newValue any der neue Wert oder null, wenn das Element entfernt wurde
url* string Die Seite welche das Ereignis ausgelöst hat.

Formulare

 

Web Formulare wie man sie kennt.

Achtung! NEU! HTML5 input und weitere HTML5 Tipps

Field Type HTML Code Notes  
checkbox <input type="checkbox"> can be toggled on or off Achtung! NEU!


HTML5 und CSS3 Tipps
radio button <input type="radio"> can be grouped with other inputs
password field <input type="password"> echos dots instead of characters as you type
drop-down lists <select><option>…
file picker <input type="file"> pops up an “open file” dialog
submit button <input type="submit">
plain text <input type="text"> the type attribute can be omitted

Es gibt viele neue Formulare in Html 5 mit neuen Möglichkeiten. Auch wenn die neuen Möglichkeiten nicht in allen Browsern funktionieren, so kann man diese Formulare jedoch in allen Browsern einsetzen.

 
Platzhalter text
<form>
<input name="q" placeholder="Go to a Website">
<input type="submit" value="Search">
</form>
Autofocus
<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>
Email
<form>
<input type="email">
<input type="submit" value="Go">
</form>
IPhone zeigt ein Email optimiertes virutelles Keyboard
URL
<form>
<input type="url">
<input type="submit" value="Go">
</form>
IPhone zeigt ein Email optimiertes virutelles Keyboard
number
<form>
<input type="number"
min="0"
max="10" step="2"
value="6">
<input type="submit" value="Go">
</form>
Darstellung hängt vom Browser ab
range / Slider
<form>
<input type="range"
min="0"
max="10" step="2"
value="6">
<input type="submit" value="Go">
</form>
Darstellung hängt vom Browser ab
Date
Input Type Opera iPhone Other browsers
type="date" 9.0+ 5.0+ ·
type="datetime" 9.0+ 5.0+ ·
type="datetime-local" 9.0+ 5.0+ ·
type="month" 9.0+ 5.0+ ·
type="week" 9.0+ 5.0+ ·
type="time"

Es gibt einen Datepicker.

Auch hier die Darstellung vom Browser ab.

type="date" und type="time" funktioniert auch im Chrome

 
<form>
<input type="date">
<input type="submit" value="Go">
</form>
<form>
<input type="time">
<input type="submit" value="Go">
</form>
Search
<form>
<input name="q" type="search">
<input type="submit" value="Find">
</form>
Wird in verschiedenen Browsern als search Box angezeigt, mit einem kleinem x zum Löschen des Inhalts.
Color
<form>
<input name="q" type="color">
<input type="submit" value="Go">
</form>
Colorpicker Liefert einen hex Farbwert.
required / muss ausgefüllt werden
<form>
<input id="q" required>
<input type="submit" value="Search">
</form>

Animation

Siehe auch folgenden Beitrag: bei creativeJS

Die Javascriptkundigen kennen wahrscheinlich setTimeout() oder setInterval()

function draw()
{  
    // Drawing code goes here 
} 
 setInterval(draw, 100);
function draw()
{
      setTimeout(draw, 100); 
     // Drawing code goes here 
} 
 draw();

Das ist jedoch nicht die optimale Methode, denn die Aktualisierungsrate wird vom Entwickler festgelegt, jedoch läuft sie nicht optimal synchron zur Framerate des Browsers. Das kostet CPU und kann bei hoher Framerate und Komplexität der Animation zum Ruckeln führen.

Die Lösung ist

requestAnimationFrame

Mittels dieser Methode wird die Framerate des Browsers oder Computers berücksichtigt. Dadurch läuft die Animation flüssig und spart CPU Rechenpower.

function draw() 
{
      requestAnimationFrame(draw);
      // Drawing code goes here  
}
  draw();

Andere Browser andere Sitten, von daher muss man das Script noch ein wenig anpassen, oder auf eine Javascript Datei zurückgreifen, in der das bereits definiert ist.

    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
 
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

Beispiel

Impressum / Datenschutz