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

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.

What is Web 2.0?

What you need to know to get a job as a web developer in the Web 2.0 world.

Web 2.0 – origin Term coined in early 2003 by O'Reilly & MediaLive International. Became famous at the 2004 Web 2.0 conference

Term coined in early 2003 by O'Reilly & MediaLive International.

Became famous at the 2004 Web 2.0 conference

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

Services

User Participation

Scalable

Re-usable data

Not only on PC

Service improves the more users use it

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

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

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.

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.

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?

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?

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

Ratings

Folksonomies (Tags, social indexing)

Comments

Social Bookmarking

Wiki / user generated content

Mashups

Microformats

RIA / AJAX

RSS/Atom feeds

Friends

Points

Popularity

Topics AJAX is NOT the only thing you need to know

AJAX is NOT the only thing you need to know

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)

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)

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

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

Focus on ... Browser support Debugging & Development (Firebug) Improve Download speed (YSlow) Sprites Touch upon ... Microformats JavaScript Libraries Web 2.0 sites you should know....

Browser support

Debugging & Development (Firebug)

Improve Download speed (YSlow)

Sprites

Touch upon ...

Microformats

JavaScript Libraries

Web 2.0 sites you should know....

Browsers Grade-A Browsers http://developer.yahoo.com/yui/articles/gbs Parallels / VMWare Fusion Phones / CS3 Device Central Online services

Grade-A Browsers

http://developer.yahoo.com/yui/articles/gbs

Parallels / VMWare Fusion

Phones / CS3 Device Central

Online services

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

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

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

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

Debuggers Firefox * JavaScript Console * Firebug * Venkman * DOM Inspector * Web Developer Extension * Tamper Data * Fasterfox

Firefox

* JavaScript Console

* Firebug

* Venkman

* DOM Inspector

* Web Developer Extension

* Tamper Data

* Fasterfox

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

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

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 ~

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 ~

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

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

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

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

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/

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/

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

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

JavaScript Libraries Prototype JQuery YUI Google Web Toolkit Adobe Spry

Prototype

JQuery

YUI

Google Web Toolkit

Adobe Spry

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 */}

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 */}

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. }

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.

}

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

var myP = document.createElement('p');

myText = document.createTextNode('this is a new paragraph');

myP.appendChild(myText);

myContainer = document.getElementById('Parent);

myLocation.appendChild(newP);

24024472

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

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

JavaScript – other stuff Object Oriented JavaScript JSON

Object Oriented JavaScript

JSON

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.

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.

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

<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

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>

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

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

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

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

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

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

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

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

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

Mashups Combines information and services from more than one source Pickleview – Twitter and MLB ~ Housing Maps: http://www.housingmaps.com

Combines information and services from more than one source

Pickleview – Twitter and MLB ~

Housing Maps: http://www.housingmaps.com

Design principles Build for clarity (simplicity is good, but clarity is vital) Violators are supposedly Web 2.0.... but why?

Build for clarity (simplicity is good, but clarity is vital)

Violators are supposedly Web 2.0.... but why?

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”

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”

Other things to know Accessibility - webaim.org Web Standards - Image replacement methods

Accessibility - webaim.org

Web Standards -

Image replacement methods

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

.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

Thanks to: OpenOffice.org Engage.com Adobe You

OpenOffice.org

Engage.com

Adobe

You

Contact Information Estelle Weyl [email_address] (figure that email out) http://evotech.net/blog http://slideshare.net/estellevw

Estelle Weyl

[email_address]

(figure that email out)

http://evotech.net/blog

http://slideshare.net/estellevw