HW & SW for web and graphic work

 
You can hover the mouse over acronyms to find out their meaning. I've used the <acronym></acronym> tag on them.

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.

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.
Editor/CASE/IDE: Eclipse
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. Even has a Requirements Engineering plugin. has quick-UML plugin. 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 programmer's tool. PHP is finished I think. Never figured out how to use it.

web site creation tools - graphics
Adobe Photoshop Extended CS5 $999 (upgrade $349), available at adobe.com/photoshopextended
Mac, Windows. uses adobe extendscript scripting language, which is I think a much later version of Javascript than what is used in browsers. the $1000 flagship of photo editors and the standard file format used for photo exchange used in newspapers, business, web, pretty much everywhere. Often used with Illustrator, which is the vector graphics package, for another $700, but for the price of those two you can get a Premium Suite with many more packages. 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 never could afford it). maybe someday I can upgrade. takes Photoshop filter Plugins - wow you can do some amazing stuff with those! features in addition to regular photoshop: 3d painting and compositing, 3d object and property editing, content-aware scaling, masks panel, adjustments panel, smoother panning and zooming, 360-degree panoramas, auto-blending of images, fluid canvas rotation, single-key shortcuts, 3d object animation, better raw image processing, file display options, extended depth of field, broad file format support, enhanced color correction, quantitative data extraction, improved count tool, scale markers, MATLAB support, Quick selection tool, high quality output, 32-bit high dynamic range (HDR) support, DICOM volume rendering, DICOM image support, more powerful printing options, richer painting and drawing toolset, higher performance on very large images, integration with other adobe software such as lightroom & illustrator & pdf & indesign, rotating motion blur and other motion blur simulation, edit tracking, 3d object animation, and you can measure dimensions of a room given the picture of it.
Adobe Photoshop CS5 $699 (upgrade $199), available at adobe.com/photoshop
Mac, Windows. uses adobe extendscript scripting language, which is I think a much later version of Javascript than what is used in browsers. the $700 flagship of photo editors and the standard file format used for photo exchange used in newspapers, business, web, pretty much everywhere. but it's expensive. Often used with Illustrator, which is the vector graphics package, for another $700, but for the price of those two you can get a Premium Suite with many more packages. 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 never could afford it). maybe someday I can upgrade. takes Photoshop filter Plugins - wow you can do some amazing stuff with those! Sorry, I do not have experience with photoshop, but I am told it has pretty much everything except a good set of vector tools - they left that up to illustrator.
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!
Adobe Fireworks $299 (upgrade $149), available at adobe.com/fireworks
Mac, Windows. make animated gifs, animated swf's, design wireframe web sites where pages (including forms) have some common content/look-and-feel before you go into dreamweaver to flesh it out. made for animated gifs and flash swf animations, specifically for the web, but it doesn't do flash as well as flash. 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 photoshop because I never could afford it). Onionskinning, keyframes just like Flash. deals with objects and editor looks very similar to flash, same tools.
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),
Pattern Studio $68 (upgrade $15), available from mediachance.com
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.

XAMPP, xampp.org, free
Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, and WEB-DAV + mod_auth_mysql. 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, browserlab.adobe.com, pay service featurelet of CS Live, not sure how much it costs yet.
includes IE9 beta, 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.
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.

ways to advertise your site yourself
got a site built? you will probably need some search engine marketing - here's some DIY (Do It Yourself)
overture.com $pay-per-click
sure-fire way to get to the top of the search engine - the more you pay, the higher up you get on the search results.
you have your own management area, and you can submit as many sites as you want. submissions require verification. crawl stats, crawl errors, etc. yahoo support says there is no way to remove your site from yahoo - they say to use bing webmaster tools, however, my site is not even IN bing webmaster tools, and adding and removing it on bing I think probably makes no difference. bing recently cleaned out all the webmaster tools accounts - but left the sites in the results.
you have your own management area, and you can submit as many sites as you want. submissions require verification. keywords searched, crawl stats, crawl errors, etc. and more features coming. custom search engine (CSE) for those who want to put google search on their pages to search their oen site. XML sitemaps can be done as well. requires a google account. you can use your regular yahoo email address and a password of your choice.
don't know if this is still valid, heard microsoft went to pay-only submission.
bing/msn now has a webmaster tools thing for webmasters. requires a windows live ID. you can use your regular yahoo email address and a password of your choice. bing recently cleaned out all the webmaster tools accounts - but left the sites in the results.
index.com $free I think
This is a categorized catalog of businesses only, for business only.

got a site built? want to use google, yahoo, or some other search engine and have your own search box? what I find for search boxes will be listed here.
Google Custom Search Engine $free (with ads) or $100
gives you HTML code to put in your search box. you will have to put the <link ...> tag within your <head> </head> tags.
Bing Box $free (with ads) or $100
gives you HTML code to put in your search box. you might have to brand/customize the HTML (depending on the type you select).
gives you HTML code to put in your search box. you will have to put the <link ...> tag within your <head> </head> tags. be warned, this search engine's locale is Australia, not the USA, so using it may permanently mess up your search results if you live in a different country. Alpha is in the Beta stage of development (fancy saying that!) and has not been released yet and apparently is still in development stages. I can't seem to find it in the USA.

