El documento describe la remodelación del sitio web de Canaima, motivada por la necesidad de mejorar la usabilidad y la interacción de la comunidad. Incluye propuestas de estructura de contenidos, diseño y metodología de implementación, así como las herramientas y roles necesarios para su desarrollo. Se destaca la importancia de la participación comunitaria en la actualización y mantenimiento del sitio.

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 leCMS es una cosa que le
permite editar suspermite editar sus
paginas Web usando supaginas Web usando su
navegador Web”navegador Web”
Mikko OhtamaaMikko 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 GCopyright (c) 2013 Leonardo J. Caballero G.
Permission is granted to copy, distribute and/or modifyPermission is granted to copy, distribute and/or modify
this document under the terms of the GNU Freethis document under the terms of the GNU Free
Documentation License, Version 1.2 or any later versionDocumentation License, Version 1.2 or any later version
published by the Free Software Foundation; with nopublished 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 theCover Texts. A copy of the license is included in the
section entitled "GNU Free Documentation License".section entitled "GNU Free Documentation License".