SlideShare a Scribd company logo
1 of 55
Download to read offline
Web Standards:
Fueling Innovation
      Aaron Gustafson
“I cannot help fearing
 that men may reach a
 point where they
 look on every new
 theory as a danger,
 every innovation as a
 toilsome trouble,
 every social advance
 as a rst step toward
 revolution, and that
 they may absolutely
 refuse to move at all.
          - Alexis de Tocqueville

                         Photo credit: Lachlan Hardy
HTML = Foundation
“Art is good when it springs from necessity.
           This kind of origin is the guarantee of its
           value; there is no other.
                                               - Angela Carter




Photo credit: Doblonaut
WEB STANDARDS: FUELING INNOVATION




Progress
                                                                      elements
                                                                      attributes



100


75


50


25


0

       HTML 1               HTML 2   HTML 3   HTML 3.2    HTML 4     HTML 5
                                                         HTML 4.01
                                                          XHTML 1




WEB DESIGN WORLD                                                               10
WEB STANDARDS: FUELING INNOVATION




Progress?
                                                                              elements
                                                                              attributes



100




                                                                                  HTML 5
                   HTML 3




75
                                       HTML 4




                                                             XHTML 1
                                                HTML 4.01
50
                            HTML 3.2
         HTML 2
HTML 1




25


0

                  1995                                      2000       2005    Future




WEB DESIGN WORLD                                                                           12
WEB STANDARDS: FUELING INNOVATION




Progress?
100


75


50


25


0


-25


-50

                      1995                                        2000         2005           Future
    HTML 1

             HTML 2


                         HTML 3




                                             HTML 4




                                                                     XHTML 1




                                                                                                   HTML 5
                                  HTML 3.2




                                                      HTML 4.01




                                                                                      Today
WEB DESIGN WORLD                                                                                            13
What’s wrong with this picture?




                             Photo credit: Matt Carman
“The arrogance of success is to think
 that what you did yesterday will be
 su cient for tomorrow.
                             - William Pollard




                                          Photo credit: wvs
Innovation is within reach




Photo credit: Sa!anna
components


Photo credit: jasonvance
“The trick.... is to make sure that each
                 limited mechanical part of the Web, each
                 application, is within itself composed of
                 simple parts that will never get too
                 powerful.
                                                - Tim Berners-Lee
Photo credit: tricky™
XFN:




       <a href=quot;http://easy-designs.netquot;
        rel=quot;friend met co-worker
        colleague co-resident
        spouse muse
        sweetheartquot;>Kelly McCarthy</a>




                                           Photo credit: Kelly McCarthy
XFN:




       <a href=quot;http://easy-designs.netquot;
        rel=quot;mequot;>Aaron</a>




                                           Photo credit: Kelly McCarthy
XFN:




       <a href=quot;http://duoh.comquot;
        rel=quot;friend met
        colleaguequot;>Veerle Pieters</a>




                                        Photo credit: Kelly McCarthy
XFN:




       <a href=quot;http://duoh.comquot;
        rel=quot;friend met
        colleaguequot;>Geert Leyseele</a>




                                        Photo credit: Kelly McCarthy
rel-tag:




<a href=quot;http://en.wikipedia.org/wiki/Rudbeckia_hirtaquot;
 rel=quot;tagquot;>Black-eyed Susan</a>




                                                Photo credit: {Psychic Noise}
rel-license:
<a href=quot;http://creativecommons.org/licenses/by-sa/
 2.0/deed.enquot; rel=quot;licensequot;>Creative Commons
 Attribution-Share Alike 2.0</a>
                                                 Photo credit: Pear Biter
classi cation


Photo credit: jasonvance
Scaleability
As time goes by, people's expectations change, and
more will be demanded of HTML. One manifestation of
this is the pressure to add yet more tags. HTML 3.0
introduces a means for subclassing elements in an
open-ended way.
                             ...
This ability to make fresh distinctions can be exploited
to impart distinct rendering styles or to support richer
search mechanisms, without further complicating the
HTML document format itself.
                                              - HTML 3.0 Draft
CLASS
This a space separated list of SGML NAME tokens and is
used to subclass tag names.
                             ...
The CLASS attribute is most commonly used to attach a
di erent style to some element, but it is recommended
that where practical class names should be picked on
the basis of the element's semantics, as this will permit
other uses, such as restricting search through
documents by matching on element class names.
                                               - HTML 3.0 Draft
“Microformats are carefully designed
 (X)HTML class names that extend the
 semantics of (X)HTML and enable
 authors to publish higher semantic
  delity content such as people, events,
 reviews, etc.
                                  - Tantek Çelik
