Your SlideShare is downloading. ×
0
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
        ...
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...
          !


      ...
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...
 ...
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 herramient...
swing, gtk, qt, DirectX,
OpenGL, WPF, JavaFX
              problema resuelto
          !


              ... ¿o no?
      ...
front-end
                ya tenemos las capacidades
            !


                ¿no es suficiente?
            !


  ...
¿qué compone el front-end?
              información de un repositorio
          !


              interacción con el sist...
las herramientas resuelven
              información de un repositorio
          !


              interacción con el sist...
información de un repositorio
              nada nuevo
          !


              DAO hacia BD, ActiveRecords, ORM
      ...
interacción con el sistema
               interfaces claras de comunicación
           !


               SOAP, XML+RPC, R...
diseño y respuesta visual
               Photoshop, CorelDraw, Visio,
           !

               Illustrator
           ...
¿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
         !

...
qué esperamos
             cumplir con los cuatro aspectos
         !


             pensando en el usuario
         !


 ...
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
        !


            prueb...
fases
            suena similar
        !


            pero no es tan secuencial
        !


            orientación al p...
fase 1: análisis
fase 1: análisis
                definición de objetivos
            !


                identificación de los usuarios
  ...
fase 1: definición de objetivos
               que se espera lograr
           !


               cuantificables
         ...
fase 1: definición de objetivos
               guías para pruebas
           !


               expresadas en términos del...
fase 1: identificación
de usuarios
               dos grandes grupos
           !


               los que crean
         ...
fase 1: identificación
 de usuarios
               límites, accesos
           !


               locaciones
           !
...
fase 1: requerimientos
               qué se espera transmitir
           !


               en una intranet: información
...
fase 1: requerimiento de
información
               prevalencia
           !


               necesaria
           !


   ...
fase 1: prevalencia de
información
               siempre presente
           !


               actualizada
           !
...
fase 1: información
 necesaria
              concisa
          !


              ordenada
          !


              orie...
fase i: información
pertinente
               clasificada bajo algún criterio
           !


                    tiempo úl...
fase 1: entregables
               lista de requerimientos
           !


               visible
           !


          ...
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
           !


     ...
fase 2: diseño
               extensa
           !


               recurrente
           !


               ejecutada en ...
fase 2: diseño de contenido
               ordenar la información
           !


               categorizarla
           !...
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...
...
arquitectura
               convención utilizada por años
           !

               para Software
               modelo...
arquitectura
               blueprints
           !


               diagramas
           !


               guías de refe...
arquitectura de información
              cómo acceder a la información
          !


              organizarla
          ...
¿porqué es importante?
              costo de encontrar la información
          !


              costo de no encontrarla...
¿porqué es importante?
              costo de construcción
          !


              costo de mantenerla
          !


 ...
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
         !...
arquitectura: estructura,
organización y etiquetas
               nivel de granularidad y relación
           !


        ...
sistemas de arquitectura de
información
arquitectura: sistemas de
búsqueda
arquitectura: sistema de
navegación
                Navegación Global




   Navegación
                     Navegación Co...
arquitectura: relaciones
semánticas
                     genérico




   sinónimos                           acrónimos



...
fase 2: diseño de contenido
entregables
               wireframes
           !


               mapas del sitio
          ...
fase 2: diseño de contenido
wireframes
fase 2: diseño de contenido
mapas del sitio
fase 2: diseño de contenido
listas de vocabulario
      Términos AceptadosVariantes
      Email             Correo Electró...
fase 2: diseño de contenido
esquemas de metadata
    autor de la información       tamaño
!                             !
...
fase 2: diseño de interacción
fase 2: diseño de interacción
               cómo el usuario utiliza el sistema
           !


               como el sist...
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ón
usabilidad
               facilidad para utilizar una interfaz
           !


           !
fase 2: diseño de interacción
usabilidad
               facilidad de aprendizaje
           !


               eficiencia ...
Don't Make Me Think
fase 2: usabilidad
en cinco slides
               sentido común
           !


               no hacer pensar al usuario
 ...
fase 2: usabilidad
en cinco slides
               crear jerarquías visuales
           !


               utilizar convenc...
fase 2: usabilidad
en cinco slides
               eliminar la mitad del texto
           !


               ... y luego la...
fase 2: usabilidad
en cinco slides
               navegación clara
           !


               ... siguiendo convencione...
http://www.jonespartners.com/
fase 2: usabilidad
en cinco slides
               no temer al “fold”
           !


               reportes de buenas prác...
fase 2: diseño de interacción
usabilidad
               pruebas de usabilidad
           !


               pocos usuarios...
