Download - The Appy Hour
![Page 1: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/1.jpg)
HTML5 + CSS3 + JS
Rajnish Kumar & Ernesto Cohnen
![Page 2: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/2.jpg)
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
![Page 3: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/3.jpg)
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...
![Page 4: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/4.jpg)
HTML5 + CSS3 + JavaScript
One stack to rule them all
![Page 5: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/5.jpg)
![Page 6: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/6.jpg)
HTML5 - Real Time Communications
Web Workers
Web Sockets
Notifications
![Page 7: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/7.jpg)
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-*)
![Page 8: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/8.jpg)
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...
![Page 9: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/9.jpg)
CSS3
![Page 10: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/10.jpg)
CSS3 - Animations + Transitions
● Rotate● scale● translate● …
Save the iphone!
![Page 11: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/11.jpg)
CSS3
● Selectors○ :first-child, :not, >, +, nth-child
(even)...● Text: ellipsis, columns...● Webfonts & iconic fonts
![Page 12: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/12.jpg)
CSS3 - Effects
● Opacity (alpha)● Rounded corners (border-radius)● Gradients● Shadows● Border image● ...
![Page 13: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/13.jpg)
JavaScriptYou know JavaScript right ?
![Page 14: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/14.jpg)
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
![Page 15: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/15.jpg)
JavaScript - MVC
source: Mattieu Gamache-Asselin
![Page 16: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/16.jpg)
Backbone.js
![Page 17: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/17.jpg)
Backbone.js
![Page 18: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/18.jpg)
![Page 19: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/19.jpg)
![Page 20: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/20.jpg)
![Page 21: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/21.jpg)
![Page 22: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/22.jpg)
PaaSPlatform-as-a-Service
![Page 23: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/23.jpg)
source: Mattieu Gamache-Asselin
![Page 24: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/24.jpg)
It’s all about the server
![Page 25: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/25.jpg)
![Page 26: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/26.jpg)
![Page 27: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/27.jpg)
Write Once in
HTML 5 + CSS 3 + Javascript
Run Everywherewith
Phonegap / Parse / Trigger.io / App Framework etc.
![Page 28: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/28.jpg)
Native vs Mobile Web
![Page 29: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/29.jpg)
Native “and” Mobile Web
+
![Page 30: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/30.jpg)
Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ - KendoUI
![Page 31: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/31.jpg)
Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ - KendoUI
![Page 32: The Appy Hour](https://reader034.vdocuments.us/reader034/viewer/2022042601/554d2352b4c905ca208b4d6c/html5/thumbnails/32.jpg)
Q & AOnly hardcore technical questions :)