Your Free Web 2.0 Manual

Rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 6 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Your Free Web 2.0 Manual

What is Web 2.0? This page will take you through all the basics! Learn more about the synergy between Web 2.0 design, development and the social networking aspect.

AddThis Social Bookmark Button

Web 2.0: A foreward 

Web 2.0 is the "new wave" of the internet - a collaboration of a new age designing methodology that encourages ease-of-use, an increase of social interaction amongst internet users, "cleaner" interfaces and usability, free and open-source software, and cross-website synergy.

Below are brief explanations of each of these aspects, with examples to help you visualize each, or even help make the transition of your current website to Web 2.0:

Web 2.0 Design 

Web 2.0 design has no definition, yet it is widely recognizable. Consisting of a light and "easy on the eyes" look, Web 2.0 design utilizes whitespace with bright, vivid colors and gradients. Fonts play a major role in Web 2.0 - the "H1" tag resurfaces as a major part of a web page's design, as it is typically a large, bright statement of what a page or paragraph is about. Links are bright and typically neon in color, and color combinations themselves are heavily contrasted against their backdrop (color patterns such as white, neon green and fuchsia make for an eye-appealing mix). Overall, Web 2.0 typically borrows from minimalist styles - where "less is more."

Some sites barely need any graphics at all - on such sites, it's all about the text! Tasteful placement of H-tags, rounded fonts, justified paragraphs and CSS/DIV sections without separator lines make for a "newspapery" looking layout, that is easy to read or skim through.

Web 2.0 Logos: Blogspot, Flickr, Thechnorati, ThisNext, CNN, PayPal, Swicki, Newsvine, AT&T, Diigo, Rollyo, Gather, Izea, Squidoo, Feedburner, Bumpzee, Twitter, Dapper

ABOVE: Web 2.0 logo design is all about eye candy. Attractive colors, soft corners, gradients, subtle shadows, inner glows and contrasting text make Web 2.0 design stand apart.

Examples of Web 2.0 Design Mastery 

Web 2.0 Development 

Web 2.0 development an equally important facet of Web 2.0. Ease-of-use and the desire to conform to SEO (search engine optimization) prompts the need for "cleaner" code, quicker methods of performing traditional actions, and easier ways to store or share pages.

Web 2.0 developers particularly favor heavy usage of CSS, traditional HTML, PHP, and Ajax. CSS, which stands for "Cascading Style Sheets," is an old stylesheet language that has taken on an incredible amount of importance in Web 2.0. It allows a developer to code a site through a style sheet, which defines spacing, colors, link and text size, margins, and much more. It uses "calls" within divider tags to "call forth" these settings - making the actual web pages themselves be very light on code, and overall, more optimized. Ajax, the other major player in Web 2.0, stands for "Asynchronous JavaScript and XML," and aims to facilitate web page usage through exchanging small amounts of data with the server to dynamically load content in that web page, without the need to reload the page.

[+] Learn CSS basics | More CSS examples | Free CSS Menu Generator
[+] Learn more about AJAX basics
[+] Learn more about PHP basics

Examples of Web 2.0 Development Mastery 

CNN.com

0 points

Web 2.0 Functionality 

Web 2.0 functionality has a heavy emphasis on social networking and sharing. Social networking involves the contact amongst web site users. This contact takes place through commenting (leaving comments at the end of a blog or article), sharing (swapping or sharing favorite links, articles, pictures or videos), message boards (traditional forums for discussions), and other such practices.

Examples of Web 2.0 Functionality Mastery 

Ning.com

0 points

Web 2.0 Educational Videos 


Web 2.0

Runtime: 5:17
332937 views
10 Comments:


What Is Web 2.0? Short Version documentary

Runtime: 9:07
37105 views
10 Comments:


Eric Schmidt, Web 2.0 vs. Web 3.0

Runtime: 1:50
94064 views
10 Comments:


Web 2.0 Summit Opening Session

Runtime: 12:59
5919 views
4 Comments:


Eric Schmidt at the Web 2.0 Expo

Runtime: 35:43
35883 views
10 Comments:


Web 2.0 is here

Runtime: 2:15
12896 views
1 Comments:

