Metodología para el proceso de creación de Aplicaciones Web

aplicaciones

aplicaciones web

aplicación = aplicación web

aplicación != aplicación web

aplicación != aplicación web

! porque el mercado lo percibe así

! lo espera

! lo solicita

! lo exige

sitios web

sitios web ~= aplicaciones web

! son pero no son

sitios web

sitios web

! caos en el proceso de desarrollo

! ¿existe uno?

metodologías de desarrollo de software

metodologías de desarrollo de software

! existen

! funcionan...

! ...o casi

aplicación web

! front-end

! back-end

back-end

! se puede dar como resuelta

! metodologías y técnicas desde 1960+

front-end

! avances en varias direcciones

! metodologías y técnicas desde...

! ...1960

front-end

! GUI nacen en consolas

! tal vez no deberían haber salido de ahí

front-end

! limitaciones técnicas

! resultados limitados

manzanas y ventanas

! y fotocopias

manzanas y ventanas

! traen el concepto de GUI

! establecen guías de diseño

manzanas y ventanas

! Windows Style Guide

! Macintosh Human Interface Guide

manzanas y ventanas

! herramientas limitadas

! resultados limitados... pero mejores

leopardos, pinguinos y vistas

! mayores recursos en hardware

! mayores herramientas para desarrolladores

swing, gtk, qt, DirectX, OpenGL, WPF, JavaFX

! problema resuelto

! ... ¿o no?

front-end

! ya tenemos las capacidades

! ¿no es suficiente?

! ¡NO!

¿qué compone el front-end?

! información de un repositorio

! interacción con el sistema

! interacción del usuario

! diseño y respuesta visual

las herramientas resuelven

! información de un repositorio

! interacción con el sistema

! diseño y respuesta visual (o ayudan)

información de un repositorio

! nada nuevo

! DAO hacia BD, ActiveRecords, ORM

! IO, SqlLite, SqlServer, MySQL, etc.

interacción con el sistema

! interfaces claras de comunicación

! SOAP, XML+RPC, REST

diseño y respuesta visual

! Photoshop, CorelDraw, Visio, Illustrator

! ¿MS Paint?

! Toolkits (AJAX, OpenLazlo, Silverlight, Flash)

¿y el usuario?

¿y cómo trabajan juntas?

tenemos las herramientas

! pero no sabemos usuarlas...

! ...aún

metodologías

! no es nada nuevo

! pero no es waterfall

metodologías

! aplicadas al front-end

! fases similares a lo que conocemos

! porque es lo mismo... sólo en un contexto distinto

qué esperamos

! cumplir con los cuatro aspectos

! pensando en el usuario

! pensando en el desarrollador

! pensando en los stakeholders

la web no es algo nuevo

! pero nos exige nuevas habilidades

tendencia principal

! contenido por sobre imagen

diseño web != diseño gráfico

diseño web != arte

! salvo exceptiones

empezamos

una metodología

! no la única

! pero alberga todos los pasos importantes

una metodología

! hablaremos de fases...

! iterativas y recurrentes

una metodología

! lo que ya conocemos

! pero en un nuevo formato

fases! análisis

! diseño

! desarrollo

! pruebas

! puesta en marcha

fases

! suena similar

! pero no es tan secuencial

! orientación al paralelismo

fase 1: análisis

fase 1: análisis

! definición de objetivos

! identificación de los usuarios

! requerimientos de la aplicación

fase 1: definición de objetivos

! que se espera lograr

! cuantificables

! cualitativos

fase 1: definición de objetivos

! guías para pruebas

! expresadas en términos del negocio

! justificables

fase 1: identificaciónde usuarios

! dos grandes grupos

! los que crean

! y los que acceden

fase 1: identificación de usuarios

! límites, accesos

! locaciones

! restricciones

fase 1: requerimientos

! qué se espera transmitir

! en una intranet: información

fase 1: requerimiento de información

! prevalencia

! necesaria

! pertinente

fase 1: prevalencia de información

! siempre presente

! actualizada

! “buscable”

fase 1: información necesaria

! concisa

! ordenada

! orientada al usuario

! orientada al dominio del problema

fase i: informaciónpertinente

! clasificada bajo algún criterio

– tiempo última actualización

– jerarquía de importancia

! disponible

fase 1: entregables

! lista de requerimientos

! visible

! parte aquella que ya exista

fase 1: conclusiones

! énfasis en los usuarios

! establecer las bases y dirección

fase 2: diseño

fase 2: diseño

! diseño de contenido

! diseño de interacción

! diseño visual

fase 2: diseño

! extensa

! recurrente

! ejecutada en paralelo

fase 2: diseño de contenido

! ordenar la información

! categorizarla

! mostrarla

hablamos de arquitectura de información

arquitectura de información

! ¿cómo definirla?

“The structural design of shared information environments”

“The combination of organization, labeling, search, and navigation systems withing web sites and intranets”

