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

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




Photo credit: Doblonaut
WEB STANDARDS: FUELING INNOVATION




Progress
                                                                      elements
                                                                      attributes



100


75


50


25


0

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




WEB DESIGN WORLD                                                               10
WEB STANDARDS: FUELING INNOVATION




Progress?
                                                                              elements
                                                                              attributes



100




                                                                                  HTML 5
                   HTML 3




75
                                       HTML 4




                                                             XHTML 1
                                                HTML 4.01
50
                            HTML 3.2
         HTML 2
HTML 1




25


0

                  1995                                      2000       2005    Future




WEB DESIGN WORLD                                                                           12
WEB STANDARDS: FUELING INNOVATION




Progress?
100


75


50


25


0


-25


-50

                      1995                                        2000         2005           Future
    HTML 1

             HTML 2


                         HTML 3




                                             HTML 4




                                                                     XHTML 1




                                                                                                   HTML 5
                                  HTML 3.2




                                                      HTML 4.01




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




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




                                          Photo credit: wvs
Innovation is within reach




Photo credit: Sa!anna
components


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




       <a href="http://easy-designs.net"
        rel="friend met co-worker
        colleague co-resident
        spouse muse
        sweetheart">Kelly McCarthy</a>




                                           Photo credit: Kelly McCarthy
XFN:




       <a href="http://easy-designs.net"
        rel="me">Aaron</a>




                                           Photo credit: Kelly McCarthy
XFN:




       <a href="http://duoh.com"
        rel="friend met
        colleague">Veerle Pieters</a>




                                        Photo credit: Kelly McCarthy
XFN:




       <a href="http://duoh.com"
        rel="friend met
        colleague">Geert Leyseele</a>




                                        Photo credit: Kelly McCarthy
rel-tag:




<a href="http://en.wikipedia.org/wiki/Rudbeckia_hirta"
 rel="tag">Black-eyed Susan</a>




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


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




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


microformats:
<div class="vcard">
  <span class="fn">
    Joe Blow
  </span>
</div>




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


microformats:
<div class="vcard">
<span class="fn">
 Joe Blow</span>
<a class="org url"
 href="http://web.com">
 Company</a>
<div class="tel">
  <span class="type">
   Work</span>
   +1-650-289-4040
</div>
</div>



                            Photo credit: assbach
HTML 3:
<fig src="photo.jpg">
<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="figure">
<img src="fa.jpg" alt="" />
<p class="credit vcard">
 <abbr class="type"
 title="Photograph">Photo
 </abbr> by <cite
 class="fn">Aaron Gustafson
 </cite></p>                                               Photo by Aaron Gustafson

                                Figure 1: The “Faces of the Fallen” exhibit
<p class="caption"><em          at Arlington National Cemetery
 class="legend">Figure 1</em>
 The <span class="subject">
 “Faces of the Fallen”
 exhibit</span> at Arlington
 National Cemetery.</p>
</div>
HTML 5:
<figure>
<img src="fa.jpg" alt="" />
<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;    "text"
        name        CDATA          #REQUIRED
        value       CDATA          #IMPLIED
        checked     (checked)      #IMPLIED
        disabled    (disabled)     #IMPLIED
        readonly    (readonly)     #IMPLIED
        required    (required)     #IMPLIED
        size        CDATA          #IMPLIED
        maxlength   %Number;       #IMPLIED
        src         %URI;          #IMPLIED
        alt         CDATA          #IMPLIED
        usemap      %URI;          #IMPLIED
        onselect    %Script;       #IMPLIED
        onchange    %Script;       #IMPLIED
        accept      %ContentTypes; #IMPLIED
        >



WEB DESIGN WORLD                                         31
WEB STANDARDS: FUELING INNOVATION




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


WEB DESIGN WORLD                                                                    32
WEB STANDARDS: FUELING INNOVATION




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




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

WEB DESIGN WORLD                                                                                  33
WEB STANDARDS: FUELING INNOVATION




Put your creation to work
      <form action="/path/to/action" method="post">
        <ol>
          <li>
             <label for="email">Your Email</label>
             <input type="text" id="email" name="email" required="required"
                    maxlength="255" validatefor="email" />
          </li>
          <li>
             <label for="pw1">Password</label>
             <input type="password" id="pw1" name="pw1" required="required"
                    maxlength="20" validatefor="alphanumeric" match="pw2" />
          </li>
          <li>
             <label for="pw2">Confirm Password</label>
             <input type="password" id="pw2" name="pw2" required="required"
                    maxlength="20" validatefor="alphanumeric" match="pw1" />
          </li>
          <li><button type="submit">Register</button></li>
        </ol>
      </form>



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




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




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




WEB DESIGN WORLD                                                                   36
be your own
vendor




              Photo credit: Rigmarole
WEB STANDARDS: FUELING INNOVATION




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




WEB DESIGN WORLD                    38
putting it together


                      Photo credit: kayepants
Progressive Enhancement




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




