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.
Estelle Weyl EvoTech.Net

Term coined in early 2004 by O'Reilly & MediaLive International
A marketing buzzword?
Treat the Web as a Platform
User controls content

Services
User Participation
Scalable
Re-usable data
Not only on PC
Service improves the more users use it

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.

All User Content
Wikipedia
Twitter
Magnolia
StumbleUpon
Upcoming.org
User Enhanced Sites
Amazon
Netflix
IMDB
Yelp
Huffington Post
Your local paper?

AJAX is NOT the only thing you need to know
Browsers & QA
Debugging
Download Speed (perceived & actual)
Sprites
JavaScript (AJAX & Libraries)‏
Microformats
Syndication (RSS / Podcasting)‏
Mashups (Integration of external applications)‏

BE AWARE OF THE FOLLOWING:
Social Networking
Membership requirements
Blogrolls
Tech Mags
Security
Future of the web – HTML 5 v XHTML 2

Browser support
Debugging & Development (Firebug)
Improve Download speed (YSlow)‏
Sprites
Touch upon ...
Microformats
JavaScript Libraries
Various other technologies used in Web 2.0 sites

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

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

Firebug for Firefox
HTML
CSS
Box Model / Layout
DOM
JavaScript
XHR
HTTP requests

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

Safari
* "Debug" menu
* Drosera
Internet Explorer
* Microsoft Windows Script Debugger
* Microsoft Script Editor
* Visual Web Developer
* Developer Toolbar
* Info
Opera
* Developer Console
* DOM Snapshot

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

One larger image containing smaller image
Web iconography
R ounded corners
H over states
Single HTTP request for image
No flicker if used as rollover effect

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

Make JS and CSS external
Reduce DNS lookups
Minify your javascript (JSLint)‏
Avoid redirects
Remove duplicate scripts
Configure Etags
Ignore the grade. Follow the suggestions

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

Prototype
JQuery
YUI
Google Web Toolkit
Adobe Spry

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.

<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

The camp ground is at

52.48,
-1.89

http://www.digital-web.com/articles/microformats_primer/
http://www.microformats.org

Estelle Weyl estelle [AT] weyl [DOT] org http://evotech.net/blog

http://www.evotech.net	999
http://translate.googleusercontent.com	6
http://webcache.googleusercontent.com	6
http://www.hanrss.com	1
http://www.slideshare.net	1

Moving from Web 1.0 to Web 2.0

by Estelle Weyl on Nov 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,013

Statistics

Moving from Web 1.0 to Web 2.0 — Webinar Transcript