Re: ¿Linux, para diseño web y diseño grafico?

[Altair Linux <altairlinux@gmail.com>]

¿Aburrirme?, en absoluto, un mensaje sumamente interesante.

Como he dejado claro al principio de todo, yo no tengo ni idea de
estos temas. Pero sí me interesa cuando se trata de que personas que
se dedican al diseño web y al diseño gráfico (cada uno en una cosa)
deciden usar Linux y no Windows.

Me gustaría ver webs que has hecho con el sistema que pones, es una
forma de ver "en la práctica" como queda todo.

Por la parte de tener un windows para comprobar la web desde internet
explorer yo soy de opinión más "radical" y pienso que, si se detecta
que el usuario usa internet explorer, pues se le manda a una pantalla
diciendole que use firefox (por ejemplo) diciendo que es gratuito y
más seguro. Dado que Microsoft tiende a ignorar los estándares en sus
productos, pues habra que ignorar esos productos en medida de lo
posible.

El día 11 de septiembre de 2012 19:31, jEsuSdA 8) <listas@jesusda.com> escribió:
> 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
>
> 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/
> 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)