Delving Deeper into Web 2.0 

We've gone over the basics, now let's take a look at the more intricate parts of Web 2.0, with a few examples!

Web 2.0 Design Elements 

Several trends have been seen in Web 2.0 design - one of which are the return of the plastic effect (a design style that simulates translucent plastic with an inner glow and shadow, and a shiny surface). For some plastic badge examples and a generator, visit Web20badges.com. Another generator for Web 2.0-styled text can be found at Web2.0V2 Logo Creator. Alternately, learn how to make your own plastic web 2.0 badges.

Stripes play a big role in Web 2.0 design, as a light and eye-appealing backdrop for a web page. Take a look at this stripe generator, which quickly and easily lets you create repeating stripes on the fly.

Reflections add to the polished look of a web page. By "mirroring" an image on your site, it will appear to be standing on top of a shiny floor. This effect can be replicated through your favorite image editing program (such as Photoshop), or even with generators such as this one.

Pixel Bars are a popular way to offer quick access to a validator or RSS feed. They're usually very tiny, rectangular, two-color pixel-based graphics. There's even a pixel bar generator that will let you create your own.

Tabs continue to be a great way to navigate through the main areas of a site, and they, too, have taken on a Web 2.0 appearance. Plastic tabs with attractive fonts are amongst the most popular. Here's a CSS tab generator that will get the job done quickly and easily for you.

Web 2.0 and Social Networking 

Social Networking is an important part of Web 2.0 functionality. As previously discussed, it involves the encouragement of interaction amongst web site users. Social networking sites have various methods of providing these services: forums, AJAX-based live chat and instant message and commenting. Social networking was popularized by many of its founders, including Myspace, Facebook, Livejournal, Friendster. New niche-based social networking sites, such as WAYN, are also surfacing at a fast pace. Other social networking sites are geared towards shopping, and allow the customer to practically run the site. ThisNext lets the community add and rate products dynamically, and Epinions is centered around the integrity of customer reviews. Twitter is a niche social networking site that allows others to know what you're doing at the moment.

Web 2.0 and Social Bookmarking 

Social Bookmarking is a practice of storing one's favorite links, and sharing those links with others. It involves the usage of "tags," which are descriptive links assigned to a saved URL that describe its main purposes. Tags are usually designated as nouns that describe what that URL is about. In turn, these tags are spidered across the entire Social Bookmarking site, and collaborated to link together everybody else who has used that tag. This encourages visibility when a person clicks a tag, and the site displays all of the other URLs that share that particular tag. Social Bookmarking was popularized with the site del.icio.us. It later mushroomed into dozens of other bookmarking sites, including other giants Furl, Blinklist and Ma.gnolia.com.

Tags are further displayed through a variety of ways, including tag clouds: a "paragraph" format of space-separated tags that are usually displayed by size differentials (tags that are used more often are larger fonts than those that are displayed less often, and are smaller fonts). Other tag clouds can be displayed as "heat clouds", where tags are further differentiated by color (i.e., perhaps the more used tags are bright orange, and the lesser used ones are light gray).

Web 2.0 and Social Portal Sites 

Social Portals are a new concept, where a user can create a free account, and "register" pages within the site itself (for instance, you can search for and register a page, which permanently becomes your property - like socialportalsite.com/yourpagehere). Squidoo is the best example of a social portal. Other social portals include Hubpages, Launchtags, Spongefish and Associated Content. Ning is a social portal that lets you create a networking site as a subdomain of their own URL. Wetpaint allows you to register your own Wiki on their site.

Web 2.0 Bookmarking and Badges 

Bookmarking practices are typically offered by a webmaster through badges (sometimes referred to as "chicklets"). Badges are tiny, thin bars that advertise a particular social bookmarking service. When clicked by a web site user, the badge will bring that user to the social bookmarking site, where he or she will have to fill out a brief form that allows them to add that website to their list of bookmarks. The person can then assign tags to the link, click 'submit', and be taken back to the original website they were viewing.

