Diseño web en ubuntu con software libre

Revisando las estadísticas noto que algunas personas están interesadas en este tema, voy a dar unos pequeños tips para empezar en el diseño web y frontend sobre ubuntu utilizado software libre.

Software Gráfico

Empezaremos con algunas sugerencias en cuanto a software gráfico, es un hecho que googleando encontrarán más alternativas.

diseño web en ubuntu

Inkscape, software de edición vectorial, se puede entender como la alternativa a illustrator o fireworks, también lo he utilizado para elaborar wireframes y es la que utilicé para el diseño de http://webinperu.com y mi favorito desde que cambie a software libre. La verdad estoy muy complacido con este programa que día a día gana mas seguidores y ya un clásico para los famosos iconos 2.0 y ahora ultimo con características para diseños 3d (revisen youtube). Esta en los repositorios de ubuntu y la instalación es muy simple:

sudo apt-get install inkscape

(también disponible para windows y mac en el sitio web oficial)

Enlaces para Inkscape

*Hay cantidad de información en Internet es es un pequeño aporte.

Gimp, La clásica alternativa a Photoshop y con una gran comunidad detrás lo que provee gran contenido de ayuda, también lo he utilizado en webinperu. Se instala por defecto con Ubuntu.
(también disponible para windows, por si aun están en proceso de cambio)

Enlaces para Gimp

También pueden revisar Xara Xtreme http://www.xaraxtreme.org/ , también esta en los repositorios de ubuntu, basado en inkscape, no he tenido tiempo de probarlo mucho pero va bastante bien hasta donde llegué.

Y otro software de edición gráfica que también e visto mencionar (aunque solo le di un vistazo) en foros es Krita , http://www.koffice.org/krita/ , también esta en los repositorios.

Ahora lo que necesitan para mover código.

Antes que nada debe quedar en claro que al margen del sistema operativo o las herramientas que utilicen deben tener un conocimiento previo de los lenguajes, xhtml, css para empezar y luego pueden darle tiempo a javascript además de algunos conceptos básicos (no serán tema de este articulo). Los siguientes son editores no son wysiwyg, si estas empezando de corazón te recomiendo te alejes de los wysiwyg y empiecen a estudiar los lenguajes pues de esa forma lograras un nivel respetable.

Bien yo utilizo actualmente gedit, es un editor de texto plano, con características de resaltado de sintaxis para html, css, javascript, php, ruby, python etc, etc, navegador de archivos, en pocas palabras lo necesario para hacer un buen trabajo. Lo encuentran en Aplicaciones->accesorios->editor de texto.

También he tenido oportunidad de revisar Aptana , un IDE con muchas características, incluye varias librerías javascript, extensiones disponibles, resaltado de sintaxis, autocompletado, y todas las opciones básicas.

Bueno para no extenderme les dejo unos links.

Ahora bien algo de lectura requieren editores como Emacs y Vim , considerados un poco mas frikis y de gran nivel, para empezar recomiendo prueben con los anteriores.

Ahora unos complementos

de hecho que usas Firefox , si no es así entonces puede que tengas preferencia por Opera u otro similar, pero jamás, repito jamás tendrás gusto por Internet Explorer, de ser así da media vuelta y regresa por donde viniste.

Si coincides conmigo y usas Firefox , debes saber que sus extensiones son casi la gloria para los desarrolladores,considero que Firebug o Web developer son básicos, Measureit y colorzilla también son interesantes, y hay muchos mas para buscar.

Espero esto les haya servido, buena suerte.

