0
HTML5Development in 30 minutesNazrul KamaruddinSeptember 9, 2011#mobiledevday
Community OrganizerGoogle Technology User GroupCommunity ManagerCodeAndroid MalaysiaSenior Manager, Technology & ProductNS...
Agenda• A sprint into HTML5 development• Code examples• References
HTML   +   CSS   +   JS
Android Browser      69%Opera Mobile         72%iOS Safari           65%IE 9                 54%Chrome               90%Br...
HTML
• !doctype• <header>• <nav>• <section>• <article>• <aside>• <footer>• Forms
HTML5 Boilerplate   http://www.html5boilerplate.com  "HTML5 Boilerplate is the  professional badasss base  HTML/CSS/JS tem...
CSS
• CSS Selectors• CSS Rounded corners• CSS Opacity• CSS Shadows• CSS Transitions• CSS Gradients• Webfonts
JS
• Modernizr• Geolocation• Mobile Bookmark Bubble• Application Cache
Dive Into HTML5      by Mark Pilgrimhttp://www.diveintohtml5.org
What’s next?
• PhoneGap  http://www.phonegap.com• AppCelerator  http://appcelerator.com• Sencha Touch  http://sencha.com• JQTouch  http...
• HTML5 Rocks  http://www.html5rocks.com• HTML5 Doctor  http://www.html5doctor.com• HTML5 Wow!  http://www.htmlfivewow.com...
Google DevFest             29th September 2011    UCTI-APIIT @ Technology Park Malaysia, Kuala Lumpurhttp://code.google.co...
Download sample codeshttp://mobiledevday.appspot.com
TQ :)
HTML5 development in 30 minutes
Upcoming SlideShare
Loading in...5
×

HTML5 development in 30 minutes

1,380

Published on

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

No Downloads
Views
Total Views
1,380
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 development in 30 minutes"

  1. 1. HTML5Development in 30 minutesNazrul KamaruddinSeptember 9, 2011#mobiledevday
  2. 2. Community OrganizerGoogle Technology User GroupCommunity ManagerCodeAndroid MalaysiaSenior Manager, Technology & ProductNSTP e-MediaFormer Developer EvangelistChalkboard Pte. Ltd....and history...
  3. 3. Agenda• A sprint into HTML5 development• Code examples• References
  4. 4. HTML + CSS + JS
  5. 5. Android Browser 69%Opera Mobile 72%iOS Safari 65%IE 9 54%Chrome 90%Browser Support for HTML5
  6. 6. HTML
  7. 7. • !doctype• <header>• <nav>• <section>• <article>• <aside>• <footer>• Forms
  8. 8. HTML5 Boilerplate http://www.html5boilerplate.com "HTML5 Boilerplate is the professional badasss base HTML/CSS/JS template for afast, robust and future-proof site."
  9. 9. CSS
  10. 10. • CSS Selectors• CSS Rounded corners• CSS Opacity• CSS Shadows• CSS Transitions• CSS Gradients• Webfonts
  11. 11. JS
  12. 12. • Modernizr• Geolocation• Mobile Bookmark Bubble• Application Cache
  13. 13. Dive Into HTML5 by Mark Pilgrimhttp://www.diveintohtml5.org
  14. 14. What’s next?
  15. 15. • PhoneGap http://www.phonegap.com• AppCelerator http://appcelerator.com• Sencha Touch http://sencha.com• JQTouch http://jqtouch.com• jQuery Mobile http://jquerymobile.com
  16. 16. • HTML5 Rocks http://www.html5rocks.com• HTML5 Doctor http://www.html5doctor.com• HTML5 Wow! http://www.htmlfivewow.com• HTML5 slides from Boris Smus http://smustalks.appspot.com• Google Code Blog http://googlecode.blogspot.com
  17. 17. Google DevFest 29th September 2011 UCTI-APIIT @ Technology Park Malaysia, Kuala Lumpurhttp://code.google.com/events/devfests/2011/
  18. 18. Download sample codeshttp://mobiledevday.appspot.com
  19. 19. TQ :)
  1. A particular slide catching your eye?

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

×