SlideShare a Scribd company logo
1 of 56
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 BUILDER 2.0                                                                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 BUILDER 2.0                                                                            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 BUILDER 2.0                                                                                             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™
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
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
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
“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>


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 BUILDER 2.0                                          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 BUILDER 2.0                                                                     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 BUILDER 2.0                                                                                   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 BUILDER 2.0                                                                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;
      }




WEB BUILDER 2.0                        36
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 BUILDER 2.0                                                                    36
be your own
vendor




              Photo credit: Rigmarole
WEB STANDARDS: FUELING INNOVATION




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




WEB BUILDER 2.0                     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 BUILDER 2.0                                                                     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 BUILDER 2.0                                                                      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 BUILDER 2.0                                                               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 BUILDER 2.0                                                                     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 BUILDER 2.0                                                                     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 BUILDER 2.0                                                                     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 BUILDER 2.0                          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

Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020Tom Anthony
 
Facebook Black book 3 - make money online everyday
Facebook Black book 3 - make money online everydayFacebook Black book 3 - make money online everyday
Facebook Black book 3 - make money online everydayEdward806784
 
Emailing 2020: Remi Parmentier
Emailing 2020: Remi ParmentierEmailing 2020: Remi Parmentier
Emailing 2020: Remi ParmentierEmailing 2020
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scaleGiacomo Zecchini
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 

What's hot (7)

Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020
 
Facebook Black book 3 - make money online everyday
Facebook Black book 3 - make money online everydayFacebook Black book 3 - make money online everyday
Facebook Black book 3 - make money online everyday
 
Emailing 2020: Remi Parmentier
Emailing 2020: Remi ParmentierEmailing 2020: Remi Parmentier
Emailing 2020: Remi Parmentier
 
Swf search final
Swf search finalSwf search final
Swf search final
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 

Similar to Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]

Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Tools for Authors 18.01.11
Tools for Authors 18.01.11Tools for Authors 18.01.11
Tools for Authors 18.01.11Martin Fenner
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's dayAnkur Mishra
 
IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003Wes Yanaga
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?정현 황
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Lachlan Hardy
 
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.0Estelle Weyl
 
Worry Free Web Development
Worry Free Web DevelopmentWorry Free Web Development
Worry Free Web DevelopmentAra Pehlivanian
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Hamlet Batista
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 

Similar to Web Standards: Fueling Innovation [Web Builder 2.0 - 2008] (20)

Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
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
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003
 
Html5
Html5Html5
Html5
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
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
 
Worry Free Web Development
Worry Free Web DevelopmentWorry Free Web Development
Worry Free Web Development
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Html5
Html5Html5
Html5
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Html5
Html5Html5
Html5
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Code camp orlando
Code camp   orlandoCode camp   orlando
Code camp orlando
 
Html5
Html5Html5
Html5
 

More from Aaron Gustafson

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]Aaron Gustafson
 
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]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
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]Aaron Gustafson
 
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?Aaron Gustafson
 
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]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
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 EveryoneAaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]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

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
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
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
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
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
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
 
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
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
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
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
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
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
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
 
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)
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
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
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 

Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]

  • 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 BUILDER 2.0 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 BUILDER 2.0 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 BUILDER 2.0 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™
  • 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
  • 24. “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
  • 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 BUILDER 2.0 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 BUILDER 2.0 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 BUILDER 2.0 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 BUILDER 2.0 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; } WEB BUILDER 2.0 36
  • 38. 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 BUILDER 2.0 36
  • 39. be your own vendor Photo credit: Rigmarole
  • 40. WEB STANDARDS: FUELING INNOVATION Presentation where it belongs div#focal img { -easy-frame: polaroid; } WEB BUILDER 2.0 38
  • 41. putting it together Photo credit: kayepants
  • 42. Progressive Enhancement sweet & simple
  • 44. 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 BUILDER 2.0 42
  • 45. 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 BUILDER 2.0 43
  • 46. 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 BUILDER 2.0 44
  • 47. JavaScript: good at looking for things to do Photo credit: Messiah Divine
  • 48. Classification for better form controls Faster Slower Medium Faster
  • 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> accessibleUISlider: http://tinyurl.com/4kstyj WEB BUILDER 2.0 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(); accessibleUISlider: http://tinyurl.com/4kstyj WEB BUILDER 2.0 47
  • 51. 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 BUILDER 2.0 47
  • 52. Don’t be afraid to get creative
  • 53. 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 BUILDER 2.0 49
  • 54. “Innovation is the ability to see change as an opportunity - not a threat. - Anonymous Photo credit: Erica_Marshall
  • 56. 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