5. Geschichte von HTML5
● fing bei Opera an – Web Applications 1.0
● Gegenreaktion zu XHTML 2.0
● Mozilla und Apple machen mit – WHAT WG
● W3C HTML5
● Microsoft jetzt auch mit dabei
8. “...extending the language to better
support Web applications [...] This puts
HTML in direct competition with other
technologies[...] , in particular Flash and
Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
16. “Unterstützt” in neuen und alten Browsern
(mit etwas Nachhilfe)
header, footer, … { display: block; }
17. Internet Explorer braucht noch einen Schubs...
document.createElement('header');
document.createElement('footer');
…
http://remysharp.com/2009/01/07/html5-enabling-script/
20. rich form elements – ohne JavaScript
<input type=”text” list=”mylist”>
<datalist id="mylist">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
…
</datalist>
21. Typen und Attribute zur automatischen Validierung
(natürlich trotzdem auf dem Server noch validieren)
<input type=”tel”>
<input type=”email”>
<input type=”url”>
<input … pattern="[a-z]{3}[0-9]{3}">
<input … required>
Demonstration: new input types, datetime, validation
25. video als natives Object...vorteile?
● verhält sich wie jedes andere Element
● Tastatursteuerung
● mächtige API zur Steuerung/Manipulation
Demonstration: javascript controls, transitions, fancy controls, fancy swap
26. video Formate – H.264 vs Ogg Theora
● Opera und Firefox: Ogg Theora
● Safari, Internet Explorer 9: H.264
● Chrome: unterstüzt beide
H.264: weitverbreitet, aber Patente / Lizenz
Theora: Lizenzfrei, aber nicht für Web optimiert
27. video Formate – WebM
● Google I/O April 2010
● Lizenzfrei
● Matroska/VP8, bessere Web optimierung
● Opera, Firefox, Chrome beta Versionen
● Internet Explorer 9 (mit installiertem Codec)
●
Tools!
49. Standpunkt(?) ermitteln in JavaScript
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, error);
function success(position) {
/* where's Waldo? */
var lat = position.coords.latitude;
var long = position.coords.longitude;
...
}
57. Web Database – relationale DB / SQL
var db =
openDatabase(dbName, version, displayName, expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});
58. ...und mehr!
(File API, File Writer, WebGL, Drag and Drop, Server-sent Events, Web Workers, …)
64. “…the browser run-time is
perfect…you’re out of writing for
Windows Mobile, Android, S60,
each of which require testing...we
want to abstract that.
All the cool innovation is
happening inside the browser –
you don’t need to write to the
native operating system
anymore.”
Mobile Entertainment Market , June, 2009
