HTML5 + CSS3 + JS

Rajnish Kumar & Ernesto Cohnen
Evolution of Web Technologies
●
●
●
●
●
●
●
●
●
●

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
20...
The Browser is the new OS
● The browser is the convergence of web
● Connects services with applications
● Makes devices ta...
HTML5 + CSS3 +
JavaScript
One stack to rule them all
HTML5 - Real Time Communications

Web Sockets
Web Workers

Notifications
HTML5 - Semantics & Markups
●
●
●
●

<header>, <nav>, <footer>...
link relations: alternate, nofollow, icon…
Microdata
New...
HTML5 - File & Hardware Access
● File Upload / Drag and Drop support
● Offline storage
○ Web Storage (local and session ty...
CSS3
CSS3 - Animations + Transitions
●
●
●
●

Rotate
scale
translate
…

Save the iphone!
CSS3
● Selectors
○ :first-child, :not, >, +, nth-child
(even)...

● Text: ellipsis, columns...
● Webfonts & iconic fonts
CSS3 - Effects
●
●
●
●
●
●

Opacity (alpha)
Rounded corners (border-radius)
Gradients
Shadows
Border image
...
JavaScript
You know JavaScript right ?
JavaScript - Evolution
● <body onload=”init();”>
● Unobtrusive Javascript
● nodejs - server.listen(1337, '127.0.0.1');
● A...
JavaScript - MVC

source: Mattieu Gamache-Asselin
Backbone.js
Backbone.js
PaaS
Platform-as-a-Service
source: Mattieu Gamache-Asselin
It’s all about the server
Write Once
in
HTML 5 + CSS 3 + Javascript

Run Everywhere
with
Phonegap / Parse / Trigger.io / App
Framework etc.
Native vs Mobile Web
Native “and” Mobile Web

+
Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ - KendoUI
Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ KendoUI
Q&A
Only hardcore technical questions :)
Thank You!
rajnish@ixigo.com
ernesto@ixigo.com
http://saveiphones.herokuapp.com
The Appy Hour
The Appy Hour
The Appy Hour
The Appy Hour
The Appy Hour
The Appy Hour
The Appy Hour
Upcoming SlideShare
Loading in …5
×

The Appy Hour

839
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
839
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×