The 5 most popular Posts of the month in September were:
- Learn HTML & CSS at the HTML Playground
"The HTML Playground offers XHTML and CSS references by example. The site is still in beta at version 0.4, but offers an easy to use interface that makes digesting all the information displayed simple. It is a fast loading application and I have just found it to be overall a great tool for learning the basics of HTML and CSS." - Collection of ActionScript Cheat Sheets
"ActionScriptCheatSheet.com offers a number of ActionScript related cheat sheets, including one for both version 2.0 and version 3.0 of ActionScript. There are cheat sheets listing the available packages, details about specific packages, and overviews." - How To Get Your FeedBurner Circulation With One Simple Function
"If you have visited a few blogs then I am sure you have seen the FeedBurner stats graphic. The count is very useful, but the graphic itself isn't very appealing, even with the ability to customize it. Thankfully the FeedBurner API was released, which allows you to retrieve your stats without the graphic." - 15 Places to Find Your Next CSS Layout
"Creating a theme is a multistep process. You have to pick the color scheme, decide how many graphics to include and what purpose they will serve, as well as decide on a layout. Sometimes it isn't easy to decide on a layout and it would be nice to have some examples and ideas to look at. That is what I'm focusing for this post." - Great Looking Collection of Credit Card Icons
"Do you accept credit cards through your website? It could be through any number of other third party processing companies like PayPal or Authorize.Net. If so there are some great looking credit card icons available for free. Fineicons.com offers a collection of 23 different credit card icons for download. Be sure to check them out and download for free if you like them."
What was your favorite post this month? Let us know in the comments.
HTML Dog offers HTML and CSS tutorials for a beginner, intermediate, and advanced web designer/developer. The website is very well designed and easy to navigate. The information in the tutorials is clear, concise, informative, very useful, and overall well written. You can also get information from additional references including HTML tags and CSS properties. There are articles available that build on the tutorials providing a more detailed understanding of certain topics. If you would like to see what you have been reading about in the tutorials in action, you can view a large number of examples spread across seven different categories.
The tutorials, articles, and examples from HTML Dog are written with a strict adherence to the Web Standards created by the W3C. The information was created by Patrick Griffiths who has been a front-end web developer using HTML and CSS since 1999. He has contributed to well known and credible sites like A List Apart and the CSS Zen Garden.
If you find the information useful and would like to have a copy of it, you can purchase a copy of the HTML Dog book which includes information similar to the tutorials and articles. You can get your copy at Barnes & Noble, Borders, and Amazon.com.
Creating a theme is a multistep process. You have to pick the color scheme, decide how many graphics to include and what purpose they will serve, as well as decide on a layout. Sometimes it isn't easy to decide on a layout and it would be nice to have some examples and ideas to look at. That is what I'm focusing for this post. Here are 15 great resources to help you pick your layout and download the CSS to get you started.
Free-CSS offers over 250 different free CSS layouts for you to use. You can browse them and preview them as a thumbnail as well as click on each to see a demo in a GreyBox. Their terms of use are available in each zip file as well as on the website. The authors give this general explanation "All of the CSS layouts that are featured within Free CSS are distributed under some form of GNU/GPL License or under a Creative Commons License or are free" (free-css.com).
IronMyers offers three different layout collections. They are the 750px collection which includes 56 different layouts, the 950px collection which includes 56 layouts, and the 100% collection which also includes 56 layouts. You can view an image of the layout as a preview or you can view all the layouts in demo format.
Code-Sucks.com has created a number of different examples of CSS layouts. You can see simple images of them or view them as a demo layout. All 95 of their layouts validate against the Strict DOCTYPE.
Layout Gala offers 40 different layouts that are viewable as thumbnail image previews or demos of the actual layout. You can download each layout individually or download all 40 in a zip file if you want. All of the layouts are based on five sections; they each include a header, content, navigation, other stuff and footer section.
Max Design offers a number of CSS layouts covering the typical ones like two and three column layouts. The main advantage to this site is the addition of tutorials to each of the layouts. There is an explanation and help offered for each layout to help you learn a little more than just looking at samples, demos, and code. The code is available to copy and paste for your use.
Nice and Free CSS Templates offers a number of layouts including three columns, four columns, and box layouts. Each template is available as a thumbnail preview, a demo, and the CSS code is available to copy and paste for your use. All of the templates validate to W3C standards for XHTML 1.0 and CSS.
CSS Play offers 14 different CSS layouts including three column and fixed. You can view demos of the layouts and the CSS code is displayed to copy and paste for your use. The copyright and usage policy is listed on the bottom of the main page.
For those of you who already own Dreamweaver CS3, it has a number of CSS layouts built in. You can easily find them by simply creating a new HTML file and choosing one of the templates provided. They offer previews next to the choices as a selection is made.
About.com offers a huge wealth of information including a number of CSS layouts. There are more than 25 layouts available, each with a demo to look at as well as a detailed description about the layout. You can save the templates for use in your websites. They also have listed the terms of use on their website.
SSI Developer offers CSS layouts in three different categories. They have created two column, three column, and general templates. You are able to view an image preview, view a live demo with some generic content, and download the layouts as a zip file.
The Dynamic Drive CSS Library offers a number of great CSS layouts, among other great resources. They have created almost 50 different layouts in five categories. You can choose from two column, three column, fixed layout, flexible layout, and CSS frames. Once you decide on a layout, you can view an example and get a copy of the code.
Mitch Bryson has created eight basic CSS layouts. Each layout has a thumbnail image preview, a demo page, and a download link to the layout zip file. The layouts include one column, two column, three column, fixed, and fluid.
The Layout Reservoir offers two main CSS layouts. There is two column and the the three column layouts available. The two column layout has an example with a left hand menu and a right hand site menu. Each layout has the CSS code available to copy and paste for your use.
Glish has compiled six of the most common CSS layouts used on the web. They give examples and the CSS code for 3 columns, the holy grail, 2 columns, ALA style, 4 columns, all fluid, 3 columns, static width and centered, and nested float. The offer the code in a textbox at the bottom of the examples for you to copy and paste for your use.
WebDev offers two column and three column CSS layouts licensed under a Creative Commons License. Each layout has a demo available to check out. Along with the typical two and three column layouts, there are also some discussion board layouts, threaded and unthreaded, as well as some random template layouts. You can download all of the layouts in one zip file.
Webmin
Webmin is my personal favorite of the free control panels. I have used it for many years on servers I have set up at home to test and play with. It is easy to set up and has a great list of feature (or modules) including Apache, BIND, BSD Firewall, bandwidth monitoring, cron job manager, and many more. Beyond the standard modules included, you can download addition third party modules and develop your own if needed.
Currently there is support for many types of Unix (best option: FreeBSD), Linux (best option: Redhat), and Solaris systems. Webmin needs to be configured for each specific flavor of *nix because of file locations, but despite this restriction, there are currently 82 different operating systems supported.
Webmin uses a BSD-like license allowing for commercial and non-commercial use. "All recent versions of Webmin are under a BSD-like licence, meaning that it may be freely distributed and modified for commercial and non-commercial use" (Webmin).
Web-cp
web-cp offers security, flexibility, automation, and management tools to help you manage your servers. Some notable features include system monitoring, statistics, domain configuration, database management, email settings, file manager, and many more. There is a list of supported applications on the web-cp website including sendmail, Apache, Bind, and MySQL.
Running on *nix systems, there are currently 12 different operating systems that web-cp can run on. Multiple versions of Redhat, FedoraCore, FreeBSD, and CentOS are a few of the available options.
The license for this control panel is licensed as Open Source software under the GPL license. This license means that "anyone, anywhere can continue working on the code" (web-cp).
SysCP
SysCP includes management of mail, FTP, web space, CGI, custom error pages, statistics, DNS, and more. Within these categories of supported features, you can control popular applications such as Apache, Bind, Courier, and Proftpd.You can get full feature and supported applications lists from their website. As well as these standard application controls built into SysCP, you can download third party modules to control and manage other aspects of your server as well. Some of the third party modules include management for applications like SpamAssassin, Fetchmail, and a backup module.
You can use SysCP on five major *nix distibutions, Debian, Ubuntu, Gentoo, OpenSuSE, and FreeBSD. These are limited to specific versions so be sure to check what you are using versus what is supported.
SysCP is licensed as open source using the GPL. "The SysCP project was founded, to develop a free server management tool in terms of the Open Source Definition and distribute it freely under the terms of the GPL" (SysCP).
GNUPanel
GNUPanel is written in PHP5 and is intended to run on a Debian Linux system. The main features include domain management, FTP management, database administration, mail management, and much more. You can control popular applications like Apache, PHP, MySQL, Proftpd, and others. There are also some web applications available for auto installation (WordPress, Joomla, phpBB, and osCommerce).
Although you can currently only run this on Debian, there are other operating systems installations planned. Current development is focusing on language translations of the application.
The license is open source, using GPL. The website stats that "GNUPanel is a completely free (GPL)" (GNUPanel).
ISPConfig
ISPConfig offers management of services like httpd servers, FTP servers, DNS servers, mail servers, database systems, and much more. You can get a full list of features at their website. You can manage popular applications like Apache, MySQL, Proftpd, Bind, and sendmail through the control panel as well. An additional feature of ISPConfig that can be a great deal of help is the four page listing of how-to's at HowtoForge.
There are eight major Linux distributions supported including Mandrake, Fedora Core. Suse, Debian, and Ubuntu. A number of different versions are supported for each of the eight supported operating systems.
ISPConfig uses a BSD license, which allows for redistribution and copying as well as changing the source as long as the original copyright information is retained.
dhtmlxGrid is an open source (GPL) "spreadsheet" using Ajax to create DHTML tables that look amazing and function beautifully. dhtmlxGrid can bind data from many different types of data sources, including XML, CSV, JavaScript arrays, and HTML Tables. Large datasets are no problem either. The data is called using Ajax to load only the data that is visible. This allows for very large datasets (50,000+ records) to be loaded easily without slowing the page load time. The grid is available for IE 5.0 and above, Firefox 0.9 and and above, Safari 2.0 and above, and Opera 9.0 and above. DHTMLX boasts many big name customers including FedEx, HP, Oracle, IBM, Texas Instruments, and many more.
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.
ActionScriptCheatSheet.com offers a number of ActionScript related cheat sheets, including one for both version 2.0 and version 3.0 of ActionScript. There are cheat sheets listing the available packages, details about specific packages, and overviews. A lot of the cheat sheets are PDFs that contain multiple pages worth of information and have a very easy to follow layout. Along with the ActionScript cheat sheets, the author has created cheat sheets for Adobe Air, Papervision 3D, and Apollo.
Besides all the great cheat sheets available, there are also a number of blog posts, book reviews, and articles about Adobe Flex, Adobe AIR, ActionScript 3.0, Papervision3D, Cairngorm, Thermo, and BlazeDS.
This site is definitely worth checking out. It has a lot of great information to help you get started, expand you current knowledge, and/or speed up your development time with any of these technologies.
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.
If you have visited a few blogs then I am sure you have seen the FeedBurner stats graphic. The count is very useful, but the graphic itself isn't very appealing, even with the ability to customize it. Thankfully the FeedBurner API was released, which allows you to retrieve your stats without the graphic. I have taken that API and created a simple function, with the help of simple XML, to grab your circulation count and display it as text on your site without the graphic.
To start off, you will need to download the simple XML class and put it in the same folder as the file that will contain this function (or change the include path to reflect the directory of your choice). Once you have done that, you are pretty much done. All you need to do is copy the function below and call the function with your feed URI and it will return the circulation number.
You can see the function and sample usage below.
Function
function FeedBurnerCirc($feed) { include 'simplexml.class.php'; $api = 'http://api.feedburner.com/awareness/1.0/GetFeedData?uri='.$feed; $sxml = new simplexml; $sxml->ignore_level = 1; $data = $sxml->xml_load_file($api,"array"); return $data["entry"]["@attributes"]["circulation"]; }
Usage
echo FeedBurnerCirc('http://feeds.feedburner.com/webmastersbydesign');
You could also easily customize the function to include more data and return an array of results. The API returns data other that the circulation, such as your reach and views. I only wanted the circulation so I didn't return an array of results, but it wouldn't be tough to do.
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.
Do you accept credit cards through your website? It could be through any number of other third party processing companies like PayPal or Authorize.Net. If so there are some great looking credit card icons available for free. Fineicons.com offers a collection of 23 different credit card icons for download. Be sure to check them out and download for free if you like them.
The collection includes icons from: Visa, Visa Electron, Mastercard, Cirrus, American Express, Paypal, Moneybookers, Solo, Swich, JCB, Delta, Discover, Dinersclub, Easy Cash, E-gold, Western Union, Cash U, Laser, World Pay, Alipay, ICBC China, and Neteller.
I have only detailed the credit card collection, but Fineicons.com has other collections worth taking a look at. They also offer nice collections for Web Symbols, RSS Feed, Computer Micro Stock, File Types, and Flags of the World.
Most Commented