$30 off During Our Annual Pro Sale. View Details »

EKON 16: HTML5

EKON 16: HTML5

My slides for the HTML5 talk on EKON 16.

Sebastian Gingter

November 05, 2012
Tweet

More Decks by Sebastian Gingter

Other Decks in Technology

Transcript

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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide