Embed Size (px)
DESCRIPTION
Rajnish Kumar and Ernesto Cohnen conduct a session on HTML5, CSS3 and JS at BigRock httpX 2013 New Delhi
Citation preview
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● 2000 XHTML 1● 2002 Tableless Web Design● 2005 AJAX● 2009 HTML 5● 2011 CSS 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...
HTML5 + CSS3 + JavaScript
One stack to rule them all
HTML5 - Real Time Communications
Web Workers
Web Sockets
Notifications
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-*)
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...
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● ...
JavaScriptYou know JavaScript right ?
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
JavaScript - MVC
source: Mattieu Gamache-Asselin
Backbone.js
Backbone.js
PaaSPlatform-as-a-Service
source: Mattieu Gamache-Asselin
It’s all about the server
Write Once in
HTML 5 + CSS 3 + Javascript
Run Everywherewith
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 & AOnly hardcore technical questions :)
