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