All social bookmarks offer badges or chicklets for free usage (take a look at del.icio.us's badge codes for example). In addition, there are several free services that allow a user to click a Javascript-written badge that will pull down a large list of multiple social bookmarking services, and allow the user to choose which services they want. Such multiple bookmarking badge services are ShareThis and AddThis.

Web 2.0 Mash-Ups & API 

Gaining a great deal of popularity in 2007, "Mash-Up" is a technique that takes "bits and pieces" of other websites to create one new website. It essentially thrives on RSS, as well as various applets, widgets, plugins, image and video pulling services, screen scrapers, affiliate store item pullers and other content that creates a very dynamic site.

The concept of a Mashup is not very foreign, as it has typically been alive since the inception of RSS. However, it has evolved, thanks to various free services, including Dapper and many other API (Application Programming Interface) services available through popular services, like eBay API, Commission Junction API, Facebook API and MySpace API (the latter two are programs allowing anyone to create applications, such as quizzes and games, that synergize with the social networking sites: Facebook and MySpace.

A breakthrough Mash-Up site, Pipes, was released by Yahoo Inc. in late 2007. The site allows users to create free accounts, and augment a very sophisticated series of RSS and other site feeds, images, video and other resources to define a one-stop shop of information, for any category of their choosing. Pipes slowly gains popularity, despite its rather steep learning curve and user un-friendly interface. Similarly, Yahoo's alternate Mash-up project, Yahoo Mash, is a hybrid social networking & mashup portal.

Google has its own Mash-Up service as well: Google Mashup Editor, as does Microsoft with its Popfly website.

Web 2.0 Widgets & Badges 

Widgets play a role in Web 2.0 - these code snippets allow webmasters to place tiny informational boxes, sometimes dynamic and usually involving Flash or Ajax, which promote anything from the current number of reader signups, to live games, or a declaration of membership to an external internet club or clan. Sites like Widgetbox and Yahoo Widgets, provide a portal for anyone looking to develop their own widgets, or simply download one of thousands that have already been made, to add additional functionality to a site. Many modern businesses develop Widgets as a way to promote their site and maintain visitors, such as this example from Last.fm.

Widgets are also used for gaming platforms, including XBOX Live, to connect gamers via a dynamic bar displaying icons of current games being played, scores, and rankings within the online game itself. They are typically displayed in the signature area of the user profile on message boards.

Web 2.0 and Article Sharing 

Article Sharing is the act of posting articles or blog postings for public viewing. This creates a community-based news site, where articles that are of interest are "voted up" (or down, or removed entirely). In essence, the community is in charge, and collectively decides what is interesting or not. The biggest article sharing site on the internet continues to be Digg.com, and other great examples include Propeller, Reddit.com, and Newsvine.

Open Source Content Management Systems (CMS) 

Free, open source CMSs are an important part of Web 2.0. They allow regular people to create complex websites with databases and admin panels, and edit the code itself. Read all about CMSs, with many examples:

Web 2.0: Blogs and Blogging 

Blogging is the practice of maintaining one's own journal or article site for public viewing purposes. Blogging began as a way to create a private or public journal or diary, that friends or the entire public could access. It later evolved into a full-fledged article site that was used to share opinions or create subculture-based communities. Today, it has evolved once again into a money-making and promotional effort. Two of the most successful blog earners are Shoemoney and John Chow. Even some of the world's most prestigious Fortune 500 companies have caught on to blogging, as seen on this list.

Some of the most popular blogging platforms are Wordpress.org - a downloadable software package that can be installed on your server, and its lesser popular counterpart: Wordpress.com, Google's Blogger, Typepad, and Blog.com.

Web 2.0 and Wiki 

A Wiki, most popularized by the site Wikipedia, is a community-edited encyclopedia. Wiki framework allows for anyone and everyone to edit its content - which includes additions, subtractions and edits to its content. Another example of an implementation of Wiki is seen on AboutUs.org - a Wiki of website profiles. As Wiki popularity grew, more and more webmasters began creating "niche" Wikis for particular topics (Wikis just for cars, just for computer programming, just for history, etc.)

The most popular Wiki software is MediaWiki, which was used to create Wikipedia. It is a free, open source software package. Other popular packages include TikiWiki and PMWiki. To see and compare Wiki software packages, visit Wikimatrix.

RSS (Really Simple Syndication) 

RSS or Really Simple Syndication is a web feed format that compiles all of the articles on your blog, and formats them in a linear, date-sorted format, which can be "subscribed" to by anyone. The universal RSS logo is a rounded orange box with a dot and wavy lines. By subscribing to an RSS feed, a person can become notified of new articles or changes. It can then be syndicated on another site (through an RSS feed applet), increasing your exposure. Learn more about RSS. Some webmasters have created entire news sites by using RSS feeds from other sites, such as PopURLs.

Blogging platforms including but not limited to Wordpress and Blogger have built-in RSS capability. There are many services that help webmasters syndicate, share, or notify other sites about their RSS feed updates. Several good examples are Technorati, Feedburner, Icerocket and Syndic8.

Many websites do not have RSS functionality right out of the box - therefore, it must be created. You can create an RSS feed for any website using free services like Feed43.

RSS Ping services "ping" or notify other sites when your site has been updated. The aforementioned sites all have ping services, as do Google Blog ping, Yahoo Publisher Network, Ping-o-matic, MillionRSS, Yahoo Pipes, Pingoat, RSSMicro, Feedster, WeBlogALot and Weblogs, amongst many others.

Web 2.0 and Video Sharing 

Video sharing is an incredibly popular and vital part of Web 2.0. Now that creating video and special effects is a feat that can easily be achieved at home, many casual web users are creating their own films, home videos and "vlogs" (video blogs) for the sole purpose of broadcasting them to complete strangers. Through the usage of popular video sharing sites like Youtube, Veoh, Myspace TV, Yahoo Video, Google Video, vSocial, MetaCafe and others - users can upload their raw videos as they will be automatically formatted, optimized for smaller file size, and be made available for the viewing public. Sites like Channelme.TV let you create your own video portal + social networking site.

In Web 2.0 video sites, videos will maintain a hit counter, 5-star rating bar, copyable "share this" line of code for syndication on other websites, and a comments area for visitor feedback.

Web 2.0 and Picture Sharing 

Picture sharing has existed long before the concept of Web 2.0, but now takes on an entirely new meaning. With major Web 2.0 image sharing services like Flickr, PhotoBucket - you can upload and categorize your image based on keywords; linking them to similar images and people. Photo sharing has become so popular, that it has spawned off Photblogging as well (see sites like Photoblogs for more information). Most important to the Web 2.0 methodology - picture services, including but not limited to Flickr, have dozens of external plugins and widgets that allow images to be pulled and displayed on other external websites.

Web 2.0 and Search Engine Optimization 

SEO is a major focus of Web 2.0. It involves the re-structuring of a website to conform to today's search engine specifications, to allow the site to become more easily seen when an internet user searches for a particular subject. Read more about SEO...

Web 2.0 Reader Feedback 

Hopefully you've found this Web 2.0 resource to be helpful...please leave your comments below!

SusanMcPhail

Thanks for the information! I was wondering what Web 2.0 was about and now I know!

Thanks again,
Susan

Posted May 18, 2008

homebizhelp

Wow - this is great information, a lot of which I haven't seen before. I really liked the stuff on web 2 design. Thanks!

Posted April 19, 2008

marieave

Great lens i thank you for it. i will come back and use this info again!

http://www.basketball-layouts.com

Posted March 27, 2008

shy3d

This Web 2.0 lens is excellent! Check out my lenses for cool creative design tips!

Posted February 08, 2008

Music-Resource

Hi Pixelrage (great handle), wonderful web 2.0 lens. I love web 2.0, especially Squidoo. You really put a lot of work into the writing. Thanx for the good read. ~Music Resource~

Posted January 09, 2008

 
1 of 2 pages

Look who made this lens!

Pixelrage

Pixelrage

Finally: Professional Web 2.0 templates for Wordpress Turn Wordpress into a full - fledged magazine-style CMS with Revolution! Also available in Magazine, Sports, Ne...  more

What's here

Save and Share

Report this lens as spam or adult

This lens belongs to

Tags

Stats

LensRank #15,371
Updated more than one week ago
Rated G. You control which lenses you see

Lensroll