HTML 3:
<person>Joe Blow</person>




                            Photo credit: assbach
HTML 3:
<person>Joe Blow</person>


microformats:
<div class=quot;vcardquot;>
  <span class=quot;fnquot;>
    Joe Blow
  </span>
</div>




                            Photo credit: assbach
HTML 3:
<person>Joe Blow</person>


microformats:
<div class=quot;vcardquot;>
<span class=quot;fnquot;>
 Joe Blow</span>
<a class=quot;org urlquot;
 href=quot;http://web.comquot;>
 Company</a>
<div class=quot;telquot;>
  <span class=quot;typequot;>
   Work</span>
   +1-650-289-4040
</div>
</div>



                            Photo credit: assbach
HTML 3:
<fig src=quot;photo.jpgquot;>
<caption><em>Figure 1:</em>
 The “Faces of the Fallen”
 exhibit at Arlington
 National Cemetary
 </caption>
<credit>Aaron Gustafson
 </credit>                                               Photo by Aaron Gustafson

                              Figure 1: The “Faces of the Fallen” exhibit
</fig>                        at Arlington National Cemetery
microformats:
<div class=quot;figurequot;>
<img src=quot;fa.jpgquot; alt=quot;quot; />
<p class=quot;credit vcardquot;>
 <abbr class=quot;typequot;
 title=quot;Photographquot;>Photo
 </abbr> by <cite
 class=quot;fnquot;>Aaron Gustafson
 </cite></p>                                               Photo by Aaron Gustafson

                                Figure 1: The “Faces of the Fallen” exhibit
<p class=quot;captionquot;><em          at Arlington National Cemetery
 class=quot;legendquot;>Figure 1</em>
 The <span class=quot;subjectquot;>
 “Faces of the Fallen”
 exhibit</span> at Arlington
 National Cemetery.</p>
</div>
HTML 5:
<figure>
<img src=quot;fa.jpgquot; alt=quot;quot; />
<legend>Figure 1</legend>
<p>Photo by <cite>Aaron
 Gustafson</cite></p>
<p>The “Faces of the Fallen”
 exhibit at Arlington
 National Cemetery.</p>                                   Photo by Aaron Gustafson

                               Figure 1: The “Faces of the Fallen” exhibit
</figure>                      at Arlington National Cemetery
extensibility


                Photo credit: Guillermo
Why the need for XHTML?
Document developers and user agent designers are
constantly discovering new ways to express their ideas
through new markup.
                           ...
The XHTML family is designed to accommodate these
extensions through XHTML modules
                           ...
These modules will permit the combination of existing
and new feature sets when developing content and
when designing new user agents.
                                   - XHTML 1.0 Recommendation
WEB STANDARDS: FUELING INNOVATION




Customize an existing DTD
      <!ELEMENT input EMPTY>     <!-- form control -->
      <!ATTLIST input
        %attrs;
        %focus;
        type        %InputType;    quot;textquot;
        name        CDATA          #REQUIRED
        value       CDATA          #IMPLIED
        checked     (checked)      #IMPLIED
        disabled    (disabled)     #IMPLIED
        readonly    (readonly)     #IMPLIED
        required    (required)     #IMPLIED
        size        CDATA          #IMPLIED
        maxlength   %Number;       #IMPLIED
        src         %URI;          #IMPLIED
        alt         CDATA          #IMPLIED
        usemap      %URI;          #IMPLIED
        onselect    %Script;       #IMPLIED
        onchange    %Script;       #IMPLIED
        accept      %ContentTypes; #IMPLIED
        >



WEB DESIGN WORLD                                         31
WEB STANDARDS: FUELING INNOVATION




Complex custom attributes
      <!ENTITY % VSchema
        quot;(email | phone | address | postcode |
            name | title |
            alpha | numeric | alphanumeric |
            date | range)quot;
          >
      <!--
        Implementation of ValidateFor
        To be used on text inputs, range takes the type of schema (VScema, above)
        validation should be performed against:
        validatefor=quot;namequot;
      -->
      <!ELEMENT input EMPTY>       <!-- form control -->
      <!ATTLIST input
        ...
        usemap        %URI;          #IMPLIED
        validatefor %VSchema;        #IMPLIED
        onselect      %Script;       #IMPLIED
        onchange      %Script;       #IMPLIED
        accept        %ContentTypes; #IMPLIED
        >


WEB DESIGN WORLD                                                                    32
WEB STANDARDS: FUELING INNOVATION




