CIDT - Fábrica de Software 2015

Distribución Distrital CMS

● 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

Identidad gráfica

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

Accesibilidad: Ficha técnica

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

Perfil de Instalación

Perfiles de instalaciónEmpaquetamiento

.make

.profile .info .install

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

[Ref] Figura 1

Gestión de Proyecto

Feat A

Feat B Feat C

Procedimiento PR-307, ciclo de vida Scrum

Gestión del proyecto

.make

Drush

Git

CaracterísticaFuncional

Desarrolladores

Makefile

Entidades

Drupal.org

GitLabA

B

C

Desarrollo colaborativo

Plan de trabajoCaracterísticas funcionales comunes

Plan de trabajo: Características funcionales comunes

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

¿Preguntas?

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: fhernandezn@alcaldiabogota.gov.co● Dilia Prieto: dlprieto@alcaldiabogota.gov.co

Gracias