• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Practical Guide to HTML5
 

A Practical Guide to HTML5

on

  • 1,483 views

 

Statistics

Views

Total Views
1,483
Views on SlideShare
1,479
Embed Views
4

Actions

Likes
2
Downloads
14
Comments
1

1 Embed 4

http://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Can’t see the slideshow above, as it is—ironically—Flash-only?

    http://wil.to/html5/slides.pdf
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A Practical Guide to HTML5 A Practical Guide to HTML5 Presentation Transcript

    • WE’RE SPENDING AN HOUR ON EXISTENTIALISM. HOPE YOU BROUGHT A SNACK.
    • MAT “WILTO” MARQUIStwitter.com/ wiltogithub.com/ wiltodribbble.com/ wiltomat@matmarquis.com
    • IF ANYONE MENTIONS THE MARQUEE TAG THEY WILL BE ASKED TO LEAVE.
    • • New semantically-rich markup
    • • New semantically-rich markup• Changes to the markup you know and love
    • • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features
    • • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser
    • • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser• CSS3
    • • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser• CSS3
    • “ HTML5 DOES NOT INCLUDE JAVASCRIPT APIS, CSS3, “AMPERSANDS, OR CAT PICTURES!
    • SHOULDN’T YOU BE MAKING WEBSITES RIGHT NOW?
    • REMEMBER “CAPTAIN PLANET?” LIKE THAT, BUT WITHOUT THE MULLET.
    • EVERYTHING MAKES SENSE NOW.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The header element represents a group of introductory or navigational aids.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The nav element represents a section of a page that links to other pagesor to parts within the page: a section with navigation links.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The article element represents a self-contained document, page,application, or widget which is fit for syndication.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The section element represents a thematic grouping of content.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The aside element represents content that is related to the surroundingdocument/article, but could be considered separate from that content.
    • SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The footer element typically contains information about its section,such as authors, links to related documents, copyright information, etc.
    • DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
    • DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
    • <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
    • <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
    • <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
    • <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
    • DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • Lorem Ipsum Dolor • Chapter One • In The Beginning • Meanwhile, Back at the Ranch • untitled aside • Chapter Two • untitled aside • untitled footer
    • DOCUMENT OUTLINE •untitled document • untitled header • untitled navHTML5 Outliner for Chrome • Lorem Ipsum DolorGenerates a navigable page outline with heading and sectioning elements. • Chapter One • In The Beginninghttp://wil.to/html5/2 Back at the Ranch • Meanwhile, • untitled aside • Chapter Two • untitled aside • untitled footer
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>• blink Is gone, and if I ever catch you using it again so help me, guys.
    • MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progressThe HTML5 Spec progress of a task within a known range. Represents the completion for Web Developers <progress max="100">80%</meter> complete.Formatted for readability and quick access to information.• time Represents dates and times in a machine-readable way.http://developers.whatwg.org/ 2010, 2:55am EDT</time>. On <time datetime="2010-05-24T02:55:30-04:00">May 24th• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>• blink Is gone, and if I ever catch you using it again so help me, guys.
    • YOU KNEW IT WOULD COME UP EVENTUALLY
    • HTML5 Support in IE 6/7/8Remy Sharp’s HTML5-enabling script for Internet Explorer.http://wil.to/html5/3 YOU KNEW IT WOULD COME UP EVENTUALLY
    • REPURPOSED ELEMENTS<dl>, <dt>, and <dd>An association list consisting of zero or more key-value groups.<dl> <dt>Full Name:</dt> <dd>John Smith</dd> <dt>Occupation:</dt> <dd>Doctor</dd></dt>
    • REPURPOSED ELEMENTS<b>Text stylistically offset from the surrounding text without extra importance.<b class="drop-cap">S</b>herlock Holmes, who was usually late…
    • REPURPOSED ELEMENTS<small>“Small print,” as in disclaimers, caveats, legal restrictions, or copyrights.<small>Copyright Mat “Wilto” Marquis, 2010</small>
    • REPURPOSED ELEMENTS<cite>Represents the title of a work (a book, song, film, etc.)—but not aperson’s name.<p>I don’t quite agree with the <cite>HTML5 spec</cite> here.</p>
    • REPURPOSED ELEMENTS<address>Contact information for the current article or document—not a postaladdress.<address>Posted by: <a href="http://twitter.com/wilto">Mat</a></address>
    • STOP ME IF YOU’VE HEARD OF THIS ONE
    • BORDER-RADIUS
    • BOX-SHADOW
    • NOT PARTICULARLY EXCITING
    • VENDOR PREFIXES
    • VENDOR PREFIXES• -webkit-
    • VENDOR PREFIXES• -webkit-• -moz-
    • VENDOR PREFIXES• -webkit-• -moz-• -o-
    • VENDOR PREFIXES• -webkit-• -moz-• -o-• -ms-
    • TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear;}a:hover { color: #bada55;}
    • TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; Transition Demo .2s linear; -o-transition: color transition: color .2s linear;}a:hover { http://wil.to/html5/transitions color: #bada55;}
    • GRADIENTSbackground: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
    • GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
    • GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% CSS3 Gradient Generator );background: -webkit-gradient( A tool to generate the appropriate vendor-prefixed gradient syntax. linear, left top, http://wil.to/html5/6 left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
    • GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% CSS3 Gradient Demo );background: -webkit-gradient( linear, left top, http://wil.to/html5/gradients/ left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
    • FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), url(aller_bd-webfont.svg#AllerBold) format(svg);}
    • FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), Font Squirrel url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), A repository of free and @font-face licensed fonts, as well as a tool url(aller_bd-webfont.svg#AllerBold) format(svg); to generate the appropriate @font-face syntax.}http://www.fontsquirrel.com/
    • FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), @font-face demo url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), url(aller_bd-webfont.svg#AllerBold) format(svg);}http://wil.to/html5/font-face
    • GO-GO-GADGET: AWESOME.
    • GEOLOCATIONfunction geo( position ) { alert( Latitude: + position.coords.latitude ); alert( Longitude: + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );
    • GEOLOCATIONfunction geo( position ) { alert( Latitude: + position.coords.latitude ); alert( Longitude: + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );Geolocation DemoWaiting There Forever: My Bus Tracking App.http://wtfmbta.com/
    • DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( Rotation: + rotation + Scale: + scale );}window.addEventListener(deviceorientation, orientation );
    • DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( Rotation: + rotation + Scale: + scale );Device Orientation Demo}window.addEventListener(deviceorientation, orientation );http://wil.to/html5/device-orientation
    • HAVE YOU GUYS EVER BEEN “OFFLINE?” IT’S SCARY.
    • LOCAL STORAGElocalStorage.setItem(variableName, true)alert( localStorage.getItem(variableName) );// It’s that easy.
    • LOCAL STORAGElocalStorage.setItem(variableName, true)alert( localStorage.getItem(variableName) );// It’s that easy.Local Storage DemoA to-do list app using the localStorage API.http://wil.to/html5/transitions
    • ModernizrA library of tests to check for CSS3 and HTML5 API support on the client side.http://www.modernizr.com/
    • Cross Browser PolyfillsBringing HTML5 APIs to browsers that dont natively support them.http://wil.to/html5/4
    • YOU MAY NOW ADD “HTML5 GURU” TO YOUR RESUME.
    • RESOURCESwil.to/html5http://developers.whatwg.orgpester me on the internet (@wilto)