The document discusses HTML5 as the new standard for web development, emphasizing its features such as native support for audio and video, better error handling, and improved semantics. It also highlights CSS3's modularity and new capabilities for web design, including animations and media queries, while addressing the growing importance of mobile platforms and frameworks like PhoneGap for cross-platform app development. The presentation notes the necessity of adopting these technologies now to stay competitive in a mobile-driven web environment.

1. HTML5
The new kid on the block

2. 5 is the right version, here’s why

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

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

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

6. HTML5 - new standard for HTML,
XHTML, and the HTML DOM

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. 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. 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. CSS3 features
• Transitions - translate, rotate, scale, skew
• Animations

11. Examples
• Transformations
• Transitions
• Animations
• Spinning wheel
• Typography

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

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

16. Browser support

17. Browser support
“All animals are equal”

18. Browser support
“All animals are equal”

19. Browser support
“All animals are equal”
“But some animals are more equal than others”
George Orwell, Animal Farm

20. Browser support
Chrome gives a hand to IE with Chrome Frame

21. Browser support
Chrome gives a hand to IE with Chrome Frame
IE9 will join the party

22. So, when will we be ready
to use all this?

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

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

25. So, when will we be ready
to use all this?
Well, let me think... NOW
Here is WHY and HOW

26. Everything goes mobile

27. iOS devices

28. iOS devices

29. iOS devices

30. Android devices

31. Android devices

32. Android devices
60,000 Android shipments a day

33. Mobile browsers

34. Mobile browsers
95% Webkit based
iOS, Android, Blackberry, Palm, Samsung

35. Native vs Web

36. Native vs Web

37. Web is the winner

38. Web is the winner
• Easier to produce
• Easier to test
• Easier to distribute
• Most standardized

39. But how to use the web
for native applications?

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. 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. Native vs Web+PhoneGap

43. More HTML5 examples
• Video
• Virtual reality
• Photo gallery
• Canvas in 3D
• Cloth

44. And some more
• Gift box
• 360
• Light table
• Wilderness downtown

45. Thanks!
This presentation is brought to you by
• Open standards
• @font-face Casual
• @mborca