Or get Modular
      <!ATTLIST %input.qname;
        %FormValidation.pfx;limit                           CDATA                 #IMPLIED
        %FormValidation.pfx;range                           CDATA                 #IMPLIED
        %FormValidation.pfx;required                        (required)            #IMPLIED
        %FormValidation.pfx;match                           IDREF                 #IMPLIED
        %FormValidation.pfx;maxlength                       %Number;              #IMPLIED
        %FormValidation.pfx;validatefor                     %VSchema;             #IMPLIED
      >




                                    Tutorial on XHTML Modularization: http://tinyurl.com/52g2xc

WEB DESIGN WORLD                                                                                  33
WEB STANDARDS: FUELING INNOVATION




Put your creation to work
      <form action=quot;/path/to/actionquot; method=quot;postquot;>
        <ol>
          <li>
             <label for=quot;emailquot;>Your Email</label>
             <input type=quot;textquot; id=quot;emailquot; name=quot;emailquot; required=quot;requiredquot;
                    maxlength=quot;255quot; validatefor=quot;emailquot; />
          </li>
          <li>
             <label for=quot;pw1quot;>Password</label>
             <input type=quot;passwordquot; id=quot;pw1quot; name=quot;pw1quot; required=quot;requiredquot;
                    maxlength=quot;20quot; validatefor=quot;alphanumericquot; match=quot;pw2quot; />
          </li>
          <li>
             <label for=quot;pw2quot;>Confirm Password</label>
             <input type=quot;passwordquot; id=quot;pw2quot; name=quot;pw2quot; required=quot;requiredquot;
                    maxlength=quot;20quot; validatefor=quot;alphanumericquot; match=quot;pw1quot; />
          </li>
          <li><button type=quot;submitquot;>Register</button></li>
        </ol>
      </form>



WEB DESIGN WORLD                                                               34
4.1.2.1 Vendor-speci c extensions
In CSS, identi ers may begin with '-' (dash) or
'_' (underscore). Keywords and property names
beginning with -' or '_' are reserved for vendor-speci c
extensions.
                                          - CSS 2.1 Speci cation
WEB STANDARDS: FUELING INNOVATION




Currently used by browsers
      div {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background: #444;
        border: 3px solid #222;
        color: #fff;
        opacity: .9;
        padding: 6px;
      }




                             Lorem ipsum dolor sit amet, consectetuer adipiscing
                             elit, sed diam nonummy nibh euismod tincidunt ut
                             laoreet dolore magna aliquam erat volutpat. Ut wisi
                             enim ad minim veniam, quis nostrud exerci tation
                             ullamcorper suscipit lobortis nisl ut aliquip ex ea
                             commodo consequat. Duis autem vel eum iriure
                             dolor in hendrerit in vulputate.




WEB DESIGN WORLD                                                                   36
be your own
vendor




              Photo credit: Rigmarole
WEB STANDARDS: FUELING INNOVATION




Presentation where it belongs
      div#focal img {
        -easy-frame: polaroid;
      }




WEB DESIGN WORLD                    38
putting it together


                      Photo credit: kayepants
Progressive Enhancement




    sweet & simple
Classification for
interface control
WEB STANDARDS: FUELING INNOVATION




Crufty
      <h1>Pumpkin Pie</h1>

      <div class=quot;containerquot;>
        <div class=quot;sectionquot;>
          <h2>Overview</h2>
          <img src=quot;pie.jpgquot; alt=quot;quot;>
          <p>Whether you're hosting a festive party or a casual get-together with
          friends, our Pumpkin Pie will make entertaining easy!</p>
          ...
        </div>
        ...
        <ul class=quot;tabsquot;>
          <li><a href=quot;#quot;>Overview</a></li>
          <li><a href=quot;#quot;>Ingredients</a></li>
          <li><a href=quot;#quot;>Directions</a></li>
          <li><a href=quot;#quot;>Nutrition</a></li>
        </ul>
      </div>




WEB DESIGN WORLD                                                                    42
WEB STANDARDS: FUELING INNOVATION




Classy
      <h1>Pumpkin Pie</h1>

      <div class=quot;tabbedquot;>
        <h2>Overview</h2>
        <img src=quot;pie.jpgquot; alt=quot;quot; />
        <p>Whether you're hosting a festive party or a casual get-together with
        friends, our Pumpkin Pie will make entertaining easy!</p>
        ...

         <h2>Ingredients</h2>
         <ul>
           <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
           <li>! cup white sugar</li>
           <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
           ...
         </ul>

        <h2>Directions</h2>
        ...
      </div>



WEB DESIGN WORLD                                                                    43
WEB STANDARDS: FUELING INNOVATION




