Sie sind auf Seite 1von 116

HTML 5

Workshop

Montag, 18. Oktober 2010


Kurzbeschreibung

Mit der Einführung des HTML5-Standards und der


Unterstützung durch aktuelle Browserversionen steht Web-
Entwicklern eine Vielzahl von neuen Möglichkeiten zur
Verfügung.
Insbesondere für dynamische und auch mobile Web-
Anwendungen ergeben sich interessante Aspekte.
Noch sind nicht alle HTML5-Sprachelemente einsetzbar, aber
viele Dinge lassen sich schon jetzt sinnvoll verwenden.

Montag, 18. Oktober 2010


Seminarziel

In diesem Grundlagen-Kurs erhalten Ein- und Umsteiger die


Kenntnis um HTML5 konkret einzusetzen.
Neben den sprachlichen Neuerungen zum Vorgänger, werden
die Themen Formulare, Geolocation, Multimedia, Drag-and-Drop
und Anwendungsunterstützung praxisnah vorgestellt.

Montag, 18. Oktober 2010


Themen

Überblick Drag-und-Drop

Grundlagen Canvas-Element

Semantik Geolocation-API

Formulare Webanwendungen

Multimedia Zusammenfassung

Montag, 18. Oktober 2010


Ihre Themen

Montag, 18. Oktober 2010


History of HTML

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

Montag, 18. Oktober 2010


History von HTML 5
22. Januar 2008 Erster „Working Draft“ (Arbeitsentwurf).
10. Juni 2008 Zweiter Arbeitsentwurf, in den der bis dahin separate Web-Forms-2.0-Entwurf eingearbeitet
wurde.
12. Februar 2009 Dritter Arbeitsentwurf.
23. April 2009 Vierter Arbeitsentwurf.
25. August 2009 Fünfter Arbeitsentwurf.
4. März 2010 Sechster Arbeitsentwurf. HTML Canvas 2D[9] und HTML Microdata als eigene
Arbeitsentwürfe ausgelagert. Neues Dokument „HTML: The Markup Language“.
25. Juni 2010 Siebter Arbeitsentwurf und Überarbeitung der verwandten Spezifikationen und Dokumente.
Neu hinzugefügt wurden die unterstützenden Dokumente HTML5: Techniques for providing useful text
alternatives und Polyglot Markup: HTML-Compatible XHTML Documents.

Quelle: Wikipedia

Montag, 18. Oktober 2010


Das content model von HTML 4

FLOW

BLOCK

INLINE

Montag, 18. Oktober 2010


Das content model von HTML 5

FLOW
INTERACTIVE HEADING

PHRASING

EMBEDDED
SECTIONING

METADATA

Montag, 18. Oktober 2010


Metadata

Metadaten, die für das gesamte aktuelle HTML-Dokument


gelten, können in HTML5 einerseits im Dokumentkopf
vorkommen, andererseits aber auch im Dokumentkörper.

Montag, 18. Oktober 2010


Metadata im Dokumentenkopf
meta link base
script style title

Montag, 18. Oktober 2010


Metadata im Dokumentenkörper
script noscript command

Montag, 18. Oktober 2010


Metadata

Das script-Element kann jedoch auch im Dokumentkörper


vorkommen, ebenso wie sein Pendant, das noscript-
Element, und ein weiteres in HTML5 neues, script-
auslösendes Element, command, kommt im Dokumentkörper
vor.
Weil Meta-Daten auch außerhalb des Dokumentkörpers
vorkommen, hat der Bereich für Metadata in der obigen
Grafik nur eine Teilschnittmenge mit dem sonst alles
umschließenden Flow-Content.

Montag, 18. Oktober 2010


HTML + CSS + JS APIs = 5

HTML5
CSS 1, 2, 3
Javascript
jQuery
JQTouch
MooTools
AJAX
...

Montag, 18. Oktober 2010


HTML

Montag, 18. Oktober 2010


Neue Semantik - Neue Tags, Neue Link Relationen,
Microdata

Accessibility (ARIA roles)

Web Forms 2.0 - Neue Eingabefelder

Multimedia - Audio Tag, Video Tag

2D/3D Zeichenfläche - Canvas, WebGL, SVG

Montag, 18. Oktober 2010


Neue semantische HTML Tags
<header> <aside>
<hgroup> Top links...
</hgroup> </aside>
</header>
<footer>
<article> Copyright © 2010.
<header> ... </header> </footer>
<section> ... </section>
</article>

