Diseño web libre

Sólo unas pequeñas guías para los que quieran empezar con el diseño web usando software libre sobre GNU/Linux. Son recomendaciones, a partir de ahí cada cual que elija lo que quiera. Tened en cuenta que no soy un diseñador web profesional (aunque he cobrado por ello en varias ocasiones).

Creación del diseño

Yo uso Inkscape. Al ser un editor de gráficos vectoriales y no de mapa de bits, es muy sencillo realizar diseños y modificarlos.

Troceo

Una vez realizado el diseño se suele trocear éste para aprovechar patrones que se repiten, para que la web tenga menos peso y, cuando sea posible, redimensionar ciertas zonas en el HTML según su contenido.

Lo que hago es exportar desde el Inkscape todo el diseño a un PNG. El archivo resultante lo abro con Gimp. Ahora sólo hay que fijar las guías por donde quieras recortar (arrastrando desde la regla) y usar el comando del menú "Image/Transform/Guillotine". Automáticamente te abrirá en un documento nuevo cada trozo para que hagas con él lo que quieras.

Hay que reconocer que para los que vengan del Photoshop, el Gimp os va a resultar poco intuitivo (lo mismo dirán los que usen Gimp y vean Photoshop, obviamente). Para los que quieran tener el feeling de Photoshop en Gimp pueden usar GimpShop. Yo no lo he probado, por tanto no lo recomiendo. Además, el desarrollo de Gimp está siendo encaminado a hacer su interfaz cada vez más intuitiva (y la verdad es que tampoco se diferencia tanto de otros programas de este tipo).

También os recomiendo otro programa con el que la mayoría os sentiréis más cómodo que con el Gimp: Krita. No es un programa tan avanzado como Gimp pero es más sencillo de usar (todo ésto según mi opinión). Además es un programa de KDE (que es lo que yo uso) por lo que está mejor integrado con mi sistema.

Sobre Inkscape y Gimp hay miles de tutoriales, video-tutoriales y revistas en Internet. Acudid a Google, please.

Edición HTML

Para esta sección no hay una opción clara. Yo uso varios programas, ya que cada uno ofrece más facilidades para ciertas tareas. Yo os recomiendo que probéis varios y elijáis el que más os guste (o haced como yo y usad varios).

Os voy a ahorrar un pequeño trauma y no diré nada acerca de Vim, pero que sepáis que también lo uso.

Hay dos opciones claras en cuanto a editores de HTML Bluefish y Quanta Plus. Como he comentado, cada uno tiene opciones que el otro no tiene, por lo que en cada caso verás qué es lo que necesitas.



Como en el caso de Krita, Quanta Plus está desarrollado usando las librerías de KDE por lo que la integración es mayor. También, a simple vista, parece tener más opciones que Bluefish, aún así yo uso ambos (como en el caso de Gimp/Krita).

Existen también editores de CSS, pero como sólo he usado los que vienen integrados en los editores de HTML no comentaré ninguno. Aunque ya digo, haberlos hailos.

Editores WYSIWYG (lo que ves es lo que [deberías] tener)

Quanta Plus tiene un modo de visualización integrado que es bastante útil en muchas ocasiones (lo cual es un punto de ventaja sobre Bluefish). Se puede visualizar también junto al código HTML.

Kompozer ha sido denominado como la alternativa libre del Dreamweaver (programa que nunca me ha gustado pero parece ser el más usado por los profesionales). Tiene buena pinta y realmente parece funcionar como el Dreamweaver. He abierto algún diseño mío ya hecho y lo lee y muestra bien (otra cosa será crearlos). Kompozer es una versión mejorada de Nvu, programa que usaba hace tiempo y que me dio serios dolores de cabeza (por su estabilidad, cosa que en teoría se ha solucionado en Kompozer) pero que me ayudaba cuando tenía que formatear rápidamente textos.



Amaya es el editor web (también funciona como navegador) desarrollado por W3C por lo que habrá que suponer que el código generado será estándar. Puede editar también XML, tiene facilidades para editar SVG, ecuaciones matemáticas, etc. por lo que parece que puede ser bastante útil para hacer cosas especiales o cuando queramos buscar el camino estándar para hacer cualquier cosa rara... (como animaciones de gráficos vectoriales sin usar Flash ni cosas así).

¿Cómo instalar estos programas?

Todos los programas que os he comentado los he instalado con el aptitude en Kubuntu 7.10 descomentando los repositorios que aparecen por defecto en el sources.list. Si en vuestra distribución no tenéis esta opción mirad por los enlaces o buscad por ahí ;)

Formatos y estándares

Yo procuro usar PNG casi siempre. Y JPG cuando no hay más remedio (si la página está demasiado cargada, ya que los JPG suelen ocupar menos pero tiene pérdida de calidad).

Procura usar los estándares CSS/XHTML al codificar la web, que para algo son estándares. Yo siempre tengo a mano estas referencias: W3Schools y gotAPI.

Enlaces

Algunos enlaces de referencia (advertencia: os recuerdo que gratis!=libre):
45 Best Freeware Design Programs
Las mejores herramientas gratuitas para diseño
KompoZer, editor WYSIWYG de paginas web

Fin

Bueno, espero que la pechá de escribir e investigar que me he dado sirva para que alguna personas se pase a diseñar en GNU/Linux.

¡Qué disfrutéis!