web2

Download
Share  Add to  Flag Embed
Uploaded from authorPOINTLite
Views:
 
Category: Entertainment
     
 
License:   All Rights Reserved

Presentation Description

No description available.

Comments

Presentation Transcript

Slide1: 

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

Where We’ve Been - WWW: 

Where We’ve Been - WWW “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 - HTML: 

Where We’ve Been - HTML 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+ discussion document

Where We’ve Been – HTML 1: 

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

Where We’ve Been – HTML 2.0: 

Where We’ve Been – HTML 2.0 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: 

Where We’ve Been – HTML 2.0 <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 3.2: 

Where We’ve Been – HTML 3.2 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: 

Where We’ve Been – HTML 3.2 <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 4.01: 

Where We’ve Been – HTML 4.01 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.0: 

Where We’ve Been – HTML 4.0 <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 Are – Development: 

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

Where We Are – Cleaning Up: 

Where We Are – Cleaning Up <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> Legacy markup

Where We Are – Cleaning Up: 

Where We Are – Cleaning Up <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> No better

Where We Are – Cleaning Up: 

Where We Are – Cleaning Up <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> Much better

Where We Are – Web 2.0: 

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

Where We Are – Web 2.0?: 

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

Semantics - HTML: 

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

Semantics – ID Attribute: 

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”

Semantics – ID Attribute: 

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');

Semantics – Classes: 

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”

Semantics – Example: 

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)

Semantics – Why bother?: 

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

Semantics: 

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?”

Progressive Enhancement: 

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>

Progressive Enhancement: 

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

Progressive Enhancement: 

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

Progressive Enhancement: 

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

Progressive Enhancement: 

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

Encapsulation: 

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

Encapsulation - CSS: 

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

Encapsulation - JS: 

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

Preparing for the Future: 

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

Preparing for the Future: 

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

Thanks!: 

Thanks! Have a nice day