HTML5 – THE BAD, THE GOOD, AND THE FUN!

Presented for Euclid High School

By Sarah Dutkiewicz

sarah@cletechconsulting.com

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

OFFLINE STORAGE

GEOLOCATION

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

CSS 3D TRANSFORMS DEMO

ANIMATED TWEETS

SKETCHPAD

WORDMARK.IT

AGENT 8-BALL

COOKIE CLICKER

ADDITIONAL RESOURCES

ADOBE® KULER

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

sarah@cletechconsulting.com

Twitter: @sadukie

Blog: http://codinggeekette.com