<nav>
<ul> Navi ... </ul>
</nav>

Montag, 18. Oktober 2010


Geänderte und umdefinierte Elemente
Folgende semantische Elemente werden jetzt mehr ihrer
ursprünglichen Bedeutung nach eingesetzt.
Die Änderungen sind für Search Engine Optimizer wichtig
und interessant.

Montag, 18. Oktober 2010


<i>
Bisher für Kursivschrift.

Jetzt Text, der üblicherweise kursiv geschrieben wird, also


beispielsweise Gedanken, veränderte Stimmungslage,
usw.

Montag, 18. Oktober 2010


<b>
Bisher für Fettschrift.

Kennzeichnet jetzt Text, der zwar stilistisch hervorgehoben


werden soll, aber keine wichtigere Bedeutung als der
umgebende Text hat.

Montag, 18. Oktober 2010


<em>
Emphasis (Betonung)

Das em-Element kann nun verschachtelt werden, um die


Betonung eines Textes zu verstärken.

Montag, 18. Oktober 2010


<hr>
Bisher eine horizontae Linie.

Das <hr>-Element symbolisiert nun einen thematischen


Umbruch zwischen Absätzen in einem Text.

Dabei kann es weiterhin wie eine Linie aussehen. Muss


aber nicht. (hr {border:0;} ).

Montag, 18. Oktober 2010


<small>
Bisher kleine Schrift.

Nun dient es nun der Auszeichnung von Kleingedrucktem,


wie Rechtshinweisen oder zusätzlichen Angaben zu
Preisen.

Montag, 18. Oktober 2010


<strong>
Bisher wichtig.

Das strong-Element zeichnet einen Text als inhaltlich


extrem wichtig aus. Es löst damit bereits seit einiger Zeit
das <b>-Element ab, das Text nur aus typografischer Sicht
fett schreibt.

Montag, 18. Oktober 2010


Nur noch über CSS formatieren
Deshalb fallen zum Beispiel <font> oder <u> für
underlined weg.

Montag, 18. Oktober 2010


Nur noch über CSS formatieren
Deshalb dürfen Attribute in Kombination mit bestimmten
Elementen nicht mehr genutzt werden:
align, <color, size, width, hspace, vspace und margin
in Verbindung mit <body>, <table>, <iframe>, <img>.

Montag, 18. Oktober 2010


Nur noch über CSS formatieren
Anstelle von Frames werden CSS oder iframes verwendet.

Montag, 18. Oktober 2010


Elemente, die nicht mehr genutzt werden
applet, acronym, bgsound, basefont, big, blink,
center, dir, font, frame, frameset, (endlich!)
isindex, listing,
marquee, noframes, nobr,
s, spacer, strike, tt, u,wbr

Montag, 18. Oktober 2010


Warum?
Sie dienen nur der Formatierung.
Und die wird nun von CSS erledigt.

Montag, 18. Oktober 2010


Neue semantische Tags

Montag, 18. Oktober 2010


<article>
Kennzeichnet einen inhaltlichen Artikel.

Das article-Element umfasst einen unabhängigen


Abschnitt, der jedoch im Kontext zu den Vorfahren-
Elementen steht. Damit sind unter anderem
Nachrichtenartikel, Blog- oder Foreneinträge gemeint.

Montag, 18. Oktober 2010


<aside>
Nebenbeiinhalt.

Bezeichnet Inhalt, der thematisch zum umschließenden


Inhalt passt, aber nicht direkt dazugehört. Ein politischer
Nachrichtentext könnte in einem aside-Element
Querverweise zu ähnlichen Nachrichten beinhalten.

Montag, 18. Oktober 2010


<audio>
Bettet Sound ein.

Audio soll zukünftig mit diesem Elementen eingebunden


werden. HTML5 stellt zu diesen Elementen einige
Schnittstellen bereit, beispielsweise um die Wiedergabe
steuern zu können.

<audio src="sound.mp3" controls></audio>


document.getElementById("audio").muted = false;

Montag, 18. Oktober 2010


<canvas>
Macht eine Zeichenfläche auf.

Das canvas-Element erzeugt eine Zeichenoberfläche, auf


der mit Hilfe von DOM-Methoden gezeichnet werden kann.
Die Spezifikation sieht nur eine zweidimensionale
Zeichenoberfläche vor, geht aber davon aus, dass in
Zukunft auch dreidimensionale Kontexte eingeführt
werden könnten.