“The art and science of shaping information products and experiences to support usability and findability”

no es fácil definirla

! una de las razones por las que no es tan aplicada...

! ...aún

arquitectura

! convención utilizada por años para Software

! modelo “bottom-up”

arquitectura

! blueprints

! diagramas

! guías de referencia

arquitectura de información

! cómo acceder a la información

! organizarla

! buscarla

! ....

¿porqué es importante?

! costo de encontrar la información

! costo de no encontrarla

! costo de educación y capacitación

¿porqué es importante?

! costo de construcción

! costo de mantenerla

! valor de marca y presencia

Information Arquitecture – Designing Large-Scale Web – Sites

! libro de cabecera

arquitectura de información

! en resumen

! revisió de los conceptos principales

información

! no es data

! no es conocimiento

información

! concerniente a documentos

! sitios web, imagénes, aplicaciones

! metadata

arquitectura: estructura, organización y etiquetas

! nivel de granularidad y relación

! cómo agruparla y categorizarla

! como nombrar las categorías y definir su navegación

sistemas de arquitectura de información

arquitectura: sistemas de búsqueda

arquitectura: sistema de navegación

Navegación Global

NavegaciónLocal

Navegación Contextual

arquitectura: relaciones semánticas

genérico

sinónimos acrónimos

relacionados relacionados

específico

fase 2: diseño de contenidoentregables

! wireframes

! mapas del sitio

! lista de vocabulario

! esquemas de metadata

fase 2: diseño de contenidowireframes

fase 2: diseño de contenidomapas del sitio

fase 2: diseño de contenidolistas de vocabulario

Términos AceptadosVariantes

Email Correo Electrónico

E-mail

Fax Facsímil

Fotocopiadora Copiadora

Xerox

fase 2: diseño de contenidoesquemas de metadata

! autor de la información

! fecha de creación

! fecha de actualización

! etiquetas

! categorías

! versión

! tipo

! tamaño

! duración

! dimensiones

! formato de archivo

! forma de visualizar

fase 2: diseño de interacción

fase 2: diseño de interacción

! cómo el usuario utiliza el sistema

! como el sistema responde a las consultas

! recordemos perfiles de usuario

fase 2: diseño de interacción:uso del sistema

fase 2: diseño de interacción:uso del sistema

! hablamos de usabilidad

fase 2: diseño de interacciónusabilidad

! facilidad para utilizar una interfaz

!

fase 2: diseño de interacciónusabilidad

! facilidad de aprendizaje

! eficiencia en el uso

! facilidad para recordar

! pocos errores

Don't Make Me Think

fase 2: usabilidad en cinco slides

! sentido común

! no hacer pensar al usuario

! entender que “ojeamos”, no leemos

fase 2: usabilidad en cinco slides

! crear jerarquías visuales

! utilizar convenciones

! dejar opciones claras

fase 2: usabilidad en cinco slides

! eliminar la mitad del texto

! ... y luego la otra mitad

fase 2: usabilidad en cinco slides

! navegación clara

! ... siguiendo convenciones

! entender cómo buscamos

http://www.jonespartners.com/

fase 2: usabilidad en cinco slides

! no temer al “fold”

! reportes de buenas prácticas y guías

! el usuario promedio

! ... no existe

fase 2: diseño de interacciónusabilidad

! pruebas de usabilidad

! pocos usuarios

! cualquiera sirve

usabilidad

! no esta en contra del diseño

! lo complementa

! y le da fuerza

usabilidad

! propiamente hecho, nos evita

fase 2: diseño de interacción

fase 2: diseño de interacciónaccesibilidad

! acceso a los contenidos a todos

! lectores de pantalla

! dispositivos móviles o no tradicionales

! requerido por el gobierno

fase 2: uso del sistema

! prototipo de navegación de contenido

fase 2: prototipo de contenido

! muestra navegación en el sistema

! donde puede ir y cómo

! como responderá el sistema

! abstracción del diseño

fase 2: prototipo de contenido

! documentos XHTML sobre contenido

! navegable

! PowerPoint/Keynote/Impress

! Mock-up It!

fase 2: diseño de interacciónrespuesta del sistema

fase 2: diseño de interacciónrespuesta del sistema

! comunicación con el sistema

! ¿asíncrona?

! forma de comunicación (¿XML-RPC? ¿REST?)

fase 2: diseño de interacciónrespuesta del sistema

! prueba de factibilidad de integración con el sistema

fase 2: diseño visual

fase 2: diseño visual

! iconografía y elementos gráficos

! análisis y creación de interfaces

! pruebas conceptuals y de factibilidad

fase 2: diseño visualparalelismo

! iconografía y elementos gráficos

! análisis y creación de interfaces

! pruebas conceptuals y de factibilidad

fase 2: diseño visualiconografía y elementos gráficos

fase 2: diseño visualiconografía y elementos gráficos

! logos, ilustraciones, pictogramas

! íconos, infografías

! paleta de colores comunes

