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

Like this? Share it with your network

Share

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

on

  • 4,326 views

Web standards are all about rules and structure, formalities that many people find restrictive and stifling. From another perspective, however, the rigid structure of Web standards can be seen as a ...

Web standards are all about rules and structure, formalities that many people find restrictive and stifling. From another perspective, however, the rigid structure of Web standards can be seen as a boon to creativity on the Web. In this session, Aaron Gustafson will teach you how to use smart JavaScript to leverage the extensibility of XHTML and CSS and push the boundaries of Web design and development, all while still adhering to the best practices of Web standards.

Statistics

Views

Total Views
4,326
Views on SlideShare
4,318
Embed Views
8

Actions

Likes
7
Downloads
135
Comments
0

3 Embeds 8

http://www.slideshare.net 6
https://easydesigns.projectpath.com 1
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Web Standards: Fueling Innovation Aaron Gustafson
  • 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
  • 3. HTML = Foundation
  • 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
  • 11. components Photo credit: jasonvance
  • 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. 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
  • 14. XFN: <a href=quot;http://easy-designs.netquot; rel=quot;mequot;>Aaron</a> Photo credit: Kelly McCarthy
  • 15. XFN: <a href=quot;http://duoh.comquot; rel=quot;friend met colleaguequot;>Veerle Pieters</a> Photo credit: Kelly McCarthy
  • 16. XFN: <a href=quot;http://duoh.comquot; rel=quot;friend met colleaguequot;>Geert Leyseele</a> Photo credit: Kelly McCarthy
  • 17. rel-tag: <a href=quot;http://en.wikipedia.org/wiki/Rudbeckia_hirtaquot; rel=quot;tagquot;>Black-eyed Susan</a> Photo credit: {Psychic Noise}
  • 18. 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
  • 19. classi cation Photo credit: jasonvance
  • 20. 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
  • 21. 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
  • 22. “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
  • 23. HTML 3: <person>Joe Blow</person> microformats: <div class=quot;vcardquot;> <span class=quot;fnquot;> Joe Blow </span> </div> Photo credit: assbach
  • 24. 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
  • 25. 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
  • 26. 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>
  • 27. 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
  • 28. extensibility Photo credit: Guillermo
  • 29. 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
  • 30. 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
  • 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
  • 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
  • 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
  • 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
  • 35. 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
  • 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
  • 37. be your own vendor Photo credit: Rigmarole
  • 38. WEB STANDARDS: FUELING INNOVATION Presentation where it belongs div#focal img { -easy-frame: polaroid; } WEB BUILDER 2.0 38
  • 39. putting it together Photo credit: kayepants
  • 40. Progressive Enhancement sweet & simple
  • 41. Classification for interface control
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. JavaScript: good at looking for things to do Photo credit: Messiah Divine
  • 46. Classification for better form controls Faster Slower Medium Faster
  • 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> accessibleUISlider: http://tinyurl.com/4kstyj WEB BUILDER 2.0 47
  • 48. WEB STANDARDS: FUELING INNOVATION Classy <label for=quot;speedquot;>Select a Speed:</label> <select name=quot;speedquot; class=quot;sliderquot;> <option value=quot;Slowerquot;>Slower</option> <option value=quot;Slowquot;>Slow</option> <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option> <option value=quot;Fastquot;>Fast</option> <option value=quot;Fasterquot;>Faster</option> </select> Using jQuery: $('select.slider').accessibleUISlider(); accessibleUISlider: http://tinyurl.com/4kstyj WEB BUILDER 2.0 47
  • 49. WEB STANDARDS: FUELING INNOVATION Classy <label for=quot;speedquot;>Select a Speed:</label> <select name=quot;speedquot; class=quot;sliderquot;> <option value=quot;Slowerquot;>Slower</option> <option value=quot;Slowquot;>Slow</option> <option value=quot;Mediumquot; selected=quot;selectedquot;>Medium</option> <option value=quot;Fastquot;>Fast</option> <option value=quot;Fasterquot;>Faster</option> </select> Using jQuery: $('select.slider').accessibleUISlider(); A step farther? select { -jQueryUI-control: slider; } accessibleUISlider: http://tinyurl.com/4kstyj WEB BUILDER 2.0 47
  • 50. Don’t be afraid to get creative
  • 51. 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
  • 52. “Innovation is the ability to see change as an opportunity - not a threat. - Anonymous Photo credit: Erica_Marshall
  • 53. Web Standards: Fueling Innovation Aaron Gustafson
  • 54. 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