Remodelación del sitio Web de Canaima GNU Linux

Ponencia de "Remodelación del sitio Web de Canaima", la cual es una ponencia promocional de la experiencia en el desarrollo de la plataforma web. El desarrollo Web es un reto complejo hoy en día. Construir un numero de funcionalidades resulta en un incremento de especificaciones del cliente las cuales hace el diseño de proyecto más difícil. Usando las herramientas adecuadas para los requerimientos del cliente es esencial. En esta charla pretendo presentar una historia en desarrollo sobre lo que acontece en la plataforma Web de Canaima GNU/Linux usando el poder de Python usando Django, Plone y aplicaciones Web en PHP. Básicamente en este caso yo deseo resaltar las principales razones para usar Plone solamente como un CMS para la gestión de contenidos de noticias, elementos multimedia y el uso de Django como una aplicación Mashup que integra diversas recursos disponible en el proyecto Canaima para hacer un estudio del comportamiento social y las contribuciones realizadas al proyecto.

Licencia: Licencia de documentación libre de GNU - GFDL.
Formato: LibreOffice.org Impress y Writer.
Duración: Minimó 45 minutos, Máximo 1 hora, más 15 minutos de preguntas.
Dictada en: IX CNSL Cojedes, IX CNSL Tachira.
Ultima actualización: 06/06/2013.
Lugar: Mérida, Estado Mérida, Venezuela.
Autor: T.S.U. Esp. Leonardo J. Caballero G.
Email: lcaballero at linuxmail.org, leonardocaballero at gmail.com.
Domicilo Web: http://about.me/macagua
Descarga los archivos PDF http://www.slideshare.net/lcaballero/

Transcript

