Metodologia para Creación de Aplicaciones Web
-
Upload
alvaro-pereyra -
Category
Technology
-
view
63.833 -
download
3
description
Transcript of Metodologia para Creación de Aplicaciones Web
![Page 1: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/1.jpg)
Metodología para el proceso de creación de Aplicaciones Web
![Page 2: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/2.jpg)
aplicaciones
![Page 3: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/3.jpg)
aplicaciones web
![Page 4: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/4.jpg)
aplicación = aplicación web
![Page 5: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/5.jpg)
aplicación != aplicación web
![Page 6: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/6.jpg)
aplicación != aplicación web
! porque el mercado lo percibe así
! lo espera
! lo solicita
! lo exige
![Page 7: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/7.jpg)
sitios web
![Page 8: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/8.jpg)
sitios web ~= aplicaciones web
! son pero no son
![Page 9: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/9.jpg)
sitios web
![Page 10: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/10.jpg)
sitios web
! caos en el proceso de desarrollo
! ¿existe uno?
![Page 11: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/11.jpg)
metodologías de desarrollo de software
![Page 12: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/12.jpg)
metodologías de desarrollo de software
! existen
! funcionan...
! ...o casi
![Page 13: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/13.jpg)
aplicación web
! front-end
! back-end
![Page 14: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/14.jpg)
back-end
! se puede dar como resuelta
! metodologías y técnicas desde 1960+
![Page 15: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/15.jpg)
front-end
! avances en varias direcciones
! metodologías y técnicas desde...
! ...1960
![Page 16: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/16.jpg)
front-end
! GUI nacen en consolas
! tal vez no deberían haber salido de ahí
![Page 17: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/17.jpg)
front-end
! limitaciones técnicas
! resultados limitados
![Page 18: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/18.jpg)
manzanas y ventanas
! y fotocopias
![Page 19: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/19.jpg)
manzanas y ventanas
! traen el concepto de GUI
! establecen guías de diseño
![Page 20: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/20.jpg)
manzanas y ventanas
! Windows Style Guide
! Macintosh Human Interface Guide
![Page 21: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/21.jpg)
manzanas y ventanas
! herramientas limitadas
! resultados limitados... pero mejores
![Page 22: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/22.jpg)
leopardos, pinguinos y vistas
! mayores recursos en hardware
! mayores herramientas para desarrolladores
![Page 23: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/23.jpg)
swing, gtk, qt, DirectX, OpenGL, WPF, JavaFX
! problema resuelto
! ... ¿o no?
![Page 24: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/24.jpg)
front-end
! ya tenemos las capacidades
! ¿no es suficiente?
! ¡NO!
![Page 25: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/25.jpg)
¿qué compone el front-end?
! información de un repositorio
! interacción con el sistema
! interacción del usuario
! diseño y respuesta visual
![Page 26: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/26.jpg)
las herramientas resuelven
! información de un repositorio
! interacción con el sistema
! diseño y respuesta visual (o ayudan)
![Page 27: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/27.jpg)
información de un repositorio
! nada nuevo
! DAO hacia BD, ActiveRecords, ORM
! IO, SqlLite, SqlServer, MySQL, etc.
![Page 28: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/28.jpg)
interacción con el sistema
! interfaces claras de comunicación
! SOAP, XML+RPC, REST
![Page 29: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/29.jpg)
diseño y respuesta visual
! Photoshop, CorelDraw, Visio, Illustrator
! ¿MS Paint?
! Toolkits (AJAX, OpenLazlo, Silverlight, Flash)
![Page 30: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/30.jpg)
¿y el usuario?
![Page 31: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/31.jpg)
¿y cómo trabajan juntas?
![Page 32: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/32.jpg)
tenemos las herramientas
! pero no sabemos usuarlas...
! ...aún
![Page 33: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/33.jpg)
metodologías
! no es nada nuevo
! pero no es waterfall
![Page 34: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/34.jpg)
metodologías
! aplicadas al front-end
! fases similares a lo que conocemos
! porque es lo mismo... sólo en un contexto distinto
![Page 35: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/35.jpg)
qué esperamos
! cumplir con los cuatro aspectos
! pensando en el usuario
! pensando en el desarrollador
! pensando en los stakeholders
![Page 36: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/36.jpg)
la web no es algo nuevo
! pero nos exige nuevas habilidades
![Page 37: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/37.jpg)
tendencia principal
! contenido por sobre imagen
![Page 38: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/38.jpg)
diseño web != diseño gráfico
![Page 39: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/39.jpg)
diseño web != arte
! salvo exceptiones
![Page 40: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/40.jpg)
empezamos
![Page 41: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/41.jpg)
una metodología
! no la única
! pero alberga todos los pasos importantes
![Page 42: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/42.jpg)
una metodología
! hablaremos de fases...
! iterativas y recurrentes
![Page 43: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/43.jpg)
una metodología
! lo que ya conocemos
! pero en un nuevo formato
![Page 44: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/44.jpg)
fases! análisis
! diseño
! desarrollo
! pruebas
! puesta en marcha
![Page 45: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/45.jpg)
fases
! suena similar
! pero no es tan secuencial
! orientación al paralelismo
![Page 46: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/46.jpg)
fase 1: análisis
![Page 47: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/47.jpg)
fase 1: análisis
! definición de objetivos
! identificación de los usuarios
! requerimientos de la aplicación
![Page 48: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/48.jpg)
fase 1: definición de objetivos
! que se espera lograr
! cuantificables
! cualitativos
![Page 49: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/49.jpg)
fase 1: definición de objetivos
! guías para pruebas
! expresadas en términos del negocio
! justificables
![Page 50: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/50.jpg)
fase 1: identificaciónde usuarios
! dos grandes grupos
! los que crean
! y los que acceden
![Page 51: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/51.jpg)
fase 1: identificación de usuarios
! límites, accesos
! locaciones
! restricciones
![Page 52: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/52.jpg)
fase 1: requerimientos
! qué se espera transmitir
! en una intranet: información
![Page 53: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/53.jpg)
fase 1: requerimiento de información
! prevalencia
! necesaria
! pertinente
![Page 54: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/54.jpg)
fase 1: prevalencia de información
! siempre presente
! actualizada
! “buscable”
![Page 55: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/55.jpg)
fase 1: información necesaria
! concisa
! ordenada
! orientada al usuario
! orientada al dominio del problema
![Page 56: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/56.jpg)
fase i: informaciónpertinente
! clasificada bajo algún criterio
– tiempo última actualización
– jerarquía de importancia
! disponible
![Page 57: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/57.jpg)
fase 1: entregables
! lista de requerimientos
! visible
! parte aquella que ya exista
![Page 58: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/58.jpg)
fase 1: conclusiones
! énfasis en los usuarios
! establecer las bases y dirección
![Page 59: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/59.jpg)
fase 2: diseño
![Page 60: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/60.jpg)
fase 2: diseño
! diseño de contenido
! diseño de interacción
! diseño visual
![Page 61: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/61.jpg)
fase 2: diseño
! extensa
! recurrente
! ejecutada en paralelo
![Page 62: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/62.jpg)
fase 2: diseño de contenido
! ordenar la información
! categorizarla
! mostrarla
![Page 63: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/63.jpg)
hablamos de arquitectura de información
![Page 64: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/64.jpg)
arquitectura de información
! ¿cómo definirla?
![Page 65: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/65.jpg)
“The structural design of shared information environments”
![Page 66: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/66.jpg)
“The combination of organization, labeling, search, and navigation systems withing web sites and intranets”
![Page 67: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/67.jpg)
“The art and science of shaping information products and experiences to support usability and findability”
![Page 68: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/68.jpg)
no es fácil definirla
! una de las razones por las que no es tan aplicada...
! ...aún
![Page 69: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/69.jpg)
arquitectura
! convención utilizada por años para Software
! modelo “bottom-up”
![Page 70: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/70.jpg)
arquitectura
! blueprints
! diagramas
! guías de referencia
![Page 71: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/71.jpg)
arquitectura de información
! cómo acceder a la información
! organizarla
! buscarla
! ....
![Page 72: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/72.jpg)
¿porqué es importante?
! costo de encontrar la información
! costo de no encontrarla
! costo de educación y capacitación
![Page 73: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/73.jpg)
¿porqué es importante?
! costo de construcción
! costo de mantenerla
! valor de marca y presencia
![Page 74: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/74.jpg)
Information Arquitecture – Designing Large-Scale Web – Sites
! libro de cabecera
![Page 75: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/75.jpg)
arquitectura de información
! en resumen
! revisió de los conceptos principales
![Page 76: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/76.jpg)
información
! no es data
! no es conocimiento
![Page 77: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/77.jpg)
información
! concerniente a documentos
! sitios web, imagénes, aplicaciones
! metadata
![Page 78: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/78.jpg)
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
![Page 79: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/79.jpg)
sistemas de arquitectura de información
![Page 80: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/80.jpg)
arquitectura: sistemas de búsqueda
![Page 81: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/81.jpg)
arquitectura: sistema de navegación
Navegación Global
NavegaciónLocal
Navegación Contextual
![Page 82: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/82.jpg)
arquitectura: relaciones semánticas
genérico
sinónimos acrónimos
relacionados relacionados
específico
![Page 83: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/83.jpg)
fase 2: diseño de contenidoentregables
! wireframes
! mapas del sitio
! lista de vocabulario
! esquemas de metadata
![Page 84: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/84.jpg)
fase 2: diseño de contenidowireframes
![Page 85: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/85.jpg)
fase 2: diseño de contenidomapas del sitio
![Page 86: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/86.jpg)
fase 2: diseño de contenidolistas de vocabulario
Términos AceptadosVariantes
Email Correo Electrónico
Fax Facsímil
Fotocopiadora Copiadora
Xerox
![Page 87: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/87.jpg)
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
![Page 88: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/88.jpg)
fase 2: diseño de interacción
![Page 89: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/89.jpg)
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
![Page 90: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/90.jpg)
fase 2: diseño de interacción:uso del sistema
![Page 91: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/91.jpg)
fase 2: diseño de interacción:uso del sistema
! hablamos de usabilidad
![Page 92: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/92.jpg)
fase 2: diseño de interacciónusabilidad
! facilidad para utilizar una interfaz
!
![Page 93: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/93.jpg)
fase 2: diseño de interacciónusabilidad
! facilidad de aprendizaje
! eficiencia en el uso
! facilidad para recordar
! pocos errores
![Page 94: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/94.jpg)
Don't Make Me Think
![Page 95: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/95.jpg)
fase 2: usabilidad en cinco slides
! sentido común
! no hacer pensar al usuario
! entender que “ojeamos”, no leemos
![Page 96: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/96.jpg)
![Page 97: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/97.jpg)
![Page 98: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/98.jpg)
![Page 99: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/99.jpg)
![Page 100: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/100.jpg)
![Page 101: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/101.jpg)
fase 2: usabilidad en cinco slides
! crear jerarquías visuales
! utilizar convenciones
! dejar opciones claras
![Page 102: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/102.jpg)
![Page 103: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/103.jpg)
![Page 104: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/104.jpg)
![Page 105: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/105.jpg)
fase 2: usabilidad en cinco slides
! eliminar la mitad del texto
! ... y luego la otra mitad
![Page 106: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/106.jpg)
![Page 107: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/107.jpg)
![Page 108: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/108.jpg)
![Page 109: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/109.jpg)
![Page 110: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/110.jpg)
![Page 111: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/111.jpg)
![Page 112: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/112.jpg)
![Page 113: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/113.jpg)
fase 2: usabilidad en cinco slides
! navegación clara
! ... siguiendo convenciones
! entender cómo buscamos
![Page 114: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/114.jpg)
![Page 115: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/115.jpg)
![Page 116: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/116.jpg)
![Page 117: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/117.jpg)
![Page 118: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/118.jpg)
![Page 119: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/119.jpg)
![Page 120: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/120.jpg)
![Page 121: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/121.jpg)
![Page 122: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/122.jpg)
http://www.jonespartners.com/
![Page 123: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/123.jpg)
fase 2: usabilidad en cinco slides
! no temer al “fold”
! reportes de buenas prácticas y guías
! el usuario promedio
! ... no existe
![Page 124: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/124.jpg)
fase 2: diseño de interacciónusabilidad
! pruebas de usabilidad
! pocos usuarios
! cualquiera sirve
![Page 125: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/125.jpg)
usabilidad
! no esta en contra del diseño
! lo complementa
! y le da fuerza
![Page 126: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/126.jpg)
usabilidad
! propiamente hecho, nos evita
![Page 127: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/127.jpg)
![Page 128: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/128.jpg)
fase 2: diseño de interacción
![Page 129: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/129.jpg)
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
![Page 130: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/130.jpg)
![Page 131: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/131.jpg)
fase 2: uso del sistema
! prototipo de navegación de contenido
![Page 132: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/132.jpg)
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
![Page 133: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/133.jpg)
fase 2: prototipo de contenido
! documentos XHTML sobre contenido
! navegable
! PowerPoint/Keynote/Impress
! Mock-up It!
![Page 134: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/134.jpg)
fase 2: diseño de interacciónrespuesta del sistema
![Page 135: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/135.jpg)
fase 2: diseño de interacciónrespuesta del sistema
! comunicación con el sistema
! ¿asíncrona?
! forma de comunicación (¿XML-RPC? ¿REST?)
![Page 136: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/136.jpg)
fase 2: diseño de interacciónrespuesta del sistema
! prueba de factibilidad de integración con el sistema
![Page 137: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/137.jpg)
fase 2: diseño visual
![Page 138: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/138.jpg)
fase 2: diseño visual
! iconografía y elementos gráficos
! análisis y creación de interfaces
! pruebas conceptuals y de factibilidad
![Page 139: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/139.jpg)
fase 2: diseño visualparalelismo
! iconografía y elementos gráficos
! análisis y creación de interfaces
! pruebas conceptuals y de factibilidad
![Page 140: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/140.jpg)
fase 2: diseño visualiconografía y elementos gráficos
![Page 141: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/141.jpg)
fase 2: diseño visualiconografía y elementos gráficos
! logos, ilustraciones, pictogramas
! íconos, infografías
! paleta de colores comunes
! elementos gráficos comunes
![Page 142: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/142.jpg)
w
![Page 143: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/143.jpg)
![Page 144: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/144.jpg)
fase 2: diseño visualanálisis y creación de interfaces
! entregable
! prototipo de diseño
![Page 145: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/145.jpg)
fase 2: diseño visualanálisis y creación de interfaces
![Page 146: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/146.jpg)
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
![Page 147: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/147.jpg)
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
![Page 148: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/148.jpg)
fase 2: pruebas de concepto y factibilidad
! prototipo del diseño armado
! probar tecnologías
! probar integración...
! repetir
![Page 149: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/149.jpg)
fase 2: conclusiones
![Page 150: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/150.jpg)
fase 2: diseño
![Page 151: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/151.jpg)
fase 2: diseño
! diseño de contenido
! diseño de interacción
! diseño visual
![Page 152: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/152.jpg)
fase 2: diseño de contenido
![Page 153: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/153.jpg)
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
![Page 154: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/154.jpg)
fase 2: diseño visual
! prototipo de diseño
! elementos gráficos definidos
! estándares visuales a seguir
![Page 155: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/155.jpg)
fase 2: recomendaciones
! conocer los instrumentos
! contar con aprobación desde arriba
! tener paciencia
! no al diseño de comité
![Page 156: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/156.jpg)
fase 3: desarrollo
![Page 157: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/157.jpg)
fase 3: desarrollo
! implementación del diseño
! validación y pruebas en dispositivos
! integracción con sistema
! aplicación de interacción
![Page 158: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/158.jpg)
fase 3: implementación del diseño
y
![Page 159: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/159.jpg)
fase 3: NO tablas
! salvo para datos tabulados
![Page 160: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/160.jpg)
![Page 161: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/161.jpg)
fase 3: recomendaciones para el desarrollo
! XHTML + CSS
![Page 162: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/162.jpg)
fase 3: recomendaciones para el desarrollo
! elaborar para navegadores seguidores de estándares
! Firefox, Safari, Opera, Konqueror, Camino
![Page 163: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/163.jpg)
fase 3: recomendaciones para el desarrollo
! hojas de estilo separadas para cada medio
– screen
![Page 164: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/164.jpg)
fase 3: recomendaciones para el desarrollo
! hojas de estilo separadas por tipo
– layout
– tipografía y colores
– resets
![Page 165: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/165.jpg)
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]-->
![Page 166: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/166.jpg)
fase 3: recomendaciones para el desarrollo
! diseño fijo o líquido
! considerar frameworks
! seguir las recomendaciones de la W3C
![Page 167: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/167.jpg)
fase 3: validaciones y pruebas en dispositivos
! validación de XHTML y CSS
! facilita el mantenimiento
! escalabilidad
! mantenible en el tiempo
![Page 168: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/168.jpg)
fase 3: validaciones y pruebas en dispositivos
! pruebas en dispositivos no tradicionales
! celulares
! dispositivos de internet
! consolas
![Page 169: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/169.jpg)
fase 3: validaciones y pruebas en dispositivos
! sólo si está en los objetivos y con los perfiles identificados
! pero debe soportarlo a futuro
![Page 170: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/170.jpg)
fase 3: validaciones y pruebas en dispositivos
! pruebas de accesibilidad
! seguimiento de los puntos de W3C
! prueba con lector de pantallas
![Page 171: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/171.jpg)
fase 3: integración con el sistema
![Page 172: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/172.jpg)
fase 3: integración conel sistema
! adaptar diseño al flujo actual
! separar XHTML
– WebParts / WebControls
– Layouts / Themes
![Page 173: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/173.jpg)
fase 3: integración con el sistema
! integrar las llamadas de la interfazcon back-end
! métodos deben habersido probados previamente
![Page 174: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/174.jpg)
fase 3: integración con el sistema
! unit testing
! mockup clients
! Test-Driven Development
! Behaviour-Driven Development
![Page 175: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/175.jpg)
fase 3: integración con el sistema
! probar integración con usuarios
! comparar con prototipo de contenido
! corregir fallas
! repetir
![Page 176: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/176.jpg)
fase 3: aplicación de interacción
![Page 177: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/177.jpg)
fase 3: aplicación de interacción
! utilizar la tecnología definida
! no obtrusiva
! no obtrusiva
! no obtrusiva
![Page 178: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/178.jpg)
fase 3: aplicación de interacción
! “graceful degradation”
![Page 179: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/179.jpg)
fase 3: aplicación de interacción
! no olvidar los requisitos
! drag-n-drop, RIAs
![Page 180: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/180.jpg)
fase 3: recomendaciones generales
! incorporar a los usuarios
! integrarse a su SCM
! seguridad
! priorizar
![Page 181: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/181.jpg)
fase 3: entregables
! diseño válido, semántico e integrado
! documentos de referencia
![Page 182: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/182.jpg)
fase 4: pruebas
![Page 183: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/183.jpg)
fase 5: puesta en marcha
![Page 184: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/184.jpg)
fase 5: puesta en marcha
! despliegue a producción
! integrado a su workflow
![Page 185: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/185.jpg)
fase 5: puesta en marcha
! incremental
! solicitar feedback
! realizar más pruebas
![Page 186: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/186.jpg)
fase 5: puesta en marcha
! no “beta”s
! no “en construcción”
! pruebas pequeñas, cerradas
! pruebas graduales
![Page 187: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/187.jpg)
fase 5: conclusiones
! integrado
! sistema funcional y existente
! ... no en pruebas
! ... o en aquellas no críticas
![Page 188: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/188.jpg)
metodología
![Page 189: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/189.jpg)
metodología
! no es la única
! no es la mejor
! ... ¿o tal vez sí?
! y funciona
![Page 190: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/190.jpg)
metodología
! fácil de integrarse a las existentes
![Page 191: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/191.jpg)
front-end
![Page 192: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/192.jpg)
back-end
![Page 193: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/193.jpg)
front-end + back-end
! misma –o similar- forma de trabajo
! reutilizar los conceptos
! adaptarse
![Page 194: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/194.jpg)
en conclusión
! iniciar de a pocos
! transicionar
! ... o empezar de 0
![Page 195: Metodologia para Creación de Aplicaciones Web](https://reader033.fdocumento.com/reader033/viewer/2022052821/55385d6a4a79595b7a8b472a/html5/thumbnails/195.jpg)