Download - HTML5 That’s What You Need to Know Today
![Page 1: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/1.jpg)
![Page 2: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/2.jpg)
HTML5That’s What You Need to Know
Today
Ingo Rammer | thinktecture | [email protected] | @ingorammer
![Page 3: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/3.jpg)
Ingo Rammer and thinktecture• Support and consulting for software architects and
developers– Architectural Consulting and Prototyping– Developer-Coaching and -Mentoring– Application Optimization, Troubleshooting, Debugging– Architecture and Code Reviews
• Slides/Samples: http://weblogs.thinktecture.com/ingo• [email protected]• @ingorammer
![Page 4: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/4.jpg)
visionToday!
![Page 5: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/5.jpg)
Ingo != Microsoft
![Page 6: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/6.jpg)
"We believe that HTML5 and related technologies, in conjunction with faster and faster browsers, finally give developers the tools they need to create experiences that are just as vivid, interactive and high-fidelity as what you have come to expect from native applications without the need for plug-ins.”
(Microsoft, http://beautyoftheweb.com/#/unplugged)
![Page 7: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/7.jpg)
http://beautyoftheweb.com/ .........................Microsofthttp://html5.com ............................................... Applehttp://html5rocks.com/ ................................... Googlehttp://bit.ly/gGPnQH ........................................... RIM
![Page 8: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/8.jpg)
HTML5 + CSS3 + JS
Common Application PlatformDesktops, Tablets, Mobile
![Page 9: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/9.jpg)
Windows, Mac, Linux
Mobile: iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (Fall 2011)
![Page 10: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/10.jpg)
Write once, run everywhere?
![Page 11: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/11.jpg)
Or rather: write once, debug everywhere?
![Page 12: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/12.jpg)
![Page 13: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/13.jpg)
Old School WebBrowser Server
ASP.NET
HTTP GET
Dynamically generated HTML
User
Browserclicks Server
ASP.NET
HTTP GETDynamically generated HTML
1
2
![Page 14: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/14.jpg)
Ajaxified WebBrowser Server
ASP.NET
HTTP GET
Dynamically generated HTML
User
BrowserclicksServer
WCF
HTTP GET
Data only
12
runs JSDisplay
Data
![Page 15: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/15.jpg)
Offlineable Data
Browser ServerHTTP GET
Static HTML (maybe)
User
BrowserclicksServer
WCF
HTTP GET
Data only
12
runs JSDisplay
DataLocal Storage
![Page 16: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/16.jpg)
Future: Offlineable Web Apps
Browser
User
Browserclicks
12
runs JSDisplay
Data
Cached/local HTML
Local Storage
3 Server
Sync via HTTP POST + GET
when online
![Page 17: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/17.jpg)
HTML5 + CSS3 + JS
Common Application PlatformDesktops, Tablets, Mobile
![Page 18: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/18.jpg)
HTML5: When will it be done?
![Page 19: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/19.jpg)
HTML5: When will it be ready?
![Page 20: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/20.jpg)
But ...
![Page 21: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/21.jpg)
But ... Javascript SUCKS!?
![Page 22: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/22.jpg)
You might have missed the best parts!
![Page 23: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/23.jpg)
![Page 24: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/24.jpg)
This book might change everything
you think about Javascript
![Page 25: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/25.jpg)
And while we‘re at it ...
![Page 26: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/26.jpg)
Online for free at http://diveintohtml5.org
![Page 27: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/27.jpg)
But ... isn‘t this slow?
![Page 28: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/28.jpg)
http://bit.ly/chJslK
![Page 29: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/29.jpg)
Let‘s see code!
![Page 30: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/30.jpg)
HTML5: Web Storage(localStorage, sessionStorage)http://www.w3.org/TR/webstorage/
![Page 31: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/31.jpg)
Detect features, not browsers!http://modernizr.com
![Page 32: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/32.jpg)
General Informationhttp://caniuse.com/
![Page 33: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/33.jpg)
Toolkits help you ...
![Page 34: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/34.jpg)
modernizrHTML5 Feature Detectionhttp://modernizr.com
![Page 35: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/35.jpg)
jQueryWeb Framework, HTML-based http://jQuery.com
![Page 36: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/36.jpg)
Ext JSWeb Framework, Object-model driven, graphical designer (GPLv3 or commercial)http://sencha.com/
![Page 37: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/37.jpg)
Sencha Touch (Android, iOS, Blackberry 6 coming)http://sencha.com/products/touch/
![Page 38: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/38.jpg)
jQuery Mobilehttp://jquerymobile.com/(PhoneGap to iOS, Symbian 5, Blackberry 5+, Android 1.5+, webOS 1.4.1+)
![Page 39: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/39.jpg)
WebApp.Nethttp://webapp-net.comGreat UX, small community
![Page 40: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/40.jpg)
PhoneGapOpen Source Packager + JS for native API (extensible!)(iOS, Android, RIM, Palm, Symbian, ... Windows Phone 7 in Fall?)http://phonegap.com
![Page 41: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/41.jpg)
Organizational Framework
• Detect features, not browsers• Pick your level of abstraction• Frameworks help!
– jQuery, Dojo, Prototype, ExtJS, ...
![Page 42: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/42.jpg)
Technological Platform
• Local storage (localStorage, sessionStorage)• Local drawing (canvas)• Semantic information (markup, input types)• Abstractions (datajs, jQuery, jqplot, jqGrid,
jQuery Mobile, knockout.js, ...)• CSS3 (incl. animations, transitions, ...)• Future: Web Workers, Web Sockets
![Page 43: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/43.jpg)
And more ...• Polyfills and shims for backward compatibility• Resource combination (JS + CSS)
– You don‘t *have* to develop everything in one file, but you should ship only one file
• Minification, Compression, ...– You *can* use descriptive method, function and
variable names• Advanced Javascript techniques!• Packagers for mobile OSes (PhoneGap, ...)
![Page 44: HTML5 That’s What You Need to Know Today](https://reader035.vdocuments.mx/reader035/viewer/2022062411/5681668b550346895dda4cde/html5/thumbnails/44.jpg)