Classy
      Using Prototype:
      document.observe(quot;dom:loadedquot;, function(){
        var cabinet = [];
        $$('.tabbed').each( function( item, i ){
          cabinet.push( new TabInterface( item, i ) );
        });
      });




                                    TabInterface: http://tinyurl.com/3paywu

WEB DESIGN WORLD                                                              44
JavaScript:
        good at
        looking for
        things to do




Photo credit: Messiah Divine
Classification for
better form controls
                      Faster

    Slower   Medium    Faster
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for=quot;speedquot;>Select a Speed:</label>
      <select name=quot;speedquot; class=quot;sliderquot;>
        <option value=quot;Slowerquot;>Slower</option>
        <option value=quot;Slowquot;>Slow</option>
        <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option>
        <option value=quot;Fastquot;>Fast</option>
        <option value=quot;Fasterquot;>Faster</option>
      </select>




                                    accessibleUISlider: http://tinyurl.com/4kstyj

WEB DESIGN WORLD                                                                    47
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for=quot;speedquot;>Select a Speed:</label>
      <select name=quot;speedquot; class=quot;sliderquot;>
        <option value=quot;Slowerquot;>Slower</option>
        <option value=quot;Slowquot;>Slow</option>
        <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option>
        <option value=quot;Fastquot;>Fast</option>
        <option value=quot;Fasterquot;>Faster</option>
      </select>



      Using jQuery:
      $('select.slider').accessibleUISlider();




                                    accessibleUISlider: http://tinyurl.com/4kstyj

WEB DESIGN WORLD                                                                    47
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for=quot;speedquot;>Select a Speed:</label>
      <select name=quot;speedquot; class=quot;sliderquot;>
        <option value=quot;Slowerquot;>Slower</option>
        <option value=quot;Slowquot;>Slow</option>
        <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option>
        <option value=quot;Fastquot;>Fast</option>
        <option value=quot;Fasterquot;>Faster</option>
      </select>



      Using jQuery:
      $('select.slider').accessibleUISlider();



      A step farther?
      select {
        -jQueryUI-control: slider;
      }


                                    accessibleUISlider: http://tinyurl.com/4kstyj

WEB DESIGN WORLD                                                                    47
Don’t be afraid
to get creative
WEB STANDARDS: FUELING INNOVATION




Presentational Flash
      #sidebar:after {
        -gfss-source: url(spiral.swf);
        -gfss-background-color: #000;
        -gfss-flash-version: 6;
        -gfss-quality: high;
        -gfss-width: 50;
        -gfss-height: 50;
        position: absolute;
        top: 0;
        left: 0;
      }




WEB DESIGN WORLD                         49
“Innovation is the ability to see change
 as an opportunity - not a threat.
                                - Anonymous
                                     Photo credit: Erica_Marshall
Web Standards:
Fueling Innovation
      Aaron Gustafson
Slides available at
                http://slideshare.net/AaronGustafson

                This presentation is licensed under
                        Creative Commons
           Attribution-Noncommercial-Share Alike 3.0

                               flickr Photo Credits
                               “One Step at a Time” by Lachlan Hardy
                                    “solid foundation” by nuanc
                            “Rocas del fuego y del agua” by Doblonaut
                                    “Pinkstone” by Matt Carman
                          “reflecting_building_633_dark-sky_01” by wvs
                    “I love my toolbox 15 July Scavenger Hunt” by Sa!anna
                        “Look like dead, but they're alive!” by iosonofabio
                                         “Simple” by tricky™
                         “Kelly, Aaron, Geert & Veerle” by Kelly McCarthy
“3/365 ~ Just because you are lost, doesn't mean that people can't find you...” by {Psychic Noise}
                       “The Sun Sets on Château de Chillon” by Pear Biter
                         “112 Classification of Knowledge” by jasonvance
                     “#256 Exchanging change with exchange” by assbach
                                    “Legospective” by Guillermquot;
                             “crawfordmarketcarrotman” by Rigmarole
                           “70:365 Happyface vs. Sadface” by kayepants
                               “Monkey Grooming” by Messiah Divine
                              “Wanna go for a ride?” by Erica_Marshall

More Related Content

What's hot

What's hot (20)

What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
HTML5
HTML5HTML5
HTML5
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 

Viewers also liked

Historia de la literatura infantil y juvenil
Historia de la literatura infantil y juvenilHistoria de la literatura infantil y juvenil
Historia de la literatura infantil y juvenil
UTPL UTPL
 
