Monday 24th of April 2017 07:18:21 AM

Web 2.0 Real Examples

A third wave of innovation is emerging on the Internet. The key element is interaction of users with information and other users on the Internet. This page links to a collection of exhibits that illustrate some of them.

Web 2.0 -- the ubiquitous platform

Platform? What's a platform? Windows is an example of a "platform". Windows is a foundation that supports a wide range of programs used to accomplish all manner of tasks. Computation, writing, business documentation, home theater, video editing, and accessing the Internet are just a few of them.

The Web is quietly becoming a meta-platform -- something more than just another platform. The Web started as a communication utility. It was pretty much passive and one-way -- just a bunch of Web sites that constitute a giant library. Even email is just point-to-point. It's not a collaborative medium. Web 2.0 has become a catalyst for innovations in interactive computing and communication processes.

In this third wave, the Web is becoming a much more open, dynamic and collaborative place. People are creating work groups and social networks with the Web. Developers have built a whole range of new services on the Web (more about that later), and new ones emerge every day. They are blending Flash, HTML, CSS, Javascript and other technology to create seamless and responsive Web interfaces, which they use to implement these new services. Google makes use of one effective blend called Ajax.

Some see PCs being relegated to the role of running browsers to access the Web. Yes, the Web is indifferent about which operating system (or browser) is used. Any old computer -- Windows machines, Apple machines, Linux machines -- is an adequate gateway to the Web. But's easy to get carried away by the hype.

Web 2.0 is not going to replace PCs as we know them. It's going to extend their power further. The revolution behind Web 2.0 is enabling users to influence and interact with the other players on the Internet. The result is better access to the people, organizations and information that they find important.

Programming the Web

Google is the prime example of how the Web is being "programmed". Google also makes their search and mapping APIs (application programming interface) freely available. The APIs enable non-commercial users to easily find and manipulate information on the Web. [NewsGator API]

Google has several Web 2.0 style services based on those APIs, and there are many examples of how others have put them to work.

Gmail
Google Maps
Where to find cheap gas
Recent visitors to CyberCoyote.org
Our bike ride -- click "Clear points and start over" to make your own
Google Feed Reader
Personalized Google page
More, more, more ...

A Web 2.0 community has been forming over the last several months. This community has the same character as Web 2.0 itself, namely open, networked and interactive. They're involved in things like sustaining the vision, writing standards, resisting hijack attempts, education and providing resources. They're using the Web 2.0 environment to do it.

Web 2.0 API Reference
Tracking Web 2.0
Web 2.0 Workgroup

More Web 2.0 examples

ThinkFree Office Online -- a good conceptual example
Num Sum -- a simple, sharable online spreadsheet system Webnote -- a very simple online note system
Yahoo! email (beta)
eBay
Amazon.com
Rollyo -- roll your own meta-search {Yahoo!}

The conversational Web

Wikipedia -- collaborative editing
Mozilla WiKi -- community example
Steve Rubel -- micro persuasion
The 2-way Web -- TheTwoWayWeb.com
Robert Scoble -- Microsoft blogger
Nobel Intent

Social networking

Social networks are a way to represent how individuals and organizations are related and interconnected. Internet social networks can be a "circle of (online) friends" or a mixed network where personal and business contacts are blended within an online community space. The online space is maintained as a Web service.

Social Network --Wikipedia
Meetup.com
Six Apart -- shared space
Blogs as Social Software
Friendster
Flickr
Google Groups
Orkut

Web feeds

You can find Web feeds for blogs, news, conversations or any other kind of dynamic (changing) online information. To use a feed, you "poll" it to find out what's new, and if you're interested in an item, you go get it. Web feeds are an important part of Web 2.0. They let people choose what they want to be connected to, and who they want to interact with.

Pluck -- browse for feeds using this simple reader
Comic Alert -- my daily dose of comics [alt]
Robert Scoble -- Microsoft geek blogger
More on Web Feeds
NewsGator and Feedster search for feeds
Getting started with Web feeds.

The essence of Web 2.0

More Web 2.0 Examples

periodic table
html editor

XML documents are also naturally committed to a database (relational or object) or any other kind of XML document store. There are commercial products available which allow you to save XML documents to an XML storage layer (which is not a database per se), like Datachannel's XStore and ODI's eXcelon. These XML store solutions are quite expensive ($10,000 to $20,000 range).

XML documents are also quite naturally retrieved from a persistence layer (databases, file systems, XML stores). This lends XML to be used in real world applications where the information being used by different parts of a system is the most important thing.

XML is platform independent, textual information

Information in an XML document is stored in plain-text. This might seem like a restriction if were thinking of embedding binary information in an XML document. There are several advantages to keeping things plain text. First, it is easy to write parsers and all other XML enabling technology on different platforms. Second, it makes everything very interoperable by staying with the lowest common denominator approach. This is the whole reason the web is so successful despite all its flaws. By accepting and sending information in plain text format, programs running on disparate platforms can communicate with each other. This also makes it easy to integrate new programs on top of older ones (without rewriting the old programs), by simply making the interface between the new and old program use XML.

kiko calendar
backbase rss reader
map my run
more

preceding example a little further, suppose that a navigational bar is added to the page. Within this bar, hyperlinks should be yellow, not dark red. If the bar is marked with an ID of navbar, then you need only add this rule:

#navbar A:link {color: yellow;}

This will change the color of hyperlinks within the navigation bar without affecting other hyperlinks throughout the document.

You'll remember that I said the second-simplest rule of horizontal formatting was this: the total of the seven horizontal properties always equals the width of the parent element. At first glance, this can be interpreted to mean that an element can never be wider than its parent's content area -- and as long as all properties are zero or greater, that's quite true. However, consider the following, depicted in Figure 8-19:

DIV {width: 400px; border: 3px solid black}inherit

static

The element's box is generated as normal. Block-level elementsgenerate a rectangular box that is part of the document's flow,and inline-level boxes are generated in the context of one or moreline boxes that are flowed within their parent element.

SPAN {border: 1px dashed black; padding: 4pt;}
Figure 8-58

Figure 8-58. Inline padding and line-box layout

Note that this padding does not alter the actual shape of the content-height, and so will not affect the height of the inline box for this element. Adding borders to an inline element will not affect the way line boxes are generated, as Figure 8-59 illustrates.

Figure 8-59

Figure 8-59. Large inline boxes can overlap many other lines

One can assign margins to nonreplaced inline elements as well, but Internet Explorer 3.x will treat scaling factors as though they were pixel units. Just try to imagine a paragraph with a line-height of 1.5px . It isn't pretty.

Another solution is to set the styles such that lines are no taller than absolutely necessary to hold their content. This is where you might use a line-height of 1.0. This value will multiply itself by every