Mau

Bien, si son freelancers o empresas que recién empiezan, es una buena forma legal de partir (y quizás de mantenerse así, sin tener que depender de pagar por licencias de software como adobe, bajo casi cualquier sistema operativo, y con muy buenos resultados. Los que voy a presentar acá funcionan para Windows, Linux y Mac.

Planificiación

Cuando se diseñan sitios web se necesitan varias herramientas, para crear flujos de trabajo, documentar procesos.

Lápiz y Papel

Esto no es un software, mas bien un hardware que lo pueden adquirir en cualquier librería. Con esto pueden hacer planificación, documentación, diseñar, paper prototyping, etc.

Freemind

Este es un programa para crear mapas de pensamiento, enlazar ideas y crear desde una base poco estructurada hacia algo más ordenado. Sirve, en este caso, para crear una idea general de lo que será un sitio, sus secciones y cantidad de vínculos que podría tener un sitio. También para visualizar la arquitectura general de lo que estamos construyendo.

DIA

Este es como MS-Visio que sirve para hacer diagramas de flujo, a diferencia de Freemind, este nos permitirá construir esquemas relacionales más complejos, como para determinar los flujos y operaciones del sitio en general o partes de el. (funcionamiento de formularios, Bases de datos, acciones del usuario, etc.) La versión para Mac se puede descargar aquí

OpenOffice

Este es un reemplazo alternativo a Office, funciona de manera similar y es igual de robusto (un poco más feo nada más, pero la nueva versión promete) Y es compatible con los archivos de Office.

Gráfica

Este es el punto complicado para el diseño web, cuesta mucho encontrar una herramienta ideal para realizar mock-ups de un sitio, pero voy a dar las que más se acercan o acomodan a lo que sería un software como los de Adobe.

GimpShop

Es una versión alternativa del proyecto GIMP, que es un software de manipulación de imágenes muy similar a Photoshop. Esta versión en especial trata de proveer de una interfaz más cercana a Photoshop, a diferencia del GIMP original que tiene una apariencia más desordenada. Los que trabajan en gráfica saben lo que molesta tener mil ventanas y herramientas sobre la imagen que están trabajando. Y probablemente si estudiaron diseño, ya estarán acostumbrados a Photoshop. (incluso puede leer y grabar archivos de photoshop y muchos otros formatos de imagen)

Inkscape

Este es un ilustrador vectorial, similar a Illustrator o Freehand, posee casi las mismas herramientas y  capacidades de esos programas. Si les acomoda más para crear las maquetas de las distintas pantallas de un sitio, y después retocar y refinar en GimpShop.

Programación y desarrollo

Existen muchos editores de código abierto, si arman sitios web probablemente estarán pensando en algo como Dreamweaver, pero existen alternativas muy buenas y gratuitas (además de libres). Voy a nombrar uno solo, ya que es el más estable que he probado y a pesar de que es un poco pesado para un computador, es muy versátil.

AptanaIDE

Este es un entorno de desarrollo, aparte de poder codificar una página web y armar un sitio completo, podrán desarrollar programas en otros lenguajes como PHP, Java, Perl, Javascript, ASP, Ruby, AIR, etc… Incluso existen entornos de desarrollo para iPhone y librerías para trabajar rápidamente con AJAX.

Está basado en Eclipse, que es un entorno de desarrollo. Si están en Linux, pueden partir instalando Eclipse y luego descargar los componentes de Aptana para Eclipse.

Es lo más cercano a trabajar con la facilidad de Dreamweaver, ya que tiene las ayudas de texto, previsualización y sistema de desarrollo basado en proyectos o sitios.

Testeo

Para poder probar lo que estamos haciendo, sobre todo si se construyen sitios dinámicos, es probable que necesitemos un servidor de pruebas, y que mejor que hacerlo de forma local, es rápido, podemos trabajar sobre los archivos inmediatamente y visualizar los cambios.

Para esto hay que instalar un set de herramientas que provean ese entorno.

XAMPP

Este paquete de aplicaciones instala un servidor Apache, un gestor de bases de datos MySQL y PHP para interpretar ese lenguaje. Sobre eso podrán instalar un montón de aplicaciones como blogs, sistemas de portal y comercio electrónico que estarán funcionando dentro del pc como si estuvieran en internet.

Incluso sirve para probar con los sitios de web estáticos. Este grupo de programas funciona de una forma medio invisible, ya que la mayor parte de las acciones que se realicen en el se harán a través de un navegador como Firefox o Internet Explorer.

Browsers (Navegadores)

Los testeos e implementaciones nunca estarán completos si no comprobamos en distintos navegadores el cómo se comporta el sitio. Ya que cada uno tiene distintas reglas para interpretar lo que está en el código fuente de una página.

En general la mayoría de los navegadores están disponibles para todos los sistemas operativos de forma nativa. Salvo por Safari e Internet Explorer en Linux, que necesitan de otras formas de instalarlos. Pero sugiero que instalen Firefox, Opera, Safari y Explorer para tener a los navegadores más populares. Incluso si están trabajando con otros medios quizás tengan que instalar Lynx (mac) o algun otro tipo de navegador especial.

Bien, eso cubre la mayor parte de las cosas que necesitarían para trabajar en diseño y desarrollo web con herramientas gratuitas.

En el caso de crear contenido en flash, existen varias herramientas que pueden crear animaciones en formato flash, incluso OpenOffice puede crear ese tipo de animaciones con Impress (powerpoint). Pero no lo recomiendo por un tema de optimización de las animaciones para web. En ese caso es mejor utilizar Flash original. (En Linux Flash MX corre muy bien bajo Wine).