All posts tagged ‘cool sites’

File Under: search, Web Basics
Jan
19
2012

See the World Through the Eyes of Google Images

By

Dutch artist Sebastien Schmieg has elevated the Google Image search from its humble intent, creating a short film that strings together a series of image searches. The result oscillates between the prosaic and profound, and feels more like a grand homage to humanity than a collection of random images.

To create the image sequence Schmieg fed a single transparent PNG into Google Images and used the “visually similar” feature to recursively loop through the results. Schmieg’s movie of the results, entitled Search by Image, Recursively, Transparent PNG, #1, is a (slightly NSFW) truly hypnotic, algorithmic tour of life as Google Images knows it.

In all there are some 2,951 images in the video. The “visually similar” option in Google Image Search tends to get stuck in loops using it the way Schmieg did so if an image had already been used in the sequence, he would skip to the next image in the results. But otherwise the sequence is entirely algorithmic. Beware pareidolia.

For more info about the movie and some other, similar efforts, be sure to check out Schmieg’s website.

Tags:
File Under: Humor, Visual Design
Dec
9
2011

Forget New Twitter. Check Out Old Facebook

By

1997 called. Your CRT is ready.

The tech press is abuzz, debating the merits and failures of the new (new new?) Twitter web and mobile designs.

If you’re like most, you aren’t even seeing Twitter’s new website just yet, so if you’d like to contemplate something a bit more fun on a Friday morning, consider what Twitter might have looked like had it been around in 1997.

You might remember 1997, the heady early days of web design — 1-pixel spacer images, animated gifs, tables with gray borders and a magical new idea called “cascading stylesheets.”

How would Twitter have looked in that world? We’ll never know, but thanks to a new art project dubbed “Once Upon” you can see what Facebook, YouTube and Google+ might have looked like had they been around in 1997. Once Upon was created by artists Olia Lialina and Dragan Espenschied, who describe the project as “three important contemporary web sites recreated with the technology and spirit of late 1997, according to our memories.”

That’s right, Facebook, YouTube and Google+ redesigned in the spirit and look of 1997. As an added bonus the demo site has been set up to limit bandwidth at a 1997-esque 8 kB/s so it loads just as painfully slow as it would have on dialup.

Naturally all three sites are “best viewed with Netscape Navigator 4.03 and a screen resolution of 1024×768 pixels, running under Windows 95″ (that resolution actually seems a bit large for 1997, but that’s okay). If you can’t find a Windows 95 machine in the closet fear not, the demo site will work in any web browser that supports frames.

[via Today and Tomorrow]

Tags:
File Under: Mobile
Dec
2
2011

Microsoft Uses the Web to Showcase New Windows ‘Metro’

By

Windows Phone on an iPhone

As part of its effort to win over iOS and Android fans, Microsoft has created a very slick web-based demo of its new Windows Phone operating system.

Designed to run in your iPhone or Android web browser, the site effectively replicates the company’s new “Metro” user interface in HTML. The demo is a clever effort to show people what the Metro UI looks like without the need to set foot in a store.

If you’re curious, head over to the demo site. (Note that the site primarily works with mobile devices, though it will load in the desktop version of Chrome as well.)

A number of news outlets have called the site an “HTML5 demo,” which is technically true, though aside from the doctype the site doesn’t use many of the new features found in HTML5. Mainly what you’ll find under the hood is some JavaScript hooking into various WebKit CSS animation features (since the target audience is iOS and Android browsers, limiting the demo to WebKit browsers seems like a fair decision).

HTML5 hype aside, the site makes a nice demo Windows Phone and an impressive use of web tools to recreate a native OS interface.

Tags:
File Under: Multimedia, Web Apps
Aug
15
2011

Make Waves with WebGL Demo ‘Water’

By

WebGL Water Running in Chromium 14Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also:

Tags: ,
File Under: CSS, Visual Design, Web Standards
Feb
8
2011

Google Transforms Logo into Jules Verne’s ‘Nautilus’

By

Google is celebrating Jules Verne’s birthday with a logo that pays homage to the author’s famous 20,000 Leagues Under the Sea. The doodle, which marks Verne’s 183rd birthday, transforms the usual Google letters into submarine portals looking out at the sea.

The effect was created using the powerful transform tools in CSS 3 to layer together an animated diving sequence using nothing more than standard HTML and a few transparent images. If you’ve got a device with an accelerometer built-in (any iOS device, recent Macbook or Android device), you can even control the doodle just by tilting down to dive or side to side to move forward and back.

If you’re on a desktop or don’t have an accelerometer in your laptop, you can steer the Nautilus with a control stick. While the doodle worked in most browsers, it’s smoothest and fastest in Google Chrome and Firefox 4 beta.

Other Google doodles have used HTML5′s canvas element, along with some CSS 3, to create the bouncing balls experiment and the awesome, playable version of Pac-Man.

See Also:

Tags: ,
File Under: CSS, HTML5, JavaScript, Visual Design
Jan
5
2011

Cool Sites: Nike’s ‘Better World’ Site Embraces HTML5

By

You might think, given the varying browser support, that no one is using HTML5 yet. But you’re wrong. HTML5 is everywhere you look. Even Nike, which has a history of Flash websites, recently turned to HTML5 to build its new “Better World” website.

The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has received quite a bit of attention in the design community for its unique interface and fancy animations.

It also makes a great lesson in how you can use — and, sadly, now you should not use — HTML5 today.

