HTML5
Referent · 09.04.2015
1 von xx Seiten
Overview
1. HTML & HTML5 Basics Facts
2. Flash vs. HTML5
3. HTML5 - the new features
Sebastian Viereck· 09.04.2015
2
HTML
• markup language
• created 1990
• standardized as HTML4 in 1997
• press CTRL+U in Firefox
Sebastian Viereck· 09.04.2015
3
HTML5
• officially introduced in 2011
• not a software, browsers must support HTML5
features
• currently browser developers implement
some features the html5 standard
Sebastian Viereck· 09.04.2015
4
Tasks
• run on low powered devices
• without browser plugin
• semantic web
• multimedia
• rich internet applications
Sebastian Viereck· 09.04.2015
5
HTML5 Browser Support
http://html5test.com/results/desktop.html
Sebastian Viereck· 09.04.2015
6
Flash vs HTML5
Sebastian Viereck · 09.04.2015
7
Flash - Problems
• Steve Jobs
• closed source/proprietary
• security
• plugin
• seo
• performance
• touch capability
Sebastian Viereck· 09.04.2015
8
Flash vs. HTML5
source: google trends
Sebastian Viereck· 09.04.2015
9
HTML5 – the new Features
Sebastian Viereck · 09.04.2015
10
Markup Features
• semantic tags
• <nav>, <footer>, <header>,<article>,
<section>, <aside>, <hgroup>
Sebastian Viereck· 09.04.2015
11
Dropped Tags
• basefont, big, center, font, strike, tt
• acronym, applet, isindex
• frame, frameset, noframes
Sebastian Viereck· 09.04.2015
12
<input> types some examples
• <input type="datetime">
• <input type="number" min="18" max="65"
step="1">
• <input type="range" min="18" max="65"
step="10">
Sebastian Viereck· 09.04.2015
13
<canvas>
• drawing 2D images with Javascript
• interactive
• dynamic pictures -> animations
• http://alex4.tapjs.com/
Sebastian Viereck· 09.04.2015
14
Interactive: Drag and Drop
• http://www.w3schools.com/html/html5_dragan
ddrop.asp
Sebastian Viereck· 09.04.2015
15
Geolocation
• discover device position
• uses availbale os positioning services
• example: http://wo-bin-ich-jetzt.de/
Sebastian Viereck· 09.04.2015
16
WebGl
• OpenGL ES2.0 for the browser
• everthing is possible
• http://mrdoob.github.com/three.js/examples/w
ebgl_terrain_dynamic.html
• http://mrdoob.github.com/three.js/examples/c
anvas_materials_reflection.html
Sebastian Viereck· 09.04.2015
17
Data Storage
• Web storage API
• key-value store
• Web SQL API
• no longer maintained
• Indexed Database API (aka WebSimpleDB)
• indexed hierachical key-value store
• File API
Sebastian Viereck· 09.04.2015
18
Others
• Web Audio API
• process und synthesize audio
• <video>
• cross document messaging
Sebastian Viereck· 09.04.2015
19
END
Sources
• http://en.wikipedia.org/wiki/HTML5
Sebastian Viereck· 09.04.2015
20