The Web, was another killer invension. Some new technologies that recently came out promise to re-invent the web and we will make an effort to showcase them here. We will also try to imagine some supporting products that these technologies might produce.

Select * from internet with YQL

One of the most promising technologies out there, is Yahoo’s YQL. Many people including me, believe that this platform is the next big thing. You can do thousand of diferrent things with YQL in so many diferrent areas that the moto is really “select * from internet”. The philosofy behind YQL is that anyone can make his data available for everyone in a specific way, so specific that someone who wants to access these data, should just use an SQL-syntax like language to get do it.

So YQL turns the web into a monsterous database waiting there for us to query it. How is this possible? Each web service should produce a datatable with a specific format, which then other people can use to extract, insert or update data. We see hundreds of community tables available in the YQL console.

In what way could YQL change the web? What if you used YQL to create a hotel booking site? Hotels could create datatables that would make hotels reservations, available rooms and pricing info available. Then we could do a YQL statement like this to get available rooms in San Fransisco:

SELECT * FROM hotels.rooms.sf WHERE room=open

The above example is fictional. YQL could be used in any way you would use a typical SQL database. Our article about how to use yql to manage your meme account will get you into it even faster.

Take the web back with Opera Unite

Opera Unite is able to turn your browser (Opera) into a web server. This means you can share content directly with friends without having to upload anything to a Web site. Opera Unite is a Web server running inside the Opera Web browser, allowing the user to install applications and share these applications with their friends and colleagues (or everyone, if they wish). The Opera Unite server provides a proxy between the server and its clients (found at operaunite.com) to avoid the need for any special firewall configuration.

So in other words, you run your own hosting service. You can use standard techniques like JavaScript and HTML to create applications and then publish them for the world to see right from your own browser. There are already a some applications that utilize the Opera Unite API and my favorite one is Twicli.

Most of the Opera Unite use cases could be for social networking but it could be used as a collaboration tool too.

Collaborate with Google Wave

Google Wave is an online tool for real-time communication and collaboration. A wave can be both a conversation and a document where people can discuss and work together using richly formatted text, photos, videos, maps, and more. With Google wave the possibilities are endless since the wave API allows you to build anything you want.

Google Wave supports robots, gadgets,extensions and embeding that makes it so powerful for online collaboration that any other tool could be. We recently posted a tutorial on how to create a feed reader extension for Google Wave too.

Recently there was a post in the ReadWriteWeb blog with a use case of Google Wave for artists and Filmmaking and everyday there are new ideas on how Wave could be used.

Re-inventing RSS with PubSubHubBub

Except it’s strange name, this protocol promises to deliver updates from feeds without polling. So it basically allows us to be informed if our favorite blog has updated news without the need to reload this blog’s feed. It uses this flow (taken from Scripting.com):

1. Any feed that wants to participate in this network must add a bit to the feed that indicates which ping server is handling notifications on its behalf. There can be more than one.
2. When a subscribing application initially parses the feed and notices this bit, it sends a notification to each server saying “I want to be notified when this feed updates”.
3. When the feed updates, it pings each of the servers it has registered with saying “I have updated”.
4. The server then pings each of the subscribers saying “He updated”.

At Scripting.com they say that this protocol could be used to create a Twitter-like service without Twitter’s limitations of 140 chars or hashtags. We thought of another use also.

What about creating a REAL real-time search engine that would update it’s index anytime a feed is updated? This way, we could have a search engine that will be able to show the latest news in seconds after the news got published.

HTML5

The new HTML specification is here and it brings marvelous new features to use. Canvas, Video, Audio and Drag n Drop are some of it’s features that will surely change the way we surf the net. One of it’s coolest features is the ability to cache web applications and use them offline. It is not weird that technologies like Google Wave depend on HTML5 to exist.

Apart from being the tool to create revolutionary applications and services, HTML5 is itself a revolution. Many browser players are contributing to the creation of the draft (Apple, Microsoft, Mozilla and Opera), each from his own point of view and interest but they all try to make this a great new era for the web.

The CSS Filter Property

Internet Explorer supports a filter:command style CSS property that can add some style to HTML elements on your pages. For example you can create a fade effect on any block element on your pages with:

ELEMENT {filter: Chroma(Color=#C1DEFF) Alpha(Opacity=200, FinishOpacity=0, Style=2, StartX=gradient start X position, StartY=gradient starting Y position, FinishX=gradient finishing X position, FinishY=gradient finishing Y position)
}

where “ELEMENT” is any block element. You can use the above code to transform this image:

to something like this:

You can also create gradient div elements with the same trick. Another great method of the filter property is “filter:gray” which, when used on images, the images will be gray-scaled. So by doing this:

img{
filter:gray;
}

will display the image like this:

while by using the “filter:fliph” or “filter:flipv” methods, the images will be flipped horizontally and vertically accordingly. The next cool filter method is “filter:invert” which when used on images, would display the image like this:

Another image transformation can be achieved with “filter:wave“. You might have guessed what this method does but if you didn’t, put this code in your page:

img{
filter:wave(Strength=5,lightstrength=15)
}

and you should get an image with a wave effect like this:

A method similar to the “filter:invert” method is “filter:xray” which produces the following effect:

wait.. There’s some more.

You can pixelate any image with this code:

img{
 filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=6)
}

