EKON 16: HTML5

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