The Web 2.0 Cheat Sheet

I put this piece together for a technology association newsletter a couple of months ago, and it dawned on me that my blog readers might find it interesting, especially those of you who have to communicate technology trends to clients.
It's ok to admit it: You've seen the phrase "Web 2.0" tossed around so much you're starting to get dizzy and yet you still have no idea what it means. Having done a few long write-ups on Web 2.0 that I'm honestly not sure made the waters any clearer, it dawned on me that what we really need is a Web 2.0 cheat sheet. So, consider this your quick-reference for all things Web 2.0 and, hopefully, your one-stop source for not feeling stupid the next time you're surrounded by geeks.
Web 2.0, The Buzz
When most people say "Web 2.0", they're usually talking about one of two things: (1) social networking, or (2) website development technologies like AJAX. I'll discuss both in more detail below.
Web 2.0, The Facts
Coined by the O'Reilly Group, the phrase "Web 2.0" is really just a way of recognizing that, over the course of the past decade, the internet has changed in fundamental ways. In a nutshell, users are now creating the vast majority of web content, causing a content explosion that requires new technology and new methods of accessing and organizing information.
Web 2.0, The Truth
As a friend astutely observed recently, Web 2.0 is just a phrase we internet people made up because the rest of you kept running away every time we said "dot-com".
Social Networking
In the non-internet world, social networking is a way of studying complex social structures. In the Web 2.0 era, social networking has come to refer to websites that create content through participation. The typical examples are sites like Facebook and MySpace, which allow people to post profiles and personalized content and then connect that information to others with similar interests, creating virtual networks of friends.
Social Bookmarking
Bookmarking was a key feature of Web 1.0, allowing people to store their favorite websites for easy reference. Social bookmarking allows you to share those favorites with other people and build a network to find new websites that interest you.
Tagging/Folksonomy
Activities like social bookmarking require new ways to categorize information, and just like the content itself, that categorization has been left to the users. User-based category structures are sometimes called "folksonomies" and the act of assigning a category to a website or other resource is commonly known as "tagging".
Crowdsourcing
Here's one to pull out when you're with the business types and want to sound cool. The real joy of Web 2.0 for website developers is that users are doing most of their work for them for free. Why build your own content when thousands of teenagers will do it for you? Plus, it's completely legal. We call that "crowdsourcing".
AJAX
This won't help at all, but AJAX stands for Asynchronous Javascript And XML. One of the core problems with web pages is that they're basically static; once they're delivered to you, they can't change much. As people want websites that act more like software and are interactive in real time, those sites need a way to send and receive data on the fly. To grossly oversimplify, that's what AJAX does. It's at the heart of dynamic Web 2.0 applications like Google Maps.
Blogs
In many ways, blogs are really Web 1.0 technology, but they've come into their own in Web 2.0. Blog is just short for web-log, and it started out as simply a form of online journal. Now, tools like Blogger and WordPress make blogging easy, and thousands of blogs are being created daily on a wide variety of topics.
Wikis
In some ways, Wikis are a cross between blogs and social networking. Wikis are collections of content that users can collectively create and edit, making for an ever-evolving work-in-progress. The classic example is the online encyclopedia, Wikipedia.
RSS
Essentially an advanced form of bookmarking, RSS (Really Simple Syndication) feeds allow readers to quickly organize and access snippets of content (blog posts, news articles, etc.). RSS "readers" allow you to follow dozens or even hundreds of syndicated feeds, tracking what you've read and staying on top of what's new.
Wrapping It All Up
Of course, I'm sure I'm missing a few buzzwords, but these basics will put you ahead of the curve. There are thousands of Web 2.0 websites (usually spotted by silly names like Digg, Flickr, and Squidoo), and the best way to understand social networking and the new internet is to give it a test drive. Social networking, in many ways, is the new word-of-mouth, and has become a powerful tool for many small business to project credibility, find prospects, and interact with their market niches. Web 2.0 may seem like a lot of hype, but getting to know the new web can be a rewarding and profitable experience.

Cheat Sheet: Web 2.0

