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
   

   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