Estudio, uso e implementación de una aplicación de las nuevas características de HTML5

PROYECTO DE FIN DE CARRERA TÍTULO DEL PFC: Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 TITULACIÓN: Ingeniería de Telecomunicación (segundo ciclo) AUTOR: Marc Naharro Parra DIRECTOR: Roc Meseguer Pallarès FECHA: 3 de octubre de 2011 Title: Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 Author: Marc Naharro Parra Director: Roc Meseguer Pallarès Date: October, 3rd 2011 Overview Internet has evolved during the last few years, not only in terms of speed but also in terms of the role it plays in people‟s lives. HTML is explained with greater detail in the first few chapters, but as an introductory definition one could say that HTML is the “paper” where the content one sees while browsing the web “is written”. Nowadays people expect more than just text or static content, and any news site will have videos and forums where people can post comments. Mobiles platforms play an important role in all this, because Internet is no longer accessed sorely from home, but from other places as well, such as phones. It is in this context where the solutions outside the standard have started exacting their toll due to their higher computational needs, and because of it several large companies have lend their support to the evolution of HTML from v4 to v5. HTML5 is still in constant evolution, and despite not being a closed standard, its goal is to solve all the aforementioned problems. The ultimate goal is to define a modern standard in line with the current use that the web is given and which can be used as a basis for web development. This project contains a theoretical analysis of the main differences between the last version and the 5th, checking which elements appear and which do not after the standard evolution. Case studies are carried out for each functionality in order to check how they work. The next step consists in trimming the previous selection of functionalities, and creating an application using the resulting functionalities in combination with one another in order to better observe the possibilities that HTML5 offers. Load tests on the client side are performed as a last case study, thus checking the resources consumption and the traffic generated by the browser. The conclusion is that while HTML5 is not a closed standard, it has compatibility problems but also offers many interesting things to implement in the near future. Título: Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 Autor: Marc Naharro Parra Director: Roc Meseguer Pallarès Fecha: 3 de octubre de 2011 Resumen En los últimos años Internet ha sufrido una evolución, no solo en cuanto al aumento de velocidad sino también en lo referente al uso que se le da. HTML se explica con detalle en los primeros capítulos pero como resumen, se puede decir que viene a ser el „papel‟ sobre el cual se presenta el contenido que se ve al utilizar un navegador web. En la actualidad ya no solo se entra a ver una página web con contenidos estáticos o solo texto, por ejemplo, en cualquier diario que se pueda consultar online aparecen videos e incluso foros sobre los cuales comentar una noticia. Los terminales móviles juegan también un papel importante en este aspecto, ya no se accede a una página web solo desde casa sino también desde un teléfono por ejemplo. Algunas de las soluciones fuera del estándar han supuesto problemas por su alto consumo de recursos y por ello grandes empresas han apoyado la evolución de HTML de su versión 4 a la 5. HTML5 está todavía en constante evolución, no es un estándar ya cerrado pero mantiene como objetivo solucionar problemas como los mencionados. La meta es definir un estándar que sea la base para el desarrollo web y que realmente se adecúe al uso que se le da hoy en día al acceso de páginas web. En este proyecto se realiza un análisis teórico de las diferencias entre la versión anterior y la 5, comprobando qué elementos aparecen y cuales desaparecen tras la evolución del estándar. Se realizan casos prácticos de las nuevas funcionalidades para comprobar su funcionamiento. El paso siguiente ha sido hacer otra selección de entre las probadas y realizar un proyecto que las conjunte para ver las posibilidades que HTML5 ofrece. Como último ejercicio se realizan unas pruebas de carga en el lado del cliente, comprobando el consumo de recursos y el tráfico generado en el navegador. Todo esto para llegar a ver que HTML5 es un estándar no cerrado, que alberga problemas de compatibilidad pero que ofrece muchas cosas interesantes a aplicar en un futuro próximo. ÍNDICE INTRODUCCIÓN .............................................................................................. 1 CAPÍTULO 1. TECNOLOGÍAS UTILIZADAS ................................................... 3 1.1. ¿Qué es HTML? ................................................................................................................3 1.2. Evolución de las versiones de HTML ..............................................................................3 1.3. JavaScript .........................................................................................................................4 1.4. Hojas de estilo CSS. .........................................................................................................5 CAPÍTULO 2. INTRODUCCIÓN A HTML5 ....................................................... 6 2.1. HTML5 ................................................................................................................................6 2.2. Aportaciones de HTML5. ¿Qué abandona y qué incorpora? ........................................7 2.2.1. Elementos que desaparecen .................................................................................8 2.2.2. Elementos que aparecen .......................................................................................8 CAPÍTULO 3. NUEVAS CARACTERÍSTICAS DE HTML5, EXPLICACIÓN Y EJEMPLOS .................................................................................................... 10 3.1. Introducción a las nuevas características de HTML5 ..................................................10 3.1.1. Almacenamiento en local .....................................................................................10 3.1.2. Canvas.................................................................................................................10 3.1.3. Geolocalización ...................................................................................................10 3.1.4. Trabajadores web o web workers ........................................................................11 3.1.5. Trabajando en modo offline .................................................................................11 3.1.6. Video....................................................................................................................11 3.1.7. WebSockets .........................................................................................................12 3.2. Comprobación de compatibilidad con HTML5 .............................................................12 3.3. Introducción práctica a las nuevas posibilidades de HTML5 .....................................15 3.3.1. Almacenamiento en local .....................................................................................15 3.3.2. Canvas.................................................................................................................17 3.3.3. Cumplimentando formularios ...............................................................................19 3.3.4. Geolocalización ...................................................................................................24 3.3.5. Trabajando en modo offline .................................................................................25 3.3.6. Video....................................................................................................................28 3.3.7 WebSockets .........................................................................................................30 CAPÍTULO 4. SUDOKU CON HTML5 ............................................................ 33 CAPÍTULO 5. PRUEBAS DE RENDIMIENTO Y ANÁLISIS DEL TRÁFICO POR LA RED .................................................................................................. 42 CAPÍTULO 6. CONCLUSIONES Y LÍNEAS FUTURAS ................................. 46 6.1. Impacto medioambiental ................................................................................................46 6.2. Análisis de los objetivos marcados ..............................................................................46 6.3. Líneas futuras .................................................................................................................47 6.4. Conclusión personal ......................................................................................................47 BIBLIOGRAFÍA .............................................................................................. 49 ANEXO A. ...................................................................................................... 52 A.1 HTML5 ..............................................................................................................................52 A.1.1 Atributos que desaparecen ..................................................................................52 A.1.2 Estilos que desaparecen......................................................................................52 A.1.3 Elementos que aparecen .....................................................................................52 A.2 Código HTML5 ................................................................................................................53 A.2.1 Comprobación de compatibilidad de formatos de video en HTML5 Test.html .....53 A.2.2 WebSockets. Servidor Python .............................................................................53 A.3 Capturas navegadores ...................................................................................................57 A.3.1 Chrome 10 ...........................................................................................................57 A.3.2 Firefox 3.6 ............................................................................................................57 A.3.3 Firefox 4.0 ............................................................................................................57 A.3.4 Internet Explorer 8 ...............................................................................................58 A.3.5 Internet Explorer 9 ...............................................................................................58 A.3.6 Opera 11 ..............................................................................................................59 A.3.7 Safari 5 ................................................................................................................59 A.4 Código de la aplicación final .........................................................................................60 A.4.1 Final.html .............................................................................................................60 A.4.2 ConEstilo.css .......................................................................................................61 A.4.3 Audio.js ................................................................................................................61 A.4.4 Canvas.js .............................................................................................................62 A.4.5 CargarInicial.js .....................................................................................................67 A.4.6 Contador.js ..........................................................................................................68 A.4.7 PosicionPuntero.js ...............................................................................................69 A.4.8 WebSocket.js .......................................................................................................69 ÍNDICE DE FIGURAS Fig. 2.1 Modificación del DOCTYPE. ................................................................ 7 Fig. 3.1 Test de HTML5 en el último navegador de Microsoft. ......................... 12 Fig. 3.2 Soporte de canvas. ............................................................................ 13 Fig. 3.3 Soporte de texto en canvas. ............................................................... 13 Fig. 3.4 Soporte de video. ............................................................................... 13 Fig. 3.5 Soporte de almacenamiento local, web workers, trabajo offline y WebSockets. ............................................................................................ 14 Fig. 3.6 Soporte de geolocalización. ............................................................... 14 Fig. 3.7 Código para almacenar en local. ........................................................ 16 Fig. 3.8 Variante de código para almacenar en local. ...................................... 16 Fig. 3.9 Código para recuperar el contenido almacenado en local. ................. 16 Fig. 3.10 Declaración de canvas. .................................................................... 17 Fig. 3.11 JavaScript para pintar canvas de ejemplo. ....................................... 18 Fig. 3.12 Seguimiento del ratón en un canvas................................................. 19 Fig. 3.13 Tag para placeholder. ...................................................................... 19 Fig. 3.14 Tag para e-mail y dirección web. ...................................................... 20 Fig. 3.15 E-mail y url en un terminal Iphone con iOS 4.3. ................................ 20 Fig. 3.16 Tag para selector numérico. ............................................................. 21 Fig. 3.17 Tag para selector numérico con slider. ............................................. 21 Fig. 3.18 Funcionamiento de spinbox y range en un navegador Chrome. ....... 22 Fig. 3.19 Código de ejemplo de datetime. ....................................................... 22 Fig. 3.20 Ejemplo de calendario con datetime-local. ....................................... 23 Fig. 3.21 Tag para paleta de colores en formulario. ........................................ 23 Fig. 3.22 Paleta de colores que aparece con el input de tipo color. ................. 23 Fig. 3.23 Código necesario para geolicalicación. ............................................ 24 Fig. 3.24 Petición de permiso para obtener la localización en Opera. ............. 24 Fig. 3.25 Resultado de geolocalicación en Opera. .......................................... 25 Fig. 3.26 Declaración de manifest en el documento HTML. ............................ 26 Fig. 3.27 Texto en el interior del documento manifest. .................................... 26 Fig. 3.28 Utilización de NETWORK en el documento manifest. ...................... 26 Fig. 3.29 Utilización de FALLBACK en el documento manifest. ...................... 27 Fig. 3.30 Llamada a otros documentos HTML en el manifest. ......................... 27 Fig. 3.31 Llamada a página web almacenada en caché. ................................. 28 Fig. 3.32 Configuración del servidor para ofrecer video. ................................. 29 Fig. 3.33 Configuración de video para el navegador. ...................................... 29 Fig. 3.34 Handshake con el cliente 192.168.1.6 (arriba) y ............................... 31 Fig. 3.35 Declaración de un nuevo socket. ...................................................... 32 Fig. 3.36 WebSocket: onopen y onmessage. .................................................. 32 Fig. 3.37 WebSocket: send. ............................................................................ 32 Fig. 4.1 Pantalla final. Sudoku. ........................................................................ 34 Fig. 4.2 Selector de audio. .............................................................................. 34 Fig. 4.3 Código de audio.js. ............................................................................. 35 Fig. 4.4 Desplegable de sudokus. ................................................................... 36 Fig. 4.5 Código de la función dibujarPrincipal(). .............................................. 37 Fig. 4.6 Código de pintarPrincipal. .................................................................. 37 Fig. 4.7 Código de CargarLocal....................................................................... 38 Fig. 4.8 WebSocket en documento HTML. ...................................................... 39 Fig. 4.9 onmessage del WebSocket principal. ................................................. 40 Fig. 4.10 Página principal tras tiempo jugando. ............................................... 40 Fig. 5.1 Consumo de CPU y RAM con el administrador de tareas de Windows. ................................................................................................................ 43 Fig. 5.2 Análisis con SpeedTracer. .................................................................. 44 Fig. 5.3 Ejemplo de GET del contenido. .......................................................... 45 Fig. 5.4 Ejemplo de envío de datos con WebSocket. ...................................... 45 ÍNDICE DE TABLAS Tabla 3.1 Tabla con tipos de input para mostrar fecha y hora. ........................ 22 6 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 CAPÍTULO 2. INTRODUCCIÓN A HTML5 2.1. HTML5 HTML estaba empezando a quedar abandonado debido a la aparición de aplicaciones que no estaban estandarizadas y que requerían de un cierto orden. En el 2004 se constituyó el WHATWG3 al margen del W3C, promovido por empresas importantes como Apple, Opera, Google o la fundación Mozilla. El propósito dejó de ser académico para pasar a trabajar en un modelo esencialmente práctico. En el año 2007 el W3C reconoce la labor de WHATWG y se pone a trabajar basándose en lo que ya llevaba desarrollado el grupo. La nueva versión de HTML no abandona lo esencial, simplemente soluciona de una manera más sencilla un mismo dilema y además se facilita la inclusión de elementos multimedia, elemento que había evolucionado notablemente desde la versión 4. El hecho de que la idea de HTML5 [7] haya sido resolver problemas prácticos ha provocado que las mismas soluciones faciliten el trabajo en situaciones reales. La inclusión del DOM4 en el mismo estándar es uno de los cambios más destacados ya que hasta la actualidad, aunque es un componente fundamental de HTML, había sido tratado de forma separada. Sobre DOM se podría realizar un capítulo concreto, pero para la necesidad de este proyecto basta decir que DOM es la definición de un conjunto de entidades en el documento HTML y qué funciones se pueden realizar sobre éstas. Para trabajar en él, al igual que en otras características de HTML5, se utiliza el lenguaje JavaScript que permite utilizar las funciones y eventos del DOM. WHATWG se basó en los siguientes principios a la hora de diseñar HTML5:  Compatibilidad: Al igual que con las versiones anteriores, se tiene que facilitar el entendimiento de versiones antiguas y la inclusión de funciones que no estén en el estándar.  Si algo está bien hecho se reutiliza, no se intenta hacer de otra forma.  Resoluciones de problemas reales, ver las necesidades finales.  La inclusión de la seguridad en la parte del diseño. Las aplicaciones web tienen problemas de seguridad y se tiene que facilitar la creación de webs seguras.  Acceso universal: En la actualidad no solo acceden ordenadores a la web. Los terminales móviles, videoconsolas, tablets…no son más que nuevos dispositivos que han aparecido y que quieren acceder a este contenido. 3Web Hypertext Application Technology Working Group. 4Document Object Model o Modelo de Objetos del documento. Introducción a HTML5 7 Hay que dejar como comentario, que no todos los navegadores soportan todas las características de HTML5 en la actualidad. Los fabricantes se están poniendo al día para poder soportar correctamente todas las funcionalidades de HTML5 por lo que se requiere tener la última versión del navegador para poder disfrutar de estos contenidos. Entre los que más soporte tienen destacan los navegadores del grupo WHATWG aunque Microsoft con la versión 9 de Internet Explorer está realizando un buen trabajo. 2.2. Aportaciones de HTML5. ¿Qué abandona y qué incorpora? HTML5 se ha definido teniendo en cuenta a los diseñadores de páginas web y los que crean aplicaciones para ellas, orientándolo de forma práctica con el objetivo de resolver problemas de versiones anteriores. Además de facilitar el desarrollo proporciona herramientas más potentes que solucionan algunas complejidades innecesarias. Ha eliminado algunos componentes que habían quedado obsoletos y que en la actualidad aportaban poco. Con HTML5 y sus características se ha intentado hacer que el estándar no se quede atrás a medida que la web siga evolucionando. Además se ha querido potenciar especialmente la inclusión de contenidos multimedia y se ha incorporado en el estándar el DOM, ya mencionado anteriormente. A continuación se pasará a describir de forma más técnica y/o de código los diferentes cambios que han aparecido. La declaración inicial de un documento pasa a ser lo más sencilla posible. La Fig. 2.1 muestra esta modificación. Antes <!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd> Después <!DOCTYPE HTML> Fig. 2.1 Modificación del DOCTYPE. A nivel de caracteres, HTML5 se respalda completamente en el estándar UNICODE, lo que significa que el texto en el código se mostrará por pantalla tal y como se encuentra en el documento HTML, incluyendo caracteres especiales como la ñ sin necesidad de utilizar “ñ”. Desaparecen muchos atributos en favor de los CSS, se reconoce la labor que realizan y se desplazan estas características fuera del documento HTML. Si son de interés estos atributos, debido a su extensión considerable se ha desplazado al anexo A.1.1. 8 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 2.2.1. Elementos que desaparecen <BASEFONT> y <FONT> Estas dos directivas definían el tamaño por defecto y el de únicamente un bloque de texto. Ahora esta función ha quedado relegada al atributo size. En el caso de FONT, la aparición de nuevas directivas que se mencionarán más adelante ha propiciado esta decisión. <CENTER> Desde hace tiempo ya no se utilizaba esta directiva sino más bien el atributo align para realizar esta función. Igualmente HTML5 relega estas tareas de aspecto visual al CSS. También existen otros estilos que sí que han sido suprimidos completamente y han sido descritos en el anexo A.1.2. <APPLET> Los applet son pequeñas aplicaciones realizadas en Java. La directiva <APPLET> servía para poder incrustar este tipo de aplicaciones en el navegador. Su extinción viene dada por la universalización de la directiva <OBJECT>. Ambas comparten la directiva común <PARAM> para introducir parámetros por lo que no hay cambio en este aspecto. Los frames Si bien no es cierto que desaparecen del todo, HTML solo contempla los frames flotantes o iframes y el uso de distintas ventanas de destino con el atributo target. 2.2.2. Elementos que aparecen A partir de aquí se comentarán nuevas directivas y atributos que se incorporan en este nuevo estándar. Se mencionan brevemente algunas de ellas pero realmente es en este punto en el que empieza el desarrollo práctico de este proyecto. Algunas directivas nuevas proporcionan muchas utilidades prácticas y tienen un contenido mucho más amplio que una simple definición. En este documento principal se mencionan las más importantes, pero el resto de elementos que aparecen se pueden encontrar en el anexo A.1.3. Para la edición de textos existen los siguientes:  <ARTICLE>, como la forma para delimitar un artículo.  <FOOTER> y <HEADER>, pie y cabecera de un documento. Introducción a HTML5 9  <SECTION>, para delimitar un área dentro del documento para, por ejemplo, hacer uso de estilos sobre él. Para multimedia e interactividad los siguientes:  <FIGURE>, elemento que trata de englobar a un componente multimedia y a su información asociada.  <FIGCAPTION>, directiva encargada de almacenar el título de la figura.  <VIDEO> y <AUDIO>, son dos de las directivas más necesitadas que se han incluido. Su nombre lo indica prácticamente todo, permite incluir tanto archivos de video como de audio sin necesidad de utilizar alternativas como Flash.  <CANVAS>, define un lienzo y permite trabajar con múltiples capas y generar aplicaciones dinámicas. Características más generales de HTML5 serán explicadas en el capítulo 3. 10 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 CAPÍTULO 3. NUEVAS CARACTERÍSTICAS DE HTML5, EXPLICACIÓN Y EJEMPLOS Este capítulo tiene tres objetivos principales. El primero de ellos es el de explicar brevemente las nuevas características de HTML5 [7]. El segundo es crear un documento *.html que permita comprobar si el navegador es compatible con HTML5. Esto es primordial ya que sin una herramienta que permita ver los resultados no es posible contemplar si lo programado funciona correctamente. En este capítulo se explica el funcionamiento de dicho documento y se muestra el código necesario para llevarlo a cabo. El tercer y último objetivo es, mediante ejemplos, mostrar las bases para realizar los primeros códigos de estas nuevas características. 3.1. Introducción a las nuevas características de HTML5 3.1.1. Almacenamiento en local El concepto de almacenamiento en local es similar al de las cookies de cara al servidor. Las diferencias básicas son dos, la primera es que permite almacenar más contenido que en una cookie y la segunda es que no se tiene que ir enviando constantemente al servidor, como sí sucede con las cookies. Esta información se almacena en el usuario y se accede a ella mediante JavaScript. Estos contenidos son almacenados en el navegador, cualquiera que utilice el mismo navegador podrá hacer uso de ese contenido. Por el contrario, el servidor solo puede ver y/o modificar el contenido que él ha creado en el usuario. 3.1.2. Canvas La definición que HTML5 hace sobre este elemento es: un lienzo (canvas) de bits en el que se pueden renderizar gráficos de juegos u otras imágenes visuales al vuelo. Lo que traducido vendría a decir que es un lienzo independiente sobre el cual, mediante JavaScript, se pueden realizar múltiples acciones visuales con las que incluso se puede interactuar. Desde un pase de fotos, a elementos moviéndose libremente por ese lienzo hasta videojuegos como los que se realizaban para terminales móviles. 3.1.3. Geolocalización Poco se tiene que decir sobre geolocalización. No es un estándar que se haya introducido en HTML5 pero sí se ha dado soporte para poder utilizarlo correctamente con el navegador. La información no solo se puede ofrecer mediante un hardware GPS específico sino también mediante una dirección IP o triangulación entre estaciones base de telefonía. Nuevas características de HTML5, explicación y ejemplos 11 3.1.4. Trabajadores web o web workers Aquí HTML5 marca un estándar con la forma la cual los navegadores ejecutan JavaScript de forma transparente al usuario, en background. Se pueden tener múltiples “trabajadores” en diferentes threads realizando tareas mientras existen las habituales en la página principal. 3.1.5. Trabajando en modo offline Esta característica se puede definir mejor con un ejemplo. Consiste en poder navegar de forma offline, realizar cambios en el contenido y subirlos a la red en el momento en el que se vuelva a tener conexión. Un ejemplo es poder conectarse a Gmail, realizar cambios en el contenido estando desconectado de la red y que se actualicen al volver a estar conectado. 3.1.6. Video Sobre la definición particular de esta nueva característica poco hay que mencionar. Esta nueva directiva permite introducir video en HTML sin utilizar un reproductor de Flash como se venía haciendo hasta la fecha. El apartado que sí trae controversia es el tipo de video que soporta cada navegador, pues esta directiva soporta diferentes códecs y en función del navegador se puede reproducir un video o no aunque soporten dicha directiva. Existen 3 tipos de formatos que son los más utilizados:  El primero es H264. En la actualidad se ha hablado mucho de este formato ya que es el estandarte de Apple y su Safari y para apoyarlo directamente se ha optado por dejar de soportar Flash en sus terminales móviles. Video en banda base, con audio en AAC LC en un contenedor MPEG-4.  El segundo es OggVorbis, hasta ahora apoyado por Mozilla Firefox. Se trata de audio Vorbis con el códec de video Theora en un contenedor Ogg.  El último es un nuevo formato recién aparecido. WebM es un formato libre y que está recibiendo el apoyo de Firefox, Opera y Chrome que recientemente ha notificado que deja de ofrecer compatibilidad con H264. Este formato viene muy impulsado por usuarios de software libre y la gran mayoría de programas que codifican a este formato son programas para el sistema operativo Linux. 12 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 3.1.7. WebSockets La definición se puede resumir en que es una nueva característica de comunicación que incorpora HTML5 en la que se define un canal de comunicación full-duplex a través de un socket sobre la web [8]. Con esto lo que se intenta conseguir es que la comunicación entre el servidor y el cliente sea instantánea de forma bidireccional. En el apartado 3.3 de este capítulo se darán más detalles técnicos sobre esta nueva característica. 3.2. Comprobación de compatibilidad con HTML5 En este apartado se procederá a comprobar la compatibilidad de un navegador web con HTML5 y se explicará cómo se ha realizado el documento que realiza las pruebas. Dicho documento se ha creado desde cero para este proyecto por lo que se detallará el contenido y el funcionamiento paso por paso.El resultado final es el mostrado en la Fig. 3.1. Fig. 3.1 Test de HTML5 en el último navegador de Microsoft. La traducción de la Fig. 3.1 es que Internet Explorer soporta todas las características explicadas en el capítulo anterior exceptuando las aplicaciones en local, WebSockets y los formatos de video OggVorbis y WebM a la hora de reproducir video. El documento se denomina HTML5 Test.html y en él se ha realizado una función test() que se encarga de realizar un if con todas las funciones que se detallarán a continuación y colorear una tabla en rojo o verde. Hay que mencionar la excepción de los formatos de video puesto que el navegador no retorna un true sino un probably, maybe o un valor en blanco en función de lo capaz que se vea para reproducir ese tipo de contenido. En el anexo A.3 se pueden visualizar más capturas con todos los navegadores de actualidad, Firefox, Chrome, Opera y Safari y diferentes versiones. Estas capturas no se han introducido en el proyecto ya que no forman parte de los objetivos. Nuevas características de HTML5, explicación y ejemplos 13 La primera prueba realizada es la de soporte a canvas mediante la función de la Fig. 3.2. function supports_canvas(){ return !!document.createElement('canvas').getContext; } Fig. 3.2 Soporte de canvas. La función supports_canvas() realiza tres cosas en esa sola línea. Primero, con createElement se intenta crear un elemento canvas y este elemento quedará flotante en la memoria. Con getContext se obtiene el contenido de dicho elemento y con la doble exclamación se fuerza a devolver true o false en función de si ha podido realizarse o no. Por lo que el resultado de supports_canvas() es un booleano indicando si ha podido crearse o no. En el canvas también se puede introducir texto por lo que también se crea una función para comprobar su compatibilidad ya que una cosa no asegura la otra. function supports_canvas_text(){ if(!supports_canvas()){ return false; } var dummy_canvas=document.createElement('canvas'); var context =dummy_canvas.getContext('2d'); return typeofcontext.fillText== 'function'; } Fig. 3.3 Soporte de texto en canvas. En la Fig. 3.3 el funcionamiento es similar al de la función de comprobación del canvas. En este caso inicialmente en el if se comprueba si soporta canvas porque de no ser así no haría falta realizar la siguiente comprobación. A continuación se crea la variable dummy_canvas y se introduce el contenido en context. Si context tiene la función fillText significa que sí se soporta texto en el canvas. La Fig. 3.4 muestra el código para la compatibilidad con video en HTML. function supports_video(){ return !!document.createElement('video').canPlayType; } Fig. 3.4 Soporte de video. En la función supports_video() se crea un elemento video y se le realiza una consulta con la característica canPlayType El resultado obtenido también es un booleano. En este documento HTML también se ha realizado la comprobación 14 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 de compatibilidad con OggVorbis, H264 y WebM. El código necesario está disponible en el anexo A.2.1. La Fig. 3.5 muestra el código para el almacenamiento en local, web workers, trabajo en offline y WebSockets. function supports_local_storage(){ return('localStorage' in window)&& window['localStorage']!==null; } function supports_web_workers(){ return !!window.Worker; } function supports_offline(){ return !!window.applicationCache; } function supports_websocket() { return !!window.WebSocket; } Fig. 3.5 Soporte de almacenamiento local, web workers, trabajo offline y WebSockets. El motivo por el cual se explican estas cuatro comprobaciones en conjunto es porque se comprueban de la misma forma. Todas ellas son una propiedad del objeto window por lo que para detectar si funcionan se decide llamarlas y comprobar si existen. Para realizar la comprobación de la geolocalización el mecanismo es el mismo que las cuatro anteriores funciones solo que la propiedad es del objeto navigator en vez de window. La Fig. 3.6 contiene el código necesario. Function supports_geolocation(){ return !!navigator.geolocation; } Fig. 3.6 Soporte de geolocalización. Ahora bien, durante las prácticas de estas funciones, se sustituyeron los return por alerts para poder comprobar su correcto funcionamiento ya que como se puede apreciar, dichas funciones no muestran el resultado al usuario sino que simplemente retornan un parámetro al navegador. Nuevas características de HTML5, explicación y ejemplos 15 3.3. Introducción práctica a las nuevas posibilidades de HTML5 3.3.1. Almacenamiento en local El almacenamiento local es uno de los elementos que claramente diferencia las aplicaciones web con las locales, teniendo una clara ventaja el segundo grupo. En una aplicación ejecutada localmente en un ordenador el sistema le proporciona un almacenamiento en función a lo que la aplicación requiere. En una aplicación web, por el contrario, esto no se podía producir y una de las opciones utilizadas ha sido la utilización de cookies en el navegador, elemento que, aparte de estar limitado a unos 4 KB, era necesario transferir al servidor constantemente y esto ralentizaba la comunicación cliente-servidor. El objetivo entonces se fijó en:  Un mayor tamaño de almacenamiento en el cliente.  Que estos datos se mantengan al actualizar la página.  Que no se tenga que transferir al servidor constantemente.  No requerir de la utilización de plugins, ya que Flash había implementado algunas opciones pero limitadas al uso de su máquina. La especificación se llama “almacenamiento web” aunque algunas compañías lo anuncian como “almacenamiento local” o “almacenamiento DOM”. Su funcionamiento es similar a las cookies con las diferencias de que esta información permanece al cerrar el navegador y no se transmite al servidor a no ser que se especifique, haciendo mención. En cuanto al tema del espacio esta vez el estándar no es el que limita sino el navegador del usuario. Por defecto la mayoría de navegadores permiten almacenar alrededor de 5 MB en local a cada página a la que se accede y el programador web no puede hacer nada para modificar dicho tamaño. Recientemente algunos navegadores ofrecen al usuario, a través de los ajustes, la opción de variar este tamaño, ofreciendo un mayor tamaño de almacenamiento en local. Si este tamaño se excede se muestra un error y no es posible hacer aparecer una pregunta para modificar este tamaño. Actualmente compañías como Google están presentando API‟s para crear bases de datos en ese tamaño que nos presenta el navegador basados en SQL. No es un estándar de HTML5 pero muestra una de las posibles utilidades que se pueden realizar sobre el almacenamiento local, mostrando el potencial que puede llegar a tener. A continuación se procederá a la explicación del ejemplo práctico. Desde el código JavaScript se accede al almacenamiento con el objeto „localStorage‟. Hay que recordar que antes de proceder con el ejemplo se tiene que 22 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 desplazamientos de 5 en 5. En la Fig. 3.18 se puede apreciar en un navegador Chrome el funcionamiento de los dos tipos mencionados anteriormente. Fig. 3.18 Funcionamiento de spinbox y range en un navegador Chrome. Fechas y colores Existen dos tipos en los formularios que están soportados por muy pocos navegadores, por no decir simplemente por uno de los más importantes. Estos dos tipos son los referentes a las fechas y a la selección de un color, date y color respectivamente. Hay que especificar que ha sido necesario instalar el navegador Opera 11 para poder apreciar su funcionamiento porque ninguno de los otros navegadores ha sido capaz de reproducirlos correctamente. El tipo date se dispone de múltiples formas para aportar diferentes comportamientos. La Tabla 3.1 muestra los inputs que se pueden introducir. Tabla 3.1 Tabla con tipos de input para mostrar fecha y hora. Tipos de input Comportamiento date Aparece un calendario para seleccionar una fecha. month Muestra simplemente el mes. week Muestra simplemente una semana. time Muestra la hora. datetime Combinación de date y time. datetime-local Muestra por defecto el día/mes actual en función del navegador. La Fig. 3.19 muestra el ejemplo de código realizado. Tan simple como declararlo en el type y aparecerá lo mostrado en la Fig. 3.20. <form …> … <input type="datetime-local"> … </form> Fig. 3.19 Código de ejemplo de datetime. Nuevas características de HTML5, explicación y ejemplos 23 Fig. 3.20 Ejemplo de calendario con datetime-local. El tipo color permite seleccionar un color y muestra su valor en hexadecimal. Para poder apreciar alguna de las utilidades de esta característica se ha realizado un ejemplo en el que no solo se ha utilizado el tipo color. La Fig. 3.21 muestra el código de ejemplo. <form …> … <input type="color" id="color" onChange="colorear();"> <br> <input type="text" style="color: #11aa11;" value="El texto de aquí dentro cambia de color a tu gusto :)" id="colort” /> … </form> Fig. 3.21 Tag para paleta de colores en formulario. Se ha declarado el input de tipo color y con el atributo onChange se consigue realizar una función al producirse un cambio en dicha directiva. En este caso, se llama a la función colorear() que cambia el color al campo de tipo text que se ha declarado a continuación. La Fig. 3.22 muestra un ejemplo de lo que se debe apreciar para comprobar su correcto funcionamiento. Fig. 3.22 Paleta de colores que aparece con el input de tipo color. 24 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 3.3.4. Geolocalización Antes de empezar a hablar sobre este tema hay que recalcar que esta información ha de ser opcional, es decir, esta información no se tiene que obtener a no ser que el usuario final lo permita. La API de geolocalización permite al servidor obtener la ubicación del usuario que está navegando por dicha página. Con esta información se pueden realizar múltiples tareas como por ejemplo seleccionar el idioma por defecto de la página u obtener información sobre diferentes servicios próximos. Como sucede con los canvas la mayoría de código se encuentra introducido en JavaScript utilizando propiedades del nuevo objeto „navigator‟. La Fig. 3.23 muestra el código necesario y posteriormente se explican las funciones utilizadas de dicha API. <html> … <script> function getGeolocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{ alert("Tunavegador no soportageolocalizacion."); } } function showPosition(position){ document.getElementById("Latitud").innerHTML=position.coords.latitude; … } </script> … </html> Fig. 3.23 Código necesario para geolicalicación. La primera función, tras comprobar la compatibilidad con HTML5, realiza una llamada a la función showPosition(). Como se ha mencionado, el mostrar la ubicación es opcional y aquí es donde aparece la función getCurrentPosition(). Esta función, en la API de geolocalización, provoca que aparezca una barra pidiendo permiso para obtener la información de la ubicación como la que se muestra en la Fig. 3.24. Fig. 3.24 Petición de permiso para obtener la localización en Opera. En caso de confirmar dicho permiso, la función showPosition() que se llama en su interior podrá tener acceso a la información necesaria. A la función se le Nuevas características de HTML5, explicación y ejemplos 25 pasa el parámetro position que tienen dos propiedades básicas, coords y timestamp. Dentro del primero existen todos los parámetros como latitud, longitud, velocidad, etc; mientras que el segundo es simplemente eso, una marca temporal. Esta última función se ha programado solicitando todas las propiedades del objeto position pero en el ejemplo de este apartado solo se explicará uno. El código de este documento es muy similar al explicado en el documento HTML5 Test.html. En el cuerpo del documento se ha realizado una tabla asignando id’s a todos los compontes. Después desde la función showPosition() se llaman a todas las propiedades del elemento position y se introducen en el documento HTML a mostrar. En el ejemplo se llama al campo “latitud” y se le introduce el valor de position.coords.latitude, encargado de obtener dicho valor. La Fig. 3.25 muestra el resultado de abrir el documento en un navegador Opera. Los campos que salen en blanco es información que el navegador no soporta. En el caso del TimeStamp son el número de segundos que han pasado desde el 1 de enero de 1970, se muestra en valor absoluto. Fig. 3.25 Resultado de geolocalicación en Opera. 3.3.5. Trabajando en modo offline Una aplicación web offline no es más que una lista de URLs apuntando hacia archivos HTML, CSS, JavaScript o a otros elementos que deberían de estar presentes. La página principal apunta a esta lista llamada manifest file, que no es más que un archivo de texto colocado en otra parte del servidor. Si el navegador soporta esta característica de HTML5 leerá la lista de URLs, se bajará lo que necesite, realizará copias en local y automáticamente las irá teniendo al día. En el momento de acceder a dicha dirección web estando sin conexión a la red el navegador automáticamente mostrará las copias en local. A partir de aquí, el programador web ha de decidir si ese contenido se tiene que ir actualizando o no, dejándolo detallado en la aplicación. La inclusión de este documento se realiza de la forma que se muestra en la Fig. 3.26. 26 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 <!DOCTYPE HTML> <html xml:lang="es" lang="es" manifest="almacenado.manifest"> ... </html> Fig. 3.26 Declaración de manifest en el documento HTML. Este documento puede estar colocado en cualquier parte del servidor pero tiene que ser servida como text/cache-manifest por lo que en el caso de utilizar un servidor web basado en Apache se tendría que introducir la siguiente línea en el archivo htaccess: AddTypetext/cache-manifest .manifest De esta forma los archivos terminados en .manifest serán servidos como se requiere. La Fig. 3.27 muestra un ejemplo del contenido de este documento, el cual debe empezar con CACHE MANIFEST. CACHE MANIFEST /Estilo.css /JavaScript.js /Imagen.jpg Fig. 3.27 Texto en el interior del documento manifest. Con el archivo de la Fig. 3.27, el cliente lee el contenido y Estilo.css, JavaScript.js e Imagen.jpg serán descargados del servidor. La utilidad de esta lista no recae en descargar una página con todos sus elementos, cosa que puede hacer la caché del navegador, sino en el hecho de bajarse diferentes páginas HTML que están enlazadas entre si y poder navegar entre ellas simplemente habiendo tenido Internet al descargar la página principal. ¿Qué sucede si hay algún tipo de contenido que no tiene que quedar en local? En el caso de tener una aplicación CGI, por ejemplo, incluida en el atributo de una imagen o un canvas que realiza la función de contador no interesaría que eso se almacenase en local ya que perdería toda su utilidad. Para evitar esto se utiliza una línea con la palabra NETWORK y a continuación lo que no se quiere descargar. La forma de escribirlo se muestra en la Fig. 3.28. CACHE MANIFEST NETWORK: /aplicacion.cgi CACHE: /Estilo.css /JavaScript.js /Imagen.jpg Fig. 3.28 Utilización de NETWORK en el documento manifest. Nuevas características de HTML5, explicación y ejemplos 27 Como se puede apreciar, se introduce ahora una línea CACHE para especificar a partir de donde empieza la parte que se tiene que almacenar. Por último existe otro tipo de sección llamada secciones alternativas, o en inglés Fallback Sections. En el caso de que una web tuviera muchas páginas con muchos elementos sería un problema tener que descargarlo todo. Utilizando dicha sección lo que se consigue es que simplemente se irán almacenando en local las páginas que se hayan visitado. Todas las páginas apuntarían al archivo .manifest, y en el momento de acceder a alguna el navegador pregunta si ya la tiene, y en caso negativo se descargaría todo su contenido. Esto se realiza creando una “appcache” (abreviatura de aplicación caché), descargando el contenido y añadiendo dicha url en esta pequeña aplicación. Esto significa, que no hay que añadir las páginas en el archivo .manifest sino que hay una pequeña aplicación realizando esta tarea de modo silencioso. El código sería el mostrado en la Fig. 3.29. CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * Fig. 3.29 Utilización de FALLBACK en el documento manifest. Lo primero que aparece es la sección FALLBACK, después no una url sino un patrón que indica cualquier página del sitio web. En el caso de intentar acceder sin tener conexión a Internet y la página no se encontrase en la appcache, se mostraría la página offline.html en vez de aparecer un error. El asterisco que aparece en la sección NETWORK indica que en caso de no tener el contenido en la appcache y tener conexión, pueda continuar bajando contenidos. A continuación se procederá con el ejemplo práctico. Para empezar se ha creado una carpeta con todos los documentos que se tiene que descargar el usuario una vez conectado. Como se ha comentado pueden ser archivos HTML, hojas de estilo, imágenes, etc. Para que el ejemplo quede lo más sencillo la lista de archivos será la mostrada en la Fig. 3.30. CACHE MANIFEST /cache/Pagina2.html /cache/Pagina3.html Fig. 3.30 Llamada a otros documentos HTML en el manifest. Al acceder al archivo offline.html se descargará, con él, el archivo .manifest. Una vez realizada dicha acción, para comprobar su funcionamiento, se procede a desconectar de Internet y acceder a los links que referencian a Pagina2.html y Pagina3.html. Se puede apreciar cómo se puede navegar entre dichas 28 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 páginas sin tener conexión al servidor. La Fig. 3.31 muestra las líneas importantes del código HTML. <html xml:lang="es" lang="es" manifest="almacenado.manifest"> … <a href="cache/Pagina2.html">Página 2</a> … </html> Fig. 3.31 Llamada a página web almacenada en caché. Como se puede apreciar, se añade en la cabecera HTML la ruta al archivo .manifest y el resto es agregar las referencias tanto a Pagina2.html como a Pagina3.html. En el momento de pulsar el link se accede a la página web solicitada aun sin tener conexión. 3.3.6. Video A nivel práctico este elemento es completamente distinto a nivel de código que el canvas. La diferencia radica a la hora de trabajar con él ya que todo el código se escribe en el documento HTML y no se utiliza JavaScript. En el apartado 3.1.6 de este capítulo se explican teóricamente los diferentes tipos de codecs que son más utilizados en la actualidad, y a continuación se procederá a detallar en qué repercute a nivel práctico dichos formatos. En la actualidad hay múltiples programas que convierten video de cualquier formato a otro. En este trabajo no se realizará una comparativa de herramientas sino que se expondrá el software necesario para realizar pruebas con la nueva directiva <VIDEO>. Una herramienta útil es un divisor de video, para trabajar con pequeños fragmentos que no requieran de mucho tiempo al codificarlos a diferentes formatos ni consuman muchos recursos de ancho de banda a la hora de incorporarlos en una web. Codificadores de video hay muchos que codifican de un formato a otro por lo que cualquier programa de estos puede realizar la tarea requerida. Hay que remarcar un problema con webM ya que para Windows, en la fecha en la que se realizaba este proyecto, no ha sido fácil encontrar un programa que lo pudiera realizar. Finalmente, el video se ha codificado con firefogg un complemento muy útil para el navegador de Mozilla. En el caso de trabajar con distribuciones Linux existen muchas herramientas para la codificación. Antes de empezar a mostrar el código hay que advertir que se tienen que introducir las directivas para que el video sea servido con el contenedor MIME que toca. Al ser un servidor Apache, en este proyecto se ha modificado el archivo httpd.conf añadiendo las tres líneas que se muestran en la Fig. 3.32. Nuevas características de HTML5, explicación y ejemplos 29 AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm Fig. 3.32 Configuración del servidor para ofrecer video. La Fig. 3.33 muestra el código ejemplo de este apartado. <html> … <video id="movie" width="1280" height="720" controls> <source src="videos/FT10.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"' /> <source src="FT.webm" type='video/webm; codecs="vp8, vorbis"' /> … <embed src="mediaplayer.swf" width="1280" height="720" allowscriptaccess="always" allowfullscreen="true" Flashvars="width=1280&height=720&&autostart=true&repeat=true&file=videos/FT10.f lv" /> </video> … </html> Fig. 3.33 Configuración de video para el navegador. La directiva <VIDEO> es la primera declaración de todas, donde se establece el alto y el ancho con width y height. El atributo controls sirve para que aparezca una barra inferior para poder pausar, reproducir la película o subir y bajar el volumen. Lo siguiente es la fuente del archivo que se va a reproducir, con src se introduce la ruta del video a reproducir y con el atributo codecs se indican los codecs a utilizar. No es obligatorio el atributo type pero se ha introducido en este ejemplo porque resulta muy útil a la hora de ofrecer diferentes opciones para permitir compatibilidad con la mayoría de navegadores. En dicho atributo se especifica el tipo de video de esa fuente y si el navegador no la soporta no se descargará ese archivo, ahorrando ancho de banda y facilitando la tarea a conexiones lentas. Por último en el ejemplo se ha puesto la directiva <EMBED> para añadir el mismo contenido en Flash. El funcionamiento de este ejemplo a nivel práctico es que el navegador se baja el contenido HTML y en el caso de no soportar HTML5 reproduce el video en Flash. Dentro de las múltiples opciones de HTML5, éste descarga y reproduce el formato que soporte, ofreciendo la máxima compatibilidad. Como inconveniente hay que destacar que para ofrecer todas las opciones de reproducción es necesario tener el video en todos esos formatos, ocupando el correspondiente espacio en el servidor. 30 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 3.3.7 WebSockets Antes de empezar a hablar de WebSockets [8] es necesario explicar la evolución que ha experimentado HTML antes de llegar a esta característica. Para empezar, el protocolo HTTP no fue diseñado con el propósito de albergar conexiones full-duplex y las soluciones que se han ido aplicando hasta le fecha han sido modificaciones de su funcionamiento para obtener el resultado deseado. En el caso de querer tener la página con información lo más actualizada posible lo primero que se piensa es el estar refrescando la página constantemente; obviamente no es la solución óptima. Se han utilizado mecanismos de polling, sondeo en inglés, o incluso streaming para dejar la conexión abierta. Un polling con mensajes cortos provoca tráfico innecesario por la red ya que se abre y se cierra una conexión sin ninguna obtención de contenido. El denominado long-polling consiste en mantener el mensaje en el servidor durante un periodo de tiempo. El gran inconveniente radica en que puede haber momentos sin ninguna modificación y momentos de muchas modificaciones, provocando un mensaje de gran tamaño. El streaming, a parte del conocido hecho de que mantener una comunicación abierta consume recursos, dependiendo de los cortafuegos el contenido se podría almacenar, erróneamente, en un buffer y provocar el mismo efecto que el longpolling. Para hacerse una idea de lo que son los WebSockets puede servir el saber el nombre inicial con el cual estaba definido en la especificación de HTML5, “TCPConnection”. En la actualidad tiene su especificación propia, como la geolocalización o los web workers para poderse centrar más en el tema. En resumen, lo que se hace es pasar de una comunicación utilizando el protocolo HTTP a una basándose en el protocolo WebSocket. Se mantiene el intercambio de información en el protocolo HTTP, pero en el handshake inicial entre el cliente y el servidor se establece la comunicación WebSocket, en la que se pueden enviar mensajes en full-duplex. En el capítulo 5 en el que se habla de la carga de red de este proyecto, se entrará en más detalle sobre la diferencia que aporta WebSocket. A continuación se muestra un ejemplo práctico. Antes de centrarse con el código HTML hay que explicar algo de los movimientos realizados en el servidor. Como se ha explicado anteriormente, se cambia de protocolo para enviar la información por lo que el servidor tiene que estar preparado para realizar esta tarea. Existen múltiples servidores WebSocket, programados en Java, JavaScript o python. Existe una extensión para Apache llamada mod_pywebsocket que incorpora la característica mencionada. Lamentablemente este tipo de software, al igual que muchas cosas relacionadas con HTML, está más preparado para sistemas Linux que no para Windows en la versión de 64 bits. Para solucionar este tema directamente se ha instalado el software de python [13] en la máquina Windows y se ha ejecutado la aplicación utilizando el intérprete. Nuevas características de HTML5, explicación y ejemplos 31 Dicho lo anterior y debido a que el objetivo de este proyecto es el cliente, no se profundizará en el código python del servidor, aunque dicho código está disponible en el anexo A.2.2. Simplemente comentar que en el servidor se ha implantado un echo que devuelve la información que se le envía, para comprobar que funciona correctamente. El funcionamiento del WebSocket no solo se puede contemplar mediante el navegador. Al ser un protocolo diferente se realiza un cambio de protocolo de transporte y con el wireshark se puede apreciar. Al analizar el tráfico se puede apreciar el handshake que se establece entre cliente y servidor para cambiar la conexión de HTTP a ws. La Fig. 3.34 muestra una captura del tráfico de red realizada con wireshark en el servidor. Fig. 3.34 Handshake con el cliente 192.168.1.6 (arriba) y servidor 192.168.1.4 (abajo). WebSocket es un protocolo que, junto con la mayoría de lo visto de HTML5, está en constante y actual evolución. En el momento de realizar el proyecto la información sobre cómo realizar la comunicación se encontraba entre la versión 75 y 76 de dicho protocolo. La versión implementada es la 76 en la que la mejora destacable es la incorporación de claves, o keys, para aportar seguridad a las comunicaciones. En la Fig. 3.34 se puede apreciar cómo trabajan con dichas claves. Volviendo al ejemplo del código, en él se crea una página web con un campo de texto en el que el cliente puede escribir; un textarea en el que se introducirán los datos que lleguen por el socket web y un botón que reaccionará al click, llamando a una función que enviará el contenido del primer campo de 38 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 en qué recuadro se quiere escribir o, en el caso del selector, qué número se quiere pintar. Siguiendo en el archivo Canvas.js, la función selección() realiza una llamada a getCursorPosition2() para obtener la posición del ratón y, haciendo uso de comparadores, se da valor a la variable numSeleccionado. Esta variable es global y su función es la de tener el valor que se inserta en el canvas principal mediante la función pintar(). La función pintar() tiene un comportamiento similar a la de selección(), obtiene la ubicación del click del ratón y pinta en el canvas; además en esta función se introduce el valor en la matriz de juego SudokuJuego. Con las funciones explicadas hasta este momento ya se puede jugar. Se traspasan valores entre los dos canvas dibujados mediante variables globales en el código JavaScript. El siguiente añadido a la aplicación es el uso de almacenamiento en local, cuyo código se encuentra también en el archivo Canvas.js y es una de las principales razones por las cuales se trabaja con variables globales. Las variables tienen que ser modificadas mientras se juega y las funciones de almacenamiento local tienen que recibir parámetros para que el juego quede tal cual se había dejado en el momento de guardar la partida. Para almacenamiento en local se han creado 3 funciones: GuardarLocal(), CargarLocal() y pintarCargado(). GuardarLocal() almacena el sudoku de juego, el sudoku en el que se está jugando y los valores del temporizador. CargarLocal() obtiene todos los valores y llama a pintarCargado(). La Fig. 4.7 muestra el código de CargarLocal(). function CargarLocal(){ var indiceLocal =0; for (tt=0; tt<9; tt++){ for (ww=0;ww<9;ww++){ SudokuJuego[ww][tt] = localStorage.getItem(indiceLocal); indiceLocal++; } } segundosC=localStorage.getItem("TempoS"); minutosC= localStorage.getItem("TempoM"); document.getElementById("temporizadorMin").value=minutosC; document.getElementById("temporizadorSeg").value=segundosC; SudokuElegido=localStorage.getItem("NumSudoku"); pintarCargado (SudokuElegido); } Fig. 4.7 Código de CargarLocal. Del código anterior se puede apreciar que los valores de la matriz se cargan otra vez en la matriz de juego. Se habían guardado los valores con índices Sudoku con HTML5 39 numéricos del 0 al 80 y se van obteniendo mediante getItem. Los segundos y los minutos se obtienen y se introducen en el documento HTML en dos pasos; esto se debe a que los valores del contador también son necesarios a nivel lógico y tanto segundosC como minutosC son las variables lógicas de este contador. Por último se obtiene el valor del sudoku con el que se estaba jugando y se llama a pintarCargado(). Esta última función ha sido necesaria para recargar los 2 sudokus de juego que faltan. Una vez se cargan el sudoku con el resultado y el sudoku con los valores predeterminados que no será modificado, se procede a pintar en el canvas principal. Al pintar los números es necesario pintar en azul los números predeterminados y en negro los que se han introducido durante el juego. La última función de Canvas.js hace uso del último JavaScript del proyecto, WebSocket.js. La función es HeAcabado() y se lanza al pulsar el botón del documento HTML “He acabado”. Esta función comprueba que el sudoku se ha resuelto correctamente y en caso afirmativo lanza un pop up para introducir el nombre y llama a la función enviar(), que se encuentra en el archivo WebSocket.js. Hay que tener en cuenta que el WebSocket actúa por eventos, es decir, tiene actividades al abrirse, al recibir un mensaje, etc. Dentro del archivo WebSocket.js se captan dichos eventos y además existen dos funciones que sirven de interacción entre la página HTML y el servidor WebSocket. Antes de seguir explicando el funcionamiento, se ha de exponer que se ha creado un recuadro en el documento HTML que cambia de color en función de si se ha podido conectar al servidor WebSocket o no. Hoy en día existen muchos motivos por lo que esto puede no suceder correctamente, navegadores que no lo soportan, versiones de navegador que lo soportan pero utilizan un protocolo de transporte más nuevo y provocan error en la conexión o incluso que el servidor WebSocket no se haya configurado correctamente, cosa probable cuando se estudia una nueva tecnología como se da en el caso de este proyecto. La Fig. 4.8 muestra la parte inferior derecha del documento HTML principal. Fig. 4.8 WebSocket en documento HTML. 40 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 El recuadro verde apreciable en la Fig. 4.8 muestra que se ha podido establecer la conexión con el WebSocket. Al realizar el onopen del WebSocket se accede a este elemento del documento HTML y se le cambia el color de rojo a verde. La función enviar() mencionada anteriormente contiene el send que envía un string con el formato “Minutos:Segundos-Nombre/SudokuElegido”. El formato es este por temas de código que se aprecian en la Fig. 4.9 con el onmessage del WebSocket. w.onmessage = function (evento){ var eventoS = evento.data; eventoS = eventoS.split("/)"); if (eventoS[1] == SudokuElegido){ Lista.push(eventoS[0]); Lista.sort(); } … }; Fig. 4.9 onmessage del WebSocket principal. Esta función, al recibir el string lo separa en dos. Al enviar el sudoku con el que se estaba jugando, otro usuario puede comparar si está jugando al mismo sudoku. En caso de ser el mismo, recibe el string con el tiempo y el nombre. Puesto que el tiempo es lo primero que aparece en el string con hacer un sort ya se ordena y se muestra al usuario en el textarea tal y como se puede observar en la Fig. 4.10. Fig. 4.10 Página principal tras tiempo jugando. Sudoku con HTML5 41 La Fig. 4.10 muestra la página HTML tras un tiempo de juego y aquí se puede apreciar lo explicado hasta este punto. Los números en azul que se cargan por defecto y los negros que se introducen seleccionándonos en el selector rosa de la derecha. La barra de audio con una canción diferente seleccionada y en la parte inferior derecha la interacción que proporciona el WebSocket. 42 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 CAPÍTULO 5. PRUEBAS DE RENDIMIENTO Y ANÁLISIS DEL TRÁFICO POR LA RED Las pruebas de rendimiento son aquellas pruebas que se utilizan para analizar la velocidad del sistema a la hora de realizar una determinada tarea. En el caso de los servidores web esta prueba se realiza bajo las condiciones a las que se va a enfrentar ese sistema una vez puesto al servicio de los clientes. Las pruebas permiten analizar, entre otras cosas, la carga del sistema, el estrés que puede soportar y la estabilidad del mismo. Todas estas pruebas se realizan en el lado del servidor. En cuanto a la estabilidad, esta mantiene un flujo de peticiones constantes y comprueba si el sistema las atiende correctamente o si, por ejemplo, deja residuos de información en la RAM. Por otra parte, la prueba de estrés analiza la cantidad de usuarios que el sistema es capaz de soportar. Finalmente la prueba de carga comprueba tiempos de respuesta entre servidor y cliente en función de las peticiones; esto es importante en páginas webs que tengan acceso a bases de datos o servicios webs y se quiera comprobar que todo el conjunto funciona de forma que el usuario no note lentitud en el sistema. En este proyecto se ha trabajado en el lado del cliente con la parte de presentación y debido a esto no se le ha dedicado una principal atención a la configuración del servidor. En las pruebas de carga, la tecnología utilizada en el apartado de WebSockets es lo que puede hacer variar sensiblemente el resultado final. Para realizar pruebas en el lado del cliente, en este proyecto se han utilizado las herramientas SpeedTracer [17], Wireshark 1.4.4 [18] y el administrador de tareas de Windows. La herramienta SpeedTracer realiza una tarea similar a las pruebas de carga; permite analizar tiempos de interacción entre el cliente y el servidor pero desde el lado del navegador. De hecho, SpeedTracer es un plugin disponible para el navegador Chrome. Wireshark por su parte, es una herramienta que permite visualizar y analizar el tráfico que circula por la red donde está conectada la máquina que lo ejecuta; permitiendo en este caso, apreciar el tráfico que circula por el WebSocket, cosa que la herramienta SpeedTracer no permite. Por último se ha utilizado el administrador de tareas de Windows para mostrar el consumo de recursos de HTML5 para, por ejemplo, comparar brevemente el consumo del mismo recurso en Flash. La primera prueba realizada ha sido la del consumo de recursos con el administrador de tareas. Esto es debido a que esta prueba se ha realizado con el único documento HTML que podía comparar equitativamente los recursos, el de video. Para evitar cargas adicionales se han creado dos documentos HTML nuevos. El primero, sólo carga un archivo mp4 con el tag de video mientras que el segundo carga el mismo video pero en formato flv dentro de la máquina de Adobe. Pruebas de rendimiento y análisis del tráfico por la red 43 Fig. 5.1 Consumo de CPU y RAM con el administrador de tareas de Windows. La Fig. 5.1 muestra el consumo de CPU y RAM a la hora de abrir los dos documentos. En el apartado de RAM, ambos consumen lo mismo; con el navegador abierto sin nada cargado la RAM tenía ocupada 1.56 GB y al cargar los dos documentos HTML se situaba en 1.70 GB, estuviera el video lanzado o no. En el uso de CPU aparecen las diferencias. En la Figura 5.1 solo se marca un núcleo del procesador, pero el comportamiento se puede decir que es prácticamente simétrico. Las dos primeras variaciones de CPU remarcadas con el primer círculo en rojo son debidas a la reproducción del video en formato mp4 (éste se ha reproducido dos veces); la tercera variación de CPU, marcada con el segundo círculo en rojo, es debida a la reproducción del video en Flash. Los periodos varían porque Flash una vez terminado el video de 10 segundos lo volvía a reproducir. Como se puede apreciar las montañas son más notables en HTML5, la variación de la CPU en este caso oscilaba entre el 20% y el 30% mientras que con Flash se quedaba entre el 20% y el 25%. Con estos resultados se puede decir que, en este caso y con estas condiciones, HTML5 consume más recursos reproduciendo video que no Flash. A continuación mediante SpeedTracer se analizará el contenido descargado por el navegador. La Fig. 5.2 muestra qué recibe el navegador tras la petición de la página web. 44 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 Fig. 5.2 Análisis con SpeedTracer. En la parte inferior de la Fig. 5.2 se muestra el proceso que se sigue a la hora de descargar el contenido. Primero se baja el documento HTML con la hoja de estilos y los dos canvas principales. Como Canvas.js importa al resto de JavaScripts, se inicia la descarga de estos al finalizar la del primero. Por último se descarga el fondo de la página web y el mp3 que va en la parte de audio. Como se puede apreciar ha habido problemas al descargar el contenido del mp3 y se ha intentado descargar múltiples veces. En la parte superior hay dos franjas, en la superior se puede observar un zoom de la inferior. Como se puede ver, la primera montaña en azul son las peticiones de contenido mientras que las grises indican cuando el navegador está ocupado debido a la página web, debido a la descarga prolongada del mp3 y del fondo. Las franjas largas apreciables en la barra de abajo indican el tiempo que tarda entre que aparece el pop up pidiendo el nombre y se envía. Esto tiene en cuenta el tiempo que tarda el usuario en poner el nombre por lo que la duración se prolonga a varios segundos. Por último se analiza el tráfico mediante Wireshark. El objetivo es, a parte de apreciar a nivel de tráfico lo mismo que con el SpeedTracer, apreciar el tráfico Pruebas de rendimiento y análisis del tráfico por la red 45 del WebSocket ya que éste no aparece en esta última herramienta por no ser tráfico HTTP. Fig. 5.3 Ejemplo de GET del contenido. En la interacción entre cliente y servidor el cliente realiza GETs para solicitar el contenido; la Fig. 5.3 muestra un ejemplo de ello. Al explicar la utilidad del WebSocket se hablaba de la reducción de tráfico al no tener que realizar una petición, sino establecer una comunicación mediante otro protocolo. La Fig. 5.4 muestra el tamaño de un envío de datos utilizando el WebSocket. Fig. 5.4 Ejemplo de envío de datos con WebSocket. Como se puede apreciar, la reducción de bytes de un simple GET al envío de todos los datos que requiere la aplicación, aunque no sean muchos, pasa de 545 Bytes a 78 Bytes. Gracias a esto se consigue reducir en gran cantidad el tráfico en la red, lo cual era uno de los objetivos principales de esta nueva característica aparecida para HTML5 y motivo de interés del análisis del tráfico. 46 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 CAPÍTULO 6. CONCLUSIONES Y LÍNEAS FUTURAS El apartado de conclusiones se divide en cuatro subapartados. Un análisis de los recursos utilizados a la hora de realizar el proyecto a modo de estudio del posible impacto ambiental. Un análisis de los objetivos marcados inicialmente, un análisis de las posibles mejoras al proyecto o posibles variantes y finalmente una conclusión personal. 6.1. Impacto medioambiental Por el hecho de ser un proyecto basado en desarrollo de software se podría afirmar que no supone un impacto directo al medio ambiente. En caso de especificar un impacto medioambiental, se podría hacer mención del consumo eléctrico de los componentes utilizados, como la torre del ordenador, el monitor y el router que da acceso a Internet. Estos componentes pueden variar notablemente el consumo eléctrico por lo que este impacto medioambiental indirecto es difícil de cuantificar. 6.2. Análisis de los objetivos marcados El primer objetivo era el de analizar de forma teórica la evolución de HTML de su versión 4 a la 5. Al ir hablando de cada una de las nuevas características se ha ido explicando el objetivo de la aparición de ésta. A modo de resumen se puede decir que HTML5 añade elementos que eran realmente necesarios. Mucho tiempo estancado en la versión 4 había provocado que la web no estuviera preparada para el uso que ahora recibe Internet. HTML5 resuelve la mayoría de las nuevas necesidades y sigue en constante evolución. Los ejemplos prácticos han sido realizados correctamente y de forma didáctica para que un lector sin experiencia lo pueda seguir sin problemas. Todos ellos han funcionado correctamente por lo que se puede decir que el objetivo marcado inicialmente se ha cumplido. La conclusión a extraer no varía tras la comparativa teórica; elementos muy potentes y con grandes opciones. El inconveniente que se puede apreciar es que no todos los navegadores, a día de hoy, soportan correctamente todas las nuevas funcionalidades. Ya no solo en términos de HTML5 sino con las diferentes codificaciones de video que hay. El proyecto final ha mostrado tanto los pros como los contras de HTML5. No existe una complejidad extrema a nivel de lógica del juego, pero se aprecia claramente la potencia de HTML5 al interactuar múltiples de sus nuevas características. Por otra parte, esto mismo ha hecho aparecer problemas mayores de compatibilidad. Finalmente se ha conseguido alcanzar el objetivo del proyecto al realizar un juego que funciona en el navegador Chrome. Conclusiones y líneas futuras 47 El último objetivo ha sido el de las pruebas de carga en el lado del cliente, en el navegador. Éstas han sido realizadas hasta el punto que había marcado en el proyecto y, aunque la comparativa Flash contra HTML5 no se encontraba en los objetivos, se ha podido realizar una pequeña prueba gracias al documento HTML5 que trataba el reproductor de video. La prueba más destacable ha sido la del tráfico que genera el cliente. El intercambio de información entre cliente y el servidor usando WebSocket deja claramente en evidencia lo indeficiente que es el protocolo HTTP para transferencias pequeñas o asíncronas de datos. WebSocket ofrece un ahorro de tráfico claramente apreciable. Una de las mejores características introducidas en esta nueva versión de HTML, sin duda. Fuera de los objetivos y a modo de resumen conviene hablar de las virtudes de HTML5. HTML5 es una tecnología que todavía sigue evolucionando y tiene mucho futuro. Grandes compañías como Google o Apple están apoyando su evolución, ya sea por intereses económicos o por la filosofía del software libre, y suponen un gran respaldo a la hora de ganar terreno en el mercado. En un futuro HTML5 estará muy extendido, ya sea en los navegadores de los ordenadores o en los navegadores para móviles. 6.3. Líneas futuras El objetivo principal de este proyecto no ha sido el de la realización del producto final, sino el estudio de una nueva tecnología. Esto significa que las posibles mejoras serían en términos de rendimiento. A la hora de analizar que se podría realizar tras este proyecto la solución es muy amplia. El interés aparece, más que en ampliar la aplicación final, en el campo de las múltiples APIs que están apareciendo. Escoger cualquiera y empezar un proyecto nuevo a partir de ella. Existen de todo tipo, desde las que ofrecen transformar el almacenamiento en local en una base de datos hasta, las que para el autor del trabajo parecen más atractivas, aquellas diseñadas para la implementación de videojuegos. 6.4. Conclusión personal Desde casi el completo desconocimiento de la programación en HTML y JavaScript este proyecto ha llevado al aprendizaje de un lenguaje que mientras se estudiaba iba evolucionando de forma paralela. Existe felicidad, no solo por la finalización del proyecto, sino también por la cantidad de cosas aprendidas. No ha sido una puesta en marcha de una tecnología o algo teórico aprendido en la universidad sino una puesta en práctica del concepto principal en ella, saber desenvolverse con algo nuevo. Desde una idea inicial sobre un proyecto de comparativa teórica hasta haber desarrollado finalmente un juego ha resultado ser una superación de las expectativas iniciales. 54 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 def __init__(self, conn, server): asyncore.dispatcher_with_send.__init__(self, conn) self.server = server self.server.sessions.append(self) self.readystate = "connecting" self.buffer = "" def handle_read(self): data = self.recv(1024) self.buffer += data if self.readystate == "connecting": self.parse_connecting() elif self.readystate == "open": self.parse_frametype() def handle_close(self): self.server.sessions.remove(self) self.close() def parse_connecting(self): header_end = self.buffer.find("\r\n\r\n") if header_end == -1: return else: header = self.buffer[:header_end] # remove header and four bytes of line endings from buffer self.buffer = self.buffer[header_end+4:] header_lines = header.split("\r\n") headers = {} # validate HTTP request and construct location method, path, protocol = header_lines[0].split(" ") if method != "GET" or protocol != "HTTP/1.1" or path[0] != "/": self.terminate() return # parse headers for line in header_lines[1:]: key, value = line.split(": ") headers[key] = value headers["Location"] = "ws://" + headers["Host"] + path self.readystate = "open" self.handler = self.server.handlers.get(path, None)(self) if "Sec-WebSocket-Key1" in headers.keys(): self.send_server_handshake_76(headers) else: self.send_server_handshake_75(headers) def terminate(self): self.ready_state = "closed" self.close() def send_server_handshake_76(self, headers): """ Send the WebSocket Protocol v.76 handshake response Anexos 55 """ key1 = headers["Sec-WebSocket-Key1"] key2 = headers["Sec-WebSocket-Key2"] # read additional 8 bytes from buffer key3, self.buffer = self.buffer[:8], self.buffer[8:] response_token = self.calculate_key(key1, key2, key3) # write out response headers self.send_bytes("HTTP/1.1 101 Web Socket Protocol Handshake\r\n") self.send_bytes("Upgrade: WebSocket\r\n") self.send_bytes("Connection: Upgrade\r\n") self.send_bytes("Sec-WebSocket-Origin: %s\r\n" % headers["Origin"]) self.send_bytes("Sec-WebSocket-Location: %s\r\n" % headers["Location"]) if "Sec-WebSocket-Protocol" in headers: protocol = headers["Sec-WebSocket-Protocol"] self.send_bytes("Sec-WebSocket-Protocol: %s\r\n" % protocol) self.send_bytes("\r\n") # write out hashed response token self.send_bytes(response_token) def calculate_key(self, key1, key2, key3): # parse keys 1 and 2 by extracting numerical characters num1 = int("".join([digit for digit in list(key1) if digit.isdigit()])) spaces1 = len([char for char in list(key1) if char == " "]) num2 = int("".join([digit for digit in list(key2) if digit.isdigit()])) spaces2 = len([char for char in list(key2) if char == " "]) combined = struct.pack(">II", num1/spaces1, num2/spaces2) + key3 # md5 sum the combined bytes return hashlib.md5(combined).digest() def parse_frametype(self): while len(self.buffer): type_byte = self.buffer[0] if type_byte == "\x00": if not self.parse_textframe(): return def parse_textframe(self): terminator_index = self.buffer.find("\xFF") if terminator_index != -1: frame = self.buffer[1:terminator_index] self.buffer = self.buffer[terminator_index+1:] s = frame.decode("UTF8") self.handler.dispatch(s) return True else: # incomplete frame return false def send(self, s): if self.readystate == "open": self.send_bytes("\x00") self.send_bytes(s.encode("UTF8")) self.send_bytes("\xFF") 56 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 def send_bytes(self, bytes): asyncore.dispatcher_with_send.send(self, bytes) class EchoHandler(object): """ EchoHandler repite lo que se le envie a no ser que se introduzca la palabra bingo, que tiene sorpresa. """ def __init__(self, conn): self.conn = conn def dispatch(self, data): self.conn.send("S dice:" + data) class WebSocketServer(asyncore.dispatcher): def __init__(self, port=80, handlers=None): asyncore.dispatcher.__init__(self) self.handlers = handlers self.sessions = [] self.port = port self.create_socket(socket.AF_INET, socket.SOCK_STREAM) self.set_reuse_addr() self.bind(("", port)) self.listen(5) def handle_accept(self): conn, addr = self.accept() session = WebSocketConnection(conn, self) if __name__ == "__main__": print "Starting WebSocket Server" WebSocketServer(port=8080, handlers={"/echo": EchoHandler}) asyncore.loop() Anexos 57 A.3 Capturas navegadores A.3.1 Chrome 10 A.3.2 Firefox 3.6 A.3.3 Firefox 4.0 58 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 A.3.4 Internet Explorer 8 A.3.5 Internet Explorer 9 Anexos 59 A.3.6 Opera 11 A.3.7 Safari 5 60 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 A.4 Código de la aplicación final A.4.1 Final.html <!DOCTYPE html> <html xml:lang="es" lang="es"> <head> <meta charset="utf-8"> <title>Jugando con Canvas</title> <link rel="stylesheet" type="text/css" href="ConEstilo.css" /> <script src="Canvas.js"></script> <script src="audio.js"></script> </head> <body onload="dibujarPrincipal(); dibujarSelector();WebSocket();"> <div style="height:40%; width:100%" class="JustificadoCentrado"> <h1>Sudoku sobre HTML5</h1> </div> <div style="height:60%;"> <div style="width:80%; float:left" class="JustificadoCentrado"> <canvas height="290" width="290" id="principal"></canvas> <br> <button onClick="CargarLocal()" >Cargar</button> <button onClick="GuardarLocal()">Guardar</button> <button onClick="HeAcabado()">He acabado</button> <br> <br> <SELECT NAME="elegirsudoku" onChange="pintarPrincipal(this.options[this.selectedIndex].value);resetContado r();borrarLista();"> <option selected>--- Sudokus ---</option> <option value="Sudoku1" >Sudoku1</option> <option value="Sudoku2">Sudoku2</option> <option value="Sudoku3">Sudoku3</option> </SELECT> <br> <br> <audio autoplay controls="" id="reproductor"> <source src="Musica/01_title.mp3"> </audio> <br> <br> <SELECT NAME="selectorCancion" onChange="seleccionarCancion(this.options[this.selectedIndex].value)"> <option selected>--- Canciones ---</option> <option value="Cancion1" >Mario</option> <option value="Cancion2">Mario tetris1</option> <option value="Cancion3">Mario bajo el agua</option> </SELECT> </div> <div style="width:20%; float:right;" class="JustificadoCentrado"> <canvas height="130" width="97" id="selector" onClick="activarContador()"></canvas> <br> <br> Temporizador: <br> <input type="text" id="temporizadorMin" size="1" style="text-align:right"> <input type="text" id="temporizadorSeg" size="1"> <table class="Centrado"> <tr> Anexos 61 <td >Conectado</td> <td id="conectado" ></td> </tr> <tr> <td colspan="2"> <textarea id="output" rows="15" cols="20"></textarea> </td> </tr> </table> </div> </div> </body> </html> A.4.2 ConEstilo.css @charset "utf-8"; .JustificadoDerecha { text-align: right; } .JustificadoCentrado { text-align: center; } .Centrado { margin-left:auto; margin-right:auto; } #conectado{ width:15px; background-color:#FF0000; } canvas{ background-color:#FFFFFF; } body { background-image: url(„Fondo/fondo_sudoku.png‟); background-repeat: no-repeat; } A.4.3 Audio.js // Una función que recibe un string con Cancion1, Cancion2 o Cancion3 que son los id's de un select y en función de la selección carga una canción u otra. function seleccionarCancion (NumCancion){ if (NumCancion == "Cancion1"){ document.getElementById("reproductor").src="Musica/01_title.mp3"; //modifica el source de un <audio> document.getElementById("reproductor").play(); //inicia la reprodcción de la canción "cargada" } 62 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 else if (NumCancion == "Cancion2"){ document.getElementById("reproductor").src="Musica/02_mario_tetris_(standard_lv_1,_2 ,_8,_9).mp3"; document.getElementById("reproductor").play(); } else if (NumCancion == "Cancion3"){ document.getElementById("reproductor").src="Musica/1-03-underwater.mp3"; document.getElementById("reproductor").play(); } } A.4.4 Canvas.js //document.write es como si escribiera en este documento el contenido del src. //Para este script es como si el código se encontrara en este js. document.write("<script type='text/javascript' src='CargarInicial.js'></script>"); document.write("<script type='text/javascript' src='Contador.js'></script>"); document.write("<script type='text/javascript' src='PosicionPuntero.js'></script>"); document.write("<script type='text/javascript' src='WebSocket.js'></script>"); //VARIABLES NECESARIAS //Variables del sudoku principal, declaradas a parte para que se puedan utilizar en diferentes //funciones var SudokuPrincipal = new Array (9); var SudokuResuelto = new Array (9); var SudokuJuego = new Array (9); for(i=0;i<9;i++){ SudokuPrincipal[i]=new Array(9); SudokuResuelto[i]=new Array(9); SudokuJuego[i]=new Array(9); } //Se inicializa esta variable para cargar por defecto el sudoku 1 var SudokuElegido = "Sudoku1"; //Variable del selector que indica que número hay que introducir en el sudoku principal var numSeleccionado=0; //Variables del canvas principal para poder utilizarlas en las diferentes funciones var principal; var ctxp; var anchop; var altop; //FUNCIONES //La funcion dibujar Principal crea el Canvas del Sudoku function dibujarPrincipal(x, y) { //Se obtienen los datos necesarios para poder trabajar con el canvas principal principal=document.getElementById("principal"); ctxp = principal.getContext("2d"); anchop= principal.width; altop=principal.height; //Se añade un eventlistener que llama a la función pintar con un click en el canvas principal.addEventListener("click", pintar, false); //Se dibuja la cuadricula con lineas de punto a punto ctxp.beginPath(); Anexos 63 for (var x =0.5; x < anchop; x += 32) { ctxp.moveTo(x, 0); ctxp.lineTo(x, 288.5); } for (var y = 0.5; y < altop; y += 32) { ctxp.moveTo(0, y); ctxp.lineTo(288.5, y); } ctxp.strokeStyle = "#00e"; ctxp.stroke(); ctxp.beginPath(); ctxp.lineWidth = 3; for (var x = 0.5; x < anchop; x += 96) { ctxp.moveTo(x, 0); ctxp.lineTo(x, 288.5); } for (var y = 0.5; y < altop; y += 96) { ctxp.moveTo(0, y); ctxp.lineTo(288.5, y); } ctxp.strokeStyle = "#000"; ctxp.stroke(); //Se llama a la función pintarPrincipal que añade los nímeros del sudoku a la cuadricula pintarPrincipal (SudokuElegido); } //La función pintarPrincipal añade los números al sudoku principal según el sudoku //seleccionado. Al necesitar la matriz lógica para saber que números introducir, esta función //también carga las matrices lógicas para poder realizar el juego. function pintarPrincipal (desplegable1){ SudokuElegido = desplegable1; SudokuPrincipal = CargardeArchivo(desplegable1); SudokuJuego = CargardeArchivo(desplegable1); SudokuResuelto = CargarSolucion (desplegable1); ctxp.textAlign = "center"; ctxp.fillStyle= "white"; //algunos navegadores toleran "fff", otros hay que poner #ffffff...hay problemas varios var xx=0; var yy=0; //Se "borra" todo pintando rectangulos en blanco encima de lo que pudiera haber en los recuadros for ( var x = 10; x < anchop-10; x += 32){ for ( var y = 10; y < altop-10; y += 32){ ctxp.fillRect (x, y, 10, 10); } } //Se pintan en azul los números iniciales del sudoku. ctxp.fillStyle= "blue"; //229 for ( var x = 16.5; x < anchop; x += 32){ for ( var y = 16.5; y < altop; y += 32){ if (SudokuPrincipal[yy][xx] !=0) ctxp.fillText(SudokuPrincipal[yy][xx], y, x); yy++; } xx++; yy=0; } } 70 Estudio, uso e implementación de una aplicación de las nuevas características de HTML5 }; //Al recibir información del websocket comprieba si la información recibida es del sudoku al que //estamos jugando. En caso de serlo introduce lo recibido en la lista y la ordena. Introduciendo //Dicha lista en el textarea principal para mostrarlo al usuario. w.onmessage = function (evento){ var eventoS = evento.data; eventoS = eventoS.split("/)"); if (eventoS[1] == SudokuElegido){ Lista.push(eventoS[0]); Lista.sort(); document.getElementById("output").value =""; for (a=0; a<Lista.length; a++) document.getElementById("output").value +=Lista[a] + "\n"; } }; //Al cambiar de sudoku hay que reiniciar la lista puesto que los valores no sirven. function borrarLista(){ Lista= new Array(); document.getElementById("output").value =""; } //La funcion enviar manda con w.send al servidor los valores del temporizador, el nombre del //usuario y el sudoku en el que se está jugando. function enviar(){ var name=prompt("Introduce tu nombre"); if (name!=null && name!=""){ tiempoM=document.getElementById("temporizadorMin").value; tiempoS=document.getElementById("temporizadorSeg").value; if (tiempoM.length==1) tiempoM="0"+tiempoM; if (tiempoS.length==1) tiempoS="0"+tiempoS; w.send(tiempoM+":"+tiempoS+"-"+name+"/)"+SudokuElegido); //en este punto se manda la información al websocket mediante la funcion send. } }