Democracy & Stress Management Dr Shriniwas Kashalikar
Democracy & Stress Management Dr Shriniwas KashalikarDemocracy & Stress Management Dr Shriniwas Kashalikar
Democracy & Stress Management Dr Shriniwas Kashalikar
amvgene
 
Crecer con salud tema 3
Crecer con salud tema 3Crecer con salud tema 3
Crecer con salud tema 3
mariocano2002
 
Guia proyectos docentes
Guia proyectos docentesGuia proyectos docentes
Guia proyectos docentes
JennyFlores26
 

Viewers also liked (20)

Raport de activitate 2014
Raport de activitate 2014Raport de activitate 2014
Raport de activitate 2014
 
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
 
Eres contribuyente , asesórate en Gestioniserveis
Eres contribuyente , asesórate en GestioniserveisEres contribuyente , asesórate en Gestioniserveis
Eres contribuyente , asesórate en Gestioniserveis
 
Historia de la literatura infantil y juvenil
Historia de la literatura infantil y juvenilHistoria de la literatura infantil y juvenil
Historia de la literatura infantil y juvenil
 
Brujas
BrujasBrujas
Brujas
 
Andraž Zorko: Kdo se boji Larryja Pagea?
Andraž Zorko: Kdo se boji Larryja Pagea?Andraž Zorko: Kdo se boji Larryja Pagea?
Andraž Zorko: Kdo se boji Larryja Pagea?
 
Ana benitez powerpoint
Ana benitez powerpointAna benitez powerpoint
Ana benitez powerpoint
 
Democracy & Stress Management Dr Shriniwas Kashalikar
Democracy & Stress Management Dr Shriniwas KashalikarDemocracy & Stress Management Dr Shriniwas Kashalikar
Democracy & Stress Management Dr Shriniwas Kashalikar
 
Crecer con salud tema 3
Crecer con salud tema 3Crecer con salud tema 3
Crecer con salud tema 3
 
Resumenes libros
Resumenes librosResumenes libros
Resumenes libros
 
Reporter 177
Reporter 177Reporter 177
Reporter 177
 
Guia proyectos docentes
Guia proyectos docentesGuia proyectos docentes
Guia proyectos docentes
 
Kumpulan maskot SMA N 2 Tebo
Kumpulan maskot SMA N 2 TeboKumpulan maskot SMA N 2 Tebo
Kumpulan maskot SMA N 2 Tebo
 
Presentación taller
Presentación tallerPresentación taller
Presentación taller
 
Service Manual Acer Aspire-4720-4720 g-4720z-4320
Service Manual Acer Aspire-4720-4720 g-4720z-4320Service Manual Acer Aspire-4720-4720 g-4720z-4320
Service Manual Acer Aspire-4720-4720 g-4720z-4320
 
Eventos sostenibles
Eventos sosteniblesEventos sostenibles
Eventos sostenibles
 
Arquitectura de Von Neumann
Arquitectura de Von NeumannArquitectura de Von Neumann
Arquitectura de Von Neumann
 
Tabla de materiales final
Tabla de materiales finalTabla de materiales final
Tabla de materiales final
 
sistema cardiovascular
sistema cardiovascular sistema cardiovascular
sistema cardiovascular
 
Concepto de texto-profesores palmira
Concepto de texto-profesores palmiraConcepto de texto-profesores palmira
Concepto de texto-profesores palmira
 

