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

Archive for the ‘Goodies’ Category

Protovis is a JavaScript library for visualizing data using the canvas element.

Custom views of data can be composed with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.

Protovis Canvas Charts

Although Protovis looks complicated, it is very easy to understand (specially for JavaScript users) & has a straight forward logic which offers a flexible way to create any type of visualizations.

To see more, you can check the API documentation (very well-documented) & examples built with it.

Open Video Player Initiative is a community project by companies like Adobe, Microsoft, Akamai & for sharing player code and best practices around video player development and monetization

It comes with 2 versions: for Flash & Silverlight.

Open Video Player

A ready-to-deploy video player and a configuration tool (for easier configurations) is provided besides the source code.

Video player can be totally customized from colors to buttons & features included.

Demos for the player can found here.

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

jQuery Drag'n DropjQuery Drag'n Drop DemoDownload

The Database:

We create a simple database as below:

jQuery Drag'n Drop Database

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.

The HTML:

We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

Here it is:

<div id="contentLeft">
	<ul>
		<li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
	</ul>
</div>
<p>

 

The JavaScript:

We will be using jQuery UI's sortable plugin.

 <script type="text/javascript">
$(document).ready(function(){ 

	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
			$.post("updateDB.php", order, function(theResponse){
				$("#contentRight").html(theResponse);
			});
		}
		});
	});

});
</script>

We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

<?php
require("db.php");

$action 				= mysql_real_escape_string($_POST['action']);
$updateRecordsArray 	= $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {

		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
		mysql_query($query) or die('Error, insert query failed');
		$listingCounter = $listingCounter + 1;
	}

	echo '<pre>';
	print_r($updateRecordsArray);
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>

You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

jQuery Menu is a solid menu system that helps creating dropdown, iPod drilldown and flyout styled navigations easily.

It is the updated & much improved version of the iPod-like menu mentioned here (WRD post).

jQuery Menu System

The menu system uses a hierarchical unordered list for creating the menus & sub-menus.

It is ready with ThemeRoller which makes it very easy to customize the look and has ARIA (Accessible Rich Internet Applications Suite) support.

With various configuration options & ease of use, jQuery Menu is definitely a very helpful solution for creating menus.

Sockso is an open source music server application that lets you share the music files easily with everyone.

With a very simple setup, just running an executable file, the environment is instantly ready.

Sockso Music Server

The aplication is managed from a Java GUI. User can connect through a web-based interface and:

  • create playlists
  • listen to the music via a Flash-based player
  • download tracks, albums or playlists
  • upload new music files & more.

Sockso supports MP3, OGG Vorbis, Flac, and WMA files, If needed it can re-encode output streams to save bandwidth. To see all the features of the application, click here.

GalleryView is a jQuery plugin for creating any type of content galleries including images or HTML.

It offers a wide list of configuration options from widths/heights to colors used.

jQuery Content Gallery

The plugin simply converts an unordered list into a gallery. You can enable/disable captions which are produced from the alt tags.

By updating few images, new themes can be created easily. For several different demos, click here, here & here.

A factor which cannot be overlooked when designing websites, brochures or e-magazines is the all important font type.

Designers need to carefully select the font that best fits the style of the publication, is legible and perhaps a little different from the norm.

There are plenty of retro and urban fonts available for download, however many are very expensive. For those on a limited budget, here are some amazing free urban and retro fonts.

Victor Moscoso

Victor Moscoso

This funky retro font is based on the 1960′s psychedelic poster lettering of Victor Moscoso. It is hard not to think of Cadillac’s and American diners when looking at this font. Compatible with both Windows and Mac computers, it is free for personal use and contains a full set of characters and numbers.

Watson

Watson

Watson is a retro font that still has the wow factor but is also simple and elegant. The lettering is skinny and some of the characters appear three dimensional. Best of all it’s completely free to use, compatible with Windows and Mac computers and contains a full set of characters and numbers.

Thuphap

Thuphap

Categorised as a brush font, Thuphap looks like freehand writing. The ink weight varies on the curves of the letters, as it would naturally do if you were writing on a piece of paper. It is completely free to use, compatible with Windows and Mac Computers and contains a full set of characters and numbers, including several special letters.

Read the rest of this entry »

  • Tags:
  • Filed under: Gallery
  • 13 Comments
  • OmniGrid is a free grid component for MooTools that has advanced features.

    Having inspired from Flexigrid (for jQuery) & sortableTable, OmniGrid offers a similar functionality.

    MooTools Datagrid

    Besides client-side sorting, with a serverside script (a PHP one is mentioned), it connects to the data & can easily sort/paginate an unlimited number of records.

    Columns can be resized, multiple records can be selected (data inside is shown with an accordion), the look can be customized & more.

    Creating games, although being another discipline, is nothing far from web designers & developers with the increasing number of easy-to-use & familiar tools in this area.

    PushButton is an open source Flash game engine, that helps concentrating on the details by saving the time spent on coding.

    PushButton - Open Source Game Engine

    It provides the core functionality: resource manager, logger, debug monitoring, serialization, time management, globally named objects, etc. And, any preferred external library can be used too.

    PushButton has ready to use components like:

    • Physics based on Box2D.
    • Gameplay components: health, teams, state machines.
    • Sprite-based and SWF-based 2D rendering.
    • Tilemap system.
    • Advanced networking library for multiplayer games
    • Pathfinding library & more

    Flabell is presenting a beautiful & free Flash Mp3 player that can display multiple artists & playlists.

    Every aspect of the Mp3 player can be customized via XML including size, colors, speed and transition effects.

    Free Flash Mp3 Player With Playlist

    It streams the songs so there is no need to wait until the file is totally loaded. With a click, you can shuffle the songs.

    And, a great feature is the share/embedding support. If enabled via XML, anyone can easily embed the player to their websites.

    You can use the Flash Mp3 player directly on a website or integrate it to your Flash project by moving some ActionScript files and dragging the movieclip containing the Flash player in your Flash file.

    The player comes with the source code including .Fla files, fonts & PSDs.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com