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 - -- To UNSUBSCRIBE, email to [email protected] with a subject of "unsubscribe". Trouble? Contact [email protected] Archive: http://lists.debian.org/[email protected]
