Sarah Dutkiewicz gave a presentation on HTML5 to Euclid High School students. The presentation covered what HTML5 is, why it is important, both the limitations and capabilities of HTML5, and demonstrated some fun websites that use HTML5 features. The agenda included discussing the bad parts of HTML5 like browser support issues, the good parts like new input types and multimedia, and finally showed examples of sites using HTML5 through demos and screenshots.

1. HTML5 – THE BAD, THE
GOOD, AND THE FUN!
Presented for Euclid High School
By Sarah Dutkiewicz
sarah@cletechconsulting.com

2. ABOUT ME
• Spent a lot of time goofing
off with computers in high
school and met a guy
who told me to learn HTML
• Got a Bachelor of Science
in Computer Science and
Engineering Technology
• Did some IT work –
desktop support, phone
support, and system
admin
• Found that development
was my happy place

3. AGENDA
• What is HTML5?
• Why should you care about it?
• The Good – Some of the capabilities
• The Bad – Where it doesn’t always work
• The Fun – Fun sites using HTML5!

5. HTML5
• “HTML5 Technologies” / “HTML5 Stack” collectively used to describe:
• HTML 5 Core
• CSS3
• Includes other features such as:
•
•
•
•
Web Storage
Geolocation
Drag and Drop
Web Workers and Sockets

6. CSS 3
• Animations & transitions
• Transformations
• Styles
• Column Layouts
• Media Queries
• Fonts

7. WHAT IS HTML5 REPLACING?
• Flash
• Shockwave
• Silverlight

8. WHO USES HTML5?
• Web browsers
• Mobile devices*
• Tablets

9. HTML5 – THE BAD
Limitations of the HTML5 Stack

10. NOT FULLY SUPPORTED
• Working Draft features
• Not always supported in the older browsers

12. MEDIA SUPPORT
• Each browser handles media formats differently – no one format rules them all
• Audio formats
• MP3 (not Opera, nor Firefox 20 and below)
• Wav (not IE)
• Ogg (not IE, nor Safari)
• Video formats
• MP4 (not Opera, nor Firefox 20 and below)
• WebM (not IE, nor Safari)
• Ogg (not IE, nor Safari)

13. HTML5 – THE GOOD
Some of the many capabilities of the HTML5 Stack

14. SEMANTIC MARKUP
• <header>
• <section>
• <footer>
• <article>
• <nav>
• <aside>

15. INPUT TYPES DEMO

16. OFFLINE STORAGE

18. GEOLOCATION

19. HTML 5 MULTIMEDIA DEMO

20. NETFLIX
• Netflix currently does
Silverlight streaming
• Working on plugins to move
to HTML5

21. HTML5 – THE FUN
The Fun Sites Using HTML5

22. CSS3 DEMO

23. CSS 3D TRANSFORMS DEMO

24. ANIMATED TWEETS

25. SKETCHPAD

26. WORDMARK.IT

27. AGENT 8-BALL

28. COOKIE CLICKER

29. ADDITIONAL RESOURCES

30. ADOBE® KULER

31. HTML 5 RESOURCES
• Can I use… - http://caniuse.com
• HTML5 Demos and Examples - http://html5demos.com/
• More HTML5 Demos - http://html5-demos.appspot.com/
• Field Guide to Web Applications http://www.html5rocks.com/webappfieldguide/toc/index/
• IE Test Drive - http://ie.microsoft.com/testdrive/Default.html
• 48 Excellent HTML5 Demos - http://www.hongkiat.com/blog/48-excellenthtml5-demos/
• 15 HTML5 Experiments - http://www.hongkiat.com/blog/15-html5experiments/

32. CONTACT INFORMATION
Sarah Dutkiewicz
Cleveland Tech Consulting, LLC
sarah@cletechconsulting.com
Twitter: @sadukie
Blog: http://codinggeekette.com