Moving from Web 1.0 to Web 2.0

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.

Web 2.0 – origin
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

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

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.

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?

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

Topics
AJAX is NOT the only thing you need to know

Topics
Browsers
Debugging
Download Speed
JavaScript (AJAX & Libraries) - unobtrusive
Syndication (RSS / Podcasting)
Microformats
Mashups (Integration of external applications)

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

Browsers
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

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

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

Debugging - other
Safari
* "Debug" menu
* Drosera
Internet Explorer
* Microsoft Windows Script Debugger
* Microsoft Script Editor
* Visual Web Developer
* Developer Toolbar
* Info
Opera
* 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 ~

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

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

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/

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

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

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

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

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

JavaScript – other stuff
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.

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

Microformats
The camp ground is at

52.48,
-1.89

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

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

<div id="hcalendar-TodCon" class="vevent">

<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> :
TodCon at
Wyndham Orlando</a>

A bunch of people talking macromedia (now Adobe)
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>

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

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

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”

Other things to know
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

Thanks to:
OpenOffice.org
Engage.com
Adobe
You

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

Moving from Web 1.0 to Web 2.0

by Estelle Weyl on Jun 08, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 7

Statistics

Moving from Web 1.0 to Web 2.0 — Presentation Transcript

http://www.slideshare.net	6
http://www.search-results.com	1