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 B...
AGENDA
• What is HTML5?
• Why should you care about it?
• The Good – Some of the capabilities
• The Bad – Where it doesn’t...
HTML5
• “HTML5 Technologies” / “HTML5 Stack” collectively used to describe:
• HTML 5 Core
• CSS3

• Includes other feature...
CSS 3
• Animations & transitions
• Transformations
• Styles
• Column Layouts

• Media Queries
• Fonts
WHAT IS HTML5 REPLACING?
• Flash
• Shockwave
• Silverlight
WHO USES HTML5?
• Web browsers
• Mobile devices*
• Tablets
HTML5 – THE BAD
Limitations 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 ...
HTML5 – THE GOOD
Some of the many capabilities of the HTML5 Stack
SEMANTIC MARKUP
• <header>
• <section>
• <footer>
• <article>

• <nav>
• <aside>
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 FUN
The 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 ...
CONTACT INFORMATION
Sarah Dutkiewicz
Cleveland Tech Consulting, LLC
sarah@cletechconsulting.com
Twitter: @sadukie
Blog: ht...
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
Upcoming SlideShare
Loading in …5
×

HTML5 – the good, the bad, and the fun

1,537 views

Published on

Presented to Euclid High School juniors and seniors on the fun and pitfalls of working with HTML5.

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

No Downloads
Views
Total views
1,537
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
81
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Image taken from: http://onproductmanagement.net/wp-content/uploads/2010/10/why-us.jpg
  • The YouTube Story: Normal browser mode is still currently FlashMobile view could fall into an HTML5 setup
  • HTML 5 Logo available at: http://www.w3.org/html/logo/
  • Diagram taken from: http://alistapart.com/article/previewofhtml5
  • Demo: http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.htmlDoesn’t work in IE. Run this in Chrome.
  • Behind the scenes look at: http://www.exploretouch.ie/behind-the-scenes/
  • http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
  • Run in Chrome
  • Link: https://kuler.adobe.com/create/color-wheel/
  • HTML5 – the good, the bad, and the fun

    1. 1. HTML5 – THE BAD, THE GOOD, AND THE FUN! Presented for Euclid High School By Sarah Dutkiewicz sarah@cletechconsulting.com
    2. 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. 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!
    4. 4. 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
    5. 5. CSS 3 • Animations & transitions • Transformations • Styles • Column Layouts • Media Queries • Fonts
    6. 6. WHAT IS HTML5 REPLACING? • Flash • Shockwave • Silverlight
    7. 7. WHO USES HTML5? • Web browsers • Mobile devices* • Tablets
    8. 8. HTML5 – THE BAD Limitations of the HTML5 Stack
    9. 9. NOT FULLY SUPPORTED • Working Draft features • Not always supported in the older browsers
    10. 10. 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)
    11. 11. HTML5 – THE GOOD Some of the many capabilities of the HTML5 Stack
    12. 12. SEMANTIC MARKUP • <header> • <section> • <footer> • <article> • <nav> • <aside>
    13. 13. INPUT TYPES DEMO
    14. 14. OFFLINE STORAGE
    15. 15. GEOLOCATION
    16. 16. HTML 5 MULTIMEDIA DEMO
    17. 17. NETFLIX • Netflix currently does Silverlight streaming • Working on plugins to move to HTML5
    18. 18. HTML5 – THE FUN The Fun Sites Using HTML5
    19. 19. CSS3 DEMO
    20. 20. CSS 3D TRANSFORMS DEMO
    21. 21. ANIMATED TWEETS
    22. 22. SKETCHPAD
    23. 23. WORDMARK.IT
    24. 24. AGENT 8-BALL
    25. 25. COOKIE CLICKER
    26. 26. ADDITIONAL RESOURCES
    27. 27. ADOBE® KULER
    28. 28. 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/
    29. 29. CONTACT INFORMATION Sarah Dutkiewicz Cleveland Tech Consulting, LLC sarah@cletechconsulting.com Twitter: @sadukie Blog: http://codinggeekette.com

    ×