Cut The Rope: An Addictive HTML5 Game

Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable.  let’s make this great game available to an even bigger audience by offering it on the web using the power of HTML5.

To do this, Microsoft’s Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: www.cuttherope.ie.

The developers also provide an interesting case study on how the game was ported from Objective-C to HTML5. In fact, the browser version contains about 15,000 lines of code. Now that’s an effort worth our appreciation! (cc)

 

HTML5 Please

Use the new and shiny responsibly.

With all the excitement surrounding new HTML5 and CSS3 features, perhaps we sometimes overlook the problems some of them might introduce as well. HTML5 Please is a resource that offers us the collective knowledge of professional developers who have worked deep in the trenches of HTML5.

JQUERY COLLAPSE

A lightweight jQuery plugin that enables expanding and collapsing content.

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

Source by: http://webcloud.se/code/jQuery-Collapse/

 

Related articles

JavaScript Pattern Collection

A JavaScript pattern and antipattern code collection that covers function patterns, jQuery patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns (upcoming), code reuse patterns (upcoming), DOM and browser patterns (upcoming).

Source by: http://shichuan.github.com/javascript-patterns/

Presentations In The Browser: Visualize And Think Big

The days of boring presentations are over. Now, even your browser can get in on the game. Classic slide decks are limited, but you needn’t be restricted to them. Impress.js uses the power of CSS3 transforms and transitions that are supported by modern browsers.

With this library, you can position, rotate and scale as much as you like, even in 3-D. At this point, Impress.js isn’t quite supported on mobile, but if the user’s browser isn’t smart enough to display transitions or animations, Impress.js will provide a simple PDF-like slide deck. Bartek Szopka has done a great job of exploiting the possibilites of current technologies. And if you have ideas to further improve the script, then get started right away: it’s published under an MIT license. But remember: no tool will help you if you have nothing interesting to say! (sp)

The contenteditable attribute

For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with the contenteditable attribute, things have got a whole lot easier. In this article, HTML5Doctor is saying what is this attribute is for, how it works, and how we can take things further.

Read the full article at : http://html5doctor.com

23 Useful Online HTML5 Tools

via 23 Useful Online HTML5 Tools – DesignModo.

Are you aware that HTML5 is captivating the web by leaps and bounds? This new language is used for displaying the content on net. One can also add in audios, videos, various fonts, web graphics, drag and drop, animations to make your pages more colorful and informative. It is simply a renewed and much better version of the XHML1 or HTML4 and is also compatible to those versions.

The online sprite tool box compresses your image and puts your image in a sprite. This compression will definitely increase the speed of your images and the time of loading. The 3D sketch tool makes use of HTML Canvas for creating a 3D drawing. This is done by holding down the SPACE bar and then dragging it horizontally with the cursor. Drawing dashed lines and making the drawing to vibrate can be easily done with this. The velocity sketch tool is an exceptional online drawing tool from HTML5. One can make strange web things with this tool. Designers are sure to make some new and creative innovations out of this. The font testing tool is really good when you want to see web pages with a new font keeping. You can do this by taking font.ttf files to the top of the toolbar to appear in the list.

The pattern generator tool is good for web designers to make header backgrounds and pages. There are numerous options for you to choose from and is also easy to use. The X-Ray tool lets you see the particulars of pages of any webpage. This can be done by dragging the bookmark let on their site to your bookmarks. You can investigate by visiting the webpage, then click X-ray book mark and then your desired element. Automation plays well on various mobile or smart phones because it is based totally on HTML5 with no flash used.

The online HTML5 audio maker tool brings in new features of the audio. With this the use of audio power will increase in websites. A similar online HTML5 video maker tool has been launched to increase the use of video for different websites. There are also various powerful animation tools for working online as well as offline. Some of the latest versions of online tools are not well-known to web designers. The above tools are noteworthy for their creativity and informativeness.