Sebastian P.R. Gingter - @PhoenixHawk EKON 16, November 2012 Slides: https://speakerdeck.com/u/phoenixhawk HTML 5 

HTML 5 EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  is •  NO simple Upgrade of (X)HTML •  HTML 5 •  + CSS 3 •  + JavaScript APIs 

HTML 5 EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Semantic tags •  Application Markup (Slider, Progress bars etc.) •  Mobile input hints (Number keyboard, email / url keyboards) •  Inline SVG •  Canvas (2D & 3D – mit JS) 

CSS 3 EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  CSS Selectors •  Web Fonts •  Opacity •  Columns •  HSL (Hue / Saturation / Luminance) •  Text-Stroke •  Round corners •  Gradients •  Shadows •  Reflections •  Transitions •  Transforms •  Animations •  State-based Design 

COOL THINGS WITH CSS 3 EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  500 lines of CSS (+ 5800 lines inlined base64 encoded images), 40 Lines HTML, 0 lines of JS http://cssdeck.com/labs/css-panic-game 

JAVASCRIPT EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Storage •  LocalStorage •  WebSql & IndexedDb (NoSql) •  Sandboxed File system •  Canvas (2D & 3D – mit HTML) •  Appcache •  Websockets •  History API •  Enhanced DOM Api (Classselectors, Custom-Data) 

OVERVIEW EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  http://slides.html5rocks.com/ 

REAL APPLICATION DEVELOPMENT EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  MVVM – Pattern with complex model-binding •  Knockout JS - http://knockoutjs.com/ •  Local Storage •  for offline usage & persistence •  AppCache •  for offline usage •  http://www.html5rocks.com/en/tutorials/appcache/beginner/ •  + Backend JSON API •  ... and a lot more! 

http://www.html5rocks.com/ THANK YOU! EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk