2. HTML5
Development in 30 minutes
Nazrul Kamaruddin
September 9, 2011
#mobiledevday

3. Community Organizer
Google Technology User Group
Community Manager
CodeAndroid Malaysia
Senior Manager, Technology & Product
NSTP e-Media
Former Developer Evangelist
Chalkboard Pte. Ltd.
...and history...

4. Agenda
• A sprint into HTML5 development
• Code examples
• References

5. HTML + CSS + JS

6. Android Browser 69%
Opera Mobile 72%
iOS Safari 65%
IE 9 54%
Chrome 90%
Browser Support for HTML5

7. HTML

8. • !doctype
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• Forms

9. HTML5 Boilerplate
http://www.html5boilerplate.com
"HTML5 Boilerplate is the
professional badass's base
HTML/CSS/JS template for a
fast, robust and future-proof
site."

10. CSS

11. • CSS Selectors
• CSS Rounded corners
• CSS Opacity
• CSS Shadows
• CSS Transitions
• CSS Gradients
• Webfonts

12. JS

13. • Modernizr
• Geolocation
• Mobile Bookmark Bubble
• Application Cache

14. Dive Into HTML5
by Mark Pilgrim
http://www.diveintohtml5.org

15. What’s next?

16. • PhoneGap
http://www.phonegap.com
• AppCelerator
http://appcelerator.com
• Sencha Touch
http://sencha.com
• JQTouch
http://jqtouch.com
• jQuery Mobile
http://jquerymobile.com

17. • 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

18. Google DevFest
29th September 2011
UCTI-APIIT @ Technology Park Malaysia, Kuala Lumpur
http://code.google.com/events/devfests/2011/

19. Download sample codes
http://mobiledevday.appspot.com

20. TQ :)