Your SlideShare is downloading. ×
Moving from Web 1.0 to Web 2.0
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Moving from Web 1.0 to Web 2.0

2,723
views

Published on

What is Web 2.0? …

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
2,723
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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=&quot;vcard&quot;>
      • <li class=&quot;fn&quot;>Estelle Weyl</li>
      • <li class=&quot;org&quot;>Evolution Technologies</li>
      • <li class=&quot;tel&quot;>415-845-9906</li>
      • <li><a class=&quot;url&quot; href=&quot;http://evotech.net/&quot;>http://evotech.net/</li>
      • </ul>
      • Microformats add meaning to content in HTML
    • 31. Microformats
      • <p>The camp ground is at
      • <span class=&quot;geo&quot;>
      • <span class=&quot;latitude&quot;>52.48</span>,
      • <span class=&quot;longitude&quot;>-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=&quot;hcalendar-TodCon&quot; class=&quot;vevent&quot;>
      • <p>
      • <a href=&quot;http://todcon.org&quot; class=&quot;url&quot;>
        • <abbr title=&quot;2008-06-06T08:30-05:0000&quot; class=&quot;dtstart&quot;>June 6th 8:30am</abbr> :
        • <abbr title=&quot;2008-06-08T04:00-05:00&quot; class=&quot;dtend&quot;>8th 4am, 2008</abbr> :
        • <span class=&quot;summary&quot;>TodCon</span> at
        • <span class=&quot;location&quot;>Wyndham Orlando</span></a>
      • </p>
      • <p class=&quot;description&quot;>A bunch of people talking macromedia (now Adobe)</p>
      • <p class=&quot;tags&quot;>Tags:
        • <a href=&quot;http://eventful.com/events/tags/dreamweaver&quot; rel=&quot;tag&quot;>dreamweaver</a>,
        • <a href=&quot;http://eventful.com/events/tags/conference&quot; rel=&quot;tag&quot;> 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

    ×