Die ersten Beispiele sind bereits im Netz ...

Montag, 18. Oktober 2010


Canvas (Zeichenfläche)
<canvas id="canvas" width="838" height="220"></canvas>

<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

Montag, 18. Oktober 2010


Canvas 3D (Web Graphics Language)
<canvas id="canvas" width="800" height="300"></canvas>

<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</script>

Montag, 18. Oktober 2010


<command>
Button für Befehle.

Montag, 18. Oktober 2010


<datalist>
Dropdown Liste.

Montag, 18. Oktober 2010


<details>
Details zu einem Element.

Montag, 18. Oktober 2010


<embed>
Ermöglicht das Einbinden von interaktiven Inhalten und
Anwendungen.

Flash, swf, ... aber nicht audio und video

Montag, 18. Oktober 2010


<figcaption> <figure>
Definiert eine Mediencontent Gruppe und deren
Beschriftung.

Das figure-Element erlaubt es, ein bestimmtes Medium


(z. B. Bilder, Videos etc.) mit einer Bildunterschrift zu
versehen.

Montag, 18. Oktober 2010


<footer>
Fußteil einer Sektion oder einer Seite.

Das footer-Element definiert eine Fußzeile für den


aktuellen Abschnitt (z. B. in einem article-Element) und
gibt z. B. Auskunft über den Autor oder die Erstellungszeit
des Textes.

Montag, 18. Oktober 2010


<header>
Kopfteil einer Sektion oder einer Seite.

Das header-Element definiert den Kopfbereich für den


aktuellen Abschnitt (z. B. in einem section-Element).
Neben einer Überschrift kann es auch weitere
Informationen (z. B. Versionsdaten) enthalten.

Montag, 18. Oktober 2010


Montag, 18. Oktober 2010
Montag, 18. Oktober 2010
<hgroup>
Information über eine Sektion eines Dokuments.

Montag, 18. Oktober 2010


<keygen>
Generierter Key in einem Formular.

Montag, 18. Oktober 2010


<mark>
Markierter Text.

Das mark-Element stellt hervorgehobenen Text dar. Dies


ist nicht zu verwechseln mit betonten Texten. Stattdessen
geht es hier etwa um Text, der von einer Suchmaschine
gefunden wurde und sichtbar markiert wird, sodass er
schnell von Benutzern und deren Darstellungsprogrammen
gefunden werden kann.

Montag, 18. Oktober 2010


<meter>
Messwerte (innerhalb eines definiertes Wertebereich).

Das meter-Element stellt einen Anteil seinem Maximum


gegenüber. Verwenden kann man dieses Element
beispielsweise um anzuzeigen, wie gut ein Suchergebnis
im Vergleich zum Suchwort ist, wie gut ein Produkt im
Vergleich zur besten Bewertung abschneidet etc.

Montag, 18. Oktober 2010


<nav>
Ein Navigationsbereich.

Dieses Element umschließt einen Navigationsbereich.


Damit sind nicht nur Verweise zu anderen Seiten eines
Webauftritts gemeint, sondern auch Verweise, die auf
Abschnitte innerhalb eines Dokuments zeigen.

Montag, 18. Oktober 2010


<output>
Für verschiedene Ausgabetypen

Montag, 18. Oktober 2010


<progress>
Eine Fortschrittsanzeige.

Das progress-Element gibt den Fortschritt einer


bestimmten Aufgabe wieder. Das Element wird ebenfalls
mit dem DOM gesteuert. Anwendungsbeispiel wäre z. B.
der Fortschritt bei einer mehrseitigen Umfrage.

Montag, 18. Oktober 2010


<rp>
Ruby Notiz für Nicht-Rubybrowser.

Montag, 18. Oktober 2010


<rt>
Erklärung für eine Ruby Notiz.

Montag, 18. Oktober 2010


<ruby>
Eine Ruby Notiz.

Montag, 18. Oktober 2010


<section>
Definiert eine inhaltliche Sektion.

Ein section-Element gruppiert thematisch


zusammenhängenden Inhalt und besitzt meist einen Kopf-
und Fußbereich. Anhand einer typischen Webseite wären
Beispiele für ein section-Element ein Vorstellungs-, ein
Nachrichten- und ein Kontaktbereich.

Montag, 18. Oktober 2010


<source>
Definiert Medienquelldaten.

Mit diesem Element können für ein Medienelement


verschiedene Quellen angegeben werden, aus denen das
Darstellungsprogramm die passende aussucht.

