Re: Diseño web
Saludos lista:
On 23/01/13 07:14, Francisco Eduardo Ascencio Dominguez wrote:
> Hola amigos de la lista. no se si va aqui esta duda pero. quisiera saber algun programa parecido a dreamweaver de windows. actualmente eh encontrado kompozer pero no me sirve al 100. alguna ayuda ? SALUDOS.
>
>
Francisco tu hilo me trajo a la memoria otro hilo de la lista que se
llamó ¿Linux para diseño web y diseño gráfico? que me pareció muy bueno,
y copio una de las aportaciones que hizo jEsuSdA:
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
-
Reply to:
- References:
- Diseño web
- From: Francisco Eduardo Ascencio Dominguez <lypef@live.com>