Diseño Web con GNU/Linux

Diseñando Webs con GNU/Linux

Jesús David Navarro

jEsuSdA 8)

Konqueror, Firefox , Opera y Chrome

Í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 y Planificación

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: KPlato

KPlato

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

Podríamos usar también TaskJuggler o Planner

Planificación: Planner

Planner

Planteamiento y Planificación

Agenda y Comunicación:

Planteamiento y Planificación

Agenda y Comunicación:

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

Agenda y Comunicación: Kontact

Kontact

Agenda y Comunicación: Thunderbird

Mozilla Thunderbird

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

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: Kdissert

KPlato

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

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

Bocetado: Pencil

Pencil

Diseño Gráfico: Inkscape

KPlato

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: 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 Web: NVU / Kompozer

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/

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.

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: Geany

IDE Geany

Desarrollo Web: Aptana Studio

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.

Tiene un muy buen soporte para Javascript, AJAX, frameworks de PHP, etc.

Otros editores web que podemos encontrar en entornos libres son:

CSS: CSSED

Editor CSS CSSED

Programación

Gestores de Contenido (CMS)


Los CMS's más populares y famosos son, como no, software libre:

Joomla, Drupal, phpBB, Wordpress, Textpattern, MediaWiki, OsCommerce, Moodle, etc., etc., etc...

Gestores de Contenido

Programación

IDE's


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.

Desarrollador Web

Bases de Datos: MySQL Workbench

Editor de bases de datos MySQL Workbench

Bases de Datos: SQLite Studio

Editor de bases de datos SQLite Studio

Acceso FTP: BareFTP

Acceso a FTP con BareFTP

http://www.bareftp.org

También podéis usar FileZilla, muy famoso entre los usuarios de Windows: http://filezilla-project.org

Pruebas

Fase de pruebas de una web

Servidor Web Pruebas: XAMPP



Pequeño servidor web XAMPP

http://www.apachefriends.org/es/xampp.html

Si tu sistema es de 64 bits, instala el paquete ia32-libs para permitir que XAMPP se ejecute correctamente.

  • Apache
  • MySQL
  • SQLite
  • PHP
  • Perl
  • Servidor FTP

Otra buena opción es crearnos una máquina virtual con VirtualBox, instalar una distribución básica de Linux (Debian minimal, Ubuntu Server, etc.) y montar nuestro propio servidor LAMP.

Pruebas en diversos Navegadores en Linux



Konqueror, Firefox , Opera y chromium

El motor KTHML/Webkit es usados por multitud de navegadores para dispositivos móviles y por el navegador web para MacOs (y ahora también para Windows) Safari, así como otros muchos.

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

Pruebas en navegadores de MSWindows

Internet explorer

IEs4Linux
Ies4Linux , Wine-Doors , PlayOnLinux

Ies4Linux, Wine-doors y PlayOnLinux son scripts que nos permiten 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 con Internet Explorer con WINE

Internet Explorer en Linux

Pruebas con Safari con WINE

Safari en Linux

Basta con instalar Play-On-Linux (www.playonlinux.com) y desde la administración de programas, solicitar que se instale SAFARI.

Pruebas con VirtualBox

Windows ejecutándose como máquina virtual con VirtualBox

Firefox: Web Developer

Extensión Web Developer para Firefox

Firefox: Web Developer

Extensión Web Developer

Firefox: Firebug

Extensión FireBug  para Firefox

Firefox: Firebug

Extensión FireBug

Firefox: Otras Extensiones útiles

HERA
Extensión con ayudas sobre accesibilidad web.
Mapa de Documento
Permite examinar la jerarquía de contenidos de una página.
Fangs
Muestra en texto la transcripción que haría de la web un lector de pantalla.
Flash Block
Permite bloquear las animaciones flash.

Firefox: Más extensiones útiles

Page Speed
Análisis de velocidad de carga.
Reload Every
Recarga automática de páginas web a intervalos regulares.
ScreenGrab
Capturas de pantalla de páginas web.
Small Screen Rendering
Simula tamaños de pantalla pequeños.

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.

Revisión Accesibilidad

Accesibilidad

Documentación

OpenOffice.org

OpenOffice / LibreOffice

OpenOffice.org

OpenOffice soporta la visualización y edición de archivos de MSOffice 2007 (pej.: .docx ) y anteriores (pej.: .doc).

Gracias a la extensión SUN PDF IMPORT, OpenOffice premite la edición de PDF's.

KOffice / GnomeOffice

KOffice

Muchas veces no necesitamos toda la potencia de una suite compleja como OpenOffice. En esos casos resulta muy útil usar Koffice y Gnome Office, pues son aplicaciones más limitadas, pero mucho más livianas y rápidas que OpenOffice.

Diseño Web con GNU/Linux


¡¡¡ ES POSIBLE !!!

¡¡ ES POSIBLE !!

Para terminar...

Creative Commons Reconocimiento-No comercial-Compartir igual

Licenciado bajo Creative Commons

Reconocimiento - No Comercial - Compartir igual

Puedes:

  • Copiar, reproducir, mostrar públicamente y modificarlo, siempre y cuando cites al autor (o sea, yo),
  • no lo uses para fines comerciales,
  • y las obras derivadas se mantengan bajo esta misma licencia.

Para terminar...

¿Preguntas?

Monstruitos!

¡Muchas gracias!