web design tools

 

Overview

web site creation tools - Web Suites
Adobe CS5 Web Premium $1799, available from newegg $1699
Dreamweaver (web), Flash Catalyst, Flash Professional (animation), Flash Builder, Photoshop Extended (photos+paint), Illustrator, Acrobat Pro (pdf), Fireworks (animated GIFs, SWFs), Contribute (CMS), Bridge, Device Central (cell phones).
Adobe CS5 Master Collection $2599, available from newegg $2449+1.99
Photoshop Extended (photos+paint), Illustrator (vector graphics), InDesign, Acrobat Pro (PDF), Flash Catalyst, Flash Professional (animation), Flash Builder, Dreamweaver (web), Fireworks (animated GIFs, SWFs), Contribute (CMS), Adobe Premiere Pro (video), After Effects (video), Soundbooth (audio, audio in video), Adobe OnLocation, Encore, Bridge, Device Central (cell phones), Dynamic Link. Best all-around solution. Soundbooth can edit sound in video files.
Microsoft Expression Studio $599, available from newegg $531.99+2.99
made only for doing ASP.Net. Expression Blend + SketchFlow (Silverlight and .net), Expression Web, Expression Design (artwork), Expression Encoder + IIS Smooth Streaming (video). This is the "best" solution for .Net

web site creation tools - page editors
you can go for one of the all-out suites like Adobe Web Premium, or you can go get a collection of smaller free pieces and try to work with those.
CSS: TopStyle Pro, available from newsgator $80
if you don't have a good CSS editor like dreamweaver or microsoft expression web, this is the way to go. have a CSS book handy to tell you what the CSS items are so you can choose which browser or CSS standard you are targeting. there is also a 'safe mode' set.
Web+SQL: Dreamweaver CS5, available from newegg $379
flagship of HTML editors. works with PHP, ASP, ColdFusion, WML, XML, XHTML, Flash, Applets, CSS, blah blah. WYSIWYG editing capability including w/layers, though you WYSIWYG is extremely limited. color syntax highlighting, templates. doed regular expressions (regex) well and dreamweaver can search/replace your entire site if you want. also has a very precious "live view" wherein you can explore and debug and fix your JS and AJAX code and CSS without having to go into a browser.
Web: made only for doing ASP.Net. Microsoft Expression Web, available from stores, Microsoft(various) $300
This is the best package at doing CSS that you can get, integrates really well. have tried FrontPage. FrontPage used to mangle the HTML & strip out tags & javascript it didn't think belonged there (which meant all of it). This is an entirely new product, more like dreamweaver now, now that it's twice as pricey. this is part of the Microsoft Expression Studio ($600) package.
Web: Aptana Studio $free
fancy IDE for editing and debugging web apps. includes javascript debugger (firefox, IE), works with rails, html5, php, built-in FTP/SFTP/FTPS, live preview for popular browsers, DOM outline view, has JS libraries. editor is fully extensible by YOU using rails snippets. multiplatform. license claims the stable release is beta software and is not for commercial use (this also goes against GPL). how it can be under the GPL license where it says distribute freely and make source code available, and also under the aptana license where it says not distribute seems to be a GPL license breach. you can't have it both ways.
sort of like Dreamweaver, but a lot less features, and free. better than nvu and based on NVU code. includes FTP client.
sort of like Dreamweaver, but a lot less features, and free. Not incredibly great, but it works fine if you don't have money.
Web: HTML-Kit HTML/XHTML/XML/CSS editor (actually, will edit anything), 292 is free, or buy up-to-date Tool Kit for $59
supposed to be configurable, but I am not sure to what degree. you can configure it to save the state of your edit windows. has HTML Tidy and an HTML Validator. color syntax highlighting. 1000 plugins available (ugh) for handling more languages such as JavaScript, C#, etc. and other features.
one free, one built into dreamweaver which costs $400