web 2.0? I'm learning to spot a buzzword when I hear one and I think I just have...
Web 2.0 is one of those phrases which we're hearing a lot about currently. Everybody says they're very excited about it but do they really know what it is?
So what is it?
Well, in the simplest terms it's the phrase being applied to 'the second coming' of the internet. Dot-com investors are partying like it's 1999 and a number of pioneering online services are very much keeping that party exciting, getting everybody talking about the internet once more and its increasing relevance to our lives.
Such as?
Well, web 2.0 is a bit of a catch-all which covers a broad range of new online services, user-generated content, communities and social networking tools. The most popular are sites such as Blogger, Flickr, MySpace, YouTube and Wikipedia and the Godfather of web 2.0 - Google. The phrase also refers to the creation of far greater levels of interactivity, not just between users, or between users and the internet but between complementary online services through mash-ups and web services.
So this is all consumer stuff - photo-sharing and the like?
That's where a lot of the energy is coming from and the services doing the early running have absolutely been focused on driving and exploiting end-user trends. However, the idea that the web is 'where it's at' is not lost on big business. For example web 2.0 covers 'software as a service' (SaaS) - companies are being told they no longer have to buy software but instead should access applications online. Many people aren't yet ready to embrace that move but investors and advocates of SaaS are certainly convinced.
Where'd the name come from?
The 2.0 name is a clear allusion to the naming convention of software updates - this is the internet version 2.0, get it? - which is slightly ironic given the revolution taking place in software as a service isn't good news for traditional client/server software.
Why's that?
Well, to quote Marc Benioff, CEO of salesforce.com: "All of the action is in services. Web 2.0 is where the action is." His company has embraced this move whole-heartedly, providing a portal for all manner of web 2.0 applications aimed at the enterprise - including online word processors and spreadsheets (nobody said web 2.0 had to be limited to interesting, fun applications).
Gartner is also convinced web 2.0 should be a major consideration for businesses.
But should I care?
Absolutely you Luddite. Two or three years ago there was a feeling that innovation online had failed to emerge from the doldrums of the dot-com boom and bust cycle and had hit something of a dead end but now innovation is arguably at its most frenetic level ever. Never underestimate the effect the internet can have on our lives and now all we need is a browser and a broadband connection and there's very little we can't do.
Isn't there a danger that mistakes will be repeated? We've been here before, haven't we?
We've certainly, very famously, seen an internet boom before and history has shown us that bust follows boom but there is some bedrock here. Of course there are question marks over how YouTube will make money, for example - because great ideas and even popularity don't pay the bills - and the next stage for the investors will be monetising the excitement that surrounds web 2.0. Not every service which launches under that banner will survive but a great many will, probably though acquisition in a lot of cases.
Acquisition by whom?
Well Google for starters. The internet giant is absolutely at the heart of web 2.0 and the ability to bring many of these services together to create vast interlinked content offerings will certainly appeal. For the enterprise and end-user Google already offers a number of Office-style applications as a hosted offering. The company is also readying the finished version of its hosted email Exchange-offering.
The more, dare we say 'interesting' web 2.0 content will also appeal to Google as it puts ever more flesh on its content bones.

Nokia internet radio

Radio your way

With a choice of Internet or FM radio you can choose from thousands of stations worldwide. Explore the world of radio from your mobile.

A world of Internet radio

Nokia Internet radio brings you radio stations worldwide, easily accessible over GPRS, WLAN or 3G. Using the Station Directory you can search for stations by name, genre, language and location, or search by keyword. Variable download rates offer a quality listening experience whether you're using WIFI or mobile data transfer.

With this application, people using Series40 phones can also have access to the Nokia Internet Radio service and its tens of thousands of stations worldwide. We plan to publish this application to Ovi Store after the beta trial period has ended.

Updated December 14, 2010: An updated release (v.1.0.3) is available for the Nokia X3-02

Features

• Listen to tens of thousands of Internet radio stations
• Search stations by name, genre, language, or location
• Manage your favourites
• Play the Internet radio in background
• Search and purchase music Ovi Music (supported stations only)