Crufty
      <h1>Pumpkin Pie</h1>

      <div class="container">
        <div class="section">
          <h2>Overview</h2>
          <img src="pie.jpg" alt="">
          <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="tabs">
          <li><a href="#">Overview</a></li>
          <li><a href="#">Ingredients</a></li>
          <li><a href="#">Directions</a></li>
          <li><a href="#">Nutrition</a></li>
        </ul>
      </div>




WEB DESIGN WORLD                                                                    42
WEB STANDARDS: FUELING INNOVATION




Classy
      <h1>Pumpkin Pie</h1>

      <div class="tabbed">
        <h2>Overview</h2>
        <img src="pie.jpg" alt="" />
        <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="inch">in</abbr>) unbaked deep dish pie crust</li>
           <li>! cup white sugar</li>
           <li>1 <abbr title="teaspoon">tsp</abbr> ground cinnamon</li>
           ...
         </ul>

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



WEB DESIGN WORLD                                                                    43
WEB STANDARDS: FUELING INNOVATION




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




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

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




Photo credit: Messiah Divine
Classification for
better form controls
                      Faster

    Slower   Medium    Faster
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for="speed">Select a Speed:</label>
      <select name="speed" class="slider">
        <option value="Slower">Slower</option>
        <option value="Slow">Slow</option>
        <option value="Medium" selected="selected">Medium</option>
        <option value="Fast">Fast</option>
        <option value="Faster">Faster</option>
      </select>




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

WEB DESIGN WORLD                                                                    47
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for="speed">Select a Speed:</label>
      <select name="speed" class="slider">
        <option value="Slower">Slower</option>
        <option value="Slow">Slow</option>
        <option value="Medium" selected="selected">Medium</option>
        <option value="Fast">Fast</option>
        <option value="Faster">Faster</option>
      </select>



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




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

WEB DESIGN WORLD                                                                    47
WEB STANDARDS: FUELING INNOVATION




Classy
      <label for="speed">Select a Speed:</label>
      <select name="speed" class="slider">
        <option value="Slower">Slower</option>
        <option value="Slow">Slow</option>
        <option value="Medium" selected="selected">Medium</option>
        <option value="Fast">Fast</option>
        <option value="Faster">Faster</option>
      </select>



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



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


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

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




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




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

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

                               flickr Photo Credits
                               “One Step at a Time” by Lachlan Hardy
                                    “solid foundation” by nuanc
                            “Rocas del fuego y del agua” by Doblonaut
                                    “Pinkstone” by Matt Carman
                          “reflecting_building_633_dark-sky_01” by wvs
                    “I love my toolbox 15 July Scavenger Hunt” by Sa!anna
                        “Look like dead, but they're alive!” by iosonofabio
                                         “Simple” by tricky™
                         “Kelly, Aaron, Geert & Veerle” by Kelly McCarthy
“3/365 ~ Just because you are lost, doesn't mean that people can't find you...” by {Psychic Noise}
                       “The Sun Sets on Château de Chillon” by Pear Biter
                         “112 Classification of Knowledge” by jasonvance
                     “#256 Exchanging change with exchange” by assbach
                                    “Legospective” by Guillerm"
                             “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

Viewers also liked

Standards and guides in web design
Standards and guides in web designStandards and guides in web design
Standards and guides in web designshaundickie
 
Harnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your HomeHarnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your HomeJacquelineBecker
 
Responsive web design standards?
Responsive web design standards?Responsive web design standards?
Responsive web design standards?Chris Mills
 
Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperNyros Technologies
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural PracticeRachel Hinman
 
Semantic Web Technologies for HCI
Semantic Web Technologies for HCISemantic Web Technologies for HCI
Semantic Web Technologies for HCIJo Vermeulen
 

Viewers also liked (6)

Standards and guides in web design
Standards and guides in web designStandards and guides in web design
Standards and guides in web design
 
Harnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your HomeHarnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your Home
 
Responsive web design standards?
Responsive web design standards?Responsive web design standards?
Responsive web design standards?
 
Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros Developer
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural Practice
 
Semantic Web Technologies for HCI
Semantic Web Technologies for HCISemantic Web Technologies for HCI
Semantic Web Technologies for HCI
 

Similar to Web Standards: Fueling Innovation [Web Design World - Seattle 2009]

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
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xPatrickHillert
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xinovex GmbH
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?정현 황
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's dayAnkur Mishra
 
Web components - a whirlwind tour
Web components - a whirlwind tourWeb components - a whirlwind tour
Web components - a whirlwind tourMartin Naumann
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 
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
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!Tady Walsh
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 

Similar to Web Standards: Fueling Innovation [Web Design World - Seattle 2009] (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]
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Html5
Html5Html5
Html5
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
Html5
Html5Html5
Html5
 
Code camp orlando
Code camp   orlandoCode camp   orlando
Code camp orlando
 
Web components - a whirlwind tour
Web components - a whirlwind tourWeb components - a whirlwind tour
Web components - a whirlwind tour
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
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
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 

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

Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?Paolo Missier
 
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 ProcessingScyllaDB
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 

Recently uploaded (20)

Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
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
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 

Web Standards: Fueling Innovation [Web Design World - Seattle 2009]

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