ColoRotate is a free online service that has some similarities to Adobe Kuler, but is different in that it's in 3D. Users can browse color palettes, create new palettes, and share palettes with others in the ColoRotate community.
Using ColoRotate 3D interface, you can quickly see the multidimensional nature of your colors and the relationships between colors in a way that matches how your eye and brain perceive color and change your colors one at a time, blend two colors together, or transform a full palette of colors all at once with contrast and color joysticks — adjustments that previously have been beyond your reach. With ColoRotate’s quick drag-and-drop you can adjust hue, brightness, and saturation. Import and export in Adobe Swatch Exchange (ASE). Soon, you’ll be able to save even more time with a Photoshop Plugin.
You can also post on-line your palettes, and tag palettes to engage with the ColoRotate community, or discussions. In the future, look for features like comments and ratings.
ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs. In the process, you can uncover color relationships that give your designs an aesthetic balance that will please the most discriminating eye.
Using ColoRotate 3D interface, you can quickly see the multidimensional nature of your colors and the relationships between colors in a way that matches how your eye and brain perceive color and change your colors one at a time, blend two colors together, or transform a full palette of colors all at once with contrast and color joysticks — adjustments that previously have been beyond your reach. With ColoRotate’s quick drag-and-drop you can adjust hue, brightness, and saturation. Import and export in Adobe Swatch Exchange (ASE). Soon, you’ll be able to save even more time with a Photoshop Plugin.
You can also post on-line your palettes, and tag palettes to engage with the ColoRotate community, or discussions. In the future, look for features like comments and ratings.
ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs. In the process, you can uncover color relationships that give your designs an aesthetic balance that will please the most discriminating eye.
Related Content
- Best resources on-line for color schemes generatorsIn the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.
Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, ...):
But how I said, this tutorial is for Ajax/jQuery/PHP beginners. So I decided to simplify the original Wall using just a single information: the message content.
In this tutorial we have these files:
- confing.php (database connection parameters)How the Wall works?
- index.php
- insert.php
- jquery.js
index.php contains a form with id "submit_form" with an input text with id "message_wall". When an user submits a new message. Then the new message is appends to top of the ul list with id "wall" with a nice fade-in effect (with jQuery). Ok, now take a look at the code.
1. index.php
index.php is very simple and contains just simple HTML code:
<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>
The <ul> list with id "wall" is the "container" of messages which are posted into the wall.
2. JavaScript Code
Open index.php and include jQuery in the <head> tag of the page:
<script type="text/javascript" src="jquery/jquery.js"> </script>
...then add this simple function to enable Ajax functionalities to insert the message posted from the user into a database table without reload the page:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("form#submit_wall").submit(function() {
var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
.prepend(...) is a jQuery function to insert elements inside, at the beginning, of a specific element (in this case UL list with id wall -->$("ul#wall")). When the new message is added into the list is hidden (display:none). Then it appears with a fade-in effect:
$("ul#wall li:first").fadeIn();
ul#wall:first: gets the first li element (the last added) into the ul list with id "#wall".
3. insert.php
insert.php contains some lines of PHP code to insert the new message into a database table. In this example I created a table WALL with just one attribute "message". PHP code is very simple:
<?php
if(isset($_POST['message_wall'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>
if(isset($_POST['message_wall'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>
That's all! Download the source code ready to use in your web projects.
Add a comment for questions or suggestions, thanks!
I like Adobe AIR. With AIR you can develope rich internet applications that run outside the browser on multiple operating systems. In this post I want to share with you some really interesting Adobe AIR applications for web lovers: this list includes some social-network clients, developer tools, and mashup applications.
1. TIME 100 desktop application
TIME 100 allows you to access to the complete archive of past and present honorees on the TIME 100 annual list of the “World's Most Influential People”.
I think it's one of the most interesting applications actually in circulation. Take it a look!
2. DestroyTwitter
DestroyTwitter is a robust but compact Twitter application built on the Adobe AIR platform. It consists of a series of canvases that constantly update to keep tweets current and up-to-date using notifications that appear immediately after a new tweet arrives.
DestroyTwitter also features complete direct messaging functionality. Messages and tweets can be replied to with the original visible for quick and easy reference. A search function is also available to track anything that's being talked about.
3. Feedalizr
Feedalizr is a social media desktop client that keeps track of updates from friendfeed, twitter, facebook, Flickr, Twitpic & jaiku. It offers full support for these services so that users can interact, i.e. comment, like, favorite, tweet, reply etc. and their updates are instantly reflected on the services website and added to their stream.
4. Skimmer
Skimmer is an Adobe AIR desktop application designed to streamline, beautify, and enhance the experience of participating in your most frequently used social networking activities.
It improves upon your day-to-day interaction with multiple social networks, removing distractions and providing a rich experience that is particularly suited to multimedia content.
5. Icon Generator
Icon Generator is a little application that lets you generate a CS3 or Web 2.0 style icon, only 3 step. Pick color, type characters, and save it. Just create 4 different sizes of the icon.
6. Kuler Desktop
Kuler is an online application to create and share color harmonies. With this AIR application you can search and import Kuler themes directly into Creative Suite 3 Illustrator, InDesign, and Photoshop.
You can also view the highest tated, most popular, newest, and randomly selected themes. Drag and drop themes as transparent "tear offs," to scale and view over any application.
7. Lita
Lita is an administration interface for SQLite databases. It lets you edit your databases structure and data in a dedicated environment.
With Lita you can open, create, compact databases; create, rename, delete, and empty tables; Easily run, import and export your custom SQL statements.
8. Bookmash
Bookmash is a mashup application which allows you to find quickly videos, music, photos, people and news on line.
Any suggestions about other interesting AIR applications? Please leave a comment!
1. TIME 100 desktop application
TIME 100 allows you to access to the complete archive of past and present honorees on the TIME 100 annual list of the “World's Most Influential People”.
I think it's one of the most interesting applications actually in circulation. Take it a look!
2. DestroyTwitter
DestroyTwitter is a robust but compact Twitter application built on the Adobe AIR platform. It consists of a series of canvases that constantly update to keep tweets current and up-to-date using notifications that appear immediately after a new tweet arrives.
DestroyTwitter also features complete direct messaging functionality. Messages and tweets can be replied to with the original visible for quick and easy reference. A search function is also available to track anything that's being talked about.
3. Feedalizr
Feedalizr is a social media desktop client that keeps track of updates from friendfeed, twitter, facebook, Flickr, Twitpic & jaiku. It offers full support for these services so that users can interact, i.e. comment, like, favorite, tweet, reply etc. and their updates are instantly reflected on the services website and added to their stream.
4. Skimmer
Skimmer is an Adobe AIR desktop application designed to streamline, beautify, and enhance the experience of participating in your most frequently used social networking activities.
It improves upon your day-to-day interaction with multiple social networks, removing distractions and providing a rich experience that is particularly suited to multimedia content.
5. Icon Generator
Icon Generator is a little application that lets you generate a CS3 or Web 2.0 style icon, only 3 step. Pick color, type characters, and save it. Just create 4 different sizes of the icon.
6. Kuler Desktop
Kuler is an online application to create and share color harmonies. With this AIR application you can search and import Kuler themes directly into Creative Suite 3 Illustrator, InDesign, and Photoshop.
You can also view the highest tated, most popular, newest, and randomly selected themes. Drag and drop themes as transparent "tear offs," to scale and view over any application.
7. Lita
Lita is an administration interface for SQLite databases. It lets you edit your databases structure and data in a dedicated environment.
With Lita you can open, create, compact databases; create, rename, delete, and empty tables; Easily run, import and export your custom SQL statements.
8. Bookmash
Bookmash is a mashup application which allows you to find quickly videos, music, photos, people and news on line.
Any suggestions about other interesting AIR applications? Please leave a comment!
Are you looking for a custom and simple solution to embed your videos or MP3 files into your web pages using a custom Flash player? Take a look at this collection with the most popular, useufl and free Flash video and audio players ready to use in your web site or blog.1. Flowplayer
Flowplayer is an Open Source (GPL 3) video player for the Web. Use it to embed video streams into your web pages. Built for site owners, developers, hobbyists, businesses and serious programmers.2. JW FLV Player
The JW FLV Player is the Internet’s most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3, AAC, JPG, PNG and GIF). It also supports RTMP, HTTP, live streaming, various playlists formats, a wide range of settings and an extensive javascript API.3. Flash Video Player Plugin for WordPress
This Flash Video Player Plugin for WordPress is ideal to embed quickly your video into your Wordpress Blog. It supports custom skin, watermark logo, poster frames and floating controls.
In order to use this plugin unpack it and transfer the flash-video-player folder into your wp-contents/plugins folder and activate the Flash Video Plugin in your WordPress admin panel. You can find more info here.
4. WP Audio Player
WP Adudio Player is a WordPress Plug-in to play MP3 file directly into your post. It's simple to use and customize. This is the default skin:
You can also use this plug-in in a non-WordPress website following this tutorial.
5. XSPF Web Music Player
XSPF Web Music Player is a flash-based web application that uses xspf playlist format to play mp3 songs. XSPF is the XML Shareable Playlist Format. The software is written in Actionscript 2.
My Tiny TodoList is a totally free, simple open source todolist written in PHP and jQuery released from Max Pozdeev and based on my original MyToDoList application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website
MyTinyTodoList Demo
Some screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website MyTinyTodoList DemoSome screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.
Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.
1. jqTransform
jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.
Use this code to add a javascript inclusion to jqTransform:
...now create a form with class property equal to jqTransform:
...then add this JS code to apply the transformation:
2. NiceForms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:
...then create a form with class property equal to niceform:
It's all. Really simple and fast!
Any suggestion? Please leave a comment.
Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.
1. jqTransform
jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.Use this code to add a javascript inclusion to jqTransform:
<script type="text/javascript" src="jquery.jqtransform.min.js">
</script>
</script>
...now create a form with class property equal to jqTransform:
<form class="jqTransform">
<!-- Add form elements here... -->
<form>
<!-- Add form elements here... -->
<form>
...then add this JS code to apply the transformation:
<script type="text/javascript">
$(function() {
$("form.jqtransform").jqTransform();
});
</script>
$(function() {
$("form.jqtransform").jqTransform();
});
</script>
2. NiceForms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:
<script type="text/javascript" src="niceforms.js">
</script>
</script>
...then create a form with class property equal to niceform:
<form class="niceform">
<!-- Add form elements here... -->
<form>
<!-- Add form elements here... -->
<form>
It's all. Really simple and fast!
Any suggestion? Please leave a comment.
In this post I want to suggest you a list of some popular scripts and resources Facebook-inspired to help web developers to implement quickly Facebook-like features in their web projects.It include a Facebook-like search box, modal box, tooltips, action stream, sliders and other useful resources.
Any suggestion about this topic? Please leave a comment!
1. FaceBoox SearchFaceBoox is an autosuggest search engine inspired from Facebook for design which uses jQuery as ajax framework and BSN Autosuggest libs.
2. Autobox 2
Autobox 2 is an update of Autobox, a popular jQuery plugin to create input textbox with autosuggest features Facebook-like.
3. TextboxListTextboxList is a MooTools script similar to Autobox for jQuery. This script turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a list of items that can be easily deleted. It comes with an Autocomplete plugin.
4. Modal Box
This script is a MooTools clone of Facebook modal box. It’s lightweight, subtle, and very stylish.
5. Facebook Pagination
This script is a Facebook style, unobrusive ajax pagination plug-in for jQuery.
6. Elastic
Elastic is a jQuery plugin which makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is its weight.
7. FaceboxFacebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
8. TipsyTipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.
9. Action Streams
The Action Streams plugin is an amazing new plugin (which imitates Facebook streams on your Wall) for Movable Type 4.1 that lets you aggregate, control, and share your actions around the web as well as a list of your profiles on various services.
10. Facebook Application IconsThis is a collection of 28 free facebook application icons in a high resolution .PNG and .SVG format.
11. mooFacebook
mooFacebook is a port to Mootools of the original Facebox written by Chris Wanstrath with some added features like drag support and titles.
12. Facebook Sliders With Mootools and CSSDavid Walsh has created a very simple 3-slider system Facebook-like that allows a user to modify the height, width, and opacity of an image using just sliders.
Useful scripts to plot charts in web pagesFree resources for quickly developing AJAX applications10 Beautiful Web UI librariesBeautiful datepickers and calendars for web developers20 Great PHP framework for developersInteresting html FORM Validators for web developersBest Image Croppers ready to use for web developersFile uploaders collection for web developers