Your SlideShare is downloading. ×
Metodologia para Creación de Aplicaciones Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Metodologia para Creación de Aplicaciones Web

54,507

Published on

Published in: Technology
5 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
54,507
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2,185
Comments
5
Likes
21
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 !

×