Montag, 18. Oktober 2010


<summary>
Header eines <detail> Elementes.

Montag, 18. Oktober 2010


<svg>
Eröffnet eine Scalable Vector Graphics Zeichnung.
<html>
<svg>
<circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
</html>

Montag, 18. Oktober 2010


<time>
Definiert eine Datums-/Zeitangabe.

Das time-Element wird verwendet, um Zeitangaben


auszuzeichnen und Zeitangaben mit Metadaten
auszustatten, sodass ein Browser damit z. B. einen
interaktiven Kalender erzeugen kann.

Montag, 18. Oktober 2010


<video>
Bindet eine Videodatei ein.

Videodateien sollen zukünftig mit diesem Element


eingebunden werden. HTML5 stellt wie beim Audioelement
einige Schnittstellen bereit, beispielsweise um die
Wiedergabe steuern zu können.

<video src="movie.mp4" autoplay controls></video>


document.getElementById("video").play();

Montag, 18. Oktober 2010


<wbr>
Setzt einen möglichen Zeilenumbruch.

Montag, 18. Oktober 2010


Neue relations für das <link> Tag

Montag, 18. Oktober 2010


alternate
<link rel="alternate" type="application/rss+xml"
href="http://myblog.com/feed" />

<link rel="icon" href="/favicon.ico" />

<link rel="pingback" href="http://myblog.com/


xmlrpc.php">

<link rel="prefetch" href="http://myblog.com/main.php">

Montag, 18. Oktober 2010


icon
<link rel="alternate" type="application/rss+xml"
href="http://myblog.com/feed" />

<link rel="icon" href="/favicon.ico" />

<link rel="pingback" href="http://myblog.com/


xmlrpc.php">

<link rel="prefetch" href="http://myblog.com/main.php">

Montag, 18. Oktober 2010


pingback
<link rel="alternate" type="application/rss+xml"
href="http://myblog.com/feed" />

<link rel="icon" href="/favicon.ico" />

<link rel="pingback" href="http://myblog.com/


xmlrpc.php">

<link rel="prefetch" href="http://myblog.com/main.php">

Montag, 18. Oktober 2010


prefetch
<link rel="prefetch" href="http://myblog.com/main.php">

Montag, 18. Oktober 2010


archives
<a rel="archives" href="http://myblog.com/archives">
old posts</a>

Montag, 18. Oktober 2010


external
<a rel="external" href="http://notmysite.com">
tutorial</a>

Montag, 18. Oktober 2010


license
<a rel="license" href="http://www.apache.org/licenses/
LICENSE-2.0">license</a>

Montag, 18. Oktober 2010


nofollow
<a rel="nofollow" href="http://notmysite.com/
sample">wannabe</a>

Montag, 18. Oktober 2010


tag
<a rel="tag" href="http://myblog.com/category/
games">games posts</a>

Montag, 18. Oktober 2010


Microdaten
Einbinden maschinenlesbarer Informationen in HTML-
Dokumente.

Eindeutigkeit der Daten.

Kompatibilität zu anderen Formaten wie dem Resource


Description Framework (RDF) und der JavaScript Object
Notation (JSON) kompatibel ist.

Montag, 18. Oktober 2010


Microdaten
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>

Montag, 18. Oktober 2010


Attribute für Accessible Rich Internet
Applications (ARIA)
<ul id="tree1" role="tree" tabindex="0"
aria-labelledby="label_1">

<li role="treeitem" tabindex="-1"


aria-expanded="true">Fruits</li>

<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>

Montag, 18. Oktober 2010


Web Forms 2.0
Definierte Eingabetypen beispielsweise für

Internetadressen, Emailadressen, Datum und Zeitangaben,


Zahlenwerte, etc. - Die Prüfung auf syntaktische
Korrektheit kann dann vom Browser übernommen
werden, wobei natürlich alle eingehenden Daten vom
Backend wie bisher eingehend geprüft werden müssen.

Montag, 18. Oktober 2010


Web Forms 2.0
Eingabefelder können als Pflichtfelder definiert werden

Dynamische Eingabefelder mit der Möglichkeit, weitere


Felder hinzuzufügen

Sinnvolle Attribute wie autocomplete (an/aus) oder


required für Formularfelder

Reguläre Ausdrücke (Regex) sowie "Ranges" (min/max)


für Eingabefelder

Montag, 18. Oktober 2010


