Html5 - the new kid on the block

1,706 views

Published on

HTML5 - how it can help building the next generation Web?
The world goes mobile, so this is the opportunity to start using HTML5 Today.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,706
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 - the new kid on the block

  1. 1. HTML5 The new kid on the block
  2. 2. 5 is the right version, here’s why
  3. 3. 5 is the right version, here’s why 1 = 3
  4. 4. 5 is the right version, here’s why 1 = 3
  5. 5. 5 is the right version, here’s why 1 = 3
  6. 6. HTML5 - new standard for HTML, XHTML, and the HTML DOM
  7. 7. HTML5 - new standard for HTML, XHTML, and the HTML DOM Rules for HTML5: • Features based on HTML, CSS, DOM, JavaScript • Reduce the need for external plugins • Better error handling • More markup to replace scripting • Should be device independent
  8. 8. New features in HTML5 • Video and audio elements for media playback • Support for local storage & cache • The canvas element for drawing • New semantic elements: article, nav header, footer, section, • New form date, time, email, calendar, control tags: url, search
  9. 9. CSS3 is about breaking CSS into modules • CSS 3 Selectors • CSS 3 Fonts • CSS 3 Backgrounds and borders • CSS 3 Text • CSS 3 Multi column
  10. 10. CSS3 features • Transitions - translate, rotate, scale, skew • Animations
  11. 11. Examples • Transformations • Transitions • Animations • Spinning wheel • Typography
  12. 12. A little help from jQTouch • Open source module for mobile devices on the iPhone, iPad and other web • Created by @davidkaneda • Maintained by @jonathanstark • Free download from http://www.jqtouch.com
  13. 13. Demo
  14. 14. Sencha Touch - commercial product • Allows youand develop mobile iPhone that look to feel native on web apps and Android touch devices • Created by @senchainc • More info http://www.sencha.com/products/touch/
  15. 15. Demo
  16. 16. Browser support
  17. 17. Browser support “All animals are equal”
  18. 18. Browser support “All animals are equal”
  19. 19. Browser support “All animals are equal” “But some animals are more equal than others” George Orwell, Animal Farm
  20. 20. Browser support Chrome gives a hand to IE with Chrome Frame
  21. 21. Browser support Chrome gives a hand to IE with Chrome Frame IE9 will join the party
  22. 22. So, when will we be ready to use all this?
  23. 23. So, when will we be ready to use all this? Well, let me think...
  24. 24. So, when will we be ready to use all this? Well, let me think... NOW
  25. 25. So, when will we be ready to use all this? Well, let me think... NOW Here is WHY and HOW
  26. 26. Everything goes mobile
  27. 27. iOS devices
  28. 28. iOS devices
  29. 29. iOS devices
  30. 30. Android devices
  31. 31. Android devices
  32. 32. Android devices 60,000 Android shipments a day
  33. 33. Mobile browsers
  34. 34. Mobile browsers 95% Webkit based iOS, Android, Blackberry, Palm, Samsung
  35. 35. Native vs Web
  36. 36. Native vs Web
  37. 37. Web is the winner
  38. 38. Web is the winner • Easier to produce • Easier to test • Easier to distribute • Most standardized
  39. 39. But how to use the web for native applications?
  40. 40. PhoneGap to the rescue • Openbuilding cross-platform mobile apps for source development framework • Developed and maintained by @nitobi • Free download from http://www.phonegap.com
  41. 41. Build apps in HTML and JavaScript and still take advantage of core features in mobile SDKs • iPhone/iTouch • Palm • iPad • Symbian • Google Android • Blackberry
  42. 42. Native vs Web+PhoneGap
  43. 43. More HTML5 examples • Video • Virtual reality • Photo gallery • Canvas in 3D • Cloth
  44. 44. And some more • Gift box • 360 • Light table • Wilderness downtown
  45. 45. Thanks! This presentation is brought to you by • Open standards • @font-face Casual • @mborca

×