eg:

add some blur with “filter:blur(strength=VALUE)“:

img{
blur(Strength="50")
}

or add some glowing effects to some text and keep the text selectable as shown here:

with this code:

p{
filter: glow(Color="#000eee",Strength="6");
 width:200px;
 font-size:30px;
}

and adding shadows to text can be done with this code:

p{
filter: dropShadow(color="#ddd0d0",offX="2",offY="2");
 width:200px;
 font-size:40px;
}

The result is not 100% what we expected though since the transformation sharpens our text:

The MSDN site has a lot of info about the filter property and some other IE specific CSS properties in case you are interested in it.

We do not advise you to use any of these CSS properties on your pages here. We are just trying to show that some of these properties could be added to other browsers too, since most of them have to do with presentation and style. For example why use a heavy JS library to add some effects like fade or gray-scale when you can do it with 1 line of text?

For flame lovers:

We use Opera (70%) and FireFox (30%). So, no IE lovers here…

The Google Chrome Experiments page is a showcase of cool experiments for both JavaScript and web browsers created by designers around the world. This place has more than interesting experiments. Ideas and some of tomorrow’s “killer apps” might reside there waiting for someone to use them or be inspired by them.

The most noticable experiments in my opinion are (Tested on Firefox3.5 , Opera10, Google Chrome and Internet Explorer6):

Your World of Text (by Andrew Badr)

From the author:
Your World of Text is an infinite grid of text editable by any visitor. The changes made by other people appear on your screen as they happen. Everyone starts in the same place, but you can scroll through the world using your mouse.
Technology:
Django and jQuery (on App Engine)

The most interesting is that whatever you type, stays there for ever, untill someone writes on top of your message. Runs smoothly on :

• Chrome
• Firefox
• Opera

Internet Explorer has some issues.

Idea on how it can be used: What if someone created a social service based on this experiment?

Javascript 3D Model Viewer (by Jacob Seidelin)

From the Author:
Javascript 3d Model Viewer is an experiment realyzed with javascript and canvas element (HTML 5).
It’s possible to view 3d models (dinosaur, ship, helicopter), rotate them, change color and transparency and add a motion blur effect.
Technology:
Javascript, Canvas (HTML 5)

Awesome for showcasing some of your 3D work. Runs great on :

• Chrome
• Opera

It is very slow on Firefox and guess what… It does not run on IE.

Idea on how it can be used: Displaying 3d sketches from within your pages.

Canvas Sketch (by Henrique Moreira)

From the Author:
Web-based drawing app using Canvas Tag.
Works on Chrome, IE6+, Firefox 2+, Opera 9+ and Safari.
Components: Pencil, Eraser, Line, Rectangle, Ellipse, Flood Fill, Color Picker and Undo.
Save as PNG, GIF or JPG.
Technology:
Javascript, Canvas, VML and PHP

Idea on how it can be used: Obvious. An online painting app.

JuicyDrop (by Jacob Seidelin)

From the Author:
A limited JavaScript/canvas port of the WinAmp music visualization plugin MilkDrop. More details at: http://blog.nihilogic.dk/2009/03/javascript-canvas-sm2-milkdrop.html
Technology:
JavaScript, Canvas, SoundManager2

This is one of my favorites. It supports visualizations too. No it is not Winamp. It is JuicyDrop. Runs on Chrome and Firefox. Even if Opera renders it nice, it was not able to play any song.

Idea on how it can be used: Some music on demand services might find a great way to promote their service by using this one.

BoomBox (by Scott Andreas)

From the Author:
Boombox is a web-based media player with a three-channel equalizer. The volume of each channel is controlled by resizing the respective windows.
Technology:
Prototype and Flash

This is my second favorite. Runs great on :

• Chrome
• Firefox
• Opera (Faster than all other browsers!!!)

Again Internet Explorer fails to render the experiment. Although the music plays ok and the browser windows render nice, you can’t resize them to get the experiment’s result.

Idea on how it can be used: As with the JuicyDrop experiment, the BoomBox can be used by a music on demand service to attract more users.

Browser Ball (by Mark Mahoney)

From the Author:
Open new windows. Throw a beach ball through them. If I tell you it’s less lame than it sounds, will you give it a shot?
Technology:
JavaScript, the canvas tag

A very amussing experiment. The ball bounces through the open windows.Runs on Chrome, Opera and Firefox.

Idea on how it can be used: Can we make animations that occupy more than one browser window?

Ball Pool (by Mr.doob)

From the Author:
Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click).
It’s like the old days once again! :)
Technology:
javascript, canvas, box2d-js

Just awesome. Runs great on Opera, Firefox and Chrome.

Idea on how it can be used: Left as a challenge for you. I have one idea and it will be posted on a feature article here.