EKON 16: HTML5

My slides for the HTML5 talk on EKON 16.

Transcript

1. Sebastian P.R. Gingter - @PhoenixHawk EKON 16, November 2012 Slides: https://speakerdeck.com/u/phoenixhawk HTML 5
2. HTML 5 EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  is •  NO simple Upgrade of (X)HTML •  HTML 5 •  + CSS 3 •  + JavaScript APIs
3. 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)
4. 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
5. 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
6. 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)
7. OVERVIEW EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  http://slides.html5rocks.com/
8. 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!
9. http://www.html5rocks.com/ THANK YOU! EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk