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 esta http://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)
