1. HTML5 That’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. not a collection of HTML5 tips and tricks

4. vision Today!

5. Ingo != Microsoft

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

8. http://www.w3.org/TR/2008/WD-html5-diff-20080122/

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

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

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

12. Write once, run everywhere?

13. Or rather: write once, debug everywhere?

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

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

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

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

19. HTML5: Application Cache http://bit.ly/3fVYjc (work in progress)

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

21. HTML5: When will it be done?

22. HTML5: When will it be ready?

23. But...

24. But... Javascript SUCKS!

25. You might have missed the best parts!

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

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

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

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

31. http://bit.ly/chJslK

32. Let‘s see code!

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

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

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

36. Progressive Enhancement

37. Hashchange Back/Forward/URLs

38. Toolkits help you...

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

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

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

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

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

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

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

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

47. 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

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

49. 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 blog http://blogs.msdn.com/belux Join us on Facebook http://www.facebook.com/msdnbe http://www.facebook.com/msdnbelux LinkedIn: http://linkd.in/msdnbelux/ Twitter: @msdnbelux Download MSDN/TechNet Desktop Gadget http://bit.ly/msdntngadget

50. TechDays 2011 On-Demand Watch this session on-demand via Channel9 http://channel9.msdn.com/belux Download to your favorite MP3 or video player Get access to slides and recommended resources by the speakers

51. THANK YOU

52. "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.”