Jornadas de Software Libre y Open Source Diseño de sitios Web con Software Libre Por Mauricio Moreira Guzmán – Centro de Gestión Tecnológica UNA.

Presentación del tema: "Jornadas de Software Libre y Open Source Diseño de sitios Web con Software Libre Por Mauricio Moreira Guzmán – Centro de Gestión Tecnológica UNA."— Transcripción de la presentación:

1 Jornadas de Software Libre y Open Source Diseño de sitios Web con Software Libre Por Mauricio Moreira Guzmán – Centro de Gestión Tecnológica UNA

2 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Qué es Software Libre? La libertad de usar el programa, con cualquier propósito, La libertad de estudiar cómo funciona el programa, y adaptarlo a tus necesidades La libertad de distribuir copias, con lo que puedes ayudar a tu vecino La libertad de mejorar el programa y hacer públicas las mejoras a los demás, de modo que toda la comunidad se beneficie. El acceso al código fuente es un requisito previo para esto. Software Libre Libertade s

3 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source  ¿De qué se trata? El proceso que implica la construcción de un sitio web, consiste en una serie de etapas a través de las cuales son necesarias herramientas que faciliten su desarrollo. Acerca de esta charla

4 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source  El derecho a elegir A menudo estas herramientas tienen un costo elevado y en muchas ocasiones las empresas las utilizan al margen de la ley sin saber que existen alternativas libres tan buenas o mejores que las propietarias. Acerca de esta charla

5 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source  ¿Cuáles alternativas tengo? Veremos que en campo del software libre existen muchas opciones de donde escoger que nos ayudarán a facilitarnos esta tarea, en esta charla trataremos de identificar cuales son estas herramientas y cómo elegir la más adecuada a nuestra necesidades y capacidades. Acerca de esta charla Software Libre

6 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por donde comenzar? ?

7 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Requerimientos iniciales  Computadora  Sistema operativo base  Paquetería de software adicional:  Ofimática  Diseño gráfico  Edición Web  Maquetación  CMS

8 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por qué NO utilizar software privativo? ?

9 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Factor seguridad Factores a considerar antes de... Factor económico Factor aprendizaje Factor hardware

10 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por qué NO utilizar S.P?  Factor seguridad  Virus  Basados en formatos cerrados (nadie sabe cómo funcionan)  Fallos (algunos usuarios ven como algo normal que su computadora falle constantemente)

11 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por qué NO utilizar S.P?  Factor económico  Coste de adquisición  Coste de soporte  Coste de renovación y licenciamiento

12 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por qué NO utilizar S.P?  Factor aprendizaje  Se crean simples usuarios de programas  Nivel limitado de conocimiento  No puedo compartir el conocimiento

13 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source ¿Por qué NO utilizar S.P?  Factor hardware  Requerimientos elevados de hardware  Poca o nula escalabilidad  Drivers de bajo rendimiento

14 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Desarrollo de un sitio web Definición del proyecto Desarrollo de la estructura Diseño visual Pruebas y validación Etapas en el Desarrollo de un sitio Web Etapas en el Desarrollo de un sitio Web

15 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Definición del proyecto ¿Cuáles herramientas de software libre me pueden ayudar en esta etapa?

16 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas para la planificación

17 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Planificación  Kplato  Programa de gestión de proyectos  Usa diagramas de Gannt para mostrar la temporalización de las tareas.  Permite usar dependencias entre tareas.  Usa estructuras de desglose de trabajo en forma de árbol. http://www.koffice.org/kplato/

18 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Planificación  Planner  Herramienta de administración de proyectos que le permite administrar tiempos y recursos asignados a un proyecto. http://live.gnome.org/Planner

19 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Planificación  Collabtive  es una plataforma libre en la que podremos alojar en nuestro servidor, con el fin de administrar los proyectos de nuestros clientes y grupos de trabajo a través de él, además claro, de permitirle a nuestros clientes ver cuanto a avanzado el proyecto desde la semana anterior. Permite mensajería entre empresa y cliente, generar listas de tarea, gestión de proyectos y una infinidad de opciones muy interesantes. http://collabtive.o-dyn.de/

20 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas para la recolección de la información

