EKON 16: HTML5

EKON 16: HTML5

My slides for the HTML5 talk on EKON 16.

Ebeb5d8fd081058ba8df73d378bf83d7?s=128

Sebastian P.R. Gingter

November 05, 2012
Tweet

Transcript

  1. 1.

    Sebastian P.R. Gingter - @PhoenixHawk EKON 16, November 2012 Slides:

    https://speakerdeck.com/u/phoenixhawk HTML 5
  2. 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. 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. 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. 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. 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. 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!