referent · 30.08.2015 1 von xx seiten html5. overview 1.html & html5 basics facts 2.flash vs....

Referent · 19.04.231 von xx Seiten

HTML5

Overview

1. HTML & HTML5 Basics Facts

2. Flash vs. HTML5

3. HTML5 - the new features

Sebastian Viereck· 19.04.232

HTML

• markup language

• created 1990

• standardized as HTML4 in 1997

• press CTRL+U in Firefox

Sebastian Viereck· 19.04.233

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

Tasks

• run on low powered devices

• without browser plugin

• semantic web

• multimedia

• rich internet applications

Sebastian Viereck· 19.04.235

HTML5 Browser Support

Sebastian Viereck· 19.04.236

http://html5test.com/results/desktop.html

Flash vs HTML5

Sebastian Viereck · 19.04.237

Flash - Problems

• Steve Jobs

• closed source/proprietary

• security

• plugin

• seo

• performance

• touch capability

Sebastian Viereck· 19.04.238

Flash vs. HTML5

Sebastian Viereck· 19.04.239

source: google trends

HTML5 – the new Features

Sebastian Viereck · 19.04.2310

Markup Features

• semantic tags

• <nav>, <footer>, <header>,<article>, <section>, <aside>, <hgroup>

Sebastian Viereck· 19.04.2311

Dropped Tags

• basefont, big, center, font, strike, tt

• acronym, applet, isindex

• frame, frameset, noframes

Sebastian Viereck· 19.04.2312

<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

<canvas>

• drawing 2D images with Javascript

• interactive

• dynamic pictures -> animations

• http://alex4.tapjs.com/

Sebastian Viereck· 19.04.2314

Interactive: Drag and Drop

• http://www.w3schools.com/html/html5_draganddrop.asp

Sebastian Viereck· 19.04.2315

Geolocation

• discover device position

• uses availbale os positioning services

• example: http://wo-bin-ich-jetzt.de/

Sebastian Viereck· 19.04.2316

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

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

Others

• Web Audio API

• process und synthesize audio

• <video>

• cross document messaging

Sebastian Viereck· 19.04.2319

END

Sources

• http://en.wikipedia.org/wiki/HTML5

Sebastian Viereck· 19.04.2320