Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5...
-
Upload
egbert-montgomery -
Category
Documents
-
view
231 -
download
0
Transcript of Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5...
![Page 1: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/1.jpg)
Referent · 19.04.231 von xx Seiten
HTML5
![Page 2: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/2.jpg)
Overview
1. HTML & HTML5 Basics Facts
2. Flash vs. HTML5
3. HTML5 - the new features
Sebastian Viereck· 19.04.232
![Page 3: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/3.jpg)
HTML
• markup language
• created 1990
• standardized as HTML4 in 1997
• press CTRL+U in Firefox
Sebastian Viereck· 19.04.233
![Page 4: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/4.jpg)
HTML5
• officially introduced in 2011
• not a software, browsers must support HTML5 features
• currently browser developers implement some features the html5 standard
Sebastian Viereck· 19.04.234
![Page 5: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/5.jpg)
Tasks
• run on low powered devices
• without browser plugin
• semantic web
• multimedia
• rich internet applications
Sebastian Viereck· 19.04.235
![Page 6: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/6.jpg)
HTML5 Browser Support
Sebastian Viereck· 19.04.236
http://html5test.com/results/desktop.html
![Page 7: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/7.jpg)
Flash vs HTML5
Sebastian Viereck · 19.04.237
![Page 8: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/8.jpg)
Flash - Problems
• Steve Jobs
• closed source/proprietary
• security
• plugin
• seo
• performance
• touch capability
Sebastian Viereck· 19.04.238
![Page 9: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/9.jpg)
Flash vs. HTML5
Sebastian Viereck· 19.04.239
source: google trends
![Page 10: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/10.jpg)
HTML5 – the new Features
Sebastian Viereck · 19.04.2310
![Page 11: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/11.jpg)
Markup Features
• semantic tags
• <nav>, <footer>, <header>,<article>, <section>, <aside>, <hgroup>
Sebastian Viereck· 19.04.2311
![Page 12: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/12.jpg)
Dropped Tags
• basefont, big, center, font, strike, tt
• acronym, applet, isindex
• frame, frameset, noframes
Sebastian Viereck· 19.04.2312
![Page 13: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/13.jpg)
<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· 19.04.2313
![Page 14: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/14.jpg)
<canvas>
• drawing 2D images with Javascript
• interactive
• dynamic pictures -> animations
• http://alex4.tapjs.com/
Sebastian Viereck· 19.04.2314
![Page 15: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/15.jpg)
Interactive: Drag and Drop
• http://www.w3schools.com/html/html5_draganddrop.asp
Sebastian Viereck· 19.04.2315
![Page 16: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/16.jpg)
Geolocation
• discover device position
• uses availbale os positioning services
• example: http://wo-bin-ich-jetzt.de/
Sebastian Viereck· 19.04.2316
![Page 17: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/17.jpg)
WebGl
• OpenGL ES2.0 for the browser
• everthing is possible
• http://mrdoob.github.com/three.js/examples/webgl_terrain_dynamic.html
• http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html
Sebastian Viereck· 19.04.2317
![Page 18: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/18.jpg)
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· 19.04.2318
![Page 19: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/19.jpg)
Others
• Web Audio API
• process und synthesize audio
• <video>
• cross document messaging
Sebastian Viereck· 19.04.2319
![Page 20: Referent · 30.08.2015 1 von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck· 30.08.2015.](https://reader036.fdocuments.net/reader036/viewer/2022062421/56649e015503460f94aeb1e7/html5/thumbnails/20.jpg)
END
Sources
• http://en.wikipedia.org/wiki/HTML5
Sebastian Viereck· 19.04.2320