Please check out this blog post for the more details.

Note: We recommend that you connect over WLAN or 2G/3G network with a data plan to avoid excessive costs.

To create application on facebook

To create application on facebook


log in to your facebook account,  then go to this link www.facebook.com/developers/createapp.php,
verify your account  then create your application and name it
enjoy!

HOW TO BUILD AND CUSTOMIZE YOUR FACEBOOK FAN PAGE (ON THE CHEAP)

How to Build and Customize Your Facebook Fan Page

In this tutorial I’m going to show you how to build and customize your own

Facebook Fan Pages – FOR FREE! This will save you hundreds of dollars with a

developer.

The tutorial is free. All I ask is that if you like what you read then please connect with

me on Facebook at www.facebook.com/smmcamp - and write something nice on

the page

One of the best features of Facebook is that it opened up its technology to allow third

party developers to develop applications (apps) that work with Facebook.

Personally I’m not into gaming, sending virtual hugs or counting sheep so most

Facebook apps have very little use to me. However, I am into building my business so

I’m very interested in business tools and utilities.

I want to cover a number of business applications that you add to your Fan Page that

will help you build your business.

A quick note – you can’t add applications to Groups. This is one huge advantage that

Fan Pages have over Groups.

Going back to our social media marketing strategy you’ll remember that one of our

great challenges is to get the contact details of our online friends. It will come as little

surprise that my favorite apps focus on getting contact details.

Static FBML

One of the great weaknesses of Facebook is that you’re forced to use their template

profile page. The profile page doesn’t allow you to add html and has no function that

allows you to capture a visitors contact details.

The solution to this is an app called Static FBML.

Static FBML allows you to add html to your Facebook profile. It’s far from perfect

and requires that you know how to add html but it’s an extremely useful tool. Plus

there’s a relatively simple work around for those of you who don’t know html.

The work around for adding html is to either use a free html editor like Sea Monkey

or simply use your WordPress blog. Sea Monkey can be downloaded at

http://www.seamonkey-project.org/.

Personally I just use one of my WordPress blogs.

All you need to do is log in to your WordPress blog, start a new post and write out

what you want to publish. WordPress has a WYSIWYG editor that allows you to add

information just like a Word document and it then automatically converts it to html.

Then simply click on the html view and copy and paste the html directly into the

FBML application.

Basically you build your page in WordPress and then copy and paste the html into

Facebook.

Let me show you how to use WordPress as a makeshift html editor.

Log in to one of your WordPress blogs and click Posts and then click on the Add

Add your content to your post in exactly the same way that you would add content to

your blog. Use the add an image feature and align and format the content.

The next step is the trick to getting the html you need for your Fan Page.

On the right hand side of the post you can change the way you view the post from

Visual to HTML.

Then just copy and paste the code into your Facebook Fan Page.

Adding the Static FBML Application

To find and download a new application you can go to your home page and click on

the Applications link or go to www.facebook.com/applications.

This will take you to the applications home page. At the top of the page is a Search

Applications box.

Search for “Static HTML”.

This will take you to the Static FBML application. Click on the icon.

You can also find the Static FBML application at this address -

http://www.facebook.com/apps/directory.php#!/apps/application.php?id=4949752

878&ref=appd

The next step is to add Static FBML to your Page by clicking on the Add to my Page

link.

You can add Static FBML to all your pages as you’ll see a list of all the pages

connected to your account.

You should add the application to all your pages even if you’re not sure you’ll use the

application with an every page. I’ve already added Static FBML to all but one of my

pages so you won’t see my full list.

All you need to do is click on the Add to Page button and Static FBML will be added

That’s all you need to do to add the application to your Fan Page.

Create a Specific Landing Page for Your Fan Page

One of the cool features about Fan Pages is that you can set up a specific landing

page for people not logged into Facebook to view your page. In particular you can

create a page for the public to see when they first visit your Fan Page. Usually your

Fan Page is defaulted to the Wall so this is a nice tool to improve conversion of

visitors into contacts.

This is important because you can customize the page and encourage people to

