SlideShare a Scribd company logo
UP TO SPEED ON
                        HTML 5 & CSS 3                               </TITLE>




  REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009
Sunday, July 19, 2009
THE INTRO

Sunday, July 19, 2009
That’s
                “Michael”



                        M. JACKSON WILKINSON
                                  Your Humble Refresh DC Organizer




Sunday, July 19, 2009
Sunday, July 19, 2009
Sunday, July 19, 2009
JASON GARBER
                           Refresh DC Organizer Emeritus




Sunday, July 19, 2009
Sunday, July 19, 2009
A Very Brief History of

             WEB STANDARDS

Sunday, July 19, 2009
XHTML 1            CSS 2.1
                         Content               Presentation




                                   2001-2006
Sunday, July 19, 2009
WHAT WG
                        Web Hypertext Application
                        Technology Working Group




                             2004-2007
Sunday, July 19, 2009
W3C
                          World Wide Web
                           Consortium




                        2007 - PRESENT
Sunday, July 19, 2009
HTML 5                 CSS 3
                         Content              Presentation




                                   2007 - PRESENT
Sunday, July 19, 2009
The Content Layer:


                        HTML 5

Sunday, July 19, 2009
NEW ELEMENTS


Sunday, July 19, 2009
structural elements
        Provides new semantic vocabulary                 HEADER
        for parts of a page previously
                                                              NAV
        served by DIVs with ID and Class
        attributes.
                                                   ARTICLE
        IE requires some workarounds                                ASIDE
        using JavaScript to make these
        elements work.                             SECTION

                                                         FOOTER



     structural elements                   Browser Support:
Sunday, July 19, 2009
figure
        Allows for associating captions                    FIGURE
        with embedded content, including
        videos, audio, pullquotes, or
        images.
                                                CONTENT (IMG, Q, VIDEO, ETC.)




                                                          LEGEND




     figure                                Browser Support:
Sunday, July 19, 2009
audio & video
        Allows for associating captions     <video src="test.ogg" autoplay="autoplay"
                                            controls="controls">
        with embedded content, including        Your browser does not support the video
        videos, audio, or images.               element. This could also include object and
                                                embed codes for legacy browsers.
                                            </video>
        Opera, Chrome, and Firefox all
        support the Ogg Theora video
        format natively, while Safari and
        Chrome support H.264.




     audio & video                           Browser Support:
Sunday, July 19, 2009
OTHER ELEMENTS
         METER          Contained content is a measurement, like length.

        PROGRESS        Contains current process toward a goal, like a percentage.

        TIME            Time

        COMMAND         Represents something a command a user may execute.

        DATAGRID        Represents data. Non-tabular or otherwise.

        OUTPUT          Displays the output of a program or process.

        RUBY            Allows input of rubi/ruby annotations for Asian languages.

Sunday, July 19, 2009
NEW FORM
                        CONTROLS


Sunday, July 19, 2009
FORM CONTROLS
         DATETIME        Allows input of a date and a time.

        DATETIME-LOCAL   Allows input of a date and a time, in local time.

        NUMBER           Allows input of a number.

        RANGE            Input is verified to be within a range.

        EMAIL            Confirms the input to be a valid email.

        URL              Ensures input is a valid URL.

        COLOR            Provides a mechanism for the user to input an RGB color.

Sunday, July 19, 2009
DOC STRUCTURE


Sunday, July 19, 2009
HTML 5 doctype
                                            <!DOCTYPE html>
        The HTML 5 doctype is way
        easier than any other doctype.
        Evar.

        Just type the parts you remember,
        and you’ll probably be right.




     HTML 5 doctype                         Browser Support:
Sunday, July 19, 2009
HTML5 & XHTML5
                                                            <html>
        HTML 5 supports the standard
        HTML syntax (formerly SGML),
        but also allows for an XML-based
        variant XHTML5.

        Since it’s XML, XHTML should
                                                                  vs.
        be served as application/xml or
        application/xhtml+xml. Warning:          <html xmlns="http://
        this means browsers freak if there’s   www.w3.org/1999/xhtml">
        an error.



     HTML 5 doctype                            Browser Support:
Sunday, July 19, 2009
Block-Level Links
        You can now wrap links around          <li>
        block-level elements, rather than
        having to create links around            <a href="page.html">
        every element inside the block              <img src="pic.jpg">
        element.                                    <h3>Title</h3>
                                                    <p>Text</p>
        This is useful for lists of articles
        that include multiple elements,          </a>
        callouts with a single action, etc.    </li>



     Block-level Links                         Browser Support:
Sunday, July 19, 2009
NEW APIs


