SlideShare una empresa de Scribd logo
1 de 67
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Html ppt
Html pptHtml ppt
Html ppt
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Basic html
Basic htmlBasic html
Basic html
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html
HtmlHtml
Html
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Css position
Css positionCss position
Css position
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Bootstrap
BootstrapBootstrap
Bootstrap
 

Destacado

Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User ExperienceBuiltByHQ
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPressJohn 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 PairingGuy 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 Oiljameswillweb
 
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
 
Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them clickSusan Weinschenk
 
Double Integral Powerpoint
Double Integral PowerpointDouble Integral Powerpoint
Double Integral Powerpointoaishnosaj
 
C++ Function
C++ FunctionC++ Function
C++ FunctionHajar
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to UsabilityErlend Debast
 

Destacado (12)

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...
 
Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them click
 
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 a Up to Speed on HTML 5 and CSS 3

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/Css3Ho 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
 
Practice mashups. Mlearning 2009
Practice mashups.  Mlearning 2009Practice mashups.  Mlearning 2009
Practice mashups. Mlearning 2009Jean-Marie Gilliot
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentationvs4vijay
 
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
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson presoChris Mills
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlowBrad 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 LaforgeGuillaume Laforge
 
Yahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksYahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksSubramanyan Murali
 
buildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxbuildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxNKannanCSE
 
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 - DevFest09mihaiionescu
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
Building XML Based Applications
Building XML Based ApplicationsBuilding XML Based Applications
Building XML Based ApplicationsPrabu U
 

Similar a 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
 

Más de M. Jackson Wilkinson

Más de 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
 

Último

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 

Último (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 

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