web site creation tools - programmer's editors (does HTML, css, SQL, PHP, etc)
programmer's editors can handle huge files. they aren't always good at color syntax highlighting like dreamweaver. but they are usually free and they do regular expressions (regex) well, and so does dreamweaver, and dreamweaver can search/replace your entire site if you want.
The Semware Editor (TSE), available from semware $99-119+8/Win $124/COMBO_WIN_CONSOLE $99-119+8/console $99+8/DOS
tse is a 32-bit command-shell (2.8 older version) or windows editor for Win9x/ME/NT/2000/XP/Vista. I've been using version 2.8 and now 4.4 and it's been great! it includes a hex/binary editor, regexp search and replace, a command-line grep utility and loads of features. it emulates several editors (you choose). the command-line version even handles windows cut and paste. configurable syntax highlighting. macro recording & playback. has scripting lanugage (not the easiest to learn, but has complete documentation). brace matching, auto-matching-brace insertion. handles very large files and up to 2048-character lines. advanced column-block editing, great for editing text databases!
many advanced features, similar to, but I would consider a subset of TSE. has macros.
upgrades may cost you money. Appears to have no installer. encryption DLL is also a pain to get and install. its programming language is called Clip. Unfortunately, they chose the name Clipbook to call their contributed user library of functions, which is the microsoft name for something to do with a collection of clipboard content or something.
free. syntax highlighting and syntax folding. macro recording & playback. drag-n-drop. multi-document. print source code in color. lots of languages supported. brace and indent highlighting. regexp search/replace. column-block editing.
there are many plugins to this editor for editing various lanugages (PHP, C++, HTML, XML, COBOL, Java, Perl, etc) and it has a CASE (Computer Aided Software Engineering) tool like UML. Even has a Requirements Engineering plugin. has UML (CASE tool) plugins for diagramming your software architecture. Eclipse is used for Enterprise development, Embedded+device development, Rich Client platform, Application frameworks, and as a language IDE (Integrated Development Environment). This is a web designer's tool and a programmer's editor and debugging environment. you are probably better off installing classic and installing the plugins you need.

web site creation tools - graphics
visibone.com's cards, available at visibone.com
I like the Everything Book, I got the laminated versions. they are quick reference guides.
Adobe Creative Cloud (CC) membership - digital delivery $600
windows & OS X
Adobe Photoshop Elements $80 available at adobe.com/elements
Mac, Windows. uses adobe extendscript scripting language *I think*, which is I think a much later version of Javascript than what is used in browsers. a scaled down version of the the $700 flagship of photo editors and the standard file format used for photo exchange used in newspapers, business, web, pretty much everywhere. a mask is applied to each layer or something like that (I don't have my book, and I don't own this package because I nevewr could afford it). takes Photoshop filter Plugins - wow you can do some amazing stuff with those!
Corel (formerly Jasc) Paint Shop Pro X3 Ultimate $100 available at corel.com/psp (upgrade $70)
comes with a lite version of the famous Painter at this price, and KPT plugins! Windows PC with DVD drive. Does layers & masks. Some books (mostly older versions) available on amazon.com. PSP has *integrated* vector graphics and art media, something I have not found with the Adobe products. There are several layer types: Vector, Raster/RGB/Bitmap, Art Media, Mask. This makes the program VERY flexible and useful for web graphics. takes Photoshop filter Plugins - wow you can do some amazing stuff with those! vector graphics, photoshop plugins capability, shapes - more quantity is better, picture tubes/stamps, photo frames, HLS and RGB color, HTML hexadecimal color codes in the color palette, photo touchup (scatch remover!, clone tool, red eye removal, 1-step photo-fix), perspective correction, support for 250 camera raw formats, background remover, photo frames, photo edges, straighten, rotate, crop, resize, and layering cabaility, masks, screen mode on the layers.
RealDraw $55 (upgrade $15), available from mediachance.com
register/pay for. Windows. does vectors and bitmap graphics. has a number of impressive features for vectors like liquid vector edit (like the push tool, only for vectors). natural paint styles, 3d objects properties and effects, airbrush, painted art, photo-realistic imagery, hand-drawn illustration, extrusions, special effects, sparkles & lens-flare (non-destructive),
Mac. has quite a number of features for a small editor, and layers.
Ultimate Paint (UP) $35-70, available at ultimatepaint.com
Windows, Mac, Windows (XP and above). Does layers & I think masks. don't use the free version - it's unreliable and you can'tr use filters and there are other problems (crippleware). does not do animations. hard to make a transparent background. takes Photoshop Plugins. supports a few common file formats. page curls with holes for letters, frames, filter factory, frames.
Paint: GIMP (Gnu Image Manipulation Program), windows, mac, linux, free (open source)
low-end but free paint program. haven't successfully got it to save anything with text in it on win9x/ME - just gives a "missing font" error and never saves the file. 2.6.8 or later works fine on XP and above.
FTP Client
FTP: Filezilla FTP client, filezilla-project.org, free (open source)
for transferring your web files to hosting server. multi-platform.

