● Fabián HernándezScrum Master - desarrollador web
Equipo dinamizador:
● David TrianaDesarrollador Web CMS
● Dilia Lucia Prieto HAccesibilidad Web
● Julio Enrique LozanoLíder GEL
● José BernalIlustrador - Diseñador Gráfico Web
Distribución Distrital CMS
CIDT - Fábrica de Software 2015
● Juan Carlos AvendañoAnalista de requerimientos funcionales
● Gabriel RoncancioDesarrollador Interfaces Gráficas
● ¿Qué es la Distribución Distrital CMS?
● Objetivos
● Identidad Gráfica
● ¿Cómo participar?
● Flujo de desarrollo colaborativo○ Enfoque tecnológico○ Enfoque metodológico
Contenidos
● Accesibilidad con enfoque social○ Diagnóstico factores de accesibilidad○ Ficha Técnica
● Características funcionales○ Estructura y componentes
● Perfiles de Instalación○ Empaquetamiento
● Interfaces gráficas○ Plantilla para Portal Web○ Plantilla para Sitio Web
Contenidos
● Gestión del proyecto○ Procedimiento PR 307, ciclo de vida SCRUM○ Desarrollo colaborativo
● Plan de trabajo○ Características funcionales comunes○ Avances○ Estrategia○ Cronograma primera fase
● Ventajas y beneficios
● Preguntas
Contenidos
Es una plataforma tecnológica de Software Libre basada en el CMS Drupal, que permite la implementación, despliegue y mantenimiento de sitios y portales distritales, teniendo en cuenta las recomendaciones de gobierno electrónico, los lineamientos de la guía de sitios web 3.0, estándares de accesibilidad y criterios de usabilidad, que a su vez estandariza los componentes funcionales e interfaces gráficas en las implementaciones web de las Entidades del Distrito Capital.
¿ Que es la Distribución Distrital CMS?
● Estandarizar componentes funcionales y tipos de contenido de uso común en los sitios web existentes.
● Facilitar la implementación de mecanismos para la interoperabilidad entre sitios.
● Incorporar lineamientos de accesibilidad web Norma Técnica NTC - 5854
● Conformar una comunidad de desarrolladores en torno a la Distribución Distrital CMS.
● Promover la participación de las Entidades en la definición de herramientas tecnológicas basadas en Drupal, para el desarrollo y contribución de componentes funcionales.
● Fomentar el desarrollo colaborativo de los componentes funcionales entre Entidades.
Objetivos
La forma de gota es una alusión directa a Drupal CMS. Esta es la plataforma tecnológica de Software Libre que utilizan la mayoría de entidades distritales, para la gestión de contenidos digitales.
En esta pieza gráfica hay una serie de líneas intersectadas que conforman una red, las cuales buscan expresar aspectos como: modularidad, integración, interoperabilidad, reuso y colaboración. Así mismo, al centro de la composición se encuentra un círculo que representa: unidad, estandarización, accesibilidad, participación y gobierno electrónico.
Los colores de la composición incluyen el amarillo y rojo presentes en el escudo y la bandera de la ciudad de Bogotá, los tonos magentas y naranjas representan a las entidades distritales que contribuyen al crecimiento y fortalecimiento del proyecto. Finalmente, el color azul hace referencia a la Guía Distrital de Sitios Web v3.0.
Identidad gráfica
¿Cómo participar?
La Distribución Distrital CMS, invita a todas las Entidades del Distrito, a ser parte de este proyecto tecnológico e impulsar de manera colaborativa la construcción de sus sitios y portales web.
Entidades Distritales - CDS
Accesibilidad - Usabilidad
Componente Metodológico - Scrum
Componente tecnológico
Flujo de desarrollo colaborativo
Objetivos:
● Desarrollar y estandarizar las características funcionales y componentes web de uso común.● Permitir la mantenibilidad, interoperabilidad, reuso y soporte de características y componentes web en
portales y sitios web distritales.● Establecer un único repositorio de software libre para acceder, descargar y contribuir a los
componentes funcionales de la Distribución Distrital CMS.● Definir los perfiles de instalación para facilitar la implementacioń de sitios y portales web.
El flujo de trabajo en Drupal, es un conjunto de mejores prácticas y plataformas de desarrollo, que adoptan un enfoque técnico y metodológico para la construcción de la Distribución Distrital CMS de forma colaborativa.
+ + =Drupal Drush Git
* Code Driven Workflow* Flujo de trabajo orientado a código
+
Enfoque tecnológicoMejores prácticas y herramientas de desarrollo*
Ambiente de desarrollo colaborativo
● Comunicación de Equipo
● Discusión técnica● Notificaciones Git
Enfoque tecnológico
● Issues● Seguimiento● Discusión● Documentación
Enfoque metodológico¡Scrum!
● Historias de usuario● Priorización de actividades● Planeación técnica● Iteraciones● Seguimiento● Kanban● Desarrollo● Retroalimentación● Pruebas
Accesibilidad con enfoque socialAcceso universal de las personas con y/o en situación de discapacidad
● Acuerdo 559 de 2014● Accesibilidad Web Norma Técnica
NTC-5854● Diagnóstico● Plan de mejoramiento● Plan de capacitación● Revisión de complementos que
cumplan los requerimientos de accesibilidad
● Desarrollo de la distribución CMS accesible
Diagnóstico AccesibilidadFactor Perceptible
La información y los componentes de la UI deben ser presentados de forma que puedan ser percibidos por los usuarios
Diagnóstico AccesibilidadFactor Operable
Los componentes y navegación de la interfaz de usuarios deben ser operables.
Diagnóstico AccesibilidadFactor Comprensible
La información y la navegación de la interfaz de usuario debe ser comprensible
Diagnóstico AccesibilidadFactor Robusto
El contenido debe ser suficientemente robusto que pueda ser interpretado adecuadamente por una amplia variedad de UA. y herramientas de asistencia
Características funcionales
En los sitios web del Distrito se pueden identificar varias Características Funcionales de uso común, las cuales pueden ser estandarizadas, desarrolladas y empaquetadas para su reutilización en nuevas implementaciones.* Las características funcionales en Drupal son una colección de componentes que cumplen con determinados casos de uso, permiten realizar el control de cambios y se empaquetan para facilitar su portabilidad y mantenibilidad.
* Ver: Plan de Trabajo - Características funcionales comunes
Permisos Campos ...
Vista Módulos Menú
● Referencia módulos y dependencias● Estilos de imágenes● Definición de tipos de contenido● Estructura de contenido● Navegación● Vistas● Permisos● Configuraciones● etc...
C-Type Estilos Taxonomía
Característica Funcional
Estructura Componentes
Características funcionales
Perfiles de instalación
Mod
Feat
Mod
Feat
Mod
Mod
Feat
Drupal.org
GitHub
GitLab+++ @old--- @new- bca+ abc
Feat
+++ @old--- @new- bca+ abc
Empaquetamiento
.make
.profile
Feat A
Feat B Feat C
Interfaces gráficas: Plantilla para Portal Características
● Puede tener una interfaz que contiene gran número de posiciones para extender o destacar los contenidos del portal
● Puede poseer una estructura de 3 o más niveles de navegación. Es posible encontrar sub-estructuras de contenidos que conforman nuevos contextos conocidos como micrositios.
● Puede reunir contenidos que provienen de varias fuentes externas como sitios, plataformas o servicios web a través webservices, sindicación de contenidos u otro método de transporte de datos en la red. Todos ellos se visualizan de forma unificada con el fin de ofrecer un acceso directo a los usuarios para su consulta y visualización.
Interfaces gráficas: Plantilla para Portal
La estética de las interfaces podrá ser desarrollada de acuerdo a los criterios de diseño gráfico de alto nivel de la Entidad.
Componentesa. HTML5, CSS3, JavaScriptb. Sistema de grilla (Pure CSS)c. Formularios, botones, tablas, menúsd. Less CSS
Factorese. Perceptiblef. Operable
g. Comprensibleh. Robusto
Alcancea. Encabezado Institucionalb. Pie de página Institucionalc. Barra institucionald. Características funcionales comunes
(transversales)e. Lineamientos estructurales de contenido de la guía
de sitios web
El Tema Portal, ofrecerá la estructura de la interfaz gráfica, estandarizando características de diseño de bajo nivel y criterios de accesibilidad
Interfaces gráficas: Plantilla para Sitio Web
Características
● Puede presentar información relacionada con una entidad, festival, evento, proyecto misional, etc.
● Puede poseer una estructura de contenidos no mayor 3 niveles de navegación.
● La cantidad de posiciones en el front end, no es tan amplia con respecto a la interfaz de portal.
● Puede tener una estructura de contenidos que conforman micrositios para definir diferentes contextos internos en el sitio web
● Permite tener acceso a ciertos recursos de una intranet.
El Tema Sitio Web se incluirá en la siguiente fase de desarrollo de la Distribución Distrital CMS
Gestión del proyecto
.make
Drush
Git
CaracterísticaFuncional
Desarrolladores
Makefile
Entidades
Drupal.org
GitLabA
B
C
Desarrollo colaborativo
Plan de trabajo
Slideshow
Lista de noticias
Enlaces destacados
Encabezado Institucional
Perfil de Instalación
.profile .info .install
25% 90%Consultar Repositorios: http://desarrollotic.alcaldiabogota.gov.co/grupo-cms
Avances
AC
DTI
C
● Gerencia del proyecto Procedimiento PR-307
● Identificar las características funcionales o componentes web comunes en los sitios existentes del Distrito. Ej: Slideshow, galería multimedia, georreferenciación, noticias, etc.
● Especificar las Historias de Usuario.
● Revisión técnica y brainstorming para mejoramiento y apropiación de componentes web.
● Especificación no funcional (interfaces y accesibilidad).
CD
S
Acc
esib
ilida
d
● Presentar ante la CDS el flujo de trabajo orientado a código, el proyecto de la distribución distrital CMS.
● Establecer el backlog del producto y priorizar el desarrollo de los componentes web.
● Asignar características funcionales a equipos de desarrollo de las entidades.
Scru
m
Plan de trabajoEstrategia
● Realizar reuniones técnicas entre equipos de desarrollo (Mejores prácticas, herramientas, repositorio, contribuciones y accesibilidad).
● Iniciar fase de desarrollo colaborativo en repositorio público.
● Realizar reuniones técnicas periódicas entre líderes de equipo para dar seguimiento a las contribuciones en repositorio público.
● Desplegar versión de desarrollo estable servidor de pruebas.
● Ejecutar pruebas funcionales y no funcionales.
● Realizar empaquetamiento de la Distribución
AC
DTI
C
CD
S
GitH
ub /
GitL
ab
● Posicionamiento.
● Lanzamiento.
Acc
esib
ilida
d
Scru
m
Alcaldía Mayor de Bogotá
Plan de trabajoEstrategia
Plan de trabajo
ETAPAS Actividades
27 - 30 abr
4 - 8 may
11 - 15
may
18 - 22
may
24 - 30
may
1 - 5 jun
9 - 12 jun
16 - 19 jun
22 - 26 jun
30 jun - 3 jul
6 - 10 jul
13 - 17 jul
Sem 1
Sem 2
Sem 3
Sem 4
Sem 5
Sem 6
Sem 7
Sem 8
Sem 9
Sem 10
Sem 11
Sem 12
INICIACIÓN
Formulación del proyecto X X X X 30
Acta de Constitución 6
Plan de Gestión 10
DIAGNÓSTICO
Revisión de Características Funcionales transversales en cabezas de sector X X X X X X X
Accesibilidad Web X X X
ESPECIFICACIÓN
Especificación y aprobación de documento de requerimientos X X
Levantamiento y aprobación de historias de usuario, características funcionales comunes X X
Definición de la estructura de contenidos X X
Cronograma primera fase
Plan de trabajo
ETAPAS Actividades
27 - 30 abr
4 - 8 may
11 - 15
may
18 - 22
may
24 - 30
may
1 - 5 jun
9 - 12 jun
16 - 19 jun
22 - 26 jun
30 jun - 3 jul
6 - 10 jul
13 - 17 jul
21 - 24 jul
27 - 31 jul
3 - 6 ago
10 - 14
ago
Sem 1
Sem 2
Sem 3
Sem 4
Sem 5
Sem 6
Sem 7
Sem 8
Sem 9
Sem 10
Sem 11
Sem 12
Sem 13
Sem 14
Sem 15
Sem 16
PROTOTIPADO
Flujo de trabajo orientado a código con drupal: Perfil de instalación, Características funcionales base X X X X X
Propuesta de interfaces gráficas (Portal - Sitio) X X X
SOCIALIZACIÓN Presentación de la estrategia de desarrollo colaborativo ante la CDS 25
ACTUALIZACIÓN TÉCNICA Y METODOLÓGICA
Reunión Técnica Accesibilidad, Fábrica de Software28 y 29
Reunión técnica con equipos de desarrollo colaborativo 10
Reunión técnica con equipos de desarrollo para accesibilidad 17
PLANEACIÓN
Priorización del desarrollo de las caracteristicas funcionales X X
Preparación de las actividades con los equipos de desarrollo y plan de trabajo X
Cronograma primera fase
Plan de trabajo
ETAPAS Actividades
27 - 31 jul
3 - 6 ago
10 - 14
ago
18 - 21
ago
24 - 28
ago
31 ago - 4 sep
7 - 11 sep
14 - 18 sep
21 - 25 sep
21 - 25 sep
28 sep - 2 oct
5 - 9 oct
13 - 16 oct
19 - 23 oct
26 - 30 oct
Sem 14
Sem 15
Sem 16
Sem 17
Sem 18
Sem 19
Sem 20
Sem 21
Sem 22
Sem 23
Sem 24
Sem 25
Sem 26
Sem 27
Sem 28
DISEÑO GRÁFICO
construcción de las propuestas de interfaces gráficas X X
Aprobación de las interfaces gráficas X
DESARROLLO
Desarrollo de la interfaz gráfica portal X X X
Fase de desarrollo colaborativo de las características funcionales en repositorio público X X X X X X X X X
PRUEBAS Retroalimentación y pruebas funcionales X X X X X X X X
COMUNICACIONES Estrategia de posicionamiento X X X
CIERRE Lanzamiento y puesta en producción X
Cronograma primera fase
1. Agilizar el desarrollo de sitios y portales web en las Entidades del Distrito.
2. Facilitar la gestión de componentes y dependencias de Drupal para Webmasters del Distrito.
3. Aumentar el tiempo de respuesta para la solución de incidencias funcionales y no funcionales de la distribución.
4. Ofrecer a las Entidades del Distrito, un mecanismo de instalación automático para la implementación del sitio o portal web.
5. Crear una comunidad de desarrolladores del Distrito en torno a la Distribución Distrital CMS.
6. Fomentar el uso de Software Libre y metodologías de desarrollo para aumentar la calidad y transparencia de esta plataforma.
Ventajas y beneficios
Próxima reunión
Jornadas de actualización técnica:● Drupal: 10 de Julio de 8:00am a 12:00am● Accesibilidad: 17 de Julio de 8:00am a 12:00am
Contacto:● Fabián Hernández: [email protected]● Dilia Prieto: [email protected]