Tools to Aid You in Designing and Coding

written by aext on September 15, 2010 in Tools with 11 comments

You could be the best designer, coder or an expert in both arenas, but without the help of tools to lighten the load, you may fall behind important deadlines. Knowing what programs and tools are available to help you along your way, can keep you on track, and be able to get your project done in a timely manner.

Now there are the obvious design tools such as Dreamweaver, Photoshop, and let’s face it the whole Adobe Creative Suite. Besides these great products, there are many useful tools to help with your code, video platforms, and other issues when setting up a website—and some are even free!

HTML and CSS Generators

HTML and CSS go together like peanut butter and jelly. With that said, writing a lot of code can be repetitive, time consuming and tiresome. Using generators to help develop code fast can be extremely beneficial. Below are some generators worth looking into.

CoffeCup HTML Editor

CoffeCup-HTML-Editor

CoffeCup offers both a free, and paid editor for their HTML editing software options. Their free editor, “is a trimmed-down version of the CoffeeCup HTML Editor, and does not contain the Visual Editor, CSS Menu Designer, Image Mapper, and Website Color Schemer.”

EasyHTMLCreator

As the name implies, this generator is easy to use, and you don’t have to be a wiz at HTML to use it. The EasyHTMLCreator is a completely free service, and is intended for those who just need some simple code generated. “If you are looking for a sophisticated HTML Editor this is not for you but if you want to be able to create web pages without having to be a technical wiz kid.”

PageBreeze

PageBreeze

PageBreeze is a free HTML generator that is award winning. PageBreeze boasts they have, “both visual (WYSIWYG) and HTML tag/source modes. PageBreeze Free HTML Editor’s design emphasizes simplicity and ease-of-use. You’ll find that you’ll be creating great looking websites almost instantly.”

HTML Kit Tools

This software will allow you to test your HTML code, point out any errors you may have or can create web page content from text and images. HTML Kit Tools has a free and paid version that, “has many features that are useful to full-time web developers and business users. HTML-Kit 292 is perhaps best for part-time developers, students and personal users.”

CSS Sprite Generator

This generator is a way to reduce the number of HTTP requests made for image resources referenced by a website. “Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.”

CSS Grid Builder

A product of Yahoo!, the CSS Grid Builder allows you to create CSS framework and YUI Grids. A preview of the grid builder is below.

CSS Grid Builder

CSS Creator

CSS Creator

The CSS Creator, “allows you to choose a style for your web page. Select different Cascading Style Sheet properties from the page below. To select a color, look for the HTML tag you want to effect, click the field you would like to insert color into, eg color or background, then simply click the color you want from the colors grid on the left. Most changes will display on the page as you make them.”

CleanCSS

CleanCSS is a tool that helps you cleans up your CSS code, and was developed by the same people at CSS Tidy. This is a free service to use, and can be a great time saver. “It helps you get smaller CSS file sizes and better written code. The way the optimizer works actually lets you decide how much compression you want. From super compressed (virtually unreadable and editable by a human being) to visually pleasing. I prefer the standard setting because it gives you a little of both.”

Video Platforms

When integrating video into a website, issues like loading time, browser functionality and other issues arise. Having some helpful software can streamline your efforts, and not waste valuable time.

CamStudio

camstudio

According to their website, “CamStudio is able to record all screen and audio activity on your computer and create industry-standard AVI video files and using its built-in SWF Producer can turn those AVIs into lean, mean, bandwidth-friendly Streaming Flash videos (SWFs).” The best part is CamStudio is a completely free service.

Easy Web Video

You don’t have to write any code to use this program to get videos onto a website. One testimonial reports that, “I have a Web Design Company and videos are a huge part of the service I provide. I can’t tell you how proud I am to offer my clients a reliable video format that can be played on any browser or any Operating System. I no longer have to worry whether a perspective client is unable to see a video I have created. I don’t worry whether they have a Windows Media plugin or a Quicktime plugin.”

Brightcove

brightcove

Brightcove offers a myriad of features for its clients and also, “offer a comprehensive set of APIs, SDKs, and tools architected to give you unlimited control and flexibility. We have also developed a thriving ecosystem of over 100 technology partners offering everything from mobile video and iPhone solutions to 3rd-party player plug-ins, innovative ad formats, and pre-built integrations with CMS systems, ad servers and ad networks.”

AJAX and Javascript

Implementing AJAX and other Javascript files can make a site more dynamic and fun to navigate through. These files can take some time to create, but using tools to do some of the leg work for you can do wonders.

jQuery

If writing JavaScript files isn’t your specialty, jQuery is one of the most popular choices for people just like you. “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

Mootools

Another great tool for Javascript is Mootools. It is “a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”

JXLib

A Javascript library that is built off of Mootools, JXLib, “provides access to the library as well as extensive documentation and examples. We’ve tried to provide a complete set of documentation and examples but there are surely some areas that are lacking. Please contact us on the mailing list if you find errors, omissions, or something you think could be done better.”

Clean

An open source engine for AJAX, it provides a, “that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues.”

Dojo

Also an open source technology, this program administers “JavaScript library designed to ease the rapid development of cross platform, JavaScript/Ajax based applications and web sites.” You can create web apps, widgets and more with this system.

DOMAssistant

A fully modular system, it only depends on a single core Javascript file– DOMAssistant.js. DOMAssistant should be able to provide a more consistent way to script against Document Object Model or DOM in web browsers. Below is an example of their code.

$("#container input[type=text]");

$("#navigation a").addEvent("click", myFunc);

$("#news-list").load("updated-news.php");

PHP

PHP is one of the most predominately used frameworks used today. “PHP is available as a processor for most modern web servers and as standalone interpreter on most operating systems and computing platforms.” Having tools to help you set up PHP if you aren’t schooled in this area of framework is valuable—especially for freelancers.

DOOPHP

According to their website Doo is, “a PHP framework designed to give you a delightful development experience without slowing down you applications like most frameworks does. Doo tries to be as lightweight as possible and has a small source code footprint. The creator actually benchmarked various possible approaches when building a module and chooses the fastest for Doo.”

CodeIgniter

CodeIgniter is a free service, this PHP framework is great for those of you who need:

  • A framework with a small footprint.
  • Exceptional performance.
  • Broad compatibility with standard hosting accounts that run a variety of PHP versions and configurations.
  • A framework that requires nearly zero configuration.
  • A framework that does not require you to use the command line.
  • A framework that does not require you to adhere to restrictive coding rules.
  • Are not interested in large-scale monolithic libraries like PEAR.
  • You do not want to be forced to learn a templating language (although a template parser is optionally available if you desire one).
  • You eschew complexity, favoring simple solutions.
  • You need clear, thorough documentation.

Kodingen

Not only a service for PHP, but Perl and Python, Kodingen is a free service for developers that is based in the cloud. Still in beta, they are almost ready to roll out all of their non-beta features and are growing rapidly.

These tools are only a few out there to choose from. There are literally hundreds of tools out there, it just depends on what your needs and budget to figure out what is the best option for you.