become a fan of your Fan Page.

I’m going to use my Real Estate Referrals Fan Page as an example. You can view the

page at www.facebook.com/realestatereferrals.

Your default landing page is set to your Wall. To change the default landing page you

need to click on Settings.

The next step is to change the Default Landing Tab for Everyone Else to the

preferred tab.

Copyright - Ross Hair – The Baldest Man in Real Estate-

Let’s connect on Facebook – http://facebook.com/smmcamp

ross@rosshair.com www.rosshair.com

My target audience is Realtors so I want new people to first see the referral agreement

and hopefully simply fill in their contact details and electronically sign and join the

referral program.

Create a Custom Tab

To create a custom tab you need to click on the Edit Page tab

You will notice that I changed the default landing page to the Referral Agreement. I

uploaded the referral agreement to the www.facebook.com/realestatereferrals page

and included an electronic signature box at the bottom of the referral agreement. The

electronic signature box is a web form from my email management software and

automatically adds all new referral members to my email list.

Here’s how I created the page and added the content, including the email capture

form.

The first step is to create a custom tab and add it to the list of tabs in the Fan Page

navigation toolbar.

Open the Fan Page wall and click on Edit Page.

Now scroll down your page until you see the FBML application.

This creates the Static FBML tab that by default has a header called FBML.

The next step is to change the name of the tab header.

Go back to the FMBL application and click on the Edit tab.

Delete the word FBML from the header box and add the new header name. You can

use a header like Welcome or Listings.

Finally go back to your Fan Page home page and take a look at the tab toolbar at the

top of the page. There’s limited space for tabs so you may need to move your tabs

around and make your new custom page feature more prominently on the toolbar.

You can do this by clicking on the plus sign of dragging the FBML tab into the

toolbar.

In the image above you can see that I’ve called my FBML page Referral Agreement

and I’ve featured it as one of the six visible tabs on the toolbar.

Adding Custom Content to Your Fan Page

Now is the time that you will actually build your custom Fan Page. The page is built

using FBML which is Facebook’s version of HTML. The problem is that you need to

know how to write HTML code to really build a professional looking site. However,

earlier I did show you how to use WordPress as a simple work-around to create

HTML on the fly without having any coding skills.

There’s two ways to do it:

1. Hire a web developer. A US based developer will charge as much as $500 to

custom your Fan Page. You can find much cheaper options offshore by using a

service like www.odesk.com and www.elance.com.

2. Do it yourself. I’m 100% sure that anyone can build their own Fan Page with

just a few coaching tips.

Tips to Building Your Own Fan Page with no HTML Skills

Here’re a number of tips that you can use:

 Mimic and copy your competitors

Search for other real estate sites to see how they have set up their Fan Pages. If

you like what you see then simply copy their format. When I say copy I mean

model your page on their page – don’t literally copy it.

Take a look below at a squeeze page that you can copy from an investor or

Realtor looking for investors to buy rehab properties. This is a squeeze page

that I can simply copy and paste into my Fan Page. I would use a page like this

as a landing page for a real estate investment fan page.

 “Borrow” Generic Graphics

If you see a generic graphic that you like simply right click on the image and

add it to your image file. The internet is built on borrowed generic graphics that

are royalty free and available to be used by anyone.

Note that I’m referring to generic graphics that are now in the public domain.

Please don’t go out and copy graphics that are clearly copyrighted or custom

built. That’s simply not cool.

This technique works very well if you belong to a large real estate company

with a strong online presence. Go to the main corporate site and download the

company logo and other graphics.

In the example above if you’re a Re/Max agent you could simply copy the

Re/Max toolbar and added it to your site. The only drawback is that the

individual links don’t work but you can hyper link the entire banner back to

your blog or website.

You can do exactly the same thing with a search box or a great image of a

house. Here’s the Re/Max property search box. You can’t fill in the fields but

you can link the entire image back to your IDX site.

Now when you add the two graphics together you end up with a custom Search

Listings tab on your Fan Page that looks like this:

Your new “custom” page looks really nice, clean and professional.