One of the best ways Better World uses HTML5 is the awesome, and often overlooked, data- attribute. If you’ve ever used a title attribute to pass some data to JavaScript, well, the data- attribute is your new friend. HTML5′s custom data attributes allow you to write semantically valid HTML while, simultaneously, embedding data within the page.

On the Nike site, attributes like data-controller and data-scrolloffset pass information to the JavaScript scrolling function without mucking up the semantics of the page.

The best thing about the data- attribute is that you can define your own syntax — just prefix your attributes with data-. For a great overview of the new data syntax and how you can use it, check out JavaScript guru John Resig’s overview of the data- attribute.

However, impressive as the Nike site is, it also gets some things wrong. While Better World uses many of the new HTML5 tags — like article, section, header, footer and canvas — it isn’t always using them properly.

The prime offender is the ever-confusing section tag, which is scattered about the site somewhat haphazardly. Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, the answer is often no. In most cases the code would be improved by simply using a div tag.

Despite all the cool new semantically meaningful tags, remember that there’s nothing wrong with good old div. In fact, that’s one of the things it’s for — elements that don’t have semantic value.

Nitpicking aside, the Nike site is great example of a big company pushing the envelope with HTML5. Our only real complaint is that Nike is still relying on Flash for video — ironic considering that HTML5 video is one of the more common examples of HTML5 on the web today.

See Also:

Tags: , ,
File Under: Software & Tools
Jun
3
2008

Wikia Search Launches Wikipedia-Style Search Engine

By

WikiaBack when Wikia Search first unveiled its alpha preview, we found it wanting. On Tuesday, the site was relaunched, and not only has its index expanded, but the community editing tools are live and ready for your input.

The basic idea behind Wikia Search is to take the Wikipedia community model and apply it to the search engine. Searchers can edit, add, remove, re-order, rate, annotate, and comment on the search results.

The site’s new Ajax interface allows you to drag results up and down the page and you can edit the title or description of a result using a nice edit-in-place interface.

The index itself is up to 30 million pages, which obviously is nowhere near the big search engines. But even Wikipedia was once just a single page, and look where that’s gone. Of course, it remains to be seen whether the same sort of community interest will develop around the search engine, but with the involvement of Wikipedia’s founders and Jabber creator Jeremie Miller, it has some momentum. PCWorld has an overview of the project’s recent enhancements.

If you missed out on the early days of Wikipedia, here’s your chance to get in on the ground floor of a growing community. With the editing features in place you can help Wikia Search become more effective and share your best results with everyone else.

However, the community-driven aspect also opens Wikia search to spam and abuse, so it will interesting to see how effective the community is in policing and removing spam.

While it’s too early to replace Google for the serious search engine user, Wikia Search is definitely one to keep an eye on.

See Also:

Tags: ,
File Under: Web Basics
May
27
2008

Video: Visualizing How Your Browser Sees the Web

By

Ever wondered what a web page looks like to a browser? When a browser renders a page it parses through all the HTML, CSS and JavaScript commands at lightning speed to display the pages you see, but slowing it all down offers a fascinating look at how a browser “thinks.”

The video above show how Mozilla’s reflow tool works. For the unfamiliar, here’s how Mozilla explains the reflow process:

Reflow is the process by which the geometry of the layout engine’s formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it.

Sounds rather dry and boring, which is what makes the video visualization even more amazing.

The videos were highlighted by blogger Doug T, who discovered them on Google video. The videos are part of a talk at the recent Mozilla 24 event in Tokyo. A series of videos from the talk are available as well (in Japanese). There’s also a few more visualization videos available as well.

A commenter on the original post also points out Matthew Buchanan’s TimeLapse CSS tool, which uses JavaScript to slowdown page rendering and show how page elements fall into place.

Although it may not be technically possible, the visualizations would make for a great Firefox add-on.

[via Google Blogoscoped]

See Also:

Tags: ,
File Under: Other
May
14
2008

Just Can’t Get Enough of Addict-o-matic Search

By

Addictomatic1

Back in high school, whenever we wanted to know what the cool kids were smoking, all we’d have to do is go out behind the hockey bleachers and take a whiff. We did that today and here’s what we found: Addict-o-matic, a new multi-search site that invites you to "Inhale the Web."

The concept is simple — it’s a bunch of little boxes, and each one searches a specific site for the term you enter into the search box at the top of the page.  It pings all of the most popular news, video, photo and bookmarking sites, plus blog search engines and the like. From Google News and Flickr down to Summize and Tweetscan. Try your favorite band or TV show. Topic searches can be passed around with simple, human-readable URLs.

Continue Reading “Just Can’t Get Enough of Addict-o-matic Search” »

Tags:
File Under: Other
May
13
2008

Get Your Animating Fix at Obsessing.org

By

obessing.jpg

Obsessing.org is a new online dev tool for those that would like to play round with the Processing drawing and animation language. The site is still in a very alpha state and lacks features like the ability to save your work, but the live demo feature is very cool.

If you were impressed by the processing.js library we mentioned last week, which allows you to interact with Processing using JavaScript, Obsessing is right up your alley. In fact, that site uses the processing.js script behind the scenes.

Obsessing is a two part site, a text editor where you can write your script and then a live preview of your script in action. As with the Processing JavaScript library, you’ll need to have Firefox 3 in order to run the scripts (Safari support is about half complete).

Continue Reading “Get Your Animating Fix at Obsessing.org” »

Tags:
« OLDER POSTS