Neue Formularfeldtypen
Zweckgebundene Userinterface Elemente:
<input type="range" min="0" max="50" value="0" />
<input results="10" type="search" />
<input type="text" placeholder="Search inside" />

Validierung von Eingabewerte:


<style> :invalid { background-color: red; } </style>
<input type="color" />
<input type="number" />
<input type="email" />
<input type="tel" />

...

Montag, 18. Oktober 2010


Definierbare Eingabetypen
<input type="email">
<input type="url">
<input type="number"> Ein numerischer Wert wird
erwartet
<input type="range"
min="10" max="100"
step="5" value="55"> Min / Max in 5er Schritten
auswählbar

Montag, 18. Oktober 2010


Eingabefeld für Suchanfragen
<form action="http://www.google.com/search"
method="get">
<label>
Google:
<input type="search" name="q">
</label>
<input type="submit" value="Suchen">
</form>

Montag, 18. Oktober 2010


Eingabefeld für Farben in sRGB 8-bit
Auswahl einer bestimmten Farbe mit Hilfe einer
Farbtabelle ohne Eingabe eines Farbwertes.

<input type="color">

Montag, 18. Oktober 2010


Attribute für Eingabefelder
accept alt autocomplete autofocus checked
disabled form formaction formenctype formmethod
formnovalidate formtarget height list max
maxlength minmultiple name pattern placeholder
readonly required size src step
type value width

Montag, 18. Oktober 2010


Datentyp für Datums- und Zeitangaben
<input type="day">
<input type="month">
<input type="year">
<input type="datetime"> Jahr, Monat, Tag, Stunde, Minute,
Sekunde und Millisekunde nach
UTC (Weltzeit)
<input type="date"> Jahr, Monat, Tag ohne Zeitzone
<input type="week">
<input type="time"> Stunde, Minute, Sekunde
und Millisekunde ohne Zeitzone

Montag, 18. Oktober 2010


Javascript

Montag, 18. Oktober 2010


Neue Selektoren

Elemente nach class ermitteln (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');


els[0].focus();

var els = document.getElementsByClassName('section');


els[0].focus();

Montag, 18. Oktober 2010


Neue Selektoren

Elemente mit CSS Syntax ermitteln (Selectors API)


var els = document.querySelectorAll("ul li:nth-child
(odd)");
var els = document.querySelectorAll("table.test > tr >
td");

Montag, 18. Oktober 2010


Javascript APIs

Clientseitige Speichermechanismen :
Web SQL Datenbanken, App Cache, Web Storage

Kommunikationmechanismen:
Web Sockets, Worker Workers

Desktop experience:
Mitteilungen, Drag and Drop API

Geolocation

Montag, 18. Oktober 2010


Web SQL Datenbank
var db = window.openDatabase("Database Name", "Database
Version");

db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [],
successCallback, errorCallback);
});

Montag, 18. Oktober 2010


Web Storage

Montag, 18. Oktober 2010


Datenspeicherung durch den Client

HTML5 biete 2 neue Methoden, um Daten auf dem


Clientrechner zu speichern:

localStorage - Datensicherung ohne Zeitlimit


sessionStorage - Datensicherung für eine Session

Montag, 18. Oktober 2010


Datenspeicherung durch den Client

Bisher wurde das mit Cookies umgesetzt. Cookoes eigenen


sich aber nicht für das Handling von grßeren Datenmengen,
da sie bei JEDEM Request an den Server abgerufen werden.
Das ist langsam und wenig effizient.
HTML5 ruft die Daten nicht bei jedem Aufruf ab, sondern nur
bei einer Abfrage. So stellt auch das Handling größerer
Datenmengen keine Beeinträchtigung der Performance dar.

Montag, 18. Oktober 2010


Datenspeicherung durch den Client

Daten werden pro Website in einem eigenen, isolierten


Bereich gespeichert. Sie können nur über dieselbe Site
wieder abgerufen werden.
Zum Speichern und Abrufen der gespeicherten Daten wird
Javascript verwendet.

Montag, 18. Oktober 2010


The localStorage Method

Die Mehode localStorage speichert Date ohne Zeitlimit. Die


Daten sind am nächsten Tag, in der nächsten Woche oder im
nächsten Jahr verfügbar.

Einen localStorage erzeugen und abrufen:

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

Montag, 18. Oktober 2010


A user visits counter

<script type="text/javascript">
if (localStorage.pagecount) {
localStorage.pagecount=Number
(localStorage.pagecount) +1;
  } else {
localStorage.pagecount=1;
 }
document.write("Visits "+ localStorage.pagecount + " time
(s).");
</script>

Montag, 18. Oktober 2010


Cache für Anwendungen
<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking',
updateCacheStatus, false);
CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Montag, 18. Oktober 2010


Web Workers

main.js:
var worker = new Worker('extra_work.js');
worker.onmessage = function(event) {
alert(event.data);
};

extra_work.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage(some_data);
}