training
need training to do HTML+CSS? Javascript and DHTML? plan to do PHP and MySQL? I once suggested w3schools, but now I don't. full of errors, bad examples, and not associated with w3c (w3c has asked them to cease). so I am in the process of finding new places that offer proper training.
XHTML 1.0/1.1 , w3c 'xhtml 1.1 basic' standard $free
xhtml should be avoided because it's hard to configure the server to properly serve it up.
css, $free
html css $free
dhtml $free
jQuery, popular $free
you can do effects and animation with this if you are clever.
php $free
sql $free
asp, asp.net, $free
only if you are going to be a web developer or need access to the innards of the web server or you prefer BASIC to C coding.
Adobe Flash, optional $free
XML, optional $free
sooner or later, you are going to run into XML. it is a data format, usually for storing config settings or databases. It is a free-form structure, and it is like HTML, except the tags are custom, whatever you want them to be. you can optionally provide a DTD to define the valid element/tag and attributes structure. only the parser will pay attention to the DTD. Associated technologies you may wish to learn are XPATH, XSLT. oftentimes, XML data might be passed between the server and the browser (AJAX).
search engines, optional $free
dreamweaver, optional $free

books
Hip Pocket Guide to HTML 4.01 (IDG Books). no longer available new. $1.99
if you can still get this, get it! Good for HTML 3 & 4 - shows deprecated tags. Note: this does not fit in a shirt or in a hip pocket! there is also an html 4.0 and an html 3.2 version which will work just as well.
http://www.visibone.com/ laminated charts/reference sheets! $40
mysql, javascript, css, html, special chars, fonts, colors, js regex, language codes, blah blah.
instruction and tips on how to do web design and graphic design without wearying your users. things like, 3 clicks and they are outta here. I know. my site is hard to navigate because of its sheer size.
catalog of web design ideas
CSS Cookbook $28-$49.99
this is a good cookbook for CSS. I highly recommend it. everything from breadcrumb menus, horizontal and vertical menus, tab menus, tips tricks, some basics. not a beginner's book.

6/29/2011:You need:

  • $110-250 scanner. USB should be simpler to plug in and install. There is probably one on your printer, hopefully. but like the site says, there are 2 types: photos or documents.
  • free Web server package. Use IIS (if you don't mind locking it down severely) or PWS if you plan on developing ASP scripts or better yet, I suggest XAMPP, which contains Apache + PHP + MySQL. LAMPP for linux for PHP+MySQL+Apache
  • Books: pick your books carefully. different books for different audiences. Expect $15 for a hip pocket guide, and $40-60 for a good solid all-around book.
    Get one on HTML 4.01 and 5 and XHTML that lists all the tags in alphabetical order and lists all the attributes of the tags and explains them and gives examples of how to use them. You will also want a book that talks about CSS 1-3, and possibly another on DHTML (dynamic HTML), Javascript, PHP+MySQL or ASP.NET if you can handle some programming. XML, XSLT, and DTD's wouldn't hurt either.
  • $1899 or subscription Adobe Adobe CS Web Premium (or master collection) for images, vector graphics, animation, wireframes, video, audio, devices, etc. Everybody expects you to use Photoshop, including the newspapers (they want 220dpi b&w).
  • $0-300/year Hosting. There are more expensive hosting for $25/mo ($300/yr). Try dreamhost or $200/yr penguinwebhosting.com for PHP+MySQL hosting. 75GB + 700GB BW (most web hosting do not allow MP3's). If you need software hosting go to digital river. Other hosting packages using ASP are available if you prefer learning ASP for a job, but they are more expensive ($25/mo).
    For free hosting try PHP+MySQL-based 110mb (2GB space), freewebsitespace (1GB space), hostfreeweb (100MB space), or Template-based freewebs (40MB space). The template based site has very professional templates for beginners or people who aren't graphic designers.
  • magazines: web designer, and Layers Magazine at Barnes & Noble and Powell's Techbooks

browsers and browser testers/emulators

  • Adobe Dreamweaver CS5 can test multiple browser types and versions by simply checking which browsers you want to test for through browser shortcut installation or by browserlab (an online service for online sites).
  • Google ‘IE Tester’. It’s a free app that lets you view pages in all IE versions from 5.5 to 8. Normally it is problematic to get more than 1 IE onto an OS at a time without using 1 per OS on VMware.
  • IE, preferably the latest version. (well that's a misnomer now, since it's 8 on xp, 9 on vista, and 10 on 7... yuck)
  • Google Chrome browser
  • Apple Safari (requires installing quicktime and itunes and mobileme control panel applet unfortunately)
  • Opera browser (free version)
  • Firefox or SeaMonkey
  • Linux: Konquerer browser doesn't support .net or javascript.
  • icefox/Arora browser. doesn't support .net or javascript I don't think.