1 / 46

HTML5 That’s what you need to know today

HTML5 That’s what you need to know today. Ingo Rammer, thinktecture weblogs.thinktecture.com/ingo @ingorammer. Ingo Rammer and thinktecture. Support and consulting for software architects and developers Architectural Consulting and Prototyping Developer-Coaching and -Mentoring

adamma
Download Presentation

HTML5 That’s what you need to know today

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5That’s what you need to know today Ingo Rammer, thinktecture weblogs.thinktecture.com/ingo@ingorammer

  2. 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 • ingo.rammer@thinktecture.com

  3. Today! vision

  4. Ingo != Microsoft

  5. "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)

  6. http://beautyoftheweb.com/ .......................Microsoft http://html5.com .............................................. Apple http://html5rocks.com/ .................................. Google http://bit.ly/gGPnQH ........................................... RIM

  7. HTML5 + CSS3 + JS Common Application Platform Desktops, Tablets, Mobile

  8. Windows, Mac, Linux Mobile: iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (Fall 2011)

  9. Write once, run everywhere?

  10. Or rather: write once, debug everywhere?

  11. Old School Web 1 HTTP GET Browser Server ASP.NET Dynamically generated HTML 2 User HTTP GET clicks Server Browser Dynamically generated HTML ASP.NET

  12. Ajaxified Web 1 HTTP GET Browser Server ASP.NET Dynamically generated HTML 2 User Browser clicks Server HTTP GET runs JS WCF Data only Display Data

  13. Offlineable Data HTTP GET 1 Browser Server Static HTML (maybe) 2 User Browser clicks HTTP GET Server runs JS WCF Data only Display Data Local Storage

  14. Future: Offlineable Web Apps 1 Browser Cached/local HTML 2 3 User Server Browser Sync via HTTP POST + GETwhen online clicks runs JS Display Data Local Storage

  15. HTML5 + CSS3 + JS Common Application Platform Desktops, Tablets, Mobile

  16. HTML5: When will it be done?

  17. HTML5: When will it be ready?

  18. But ...

  19. But ... Javascript SUCKS!

  20. You might have missed the best parts!

  21. This book might change everything you think about Javascript.

  22. And while we‘re at it ...

  23. Online for free at http://diveintohtml5.org

  24. But ... isn‘t this slow?

  25. http://bit.ly/chJslK

  26. Let‘s see code!

  27. HTML5: Web Storage (localStorage, sessionStorage) http://www.w3.org/TR/webstorage/

  28. Detect features, not browsers!http://modernizr.com

  29. General Information http://caniuse.com/

  30. Toolkits help you ...

  31. modernizr HTML5 Feature Detection http://modernizr.com

  32. jQuery Web Framework, HTML-based http://jQuery.com

  33. Ext JS Web Framework, Object-model driven, graphical designer (GPLv3 or commercial) http://sencha.com/

  34. Sencha Touch (Android, iOS, Blackberry 6 coming) http://sencha.com/products/touch/

  35. jQuery Mobile http://jquerymobile.com/ (PhoneGap to iOS, Symbian 5, Blackberry 5+, Android 1.5+, webOS 1.4.1+)

  36. WebApp.Net http://webapp-net.com Great UX, small community

  37. PhoneGap Open Source Packager + JS for native API (extensible!) (iOS, Android, RIM, Palm, Symbian, ... Windows Phone 7 in Fall?) http://phonegap.com

  38. Organizational Framework • Detect features, not browsers • Pick your level of abstraction • Frameworks help! • jQuery, Dojo, Prototype, ExtJS, ...

  39. Technological Platform Local storage (localStorage, sessionStorage) Local drawing (canvas) Semantic information (markup, input types) Abstractions (datajs, jQuery, jqplot, jqGrid, jQuery Mobile) CSS3 (incl. animations, transitions, ...) Future: Web Workers, Web Sockets

  40. 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, ...)

  41. Stay up to date with MSDN Belux • Register for our newsletters and stay up to date:http://www.msdn-newsletters.be • Technical updates • Event announcements and registration • Top downloads • Follow our bloghttp://blogs.msdn.com/belux • Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux • LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget

  42. TechDays 2011 On-Demand • Watchthis session on-demand via Channel9http://channel9.msdn.com/belux • Download to your favorite MP3 or video player • Get access to slides and recommended resources by the speakers

  43. THANK YOU

  44. "We believe that HTML5 and related technologies […] high-fidelity as what you have come to expect from native applications without the need for plug-ins.”

More Related