21 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Recolección Información  OpenOffice  es una suite ofimática de software libre y código abierto de distribución gratuita que incluye herramientas como procesador de textos, hoja de cálculo, presentaciones, herramientas para el dibujo vectorial y base de datos. http://es.openoffice.org/

22 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Recolección Información  OpenOffice  es una suite ofimática de software libre y código abierto de distribución gratuita que incluye herramientas como procesador de textos, hoja de cálculo, presentaciones, herramientas para el dibujo vectorial y base de datos. http://es.openoffice.org/

23 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas Recolección Información  OpenOffice  es una suite ofimática de software libre y código abierto de distribución gratuita que incluye herramientas como procesador de textos, hoja de cálculo, presentaciones, herramientas para el dibujo vectorial y base de datos. http://es.openoffice.org/

24 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas para la calendarización y contactos

25 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas calendario y contactos  Sunbird  Es un programa de calendario y planificación que cumple funciones de agenda, lista de tareas y calendario con alarmas http://www.mozilla.org/projects/calendar/sunbird/

26 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Resumen

27 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Estructura del sitio ¿Cuáles herramientas de software libre me pueden ayudar en esta etapa?

28 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas para diagramas conceptuales

29 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramienta Diagrama conceptuales  Kdissert  Permite generar documentos bien organizados según la información y la estructura del mapa mental. http://www.kde.org.uk/apps/kdissert/

30 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramienta Diagrama conceptuales  Xmind  es un programa open source para realizar mapas conceptuales, ayuda a la gente a anotar ideas, organizar diversos gráficos, y compartirlos para colaborar online. http://www.xmind.net/

31 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas para conjunto de marcos

32 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramienta Conjunto de Marcos  Kivio  Kivio es una aplicación informática para generar diagramas y organigramas, incluida dentro de la suite ofimática para KDE KOffice. Tiene un interfaz de usuario similar a Microsoft Visio http://www.koffice.org/kivio/

33 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Resumen

34 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Diseño visual y pruebas ¿Cuáles herramientas de software libre me pueden ayudar en esta etapa?

35 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Maquetación de gráficos

36 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Gimp  es un programa de edición de imágenes digitales en forma de mapa de bits, tanto dibujos como fotografías. Es un programa libre y gratuito. Está englobado en el proyecto GNU y disponible bajo la Licencia pública general de GNU. http://www.gimp.org/

37 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Cubre el 200% de las necesidades de un usuario doméstico y el 90% de un profesional

38 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source GIMP  Ventajas  Es muy potente  Es LIBRE y Gratuito  Es Multiplataforma  Ampliable: Scripts  GIF, JPG, PNG, PDF, TIFF, etc.  Desventajas  Gestión de Color *  Modelo CMYK  Acciones  Gestión del TEXTO *

39 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

40 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

41 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

42 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos Animaciones con Gimp

43 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Inkscape  es un editor de gráficos vectoriales de código abierto, con capacidades similares a Illustrator, CorelDraw o Xara X, usando el estándar de la W3C: el formato de archivo Scalable Vector Graphics (SVG). http://www.inkscape.org

44 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Las características soportadas incluyen: formas, trazos, texto, marcadores, clones, mezclas de canales alfa, transformaciones, gradientes, patrones y agrupamientos. Inkscape también soporta meta-datos Creative Commons, edición de nodos, capas, operaciones complejas con trazos, vectorización de archivos gráficos, texto en trazos, alineación de textos, edición de XML directo y mucho más. Puede importar formatos como Postscript, EPS, JPEG, PNG, y TIFF y exporta PNG así como muchos formatos basados en vectores.

45 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Inkscape  Ventajas  Es muy potente  Es LIBRE y Gratuito  Es Multiplataforma  Ampliable: Scripts  Postscript, EPS, JPEG, PNG, y TIFF y exporta PNG  Desventajas  No tienes colores Pantone o los famosos “Books de color”  tampoco tiene el overprint, opción para guardar spot de color y dificulta poner los porcentajes exactos en CMYK

46 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

47 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

48 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Algunos ejemplos

49 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Agave  Software para la generación de esquemas de color y le da sugerencias sobre cuales colores pueden combinar bien.  Generar 6 tipos diferentes de esquemas de color  Integración con Gimp o Inkscape http://home.gna.org/colorscheme/

