1 / 34

Web 2.0 (Getting it Right the Second Time) Matt Sweeney

Web 2.0 (Getting it Right the Second Time) Matt Sweeney.

asta
Download Presentation

Web 2.0 (Getting it Right the Second Time) Matt Sweeney

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web 2.0 (Getting it Right the Second Time) Matt Sweeney

  2. “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.” – Tim Berners-Lee original WWW proposal <http://www.w3.org/History/1989/proposal.html> Where We’ve Been - WWW

  3. 1992 - Tim Berners-Lee introduces HTML as “marked-up text to represent a hypertext document for transmission over the network” – HTML abstract “Authors can include limited presentation hints, and further control may eventually be possible via associated style sheets.” – HTML+ discussiondocument Where We’ve Been - HTML

  4. <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <ul>, <dl>, <menu>, <dir> <plaintext>, <xmp>, <listing> <title>, <address>, <isIndex> Where We’ve Been – HTML 1

  5. 1995 - HTML 2.0 working draft published as RFC1866 “a simple markup language used to create hypertext documents that are platform independent. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains.” – HTML 2.0 abstract Where We’ve Been – HTML 2.0

  6. <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <ul>, <dl>, <menu>, <dir>, <ol> <xmp>, <listing>, <pre> <title>, <address>, <isIndex> <form>, <input>, <textarea>, <option>, <select> <img> <strong>, <em> <cite>,<code>, <var>, <samp>, <blockquote> <b>, <tt>, <i>, <hr> <head>, <body>, <base> <br> Where We’ve Been – HTML 2.0

  7. 1997 - HTML 3.2 proposed for “documents with generic semantics that are appropriate for representing information from a wide range of applications.”– HTML 3.2 abstract Where We’ve Been – HTML 3.2

  8. <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <ul>, <dl>, <menu>, <dir> <xmp>, <listing>, <pre> <title>, <address>, <isIndex> <table>, <caption>, <th>, <td>, <tr> <form>, <input>, <textarea>, <option>, <select> <img> <strong>, <em> <cite>, <code>, <var>, <samp>, <blockquote> <b>, <tt>, <i>, <u>, <hr>, <strike>, <s>, <sup>, <sub>, <center>, <font>, <big>, <small> <head>, <body>, <base>, <style>, <script> <div> <map>, <applet> <br>, <hr> Where We’ve Been – HTML 3.2

  9. 1998 - HTML proposal that “…supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. … takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide.” – HTML 4.0 abstract Where We’ve Been – HTML 4.01

  10. <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <ul>, <dl>, <ol> <menu>, <dir> <xmp>, <listing>, <pre> <title>, <address>, <isIndex> <table>, <caption>, <th>, <td>, <tr>, <col>, <colgroup>, <thead>, <tbody>, <tfoot> <form>, <input>, <textarea>, <option>, <select>, <fieldset>, <label>, <legend>, <button>, <optgroup> <img>, <map>, <applet>,<object> <strong>, <em> <cite>, <code>, <var>, <samp>, <blockquote>, <abbr>, <q>, <dfn>, < del>, <ins>, <param> <b>, <u>, <tt>, <i>, <strike>, <s>, <sup>, <sub>, <center>, <font>, <big>, <small> <head>, <body>, <base>, <style>, <script>, <noscript><frameset>,<frame>, <iframe>, <noframes> <div>, <span>, <br> Where We’ve Been – HTML 4.0

  11. Where We Are – Development • Cleaning up the past • Simplifying markup layer • Using CSS for presentation • Making heavy use of Javascript

  12. Where We Are – Cleaning Up Legacy markup <table bgcolor=“#999999” border=0 cellpadding=0 cellspacing=0> <tr><td>&#149;</td><td bgcolor=“#cccccc”><b><font face=“arial” size=“1”>News</font></b></td></tr> <tr><td>&#149;</td><td><font face=“arial” size=“-1”<a href=“story.html”>Senate Approves Patriot act Renewal</a></font></td></tr> <tr><td>&#149;</td><td><font face=“arial” size=“-1”<a href=‘story.html”>Mine Rescuers Still Waiting for Interviews</a></font></td></tr> <tr><td></td><td><font face=“verdana” size=“-2”><a href=“javascript:void(); window.open(‘more.html’)”>More news stories</a></font></td></tr> </table>

  13. Where We Are – Cleaning Up No better <div id=“news” class=“clear”> <div class=“title”><b class=“graybg”>News</b></div> <div><a href=“#”><span class=“arial12”>Senate Approves Patriot act Renewal</span></a></div> <div><a href=”#”><span class=“arial12”>Mine Rescuers Still Waiting for Interviews </span></a></div> <div><a href=“#” class=“popup”><span class=“verdana10”>More news stories</a></span></div> </div>

  14. Where We Are – Cleaning Up Much better <div id=“news”> <h2>News</h2> <ul> <li><a href=“story.html”>Senate Approves Patriot act Renewal</a></li> <li><a href=“story.html”>Mine Rescuers Still Waiting on Interviews</a></li> <li><em><a href=“more.html”>More news stories</a></em></li> </ul> </div>

  15. Where We Are – Web 2.0 • Content sharing • Open APIs • Mixing code bases

  16. Where We Are – Web 2.0? • Semantic markup • Progressive Enhancement (bottom up) • Separation of concerns • Encapsulation

  17. Semantics - HTML • Choose markup based on meaning • Avoid presentation in markup (defer to CSS) • Core functionality should not depend on JS • Should not have to change between designs • This is the “wireframe” for your application

  18. Semantics – ID Attribute • Choose names that describe content • Avoid presentational and behavioral names • Should be meaningful without CSS or JS present Naming: • Bad – “left-col”, “top-nav”, “redbox” • Good – “nav”, “main”, “news”, “calendar”

  19. Semantics – ID Attribute Triple Duty: The ID Attribute HTML: <a href="http://www.my.yahoo.com#news">News</a> CSS: #news { border:1px solid #000; } Javascript: var news = document.getElementById('news');

  20. Semantics – Classes When to use: • Extending semantics (Microformats) • Supplementing selector support (“first-child”) • Managing state (“selected”) Naming: • Bad – “red”, “float”, “pad20”, “drag” • Good – “error”, “date”, “review”, “calendar”

  21. Semantics – Example <div class=“title”>Today in the News</div> <span class=“error”>please correct the error</span> • Meaning is lost without CSS • Meaning is lost to screen reader, web crawlers <h2>Today in the News</h2> <strong class=“error”>please correct the error</strong> • Meaningful at the markup level • Leverages existing semantics (header, emphasis)

  22. Semantics – Why bother? • Markup is the foundation • Search Engine Optimization • Accessibility • Simplifies styling and scripting • CSS and JS rely heavily on elements and ID/class names • Names and markup must live beyond presentation and behavior

  23. Semantics Markup should standalone • Should have meaning without styles or behavior • Core functionality should not depend on Javascript (forms and links work) • Choose names that will last Test: “Do the names make sense without CSS and JS?”

  24. Progressive Enhancement <form action=“video_search.php” id=“video”> <label for=“query”>Search for:</label> <input name=“query” id=“query” /> <input type=“submit” value=“get video” /> </form>

  25. Progressive Enhancement #video { background-color:#ccc; width:20em; } #video label { text-indent:-9999px; } #video input { font:120%/1.22 arial; }

  26. Progressive Enhancement var video = document.getElementById(‘video’); video.onsubmit = function() { sendForm(this); return false; };

  27. Progressive Enhancement Requires: • Withholding CSS and JS from some agents • Thoughtful markup and naming • Not depending on JS for core tasks • Testing without JS

  28. Progressive Enhancement Benefits: • Works for ALL HTML readers • Enables reuse and code sharing • Functional prototype early in development • Allows parallel tracks for design and development • Simplifies debugging • Simplifies maintenance

  29. Encapsulation • Code needs to play nicely together • Do not pollute global namespace (CSS, JS, attributes, etc.) • Use descendent selectors • Use JS namespaces • Don’t invent your own markup

  30. Encapsulation - CSS #news h2 { background:#dcdcdc; } #news h2 em { color:red; } #news li.selected { background:#999; }

  31. Encapsulation - JS • Namespaces (YAHOO.util, dojo.bind) • Avoid global variables • Protect yourself from others • Protect others from you

  32. Preparing for the Future • More HTML-enabled devices • More media types (print, aural, screen, handheld, etc.) • More code sharing

  33. Preparing for the Future • Assume only HTML support • Do not depend on CSS for meaning • Do not depend on JS for core functionality • Cross these line reluctantly and thoughtfully

  34. Thanks! Have a nice day

More Related