091124 TechNight HTML5.indd
Werbung
HTML5
WebCampus, 24. November 2009
HTML 1-3
<blink> <marquee> etc.
HTML 4
CSS-Unterstützung!
XHTML 1
Aus <br> wird <br />
XHTML 2
Alles ein Link:
<img src=“bild.gif“ href=“link.htm“>
.
P
.
I
.
R
XHTML 2
Alles ein Link:
<img src=“bild.gif“ href=“link.htm“>
HTML5
Taraaaa!
XHTML5
<br /> statt <br>
<!DOCTYPE html>
<html>
<head>
<title>Testeintrag</title>
</head>
<body>
<ul>
<li>Listeinetrag 1</li>
<li>
<img src=“meinbild.gif“ width=“100“ height=“20“>
</li>
<li>Listeinetrag 3</li>
<li>Listeinetrag 4</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<title>Testeintrag</title>
<ul>
<li>Listeinetrag 1
<li><img src=meinbild.gif width=100 height=20>
<li>Listeinetrag 3
<li>Listeinetrag 4
</ul>
<!DOCTYPE html>
<title>Testeintrag</title>
<ul>
<li>Listeinetrag 1
<li><img src=meinbild.gif width=100 height=20>
<li>Listeinetrag 3
<li>Listeinetrag 4
</ul>
Ca. 40 neue Tags
<time>, <progress>, <meter>,
<tel>, <email>, <kb>
Ca. 10 neudefinierte Tags
<i> - Text in anderer Tonlage/Stimmung
<b> - Hervorhebung, aber nicht Wichtigkeit
<small> - Kleingedrucktes
<strong> - Wichtiger Text
Ca. 15 Tags entfernt
<center>, <font>, <u>, <frame>
Viele Attribute … futsch!
Fokus definitiv auf CSS.
(cellpadding, cellspacing, height, width, etc)
Neue Javascript-APIs!
… und anderes Interaktives.
Web Storage
Alternative zu Cookies/Sessions.
<script>
window.localStorage[‘myData‘] = ‘foo‘;
var blag = window.localStorage[‘myData‘];
</script>
Vorteil:
10 MB vs. 4kB
Geolocation!
Wo steckt der Benutzer?
navigator.geolocation.getCurrentPosition(juhu, oops);
function juhu(position){
alert (position.coords.latitude,
position.coords.longitude);
}
function oops(){
alert (“Sorry, dude!“);
}
Offline-Modus
Netz weg, Website funzt.
<html manifest=“meineofflinedaten.manifest“>
CACHE MANIFEST
clock.html
clock.css
clock.js
Local Database
SQL gleich vor Ort.
db = openDatabase(„html5demos“, „1.0“, „HTML 5 Database API
example“, 200000);
tx.executeSql(„CREATE TABLE IF NOT EXISTS tweets (id REAL
UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)“);
tx.executeSql(‚SELECT * FROM tweets WHERE mention = ? AND
id > ? ORDER BY id DESC‘, [mention, latest]);
WebApp läuft offline!
Wenn wieder online, Daten auf Server
zurückspielen.
Drag&Drop
Neue DOM-Selectors
Im-Browser-Formularvalidierung
etc.
Wann benutzen?
JETZT!
Mehr Infos bald auf
www.sprain.ch
