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™
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>


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

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]

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
 

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

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

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
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
 

Recently uploaded (20)

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
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
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 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
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
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
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 

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™
  • 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.
  • 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