Metodologia para Creación de Aplicaciones Web

  • 53,633 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Interesante solo que seria bueno colocarlo en paralelo o realizar una analogia si internarmente dentro de diseño puede aplicarse otra metodologia para el desarrollo de soluciones web distinta al SCRUM por ejm
    Are you sure you want to
    Your message goes here
  • Muy buen trabajo.

    En la empresa en que trabajo tambien lo aplicamos:

    www.mercadeowebefectivo.com
    Are you sure you want to
    Your message goes here
  • Buen material!! Como se logra representar RUP en un cronograma realizado en Project?
    Are you sure you want to
    Your message goes here
  • Gracias por el comentario, espero que te sirva de ayuda. Cualquier cosa puedes contactarme a mi correo en la última diapositiva.
    Are you sure you want to
    Your message goes here
  • Estoy realizando una investigación de webapp. Espero que la informacion auqi disponible me sea útil. Desde ya muchas gracias.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
53,633
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
2,131
Comments
5
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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