1. Remodelación del sitio Web de Canaima Leonardo J. Caballero G.
2. Agenda ➔Motivaciones. ➔Necesidades. ➔Propuesta y ejecución. ➔Estado del arte. http://www.constructoracapeca.com/
3. Motivaciones La comunidad Canaima requieren mejorar drásticamente este recurso, para que sea más intuitivo, fácil de navegar, con información practica y pertinente al publico en general. http://canaima.softwarelibre.gob.ve/
4. MOTIVACIONES EXTRÍNSECAS DINERO SEÑALIZACIÓN Y PREOCUPACIONES DE OFICIO NECESIDADES USUARIO APRENDIZAJE Y DESARROLLO DE HABILIDADES REPUTACIÓN RECIPROCIDAD MOTIVACIONES INTRÍNSECAS ESTATUS ALEGRÍA Y PLACER AUTONOMÍA IDENTIDAD PROFESIONAL Y PERSONAL DESAFÍO INTELECTUAL Motivaciones en el Software Libre
5. Necesitamos una remodelación http://www.logrian-florian.fr/partenaire.php?ID=29
6. Supuestos ➔No hay pautas de publicación. ➔Publicar de contenido es muy burocrático. ➔No hay participación comunitaria. ➔No integra con el Registro Único. ➔Optimizar el servicio del CMS. http://lovequotestumblr.net/9894/im-not-random-facebook-cover-im-not-random-cover-2094-firstcovers
7. Necesidades ➔Ofrecer información pertinente. ➔Espacios para activista(s). ➔Descentralizar la edición. ➔Usar el conocimiento para publicar y/o compartir. ➔Equipo editorial con pautas de publicación. http://www.flickr.com/photos/wetwired/7361277366/
8. Nuevos espacios Espacios para activista(s) comunitario(s) del proyecto. ➔ Estructura organizativa. ➔ Unirse a un equipo. ➔ Administración de roles, usuarios y grupos. ➔ Delegar permisos locales. http://ucvnoticias.ucv.ve/wordpress/?attachment_id=16461
9. Propuesta y ejecución • Estructuración de contenidos. • Diseño y prototipo. • Desarrollo e implementación. • Ajuste del sitio y publicación del sitio. • Documentación.
10. Diseño y prototipo ➔Innova en tu medio. ➔Inspírate con los grandes. ➔Diseña Nuevas interfaces. ➔Usabilidad y funcionalidad. ➔Construye prototipos. https://www.facebook.com/flashplatform
11. Metodología de Diseño Visual Diseño Visual Diseño de Interfaz Diseño de Información Diseño de Interacción Arq. de Información Esp. Funcionales Estrategia y Análisis Trabajo de diseño Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
12. Estructura de contenidos (Mapa del sitio)
13. Estructura de contenidos • La forma más común de documentar sitios web. • Captura los aspecto estructurales. • Fácilmente se convierte en algo muy complejo. • No representan los aspectos dinámicos. • Para contenido de sitios con jerarquía estricta.
14. Metodología de Diseño Visual Diseño Visual Diseño de Interfaz Diseño de Información Diseño de Interacción Arq. de Información Esp. Funcionales Estrategia y Análisis Wireframes de baja y media Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
15. Bocetos manuales (Sketch)
16. Bocetos manuales (Sketch) • Se dibujan a mano alzada. • No está diseñado como una obra terminada. • Forma rápida de grabar una idea para después • Le permite probar diferentes ideas. • Le permite establecer una composición.
17. Metodología de Diseño Visual Diseño Visual Diseño de Interfaz Diseño de Información Esp. Funcionales Estrategia y Análisis Wireframes de alta y prototipo Diseño de Interacción Arq. de Información Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
18. Diseño de bocetos (Wireframe)
19. Diseño de bocetos (Wireframe) • Su objeto es la funcionalidad y diagramación. • Define aspectos funcionales. • Notas acerca de la funcionalidad prevista. • Sistemas de navegaciones. • Como trabajan juntos los elementos de la GUI. • Carece de estilo tipográfico, color o imágenes.
20. ¿Por qué hacer wireframes? http://wiki.canaima.softwarelibre.gob.ve/wiki/BSP/galería Yo odio los colores No me gusta la redacción ¿Por qué dice ediciones en ves de Sabores? No me convencen tus argumentos
21. Diseño de bocetos (Wireframe) El uso de los wireframes da lineamientos al diseñador para que su diseño visual se cree basándose ellos.
22. Cuando “usar” Wireframes • En proyectos complejos, con muchas interacciones o clasificación de información • En fases tempranas del diseño, antes de la fase de desarrollo.
23. Cuando “no usar” Wireframes • El grupo de revisor(es) tiene expectativas del mockup (diseño visual). • Los usuarios no están involucrados en el proceso de diseño del sitio web. • En pequeños proyectos.
24. Diseño visual (Mockup)
25. Diseño visual (Mockup) • Su objeto es el look and feel. • Se construyen con base a los wireframes. • Aplicando color, gráficos y muy pulido. • El diseño se ajusta un poco, mas mantiene la orientación general del wireframe.
26. Diseño de prototipo (Prototype)
27. Diseño de prototipo (Prototype) • Simular el diseño final, la estética, los materiales y la funcionalidad prevista. • Tal ves reduzca el tamaño o funcionalidad. • Las funcionalidades trabajan en conjunto. • Comprobación final de los defectos de diseño.
28. ¿Por qué hacer prototipos?
29. Diseñadores vs. Programadores http://www.flickr.com/photos/a_ninjamonkey/3565672226/
30. ¿Cual es el flujo de trabajo? Bocetos (Sketch) Prototipo (Prototype) Wireframes Diseño visual (Mock-up)
31. Roles http://adsanilights.com/
32. • Lenguaje comunicacional. • Define un mensaje hacia múltiples receptores. • Hace preguntas necesarias: ¿De qué se trata?, ¿Qué contar?, ¿Cómo informar?, ¿Quiénes informan?, ¿Cuáles?, ¿Cuando?, ¿Donde?, etc. Comunicador social
33. • Transforma el mensaje del comunicador social en identidad visual. • Define las reglas visuales para el proyecto. • Establece el lenguaje visual del proyecto. Asesor de identidad visual
34. • Especialista sistemas de información. • Interfaces gráficas y experiencia de usuarios. • Usabilidad y nuevas tendencias. • Tecnologías para prototipos de sistemas. • Web, Móvil, Desktop, Middleware. Programador Front-end
35. • Implementa el trabajo de programador Front-end. • Desarrolla las requerimientos del sitio. • Realiza las pruebas de caso de uso. • Coordina con el administrador de sistemas el desperdigue del sistema. Analista de sistemas
36. • Info y Infra estructura del sitio. • Instalación, configuración y publicación. • Mantenimiento y Seguridad. • Supervisión del sitio web. Administrador de sistemas
37. Imagen visual http://orinoquiaphoto.photoshelter.com/gallery-image/Artesania-Venezolana/G0000XfGOgKZBS20/I0000tHxowmV_Zcw/C0000RglhUGlxIlk/
38. Fotografía: http://venciclopedia.com/index.php?title=Yekuana http://orinoquiaphoto.photoshelter.com/gallery/Artesania-Venezolana/G0000XfGOgKZBS20/C0000RglhUGlxIlk
41. Propuesta por Xavier Araque <rendergraf>
42. Versión inicial
43. Versión alternativa
45. Las herramientas utilizadas http://blog.jardinitis.com/2011/02/herramientas-de-jardin.html
46. FreeMind freemind.sf.net
47. Google Drive http://goo.gl/Qb0x2
48. Balsamiq https://canaimagnulinux.mybalsamiq.com/
49. Trello https://trello.com/b/tDdTDnoR
50. “ “CMS es una cosa que le CMS es una cosa que le permite editar sus permite editar sus paginas Web usando su paginas Web usando su navegador Web” navegador Web” Mikko Ohtamaa Mikko Ohtamaa
51. ¿Cómo elegir entre CMS? ➔ Drupal. ➔ Joomla. ➔ Plone. ➔ Wordpress.
53. Drupal Collaboration & social Categoría Web Content & Experienced Management www.drupal.org
54. Web Content & Experienced Management Categoría Joomla www.joomla.org
55. Plone Collaboration & social Categoría Web Content & Experienced Management Portal and Content Integration www.plone.org
56. Wordpress Collaboration & social Categoría Web Content & Experienced Management www.wordpress.org
57. Historico de errores de seguridad http://nvd.nist.gov/ Actualizado hasta el 02/05/2013
58. Fuera de la caja, Plone 4.0 sirvió 15.1 paginas/segundo http://jstahl.org/archives/2010/01/19/plone-4-three-times-faster-than-drupal-joomla-or-wordpress/
59. Comparando las evaluaciones de la velocidad entre Plone y Drupal http://ccomb.gorfou.fr/2010/10/8/comparing-plone-and-drupal-speed-evolutions
60. Competencia de nivel de entrada http://es.slideshare.net/simplesconsultoria/gestin-de-contenido-con-plone
61. Competencia Empresarial http://es.slideshare.net/simplesconsultoria/gestin-de-contenido-con-plone
62. ➔Migración de Plone 3.3.6 a Plone 4.3. ➔Nueva imagen, espacios colaborativo, difusión en redes sociales. ➔Análisis estadísticos de contribuciones al proyecto. ➔Integración continua del sitio Web. Desarrollo e implementación http://desarmo.blogspot.com/2007/06/as-time-goes-by.html
63. ➔ Mecanismos de alta disponibilidad y supervisión. ➔ Integrar con Sistema de Registro Único (LDAP). ➔ Lineamientos del equipo editorial, roles y flujos de publicación. ➔ Publicar el nuevo sitio web de Canaima en Internet. Ajuste del sitio y publicación http://www.logrian-florian.fr/partenaire.php?ID=29
64. Necesitamos una actualización http://www.flickr.com/photos/nakedcharlton/72041049/
65. Muchas piezas de Software
66. Servidores en producción
68. Nginx http://www.flickr.com/photos/caharley72/11332057
69. • Servidor web ligero y eficiente. • Tolerancia a fallos y Concurrencia. • Usado como Proxy inverso. http://nginx.org/
70. HAProxy http://www.flickr.com/photos/poetatum/3457696479
71. • Balanceador de carga TCP. • Usado para peticiones HTTP. • Herramienta Web de Monitoreo. http://haproxy.1wt.eu/
72. Varnish http://www.flickr.com/photos/aereimilitariorg/3956024476
73. • Proxy cache y balanceador de carga. • Basado en configuración VCL. • Soporte para ESI y HTTP Cache. http://www.varnish-cache.org/
74. Flujo de publicación
75. Flujo de trabajo de Publicación Simple
76. Flujo de trabajo de Estado Único
77. Flujo de trabajo flujo de Encuestas
78. Nuevas herramientas http://gravitywaseverywherebackthen.blogspot.com/2011/04/axing-hammering-and-planing.html
81. Contribuciones del usuario
82. Discusión de lista de correo
83. Discusión de lista de correo
84. Discusión de lista de correo
85. Sindicación RSS
86. OpenData – API Rest / JSON
87. Escrito en Python http://python.org/ Python, es una marca registrada de la fundación Python
88. Lenguajes de programación mas populares de 2013
89. github.com/canaimagnulinux
90. Documentación ➔Estructura de contenidos del sitio. ➔Lineamientos de equipo editorial. ➔Memoria descriptiva e imagen visual del proyecto. ➔Manuales técnicos de plataforma tecnológica. ➔Transferencia tecnológica comunitaria. http://www.flickr.com/photos/wetwired/7361277366/ http://galeria.cnsl.org.ve/2008/07-merida/46.html
91. • Inicio: Diciembre 2012. • Culminación: Julio 2013. • Costo estimado: 64.000 BsF Planificación y costos http://www.escuelacarabineros.cl/costos-de-la-carrera
92. Programadores <3 Diseñadores http://www.fanpop.com/clubs/teddybear64/images/16835281/title/dog-cat-wallpaper-wallpaper
93. Participantes activos Leonardo Caballero <macagua> Flamel Canto <flamelcanto> Carlos Parra <ceparraf> Maximiliano Vilchez <maxudes>
94. Participantes inactivos José Subero <arawako> Xavier Araque <rendergraf> Carlos D. Marrero <cdmarrero> Sasha Solano <ssolano> Luis A. Martinez <HuntingBears>
95. Participa: canaima.softwarelibre.gob.ve
96. Para aprende más: wiki.canaima.softwarelibre.gob.ve
98. ¡Gracias por su atención! leonardoc@plone.org http://about.me/macagua @macagua / @canaimagnulinux
99. Licencia Copyright (c) 2013 Leonardo J. Caballero G Copyright (c) 2013 Leonardo J. Caballero G. Permission is granted to copy, distribute and/or modify Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back- Invariant Sections, no Front-Cover Texts, and no Back- Cover Texts. A copy of the license is included in the Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". section entitled "GNU Free Documentation License".