Your SlideShare is downloading. ×
HTML 5 – Let’s Make Progress [eduWeb 2011]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5 – Let’s Make Progress [eduWeb 2011]

1,652

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,652
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Let’s Make Progress
    Shahab Lashkari
    Product Manager
    OmniUpdate, Inc.
    shahab@omniupdate.com
    @OUShahab
  • 2. Overview
    What it is
    What it isn’t
    Semantics
    Forms
    Video
    Canvas vs. SVG vs. CSS3
    Compatibility
    Questions?
  • 3. What is HTML 5?
    The latest revision of the HTML standard
    Contains both HTML 4 and XHTML 1
    Though some elements have been deprecated
    Can be written in either syntax
    New APIs (e.g., canvas, offline storage, media playback, drag-and-drop, etc.)
    New rules for error handling (!)
  • 4. What HTML 5 is not…
    An official W3C recommendation
    yet
    A silver bullet
    Fully supported in [m]any browsers
  • 5. So what’s different?
  • 6. So what’s different?
  • 7. New semantic elements
    article
    aside
    audio
    canvas
    figcaption
    figure
    footer
    header
    nav
    section
    video
    etc.
  • 8. New semantic elements
    <header>
    <nav>
    <article>
    <aside>
    <section>
    <footer>
  • 9. New form input types
    email
    url
    tel
    number
    range
    search
    date
    month
    week
    time
    color
    etc.
    e.g., <input type="email">
  • 10. Forms
    New input types can make life easier on mobile devices!
  • 11. New form input attributes
    autofocus*
    placeholder
    required*
    pattern
    speech?*
    etc.
    *booleanattributes
  • 12. Boolean attributes
    <input type="email" autofocus>
    <input type="email" autofocus="autofocus">
    <input type="email" autofocus="true">
    <input type="email" autofocus="false">
  • 13. <video>
    <video id="myvideo" … >
    <source … />
    … your fallback code goes here …
    </video>
    Use JavaScript to interact with DOM and create your own video controls
    document.getElementById("myvideo").play();
  • 14. <video>
  • 15. Canvas vs. SVG vs. CSS3
    Canvas is essentially a sketchpad
    Scalable Vector Graphics use math to create images
    CSS3 can do some prettyamazingthings
  • 16. Compatibility
    Should I be sniffing for user agent?
    Then how will I know which features are supported?
    What if I want to use a feature that isn’t supported in all browsers?
  • 17. Should I be sniffing for user agent?
    NO
  • 18. Which features are supported?
    Mark Pilgrim suggests using one of 4 techniques:
    Check if a certain property exists on a global object (such as window or navigator).
    Example: testing for geolocationsupport
    Create an element, then check if a certain property exists on that element.
    Example: testing for canvas support
    Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
    Example: testing which video formats are supported
    Create an element, set a property to a certain value, then check if the property has retained its value.
    Example: testing which <input> types are supported
  • 19. Useful Resources
    Modernizr
    http://www.modernizr.com/
    When can I use…
    http://www.caniuse.com/
    HTML5 Boilerplate
    http://html5boilerplate.com/
  • 20. What if I want to use an unsupported feature?
    do websites need to look exactly the same in every browser?
  • 21. What if I want to use an unsupported feature?
    dowebsitesneedtolookexactlythesameineverybrowser.com
  • 22. Questions?
  • 23. References
    Dive into HTML5 - http://diveintohtml5.org
    A List Apart - http://www.alistapart.com/articles/previewofhtml5
    W3C - http://www.w3.org/html5
    Wikipedia - http://en.wikipedia.org/wiki/HTML5_video
    HTML5 Rocks - http://www.html5rocks.com
  • 24. Examples in higher education
    University of Denver
    The University of North Dakota
  • 25. Thank you!
    Shahab Lashkari
    Product Manager
    OmniUpdate, Inc.
    shahab@omniupdate.com
    @OUShahab

×