Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Appy Hour

1,217 views

Published on

Rajnish Kumar and Ernesto Cohnen conduct a session on HTML5, CSS3 and JS at BigRock httpX 2013 New Delhi

Published in: Technology, Design
  • Be the first to comment

The Appy Hour

  1. 1. HTML5 + CSS3 + JS Rajnish Kumar & Ernesto Cohnen
  2. 2. Evolution of Web Technologies ● ● ● ● ● ● ● ● ● ● 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5 2011 CSS 3
  3. 3. The Browser is the new OS ● The browser is the convergence of web ● Connects services with applications ● Makes devices talk to applications ● Is cross-platform ● A browser is today your emails, your work, your music, your phone, your games, your movies, your TV...
  4. 4. HTML5 + CSS3 + JavaScript One stack to rule them all
  5. 5. HTML5 - Real Time Communications Web Sockets Web Workers Notifications
  6. 6. HTML5 - Semantics & Markups ● ● ● ● <header>, <nav>, <footer>... link relations: alternate, nofollow, icon… Microdata New Form types (input types). Great on mobile phones also. ● Define, store, and retrieve custom data on the DOM. (data-*)
  7. 7. HTML5 - File & Hardware Access ● File Upload / Drag and Drop support ● Offline storage ○ Web Storage (local and session types) ■ JSON/ JavaScript Objects ■ < 5MB limit ○ WebSQL & IndexedDB ■ Not supported in all browsers. IE, Windows Mobile… ■ One deprecated, the other not so mature. ● GeoLocation: must for mobile devices! ● Others: speech input, orientation...
  8. 8. CSS3
  9. 9. CSS3 - Animations + Transitions ● ● ● ● Rotate scale translate … Save the iphone!
  10. 10. CSS3 ● Selectors ○ :first-child, :not, >, +, nth-child (even)... ● Text: ellipsis, columns... ● Webfonts & iconic fonts
  11. 11. CSS3 - Effects ● ● ● ● ● ● Opacity (alpha) Rounded corners (border-radius) Gradients Shadows Border image ...
  12. 12. JavaScript You know JavaScript right ?
  13. 13. JavaScript - Evolution ● <body onload=”init();”> ● Unobtrusive Javascript ● nodejs - server.listen(1337, '127.0.0.1'); ● AMD and RequireJS ● MVC and Backbone.js ● Apps - Phonegap, Sencha
  14. 14. JavaScript - MVC source: Mattieu Gamache-Asselin
  15. 15. Backbone.js
  16. 16. Backbone.js
  17. 17. PaaS Platform-as-a-Service
  18. 18. source: Mattieu Gamache-Asselin
  19. 19. It’s all about the server
  20. 20. Write Once in HTML 5 + CSS 3 + Javascript Run Everywhere with Phonegap / Parse / Trigger.io / App Framework etc.
  21. 21. Native vs Mobile Web
  22. 22. Native “and” Mobile Web +
  23. 23. Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ - KendoUI
  24. 24. Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ KendoUI
  25. 25. Q&A Only hardcore technical questions :)
  26. 26. Thank You! rajnish@ixigo.com ernesto@ixigo.com http://saveiphones.herokuapp.com

×