50 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Gcolor2  Extrae el color de cualquier parte de tu pantalla.  Integración con Gimp o Inkscape http://gcolor2.sourceforge.net/

51 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Phatch  Cuando trabajas en diseño gráfico es muy frecuente aplicar efectos, retoques, modificaciones y muchas cosas más a las imágenes con las que trabajas  Phatch es un editor libre y multiplataforma (Linux, Windows, Mac) que te permite el procesamiento de imágenes por lotes http://photobatch.stani.be/

52 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Hugin  Software para el diseño de fotografías panorámicas http://hugin.sourceforge.net/

53 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Hugin : algunos ejemplos  http://www.flickriver.com/photos/tags/hugin/

54 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de gráficos  Hugin : algunos ejemplos  http://www.flickriver.com/photos/tags/hugin/

55 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Maquetación de código

56 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  CSSED  Esta es una excelente herramienta para los desarrolladores web que trabajan sobre Linux. Se trata CSSED, es un aplicación GTK, que permite crear y editar Hoja de Estilos en Cascada (CSS) de manera sencilla y práctica.  Entre sus características están, el resaltado de sintaxis, autocompletar (al estilo Dreamweaver), vista de árbol, la validación del documento, etc.También soporta documentos html, php, javascript, jsp, java, etc. http://cssed.sourceforge.net/

57 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  Komposer  Editor WYSWYG multiplataforma que provee un entorno gráfico similar al de Dreamweaver para el desarrollo intuitivo de sitios web. http://kompozer.net/

58 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  Quanta  Quanta pertenece al metapaquete kdewebdev, que junto a Quanta+provee una suite de aplicaciones para el desarrollo web en el escritorio KDE. http://quanta.kdewebdev.org

59 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  Aptana Studio  Aptana es un módulo orientado al desarrollo web para Eclipse.  Como tal, está basado en JAVA y bien se puede obtener en un paquete independiente o como módulo para Eclipse. http://aptana.com

60 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  Geany  Geany es un editor de texto ligero basado con características básicas de Entorno de desarrollo integrado (IDE).  Es multiplataforma, tiene soporte para muchos lenguajes de programación distintos, como C, C++, Java, JavaScript, PHP, HTML, CSS, Python, Perl, Ruby, Pascal y Haskell.  Algunas de las características más destacadas de Geany son: Autocompletado, soporte multidocumento, soporte de proyectos, coloreado de sintaxis y emulador de terminal embebido. http://www.geany.org/Main/HomePage

61 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas maquetación de código  Sistemas de administración de Contenido (CMS)  Un sistema de gestión de contenidos CMS es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos de páginas web.  Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema permite manejar de manera independiente el contenido y el diseño.  Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores.

62 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Funcionalidad, validación de código y accesibilidad

63 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas funcionalidad, validación de código y accesibilidad  Navegadores  Firefox  Opera  Konqueror  Google Chromium  Internet explorer  Ies4Linux permite instalar y ejecutar, mediante Wine, Internet Explorer en sistemas Linux.

64 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source  Extensiones Firefox  Web Developer Es una extensión de Firefox que ofrece potentes características CSS, como la posibilidad de aplicar una hoja de estilo personal a una página web o incluso editar el CSS de la página web visualizada. Adicionalmente, permite ver el estilo aplicado a cada elemento de la página web abierta, basta con seleccionar el elemento deseado. En cuanto a las opciones de validación, todos los validadores URL son configurables, y permite validar el CSS, HTML, WAI, Feed, los enlaces y la sección 508 de una página web. Herramientas funcionalidad, validación de código y accesibilidad

65 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Herramientas validación de código, funcionalidad, accesibilidad  Extensiones Firefox  Firebug Firebug se integra a Firefox para, al igual que la extensión Web Developer, ayuda a desarrollar, evaluar y depurar sitios web, controlando el CSS y HTML en tiempo real, midiendo el tiempo de carga para optimizar la página o corrigiendo los posibles inconvenientes con Javascript.

66 Universidad Nacional de Costa Rica Jornadas de Software Libre y Open Source Resumen Etapas desarrollo de un Sitio Web

67 Jornadas de Software Libre y Open Source www.alternativa.una.ac.cr