web servers you can install for development/testing
you can't have 2 mysql or postgresql database engines installed at the same time. Also I highly prefer XAMPP over this stack. XAMPP works out of the box.
XAMPP, xampp.org, free
Apache, FileZilla FTP Server, MySQL, SQLite, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System, WEB-DAV + mod_auth_mysql, Ming, JpGraph, mcrypt, eAccelerator. platforms: windows, solaris, mac os x, linux. read the Vista/7 problems FAQ before installing on Vista/7.
Bitnami LAMPStack, bitnami.org, free
Linux Apache web server, MySQL database server, PHP server-side scripting.
Bitnami MAMPStack, bitnami.org, free
Mac OSX Apache web server, MySQL database server, PHP server-side scripting.
Bitnami WAMPStack, bitnami.org, free
Windows Apache web server, MySQL database server, PHP server-side scripting.
Bitnami LAPPStack, bitnami.org, free
Linux Apache web server, PostgreSQL database server, PHP server-side scripting.
Bitnami MAPPStack, bitnami.org, free
Mac OSX Apache web server, PostgreSQL database server, PHP server-side scripting.
Bitnami WAPPStack, bitnami.org, free
Windows Apache web server, PostgreSQL database server, PHP server-side scripting.
Bitnami RubyStack, bitnami.org, free
Windows Apache web server, MySQL database server, Ruby on Rails scripting. you might be hard-pressed to find a hosting server that supports Ruby.
Apache Friends' XAMPP, bitnami.org, free
multi-platform. has issues working on newer versions of windows. has everything you could want in a web server - email server, filezilla ftp server, apache web server, php, mysql and a control panel to start and stop them.
CSS Cleanup
Web Developer Toolbar, , free
ff,chrome
DustMeSelectors, brothercake.com, free
lower versions of ff
Browser Shots
FireShot, ff, ff, pay or free.
ff,seamonkey,tbird,ie,chrome
Browser Testing
sites to test your on-server web page in many flavors and versions of browser.
Adobe Browserlab, built into dreamweaver, pay(?) $?
service featurelet of CS Live, not sure how much it costs yet maybe they dropped the costs. includes betas of IE and latest versions of browsers. high quality. onionskinning with choice-of-2-browsers fader, 4up or 2up view. browsers don't get too old (I think has IE5.5 but not anything less). you can set the delay in seconds of the snapshot for javascript to kick in or for slow servers. you get an unclickable browser image. has rulers. the page isn't live. it's a snapshot. think of it this way, it's like they have a whole bunch of VM's running different OS's each with different browsers, and these are fed your URL and after the time you specify, you see an image snapshot of the resulting page, and you can visually compare the difference between browsers (you can select the browsers yo uwant to test). to my understanding it doesn't do devices. adobe has a different program for that.
BroswerShots, , free
browsers go back really far, but they don't get very recent. for instance, there is no IE9 beta, but there is IE8. there is no Opera 10.
has some interesting ideas to simplify things or add more functionality. also, browser and device testing on one web site.
Resource Articles
has some interesting ideas to simplify things or add more functionality. also, browser and device testing on one web site.
validation
XML Schema+XML validator, available from corefiling.com
very nice error checking! must browse to files only though.
XML/xslt/fo editor/debugger, available from corefiling.com
very nice error checking! must browse to files only though.
w3c MobileOK checker, available from validator.w3.org/mobile
list of w3c-supplied validation tools, available from www.w3.org/QA/Tools/
HTML5/XHTML5/SVG1.1/MathML3.0/HTML4.01/XHTML1.0strict validator, available from validator.nu
seems to work, but stops short after a certain number of error messages, like 800, unfortunately.
CSE HTML validator, available from htmlvalidator.com
settable number of error messages. all sorts of validation including HTML5 and CSS and Canada stuff.
js libraries
jquery: animation and DHTML library
32K compressed. some plugins have graphs.
extjs - free GUI library with graphs
you can make a desktop with it. the graphs are not as detailed and nice-looking as you would find in Excel, but they are functional and get the basic idea across.
math.js: math library that handles units and equations as strings and gives Number
github project site/how to use is on project page, examples, not sure if this does SI and IEC units.
edit HTML5 and JS and CSS online and show it to someone else, and let them edit/fixup too! this has versioning, which is the last number on the URL when you post. you get a nice short URL you can tweet or share on facebook or put in your forum posts or in online meetings.
paste your code on the internet with color syntax highlighting! cqan have an expire time if you want, or never expire. has other interesting options. big choice of languages. for example, if you want to post HTML on yahoo answers to get some questions answered about HTML, this is really the best way to do it. you get a nice short URL you can tweet or share on facebook or put in your forum posts or in online meetings.
jquery plugin justified gallery - free, supposed to be like flickr/google+
browsers & browser VMs
has a debugger, ctrl-shift-s, or ctrl-shift-i, or F12.
you can develop plugins and ff os apps, debug JS, inspect HTML+CSS, log network errors etc. ctrl-shift-s, or ctrl-shift-i, or F12.
has a debugger, ctrl-shift-s. unlike most browsers, this browser a strict HTML5+CSS and will fail to load the page if not up to spec. so developing successfully for this browser can be difficult. I don't know how Apple does it.
doesn't handle MathML correctly last time I checked.
unofficial, separate 64-bit build of firefox
has debugger, hit F12.
many versions of IE
minimalistic. has debugger.