Sunday, July 19, 2009
Drag & Drop API
        Allows objects (images and links,
        by default) to be dragged and then
        dropped onto a target.

        The target is enabled by canceling
        the ‘dragover’ (for sane browsers)
        or ‘dragenter’ (for IE) events for                      +
        the drop target. Then listen for a
        ‘drop’ event which contains a
        ‘dataTransfer’ object with info.



     Drag and Drop API                       Browser Support:
Sunday, July 19, 2009
getElementsByClassName
        Works just like getElementsById,
        but selects an array of all elements
        based on a shared class name.

        No more varied custom functions
        to make this happen, and
        performance is significantly better.




     getElementsByClassName                    Browser Support:
Sunday, July 19, 2009
Cross-Document Messaging
        This allows non-hostile documents
        on different domains to simply                      MAIN DOCUMENT
        communicate with each other.

        The sending document can call
                                                                            FOREIGN
        postMessage() on the window
                                                                            IFRAME
        object of the receiving document,
        while the receiving document listens
        for a ‘message’ event.




     Cross-Doc Messaging                       Browser Support:
Sunday, July 19, 2009
Simple Client Storage
        The sessionStorage DOM attribute      <input
        stores session data for a single         type="checkbox"
        window, like cookies on crack.           onchange="
                                                   localStorage.insurance=checked
                                                 "
        The localStorage DOM attribute        />
        allows each site to store megabytes
        of data across sessions to improve
        performance.

        Both methods store only strings.



     Simple Client Storage                     Browser Support:
