Remodelación del sitio Web de Canaima GNU Linux

Slide 1

Slide 1 text

Remodelación del sitio Web de Canaima Leonardo J. Caballero G.

Slide 2

Slide 2 text

Agenda ➔Motivaciones. ➔Necesidades. ➔Propuesta y ejecución. ➔Estado del arte. http://www.constructoracapeca.com/

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Necesitamos una remodelación http://www.logrian-florian.fr/partenaire.php?ID=29

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Estructura de contenidos (Mapa del sitio)

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Bocetos manuales (Sketch)

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Diseño de bocetos (Wireframe)

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

¿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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

Diseño visual (Mockup)

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

Diseño de prototipo (Prototype)

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

¿Por qué hacer prototipos?

Slide 29

Slide 29 text

Diseñadores vs. Programadores http://www.flickr.com/photos/a_ninjamonkey/3565672226/

Slide 30

Slide 30 text

¿Cual es el flujo de trabajo? Bocetos (Sketch) Prototipo (Prototype) Wireframes Diseño visual (Mock-up)

Slide 31

Slide 31 text

Roles http://adsanilights.com/

Slide 32

Slide 32 text

● 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

Slide 33

Slide 33 text

● 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

Slide 34

Slide 34 text

● 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

Slide 35

Slide 35 text

● 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

Slide 36

Slide 36 text

● Info y Infra estructura del sitio. ● Instalación, configuración y publicación. ● Mantenimiento y Seguridad. ● Supervisión del sitio web. Administrador de sistemas

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Propuesta por Xavier Araque

Slide 42

Slide 42 text

Versión inicial

Slide 43

Slide 43 text

Versión alternativa

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

FreeMind freemind.sf.net

Slide 47

Slide 47 text

Google Drive http://goo.gl/Qb0x2

Slide 48

Slide 48 text

Balsamiq https://canaimagnulinux.mybalsamiq.com/

Slide 49

Slide 49 text

Trello https://trello.com/b/tDdTDnoR

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

¿Cómo elegir entre CMS? ➔ Drupal. ➔ Joomla. ➔ Plone. ➔ Wordpress.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Drupal Collaboration & social Categoría Web Content & Experienced Management www.drupal.org

Slide 54

Slide 54 text

Web Content & Experienced Management Categoría Joomla www.joomla.org

Slide 55

Slide 55 text

Plone Collaboration & social Categoría Web Content & Experienced Management Portal and Content Integration www.plone.org

Slide 56

Slide 56 text

Wordpress Collaboration & social Categoría Web Content & Experienced Management www.wordpress.org

Slide 57

Slide 57 text

Historico de errores de seguridad http://nvd.nist.gov/ Actualizado hasta el 02/05/2013

Slide 58

Slide 58 text

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/

Slide 59

Slide 59 text

Comparando las evaluaciones de la velocidad entre Plone y Drupal http://ccomb.gorfou.fr/2010/10/8/comparing-plone-and-drupal-speed-evolutions

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

➔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

Slide 63

Slide 63 text

➔ 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

Slide 64

Slide 64 text

Necesitamos una actualización http://www.flickr.com/photos/nakedcharlton/72041049/

Slide 65

Slide 65 text

Muchas piezas de Software

Slide 66

Slide 66 text

Servidores en producción

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

● Servidor web ligero y eficiente. ● Tolerancia a fallos y Concurrencia. ● Usado como Proxy inverso. http://nginx.org/

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

● Balanceador de carga TCP. ● Usado para peticiones HTTP. ● Herramienta Web de Monitoreo. http://haproxy.1wt.eu/

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

● Proxy cache y balanceador de carga. ● Basado en configuración VCL. ● Soporte para ESI y HTTP Cache. http://www.varnish-cache.org/

Slide 74

Slide 74 text

Flujo de publicación

Slide 75

Slide 75 text

Flujo de trabajo de Publicación Simple

Slide 76

Slide 76 text

Flujo de trabajo de Estado Único

Slide 77

Slide 77 text

Flujo de trabajo flujo de Encuestas

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Contribuciones del usuario

Slide 82

Slide 82 text

Discusión de lista de correo

Slide 83

Slide 83 text

Discusión de lista de correo

Slide 84

Slide 84 text

Discusión de lista de correo

Slide 85

Slide 85 text

Sindicación RSS

Slide 86

Slide 86 text

OpenData – API Rest / JSON

Slide 87

Slide 87 text

Escrito en Python http://python.org/ Python, es una marca registrada de la fundación Python

Slide 88

Slide 88 text

Lenguajes de programación mas populares de 2013

Slide 89

Slide 89 text

github.com/canaimagnulinux

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

● Inicio: Diciembre 2012. ● Culminación: Julio 2013. ● Costo estimado: 64.000 BsF Planificación y costos http://www.escuelacarabineros.cl/costos-de-la-carrera

Slide 92

Slide 92 text

Programadores <3 Diseñadores http://www.fanpop.com/clubs/teddybear64/images/16835281/title/dog-cat-wallpaper-wallpaper

Slide 93

Slide 93 text

Participantes activos Leonardo Caballero Flamel Canto Carlos Parra Maximiliano Vilchez

Slide 94

Slide 94 text

Participantes inactivos José Subero Xavier Araque Carlos D. Marrero Sasha Solano Luis A. Martinez

Slide 95

Slide 95 text

Participa: canaima.softwarelibre.gob.ve

Slide 96

Slide 96 text

Para aprende más: wiki.canaima.softwarelibre.gob.ve

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

¡Gracias por su atención! [email protected] http://about.me/macagua @macagua / @canaimagnulinux

Slide 99

Slide 99 text

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".