Remodelación del sitio Web de Canaima

Leonardo J. Caballero G.

Agenda

➔Motivaciones.

➔Necesidades.

➔Propuesta y ejecución.

➔Estado del arte.

http://www.constructoracapeca.com/

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/

MOTIVACIONES EXTRÍNSECAS

DINERO

SEÑALIZACIÓN Y PREOCUPACIONES

DE OFICIO

NECESIDADES USUARIO

APRENDIZAJE YDESARROLLO DE

HABILIDADES

REPUTACIÓN

RECIPROCIDAD

MOTIVACIONES INTRÍNSECAS

ESTATUS

ALEGRÍA Y PLACER

AUTONOMÍA

IDENTIDAD PROFESIONAL Y

PERSONALDESAFÍO

INTELECTUAL

Motivaciones en el Software Libre

Necesitamos una remodelación

http://www.logrian-florian.fr/partenaire.php?ID=29

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

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/

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

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.

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

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

Estructura de contenidos(Mapa del sitio)

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.

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

Bocetos manuales (Sketch)

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.

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 dealta 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

Diseño de bocetos (Wireframe)

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.

¿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

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.

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.

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.

Diseño visual (Mockup)

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.

Diseño de prototipo (Prototype)

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.

¿Por qué hacer prototipos?

Diseñadores vs. Programadores

http://www.flickr.com/photos/a_ninjamonkey/3565672226/

¿Cual es el flujo de trabajo?

Bocetos(Sketch)

Prototipo(Prototype)Wireframes

Diseño visual(Mock-up)

Roles

http://adsanilights.com/

● 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

● 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

● 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

● 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

● Info y Infra estructura del sitio.

● Instalación, configuración y publicación.

● Mantenimiento y Seguridad.

● Supervisión del sitio web.

Administrador de sistemas

Imagen visual

http://orinoquiaphoto.photoshelter.com/gallery-image/Artesania-Venezolana/G0000XfGOgKZBS20/I0000tHxowmV_Zcw/C0000RglhUGlxIlk/

Fotografía: http://venciclopedia.com/index.php?title=Yekuanahttp://orinoquiaphoto.photoshelter.com/gallery/Artesania-Venezolana/G0000XfGOgKZBS20/C0000RglhUGlxIlk

Propuesta por Xavier Araque <rendergraf>

Versión inicial

Versión alternativa

Las herramientas utilizadas

http://blog.jardinitis.com/2011/02/herramientas-de-jardin.html

FreeMind

freemind.sf.net

Google Drive

http://goo.gl/Qb0x2

Balsamiq

https://canaimagnulinux.mybalsamiq.com/

Trello

https://trello.com/b/tDdTDnoR

““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 OhtamaaMikko Ohtamaa

¿Cómo elegir entre CMS?

➔ Drupal.

➔ Joomla.

➔ Plone.

➔ Wordpress.

Drupal

Collaboration & social

Categoría

Web Content & Experienced Management

www.drupal.org

Web Content & Experienced Management

Categoría

Joomla

www.joomla.org

Plone

Collaboration & social

Categoría

Web Content & Experienced Management

Portal and Content Integration

www.plone.org

Wordpress

Collaboration & social

Categoría

Web Content & Experienced Management

www.wordpress.org

Historico de errores de seguridad

http://nvd.nist.gov/

Actualizado hasta el 02/05/2013

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/

Comparando las evaluaciones de la velocidad entre Plone y Drupal

http://ccomb.gorfou.fr/2010/10/8/comparing-plone-and-drupal-speed-evolutions

Competencia de nivel de entrada

http://es.slideshare.net/simplesconsultoria/gestin-de-contenido-con-plone

Competencia Empresarialhttp://es.slideshare.net/simplesconsultoria/gestin-de-contenido-con-plone

➔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

➔ 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

Necesitamos una actualización

http://www.flickr.com/photos/nakedcharlton/72041049/

Muchas piezas de Software

Servidores en producción

Nginx

http://www.flickr.com/photos/caharley72/11332057

● Servidor web ligero y eficiente.

● Tolerancia a fallos y Concurrencia.

● Usado como Proxy inverso.

http://nginx.org/

HAProxy

http://www.flickr.com/photos/poetatum/3457696479

● Balanceador de carga TCP.

● Usado para peticiones HTTP.

● Herramienta Web de Monitoreo.

http://haproxy.1wt.eu/

Varnish

http://www.flickr.com/photos/aereimilitariorg/3956024476

● Proxy cache y balanceador de carga.

● Basado en configuración VCL.

● Soporte para ESI y HTTP Cache.

http://www.varnish-cache.org/

Flujo de publicación

Flujo de trabajo de Publicación Simple

Flujo de trabajo de Estado Único

Flujo de trabajo flujo de Encuestas

Nuevas herramientas

http://gravitywaseverywherebackthen.blogspot.com/2011/04/axing-hammering-and-planing.html

Contribuciones del usuario

Discusión de lista de correo

Discusión de lista de correo

Discusión de lista de correo

Sindicación RSS

OpenData – API Rest / JSON

Escrito en Python

http://python.org/

Python, es una marca registrada de la fundación Python

Lenguajes de programación mas populares de 2013

github.com/canaimagnulinux

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

● Inicio: Diciembre 2012.

● Culminación: Julio 2013.

● Costo estimado: 64.000 BsF

Planificación y costos

http://www.escuelacarabineros.cl/costos-de-la-carrera

Programadores <3 Diseñadores

http://www.fanpop.com/clubs/teddybear64/images/16835281/title/dog-cat-wallpaper-wallpaper

Participantes activos

Leonardo Caballero<macagua>

Flamel Canto<flamelcanto>

Eliezer Romero<eliezerfot123>

Maximiliano Vilchez<maxudes>

Rodrigo Bravo<Rodrigo4k>

Axel Díaz <Axelio>

Participantes activos

Dehivis Perez <dehivix>

Orlando Fiol<overflow>

Carlos Parra<ceparraf>

Participantes inactivos

José Subero<arawako>

Xavier Araque<rendergraf>

Carlos D. Marrero<cdmarrero>

Sasha Solano<ssolano>

Luis A. Martinez<HuntingBears>

Participa:

canaima.softwarelibre.gob.ve

Para aprende más:

wiki.canaima.softwarelibre.gob.ve

¡Gracias por su atención!

leonardoc@plone.org

http://about.me/macagua

@macagua / @canaimagnulinux

Licencia

Copyright (c) 2013 Leonardo J. Caballero GCopyright (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".