Manual visual App Uniandes y metodologĂa Cedex InnovaciĂłn
ÍNDICE DSIT - CedEx Innovación Metodología Desarrollo Manual Visual App Uniandes
CedEx Innovación
MetodologĂa Esquema de trabajo PARA EL DESARROLLO UTILIZANDO DESIGN THINKING &
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea covmmodo co
Diseño testeado
Lluvia de ideas
Hipótesis
Historias de usuario Priorización
Priorización
Solución a Impedimentos
Validación
Encontrar la necesidad
ITERAR EXPERIMENTAR
Revisión Backlog
Scrum diario
Revisión Sprint
Planeación
ENTREGA FINAL
CedEx Innovación
Metodología Scrum ¿Cuándo se necesita emplear un enfoque ágil? Cuando un proyecto tenga que hacer frente a realizar cambios extremos o cuando sea habitual realizar cambios. Se tienen diferentes fases llamadas iteraciones, al final de cada iteración se genera parte del software en funcionamiento. En cada una de las iteraciones se implementa o se lleva a cabo todo el ciclo del proceso, se va generando parte del software funcional, de esta manera el cliente es capaz de ver parte del software en funcionamiento y comprender lo que realmente necesita, de esta forma se obtiene feedback que se utiliza para la adaptación.
Diseño
Diseño
Integración Test Implementación
Especificación Diseño Contrucción Integración Test
Contrucción Integración Test Implementación
Especificación
Iteración
Contrucción
Iteración
Especificación
Iteración
Iteración
Especificación
Implementación
Software funcional
Software funcional
Diseño Contrucción Integración Test Implementación
Software funcional
Software funcional
CedEx Innovación
Elementos de Scrum
Backlog del producto: Elemento dinรกmico en funciรณn de los inputs recibidos del cliente. Se generan las historias de usuario que van priorizadas de acuerdo al valor del negocio. Backlog del sprint: Las estimaciones de las historias de usuario dependen de la capacidad y los datos de los sprint anteriores.
Elementos de Scrum
Scrum diario
Reuni贸n creaci贸n del backlog
Daily, reuniones cortas para revisar impedimentos y tareas diarias
Retrospectiva del Sprint
Feedback del cliente
Se buscan mejoras
Revici贸n del Sprint
CedEx Innovaci贸n
Planeación El propósito de la planificación ágil es centrar los esfuerzos y mantener el foco en incrementar el valor para el negocio. • En un entorno ágil de scrum el plan evoluciona a lo largo del proyecto. • Al comenzar no se deberían añadir todas las historias del backlog. • Durante el sprint se tiene el tiempo de pensar, descubrir y añadir nuevas historias al backlog. • El cliente da feedback y eso permite generar nuevas ideas al backlog.
ESTRATEGIA Lo que se quiere alcanzar como organización
PORTAFOLIO Establece el tipo de proyectos a trabajar
PRODUCTO
ENTREGA Incrementos iterativos
ITERACIÓN Backlog del Sprint
DÍA Daily, reunión de pie
Herramientas de trabajo
Burndown Chart
GitHub Canvas
burndown chart Para hacer el seguimiento de tareas de desarrollo, se utiliza GitHub en donde se encuentra el código y las tareas en forma de canvas. Diariamente se revisa dicho elemento y se hace seguimiento mediante un gráfico Burndown Chart en donde se estima el tiempo de terminación del proyecto y los esfuerzos necesarios para cumplir con los tiempos y tareas previamente definidos. También se utilizan tableros físicos, en donde cada desarrollador e integrante del equipo, puede mover sus tareas a medida que se van ejecutando, es una gran herramienta de seguimiento en donde todo el equipo conoce el avance del proyecto.
Tiempo
CedEx Innovación
Desarrollo Lineamientos sobre contribución
FOTO
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Dirección de Servicios de Información y Tecnología de la Universidad de los Andes en GitHub. Estos son más que todo lineamientos, no reglas. Haz tu mejor juicio, y siéntete libre de proponer cambios para este documento en un pull request.
CEDEX INNOVACIÓN La Dirección de Servicios de Información y Tecnología es una unidad organizativa de la Universidad de los Andes, compuesta por más de 10 Centros de Experiencia (en adelante CedEx). Esta organización pretende dar cabida a todos los proyectos generados por los distintos CedEx que se relacionen con desarrollo de software interno, diseño de productos y —últimamente—, código abierto generado por estas.
CedEx Innovación
Servicios
Servios Servicios Servicios El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Dirección de Servicios de Información y Tecnología de la, no reglas. Haz tu mejor juicio, y siéntete libre de proponer cambios para este documento en un pull request.
Servios Servicios Servicios
Servios Servicios Servicios
,lmknjbhvgmcfngvhbjnkml
,lmknjbhvgmcfngvhbjnkml
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Dirección de proponer caeste documento en un pull request.
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Dirección de proponer caeste documento en un pull request.
Servicios
Servios Servicios Servicios
Servios Servicios Servicios
Servios Servicios Servicios
,lmknjbhvgmcfngvhbjnkml
,lmknjbhvgmcfngvhbjnkml
,lmknjbhvgmcfngvhbjnkml
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Direcci贸n de proponer caeste documento en un pull request.
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Direcci贸n de proponer caeste documento en un pull request.
El siguiente documento es un conjunto de lineamientos para contribuir a los proyectos pertenecientes a la Direcci贸n de proponer caeste documento en un pull request.
CedEx Innovaci贸n
DSIT CEDEX
CEDEX INNOVACIÓN La Dirección de Servicios de Información y Tecnología es una unidad organizativa de la Universidad de los Andes, compuesta por más de 10 Centros de Experiencia (en adelante CedEx). Esta organización pretende dar cabida a todos los proyectos generados por los distintos CedEx que se relacionen con desarrollo de software interno, diseño de productos y —últimamente—, código abierto generado por estas.
CedEx Innovación
CedEx Innovaciรณn
App Uniandes Manual Visual
CedEx Innovaciรณn
Los colores, Pantone y CMYK
Paleta de Colores
Los colores escogidos para toda la app parten del aniversario de 70 años de la Universidad, para mantener una linea gráfica en diferentes áreas. Estos tambien hacen parte de los colores en los carnets de la comunidad, en donde cada quien escoge el color que desea dependiento si es estudiante, administrativo, profesor, donante, entre otros.
Rosado
Cian
Amarillo
CMYK 3 | 92 | 0 | 0
CMYK 70 | 0 | 19 | 0
CMYK 4 | 0 | 89 | 0
RGB 229 | 54 | 148
RGB 19 | 190 | 208
RGB 251 | 238 | 52
HEX #e53593
HEX #13bed0
HEX #fbee34
Paleta de Colores
Dorado
Negro
Plata
CMYK 6 | 14 | 63 | 0
CMYK 45 | 34 | 35 | 14
CMYK 24 | 18 | 19 | 1
RGB 241 | 211 | 121
RGB 132 | 137 | 138
RGB 191 | 192 | 192
HEX #f0d378
HEX #838889
HEX #bfc0c0
CedEx Innovaciรณn
Implementación Colores AppBar Usamos un solo tipo de AppBar, una barra inferior con un botón diamante, con un redondeado de 20px. El botón diamante debe cambiar al color principal de la paleta asociada al carné del usuario. AppBar con búsqueda En las activity que manejan patrones de búsqueda el botón diamante abre una superficie similar a la del chat, pero que muestra únicamente una lista de sugerencias, reactiva a la búsqueda.
Elevación y sombras
Elevación General de componentes
0dp
6dp
1dp
8dp
Cada uno de los elementos presentes en la aplicación tiene una elevación, elevación que se encuentra definida según el tipo de elemento (ya sea una card, una card seleccionada, un botón, widget, o chips).
2dp
9dp
3dp
4dp
12dp
16dp
CedEx Innovación
Tipografía
H1 / Helvetica Regular
96.99 / -1.5 letter-spacing
H2 / Avenir Next Regular
67.73 / -0.5 letter-spacing
Títulos ABCDEFGHIJKLMN H1 OPQRSTUVWXYZ
H3 / Roboto Regular
48 / 0 letter-spacing
H4 / Avenir Next Regular
38.38 / 0.25 letter-spacing
H5 / Avenir Next Ultra Light
27.56 / 0 letter-spacing
H6 / Avenir Next Regular 22.58 / 0.2 letter-spacing
Body 1 / Helvetica Regular 16.16 / 0.25 letter-spacing Body 2 / Helvetica Regular 14.14 / 0.25 letter-spacing
Textos
Subtitle 1 / Helvetica Oblique
16.16 / 0.15 letter-spacing Subtitle 2 / Helveticas Oblique
Body1
ABCDEFGHIJKLMNOPQR STUVWXYZ abcdefghijklmnopqrstuvwxyz
14.14 / 0.25 letter-spacing BUTTON / AVENIR NEXT REGULAR
15.8 / 1.25 letter-spacing
Description / Helvetica Regular
12.12 / 0.4 letter-spacing
CedEx Innovaciรณn
Ejemplo:
Hola.
Un fundamento adaptativo. OVERLINE
Cabecera 6
Cabecera 4
Cuerpo 1
Cabecera 5
Caption
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. Macondo era entonces una aldea de veinte casas de barro y cañabrava construidas a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, blancas y enormes como huevos prehistóricos.
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. Macondo era entonces una aldea de veinte casas de barro y cañabrava construidas a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, blancas y enormes como huevos prehistóricos.
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. Macondo era entonces una aldea de veinte casas de barro y cañabrava construidas a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, blancas y enormes como huevos prehistóricos.
H1 / Helvetica Regular H2 / Avenir Next Regular H3 / Roboto Regular Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. Macondo era entonces una aldea de veinte casas de barro y cañabrava construidas a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, blancas y enormes como huevos prehistóricos.
CedEx Innovación
Backdrop
Capa Frontal Activada / Capa posterior Activada
Ejemplo 1
Ejemplo 2
Capa posterior
Capa posterior
El backdrop es el fondo detrรกs de todas las otras superficies en una aplicaciรณn, que muestra contenido contextual y procesable. Cuando estรก oculta, la capa posterior puede mostrar informaciรณn contextual sobre la capa frontal. Cuando se revela, la capa posterior muestra botones contextuales que se relacionan con la capa frontal.
Capa frontal
Capa frontal
Una pancarta muestra un mensaje importante e implicito, y proporciona acciones para que los usuarios se dirijan. Requiere una acción del usuario para ser descartada. Los banners deben aparecer en la parte superior de la pantalla, debajo de una barra de aplicaciones superior. Son persistentes y no modulares, lo que permite al usuario ignorarlos o interactuar con ellos en cualquier momento.
Banner
Banner - Una fila
Greyhound divisively hello coldly wonderfully BO TÓ N
BO TÓ N
Banner - Dos filas
Greyhound divisively hello coldly BO TÓ N
BO TÓ N
Texto con Imagen
Greyhound divisively hello coldly wonderfully marginally far upon excluding. BO TÓ N
BO TÓ N
Greyhound divisively hello coldly wonderfully marginally far upon excluding. BO TÓ N BO TÓ N
CedEx Innovación
Buttons Botón Contenid o
BOTÓN
Estados
BOTÓN
BOTÓ
BOTÓN
BOTÓN
Botón Texto
BO TÓ N
Estados
BOTÓN
BO TÓ ÓN N
BO TÓ N BOTÓN
Botón Bordeado
BO TÓ N
Botón Barra
BO TÓ N BOTÓN
Estados
BOTÓN
BO TÓ N BOTÓN
BO TÓ N BOTÓN
BO TÓ N BOTÓN
Estados y Elementos
Estandar
Estados para Primarios y Secundarios
Mini FAB
Estados para Primarios y Secundarios
Extended F AB
Estados para Primarios y Secundarios
BOTÓN
BOTÓN
BOTÓN
BOTÓN
BOTÓN
BOTÓN
BOTÓN
BOTÓN
CedEx Innovación
Cards Las Cards son la unidad principal de toda la interacción en las aplicaciones hibridas con interacciones conversacionales, esto ya que las cards deberían ser construidas para ser reutilizadas en más de un caso de uso o historia de usuario.
Titulo 4 Titulo 6
Una card es lo que conocemos como “celula”, una unidad compuesta de varios elementos que debe tener capacidad de ejecución propia, es decir, debe tener toda la información e interacción necesaria dentro de si misma.
BO TÓ N
Greyhound hello coldly wonderfully marginally far
BO TÓ N
Cuerpo 2
Greyhound divisively hello coldly...
Comportamientos de Cards Elementos - Superficie
Desca nsa
Superficies – Estados de las Adaptive Cards
Deshabilit ado
Hover
Enfocado
Presionado
Selecciona do
Titul Quienes solo hacen por sus semejantes aquello a que la ley los obliga, no están cumpliendo a cab ca bali alid dad sus d de eberes es,, ni ni so on buenos BOTÓN
Tag • Ta
Greyhou margina
BOTÓN
Quienes solo hacen por sus semejantes aquello a que la ley los obliga, no están cumpliendo a cabalidad sus deberes ni son buenos BOTÓN
Subtitl
Enab
BOTÓN
BOTÓ
Ejemplos de Tipos de Cards Cards Complejas
Cards Complejas
OVERLINE
Cuerpo 2
Titulo 5 Titulo 6
TituloGreyhound 6 divisively hello coldly Cuerpo 2 wonderfully...
Cuerpo 2
BOTÓN
Greyhound divisively hel
BOTÓN
Titulo Titulo 5
Titulo 5
Descripción
por sus semejantes aquello a, no están cumpliendo a es,, ni es ni so on buenos
TÓN
Greyhound divisively hello coldly wonderfully marginally far upon
BOTÓN
Subtitle Enabled
Active
Enabled
Enab
Quienes solo hacen por sus semejantes aquello a que la ley los obliga, no están cumpliendo a cabalidad sus deberes ni son buenos BOTÓN
BOTÓN
Descripción
Quienes solo hacen por sus semejantes aquello Greyhound divisively hello a que la ley los obliga, no están cumpliendo a wonderfully... cab ca bali alid dad sus d de eberes es,, ni ni so on buenos
Tag • Tag • Tag
BOTÓN
BOTÓN
Tag • Tag • Tag coldly Greyhound divisively hello coldly wonderfully marginally far upon
BOTÓN Subtitle Enabled
Active
Enabled
Enab
BOTÓN
BOTÓN
Las cards complejas tienen la capacidad de no únicamente Cuerpo 2 alojar información sino también acciones del usuario, Greyhound divisively hello coldly... campos (como formularios) y respuestas del sistema. Pueden variar los componentes internos de Titulo 5 las mismas, respetando algunos elementos de la card Greyhound divisively hello de origen coldly...
Greyhound coldly...
Titulo 5
BOTÓN
Layout de imagen superior Se utiliza cada vez que un OVERLINE elemento posee una imagen Titulo asociada 5 principal al conGreyhound divisively hello coldly tenido o acciones
Cuerpo 2
Titulo 6 Cuerpo 2
BOTÓN
Titulo 6 Cuerpo 2
Greyhound divisively hello coldly...
wonderfully... BOTÓN
BOTÓN
Titulo 5 Greyhound divisively hello coldly...
Titulo 5 Greyhound divisively hello coldly wonderfully... BOTÓN
BOTÓN
Titulo 6
Titulo 6
Greyhound hello coldly wonderfully marginally far
Greyhound hello coldly wonderfully marginally far
CedEx Innovación
Chips Input Chips – with A vata r
States
Habilitado
Deshabilitado
Arrastra o
Seleccionado
Accion a o
Enfocado
Prresionado
Input Chips – Text onl y
Habilitado
States
Deshabilitado
Seleccionado
Accionad o
Enfocado
Pres esionado
Arrastra o
Filteration Chips – T ext onl y
Habilitado Seleccionado
States
Deshabilitado
Accion a
Enfocado
Presionado
Arrastra o
Choice Chips
Habilitado
Activo
Deshabilitado
Accionad o
Enfocado
Presionado
Diálogos
BO TÓ N
Titulo 6
Titulo 6
Alert dialog prompt
Apparently we had reached a great height in the atmosphere, for the...
Cuerpo 1
BO TÓ N
Cuerpo 1 BO TÓ N
BO TÓ N
Cuerpo 1
Titulo 6 BO TÓ N
Subtitle 1 Subtitle 1
Greyhound divisively hello coldly wonde rfully marginall y far upon excluding. Greyhound divisively hello coldly
Subtitle 1 Subtitle 1 Subtitle 1 BO TÓ N
BO TÓ N
BO TÓ N
CedEx Innovación
Lista de Media
Los videos o imรกgenes pueden presentarse solos o agrupados de la siguiente manera:
Lista Textos
Subtitle1
Subtitle 1
Subtitle 1
Subtitle 1 Cuerpo 2
Subtitle 1 Cuerpo 2
Subtitle 1 Greyhound divisively hello
Subtitle 1
Subtitle 1 Cuerpo 2
Cuerpo 2
Subtitle 1 Cuerpo 2
CedEx Innovaciรณn
Menú
Titulo 6 Cuerpo 2
Titulo 6
Cuerpo 2
Cuerpo 2
Cuerpo 2 Cuerpo 2 Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Cuerpo 2
Titulo 6 Cuerpo 2
Cuerpo 22 Cuerpo 2
Cuerpo 2 Cuerpo 2
Controles de Selecciรณn Checkboxe s
Habilitado
Deshabilitado
Hover
Focus
Radi o
Habilitado
Selected / Unselected
Deshabilitado
Hover
Focus
Switch
Habilitado
Presionado
Presionado
On / Off
Deshabilitado
Hover
Focus
Presionado
CedEx Innovaciรณn
Deslizadores
Notificaciones Snackbar – T ext only
Discre t
Greyhound divisively hello
Continuous – Lock Ups
60
Snackbar – with Action 60
Greyhound divisively hello
Range – Lock U ps
60
BO TÓ N
Greyhound divisively hello coldly wonderfully marginally far upon excluding. LO NG TEXT BO TÓ N
Entradas de Texto Labe l
Label
Input text
Labe l
Label
Wrong Input
Assistive text
Active Input
Labe l
Label Assistive text
Wrong Inputt
Active Input Labe l
Label
IInput text
Assistive text
Assistive text Labe l
Label
Wrong Input
Assistive text
Erro r
CedEx Innovaciรณn
CedEx Innovaciรณn