1. Moving from Web 1.0 to Web 2.0 Estelle Weyl EvoTech.Net

2. Moving from Web 1.0 to Web 2.0Estelle 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 forbackground-positionin 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 usingclassandrelattributes

• 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

Estelle Weyl

Evolution Technologies

415-845-9906

http://evotech.net/

Microformats add meaning to content in HTML

31. Microformats

The camp ground is at

52.48,

-1.89

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.

• • June 6th 8:30am :

• • 8th 4am, 2008 :

• • TodCon at

• • Wyndham Orlando

• A bunch of people talking macromedia (now Adobe)

• Tags:

• • dreamweaver,

• • conference

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 ImageReplacement 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;*/

• }

• definewidth, height, imageandbackground-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