usabilidad
                 no esta en contra del diseño
             !


                 lo complementa
             !

...
usabilidad
                 propiamente hecho, nos evita
             !
fase 2: diseño de interacción
fase 2: diseño de interacción
accesibilidad
               acceso a los contenidos a todos
           !


               l...
fase 2: uso del sistema
               prototipo de navegación de contenido
           !
fase 2: prototipo de contenido
               muestra navegación en el sistema
           !


               donde puede i...
fase 2: prototipo de contenido

               documentos XHTML sobre contenido
           !


               navegable
  ...
fase 2: diseño de interacción
respuesta del sistema
fase 2: diseño de interacción
respuesta del sistema
               comunicación con el sistema
           !


            ...
fase 2: diseño de interacción
respuesta del sistema
               prueba de factibilidad
           !

               de ...
fase 2: diseño visual
fase 2: diseño visual
               iconografía y elementos gráficos
           !


               análisis y creación de...
fase 2: diseño visual
paralelismo
               iconografía y elementos gráficos
           !


               análisis y...
fase 2: diseño visual
iconografía y elementos
gráficos
fase 2: diseño visual
iconografía y elementos
gráficos logos, ilustraciones, pictogramas
                !


             ...
w
fase 2: diseño visual
análisis y creación de interfaces
               entregable
           !


               prototipo ...
fase 2: diseño visual
análisis y creación de interfaces
fase 2: diseño visual
análisis y creación de interfaces
               patrones de diseño
           !


               ba...
fase 2: diseño visual pruebas
conceptuales y de factibilidad
               implementación simple de la interfaz
         ...
fase 2: pruebas de concepto y
factibilidad
                  prototipo del diseño armado
              !


               ...
fase 2: conclusiones
fase 2: diseño
fase 2: diseño
               diseño de contenido
           !


               diseño de interacción
           !


     ...
fase 2: diseño de contenido
fase 2: diseño de interacción
               informes de tests de usabilidad
           !


               ... de accesibi...
fase 2: diseño visual
               prototipo de diseño
           !


               elementos gráficos definidos
      ...
fase 2: recomendaciones
              conocer los instrumentos
          !


              contar con aprobación desde arr...
fase 3: desarrollo
fase 3: desarrollo
               implementación del diseño
           !


               validación y pruebas en disposit...
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 d...
fase 3: recomendaciones para
el desarrollo
              hojas de estilo separadas
          !

              para cada me...
fase 3: recomendaciones para
el desarrollo
              hojas de estilo separadas
          !

              por tipo
   ...
fase 3: recomendaciones para
el desarrollo
                  adecuar para el resto de navegadores
              !


      ...
fase 3: recomendaciones para
el desarrollo
              diseño fijo o líquido
          !


              considerar fram...
fase 3: validaciones y
 pruebas en dispositivos
               validación de XHTML y CSS
           !


               fac...
fase 3: validaciones y
pruebas en dispositivos
              pruebas en dispositivos no tradicionales
          !


      ...
fase 3: validaciones y
pruebas en dispositivos
              sólo si está en los objetivos
          !

              y co...
fase 3: validaciones y
pruebas en dispositivos
              pruebas de accesibilidad
          !


              seguimie...
fase 3: integración con
el sistema
fase 3: integración con
el sistema
               adaptar diseño al flujo actual
           !


               separar XHT...
fase 3: integración con
el sistema
               integrar las llamadas de la interfaz
           !

               con ba...
fase 3: integración con
el sistema
               unit testing
           !


               mockup clients
           !

...
fase 3: integración con
el sistema
               probar integración con usuarios
           !


               comparar c...
fase 3: aplicación de interacción
fase 3: aplicación de interacción
               utilizar la tecnología definida
           !


               no obtrusiv...
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
...
fase 3: entregables
               diseño válido, semántico e integrado
           !


               documentos de refere...
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
          !


          ...
fase 5: puesta en marcha
              no “beta”s
          !


              no “en construcción”
          !


         ...
fase 5: conclusiones
               integrado
           !


               sistema funcional y existente
           !


 ...
metodología
metodología
             no es la única
         !


             no es la mejor
         !


             ... ¿o tal vez ...
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...
en conclusión
              iniciar de a pocos
          !


              transicionar
          !


              ... o ...
gracias
              alvaro.pereyra@srdperu.com
          !


              www.srdperu.com
          !
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Metodologia para Creación de Aplicaciones Web
Upcoming SlideShare
Loading in...5
×

Metodologia para Creación de Aplicaciones Web

55,193

Published on

Published in: Technology
5 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
55,193
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2,213
Comments
5
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Metodologia para Creación de Aplicaciones Web"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×