Montag, 18. Oktober 2010


Web Sockets
var socket = new WebSocket(location);

socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}

socket.onmessage = function(event) {
alert(event.data);
}

socket.onclose = function(event) { alert(“closed”); }

Implementierung von Full-Duplex Kanälen für eine


bidirektionale Kommunikation in Webbrowser und
Webserver (über einen TCP Socket).

Montag, 18. Oktober 2010


Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter

window.webkitNotifications.createNotification
(tweet.picture, tweet.title,
tweet.text).show();

} else {
window.webkitNotifications.requestPermission();
}

Montag, 18. Oktober 2010


Drag and Drop
document.addEventListener('dragstart', function(event) {

event.dataTransfer.setData('text', 'Customized text');


event.dataTransfer.effectAllowed = 'copy';

}, false);

Montag, 18. Oktober 2010


Geolocation
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function
(position) {

var lat = position.coords.latitude;


var lng = position.coords.longitude;
var options = { position: new google.maps.LatLng
(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);

});
}

Montag, 18. Oktober 2010


CSS

Montag, 18. Oktober 2010


CSS

Typographie

Visuelle Effekte

Übergänge, Transformationen und Animationen

Montag, 18. Oktober 2010


CSS Selektoren

Selectoren Fließendes Blockelement


.row:nth-child(even) { div {
background: #dde; display: inline-block;
} }
.row:nth-child(odd) {
background: white;
}

Montag, 18. Oktober 2010


CSS Selektoren

Spezifikation von Attributen Präzisere Ansprache im


input[type="text"] {
DOM
background: #eee;
h2:first-child { ... }
}
div.text > div { ... }
Negation
h2 + header { ... }
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}

Montag, 18. Oktober 2010


Neue Zeichensätze
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}

@font-face {
font-family: 'Droid Sans';
src: url(Droid_Sans.ttf);
}

header {
font-family: 'LeagueGothic';
}

Montag, 18. Oktober 2010


Texte abschneiden
div {
text-overflow: ellipsis;
}

Montag, 18. Oktober 2010


Mehrspaltensatz
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Montag, 18. Oktober 2010


Textkonturen
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 4.00px;
}

Montag, 18. Oktober 2010


Deckkraft und Transparenz
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);

Montag, 18. Oktober 2010


Abgerundete Ecken
border-radius: 0px;

Montag, 18. Oktober 2010


Farbverläufe
background: background:
-webkit-gradient( -webkit-gradient(
linear, radial,
left top, 430 50,
left bottom, 0,
from(#00abeb), 430 50,
to(white), 200,
color-stop(0.5, white), from(red),
color-stop(0.5, #66cc00) to(#000)
) )

Montag, 18. Oktober 2010


Schatten und Reflektion
text-shadow: -webkit-box-reflect:
rgba(64, 64, 64, 0.5) below 10px;
0px
0px
0px;

box-shadow:
rgba(0, 0, 128, 0.25)
0px
0px
0px;

Montag, 18. Oktober 2010


Hintergrunderweiterungen

Größensteuerung Mehrfacher Hintergrund


#logo { div {
background:
background: url(logo.gif)
center center no-repeat; url(src/zippy-plus.png)
10px center no-repeat,
background-size:
contain; url(src/
} gray_lines_bg.png)
10px center repeat-x;
}

Montag, 18. Oktober 2010


Übergänge
#box.left {
margin-left: 0;
}

#box.right {
margin-left: 1000px;
}

#box {
-webkit-transition: margin-left 1s ease-in-out;
}

3document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';

Montag, 18. Oktober 2010


Animationen
@-webkit-keyframes pulse {
from { opacity: 0.0;
font-size: 100%; }
to { opacity: 1.0;
font-size: 200%; }
}

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}

Montag, 18. Oktober 2010


Transformationen
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)

#threed-example {
-webkit-transform: rotateZ(5deg);

-webkit-transition: -webkit-transform 2s ease-in-out;


}

#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}

Montag, 18. Oktober 2010