Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Prototype’

Marvel is a free, web-based tool for creating prototypes for any device: desktop, tablet, mobile and more.

The app works by synchronizing with your Dropbox account which simplifies updates (as local file updates are instantly reflected to the Marvel-powered prototypes).

It accepts both images + PSDs and prototypes can be shared with unique URLs, SMS or QR codes.

Marvel Prototyping App

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.

Indigo Studio

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.

Framer

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.

Ratchet

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 Framework

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.

Scripty2

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.

Multilevel Hover Menu

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.

JSXGraph - JavaScript Charts

A graphic can be created via:

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

JavaScript Form Validation

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.

Prototype JSON Image Gallery

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().

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com