Re: ¿Linux, para diseño web y diseño grafico? El 07/09/12 18:23,
Altair Linux escribió:
Buenas,
vaya por delante que no pongo en duda, sino que pregunto. No conozco este tema.
Hola Altair,
Lo siento si llego tarde al hilo y si repito algunas de las cosas que
se han dicho ya sobre el asunto, pero creo que, por una vez y sin que
sirva de precedente, puedo aportar algo al tema. :D
Verás, yo me dedico desde hace ya más de 15 años al diseño web, años
antes ya me dedicaba al diseño gráfico y un buen día decidí migrar por
completo a GNU/Linux. Así que la cuestión es que llevo unos 13 años
diseñando webs sólo desde GNU/Linux (sin usar Windows, ni teniendo
dual bot, ni nada de eso, es decir, usando sólo GNU/Linux).
Siempre he oido que en temas de diseño para webs y graficos, lo mejor
son los mac y que los mejores programas son los de adobe. Dreamweaver,
flash, fireworks, etc.
Sobre esto yo siempre he tenido una opinión que pocas veces la gente
comparte. :D
Yo soy de los que piensan que el hábito no hace al monje, y que lo
realmente importante a la hora de diseñar o hacer webs o cualquier
otra cosa es lo que uno sabe hacer y cómo lo hace.
Hay gente que hace auténticas virguerías con vim o emacs y
muchíiiiiiisimos fantasmas que usan dreamweaver sobre mac y no tienen
ni idea de lo que hacen.
En mi experiencia, he encontrado muuuucha gente que usa dreamweaver
para hacer webs y que no usa ni un 1% de las capacidades de ese
programa. Esta misma gente es capaz de quejarse de otros programas de
edición web porque "les resultan insuficientes", cuando tampoco serían
capaces de usar ni el 1% del potencial de esos programas que critican.
En mi opinión, la mayoría de la gente con la que hables del tema
estará en este grupo. No digo que Dreamweaver sea un mal producto, que
no lo es, sino que no es necesario para diseñar ni desarrollar webs en
absoluto.
También hay una vertiente puramente de marketing en todo esto. Nos
guste o no, para la gente que no conoce bien los entresijos de
cualquier profesión compleja (como muchas relacionadas con la
informática u otras), les resulta sencillo asociar ciertas "marcas" o
programas a ciertas tareas. De modo que si eres diseñador gráfico, la
gente dará por supuesto que dominas Photoshop. Si eres animador 3D,
muchos supondrán que dominas Maya o 3DS, si eres diseñador web, muchos
te asociarán con Dreamweaver... y tristemente si eres diseñador de lo
que sea, "molarás" más si usas mac... si llevas gafas de pasta,
zapatillas Converse y subes fotos a Instagram cada 10 minutos... eres
ya un dios! jajajaja
También conozco a muchos diseñadores gráficos que "dominan" Photoshop
y trabajan con un monitor sin calibrar, pero echan pestes de Gimp
porque no es "profesional". Yo ya es que ni me molesto en rebatirles... ;)
Disculpadme si insisto en este tema demasiado, pero es un tema que me
toca sufrir continuamente y con el que me siento tristemente
identificado. Yo valoro la profesionalidad de alguien por su trabajo,
no por las herramientas que usa... pero lamentablemente la mayoría de
la gente no.
Otro de los puntos "calientes" que he leído en algunas respuestas y
que suelen reflejar opiniones comunes es el de la gente que te dirá
que para hacer webs tienes que hacerlas "ASÍ y punto".
Mucho cuidado con ese tipo de comentarios porque a veces son erróneos
por pura ignorancia y otras veces son erróneos sin maldad, pero porque
cada cual tiene su "modus operandi" para perpetrar sus webs.
No trabaja igual un diseñador gráfico, un desarrollador front-end, un
desarrollador back-end, alguien que se especializa en CMS's, otro que
se especializa en arquitectura de contenidos... El desarrollo de una
web completa involucra muchas partes, todas importantes y
especializadas; como es imposible ser un especialista en todo, lo
normal es que uno sepa de todo y se especialice en varios campos (o en
uno) y eso, quieras que no, condiciona la forma de trabajar.
Por hablarte de mi caso concreto, yo me especialicé en diseño web,
maquetación, accesibilidad y estándares; trabajo, además, con varios
CMS. Aunque tengo conocimientos de programación, no suelo dedicarme al
desarrollo, porque reconozco que nunca llegaría a ser tan bueno en ese
campo como lo soy en los otros y, por supuesto, nunca llegaría a ser
tan bueno como los colegas que llevan los mismos años que yo
trabajando, pero dedicados al desarrollo web.
Cuando hay que hacer algo muy muy específico, siempre recurro a
compañeros especializados en desarrollo web, que son los que son
capaces de personalizar un CMS o convertir unas plantillas HTML
estáticas en una web totalmente dinámica y funcional, agregándoles la
programación debida.
Una cosa que aprendí hace tiempo es que cuando uno se especializa
mucho en algo, tratar de hacer tareas que están muy lejos de tu
especialización implica mucho esfuerzo, trabajo, problemas y
aprendizaje.... esfuerzo, trabajo, problemas y aprendizaje que gente
dedicada a esa otra especialidad ya han superado, y que son capaces de
hacer algo que a ti te costaría semanas en horas y, además, muchísimo
mejor que tú.
Así que uno de mis consejos es que aprendas un poco de todo, te
especialices en lo que más te guste y recurras a gente especializada
para el resto de cosas. A ellos les pasará, seguramente, igual que a
ti, y recurrirán a ti para hacer tu trabajo mientras ellos hacen bien
el suyo.
Un poco más adelante te indico cómo trabajo yo y los programas que uso.
La idea es hacer webs como estahttp://www.nominalia.com/ usando
Linux, no necesariamente Debian en caso de haber otra distribución más
adecuada, veo mucha referencia a Ubuntu con este tema.
Respecto a la distribución, como bien te apuntan por ahí, te sirve
casi cualquiera de las generalistas y más populares. Los programas que
necesitas para desarrollar webs están en los repositorios de la
mayoría y si te falta alguno te será sencillo instalarlo.
Yo me siento muy cómodo con Debian Testing. Es mi distribución
GNU/Linux favorita por muchas razones. La principal es que me siento
muy identificado con Debian y su filosofía. Además, y aunque a veces
te den algún susto los mantenedores de paquetes, son gente seria, que
trabaja increíblemente bien y que te ofrecen una distribución muy
estable, cómoda y fácilmente mantenible.
Instalé en mi PC Debian Testing hace más de 4 años y la tengo
funcionando hasta hoy sin problemas. Actualizo cuando lo necesito para
mantener las versiones de los programas con los que trabajo
actualizadas y listo. ;)
En cualquier caso, como te decía antes, puedes elegir la distro que
más se ajuste a tus intereses y preferencias. No tendrás problemas con
el software.
¿Como lo veis?
Aquí te indico mi "modus operandi" y mis herramientas para perpetrar
webs ;)
PRIMERO - ESTRUCTURA DE CONTENIDOS Y DISEÑO WEB
Lo primero al empezar una web es estructurar el contenido, estudiar
qué textos, gráficos, archivos, vídeos, etc. albergará el sitio web y
organizarlos de la mejor forma.
Hacer un esquema de contenidos te será muy útil. Para ello puedes usar
varios programas:
Semantik: http://freehackers.org/~tnagy/kdissert.html
FreeMind: http://freemind.sourceforge.net/wiki/index.php/Main_Page
Vym: http://www.insilmaril.de/vym/
Podríamos usar también Dia o Umbrello para el diseño UML.
Otra parte importante de esta fase es el diseño gráfico de la web, es
decir, qué aspecto tendrá.
Para ello es bueno usar, sobre todo al principio, los WIREFRAMES. Un
WIREFRAME es un boceto rápido y visual de cómo funcionará la web y
dónde estará cada elemento importante de la misma.
Yo uso PENCIL para ello: http://pencil.evolus.vn/en-US/Home.aspx
Una vez tienes clara la estructura de la web, entonces pasas a darle
el aspecto visual final: colores, iconos, fotografías, etc.
Para ello yo uso Inkscape, que es un programa sublime. ;)
http://inkscape.org/
Con inkscape, creo lo que se suele llamar "el pantallazo", es decir,
una imagen que refleja cómo se verá la web una vez esté terminada.
Luego, de ahí voy extrayendo los iconos, fondos, degradados, y
cualquier elemento gráfico que necesite posteriormente para maquetar
la web.
Gimp también lo uso en esta fase para retocar las imágenes y
fotografías que usaré en el diseño de la web.
SEGUNDO - MAQUETACIÓN
La maquetación consiste en convertir el "pantallazo" de la fase
anterior en algo que los navegadores puedan interpretar.
Esto se consigue con HTML + CSS + JavaScript.
Para desarrollar esta parte yo uso Bluefish:
http://bluefish.openoffice.nl/
Y sí, Bluefish es uno de esos editores que sirven para PICAR CÓDIGO A
MANOPLA y te colorea la sintaxis.
En GNU/Linux hay muchos otros editores para esta tarea:
Aptana: http://aptana.com/
Gedit (con algunos plugins interesantes para este menester):
http://www.micahcarrick.com/09-29-2007/gedit-html-editor.html
Geany: http://www.geany.org/
Y hay muchos más... incluso los hay gratuitos, de pago, y específicos
para determinados lenguajes de programación (como PHP, Ruby, Python, etc.)
Todos estos son para PICAR CÓDIGO.
Encontrarás a muchos que te dirán que si no son WYSIWYG no sirven....
bueno, yo ahí discrepo. Creo que si uno quiere hacer un buen trabajo
en la fase de maquetación, necesita "saber lo que se hace", y para
ello, ineludiblemente, tienes que picar el código tú.
Si deseas conseguir un nivel de accesibilidad, respeto a los
estándares web, SEO, optimización y código que sea mantenible y
reutilizable... tienes que picar tú el código a manopla. Para mi esto
no tiene absolutamente ninguna discusión (aunque te advierto que
encontrarás a muchos para los que la edición WYSIWYG es "el todo"...
mi consejo es que huyas mientras puedas de ellos). ;)
Aún así, y si quieres probar algunos editores WYSIWYG, puedes emplear:
Kompozer: http://www.kompozer.net/
BlueGriffon: http://bluegriffon.org/
Este último es más moderno y actualizado y tiene soporte para HTML5 y
CSS3, entre otras muchas mejoras respecto a Kompozer.
Aún así, y si finalmente decides PICAR CÓDIGO, tampoco es tan complejo
ni tedioso hacerlo. Hay muchas ayudas que te facilitarán y acelerarán
el trabajo.
Empezando por "la codificación zen". La Codificación Zen es una
sintaxis que permite ahorrar tiempo al escribir HTML. Tú escribes unas
pocas palabras y tu editor favorito (por ejemplo BLUEFISH) te
"expande" lo que escribiste y te genera el código HTML completo. La
mejor forma de entenderlo y aprenderlo es mirando este artículo y
luego prueba con bluefish y verás que chulo:
https://code.google.com/p/zen-coding/
También ahorra mucho trabajo usar "snipets", o pequeñas porciones de
código preparadas para copy-pastearse en nuestro código de forma
rápida. Bluefish soporta snipets. Hay muchas webs donde puedes
descargarte snipets, aunque lo habitual será que tú mismo te vayas
creando los tuyos propios con el tiempo y vayas teniendo tu pequeña
librería. ;)
También es altamente conveniente usar algún framework de HTML y CSS.
Estos frameworks te ahorrarán mucho tiempo al maquetar, porque vienen
con código ya implementado y estilos CSS predefinidos que tú
simplemente usas. Así te ahorras empezar una web desde cero. ;)
Además te ayudan a crear desde el principio webs que se "ven" bien en
distintos navegadores y se adaptan a distintos dispositivos. Lo que
ahora se llama "responsive web design".
Yo uso y te recomiendo:
Inuit CSS, un framework CSS muy sencillo y útil:
http://csswizardry.com/inuitcss/
HTML5 Boilerplate, un framework HTML5: http://html5boilerplate.com/
Bootstrap, un framework HTML y CSS: http://twitter.github.com/bootstrap/
Ni que decir tiene que para JavaScript, lo más usado es JQuery. Hay
mucho código reutilizable y mucha documentación para hacer casi
cualquier cosa que se te ocurra. ;)
Para probar correctamente todo y ayudarnos a maquetar y solucionar
problemas de maquetación, lo ideal es usar los complementos de Firefox
Web Developer y FireBug:
https://addons.mozilla.org/es/firefox/addon/web-developer/
https://addons.mozilla.org/es/firefox/addon/firebug/
Son, créeme, e-sen-cia-les. ;)
Hasta aquí, habríamos logrado tener una serie de plantillas html + css
+ JS que se abren en un navegador, muestran textos, imágenes, botones,
formularios, etc. etc., es decir, algo que ya funciona dentro del
navegador.
Si la web es un microsite, una web pequeña y estática... hasta te
puedes quedar aquí y no necesitar más, si la web es más compleja,
entonces tendrás que añadir programación para que estas plantillas se
conviertan en una aplicación web y los usuarios de la misma puedan
interactuar, editar y añadir nuevos contenidos.
TERCERO - PROGRAMACIÓN
Como te decía antes, si la web es muy específica y compleja, entonces
recurre a un desarrollador web. Dormirás más tranquilo... es más,
dormirás. ;)
Si la web es más o menos normal (en el 95% de los casos o más),
entonces puedes usar un CMS. Aquí, cómo no, te recomiendo que uses
gestores de contenidos libres como Joomla!, Drupal, Wordpress... hay
muchos, mi consejo es que pruebes varios hasta dar con el que más te
guste.
Si usas un CMS, el siguiente paso es convertir las plantillas
estáticas html a plantillas compatibles con el CMS en cuestión. De
modo que al instalar las plantillas, el CSS muestre la web tal y como
tú la diseñaste originariamente.
Este trabajo es muy específico y se necesita conocer bastante bien el
CMS en cuestión. Suele consistir en convertir los archivos HTML en
PHP's con determinadas etiquetas que el CMS interpreta y emplea para
colocar su propio código.
Si la web es muy sencilla, yo suelo usar GETSIMPLE, un gestor de
contenidos muy liviano, versátil y que no requiere de Base de Datos:
http://get-simple.info/
Para webs más complejas (intranets, webs corporativas, comercio
electrónico, blogs, diarios digitales, etc.) suelo usar Joomla!:
http://www.joomlaspanish.org/
He trabajado con Wordpress y Drupal, pero por alguna razón me siento
muchísimo más cómodo con Joomla! y me especialicé en él. ;)
CUARTO - PRUEBAS
Hay un tema escabroso aquí. Y es que, durante todo el proceso hemos
podido trabajar con GNU/Linux y sus herramientas, pero hay muchos
usuarios que aún siguen usando Windows y el inefable Internet
Explorer. Por desgracia para muchos, tenemos que probar las webs en
las distintas versiones de IExplorer y asegurarnos de que también
funcionan correctamente ahí.
En este caso yo uso máquinas virtuales. Sí, amigos, me veo en la
triste necesidad de arrancar un Windows XP, un Windows 7 o vista y
lanzar Internet Explorer para comprobar si la web se ve bien en ellos
y realizar los ajustes necesarios.
Para las máquinas virtuales yo uso Virtual Virtualbox (que tiene una
versión libre que está en los repositorios de Debian):
https://www.virtualbox.org/
Otros navegadores en los que testeo las webs son:
Opera: http://www.opera.com/download/
Chromium / Chrome: http://www.chromium.org <http://www.chromium.org/>
Si tienes un tablet o un móvil, te serán de utilidad para probar las
webs y ver cuán "responsives" son. :D
QUINTO - SEO/SEM Y OPTIMIZACIONES
Hay formas de comprimir y optimizar el código CSS y JavaScript, y en
GNU/Linux hay varios programas con los que puedes optimizar las
imágenes de la web y cargadas por el CSS para que ocupen menos.
Yo uso optipng ( http://optipng.sourceforge.net/ ) para optimizar los
png e imagemagick ( http://www.imagemagick.org/script/index.php )
para optimizar los archivos jpg.
De hecho, lo suyo es crearte varios scripts para automatizar estos
procesos. Yo, por ejemplo, tengo un script de imagemagick para escalar
y aplicar varios filtros a fotos que luego van a ser usadas en las
webs. Meto todas las fotos en la misma carpeta, le doy doble clic al
script y las renombra a minúsculas, las escala, aplica un ajuste de
niveles y de color, un filtro de enfoque y las guarda con una
compresión del 75%.
Como te decía al principio, hay mucha gente que te dirá que como Gimp
no tiene acciones, es una "m****a", pero es que se puede hacer lo
mismo que con las acciones de Photoshop de otros modos.
Y si no te gusta usar scripts, siempre puedes usar Phatch:
http://photobatch.stani.be/
La optimización de SEO se deben planificar e implementar desde el
principio. Es importante desde la fase de arquitectura de contenidos a
la de maquetación.
Sin embargo, una buena cantidad de trabajo se lleva a cabo al final,
cuando está la web terminada. Entonces (siempre según el CMS que se
haya usado), es el momento de editar las etiquetas, repasar los textos
y revisar el marcado para que sea lo más semántico posible y esté
optimizado para los buscadores.
SEXTO (Y NO MENOS IMPORTANTE) - GESTIÓN
Una parte también importante es la gestión del proyecto. Desde la
edición de documentos, gestión de tiempo, planificación, etc.
Esto, de por sí, ya da para otro mega-mail, porque cada uno se
organiza a su modo. Yo sólo te listaré algunos programas que yo uso,
por si te son de utilidad:
Suite ofimática (documentos, hojas de cálculo, facturas, etc.),
LibreOffice: http://es.libreoffice.org/
Control de tiempo, Hamster, (muy útil si facturas trabajos por horas):
http://projecthamster.wordpress.com/
Wiki, yo tengo dos wikis, uno para la gestión de los trabajos y
tareas, y otro para ir anotando cosas importantes como resolución de
bugs, recetas para hacer ciertas cosas, trozos de código útiles, etc..
Uso ZIM: http://zim-wiki.org/
PIM, suite de Correo+Calendario+Contactos+Tareas: Thunderbird + Lightning:
http://www.mozilla.org/es-ES/thunderbird/
http://www.mozilla.org/projects/calendar/lightning/
Copias de seguridad.
Esto es ALTAMENTE importante y mucha gente lo pasa por alto... hasta
que se les rompe el disco duro. :D jejeje.
Yo tengo un sistema sencillo y cómodo para hacer mis copias de seguridad:
* Uso 2 discos duros externos del mismo tamaño que el disco donde
tengo el /home.
* Sincronizo /home con uno de los discos externos al menos 1 vez a la
semana.
* Luego ese disco lo guardo en un lugar distinto al estudio (por si
acaso ;) ).
* A la semana siguiente uso el otro disco para sincronizar /home.
* Y voy alternando cada semana los discos externos.
Así siempre tengo 3 copias de /home, una en el PC, otra en el estudio
y otra fuera, a salvo.
Hay aplicaciones para hacer backups que permiten copias incrementales,
copias automáticas, copias cada vez que un archivo se modifica... para
gustos colores. Pero yo prefiero este sistema porque es cómodo, fácil
y fiable. Si alguna vez te necesitas algún archivo de una copia de
seguridad, sólo tienes que montar el disco externo y acceder a él
directamente (sin descomprimir o restaurar).
La única pega es que en el peor de los casos si se te estropea el
disco principal, pierdes el trabajo de toda una semana. Pero, bueno,
siempre puedes hacer un rsync adicional si hay alguna cosa importante
que quieras estar seguro de salvaguardar, o usar algún servicio
on-line para guardar los archivos puntualmente en la red, como DropBox
u OwnClowd.
Yo uso OwnCloud en un hosting propio y va de perlas. ;)
http://owncloud.org/
Si por algún casual no te hubiera aburrido ya hasta el punto de querer
saltar por la ventana de tu cuarto (varias veces), te dejo unos links
a mi web donde puedes encontrar documentación, vídeos y conferencias
en donde puedes encontrar esa información más que ampliada (y tal vez,
hasta resumida):
Material de la conferencia: "Diseño de páginas web con GNU/Linux":
http://jesusda.com/docs/linuxwebdesign/
<http://jesusda.com/docs/linuxwebdesign/index.html>
Vídeo de la conferencia: https://vimeo.com/8553900#at=0
Caja de herramientas del Diseñador Gráfico y Web:
http://www.jesusda.com/blog/index.php?id=321
¡Quién necesita Dreamweaver!: http://www.jesusda.com/blog/index.php?id=319
Gracias
De verdad, de verdad, de verdad, que espero no haberte aburrido y que
esta información te sea útil a ti y a cuantos quieren emprender el
magnífico camino de hacer páginas web usando GNU/Linux y software
libre. ;)
Un saludo cordial.
jEsuSdA 8)