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

Web 2.0: A foreword :
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 white space 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.

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.

Looking for examples of great Web 2.0 Design? Try TeamSugar.com, HaveAMint.com, FeedBurner.com .

Web 2.0 Fonts :

Web 2.0 fonts have no definition. They’re classy, techy, plain and simple, but have style. They can be serif or sans-serif – large and bold, or thin and rounded. It’s all in the eye of the beholder!

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.

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.

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 social shopping, and allow the customer to practically run the site. ThisNext and Kaboodle 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, and is rivaled by Google-backed competitor, Jaiku.

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 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 Information Sharing :
Sharing information has always been a huge part of Web 2.0 – in fact, several sites have dedicated themselves to the topic. The most important Web 2.0 info sharing site is arguably answers.Yahoo.com, a site where people can select a broad category and ask any question they want to know about – whether its about fixing an engine part or getting pregnancy advice. Respondents can immediately answer to the best of their ability, and get “points” for participating. Following close to this methodology is Wis.dm, another social information question & answer sharing Web 2.0 service.

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.

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. In essence, people can check on a site’s updates without having to actually visit the site, thanks to the RSS feed (it can be seen as a drop-down list of pages from the browser window, or inserted as an auto-updating list on a website or blog thanks to an applet known as an RSS Feed Aggregator).

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. FriendFeed is a service that lets you collaborate all of your feeds into one big account.

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. The site SlideShare is like the “Youtube” of PowerPoint presentations, for those looking to upload and share a presentation or webinar.

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.

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s