All posts tagged ‘cool sites’

File Under: Mobile

Microsoft Uses the Web to Showcase New Windows ‘Metro’

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.

File Under: Multimedia, Web Apps

Make Waves with WebGL Demo ‘Water’

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:

Google Transforms Logo into Jules Verne’s ‘Nautilus’

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:

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

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:

File Under: Software & Tools

Wikia Search Launches Wikipedia-Style Search Engine

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: