html5 – the good, the bad, and the fun
DESCRIPTION
Presented to Euclid High School juniors and seniors on the fun and pitfalls of working with HTML5.TRANSCRIPT
HTML5 – THE BAD, THE GOOD, AND THE FUN!
Presented for Euclid High School
By Sarah Dutkiewicz
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
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!
• “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
HTML5
• Animations & transitions
• Transformations
• Styles
• Column Layouts
• Media Queries
• Fonts
CSS 3
WHAT IS HTML5 REPLACING?
• Flash
• Shockwave
• Silverlight
• Web browsers
• Mobile devices*
• Tablets
WHO USES HTML5?
HTML5 – THE BADLimitations of the HTML5 Stack
NOT FULLY SUPPORTED
• Working Draft features
• Not always supported in the older browsers
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)
HTML5 – THE GOODSome of the many capabilities of the HTML5 Stack
• <header>
• <section>
• <footer>
• <article>
• <nav>
• <aside>
SEMANTIC MARKUP
INPUT TYPES DEMO
HTML 5 MULTIMEDIA DEMO
NETFLIX
• Netflix currently does Silverlight streaming
• Working on plugins to move to HTML5
HTML5 – THE FUNThe Fun Sites Using HTML5
CSS3 DEMO
ADDITIONAL RESOURCES
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-excellent-html5-demos/
• 15 HTML5 Experiments - http://www.hongkiat.com/blog/15-html5-experiments/
CONTACT INFORMATIONSarah Dutkiewicz
Cleveland Tech Consulting, LLC
Twitter: @sadukie
Blog: http://codinggeekette.com