HTML5
The new kid on the block
5 is the right version, here’s why
5 is the right version, here’s why



        1 = 3
5 is the right version, here’s why



        1 = 3
5 is the right version, here’s why



        1 = 3
HTML5 - new standard for HTML,
   XHTML, and the HTML DOM
HTML5 - new standard for HTML,
     XHTML, and the HTML DOM
  Rules for HTML5:
• Features based on HTML, CSS, DOM, JavaScr...
New features in HTML5


• Video and audio elements for media playback
• Support for local storage & cache
• The canvas ele...
CSS3 is about breaking CSS into modules



 • CSS   3 Selectors

 • CSS   3 Fonts

 • CSS   3 Backgrounds and borders

 • ...
CSS3 features




• Transitions   - translate, rotate, scale, skew

• Animations
Examples



• Transformations
• Transitions
• Animations
• Spinning wheel
• Typography
A little help from jQTouch




• Open source module for mobile devices
  on the iPhone, iPad and other
                   ...
Demo
Sencha Touch - commercial product




• Allows youand develop mobile iPhone
  that look
             to
                fe...
Demo
Browser support
Browser support

“All animals are equal”
Browser support

“All animals are equal”
Browser support

“All animals are equal”
“But some animals are more equal than others”
                          George Or...
Browser support

Chrome gives a hand to IE with Chrome Frame
Browser support

Chrome gives a hand to IE with Chrome Frame
IE9 will join the party
So, when will we be ready
to use all this?
So, when will we be ready
to use all this?

Well, let me think...
So, when will we be ready
to use all this?

Well, let me think...   NOW
So, when will we be ready
to use all this?

Well, let me think...   NOW



Here is WHY and HOW
Everything goes mobile
iOS devices
iOS devices
iOS devices
Android devices
Android devices
Android devices




60,000 Android shipments a day
Mobile browsers
Mobile browsers




           95% Webkit based
iOS, Android, Blackberry, Palm, Samsung
Native vs Web
Native vs Web
Web is the winner
Web is the winner



• Easier to produce
• Easier to test
• Easier to distribute
• Most standardized
But how to use the web
for native applications?
PhoneGap to the rescue




• Openbuilding cross-platform mobile apps
  for
       source development framework


• Develop...
Build apps in HTML and JavaScript
     and still take advantage
 of core features in mobile SDKs



 • iPhone/iTouch    • ...
Native vs Web+PhoneGap
More HTML5 examples


• Video
• Virtual reality
• Photo gallery
• Canvas in 3D
• Cloth
And some more




• Gift box
• 360
• Light table
• Wilderness downtown
Thanks!
This presentation is brought to you by




  • Open standards
  • @font-face Casual
  • @mborca
Upcoming SlideShare
Loading in...5
×

Html5 - the new kid on the block

1,543

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,543
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×