Diseño Web con GNU/Linux

¡MANOS A LA OBRA!

Jesús David Navarro

jEsuSdA 8)

Proceso...

Planteamiento y Planificación
Diseño
Maquetación
Programación
Pruebas
Documentación

Existen diversas metodologías para el desarrollo de un proyecto informático y más concretamente un proyecto web, todos ellos tienen ventajas e inconvenientes y dependen directamente de la magnitud del proyecto y de los recursos humanos que conforman el equipo de trabajo.

En esta sección explico la metodología básica que suelo seguir en mi trabajo diario. El equipo de trabajo es reducido y suele estar compuesto por un diseñador web y un programador. En ocasiones especiales contamos con la ayuda de un diseñador gráfico, un documentalista y algún programador extra, según proyecto.

En este tipo de equipos, suele optarse muchas veces por un sistema basado en la programación extrema.

Yo, personalmente, prefiero un sistema más mixto, con un trabajo previo de planificación general y de las secciones críticas y entrevistas con el cliente para concretar aspectos relevantes del proyecto.

Posteriormente, se pasa al sistema propio de Programación extrema, donde se van implementando avances continuamente y el cliente revisa cada novedad, sugiriendo los cambios convenientes y trabajandose paralelamente en las tareas de diseño y programación.

Como dije antes, esta sección está basada en la metodología recién descrita.

Planteamiento y Planificación

Propuesta
Recopilación de datos
Planificación
Control de tareas, medición de tiempo

Para la propuesta y para el intercambio de notas y documentos con el cliente, lo normal es usar una suite ofimática como OpenOffice.org o KOffice. Usaremos preferiblemente el formato PDF para el envío de archivos.

Planificación: Planner

Planner

Planner: http://live.gnome.org/Planner

Planificación:

Podríamos usar también:

Planteamiento y Planificación

Agenda y Comunicación:

Correo electrónico
Contactos
Agenda
Tareas
Muy conveniente, además:
- Sincronización con entornos de trabajo "Groupware"
- Sincronización con Smartphone o PDA

Planteamiento y Planificación

Agenda y Comunicación:

Agenda y Comunicación: Thunderbird

Mozilla Thunderbird

En Debian, Thunderbird se llama Icedove: http://es.wikipedia.org/wiki/Icedove

Agenda y Comunicación: Kontact

Kontact

Existe un proyecto relacionado con Kontact que provee un entorno uniforme de trabajo en Grupo: KOLAB

Control de tiempo: Hamster

Hamster

Hamster: http://projecthamster.wordpress.com/

Hamster es la herramienta ideal para los freelancers, ya que permite llevar el control de todo el tiempo invertido en la realización de los trabajos. Con los datos recopilados podremos elaborar estadísticas e informes que nos serán de utilidad para facturar y controlar los proyectos.

Diseño

Arquitectura de contenidos
Bocetos: "Wireframes"
Diseño Gráfico: "Pantallazo"

Arquitectura de contenidos: FreeMind

Freemind

Arquitectura de contenidos:

Podríamos usar también:

Bocetado: Pencil

Pencil

Pencil: http://pencil.evolus.vn/

Diseño Gráfico: Inkscape

Inkscape

Inkscape: http://www.inkscape.org

Colores: Gpick

Gpick

Gpick: http://code.google.com/p/gpick/

También te puede interesar echar un vistazo a Agave: http://home.gna.org/colorscheme

Maquetación Web

Preparación de Gráficos
Código (X)HTML
Código CSS
Código JavaScript

Preparación de Gráficos: Gimp

Gimp

Gimp: http://www.gimp.org

Gimp:

Herramientas útiles:

Perl-o-tine
PySlice
Mapa de Imagen
Gimp Save for Web
David Batch Processor
Optipng (optimizar)
Imagemagick
Phatch

Maquetación Web: NVU / Kompozer / Bluegriffon

Editor Web NVU

NVU: http://www.nvu.com

Existe un fork de NVU no oficial que solventa varios bugs y añade funcionalidades adicionales: Kompozer.

Otro proyecto similar muy prometedor es BlueGriffon: http://bluegriffon.org/, más moderno y enfocado a HTML5 y CSS3.

Desarrollo Web: Gedit + Plugins

Editor GEdit

Cómo preparar GEdit para la edición web: http://www.micahcarrick.com/09-29-2007/gedit-html-editor.html

Desarrollo Web: Bluefish

Editor Web Bluefish

Bluefish: http://bluefish.openoffice.nl

Para KDE existe un programa muy interesante y potente llamado Quanta+: http://quanta.kdewebdev.org

Quanta pertenece al metapaquete kdewebdev, que junto a Quanta+ provee una suite de aplicaciones para el desarrollo web en el escritorio KDE.

Actualmente se está en proceso de migración de Quanta+ a QT4, así que si tienes una distribución moderna, es posible que no puedas instalar las versiones antiguas, que funcionaban con QT3.

BlueFish: Zen Coding

Zen Coding nos ayuda a escribir el código más rápido. Por ejemplo:

div#page>div.logo+ul#navigation>li*5>a

Se transforma en:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>