Metodologia para Creación de Aplicaciones Web

57,521 views
57,177 views

Published on

Published in: Technology
5 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
57,521
On SlideShare
0
From Embeds
0
Number of Embeds
3,972
Actions
Shares
0
Downloads
2,318
Comments
5
Likes
22
Embeds 0
No embeds

No notes for slide

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 !

×