Copyright (c) 2013 Leonardo J. Caballero G.
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License".
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, VII Cayapa Comunitaria del Proyecto Canaima - Falcón.
Ultima actualización: 06/06/2013.
Lugar: Punto Fijo, Falcón, Venezuela.
Autor: T.S.U. Esp. Leonardo J. Caballero G.
Email: leonardoc at plone.org, leonardocaballero at gmail.com
Domicilo Web: http://about.me/macagua
Visualiza y descarga vía: http://www.slideshare.net/lcaballero / https://speakerdeck.com/macagua
4. Motivaciones en el Software Libre
SEÑALIZACIÓN Y
PREOCUPACIONES
DE OFICIO
MOTIVACIONES
EXTRÍNSECAS
DINERO
REPUTACIÓN
NECESIDADES USUARIO
APRENDIZAJE Y
DESARROLLO DE
HABILIDADES
RECIPROCIDAD
ESTATUS
ALEGRÍA Y
PLACER
AUTONOMÍA
IDENTIDAD
PROFESIONAL Y
PERSONAL
DESAFÍO
INTELECTUAL
MOTIVACIONES
INTRÍNSECAS
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
➔ Usar
la edición.
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
➔ Unirse
organizativa.
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
➔ Diseña
con los grandes.
Nuevas interfaces.
➔ Usabilidad
➔ Construye
https://www.facebook.com/flashplatform
y funcionalidad.
prototipos.
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
Trabajo de
diseño
Estrategia y Análisis
Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
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
Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
Wireframes de
baja y media
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
Diseño de Interacción
Arq. de Información
Esp. Funcionales
Estrategia y Análisis
Fotografía: http://www.abnehmloesung.org/hilft-eiweis-beim-abnehmen-3-grunde-die-deine-meinung-andern-werden
Wireframes de
alta y prototipo
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?
Yo odio los colores
¿Por qué dice
ediciones en
ves de
Sabores?
No me
convencen tus
argumentos
No me
gusta la
redacción
http://wiki.canaima.softwarelibre.gob.ve/wiki/BSP/galería
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.
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.
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.
32. Comunicador social
●
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.
33. Asesor de identidad visual
●
Transforma el mensaje del comunicador social
en identidad visual.
●
Define las reglas visuales para el proyecto.
●
Establece el lenguaje visual del proyecto.
34. Programador Front-end
●
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.
35. Analista de sistemas
●
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.
36. Administrador de sistemas
●
Info y Infra estructura del sitio.
●
Instalación, configuración y publicación.
●
Mantenimiento y Seguridad.
●
Supervisión del sitio web.
61. Historico de errores de seguridad
Actualizado hasta el 02/05/2013
http://nvd.nist.gov/
62. 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/
63. Comparando las evaluaciones de la velocidad
entre Plone y Drupal
http://ccomb.gorfou.fr/2010/10/8/comparing-plone-and-drupal-speed-evolutions
64. Competencia de
nivel de entrada
http://es.slideshare.net/simplesconsultoria/gestin-de-contenido-con-plone
67. Ajuste del sitio y publicación
http://www.logrian-florian.fr/partenaire.php?ID=29
➔
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.
94. Documentación
➔ Estructura
de contenidos del sitio.
➔ Lineamientos
➔ Memoria
de equipo editorial.
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
103. ¡Gracias por su atención!
leonardoc@plone.org
http://about.me/macagua
@macagua / @canaimagnulinux
104. Licencia
Copyright (c) 2013 Leonardo J. Caballero G .
Permission is granted to copy, distribute and/or modify
this document under the terms of the GNU Free
Documentation License, Version 1.2 or any later version
published by the Free Software Foundation; with no
Invariant Sections, no Front-Cover Texts, and no BackCover Texts.
A copy of the license is included in the
section entitled "GNU Free Documentation License".