Open Flash Chart is a free project that allows you to integrate flash graphs in you website. There is support for all of the commonly used graphs like bar charts, line charts, area charts, and scatter plots. The flash component allows the user to hover over points of the graph and view labels explaining the point (see screenshot above). This feature is what sets Open Flash Chart apart from other chart/graph apps. Check out the website for tutorials and examples. There are other static graphing libraries like Google Charts that are clean and useful but static.

You can download Open Flash Chart and use it under the GNU General Public License. If you need help with implementing it or customizing or using the different libraries you can check the forums.

There is a sample usage, a demo, and source code (download and view) available from the website. I have included a sample demo below as well.

Demo

Print Table

If you are in need of a background pattern for your website, PatternCooler is likely to have what you want. There are thousands of backgrounds available for download and are freely available for your use: "All artworks on this site can be used freely on blogs, MySpace profiles, Twitter, mobile phone wallpapers, and non-commercial web projects" (PatternCooler).

The website offers the ability to customize the patterns and backgrounds to your liking using the Seamless Pattern Color Editor (example). This editor, as shown below, allows you to pick a pattern and change the colors using a color picker or hex codes.

Along with the available patterns for editing, there are over 20,000 prebuilt patterns available for download from the User-Colored Seamless Pattern Background Library. Technically you can edit these as well, but they probably have a pattern you like in this collection. Once you have decided on a pattern, you have the option to download and/or view the pattern.

You can get a glimpse of what the backgrounds that are offered will look like simply by viewing the front page. The front page uses one of their patterns as the background and changes with each refresh of the page. Along with the automatic loading of their patterns, you can change the background to whatever pattern you want to see. The view option allows you to see it on as the background on the current page or on a blank page.

Be sure to check out all of the patterns they have to offer. Chances are you will find one, probably multiple, that you like. If you like the service offered, consider donating to help out.

PrototypeXtensions adds additional components to Prototype.js and Script.aculo.us, two of the most popular and widely used JavaScript frameworks/libraries available. While these are extremely useful tools for creating visual effects, UI improvements, and Ajax methods, the creators of PrototypeXtensions realized a need for additional components. The library is currently at version 0.1.2 and is released under MIT License. There are three main categories of additions, or extensions, that are added by this library with specific features within each category. I have listed a basic feature overview below.

Features

There are detailed explanations and examples for each feature available so be sure to check out the website for more detailed features and information. You can download the current release in the original uncompressed form or download the smalled Minified and Gzipped version.

The Lightbox Clones Matrix lets you easily compare different lightbox clones in a table format. The table, or matrix, lists many of the features for each of the options and compares them side by side. Using jQuery to create the sortable table, the comparison matrix is very fast and easy to use. There are comparisons for 46 lightbox clones comparing seven different features. You have the ability to sort and/or filter by each of the seven features as well as the library type.

The filters include jQuery, Prototype, Mootools, YUI, "Can display images", "Can group images into sets", "Can display inline elements", "Can display iframes", "Can fetch content via Ajax", "Can display Flash", and "Can display various Video objects". There are icons to help you visualize the different features and easily sift through them.

Be sure to check it out or read more about it from the creator.

The best way to see why dhtmlxGrid is so great is to see it, so here is an example.

Now that you have seen it, you may be wondering what some of the specifics are. I have listed many of the great features here, but there are a lot more so be sure to check out their website for all of the features.

Features

• Easy installation and usage
• Smart Rendersing (Loading large datasets)
• Search, filter, sort, and group
• Drag-and-Drop
• Load data from multiple sources
• Edit cells within the grid
• Math formulas in cells
• Keyboard shortcuts
• Skinning through CSS
• Multiline headers and footers

Some features are not available in the open source version and requires buying the professional edition. You can download your copy of dhtmlxGrid 1.6 and view the documentation from DHTMLX's website.

ColorJack offers three tools for easily creating color schemes. The front page shows new and popular schemes that have been created as well as linking to the three main tools, Color Galaxy, Color Sphere, and Color Studio. Along with providing these tools, there are links to other useful sites and tools, a blog, other software created by ColorJack, and articles that have some pretty cool information.

The Front Page

The front page displays the new and popular color schemes that have been created by other users. You can hover over each of the colors to see the whole scheme that was designed. It is a little confusing to understand at first, but the white spaces are breaks in between different color schemes. So when you hover over a color, it shows you the colors to the left and right of it as well (before the next and after the previous white space) to see what the colors look like together.

Color Galaxy

Color Galaxy allows you to pick from 27 color schemes and look at the makeup of that color. Some of the color schemes include crayola, mozilla, IE, Netscape, and Windows. Once you choose a color scheme it gets loaded into a "galaxy" arrangement and you can then pick one of the colors to examine. Clicking on a color will then load information describing it's makeup on the right. Personally I like the ven diagram that gets created to show the colors mixed together.

Color Sphere

Color Sphere offers color schemes based on a number of variables. It is displayed in a color picker format on the left as well as a list format on the right. You can apply a number of rules/filters to the colors to end up with your desired color scheme. Colors can be adjusted from the sphere on the left or the list on the right and new color schemes will be created dynamically. Some of the filters available are analogous, complimentary, triadic, and tetradic. You can also choose to see all colors in the spectrum, websmart colors, or websafe colors. You are also given the ability to export the color scheme for Adobe Illustrator and Adobe Photoshop.