It’s also really easy to add a few text links in a top or bottom tool bar, like

Contact Us or About Re/Max North East and hyper link them back to your

website.

Another tip is that when you add a title to the image you should write the title

as an instruction to click on the image. Using the Re/Max example below you

would add a title that says Click now to Search for Listings. When your

visitor hovers over the image the heading will pop up.

You can’t see the instructions on this screenshot but all you need to do is add

the instructions to the title and description of the image.

 Take image snapshots of your other websites using Snagit or Jing (free).

This is a very powerful technique as it allows you to quickly, easily and very

professionally set up your Fan Page. You can create an image of your blog or

website and simply copy and paste it to your Fan Page.

Your page will be a single image but you can link your image back to the

original website that you copied.

This technique is not as good as the original content but it looks very

professional and doesn’t cost a cent.

Let me show you an example. This is a screen shot of the Nest Realty Group

homepage. You can see the original home page at www.nestrealtygroup.com.

HTML5 Video

Many modern websites shows videos. HTML5 provides a standard for showing them.

---

Video on the Web

Until now, there has never been a standard for showing video on a web page.

Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video, with the video element.

---

Video Formats

Currently, there are 3 supported video formats for the video element:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	No	No	No	5.0+	3.0+
WebM	No	No	10.6+	6.0+	No

• Ogg = Ogg files with Theora video codec and Vorbis audio codec
• MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec

---

How It Works

To show a video in HTML5, this is all you need:

<video src="movie.ogg" controls="controls"> </video>

The control attribute is for adding play, pause, and volume controls.

It is also always a good idea to include the width and height attributes.

Insert content between the <video> and </video> tags for browsers that do not support the video element:

Example <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> Try it yourself »

The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.

To make the video work in Safari and future versions of Chrome, we must add a MPEG4 and WebM file.

The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:

Example <video width="320" height="240" controls="controls">   <source src="movie.ogg" type="video/ogg" />   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> Try it yourself »

---

Internet Explorer

Internet Explorer 8 does not support the video element. In IE 9, there will be support for video element using MPEG4.

---

All <video> Attributes

Attribute	Value	Description
audio	muted	Defining the default state of the the audio. Currently, only "muted" is allowed
autoplay	autoplay	If present, then the video will start playing as soon as it is ready
controls	controls	If present, controls will be displayed, such as a play button
height	pixels	Sets the height of the video player
loop	loop	If present, the video will start over again, every time it is finished
poster	url	Specifies the URL of an image representing the video
preload	preload	If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present
src	url	The URL of the video to play
width	pixels	Sets the width of the video player

0:00/0:33

What is HTML5 Video?

HTML5 is a set of web standards being developed by the "Web Hypertext Application Technology Working Group"

The HTML5 standard includes many new features for more dynamic web applications and interfaces. One such component being specified and implemented is the <video> element.

Web 2.0

The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design,^[1] and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them. Examples of Web 2.0 include social networking sites, blogs, wikis,video sharing sites, hosted services, web applications, mashups and folksonomies.

The term is closely associated with Tim O'Reilly because of the O'Reilly Media Web 2.0 conference in late 2003.^[2][3] Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who called the term a "piece of jargon",^[4] precisely because he intended the Web in his vision as "a collaborative medium, a place where we [could] all meet and read and write". He called it the "Read/Write Web".^[5]

HTML5

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of theHTML standard (originally created in 1990) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web is a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a singlemarkup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications.^[1]

In particular, HTML5 adds many new syntactical features. These include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header>, and <nav>, are designed to enrich thesemantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification.^[1] HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents.^[2]

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000.^[3] In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.^[4]

Even though HTML5 has been well-known among web developers for years, it became the topic of mainstream media in April 2010^[5][6][7][8] after Apple Inc's CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that with the development of HTML5, Adobe Flash is no longer necessary to watch video or consume any kind of web content.^[9] This sparked a debate in web development circles where some suggested that while HTML5 provides enhanced functionality developers must consider the varying browser support of the different parts of the standard as well as otherfunctionality differences between HTML5 and Flash.^[10]