Adaptaci´onde una aplicaci´onRIA desarrollada en Flex a una aplicaci´onHTML5 Proyecto Fin de Carrera 10 de julio de 2012 Imanol Luengo Munti´on Director: Juli´anGuti´errezSerrano Ingenier´ıaSuperior en Inform´atica Facultad de Inform´atica de San Sebasti´an(FISS) © 2012 Imanol Luengo Agradecimientos Quiero dar las gracias a la gente que me ha estado apoyando a lo largo del proyecto. A Juanan Pereira e Inko Perurena, que han estado debatiendo conmigo y ayud´andomea sacar el proyecto adelante con dudas, consejos y cr´ıticas:todo ello ha hecho que el proyecto termine en mejor puerto. A mis amigos, que aunque no lo hayan hecho conscientemente, han respetado mis ausencias a lo largo del a~noen ´epocas puntuales: por estudios, trabajo y proyecto. A mi familia, que un a~nom´ashan confiado en mi y me han apoyado en la toma de decisiones sin ponerme muchas pegas. Y, por ´ultimo,a Naroa, una persona muy especial que ha estado a mi lado apoy´andomea lo largo del a~nocon todo lo que necesitara. A todos, gracias. I II ´Indice general 1. Definiciones y acr´onimos 1 2. Introducci´on 5 2.1. Situaci´onInicial . .6 2.2. Razones de la migraci´on . .7 2.3. Necesidades de la migraci´on . .9 3. Objetivos 11 3.1. Objetivos generales del proyecto . 12 3.2. Objetivos gen´ericosde una migraci´onde Flex a HTML5 . 12 3.3. Objetivos concretos de la migraci´onde Babelium Project . 13 3.4. Resultados del proyecto . 13 4. Control del Proyecto 17 4.1. Alcance . 18 4.2. Metodolog´ıa . 20 4.3. Planificaci´ony organizaci´on . 23 4.4. Control . 40 4.5. Riesgos y factibilidad . 44 4.6. Resumen: herramientas utilizadas en el control del proyecto . 49 5. Especificaciones de Babelium Project 51 5.1. Babelium Project - Flex . 52 5.2. Transformaci´ona HTML5 . 60 5.3. Resumen de transformaciones . 68 6. Estrategias y antecedentes de migraci´on 71 6.1. Traducir ActionScript a JavaScript . 72 6.2. Interpretar los archivos binarios Flash (swf) en JavaScript . 72 6.3. Ingenier´ıaInversa . 73 6.4. Migraci´onDirigida por Modelos . 73 III IV ´INDICE GENERAL 6.5. Conclusiones . 75 7. Pr´acticasy patrones de migraci´on 77 7.1. Videoplayer . 79 7.2. Estructura y estilo de la p´agina . 84 7.3. View Components . 92 7.4. Cairngorm JS . 99 7.5. C´odigoActionScript que implementa Cairngorm . 105 8. Migraci´onde Babelium Project 109 8.1. Prueba de concepto . 110 8.2. Infraestructura y gesti´onde sesiones . 116 8.3. Protocolos de comunicaci´on,navegaci´ony API . 129 8.4. Auth Module . 136 8.5. Home Module . 140 8.6. Practice Module . 147 8.7. Localization . 154 8.8. Evaluation Module . 158 9. Conclusiones 165 10.Trabajo Futuro 167 10.1. Adaptaci´ondel reproductor a HTML5 . 168 10.2. Implementaci´onde nuevas funcionalidades . 168 10.3. Cairngorm JS como proyecto independiente . 168 10.4. Documentar y abrir la API . 169 A. Detalles t´ecnicosdel Proyecto 171 A.1. C´odigofuente . 172 A.2. Similitudes entre MXML y CSS3 . 173 A.3. Estructura de carpetas y archivos del proyecto . 176 A.4. Implementaci´ondel framework Cairngorm . 178 A.5. Implementaci´onde la infraestructura en el cliente . 181 A.6. Implementaci´onde la infraestructura en el servidor . 187 B. Gu´ıapara desarrolladores: C´omomigrar un m´odulo 189 B.1. Creaci´onde la l´ogicade representaci´onde la secci´onprincipal del m´odulo 192 B.2. Creaci´onde los contenidos principales del m´odulo . 199 B.3. Eventos y comandos para la navegaci´ondin´amica . 202 B.4. L´ogicade representaci´onde la acci´onn´umero1 . 206 ´INDICE GENERAL V C. Comparaci´onde eficiencia entre Flex y HTML5 213 C.1. Comparaci´onen la primera carga . 214 C.2. Comparaci´onen la carga de contenidos . 216 C.3. Comparaci´onen el uso de Memoria y CPU . 219 C.4. Resumen . 222 D. Sobre Babelium Project 223 D.1. [PR] BabeliumProject.com: practica tu Euskera, mejora tu Ingl´es . 224 Bibliograf´ıa 227 VI ´INDICE GENERAL ´Indice de figuras 2.1. Areas´ que abarca el conjunto de tecnolog´ıasque conforman HTML5 . .8 3.1. Vista r´apidadel m´odulo de grabaci´onen Flex . 15 3.2. Vista r´apidadel m´odulo de grabaci´onen HTML5 . 16 4.1. Gesti´ondel alcance: EDT . 19 4.2. Desarrollo en cascada vs desarrollo ´agil . 21 4.3. Metodolog´ıas´agiles:Scrum . 22 4.4. Arbol´ de planificaci´on´agil . 24 4.5. Planificaci´ondel proyecto: tabl´onprincipal de trello . 25 4.6. Planificaci´ondel proyecto: etiquetas en forma de iteraciones . 26 4.7. Planificaci´ondel proyecto: seguimiento de tareas . 27 4.8. GTD: Evernote . 30 4.9. GTD: Evernote extensi´on para Chrome . 30 4.10. Diagrama gantt planificado antes del inicio del proyecto . 31 4.11. Diagrama gantt planificado . 32 4.12. Diagrama gantt real . 34 5.1. Resumen de esquema de interacci´onCairngorm . 53 5.2. Arquitectura general de la aplicaci´on . 59 5.3. Abstracci´onque ofrece Cairngorm . 60 5.4. Resumen de la arquitectura interna del cliente en Flex . 61 5.5. Resumen de transformaciones Flex a HTML5 . 68 6.1. Proceso de una migraci´ondirigida por modelos (MDM) . 74 6.2. Representaci´ontemporal de dos tipos de migraci´on . 75 7.1. Videoplayer como widget Flash en una p´agina HTML5. 80 7.2. Layout horizontal b´asicoen Flex . 85 7.3. Layout horizontal b´asicoen Flex . 85 7.4. Apariencia de la web de Babelium Project en Flex . 87 7.5. Layout de la web de Babelium Project en Flex . 88 VII VIII ´INDICE DE FIGURAS 7.6. Esquema del layout sem´antico de la web de Babelium Project . 88 7.7. Ejemplo de ViewStack o TabPanel . 92 7.8. Ejemplo de pagination . 92 7.9. Ejemplo de DataTables en Flex . 93 7.10. Ejemplo de rating . 93 7.11. Ejemplo de ViewStack o TabPanel . 95 7.12. Ejemplo de paginaci´onmediante JQuery y jPList . 96 7.13. Ejemplo de paginaci´onmediante JQuery y jPList . 96 7.14. Ejemplo de DataTables mediante JQuery y DataTables . 97 7.15. Ejemplo de DataTables mediante JQuery y DataTables . 98 7.16. Widget de puntuaci´onmediante JQuery y JRaty . 98 7.17. Estructura interna de Cairngorm . 101 8.1. Primer prototipo de la interfaz de la web en HTML5 . 111 8.2. Gateways de la infraestructura inicial de Babelium Project en HTML5 . 112 8.3. Arquitectura de 3 niveles . 116 8.4. Arquitectura de 3 niveles con 3 gateways . 116 8.5. Arquitectura de 3 niveles con distinci´onde 2 niveles en el servidor . 117 8.6. Arquitectura de 3 niveles con distinci´oncon carga din´amicade contenidos 117 8.7. Arquitectura de 3 niveles con distinci´oncon carga din´amicade contenidos 118 8.8. Desglose de Cairngorm en el cliente . 119 8.9. Desglose de BP en el cliente . 120 8.10. Diagrama de secuencia de la acci´onlogin en el cliente . 122 8.11. Arquitectura de la aplicaci´onen el lado servidor . 123 8.12. Widget LoggedIn . 125 8.13. Widget LoggedOut . 125 8.14. Diagrama de secuencia de la acci´onlogin en el servidor . 127 8.15. Diagrama de procesado del Login . 137 8.16. Ventana de login en Flex . 138 8.17. Ventana de login en HTML5 . 138 8.18. Home module en la versi´onde Flex (an´onimo) . 140 8.19. Home module en la versi´onde Flex (identificado) . 141 8.20. Estructura del m´odulohome . 142 8.21. Home de la versi´onHTML5 (an´onimo) . 143 8.22. Home de la versi´onHTML5 (identificado) . 144 8.23. Home HTML5: ´ultimosv´ıdeossubidos . 145 8.24. Home HTML5: ´ultimaactividad del usuario . 146 8.25. M´odulopractice en la versi´onde Flex . 147 8.26. M´odulopractice (Flex): preview de un ejercicio . 148 8.27. M´odulopractice (Flex): grabaci´onde un ejercicio . 148 8.28. Estructura del m´odulopractice . 149 ´INDICE DE FIGURAS IX 8.29. M´odulopractice (HTML5): lista de ejercicios . 150 8.30. M´odulopractice (HTML5): preview de un ejercicio . 151 8.31. M´odulopractice (HTML5): grabaci´onde un ejercicio . 153 8.32. M´oduloevaluaci´onen la versi´onde Flex . 158 8.33. M´oduloevaluaci´on(Flex): evaluando de un ejercicio . 159 8.34. M´oduloevaluaci´on(Flex): revisando la evaluaci´onde un ejercicio . 159 8.35. Estructura del m´oduloevaluation . 160 8.36. M´oduloevaluate (HTML5): lista de ejercicios . 162 8.37. M´oduloevaluate.