Color Studio

Color Studio is in my opinion the best part of the site. It offers information about a color selected as well as a palette for a color scheme. You can start with a color by entering the HEX code or picking one from a color picker. Once you have a color selected, you can start to apply filters and functions similar to those previously mentioned in the two apps above. You can also darken/lighten the color scheme, adjust the hue, saturation, and value of the colors, as well as add and remove additional colors to or from the palette. Like the Color Sphere, you can export the color scheme to Adobe Illustrator and Adobe Photoshop. You can also save it to Delicious, bookmark it in your browser, and get the direct link as a URL.

All three of these apps from ColorJack are worth checking out. If you like what they have to offer, you can check out more from their software page and read up on some color theory at their article and blog pages.

Galleria is a clean and easy to implement image gallery based on jQuery. This is a great tool if you need to add an image gallery to your site and don't want to use a flash based gallery. I prefer JavaScript and CSS galleries over flash galleries because they are usually smaller and slightly easier to implement. This is a small (4K) script that doesn't add a lot of overhead to your page load time and is completely customizable to your taste. The images are preloaded individually. Some other features to note are the ability to your custom thumbnails, add a caption from image anchor title, and call events from the image onLoad event.

Implementing this gallery is, as noted earlier, very easy. You can have the whole thing up and running in only four lines of code. You need to add the CSS and JavaScript files to the header and then add the unsorted list that gets converted into the gallery. I have displayed the code that needs to be inserted into your header below. You can also get more help, checkout Demo1 or Demo2, and download the script.

 
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
 

More information about usage available at the Galleria website.

]]> http://www.webmastersbydesign.com/2008/09/11/create-beautiful-image-galleries-with-galleria/feed/ 1 http://www.webmastersbydesign.com/2008/08/18/web-20-development-with-aptana-studio/ http://www.webmastersbydesign.com/2008/08/18/web-20-development-with-aptana-studio/#comments Mon, 18 Aug 2008 11:23:57 +0000 Scott Spear http://www.webmastersbydesign.com/?p=574

Aptana Studio is an IDE for creating web 2.0 applications. It can be downloaded and run as an application or run in the Eclipse IDE. The IDE can be purchased as a professional edition or downloaded in an open source community edition. The open source community edition boasts over 1,300,000 downloads with a combined total including the professional version of more than 2,200,000 downloads to date. This application is designed and optimized for web development languages such as JavaScript, Ruby on Rails, and PHP, with other plugins available including Adobe AIR and iPhone development.

Aptana is backed by many big names in the industry. The advisory board is made up of Ajax gurus like Brendan Eich and John Resig from Mozilla, Dion Almaer and Ben Galbraith who are the founder and co-founder of ajaxian.com, and Jack Slocum from EXT JS. With a lineup like this, it is no surprise that the Aptana Studio has as many downloads and as much supports as it does.

Notable Features

• FTP Support - There is built-in FTP support for working with remote files. The community edition includes only basic FTP protocols, while the professional edition adds SFTP support.
• Plugins - There are many plugins available to extend the functionality of the IDE including SVN, MySQL, PHP, and more.
• Code Snippets - There are many code snippets integrated with the default package that can save time when using common code techniques.
• Debugging - There is integrated debugging with Firebug for Firefox. The professional version also includes debugging capabilities for Internet Explorer.
• DOM Support - There is an integrated code assist function that provides help for browser support and information pertaining to the DOM.
• Code Assist - There are helpful hints and suggestions for HTML and CSS code to speed up the development process.
• Ajax Libraries - There are many prepackaged Ajax and JavaScript libraries like YUI, Mootools, Prototype, and Scriptaculous.
• Integrated Proxy - There are proxy capabilities available to allow Aptana to be used behind a firewall.
• Integrated Help - There are several integrated help documents for included JavaScript libraries, alleviating the need to load the help documentation in a web browser. You can have it directly available in pane within Aptana.
• Error Checking - There is line by line error checking and reporting to take the guess work out of troubleshooting. You will be told and shown what and where the error occurred.

• Web 2.0 Buttons
  • IRIS Design
  • TechTut
  • Free Your Design
  • Photoshop Support
  • As Button Generator (Free Service, Not A Tutorial)

• Web 2.0 Badges
  • Ajax Lessons
  • Free Photoshop Guides
  • Photoshop Candy
  • Photoshop Lovr
  • Web 2.0 Badge Generator (Free Service, Not A Tutorial)

• Web 2.0 Logos
  • Design Phase
  • FX Designing
  • Linkrain
  • Alleba Blog (Video)
  • Web 2.0 Logo Creator (Free Service, Not A Tutorial)

• Web 2.0 General
  • Web 2.0 Design Kit | Part 1
  • Web 2.0 Design Kit | Part 2
  • Software Box
  • Web 2.0 Color Palletes
  • Soft Floating Font

What are the best tutorials you've used to get the image/graphic you wanted? Comment below and let us know.