! elementos gráficos comunes

w

fase 2: diseño visualanálisis y creación de interfaces

! entregable

! prototipo de diseño

fase 2: diseño visualanálisis y creación de interfaces

fase 2: diseño visualanálisis y creación de interfaces

! patrones de diseño

! basados en guías de la organización

! enfoque a la accesibilidad

! basados en los requerimientos

fase 2: diseño visual pruebas conceptuales y de factibilidad

! implementación simple de la interfaz

! integración con tecnologías

! factibilidad del diseño

! potenciales problemas

fase 2: pruebas de concepto y factibilidad

! prototipo del diseño armado

! probar tecnologías

! probar integración...

! repetir

fase 2: conclusiones

fase 2: diseño

fase 2: diseño

! diseño de contenido

! diseño de interacción

! diseño visual

fase 2: diseño de contenido

fase 2: diseño de interacción

! informes de tests de usabilidad

! ... de accesibilidad

! prototipo de navegación de contenido

! documento de respuesta del sistema

fase 2: diseño visual

! prototipo de diseño

! elementos gráficos definidos

! estándares visuales a seguir

fase 2: recomendaciones

! conocer los instrumentos

! contar con aprobación desde arriba

! tener paciencia

! no al diseño de comité

fase 3: desarrollo

fase 3: desarrollo

! implementación del diseño

! validación y pruebas en dispositivos

! integracción con sistema

! aplicación de interacción

fase 3: implementación del diseño

y

fase 3: NO tablas

! salvo para datos tabulados

fase 3: recomendaciones para el desarrollo

! XHTML + CSS

fase 3: recomendaciones para el desarrollo

! elaborar para navegadores seguidores de estándares

! Firefox, Safari, Opera, Konqueror, Camino

fase 3: recomendaciones para el desarrollo

! hojas de estilo separadas para cada medio

– screen

– print

fase 3: recomendaciones para el desarrollo

! hojas de estilo separadas por tipo

– layout

– tipografía y colores

– resets

fase 3: recomendaciones para el desarrollo

! adecuar para el resto de navegadores

– (IE6 – IE7)

! utilizar condicionales

–<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->

fase 3: recomendaciones para el desarrollo

! diseño fijo o líquido

! considerar frameworks

! seguir las recomendaciones de la W3C

fase 3: validaciones y pruebas en dispositivos

! validación de XHTML y CSS

! facilita el mantenimiento

! escalabilidad

! mantenible en el tiempo

fase 3: validaciones y pruebas en dispositivos

! pruebas en dispositivos no tradicionales

! celulares

! dispositivos de internet

! consolas

fase 3: validaciones y pruebas en dispositivos

! sólo si está en los objetivos y con los perfiles identificados

! pero debe soportarlo a futuro

fase 3: validaciones y pruebas en dispositivos

! pruebas de accesibilidad

! seguimiento de los puntos de W3C

! prueba con lector de pantallas

fase 3: integración con el sistema

fase 3: integración conel sistema

! adaptar diseño al flujo actual

! separar XHTML

– WebParts / WebControls

– Layouts / Themes

fase 3: integración con el sistema

! integrar las llamadas de la interfazcon back-end

! métodos deben habersido probados previamente

fase 3: integración con el sistema

! unit testing

! mockup clients

! Test-Driven Development

! Behaviour-Driven Development

fase 3: integración con el sistema

! probar integración con usuarios

! comparar con prototipo de contenido

! corregir fallas

! repetir

fase 3: aplicación de interacción

fase 3: aplicación de interacción

! utilizar la tecnología definida

! no obtrusiva

! no obtrusiva

! no obtrusiva

fase 3: aplicación de interacción

! “graceful degradation”

fase 3: aplicación de interacción

! no olvidar los requisitos

! drag-n-drop, RIAs

fase 3: recomendaciones generales

! incorporar a los usuarios

! integrarse a su SCM

! seguridad

! priorizar

fase 3: entregables

! diseño válido, semántico e integrado

! documentos de referencia

fase 4: pruebas

fase 5: puesta en marcha

fase 5: puesta en marcha

! despliegue a producción

! integrado a su workflow

fase 5: puesta en marcha

! incremental

! solicitar feedback

! realizar más pruebas

fase 5: puesta en marcha

! no “beta”s

! no “en construcción”

! pruebas pequeñas, cerradas

! pruebas graduales

fase 5: conclusiones

! integrado

! sistema funcional y existente

! ... no en pruebas

! ... o en aquellas no críticas

metodología

metodología

! no es la única

! no es la mejor

! ... ¿o tal vez sí?

! y funciona

metodología

! fácil de integrarse a las existentes

front-end

back-end

front-end + back-end

! misma –o similar- forma de trabajo

! reutilizar los conceptos

! adaptarse

en conclusión

! iniciar de a pocos

! transicionar

! ... o empezar de 0

gracias

! alvaro.pereyra@srdperu.com

! www.srdperu.com