Indigo Studio is a free tool for quickly creating prototypes of web, mobile or desktop apps.

The application works on both Windows + Mac OS X and not only capable of generating static outputs but also supports interactions (links, animations, etc.).

Usually, prototypes can look plain and customers can have difficulty in imagining how things would look in real life. Indigo Studio solves this by providing lots of storyboard scenes with people, places and various devices to create a more realistic look.

It is also possible to import hand-drawn sketches into the application and adding interactivity to them.

Indigo Studio is a pro quality yet free application and only requires a free membership to the site.

Framer is an open source framework for easily building and testing complex interactions + rich animations for desktop and mobile layouts.

It is built with web technologies and works by simply editing a JavaScript file with the functions provided.

The layouts created are structured with views (like layers), there are animations provided and everything can be styled with either JavaScript or CSS.

And, for the interactions, there are events to the rescue (like click, dblclick, mouseover, mouseout, keydown or touch events).

Ratchet is an open source toolkit for easily prototyping iPhone apps using web technologies (HTML, CSS and JavaScript).

It has lots of iOS-looking components like buttons, forms, bars, lists, toggles, sliders, etc. that can be inserted to the prototypes with few lines of code.

The download package is just the template files and the components library. Creating layouts is very easy and their look can be customized with CSS.

Ratchet is very well-documented and has lots of new features to arrive in the future.

EZ-CSS is a lightweight (only 1kb) CSS framework for easily creating table-less layouts.

The framework enables you to create multiple columns of any width, with or without gutters of any width.

EZ-CSS is very flexible:

• each module or layout contains a width-less container which prevents rounding issues or rounding errors.
• it creates self-clearing containers which means every box will contain floats.

As EZ-CSS has a very small footprint, it can be fully inserted into any stylesheet or a style element which would make it compatible with every other CSS framework too.

Script.aculo.us is the most widely used add-on for the Prototype JavaScript Framework with the features like animations, drag'n drop, Ajax control & more.

Its second version, renamed as Scripty2, is out with a complete rewrite. It is lightweight (5kb compressed), flexible & works faster.

The library is currently in alpha status & there are still parts that need to be developed or improved. On the other hand, it is very promising & already being used by several big projects.

And, besides the Scripty2 homepage itself, the demos show how it will be empowering Prototype JS.

ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.

The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.

The hover class used & delay effect of the menus can be customized with ease.

It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.

For demos with various number of of levels & delay effects, click here.

JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser.

It is implemented totally in JavaScript and uses SVG and VML.

A graphic can be created via:

• 100% JavaScript
• a GEONExT file (or string)
• an Inteorgeo file

It supports many, basic to advanced, mathematical functions that make creating complex visualizations easier.

P.S. JSXGraph requires Prototype JS library to run.

JSValidate is a free library for validating forms that requires Prototype & Script.aculo.us to run.

Some rules it supports are:

• Required field
• Only numbers
• Only letters
• E-mail
• Credit card number format
• US zip code, phone number & state code formats

It works by simply updating class tags of forms with the related rule information.

It lets you define in which tag & class the errors will be displayed & some more.

There is also a jQuery port on the way, named JValidate, which is not out yet but will be sharing at WRD for sure when it is published.

Ferdinand.Slider is a Prototype extension for creating simple image slideshows.

It uses a JSON file at any location as the data source which makes it possible to integrate with Flickr or similar services easily.

The extension has several options to set:

• duration of effects
• duration of image transition
• opacity
• background
• prev-next buttons & more.

It is also possible to add more features (like a menu) to the slider as it can be controlled from outside with commands like slider.Next(), slider.Prev().

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

• Drag’n drops
• Animations
• CSS manipulations, Ajax & more.

And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.

For any developer looking for advanced JS techniques, games are a real treasure.
 

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.

Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).

So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.

Bunny Hunt

A classic hunting game with an easy to play interface.

Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.

JavaScript Library: none.

Travians

A character game (like Sims) where you’re a villager.

It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.

JavaScript Library: xajax.

Digg Attack

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.

All the images are rendered with Canvas in real-time.

JavaScript Library: none.

Read the rest of this entry »