Moving from Web 1.0 to Web 2.0

3,276 views

Published on

What is Web 2.0?
What you need to know to get a job as a web developer in the Web 2.0 world. Presentation from TodCon 2008

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,276
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Moving from Web 1.0 to Web 2.0

    1. 1. Moving from Web 1.0 to Web 2.0 Estelle Weyl EvoTech.Net
    2. 2. Moving from Web 1.0 to Web 2.0 Estelle Weyl EvoTech.Net <ul><li>What is Web 2.0? </li></ul><ul><li>What you need to know to get a job as a web developer in the Web 2.0 world. </li></ul>
    3. 3. Web 2.0 – origin <ul><li>Term coined in early 2003 by O'Reilly & MediaLive International. </li></ul><ul><li>Became famous at the 2004 Web 2.0 conference </li></ul>
    4. 4. What makes a site Web 2.0? <ul><li>Services </li></ul><ul><li>User Participation </li></ul><ul><li>Scalable </li></ul><ul><li>Re-usable data </li></ul><ul><li>Not only on PC </li></ul><ul><li>Service improves the more users use it </li></ul>
    5. 5. Web 2.0 - origin <ul><li>Term coined in early 2003 by O'Reilly & MediaLive International. </li></ul><ul><li>Became famous at the 2004 Web 2.0 Conference </li></ul><ul><li>A marketing buzzword? </li></ul><ul><li>User controlled content </li></ul>
    6. 6. Web 2.0 - Aspects <ul><li>Social Aspect: a collaborative web where content is created by users </li></ul><ul><li>Technological Aspect: AJAX, Ruby on Rails </li></ul><ul><li>Architectural Aspect: installable on any platform </li></ul><ul><li>When the content is created by the user. When a site goes beyond an on-line brochure or catalog: when you get lost in a site, not because of poor navigation, but because of entertainment or intrigue. </li></ul>
    7. 7. Many Web 2.0 sites do not rely on their users for creating all of their content, but rather the users enrich the sites content <ul><li>All User Content </li></ul><ul><li>Wikipedia </li></ul><ul><li>Twitter </li></ul><ul><li>Magnolia </li></ul><ul><li>StumbleUpon </li></ul><ul><li>Upcoming.org </li></ul><ul><li>De.licio.us </li></ul><ul><li>Flickr </li></ul><ul><li>User Enhanced Sites </li></ul><ul><li>Amazon </li></ul><ul><li>Netflix </li></ul><ul><li>IMDB </li></ul><ul><li>Yelp </li></ul><ul><li>Huffington Post </li></ul><ul><li>Your local paper? </li></ul>
    8. 8. Web 2.0 Components <ul><li>Ratings </li></ul><ul><li>Folksonomies (Tags, social indexing) </li></ul><ul><li>Comments </li></ul><ul><li>Social Bookmarking </li></ul><ul><li>Wiki / user generated content </li></ul><ul><li>Mashups </li></ul><ul><li>Microformats </li></ul><ul><li>RIA / AJAX </li></ul><ul><li>RSS/Atom feeds </li></ul><ul><li>Friends </li></ul><ul><li>Points </li></ul><ul><li>Popularity </li></ul>
    9. 9. Topics <ul><li>AJAX is NOT the only thing you need to know </li></ul>
    10. 10. Topics <ul><li>AJAX is NOT the only thing you need to know </li></ul><ul><li>Browsers </li></ul><ul><li>Debugging </li></ul><ul><li>Download Speed </li></ul><ul><li>JavaScript (AJAX & Libraries) - unobtrusive </li></ul><ul><li>Syndication (RSS / Podcasting) </li></ul><ul><li>Microformats </li></ul><ul><li>Mashups (Integration of external applications) </li></ul>
    11. 11. Topics <ul><li>AJAX is NOT the only thing you need to know </li></ul><ul><li>Social Networking </li></ul><ul><li>Membership requirements </li></ul><ul><li>Blogrolls </li></ul><ul><li>Tech Mags </li></ul><ul><li>Security </li></ul><ul><li>Web Standards </li></ul><ul><li>Future of the web – HTML 5 v XHTML 2 </li></ul>
    12. 12. Focus on ... <ul><li>Browser support </li></ul><ul><li>Debugging & Development (Firebug) </li></ul><ul><li>Improve Download speed (YSlow) </li></ul><ul><li>Sprites </li></ul><ul><li>Touch upon ... </li></ul><ul><li>Microformats </li></ul><ul><li>JavaScript Libraries </li></ul><ul><li>Web 2.0 sites you should know.... </li></ul>
    13. 13. Browsers <ul><li>Grade-A Browsers </li></ul><ul><ul><li>http://developer.yahoo.com/yui/articles/gbs </li></ul></ul><ul><li>Parallels / VMWare Fusion </li></ul><ul><li>Phones / CS3 Device Central </li></ul><ul><li>Online services </li></ul>
    14. 14. Browsers (cont.) <ul><li>Code XHTML </li></ul><ul><li>Separate content from presentation and behavior </li></ul><ul><li>Media specific external CSS </li></ul><ul><li>Code correctly, and browsers / platforms will be a non-issue </li></ul><ul><li>Use Firefox as your development browser </li></ul>
    15. 15. Debugging - Firebug! <ul><li>Firebug for Firefox ~ </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Box Model / Layout </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>XHR </li></ul></ul><ul><ul><li>HTTP requests </li></ul></ul><ul><li>http://getfirebug.com </li></ul><ul><li>http://evotech.net/blog/2007/06/introduction-to-firebug/ </li></ul><ul><li>http://encytemedia.com/blog/articles/2006/05/12/an-in-depth-look-at-the-future-of-javascript-debugging-with-firebug </li></ul>
    16. 16. Debuggers <ul><li>Firefox </li></ul><ul><ul><li>* JavaScript Console </li></ul></ul><ul><ul><li>* Firebug </li></ul></ul><ul><ul><li>* Venkman </li></ul></ul><ul><ul><li>* DOM Inspector </li></ul></ul><ul><ul><li>* Web Developer Extension </li></ul></ul><ul><ul><li>* Tamper Data </li></ul></ul><ul><ul><li>* Fasterfox </li></ul></ul>
    17. 17. Debugging - other <ul><li>Safari </li></ul><ul><ul><ul><li>* &quot;Debug&quot; menu </li></ul></ul></ul><ul><ul><ul><li>* JavaScript Console </li></ul></ul></ul><ul><ul><ul><li>* Drosera </li></ul></ul></ul><ul><li>Internet Explorer </li></ul><ul><ul><ul><li>* JavaScript Console </li></ul></ul></ul><ul><ul><ul><li>* Microsoft Windows Script Debugger </li></ul></ul></ul><ul><ul><ul><li>* Microsoft Script Editor </li></ul></ul></ul><ul><ul><ul><li>* Visual Web Developer </li></ul></ul></ul><ul><ul><ul><li>* Developer Toolbar </li></ul></ul></ul><ul><ul><ul><li>* Info </li></ul></ul></ul><ul><li>Opera </li></ul><ul><ul><ul><li>* JavaScript Console </li></ul></ul></ul><ul><ul><ul><li>* Developer Console </li></ul></ul></ul><ul><ul><ul><li>* DOM Snapshot </li></ul></ul></ul>
    18. 18. Download Speed <ul><li>Reduce actual and minimize perceived download speed. </li></ul><ul><li>Separate content, presentation and behavior </li></ul><ul><li>Put CSS in the head </li></ul><ul><li>Put JavaScript at the end </li></ul><ul><li>Follow “exceptional performance” recommendations – Yslow ~ </li></ul>
    19. 19. YSlow <ul><li>Minimize HTTP requests </li></ul><ul><ul><li>Use sprites </li></ul></ul><ul><ul><li>Use 1 external JS, 1 external CSS </li></ul></ul><ul><ul><li>Minimize number of foreground images </li></ul></ul><ul><li>Use a content delivery network </li></ul><ul><li>Expires headers </li></ul><ul><li>Gzip </li></ul><ul><li>CSS at top </li></ul><ul><li>Scripts at bottom </li></ul><ul><li>Do not use CSS expressions </li></ul>
    20. 20. YSlow <ul><li>Make JS and CSS external </li></ul><ul><li>Reduce DNS lookups </li></ul><ul><li>Minify your javascript (JSLint) </li></ul><ul><li>Avoid redirects </li></ul><ul><li>Remove duplicate scripts </li></ul><ul><li>Configure Etags </li></ul><ul><li>Ignore the grade, but follow the suggestions </li></ul>
    21. 21. Sprites ~ <ul><li>A large image made up of all the small images used in the design/iconography of your site. </li></ul><ul><li>Define the coordinates of the sprite as value for background-position in your CSS. </li></ul><ul><ul><li>List bullets </li></ul></ul><ul><ul><li>Image replacement: PDF/ external links / help bubble </li></ul></ul><ul><ul><li>Navigation & link rollovers </li></ul></ul><ul><ul><li>Rounded corners </li></ul></ul><ul><li>Reduce # of http requests </li></ul><ul><li>Prevent rollover flicker </li></ul><ul><li>http://www.csssprites.com/ </li></ul>
    22. 22. JavaScript & AJAX <ul><li>GOOD: Creating a user experience on the web with the look and feel of a desktop application </li></ul><ul><li>BAD: Creating “whistles and bells” without improving, or to the detriment of, user experience </li></ul>
    23. 23. JavaScript Libraries <ul><li>Prototype </li></ul><ul><li>JQuery </li></ul><ul><li>YUI </li></ul><ul><li>Google Web Toolkit </li></ul><ul><li>Adobe Spry </li></ul>
    24. 24. You need to know ... <ul><li>Undefined (uninitialized v. undeclared) </li></ul><ul><li>Declared values without assignment are undefined </li></ul><ul><li>var i_am_declared; </li></ul><ul><li>if(i_am_declared == undefined){ /* true */} </li></ul><ul><li>Undeclared values are not undefined: they don't exists: </li></ul><ul><li>if(i_was_not_declared == undefined) { /* error: can't find variable: i_was_not_declared */} </li></ul>
    25. 25. You need to know ... (2) <ul><li>Undefined (uninitialized v. undeclared) are equal in object properties </li></ul><ul><li>Undeclared properties of existing objects return undefined, and do not throw an error </li></ul><ul><li>if(window.not_declared == undefined){ </li></ul><ul><ul><ul><li>// returns true. Does not throw an error. </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    26. 26. You need to know – the DOM <ul><li>var myP = document.createElement('p'); </li></ul><ul><li>myText = document.createTextNode('this is a new paragraph'); </li></ul><ul><li>myP.appendChild(myText); </li></ul><ul><li>myContainer = document.getElementById('Parent); </li></ul><ul><li>myLocation.appendChild(newP); </li></ul><ul><li>24024472 </li></ul>
    27. 27. You need to know – the DOM <ul><li>var myP = document.createElement('p'); </li></ul><ul><li>myText = document.createTextNode('this is a new paragraph'); </li></ul><ul><li>myP.appendChild(myText); </li></ul><ul><li>myContainer = document.getElementById('Parent); </li></ul><ul><li>myLocation.appendChild(newP); </li></ul><ul><li>myP.setAttribute('class', 'myClass'); </li></ul>
    28. 28. JavaScript – other stuff <ul><li>Object Oriented JavaScript </li></ul><ul><li>JSON </li></ul>
    29. 29. Microformats <ul><ul><li>web-based data formatting to use content as metadata using class and rel attributes </li></ul></ul><ul><ul><li>Allows information like contacts, coordinates, calendar events, to be processed by software. </li></ul></ul><ul><ul><li>&quot;automated processing,&quot; (natural language processing or screen scraping) exists, but Microformats standardized the semantics. </li></ul></ul><ul><ul><li>Allows data to be indexed, searched for, saved or cross-referenced, so that information can be reused or combined – but needs to be supported </li></ul></ul><ul><ul><li>Supported by Firefox 3, IE8. Safari 3 and Opera with plugins. </li></ul></ul>
    30. 30. Microformats <ul><li><ul class=&quot;vcard&quot;> </li></ul><ul><li><li class=&quot;fn&quot;>Estelle Weyl</li> </li></ul><ul><li><li class=&quot;org&quot;>Evolution Technologies</li> </li></ul><ul><li><li class=&quot;tel&quot;>415-845-9906</li> </li></ul><ul><li><li><a class=&quot;url&quot; href=&quot;http://evotech.net/&quot;>http://evotech.net/</li> </li></ul><ul><li></ul> </li></ul><ul><li>Microformats add meaning to content in HTML </li></ul>
    31. 31. Microformats <ul><li><p>The camp ground is at </li></ul><ul><li><span class=&quot;geo&quot;> </li></ul><ul><li><span class=&quot;latitude&quot;>52.48</span>, </li></ul><ul><li><span class=&quot;longitude&quot;>-1.89</span> </li></ul><ul><li></span> </li></ul><ul><li></p> </li></ul>
    32. 32. Microformats <ul><li>hCalendar - events </li></ul><ul><li>hReview </li></ul><ul><li>hCard – similar to vCard </li></ul><ul><li>rel-license, rel-nofollow, rel-tag </li></ul><ul><li>VoteLinks – vote for / against </li></ul><ul><li>XFN - XHTML Friends Network </li></ul><ul><li>XMDP - XHTML Meta Data Profiles </li></ul><ul><li>XOXO - outline </li></ul>
    33. 33. Microformats - resources <ul><li>http://www.microformats.org </li></ul><ul><li>http://www.digital-web.com/articles/microformats_primer/ </li></ul><ul><li>http://ilovejackdaniels.com </li></ul><ul><li>http://microformats.org/wiki/cheat-sheet </li></ul><ul><li>http://microformats.org/wiki/implementations </li></ul>
    34. 34. <ul><li><div id=&quot;hcalendar-TodCon&quot; class=&quot;vevent&quot;> </li></ul><ul><li><p> </li></ul><ul><li><a href=&quot;http://todcon.org&quot; class=&quot;url&quot;> </li></ul><ul><ul><li><abbr title=&quot;2008-06-06T08:30-05:0000&quot; class=&quot;dtstart&quot;>June 6th 8:30am</abbr> : </li></ul></ul><ul><ul><li><abbr title=&quot;2008-06-08T04:00-05:00&quot; class=&quot;dtend&quot;>8th 4am, 2008</abbr> : </li></ul></ul><ul><ul><li><span class=&quot;summary&quot;>TodCon</span> at </li></ul></ul><ul><ul><li><span class=&quot;location&quot;>Wyndham Orlando</span></a> </li></ul></ul><ul><li></p> </li></ul><ul><li><p class=&quot;description&quot;>A bunch of people talking macromedia (now Adobe)</p> </li></ul><ul><li><p class=&quot;tags&quot;>Tags: </li></ul><ul><ul><li><a href=&quot;http://eventful.com/events/tags/dreamweaver&quot; rel=&quot;tag&quot;>dreamweaver</a>, </li></ul></ul><ul><ul><li><a href=&quot;http://eventful.com/events/tags/conference&quot; rel=&quot;tag&quot;> conference</a> </li></ul></ul><ul><li></p> </li></ul><ul><li></div> </li></ul>
    35. 35. Syndication <ul><li>When one site makes their information available for integration by other services via feed. </li></ul><ul><li>RSS & Atom feeds </li></ul><ul><li>headlines, summaries, modified version of the original full content </li></ul>
    36. 36. Mashups <ul><li>Combines information and services from more than one source </li></ul><ul><li>Pickleview – Twitter and MLB ~ </li></ul><ul><li>Housing Maps: http://www.housingmaps.com </li></ul>
    37. 37. Design principles <ul><li>Build for clarity (simplicity is good, but clarity is vital) </li></ul><ul><li>Violators are supposedly Web 2.0.... but why? </li></ul>
    38. 38. Social Book Marking <ul><li>Digg </li></ul><ul><li>StumbleUpon </li></ul><ul><li>Del.icio.us </li></ul><ul><li>Magnolia </li></ul><ul><li>Bookmarking in browser is for you. Social bookmarking shares your interests with the world. </li></ul><ul><li>Make “friends” and become “popular” </li></ul>
    39. 39. Other things to know <ul><li>Accessibility - webaim.org </li></ul><ul><li>Web Standards - </li></ul><ul><li>Image replacement methods </li></ul>
    40. 40. YAIRM – Yet Another Image Replacement Method <ul><ul><li>.imgreplacement { </li></ul></ul><ul><ul><li>display:-moz-inline-box; </li></ul></ul><ul><ul><li>display:inline-block; </li></ul></ul><ul><ul><li>background:transparent none 0 0 no-repeat; </li></ul></ul><ul><ul><li>font:0/0 Arial; </li></ul></ul><ul><ul><li>overflow:hidden; </li></ul></ul><ul><ul><li>color:rgba(255,255,255,0); </li></ul></ul><ul><ul><li>/* text-indent:-3000px; </li></ul></ul><ul><ul><li>vertical-align:bottom;*/ </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>define width, height, image and background-position </li></ul></ul>
    41. 41. Thanks to: <ul><li>OpenOffice.org </li></ul><ul><li>Engage.com </li></ul><ul><li>Adobe </li></ul><ul><li>You </li></ul>
    42. 42. Contact Information <ul><li>Estelle Weyl </li></ul><ul><li>[email_address] </li></ul><ul><li>(figure that email out) </li></ul><ul><li>http://evotech.net/blog </li></ul><ul><li>http://slideshare.net/estellevw </li></ul>

    ×