• Save
HTML 5 – Let’s Make Progress [eduWeb 2011]
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,915
On Slideshare
1,910
From Embeds
5
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 5

https://twitter.com 4
http://twitter.com 1

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