Diseño de páginas Web con GNU/Linux

DISEÑO DE WEB'S CON GNU/LINUX

Jesús David Navarro

jEsuSdA

Konqueror, Firefox y Opera

Índice

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

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.

Planteamiento

Planificación: KPlato

KPlato

Kplato: http://www.koffice.org/kplato

Podríamos usar también TaskJuggler o Planner

Planteamiento

Agenda:

Diseño

Diseño

Arquitectura: Kdissert

KPlato

KDissert: http://freehackers.org/~tnagy/kdissert.html

Podríamos usar también Dia o Umbrello para el diseño UML.

Diseño

Diseño Gráfico: Inkscape

KPlato

Diseño

Colores: Agave

Agave

Diseño

Colores: KColorChooser

KColorChooser

Maquetación

Maquetación

Preparación de Gráficos: Gimp

Gimp

Gimp: http://www.gimp.org

Algunas herramientas útiles para web en Gimp son: Perl-o-tine, PySlice y Mapa de Imagen.

Otra utilidad que suelo usar bastante es optipng para optimizar los gráficos PNG.

Maquetación

Código (X)HTML: NVU

Editor Web NVU

NVU: http://www.nvu.com

El sucesor oficial de NVU será Composer, que aún está en desarrollo.

Existe un fork de NVU no oficial que solventa varios bugs y añade alguna funcionalidad adicional: Kompozer.

Maquetación

Código (X)HTML + CSS + ...: Quanta+

Editor Web Quanta+

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.

Maquetación

Código (X)HTML + CSS + ...: Bluefish

Editor Web Bluefish

Bluefish: http://bluefish.openoffice.nl

Otros editores web que podemos encontrar en entornos libres son:

Maquetación

Código (X)HTML + CSS + ...: Aptana

Aptana

Aptana: http://aptana.com

Aptana es un módulo orientado al desarrollo web para Eclipse.

Como tal, está basado en JAVA y bien se puede obtener en un paquete independiente o como módulo para Eclipse.

Maquetación

CSS: CSSED

Editor CSS CSSED

Programación



La mayoría de entornos de desarrollo web vistos anteriormente tienen soporte para varios lenguajes de programación web: JavaScript, PHP, Perl, Ajax, Ruby on Rails, etc.

Pruebas

Pruebas

Navegadores

Konqueror, Firefox y Opera

Motores como KTHML son usados por multitud de navegadores para dispositivos móviles y por el navegador web para MacOs (y ahora también para Windows) Safari.

Motores como Presto son usados para otra serie de sistema móviles y para consolas como Nintendo DS o Wii.

Pruebas

Navegadores

Internet explorer

IEs4Linux
Ies4Linux

Ies4Linux permite instalar y ejecutar, mediante Wine, Internet Explorer en sistemas Linux.

Una de las ventajas que tiene es la de poder tener varias versiones de IE simultáneamente: 5, 5.5 y 6.

Se recomienda tener instaladas las fuentes de letra típicas de sistemas Windows. En distribuciones Debian es tan fácil como instalar el paquete msttcorefonts.

Pruebas

Navegadores

Internet Explorer en Linux

Pruebas

Firefox: Web Developer

Extensión Web Developer para Firefox

Pruebas

Firefox: Web Developer

Extensión Web Developer

Pruebas

Firefox: Otras Extensiones útiles

HERA - http://www.sidar.org/extension
Extensión con ayudas sobre accesibilidad web.
Mapa de Documento - https://addons.mozilla.org/firefox/475
Permite examinar la jerarquía de contenidos de una página.
Fangs - http://sourceforge.net/projects/fangs
Muestra en texto la transcripción que haría de la web un lector de pantalla.
Flash Block - http://flashblock.mozdev.org
Permite bloquear las animaciones flash.

Pruebas

Revisión Accesibilidad: TAW

Test de Accesibilidad Web

TAW: http://www.tawdis.net/taw3/cms/es/herramientas/desktop.html

Recordad que los test de accesibilidad tienen ciertas partes mecánicas y otras muchas manuales que deben ser evaluadas por técnicos conocedores de las pautas WAI. El mero hecho de no tener ningún error en la validación mecánica (que es la que hace TAW) no implica en modo alguno que se cumplan las pautas de accesibilidad.

Pruebas

Revisión Accesibilidad

Accesibilidad

Documentación

OpenOffice.org

Para terminar...

Creative Commons Reconocimiento-No comercial-Compartir igual

Licenciado bajo Creative Commons

Reconocimiento- No Comercial - Compartir igual

Para terminar...

Puedes:

Para terminar...

¿Preguntas?

tuxes

¡Muchas gracias!