Sunday, July 19, 2009
Structured Client Storage
        HTML 5’s Web Storage module               tx.executeSql(
        provides an SQL server within the           ‘SELECT * FROM Notes’,
        client, accessible using Javascript. It     [],
                                                    function(tx, rs) {
        uses fairly standard SQL queries                for(var i = 0;
        for both reading and writing.                      i < rs.rows.length; i++) {
                                                           renderNote(rs.rows[i]);
        There’s a lot to be explained about             }
        the built-in SQL server, so go
        check out the docs for more
        information.



     Structured Client Storage                    Browser Support:
Sunday, July 19, 2009
Offline Application Caching
        Allow the client to refer directly to   <html manifest=”/cache.manifest”>
        its cache, authoritatively, for
        certain resources, even if the
                                                CACHE MANIFEST
        browser is offline.                     index.html
                                                help.html
        Resources listed in the “network”       style/default.css
        section are never cached.               images/logo.png
                                                images/backgound.png

                                                NETWORK:
                                                server.cgi




     Offline Application Caching                Browser Support:
Sunday, July 19, 2009
Canvas
        Provides an API for drawing           <canvas id="canvas" width="150" height="150">
                                                 fallback content
        directly in the browser window,       </canvas>
        using instructions that define
                                              function draw() {
        vector-based shapes and lines.          var canvas = document.getElementById("canvas");
                                                if (canvas.getContext) {
                                                  var ctx = canvas.getContext("2d");
        This allows SVG-like graphics to be
        created on the fly in the browser,            ctx.fillStyle = "rgb(200,0,0)";
                                                      ctx.fillRect (10, 10, 55, 50);
        with fallback content (like Flash?)
                                                      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        provided to legacy browsers.
                                                      ctx.fillRect (30, 30, 55, 50);
                                                  }
                                              }




     canvas                                       Browser Support:
Sunday, July 19, 2009
The Presentation Layer:


                          CSS 3

Sunday, July 19, 2009
COLOR


Sunday, July 19, 2009
opacity
        Adjusts the opacity of the selected   div { color: #f00; opacity: 1.0; }

        element’s presentation on screen.

        Takes values between 0.0 (fully
                                              div { color: #f00; opacity: 0.5; }
        transparent) and 1.0 (fully
        opaque)




     opacity                                  Browser Support:
Sunday, July 19, 2009
RGBA Color
        Like RGB color definitions, but       div { color: rgb(0,255,0); }

        allows a fourth field, defining the
        alpha value of the color being
        applied.
                                              div { color: rgba(0,255,0,0.5); }

        Like opacity, the alpha value is
        between 0.0 (fully transparent)
        and 1.0 (fully opaque).




     RGBA color                               Browser Support:
Sunday, July 19, 2009
HSL/A Color
        HSL color definitions accept three    div { color: hsl(240,50%,50%); }

        arguments: hue is a degree on a
        color wheel (0-360), saturation
        is a percentage, and lightness is a
                                              div { color: hsla(240,50%,50%,0.5); }
        percentage.

        HSLA is like HSL color, but
        allows a fourth field, defining the
        alpha value of the color being
        applied. See RGBA.



     HSL/A color                              Browser Support:
Sunday, July 19, 2009
BACKGROUNDS


Sunday, July 19, 2009
background-size
        Defines the size at which the          div { background-size: 100px 65px; }

        browser should display the specified
        background image. Accepts all
        normal size definitions as width
                                               div { background-size: 400px 65px; }
        followed by height.

        In shorthand, this appears after
        background-position values.




     background-size                           Browser Support:
Sunday, July 19, 2009
background-image
        Allows for multiple images to be       background: url(body-top.png) top left no-repeat,
                                               url(body-bottom.png) bottom left no-repeat,
        specified. The first image specified   url(body-middle.png) left repeat-y;
        is layered closest to the top of the
        screen, and subsequent images are
        layered beneath.




     background-image                           Browser Support:
Sunday, July 19, 2009
BORDERS


Sunday, July 19, 2009
border-color
        Allows for multiple border colors       border: 5px solid #000;
                                                border-color: #000 transparent transparent #000;
        to be specified, one pixel at a time.
        The last specified color is repeated
        if necessary.

        This cannot be used in the border
        shorthand syntax.




     border-color                                Browser Support:
Sunday, July 19, 2009
border-image
        Allows the border to be represented   border-image: url(button.png) 0 12 0 12 stretch
                                                  stretch;
        by an image, by defining which
        parts of the image should be used
        for the edges, and which should be
        repeated in the main part of the
                                              border-image: url(border.png) 27 27 27 27 round
        element.                                  round;


        This is difficult to represent
        completely, so go look it up.




     border-image                              Browser Support:
Sunday, July 19, 2009
border-radius
        Curves the corners of the border        border-radius: 10px;

        using the radius given, often in
        pixels. This can be given to all
        corners, or only to individual
        corners as specified.
                                                border-top-right-radius: 10px;


        Firefox refers to individual corners
        like “border-radius-topright”
        while Safari (correctly) refers to it
        as “border-top-right-radius”.



     border-radius                               Browser Support:
Sunday, July 19, 2009
box-shadow
        Creates a drop shadow beneath the       box-shadow: 10px 10px 10px #333;

        selected element.

        The first argument is the horizontal
        offset, the second is the vertical
        offset, the third is the blur radius,
        and the final argument is the color
        to be used as the shadow.




     box-shadow                                  Browser Support:
Sunday, July 19, 2009
TEXT


Sunday, July 19, 2009
text-overflow
        If text overflows the available      text-overflow: ellipsis;

        space, the text-overflow property
                                             Lorem ipsum dolor sit amet, consectetur adipiscing
        defines what happens.                elit. Nam purus nunc, auctor et accumsan ut, aliquam
                                             vel leo. Quisque dignissim tincidunt rhoncus. Duis
                                             sed velit rutrum lorem rutrum faucibus. Nam tincidunt
                                             eros at arcu vestibulum egestas. Donec fringilla,
        The value “ellipsis” appends an      turpis in auctor luctus, orci orci vestibulum lacus,
                                             a tristique felis erat non diam. Morbi dolor massa,
        ellipsis character at the overflow   elementum ac iaculis quis, iaculis sed neque. Aliquam
                                             erat volutpat. Aliquam porttitor auctor massa sit
        point.                               amet ultrices. Maecenas quis nunc nibh, sit amet
                                             hendrerit leo. Donec a massa eget velit consectetur
                                             fermentum aliquet et eros. Vestibulum volutpat, est
                                             vitae dapibus congue, nibh augue vehicula lacutus es…




     text-overflow                            Browser Support:
Sunday, July 19, 2009
text-shadow
        Creates a drop shadow beneath the       text-shadow: 10px 10px 10px #333;

        selected text.
                                                    This is sample text.
        The first argument is the horizontal
        offset, the second is the vertical
        offset, the third is the blur radius,
        and the final argument is the color
        to be used as the shadow. Multiple
        shadow definitions may be
        separated using commas.



     text-shadow                                 Browser Support:
Sunday, July 19, 2009
column-width & column-gap
        Breaks flowing text into multiple    column-width: 200px;
                                             column-gap: 20px;
        columns, based on the width of the
                                             Lorem ipsum dolor sit amet, consectetur         quisque dignissim tincidunt rhoncus. Duis sed
        container. Column width defines      adipiscing elit. Nam purus nunc, auctor et
                                             accumsan ut, aliquam vel leo. Quisque
                                                                                             velit rutrum lorem rutrum faucibus. Nam
                                                                                             tincidunt eros at arcu vestibulum egestas.

        the width of each column, and        dignissim tincidunt rhoncus. Duis sed velit
                                             rutrum lorem rutrum faucibus. Nam tincidunt
                                             eros at arcu vestibulum egestas. Donec
                                                                                             Donec fringilla, turpis in auctor luctus, orci
                                                                                             orci vestibulum lacus, a tristique felis erat non
                                                                                             diam. Morbi dolor massa, elementum ac
        column-gap defines the gap           fringilla, turpis in auctor luctus, orci orci
                                             vestibulum lacus, a tristique felis erat non
                                                                                             iaculis quis, iaculis sed neque. Aliquam erat
                                                                                             volutpat. Aliquam porttitor auctor massa sit
                                             diam. Morbi dolor massa, elementum ac           amet ultrices. Maecenas quis nunc nibh, sit
        between columns.                     iaculis quis, iaculis sed neque. Aliquam erat
                                             volutpat. Aliquam porttitor auctor massa sit
                                                                                             amet hendrerit leo. Donec a massa eget velit
                                                                                             consectetur fermentum aliquet et eros.
                                             amet ultrices. Maecenas quis nunc nibh, sit     Vestibulum volutpat, est vitae dapibus
                                             amet hendrerit leo. Donec a massa eget velit    congue, nibh augue vehicula lacus, vel
                                             consectetur fermentum aliquet et eros.          semper dolor odio in libero. Curabitur vitae

        Column-count can be specified in     Vestibulum volutpat, est vitae dapibus
                                             congue, nibh augue vehicula lacus, vel
                                                                                             sem consequat purus fermentum tincidunt.
                                                                                             Donec vestibulum felis ut metus ultrices a
                                             semper dolor odio in libero. Curabitur vitae    vulputate felis rhoncus eum ivolonortis
        lieu of column-width.                sem consequat purus fermentum tincidunt.
                                             Donec vestibulum felis ut metus ultrices a
                                             vulputate felis rhoncus eum ivolonortis




     column-width/column-gap                  Browser Support:
Sunday, July 19, 2009
@font-face
        Allows a font file to be associated   @font-face {
                                                font-family: Helvy;
        with a font name for later use in       src: local("Helvetica Neue Bold"),
        font-family declarations.                    local("HelveticaNeue-Bold"),
                                                     url(MgOpenModernaBold.ttf);
                                                font-weight: bold;
        IE supports only .eot Embedded        }

        OpenType files, while the other       p.specialFont { font-family: Helvy, sans-serif; }
        browsers support any TTF and
        OTF font files.




     column-width/column-gap                   Browser Support:
Sunday, July 19, 2009
TRANSFORMATION


Sunday, July 19, 2009
rotate
        Rotates the selected element at the
        defined angle, defined in degrees.

        The rotation doesn’t affect layout,   transform: rotate(30deg);

        and elements that are transformed
        are treated similarly to
        position:relative.




     rotate                                    Browser Support:
Sunday, July 19, 2009
scale
        Scales the element in question
        based on the specified unit-less
        numbers given for the X and Y
        axes. If only one number is given, it   transform: scale(0.5,2.0);

        is applied to both axes.




     scale                                       Browser Support:
Sunday, July 19, 2009
skew
        Skews the element around the X
        and Y axes by the specified angles,
        in degrees. If it’s only one number,
        the Y axis is assumed to be zero.      transform: skew(-30deg);




     scale                                      Browser Support:
Sunday, July 19, 2009
translate
        Moves the object along each axis by
        the length specified. The unit can
        be anything accepted as a length in
        CSS, such as px, em, percentages,     transform: translate(30px, 0);

        etc.




     translate                                 Browser Support:
Sunday, July 19, 2009
3D TRANSFORMATIONS
        PERSPECTIVE     The distance, in pixels, of the z=0 plane from the viewer.

       MATRIX3D         Allows creation of a 3d transformation matrix.

       ROTATE3D         Rotate the matched element in three dimensions.

       SCALE3D          Performs a three-dimensional scale operation.

       TRANSLATE3D      Allows the matched element to be moved along three axes.




Sunday, July 19, 2009
BROWSER PREFIXES


Sunday, July 19, 2009
FIREFOX:       -moz-box-shadow:

                  SAFARI:     -webkit-box-shadow:

                   OPERA:       -o-box-shadow:

                        IE:    -ms-box-shadow:

Sunday, July 19, 2009
READY YET?
                         When is it Time to Use These?




Sunday, July 19, 2009
THE FUTURE


Sunday, July 19, 2009
IMPLEMENTATION
                             trumps
                          SPECIFICATION

Sunday, July 19, 2009
PROGRESSFUL
                        DEGRAHANCEMENT ™




Sunday, July 19, 2009
In the end, be mindful of

                        BUSINESS AND
                         USER GOALS


Sunday, July 19, 2009
A Healthy Dose of

                        CRITICISM


Sunday, July 19, 2009
MORE RESOURCES
        HTML 5 Doctor    http://html5doctor.com/

       HTML 5 Spec       http://dev.w3.org/html5/spec/Overview.html

       ALA Article       http://www.alistapart.com/articles/previewofhtml5

       Bruce Lawson      http://www.brucelawson.co.uk/category/
                             accessibility-web-standards/html5/

       Your Presenters   Feel free to follow up with Jackson & Jason



Sunday, July 19, 2009
FIN

Sunday, July 19, 2009
Get in Touch!

                    SpeakerRate: spkr8.com/t/1250
                        Twitter: @whafro & @jgarber


Sunday, July 19, 2009

More Related Content

What's hot

React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
ReactJS
ReactJSReactJS
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
Emanuele DelBono
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
Sehwan Noh
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 
React state
React  stateReact  state
React state
Ducat
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Js ppt
Js pptJs ppt
Js ppt
Rakhi Thota
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
Sayan De
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
 
1. HTML
1. HTML1. HTML
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
 
Learn react-js
Learn react-jsLearn react-js
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
Ali Sa'o
 
React js
React jsReact js
React js
Rajesh Kolla
 
Html ppt
Html pptHtml ppt
Html ppt
Ruchi Kumari
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
Yuriy Bezgachnyuk
 

What's hot (20)

React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
ReactJS
ReactJSReactJS
ReactJS
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Reactjs
Reactjs Reactjs
Reactjs
 
React state
React  stateReact  state
React state
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Js ppt
Js pptJs ppt
Js ppt
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 
1. HTML
1. HTML1. HTML
1. HTML
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
React js
React jsReact js
React js
 
Html ppt
Html pptHtml ppt
Html ppt
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 

Viewers also liked

Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
BuiltByHQ
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
John Housholder
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
Jasmine Vesque
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
Guy Kawasaki
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
 
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Holger Bartel
 
Double Integral Powerpoint
Double Integral PowerpointDouble Integral Powerpoint
Double Integral Powerpoint
oaishnosaj
 
C++ Function
C++ FunctionC++ Function
C++ Function
Hajar
 
Double Integrals
Double IntegralsDouble Integrals
Double Integrals
kishor pokar
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
Erlend Debast
 
Html Ppt
Html PptHtml Ppt
Html Ppt
vijayanit
 

Viewers also liked (11)

Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
 
Double Integral Powerpoint
Double Integral PowerpointDouble Integral Powerpoint
Double Integral Powerpoint
 
C++ Function
C++ FunctionC++ Function
C++ Function
 
Double Integrals
Double IntegralsDouble Integrals
Double Integrals
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 

Similar to Up to Speed on HTML 5 and CSS 3

Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
Melissa kadi
 
Giáo trình học Html5/Css3
Giáo trình học Html5/Css3Giáo trình học Html5/Css3
Giáo trình học Html5/Css3
Ho Ngoc Tan
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Skills Matter
 
Ie9 overview
Ie9 overviewIe9 overview
Ie9 overview
裕波 周
 
Practice mashups. Mlearning 2009
Practice mashups.  Mlearning 2009Practice mashups.  Mlearning 2009
Practice mashups. Mlearning 2009
Jean-Marie Gilliot
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
vs4vijay
 
Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)
Cyril Hanquez
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
tutorialsruby
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
tutorialsruby
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlow
Brad Vernon
 
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume LaforgeGaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Guillaume Laforge
 
Yahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksYahoo! Frontend Building Blocks
Yahoo! Frontend Building Blocks
Subramanyan Murali
 
buildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxbuildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptx
NKannanCSE
 
Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)
Justin Miller
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
mihaiionescu
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
Artur Cistov
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
Michael Chaize
 
Building XML Based Applications
Building XML Based ApplicationsBuilding XML Based Applications
Building XML Based Applications
Prabu U
 

Similar to Up to Speed on HTML 5 and CSS 3 (20)

Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
Giáo trình học Html5/Css3
Giáo trình học Html5/Css3Giáo trình học Html5/Css3
Giáo trình học Html5/Css3
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
 
Ie9 overview
Ie9 overviewIe9 overview
Ie9 overview
 
Practice mashups. Mlearning 2009
Practice mashups.  Mlearning 2009Practice mashups.  Mlearning 2009
Practice mashups. Mlearning 2009
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlow
 
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume LaforgeGaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
 
Yahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksYahoo! Frontend Building Blocks
Yahoo! Frontend Building Blocks
 
buildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxbuildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptx
 
Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Building XML Based Applications
Building XML Based ApplicationsBuilding XML Based Applications
Building XML Based Applications
 

More from M. Jackson Wilkinson

Rebooting the Blue Button
Rebooting the Blue ButtonRebooting the Blue Button
Rebooting the Blue Button
M. Jackson Wilkinson
 
Designing for Silence
Designing for SilenceDesigning for Silence
Designing for Silence
M. Jackson Wilkinson
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
M. Jackson Wilkinson
 
Tips for Presenting
Tips for PresentingTips for Presenting
Tips for Presenting
M. Jackson Wilkinson
 
Asset Positioning for Performance
Asset Positioning for PerformanceAsset Positioning for Performance
Asset Positioning for Performance
M. Jackson Wilkinson
 
How MacGyver Would Do Design Research
How MacGyver Would Do Design ResearchHow MacGyver Would Do Design Research
How MacGyver Would Do Design Research
M. Jackson Wilkinson
 
UX Matters
UX MattersUX Matters
Keeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website PerformanceKeeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website Performance
M. Jackson Wilkinson
 
Design and UX in an Agile Process
Design and UX in an Agile ProcessDesign and UX in an Agile Process
Design and UX in an Agile Process
M. Jackson Wilkinson
 

More from M. Jackson Wilkinson (9)

Rebooting the Blue Button
Rebooting the Blue ButtonRebooting the Blue Button
Rebooting the Blue Button
 
Designing for Silence
Designing for SilenceDesigning for Silence
Designing for Silence
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
 
Tips for Presenting
Tips for PresentingTips for Presenting
Tips for Presenting
 
Asset Positioning for Performance
Asset Positioning for PerformanceAsset Positioning for Performance
Asset Positioning for Performance
 
How MacGyver Would Do Design Research
How MacGyver Would Do Design ResearchHow MacGyver Would Do Design Research
How MacGyver Would Do Design Research
 
UX Matters
UX MattersUX Matters
UX Matters
 
Keeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website PerformanceKeeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website Performance
 
Design and UX in an Agile Process
Design and UX in an Agile ProcessDesign and UX in an Agile Process
Design and UX in an Agile Process
 

Recently uploaded

Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
ssuserd4e0d2
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 

Recently uploaded (20)

Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 

Up to Speed on HTML 5 and CSS 3

  • 1. UP TO SPEED ON HTML 5 & CSS 3 </TITLE> REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009 Sunday, July 19, 2009
  • 3. That’s “Michael” M. JACKSON WILKINSON Your Humble Refresh DC Organizer Sunday, July 19, 2009
  • 6. JASON GARBER Refresh DC Organizer Emeritus Sunday, July 19, 2009
  • 8. A Very Brief History of WEB STANDARDS Sunday, July 19, 2009
  • 9. XHTML 1 CSS 2.1 Content Presentation 2001-2006 Sunday, July 19, 2009
  • 10. WHAT WG Web Hypertext Application Technology Working Group 2004-2007 Sunday, July 19, 2009
  • 11. W3C World Wide Web Consortium 2007 - PRESENT Sunday, July 19, 2009
  • 12. HTML 5 CSS 3 Content Presentation 2007 - PRESENT Sunday, July 19, 2009
  • 13. The Content Layer: HTML 5 Sunday, July 19, 2009
  • 15. structural elements Provides new semantic vocabulary HEADER for parts of a page previously NAV served by DIVs with ID and Class attributes. ARTICLE IE requires some workarounds ASIDE using JavaScript to make these elements work. SECTION FOOTER structural elements Browser Support: Sunday, July 19, 2009
  • 16. figure Allows for associating captions FIGURE with embedded content, including videos, audio, pullquotes, or images. CONTENT (IMG, Q, VIDEO, ETC.) LEGEND figure Browser Support: Sunday, July 19, 2009
  • 17. audio & video Allows for associating captions <video src="test.ogg" autoplay="autoplay" controls="controls"> with embedded content, including Your browser does not support the video videos, audio, or images. element. This could also include object and embed codes for legacy browsers. </video> Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264. audio & video Browser Support: Sunday, July 19, 2009
  • 18. OTHER ELEMENTS METER Contained content is a measurement, like length. PROGRESS Contains current process toward a goal, like a percentage. TIME Time COMMAND Represents something a command a user may execute. DATAGRID Represents data. Non-tabular or otherwise. OUTPUT Displays the output of a program or process. RUBY Allows input of rubi/ruby annotations for Asian languages. Sunday, July 19, 2009
  • 19. NEW FORM CONTROLS Sunday, July 19, 2009
  • 20. FORM CONTROLS DATETIME Allows input of a date and a time. DATETIME-LOCAL Allows input of a date and a time, in local time. NUMBER Allows input of a number. RANGE Input is verified to be within a range. EMAIL Confirms the input to be a valid email. URL Ensures input is a valid URL. COLOR Provides a mechanism for the user to input an RGB color. Sunday, July 19, 2009
  • 22. HTML 5 doctype <!DOCTYPE html> The HTML 5 doctype is way easier than any other doctype. Evar. Just type the parts you remember, and you’ll probably be right. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  • 23. HTML5 & XHTML5 <html> HTML 5 supports the standard HTML syntax (formerly SGML), but also allows for an XML-based variant XHTML5. Since it’s XML, XHTML should vs. be served as application/xml or application/xhtml+xml. Warning: <html xmlns="http:// this means browsers freak if there’s www.w3.org/1999/xhtml"> an error. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  • 24. Block-Level Links You can now wrap links around <li> block-level elements, rather than having to create links around <a href="page.html"> every element inside the block <img src="pic.jpg"> element. <h3>Title</h3> <p>Text</p> This is useful for lists of articles that include multiple elements, </a> callouts with a single action, etc. </li> Block-level Links Browser Support: Sunday, July 19, 2009
  • 26. Drag & Drop API Allows objects (images and links, by default) to be dragged and then dropped onto a target. The target is enabled by canceling the ‘dragover’ (for sane browsers) or ‘dragenter’ (for IE) events for + the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info. Drag and Drop API Browser Support: Sunday, July 19, 2009
  • 27. getElementsByClassName Works just like getElementsById, but selects an array of all elements based on a shared class name. No more varied custom functions to make this happen, and performance is significantly better. getElementsByClassName Browser Support: Sunday, July 19, 2009
  • 28. Cross-Document Messaging This allows non-hostile documents on different domains to simply MAIN DOCUMENT communicate with each other. The sending document can call FOREIGN postMessage() on the window IFRAME object of the receiving document, while the receiving document listens for a ‘message’ event. Cross-Doc Messaging Browser Support: Sunday, July 19, 2009
  • 29. Simple Client Storage The sessionStorage DOM attribute <input stores session data for a single type="checkbox" window, like cookies on crack. onchange=" localStorage.insurance=checked " The localStorage DOM attribute /> allows each site to store megabytes of data across sessions to improve performance. Both methods store only strings. Simple Client Storage Browser Support: Sunday, July 19, 2009
  • 30. Structured Client Storage HTML 5’s Web Storage module tx.executeSql( provides an SQL server within the ‘SELECT * FROM Notes’, client, accessible using Javascript. It [], function(tx, rs) { uses fairly standard SQL queries for(var i = 0; for both reading and writing. i < rs.rows.length; i++) { renderNote(rs.rows[i]); There’s a lot to be explained about } the built-in SQL server, so go check out the docs for more information. Structured Client Storage Browser Support: Sunday, July 19, 2009
  • 31. Offline Application Caching Allow the client to refer directly to <html manifest=”/cache.manifest”> its cache, authoritatively, for certain resources, even if the CACHE MANIFEST browser is offline. index.html help.html Resources listed in the “network” style/default.css section are never cached. images/logo.png images/backgound.png NETWORK: server.cgi Offline Application Caching Browser Support: Sunday, July 19, 2009
  • 32. Canvas Provides an API for drawing <canvas id="canvas" width="150" height="150"> fallback content directly in the browser window, </canvas> using instructions that define function draw() { vector-based shapes and lines. var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); This allows SVG-like graphics to be created on the fly in the browser, ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); with fallback content (like Flash?) ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; provided to legacy browsers. ctx.fillRect (30, 30, 55, 50); } } canvas Browser Support: Sunday, July 19, 2009
  • 33. The Presentation Layer: CSS 3 Sunday, July 19, 2009
  • 35. opacity Adjusts the opacity of the selected div { color: #f00; opacity: 1.0; } element’s presentation on screen. Takes values between 0.0 (fully div { color: #f00; opacity: 0.5; } transparent) and 1.0 (fully opaque) opacity Browser Support: Sunday, July 19, 2009
  • 36. RGBA Color Like RGB color definitions, but div { color: rgb(0,255,0); } allows a fourth field, defining the alpha value of the color being applied. div { color: rgba(0,255,0,0.5); } Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque). RGBA color Browser Support: Sunday, July 19, 2009
  • 37. HSL/A Color HSL color definitions accept three div { color: hsl(240,50%,50%); } arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a div { color: hsla(240,50%,50%,0.5); } percentage. HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA. HSL/A color Browser Support: Sunday, July 19, 2009
  • 39. background-size Defines the size at which the div { background-size: 100px 65px; } browser should display the specified background image. Accepts all normal size definitions as width div { background-size: 400px 65px; } followed by height. In shorthand, this appears after background-position values. background-size Browser Support: Sunday, July 19, 2009
  • 40. background-image Allows for multiple images to be background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left no-repeat, specified. The first image specified url(body-middle.png) left repeat-y; is layered closest to the top of the screen, and subsequent images are layered beneath. background-image Browser Support: Sunday, July 19, 2009
  • 42. border-color Allows for multiple border colors border: 5px solid #000; border-color: #000 transparent transparent #000; to be specified, one pixel at a time. The last specified color is repeated if necessary. This cannot be used in the border shorthand syntax. border-color Browser Support: Sunday, July 19, 2009
  • 43. border-image Allows the border to be represented border-image: url(button.png) 0 12 0 12 stretch stretch; by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the border-image: url(border.png) 27 27 27 27 round element. round; This is difficult to represent completely, so go look it up. border-image Browser Support: Sunday, July 19, 2009
  • 44. border-radius Curves the corners of the border border-radius: 10px; using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified. border-top-right-radius: 10px; Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”. border-radius Browser Support: Sunday, July 19, 2009
  • 45. box-shadow Creates a drop shadow beneath the box-shadow: 10px 10px 10px #333; selected element. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. box-shadow Browser Support: Sunday, July 19, 2009
  • 47. text-overflow If text overflows the available text-overflow: ellipsis; space, the text-overflow property Lorem ipsum dolor sit amet, consectetur adipiscing defines what happens. elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, The value “ellipsis” appends an turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, ellipsis character at the overflow elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit point. amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es… text-overflow Browser Support: Sunday, July 19, 2009
  • 48. text-shadow Creates a drop shadow beneath the text-shadow: 10px 10px 10px #333; selected text. This is sample text. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas. text-shadow Browser Support: Sunday, July 19, 2009
  • 49. column-width & column-gap Breaks flowing text into multiple column-width: 200px; column-gap: 20px; columns, based on the width of the Lorem ipsum dolor sit amet, consectetur quisque dignissim tincidunt rhoncus. Duis sed container. Column width defines adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. the width of each column, and dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac column-gap defines the gap fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit diam. Morbi dolor massa, elementum ac amet ultrices. Maecenas quis nunc nibh, sit between columns. iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. amet ultrices. Maecenas quis nunc nibh, sit Vestibulum volutpat, est vitae dapibus amet hendrerit leo. Donec a massa eget velit congue, nibh augue vehicula lacus, vel consectetur fermentum aliquet et eros. semper dolor odio in libero. Curabitur vitae Column-count can be specified in Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a semper dolor odio in libero. Curabitur vitae vulputate felis rhoncus eum ivolonortis lieu of column-width. sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis column-width/column-gap Browser Support: Sunday, July 19, 2009
  • 50. @font-face Allows a font file to be associated @font-face { font-family: Helvy; with a font name for later use in src: local("Helvetica Neue Bold"), font-family declarations. local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; IE supports only .eot Embedded } OpenType files, while the other p.specialFont { font-family: Helvy, sans-serif; } browsers support any TTF and OTF font files. column-width/column-gap Browser Support: Sunday, July 19, 2009
  • 52. rotate Rotates the selected element at the defined angle, defined in degrees. The rotation doesn’t affect layout, transform: rotate(30deg); and elements that are transformed are treated similarly to position:relative. rotate Browser Support: Sunday, July 19, 2009
  • 53. scale Scales the element in question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it transform: scale(0.5,2.0); is applied to both axes. scale Browser Support: Sunday, July 19, 2009
  • 54. skew Skews the element around the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg); scale Browser Support: Sunday, July 19, 2009
  • 55. translate Moves the object along each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, transform: translate(30px, 0); etc. translate Browser Support: Sunday, July 19, 2009
  • 56. 3D TRANSFORMATIONS PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer. MATRIX3D Allows creation of a 3d transformation matrix. ROTATE3D Rotate the matched element in three dimensions. SCALE3D Performs a three-dimensional scale operation. TRANSLATE3D Allows the matched element to be moved along three axes. Sunday, July 19, 2009
  • 58. FIREFOX: -moz-box-shadow: SAFARI: -webkit-box-shadow: OPERA: -o-box-shadow: IE: -ms-box-shadow: Sunday, July 19, 2009
  • 59. READY YET? When is it Time to Use These? Sunday, July 19, 2009
  • 61. IMPLEMENTATION trumps SPECIFICATION Sunday, July 19, 2009
  • 62. PROGRESSFUL DEGRAHANCEMENT ™ Sunday, July 19, 2009
  • 63. In the end, be mindful of BUSINESS AND USER GOALS Sunday, July 19, 2009
  • 64. A Healthy Dose of CRITICISM Sunday, July 19, 2009
  • 65. MORE RESOURCES HTML 5 Doctor http://html5doctor.com/ HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html ALA Article http://www.alistapart.com/articles/previewofhtml5 Bruce Lawson http://www.brucelawson.co.uk/category/ accessibility-web-standards/html5/ Your Presenters Feel free to follow up with Jackson & Jason Sunday, July 19, 2009
  • 67. Get in Touch! SpeakerRate: spkr8.com/t/1250 Twitter: @whafro & @jgarber Sunday, July 19, 2009