Similar to Web Standards: Fueling Innovation [Web Design World Boston '08]

Tools for Authors 18.01.11
Tools for Authors 18.01.11Tools for Authors 18.01.11
Tools for Authors 18.01.11
Martin Fenner
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
Carlos Ramon
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 

Similar to Web Standards: Fueling Innovation [Web Design World Boston '08] (20)

Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
 
Web Standards: Fueling Innovation [Web Design World - Seattle 2009]
Web Standards: Fueling Innovation [Web Design World - Seattle 2009]Web Standards: Fueling Innovation [Web Design World - Seattle 2009]
Web Standards: Fueling Innovation [Web Design World - Seattle 2009]
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
 
Worry Free Web Development
Worry Free Web DevelopmentWorry Free Web Development
Worry Free Web Development
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Tools for Authors 18.01.11
Tools for Authors 18.01.11Tools for Authors 18.01.11
Tools for Authors 18.01.11
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Pubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingPubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML coding
 
Html5
Html5Html5
Html5
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Html5
Html5Html5
Html5
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
HTML5
HTML5HTML5
HTML5
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 

Web Standards: Fueling Innovation [Web Design World Boston '08]

  • 2. “I cannot help fearing that men may reach a point where they look on every new theory as a danger, every innovation as a toilsome trouble, every social advance as a rst step toward revolution, and that they may absolutely refuse to move at all. - Alexis de Tocqueville Photo credit: Lachlan Hardy
  • 4. “Art is good when it springs from necessity. This kind of origin is the guarantee of its value; there is no other. - Angela Carter Photo credit: Doblonaut
  • 5. WEB STANDARDS: FUELING INNOVATION Progress elements attributes 100 75 50 25 0 HTML 1 HTML 2 HTML 3 HTML 3.2 HTML 4 HTML 5 HTML 4.01 XHTML 1 WEB DESIGN WORLD 10
  • 6. WEB STANDARDS: FUELING INNOVATION Progress? elements attributes 100 HTML 5 HTML 3 75 HTML 4 XHTML 1 HTML 4.01 50 HTML 3.2 HTML 2 HTML 1 25 0 1995 2000 2005 Future WEB DESIGN WORLD 12
  • 7. WEB STANDARDS: FUELING INNOVATION Progress? 100 75 50 25 0 -25 -50 1995 2000 2005 Future HTML 1 HTML 2 HTML 3 HTML 4 XHTML 1 HTML 5 HTML 3.2 HTML 4.01 Today WEB DESIGN WORLD 13
  • 8. What’s wrong with this picture? Photo credit: Matt Carman
  • 9. “The arrogance of success is to think that what you did yesterday will be su cient for tomorrow. - William Pollard Photo credit: wvs
  • 10. Innovation is within reach Photo credit: Sa!anna
  • 12. “The trick.... is to make sure that each limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful. - Tim Berners-Lee Photo credit: tricky™
  • 13.
  • 14. XFN: <a href=quot;http://easy-designs.netquot; rel=quot;friend met co-worker colleague co-resident spouse muse sweetheartquot;>Kelly McCarthy</a> Photo credit: Kelly McCarthy
  • 15. XFN: <a href=quot;http://easy-designs.netquot; rel=quot;mequot;>Aaron</a> Photo credit: Kelly McCarthy
  • 16. XFN: <a href=quot;http://duoh.comquot; rel=quot;friend met colleaguequot;>Veerle Pieters</a> Photo credit: Kelly McCarthy
  • 17. XFN: <a href=quot;http://duoh.comquot; rel=quot;friend met colleaguequot;>Geert Leyseele</a> Photo credit: Kelly McCarthy
  • 19. rel-license: <a href=quot;http://creativecommons.org/licenses/by-sa/ 2.0/deed.enquot; rel=quot;licensequot;>Creative Commons Attribution-Share Alike 2.0</a> Photo credit: Pear Biter
  • 21. Scaleability As time goes by, people's expectations change, and more will be demanded of HTML. One manifestation of this is the pressure to add yet more tags. HTML 3.0 introduces a means for subclassing elements in an open-ended way. ... This ability to make fresh distinctions can be exploited to impart distinct rendering styles or to support richer search mechanisms, without further complicating the HTML document format itself. - HTML 3.0 Draft
  • 22. CLASS This a space separated list of SGML NAME tokens and is used to subclass tag names. ... The CLASS attribute is most commonly used to attach a di erent style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. - HTML 3.0 Draft
  • 23. “Microformats are carefully designed (X)HTML class names that extend the semantics of (X)HTML and enable authors to publish higher semantic delity content such as people, events, reviews, etc. - Tantek Çelik
  • 24. HTML 3: <person>Joe Blow</person> Photo credit: assbach
  • 25. HTML 3: <person>Joe Blow</person> microformats: <div class=quot;vcardquot;> <span class=quot;fnquot;> Joe Blow </span> </div> Photo credit: assbach
  • 26. HTML 3: <person>Joe Blow</person> microformats: <div class=quot;vcardquot;> <span class=quot;fnquot;> Joe Blow</span> <a class=quot;org urlquot; href=quot;http://web.comquot;> Company</a> <div class=quot;telquot;> <span class=quot;typequot;> Work</span> +1-650-289-4040 </div> </div> Photo credit: assbach
  • 27. HTML 3: <fig src=quot;photo.jpgquot;> <caption><em>Figure 1:</em> The “Faces of the Fallen” exhibit at Arlington National Cemetary </caption> <credit>Aaron Gustafson </credit> Photo by Aaron Gustafson Figure 1: The “Faces of the Fallen” exhibit </fig> at Arlington National Cemetery
  • 28. microformats: <div class=quot;figurequot;> <img src=quot;fa.jpgquot; alt=quot;quot; /> <p class=quot;credit vcardquot;> <abbr class=quot;typequot; title=quot;Photographquot;>Photo </abbr> by <cite class=quot;fnquot;>Aaron Gustafson </cite></p> Photo by Aaron Gustafson Figure 1: The “Faces of the Fallen” exhibit <p class=quot;captionquot;><em at Arlington National Cemetery class=quot;legendquot;>Figure 1</em> The <span class=quot;subjectquot;> “Faces of the Fallen” exhibit</span> at Arlington National Cemetery.</p> </div>
  • 29. HTML 5: <figure> <img src=quot;fa.jpgquot; alt=quot;quot; /> <legend>Figure 1</legend> <p>Photo by <cite>Aaron Gustafson</cite></p> <p>The “Faces of the Fallen” exhibit at Arlington National Cemetery.</p> Photo by Aaron Gustafson Figure 1: The “Faces of the Fallen” exhibit </figure> at Arlington National Cemetery
  • 30. extensibility Photo credit: Guillermo
  • 31. Why the need for XHTML? Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. ... The XHTML family is designed to accommodate these extensions through XHTML modules ... These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents. - XHTML 1.0 Recommendation
  • 32. WEB STANDARDS: FUELING INNOVATION Customize an existing DTD <!ELEMENT input EMPTY> <!-- form control --> <!ATTLIST input %attrs; %focus; type %InputType; quot;textquot; name CDATA #REQUIRED value CDATA #IMPLIED checked (checked) #IMPLIED disabled (disabled) #IMPLIED readonly (readonly) #IMPLIED required (required) #IMPLIED size CDATA #IMPLIED maxlength %Number; #IMPLIED src %URI; #IMPLIED alt CDATA #IMPLIED usemap %URI; #IMPLIED onselect %Script; #IMPLIED onchange %Script; #IMPLIED accept %ContentTypes; #IMPLIED > WEB DESIGN WORLD 31
  • 33. WEB STANDARDS: FUELING INNOVATION Complex custom attributes <!ENTITY % VSchema quot;(email | phone | address | postcode | name | title | alpha | numeric | alphanumeric | date | range)quot; > <!-- Implementation of ValidateFor To be used on text inputs, range takes the type of schema (VScema, above) validation should be performed against: validatefor=quot;namequot; --> <!ELEMENT input EMPTY> <!-- form control --> <!ATTLIST input ... usemap %URI; #IMPLIED validatefor %VSchema; #IMPLIED onselect %Script; #IMPLIED onchange %Script; #IMPLIED accept %ContentTypes; #IMPLIED > WEB DESIGN WORLD 32
  • 34. WEB STANDARDS: FUELING INNOVATION Or get Modular <!ATTLIST %input.qname; %FormValidation.pfx;limit CDATA #IMPLIED %FormValidation.pfx;range CDATA #IMPLIED %FormValidation.pfx;required (required) #IMPLIED %FormValidation.pfx;match IDREF #IMPLIED %FormValidation.pfx;maxlength %Number; #IMPLIED %FormValidation.pfx;validatefor %VSchema; #IMPLIED > Tutorial on XHTML Modularization: http://tinyurl.com/52g2xc WEB DESIGN WORLD 33
  • 35. WEB STANDARDS: FUELING INNOVATION Put your creation to work <form action=quot;/path/to/actionquot; method=quot;postquot;> <ol> <li> <label for=quot;emailquot;>Your Email</label> <input type=quot;textquot; id=quot;emailquot; name=quot;emailquot; required=quot;requiredquot; maxlength=quot;255quot; validatefor=quot;emailquot; /> </li> <li> <label for=quot;pw1quot;>Password</label> <input type=quot;passwordquot; id=quot;pw1quot; name=quot;pw1quot; required=quot;requiredquot; maxlength=quot;20quot; validatefor=quot;alphanumericquot; match=quot;pw2quot; /> </li> <li> <label for=quot;pw2quot;>Confirm Password</label> <input type=quot;passwordquot; id=quot;pw2quot; name=quot;pw2quot; required=quot;requiredquot; maxlength=quot;20quot; validatefor=quot;alphanumericquot; match=quot;pw1quot; /> </li> <li><button type=quot;submitquot;>Register</button></li> </ol> </form> WEB DESIGN WORLD 34
  • 36. 4.1.2.1 Vendor-speci c extensions In CSS, identi ers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with -' or '_' are reserved for vendor-speci c extensions. - CSS 2.1 Speci cation
  • 37. WEB STANDARDS: FUELING INNOVATION Currently used by browsers div { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #444; border: 3px solid #222; color: #fff; opacity: .9; padding: 6px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate. WEB DESIGN WORLD 36
  • 38. be your own vendor Photo credit: Rigmarole
  • 39. WEB STANDARDS: FUELING INNOVATION Presentation where it belongs div#focal img { -easy-frame: polaroid; } WEB DESIGN WORLD 38
  • 40. putting it together Photo credit: kayepants
  • 41. Progressive Enhancement sweet & simple
  • 43. WEB STANDARDS: FUELING INNOVATION Crufty <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB DESIGN WORLD 42
  • 44. WEB STANDARDS: FUELING INNOVATION Classy <h1>Pumpkin Pie</h1> <div class=quot;tabbedquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot; /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li> <li>! cup white sugar</li> <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li> ... </ul> <h2>Directions</h2> ... </div> WEB DESIGN WORLD 43
  • 45. WEB STANDARDS: FUELING INNOVATION Classy Using Prototype: document.observe(quot;dom:loadedquot;, function(){ var cabinet = []; $$('.tabbed').each( function( item, i ){ cabinet.push( new TabInterface( item, i ) ); }); }); TabInterface: http://tinyurl.com/3paywu WEB DESIGN WORLD 44
  • 46. JavaScript: good at looking for things to do Photo credit: Messiah Divine
  • 47. Classification for better form controls Faster Slower Medium Faster
  • 48. WEB STANDARDS: FUELING INNOVATION Classy <label for=quot;speedquot;>Select a Speed:</label> <select name=quot;speedquot; class=quot;sliderquot;> <option value=quot;Slowerquot;>Slower</option> <option value=quot;Slowquot;>Slow</option> <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option> <option value=quot;Fastquot;>Fast</option> <option value=quot;Fasterquot;>Faster</option> </select> accessibleUISlider: http://tinyurl.com/4kstyj WEB DESIGN WORLD 47
  • 49. WEB STANDARDS: FUELING INNOVATION Classy <label for=quot;speedquot;>Select a Speed:</label> <select name=quot;speedquot; class=quot;sliderquot;> <option value=quot;Slowerquot;>Slower</option> <option value=quot;Slowquot;>Slow</option> <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option> <option value=quot;Fastquot;>Fast</option> <option value=quot;Fasterquot;>Faster</option> </select> Using jQuery: $('select.slider').accessibleUISlider(); accessibleUISlider: http://tinyurl.com/4kstyj WEB DESIGN WORLD 47
  • 50. WEB STANDARDS: FUELING INNOVATION Classy <label for=quot;speedquot;>Select a Speed:</label> <select name=quot;speedquot; class=quot;sliderquot;> <option value=quot;Slowerquot;>Slower</option> <option value=quot;Slowquot;>Slow</option> <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option> <option value=quot;Fastquot;>Fast</option> <option value=quot;Fasterquot;>Faster</option> </select> Using jQuery: $('select.slider').accessibleUISlider(); A step farther? select { -jQueryUI-control: slider; } accessibleUISlider: http://tinyurl.com/4kstyj WEB DESIGN WORLD 47
  • 51. Don’t be afraid to get creative
  • 52. WEB STANDARDS: FUELING INNOVATION Presentational Flash #sidebar:after { -gfss-source: url(spiral.swf); -gfss-background-color: #000; -gfss-flash-version: 6; -gfss-quality: high; -gfss-width: 50; -gfss-height: 50; position: absolute; top: 0; left: 0; } WEB DESIGN WORLD 49
  • 53. “Innovation is the ability to see change as an opportunity - not a threat. - Anonymous Photo credit: Erica_Marshall
  • 55. Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “One Step at a Time” by Lachlan Hardy “solid foundation” by nuanc “Rocas del fuego y del agua” by Doblonaut “Pinkstone” by Matt Carman “reflecting_building_633_dark-sky_01” by wvs “I love my toolbox 15 July Scavenger Hunt” by Sa!anna “Look like dead, but they're alive!” by iosonofabio “Simple” by tricky™ “Kelly, Aaron, Geert & Veerle” by Kelly McCarthy “3/365 ~ Just because you are lost, doesn't mean that people can't find you...” by {Psychic Noise} “The Sun Sets on Château de Chillon” by Pear Biter “112 Classification of Knowledge” by jasonvance “#256 Exchanging change with exchange” by assbach “Legospective” by Guillermquot; “crawfordmarketcarrotman” by Rigmarole “70:365 Happyface vs. Sadface” by kayepants “Monkey Grooming” by Messiah Divine “Wanna go for a ride?” by Erica_Marshall