29 responses to “Diseño web en ubuntu con software libre

  1. Carlos

    Muchas gracias, muy buen trabajo, ya que me estoy iniciando en Ubuntu GNU/Linux y soy desarrollador web. Gracias.

  2. admin

    Que bueno que te haya sido de utilidad, intentaré escribir sobre esto más a menudo, gracias por el comentario.

  3. que bn me ha servido de gran ayuda tu referencia sobre inkscape estaba o estoy buscando aplicaciones para el desarrollo de aplicaciones y desarrollo web.

    Gracias…

  4. ¿Y no poneis nada sobre Kompozer? Para la mayoria de la gente será el más util.

  5. Christian

    Gracias por la sugerencia, ya añadí Kompozer a la lista. Solo puse algunas alternativas que me parecieron buenas, en mi opinión personal un wysiwyg no ayuda mucho al aprendizaje por lo que siempre recomiendo aprender el código en el mas simple editor. Y por ejemplo html es html en el editor que sea.

    Más adelante quedará claro las ventajas que esto conlleva y nos moveremos con habilidad cuando estemos frente a un proyecto. Y hay que decirlo existe una gran diferencia entre alguien que maneja el código comparado con alguien que usa un wysiwyg.

  6. José

    Gracias, estaba buscando un programa para crear mi página web, como uso Ubuntu en mi pc tenía que buscar buenas opciones, tu me has dado una muy buena, de verdad te agradezco, es posible que te moleste algunas veces con preguntas pues soy novato en estas lides espero contar contigo pero a la vez quiero que cuentes conmigo, hasta pronto. A proposito la webinperu es de verdad buena, gráficamente inconfundible, etc…

  7. Christian

    Gracias por el comentario José, me da gusto que también compartas interés en esto. Espero aportar y compartir con todos los interesados.

  8. alhendin

    Gracias por tu Web, me ha sido de gran ayuda, en mi orientación posterior a un curso realizado para empezar en el diseño web, como es habitual con Dreamweaver, Photoshop y Flash, estaba financiado por un ente público, lo cual aún me sorprende más.
    Lo peor de todo ha sido que la que daba el curso, tampoco estaba actualizada, y de un enfoque lógico y actual, olvidate, tecnologías de hace al menos 5 o 6 años.
    Gracias a gente como tú me estoy reorientando y espero que la cosa termine bien.
    Repito las gracias y un saludo a los que pasen por aquí.

  9. muchas gracias, recien inicio con esto y no conocia inkscape, esta muy bueno

  10. leslie

    me parece una pagina muy interesante pero me interesaria saber el programa equivalente a dreamweaver en ubuntu…

  11. christianh

    yo uso Aptana con el plug-in de php si es que es un sitio dinámico, no uso todas las librerias, solo jquery pero se que en algun momento jugaré mas con ruby on rails, pero el hecho de basarse en eclipse le da muchas ventajas.
    @leslie como bien menciona el autor, los wysiwyg (tipo dreamweaver) generarán codigo por ti que muchas veces será muy complicado modificar asi que es mejor empezar con tu propio codigo, siempre siguiendo los estandares claro.

  12. Christian

    Hola @christianh (tocayo) pues alguna vez use Aptana, ahora ultimo lo volví a tocar pero esta vez con el Plugin para desarrollo con Adobe Air. Claro que todo en ubuntu y me fue bien, apenas tenga tiempo seguiré revisando esta tecnología.

    Gracias por tu comentario.

  13. Inkscape es una buenisima alternativa a Fireworks y illustrator si no tienes bastante dinero y presupuesto para comprarte sus costosas licencias..

    Saludos.

  14. Hola.. un saludo desde Mexico, excelente diseño del portal, en realidad recien estoy buscando alternativas en mundo libre para desarrollo web.

    La pregunta concreta es, que software especifico de linux hace algo parecido a Dreamweaver 2004 en adelante..

    Muchisimas gracias de antemano..

    Alfon

  15. hola estoy buscando un programa para diseño web, que tal es el Kompozer? lei en su web que tiene soporte HTML CSS y JavaScript, la pregunta es ¿Saben si tambien lo tiene para PHP? y si tiene ayuda tipo Intellicense del visual estudio o como el Dreamweaver? eso facilitaria la codificación.

    De ante mano gracias por sus respuestas.

    Salud2.

  16. ¿De verdad todas esas páginas las hiciste a código limpio? ¿Sólo con gedit e Inkscape? Eres un genio then! Felicidades por el website, tiene un diseño elegante y cómodo a la vista… :)

    De todas formas seguí tu consejo y aunque tengo Kompozer he optado por manejar el código a mano, tengo conocimientos de HTML muy básicos, pero por ahora me puedo defender… Pero tengo una pregunta, ¿Como te manejas con los CSS? Quiero hacer una galería de imágenes… Y me estoy partiendo la cabeza y no nada… :S Si pudieras ayudarme con eso fuera un éxito… Gracias!

  17. Carlos Aguilera

    Algo así estaba buscando, ya que me quiero tener como opciones otros software en relación a diseño y desarrollo.

    Tu comentas que en cuanto a código lo haces con el gedit; Si pudieras recomendar alguno de los mencionados en tu articulo, ¿Cual mencionarías?

  18. Christian

    Saludos @alfon, quizás Quanta Plus sea lo que buscas aunque te recomiendo que vayas por editores planos.

    @ares3ag creo que un buen editor como gedit te ayudará bastante.

    @Lukas gracias pero no soy un genio, ese es el modo estándar en que trabajan los diseñadores hoy en día, se debe cuidar mucho la elaboración del sitio web y para esto nada mejor que verle las tripas a tu criatura.

    @Carlos gedit+inkscape+gimp+firefox(extensiones firebug, web developer), y creo que con eso tienes para empezar

  19. Carlos Aguilera

    Gracias por la Respuesta. Hay una duda, pero me la acabo de responder, aunque creo que quiza lo resolviste de la misma forma, ¿Para probar tu sitio en IE 7 y 8? yo he pensado en Wine o alguno similar.

  20. Christian

    claro @carlos, esa es una buena alternativa, quizás podrías probar playonlinux que facilita algo las cosas, también esta la opción de instalar una maquina virtual. Todo depende de como te sientas más comodo.

    saludos

  21. Hola Christian, yo de nuevo… Estoy teniendo problemas para maquetar el diseño que he hecho en Inkscape, cuando tomo por ejemplo la imangen del logo y la separo del resto para guardarla como imagen, no se guarda la imagen en sí, sino sólo los bordes. He estado leyendo pero aún no encuentro nada que me explique la razón de eso.

    Hasta ahora, he podido resolver con GIMP, pero me da la impresión que de puedo hacer más cosas con Inkscape. (Creo que ya estoy pasando de la etapa novato). Así que si me pudieras dar una manito con eso…

    Saludos!

  22. Christian

    @Lucas, espero haber entendido tu problema.

    Cuando has terminado el diseño y vas a maquetar todo lo que vaya a tu carpeta de imágenes debes exportarlo, es decir no seleccionas el logo por ejemplo y lo guardas, si no que seleccionas el logo y lo exportas y al momento de exportar eliges la opción “selección”.

    Eso lo encuentras en archivo>exportar mapa de bits, aunque también hay un icono en la barra superior.

    espero que eso solucione tu problema.

    saludos

  23. Ok… Muchísimas gracias por responder… El problema es que cuando exporto – efectivamente lo guardaba, no lo exportaba – por ejemplo un texto que digamos es el logo, y le aplico un filtro, me sale sólo el texto plano, sin aplicar el filtro…

    ¿Qué estoy haciendo mal? ¿O será que no me exporta los filtros?

  24. muchas felicitaciones por tú trabajo hecho con opensource e igual por la info expuesta, ahora mi preguna a tí y a los demás que comentan en el foro—->¿QUÉ PROGRAMA PODRÍA USAR PARA ANIMACION (swf) Y PROGRAMACIÓN (AS2)?, teniendo en cuenta de que se podría emular ADOBE FLASH.

  25. ¡Hola! Buenas tardes

    Yo sou usuario de Ubuntu desde la versión 6 y actualmente estoy con la versión 10.10 – Maverick Meerkat, ya apunto de pasarme a la 11.04, y soy desarrollador web.

    Les sugiero utilizar Netbeans (Parecido a DrewmWeaver) pero mucho mejor este sirve como IDE para PHP, Java, C, etc.

    Para instalarlo solo busquen en synaptic (todas las versione sde ubuntu) o en el centro de software (solo para versiones de ubuntu 9.04 o mayores).

    Para Mysql uso PHPmyAdmin.

    Navegador web: Firefox v4 y complemento para desarrolo web: web Developer

    UML: Visual Paradigm for UML y ArgoUML

  26. Dario

    Hola soy disenador web y me parece muy bueno tu aporte, pero quiero quebrar una lanza a favor de dreamweaver en el sentido de q vi que muchos lo tratan como un wysiwyg cuando en realidad tiene diferentes vistas, lo pudes usar como wysiwyg o en dual (es decir pantalla dividida codigo/grafico) o solo codigo eso es a gusto del consumidor. Yo en particular lo he usado en modo dual solo para asegurarme de q el codigo q yo mismo escribo se refleje en el grafico y no uso el codigo generado por dw. En cuanto a las utilidades linux las que has mencionado son las qu uso =)

  27. Hola Christian, thanks por el post.

    Una pregunta… Que opinión te merece NetBeans, pero también Eclipse como herramientas de edición de código.

    Creo personalmente que son más potentes que las que mencionas, y siguen siendo gratuítas.

    Saludos!

  28. Christian Montenegro

    @Dario, claro, como dices las herramientas son al gusto de consumidor, hay que trabajar con lo que uno se sienta más comodo pues solo estando como harás mejor tu trabajo.

    @Raul, Hola, he usado NetBeans y Eclipse, y puedo decir que son buenos IDE en especial para Java, pero a criterio personal y para mi trabajo en especifico me quedaron algo pesados, ya que lo único que necesito es un editor para mover código y no muchos paquetes ni opciones predeterminadas.

    En cuanto a la potencia, en lo personal me parece que consumen muchos recursos sobretodo si los comparamos con editores como Gedit o algunos de uso más sofisticados como vim o emacs.

    Igual dependiendo de lo que vayas a hacer algunos editores puede serte más o menos comodos.

    saludos y gracias por comentar.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>