HTML5

549 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
549
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide


  • - The most successful format in the world
    - Used primarily for websites
    - Used on every large website you use daily: Facebook, Google, Twitter, Vimeo etc
  • A markup language is a system for annotating a text in a way that is syntactically distinguishable from that text.


  • - Combination of improvements to HTML4, CSS and Javascript
    - Spec declares how HTML interacts with the DOM and the Javascript API
    - Additional elements
    - Additional JS Selectors
    - CSS3 properties
  • - One large thing
    - HTML5 is a combination of many technologies and improvements
    - A browser can’t support “HTML5” a browser can support aspects of “HTML5”
    - A “Flash Killer”
    - AJAX

  • Semantic Markup is Easier to Read and Understand
    - Less need for other Languages
    - Let Flash do what it’s good at
    No closing of tags
    Most up to date documentation
    W3C actually put out a spec which is readable by humans
  • XHTML Strict DocType
    - who can write out by hand?
  • No Quirks Mode
    Puts all browsers into standards-based rendering
  • - What you’ve written in HTML4 will still work in HTML5
    - All HTML4 tags are supported in HTML5
    - HTML5 builds upon HTML4
    - Example: HTML5 has all the input types of HTML4, but adds upon them, will show later
  • Features Already Supported In Major Browsers: FireFox, Opera, Safari, Internet Explorer 9

    Some features aren’t available in all browsers:
    - Video & Audio aren’t ready for primetime

    Modernizr
    - Open-Source MIT Licensed & Developed by two reliable developers
    - Booleans telling you what’s supported
    - Allows for CSS classes to be used based on what’s included



  • - XHTML is a mess and never was properly supported
    - Content supplied as Text/HTML not “application/xhtml+xml” as XHTML requested
    - XHTML tried to break websites when markup was incorrect
    - Horrible experience for customers
    - No graceful degradation



  • Get the user’s current location returned to you in a JS Method
    Geolocation can take several seconds
    Google Gears fallback


  • - ~5MB of Storage
    - Cookies are 4kb
    - Not sent to server on every page reload
    - Accessible through JS calls

  • Cache files and resources offline
    - Enables websites to work when a user isn’t connected to the internet
    - Doesn’t work in IE
  • Add an AddType directive in .htaccess (on an apache box)
  • Add an manifest attribute on the <html> element
  • Very simple cache.manifest file declaring which files are necessary.
    - Ability to add explicit (default)
    - Fallback
    - Online whitelist (allows online resources when network is available)

  • - Easier To Read
    - Removes the necessity of appending IDs to everything
    - Selectable by CSS


  • - Remy Sharp
    - MIT Licensed and hosted on Google Code
    - Works all the way back to IE6
  • HTML5 Defines over a Dozen New input types:
  • Fall back to regular inputs. No reason to not use them.
  • Notice keyboard changes based on input types
  • Selector - A way to grab, and iterate elements
    Both CSS and JS
  • ^= Any item who’s ID begins with “post-”
  • a href where the url starts with FTP


  • *= Any item who’s attribute matches wildcard


  • an + b
    a represents a cycle size, n is a counter starting at 0, and b represents an offset value
  • “even” and “odd” exist
  • :first-child existed in CSS 2.1
  • A B Descendant Selector - “my children and grandchildren are my descendants”
  • A + B Adjacent Selector
    - not in IE6
  • A > B Child Selector. “My children will be selected, but not my grandchildren”
    - not in IE6, buggy in IE7
  • Browser level implementation. Faster
  • aka “element name”


  • - Enables JavaScript to be run in the background. Think Multi-Threaded Websites.
    - Workers don't have access to the DOM. No document, getElementById, etc. (The notable exceptions are setTimeout, setInterval, and XMLHttpRequest.)
    - Workers don't have direct access to the 'parent' page.
  • No workers, 4.272 seconds
    16 workers, 1.781 seconds
    - FF 3.5+, S 4.0+, Chrome Nightly
  • - The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images
    - Not SVG. SVG is a visual representation of an object, canvas is not.








  • ×