Desarrollo de aplicaciones para mviles

MDULO 1 UNIDAD 2

ms HTML5 y JAVASCRIPT
1. TAG VIDEO ........................................................................................... 3
Atributos del elemento video .................................................................................... 3 Compatibilidad con los distintos navegadores.............................................................. 5

2.

TAG AUDIO .......................................................................................... 7

Controles ............................................................................................................... 8 Especificar ms de un formato de archivo a la vez ....................................................... 9 Y los que usamos IE 8 o inferior? ........................................................................... 10

3. 4. 5.

FORMULARIOS WEB ............................................................................11 QUIN UTILIZA HTML5 HOY EN DA? ................................................18 NUEVAS CAPACIDADES DE JAVASCRIPT .............................................19
La API de Geolocalizacin en accin......................................................................... 19 Web Workers ........................................................................................................ 20 Esta tcnica puede ser muy til para evitar que se bloquee la web mientras que se est ejecutando cdigo javascript................................................................................... 21 El problema que tiene, es que an muchos navegadores no lo interpretan.................... 21 Almacenamiento Web ............................................................................................ 21 El elemento Canvas ............................................................................................... 21 Ventajas del elemento Canvas ................................................................................ 22 Trazos de dibujo ("paths")...................................................................................... 23 Web Sockets......................................................................................................... 33 La especificacin WebSocket define un API que establece conexiones "socket" entre un navegador web y un servidor.................................................................................. 33 Dicho con otras palabras: existe una conexin persistente entre el cliente y el servidor, y ambas partes pueden empezar a enviar datos en cualquier momento. ......................... 33 Uso actual de WebSockets...................................................................................... 33 Casos prcticos ..................................................................................................... 33 Arrastrar y soltar................................................................................................... 34

6.

COMPATIBILIDAD HTML5 EN MVILES Y TABLETS .............................36

1. Tag video
Aadir video y sonido a una pgina Web es una manera de hacerla ms atractiva. Los contenidos multimedia captan la atencin del visitante y nos permiten llegar a audiencias que, muy a menudo, adoptan una actitud de rechazo hacia las pginas con texto abundante. Antes de la llegada de HTML5 dependamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vdeo. Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.

Para incluir un video con HTML5 usas el siguiente formato:

<video src=un-video-mlw.avi width=320 height=240 autoplay ></video>

El elemento video tiene un atributo src cuyo valor apunta a la ubicacin del archivo de vdeo que debe reproducir. El atributo autoplay le indica al navegador que debe empezar a reproducir el vdeo en cuanto haya cargado la pgina.

Atributos del elemento video Controls: permite tener un mayor control sobre la reproduccin del video.

<video src='videos/BigBuck.mp4 controls></video>

Este atributo, muestra los controles por defecto.

Los controles estndar son: - Pausa/Reproduccin - La barra de avance (donde podemos mover el punto de reproduccin pulsando y arrastrndolo sobre la lnea de tiempo hacia adelante y atrs) - El botn de silencio (mute) - El deslizante de volumen. Hay que tener en cuenta que estos controles nativos tienen un aspecto diferente en cada familia de navegadores Web. Poster: Si actualizas la pgina, vas a ver que el primer frame del vdeo es un rectngulo negro que aparece en la pantalla y permanece ah hasta que el vdeo empieza a reproducirse. Al aadir el atributo poster le estamos indicando al navegador que cargue una imagen y la ponga sobre el elemento de vdeo. Cuando empiece a reproducirse el vdeo, esta imagen desaparecer.

<video src='videos/BigBuck.mp4' controls poster='poster320.png'> </video>

Width y height: Para controlar el tamao en pantalla se utilizan los atributos width y height. Se considera buena prctica que ambos valores coincidan con las dimensiones originales del vdeo. Podemos ampliar el tamao en pantalla cambiando estos parmetros, pero no es recomendable. Si ampliamos el tamao, la calidad de la imagen puede degradarse. Si reducimos su tamao, aunque su calidad puede que no se vea afectada, estamos obligando al usuario a cargar un archivo de tamao mayor del necesario. Una solucin ms correcta sera disponer del mismo vdeo en dos formatos, uno ms grande y otro ms pequeo para cada caso. Audio: este atributo nos permite silenciar el audio del vdeo. Actualmente el nico valor soportado es muted (silencio). Loop: Este atributo hace que el vdeo vuelva a reproducirse desde el principio cuando llega al final. preload: Este atributo hace que el vdeo empiece a cargarse al mismo tiempo que se carga la pgina (aunque no se reproduzca de forma automtica), de modo que se evita la latencia es decir, el tiempo de retardo- que requiere su descarga cuando el usuario pulsa el botn Play.

Compatibilidad con los distintos navegadores La especificacin de HTML5 no define un cdec1 estndar para no limitar los codecs existentes o futuros que pueden utilizarse para reproducir video, disponer de esta flexibilidad ha supuesto que no todos los navegadores compatibles con HTML5 soporten los mismos codecs. Cada archivo de vdeo funciona como un contenedor de mltiples archivos que contienen el vdeo, audio e informacin de control en algunos casos. La opcin ms popular y que ms aceptacin tiene es el formato MP4, y ms concretamente un contenedor de vdeo MP4, el estndar ISO/IEC 14496-14:2003, que utiliza el cdec de vdeo H.264 y el cdec AAC para el audio. Ambos cdecs, el H.264 y AAC se ofrecen adems en mltiples niveles de perfil, que se utilizan para conseguir distintos grados de calidad y compresin. Para poder servir vdeos en la mayor cantidad posible de dispositivos y navegadores nuestra recomendacin es utilizar el perfil de lnea de base de vdeo H.264 y el perfil AAC de baja complejidad. Tambin existe el formato Ogg que es un contenedor de vdeo mantenido por la fundacin Xiph. Los archivos MP4 codificados con este perfil estn soportados en las ltimas versiones de Internet Explorer, Safari, iOS y Android. Si conseguimos que nuestros vdeos estn disponibles tanto en formato MP4 como Ogg, tendremos la opcin de llegar a la mayora de los usuarios que emplean dispositivos y navegadores modernos.

<video controls poster='poster320.jpg' width='320' height='180'> <source src='videos/BigBuck.mp4' /> <source src='videos/BigBuck.ogg' /> </video>

Cuando se abre este cdigo HTML en Internet Explorer o Safari, ambos utilizan el primer archivo de origen ya que soportan el formato MP4. Cuando se abre en Chrome, Firefox u Opera, dado que no soportan MP4 el archivo que se utiliza como origen es el segundo. El navegador va comprobando los distintos archivos fuente por el mismo orden en que se enumeran dentro del
1

Cdec es la abreviatura de codificador-decodificador. Los cdecs pueden codificar el flujo o la seal (a menudo para la transmisin, el almacenaje o el cifrado) y recuperarlo o descifrarlo del mismo modo para la reproduccin o la manipulacin en un formato ms apropiado para estas operaciones. Los cdecs son usados a menudo en videoconferencias y emisiones de medios de comunicacin.

elemento vdeo, hasta encontrar el primero compatible, que es el que emplear para su reproduccin. Para ayudar a los navegadores a detectar los archivos compatibles y evitarle al usuario la espera mientras descarga archivos no soportados, podemos emplear el atributo type del elemento source. El valor del atributo type describe el formato del archivo y los cdecs de vdeo y audio que utiliza.

<source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>

Con esto le decimos al navegador que el archivo BigBuck.mp4 est creado en formato MP4, el vdeo est codificado como H.264 utilizando el perfil de lnea de base y el audio va codificado como AAC con el perfil de baja complejidad. Ahora se aade el siguiente cdigo en la lnea source del formato Ogg:

<source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora,vorbis"'/>

Aqu le estamos indicando al navegador que el archivo BigBuck.ogg se ha guardado en formato Ogg, que el video est codificado utilizando el cdec Theora y el audio con el cdec Vorbis.

Navegadores antiguos Tenemos que tener preparada una alternativa para cuando carguemos esta pgina en un navegador antiguo que no soporte el elemento video en absoluto, entonces, agregamos el elemento <h1> con un enlace a BigBuck.mp4 despus del segundo elemento source;

<video controls poster='poster320.jpg' width='320' height='180'> <source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora, vorbis"'> <h1><a href="videos/BigBuck.mp4">Descarga el video</a></h1> </video>

En un navegador antiguo incompatible con HTML5, simplemente se ver un enlace que dice Descarga el vdeo y el usuario deber pulsar sobre l para descargarlo manualmente y reproducirlo utilizando el reproductor de vdeo por defecto de su sistema.

2. Tag Audio
La etiqueta para reproducir audio es muy sencilla

<audio src="archivo.mp3"> </audio>

Los atributos: Autoplay Loop Funcionan en esta etiqueta exactamente igual que en la etiqueta <video>:

Reproduce el audio sin intervencin del usuario.

<audio src="archivo.mp3" autoplay> </audio>

Reproduce el audio sin intervencin del usuario y cclicamente.

<audio src="archivo.mp3" autoplay loop> </audio>

Controles Si no queremos provocar un suicidio masivo en la red con nuestros bucles de audio auto reproducidos sin posibilidad de pausa, siempre podemos ofrecerle al usuario que navega por nuestro sitio Web de unos controles bsicos para el elemento audio: - Controls: Hace que el navegador nos provea de una interfaz con controles para la reproduccin y el control del volumen de forma nativa.

<audio src="archivo.mp3" controls> </audio>

Los controles del navegador pueden ser suplantados por nuestros propios controles usando JavaScript a travs de una API que nos proporciona mtodos para controlar todos los aspectos de la reproduccin del archivo de audio:

<audio id="player" src="archivo.mp3"> </audio> <div> <button onclick="document.getElementById('player').play();">Reproducir</button> <button onclick="document.getElementById('player').pause();">Pausa</button> <button onclick="document.getElementById('player').volume += 0.1;">Subir Volumen</button> <button onclick="document.getElementById('player').volume -= 0.1;">Bajar Volumen</button> </div>

preload: carga nuestro archivo de audio en segundo plano. Este atributo puede tener 3 valores: - None: evitar la precarga - Auto: cargar el audio - Metadata: cargar metadatos2 asociados con el archivo de audio.

Metadatos: Datos que cargan otros datos. Concepto analogo al uso de indices. Ej: Clasificadores de canciones: contienen metadatos sobre la canciones, bien en MP3 o en CD de audio, en un formato llamado ID3. Por ejemplo: iTunes

<audio src="archivo.mp3" preload="none"> </audio>

Si solo tienes un archivo de audio en tu pgina, seguramente quieras usar preload="auto" Especificar ms de un formato de archivo a la vez Aunque el formato MP3 est ampliamente extendido desde hace muchos aos, no es un formato abierto y est ligado a patentes. Las tecnologas que decodifican archivos MP3 deben pagar una tasa por la patente. Eso est muy bien para corporaciones como Apple, Microsoft o Google, pero no lo est para los grupos de cdigo abierto y software libre o las empresas pequeas. Safari, IE y Chrome puede reproducir archivos MP3 sin problemas, sin embargo ese no es el caso de Firefox y de Opera (aunque Opera puede a travs de ffmpeg). Este problema se resuelve, con formatos abiertos que no requieren patente para ser utilizados como Vorbis. Firefox, Opera y Chrome lo soportan de forma nativa, IE y Safari no. Adems, existe una forma de definir ms de un archivo de audio en diferentes formatos utilizando nicamente una etiqueta audio para ello, y esto se logra utilizando la etiqueta source:

<audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> </audio>

Y los que usamos IE 8 o inferior? Como bien he apuntado antes, cualquier cosa que haya entre la apertura y cierre de las etiquetas audio ser tenido en cuenta solo por navegadores que no soporten an la nueva especificacin por lo que podemos jugar con esto ltimo para seguir utilizando a nuestro gran amigo Flash para estos menesteres:

<audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3"> <param name="movie" value="player.swf?soundFile=archivo.mp3" /> </object> </audio>

Podemos ir incluso ms all y ofrecer un link directo para aquellos navegadores que no soporten ni la nueva especificacin ni flash utilizando la etiqueta object:

<pre class="prettyprint lang-html"><code><audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3"> <param name="movie" value="player.swf?soundFile=archivo.mp3" /> <a href="archivo.mp3">Descarga el archivo de audio</a> </object> </audio>

10

3. Formularios Web
Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input. Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida ms fcil a los desarrolladores de sitios Web. Algo muy importante a tener en cuenta es que si bien estos elementos todava no son soportados por todos los navegadores modernos, el uso de los mismos no afectar de ningn modo en los navegadores que no los soporten, actuarn simplemente como si fuesen del tipo text. A continuacin los distintos valores: (los mismos solo se vern en las ltimas versiones de Chrome, Firefox, Safari, Opera o IE):

Bsqueda (search)

<input type="search" name="busqueda">

Al ingresar texto en el campo, el navegador muestra una cruz a la derecha para borrar todo lo que hemos escrito.

Telfono (tel):

<input type="tel" name="telfono">

A la hora de completar un input de tipo tel, un smartphone como el iPhone convierte su teclado a nmeros de telfono.

11

Direccin url (url):

<input type="url" name="url">

En este campo, el teclado del iPhone es qwerty pero en modo url, ya que ofrece teclas fundamentales para escribir una direccin Web como son el punto, la barra / o la tecla .com.

12

Correo electrnico (email):

<input type="email" name="correo">

Esta vez, el teclado del smartphone es qwerty pero tambin tenemos la tecla @.

Fecha y hora (datetime):

<input type="datetime" name="fechahora">

Si ests viendo esta pgina con la ltima versin de Opera, al cliquear en el campo vers un calendario muy completo que el navegador dispone de forma totalmente nativa.

13

Fecha (date):

<input type="date" name="fecha">

Si estamos usando Opera, el calendario es el mismo que el de la imagen anterior.

Mes (month):

<input type="month" name="mes">

El calendario aqu permite seleccionar el nmero de mes.

14

Semana (week):

<input type="week" name="semana">

El calendario que nos muestra Opera para el campo de semana, nos permite elegir el nmero de semana del ao.

Hora (time):

<input type="time" name="hora">

Aqu el input est con el formato de hora, con los dos puntos : correspondientes y las flechas para subir o bajar el horario.

15

Nmero (number):

<input type="number" name="num" min="0" max="50">

Para este input tenemos los atributos min y max para establecer el mximo y el mnimo que acepta el campo. En un smartphone vemos el teclado numrico:

16

Rango (range):

<input type="range" name="rango" min="0" max="50">

El input de tipo range se presenta como un control para arrastrar con el mouse (o con el dedo en un mvil con pantalla tctil). Este campo tambin acepta los atributos min y max.

Color (color):

<input type="color" name="color">

Si ests viendo este campo con la ltima versin de Opera te vas a sorprender, porque el navegador presenta de forma nativa un selector de color otra funcionalidad que comnmente tendramos que hacer con javascript.

Pero algo que sorprende an ms, es que al cliquear en otros de la ventana anterior, Opera muestra una ventana con un selector de color mucho ms avanzado como el de la siguiente captura de pantalla:

17

4. Quin utiliza HTML5 hoy en da?

Es una pregunta difcil de responder porque, no existe una definicin nica para "HTML5". Existen numerosas demos de HTML5 que no se podran poner en entornos en produccin debido al distinto grado de soporte que ofrecen los navegadores. Si decides incorporar funciones de estilo de CSS3, hay muchos sitios Web personales y de empresas que utilizan los elementos ms vistosos, como borderradius o las funciones de transformacin. En estos casos, los diseadores pueden utilizar las funcionalidades y aadir alternativas adicionales para asegurarse de que la restitucin de estas pginas en navegadores no compatibles no es demasiado diferente de cmo se ven en los navegadores ms modernos. Un rea donde el uso de las funcionalidades de HTML5 est siendo muy activo es entre los dispositivos mviles y smartphones. En este mundo podemos encontrar aplicaciones Web que aprovechan las ventajas de los nuevos tags de Video o Audio, puesto que ciertos dispositivos como Windows Phone o iPhone soportan HTML5 pero no soportan complementos como Flash o Silverlight. Todos los navegadores Web de mayor difusin apuestan por HTML5 en sus ltimas versiones.

18

5. Nuevas capacidades de Javascript

Existen otra serie de tecnologas de desarrollo Web vinculadas con la especificacin HTML5 o con su sintaxis. Estas tcnicas nos van a permitir llevar a cabo actividades desde el navegador Web y dispositivos mviles compatibles que no eran posibles con las versiones anteriores de HTML. Las APIs (Application Programming Interfaces o "interfaces de programacin") son una forma de crear aplicaciones utilizando componentes preconfigurados cuyo uso no se restringe a la Web, ni siquiera a los lenguajes de scripting. Sitios Web como Twitter o YouTube entre otros, ofrecen APIs al pblico de manera que los diseadores y desarrolladores pueden con ellas integrar algunas de sus funcionalidades dentro de sus propios sitios Web (y tambin sirven para otros fines, como por ejemplo para crear aplicaciones para telfonos mviles o aplicaciones personalizadas para equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos mecanismos y simplificar tareas de programacin. Las APIs son un aspecto muy importante dentro del entorno de HTML5 y hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras.

La API de Geolocalizacin en accin Geolocation es una API que nos permite conocer el punto geogrfico desde el cual se conecta el navegador a Internet. Esta informacin se emplea para enviar al usuario datos de inters para l, ajustados a su ubicacin. Como ejemplo de su utilidad estn las pginas Web de bsqueda asociadas a un mapa en el cual nos indican dnde estn situados ciertos comercios o restaurantes a una distancia concreta a pie desde el punto donde estamos en ese momento. En vez de tener que introducir a mano la direccin, un navegador habilitado para geolocalizacin nos puede devolver estos resultados de manera automtica y transparente. Geolocation en estos momentos est disponible en algunos navegadores modernos. En los ltimos aos los telfonos mviles han ido incorporando la posibilidad de conectar datos geogrficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias.

19

Cuando la funcin de geolocalizacin est soportada por un gran nmero de navegadores Web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos mviles que soporten la API Geolocation de HTML5.

Web Workers Adems de las nuevas etiquetas que trae HTML 5, trae nuevas funcionalidades que afectan al funcionamiento de los javascript. En este caso, los Web Workers es una nueva funcionalidad que permite ejecutar scripts en paralelo (background) evitando que se bloquee la interfaz de usuario. Su uso es sencillo, se crea un Workers que estar en un archivo javascript independiente, se le indica que hacer cuando se recibe un mensaje, y solo queda esperar a que el javascript y el workers se comuniquen. El script que instancia el workers sera algo como este:

// Crea el Web Worker var worker = new Worker("worker.js"); // Enva un mensaje al worker worker.postMessage(0); // Recibe los mensajes del Worker worker.onmessage = function (evt) { // evt.data es el valor devuelto por el Worker alert(evt.data); } // Trata los errores worker.onerror = function (evt) { alert(evt.data); }

El archivo workers.js sera el siguiente.

// Ejemplo de Worker onmessage = function (evt) { // evt.data es el valor enviado desde el javascript for (var i=evt.data, il=1000001; i<il; i++) { // Enva datos continuamente postMessage(i); } }

20

Esta tcnica puede ser muy til para evitar que se bloquee la Web mientras que se est ejecutando cdigo javascript. El problema que tiene, es que an muchos navegadores no lo interpretan.

Almacenamiento Web El Almacenamiento Web (Web Storage) es un ejemplo de uso de modelos preexistentes de tecnologas Web bajo nuevas modalidades, ms potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios Web puedan guardar informacin en cantidades muy reducidas en los equipos de los usuarios, datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta manera, por ejemplo, ciertos sitios Web recuerdan la informacin del usuario desde el ltimo acceso. Web Storage actualiza este modelo para que las aplicaciones Web puedan almacenar una cantidad de datos muy superior y que su acceso y utilizacin sea mucho ms fcil y eficiente. HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposicin del navegador en todo momento, aunque cerremos el programa o se reinicie el sistema.

Los datos guardados bajo la modalidad sessionStorage se pierden al cerrar el navegador. Un ejemplo del uso de Web Storage puede ser la forma en que se almacenan datos en algunos telfonos mviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesin de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexin a la red.

El elemento Canvas El elemento canvas es algo distinto de los dems elementos de HTML5. Es ms complejo en el sentido de que necesita de JavaScript para funcionar. El primer paso que daremos ser aadir (o definir) un elemento canvas en nuestra pgina HTML.

21

Despus tenemos que guardar una referencia al contexto de dibujo para ese elemento en forma de variable de JavaScript. Ms tarde utilizaremos el propio contexto para escribir nuestras instrucciones de dibujo.

<body onload="setup();"> <canvas id="lessonCanvas" width="300"height="300" style="margin:100px;"></canvas> </body> El cdigo JavaScript tiene este aspecto: <script type="text/javascript"> function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); <!--drawing instructions here --> } } </script>

Esta plantilla define un elemento <canvas> HTML , un cuadrado de 300 pixels de lado, que delimita la superficie de dibujo. Cuando se abre el cuerpo de la pgina, se llama a la funcin JavaScript setup(). Esta funcin encuentra el elemento canvas por su nombre y declara una variable con la referencia al contexto de dibujo del canvas. Una vez que tenemos disponible esa referencia, podemos dibujar libremente sobre esa superficie. Ventajas del elemento Canvas El elemento canvas nos permite crear grficos que, de no disponer de l, tendramos que generar con otros programas como Photoshop, Illustrator, o si se trata de animaciones, con Flash o Silverlight. El elemento canvas ha tenido un soporte razonablemente bueno entre los navegadores a lo largo del tiempo y podemos suponer que acabar sustituyendo a la amplia variedad de soluciones que conocemos con el nombre de "contenidos multimedia avanzados" y tambin se utilizar para juegos, animaciones, diagramas, grficos, visualizacin de datos y para crear interfaces vectoriales de usuario, entre otros muchos usos posibles.

22

Una de las grandes ventajas del Canvas en todos estos casos de uso es que no necesita que instalemos un complemento en el navegador.

Trazos de dibujo ("paths") Los trazos y las formas bsicas son los componentes bsicos de la creacin de dibujos en el elemento canvas. Dibujo de rectngulos El rectngulo es el trazo ms sencillo que podemos dibujar. La funcin fillRect(x,y,width,height) que podemos utilizar dentro del objeto context , genera una figura rectangular en la posicin y con el tamao indicados por los parmetros, y con un relleno basado en el valor que tenga la variable fillStyle en ese momento. Una funcin estrechamente vinculada con sta es strokeRect, que genera la misma figura pero en lugar de rellenarla, dibuja el contorno basndose en el estilo definido en ese momento para la variable strokeStyle. La funcin clearRect emplea los mismos parmetros pero elimina ("limpia") todos los pixels del canvas que quedan dentro del rea de un rectngulo definido.

function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); } }

ejemplos/canvas/ rectangulo/dibujo-rectangulo1.html En el cdigo se ve el elemento Canvas ya definido y una funcin JavaScript llamada setup que se ejecuta al abrir la pgina. En la funcin setup se guarda una referencia al contexto 2D del Canvas en una variable que es la que vamos a utilizar para dibujar En la sentencia if, despus de la declaracin de la variable ctx, aade este cdigo para dibujar un rectngulo que ocupe todo el canvas.

23

Las coordenadas X e Y tienen un valor cero, es decir, el rectngulo se empieza a dibujar a partir de la esquina superior izquierda del canvas. Puesto que su anchura y altura valen 300 pixels, esto quiere decir que el rectngulo ocupa todo el espacio del canvas. Ahora, agregamos las siguientes lneas, debajo de las lneas que acabamos de escribir:

ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.strokeRect(0.5, 0.5, 100, 100);

ejemplo/canvas/ rectangulo/dibujo-rectangulo2.html Estas lneas aaden: - Cambian el color del trazo a rojo - Agregan un segundo recuadro ms pequeo En un navegador se vera as:

Continuemos, ahora, vamos a cambiar el color de relleno de negro a verde y para ello escribimos la siguiente sentencia:

ctx.fillRect(20, 20, 100, 100);

/ejemplos/canvas/ rectangulo/dibujar-rectangulo3.html

En un navegador se ve as:

24

Dibujamos un segundo rectangulo con este nuevo color:

ctx.fillStyle = 'rgb(0, 255, 0)'; ctx.fillRect(50, 50, 100, 100);

/ejemplos/canvas/ rectangulo/dibujo-rectangulo4.html As se vera en el navegador:

La funcin fillRect sirve para crear un rectngulo slido (relleno), en vez de un recuadro. Ahora, borramos unos pixels de una zona del canvas:

ctx.clearRect(80, 80, 30, 30);

/ejemplos/canvas/rectangulo/dibujo-rectangulo.html

25

La funcin clearRect convierte en transparentes todos los pixels que quedan dentro del rea delimitada por el rectngulo, eliminando en parte los cambios de color que hemos hecho antes con strokeRect y fillRect. En el navegador, se vera as:

Dibujar figuras con curvas El elemento canvas nos proporciona dos funciones de dibujo con las que podemos trazar curvas: quadraticCurveTo(pcx, pcy, x, y) y bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Ambas funciones utilizan puntos de control para definir la curva del trazo cuando dibuja desde un punto al siguiente.

26

Vamos a dibujar una flor, para lo cual partimos del mismo cdigo que utilizamos para dibujar rectngulos:

function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } }

Vamos a dibujar un rectangulo que encuadra el canvas, agregando la sentencia:

ctx.strokeRect(0, 0, 300, 300);

/ejemplo/canvas/curva/dibujo-curvas1.html En un navegador se vera as:

Agregamos las lneas siguientes debajo de la lnea del paso anterior, para dibujar el tallo de la flor:

ctx.fillStyle = 'rgb(0,173,104)'; ctx.moveTo(145, 150); ctx.quadraticCurveTo(120, 200, 170, 280); ctx.lineTo(190, 280); ctx.quadraticCurveTo(125, 190, 155, 150); ctx.fill();

27

/ejemplo/canvas/curva/dibujo-curvas2.html La primera lnea de cdigo cambia el relleno a color verde. Las siguientes lneas definen los puntos iniciales, curvas y lneas de la forma del tallo. En el navegador, se ver as:

Ahora vamos a crear un ptalo de la flor utilizando la funcin bezierCurveTo que utiliza dos puntos de control, a diferencia del nico punto de control que necesita la funcin quadraticCurveTo del paso anterior. Adems tenemos que dibujar una serie de guas utilizando los mismos puntos, para ver mejor cmo opera la funcin bezierCurveTo. Puesto que vamos a utilizar una serie de puntos varias veces, lo mejor ser guardar los valores de las coordenadas en variables que podremos reutilizar.

var var var var

pt1 = { x: 155, y: 145 }; pt2 = { x: 93, y: 106 }; cp1 = { x: 111, y: 154 }; cp2 = { x: 66, y: 131 };

28

Este cdigo cambia los colores del trazo y el relleno, y nos dibuja el primer ptalo de la flor:

ctx.fillStyle = 'rgb(115,206,226)'; ctx.strokeStyle = 'rgb(0,111,174)'; ctx.beginPath(); ctx.moveTo(pt1.x, pt1.y); ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, pt2.x, pt2.y); ctx.bezierCurveTo(89, 65, 159, 118, 155, 145); ctx.fill(); ctx.stroke();

/ejemplo/canvas/curva/dibujo-curvas3.html Las dos primeras lneas del cdigo cambian el trazo a azul oscuro y el relleno a azul claro. Las siguientes cuatro lneas generan un trazo nuevo mediante la funcin bezierCurveTo para conseguir curvas suaves. Finalmente, rellena el trazo y dibuja el borde. En un navegador, se vera as:

Vuelve al editor de textos y aade las siguientes lneas de cdigo debajo de las que has escrito en el paso anterior. Estas nuevas lneas cambian el color del borde y del relleno y dibujan el centro de la flor que sirve de centro para todo el conjunto:

29

ctx.fillStyle = 'rgb(243,237,99)'; ctx.strokeStyle = 'rgb(253,183,58)'; ctx.beginPath(); ctx.arc(155, 145, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();

/ejemplo/canvas/curva/dibujo-curva4.html Para hacernos una idea de cmo trabaja la funcin bezierCurveTo con los puntos de control para definir una curva, vamos a aadir una gua utilizando los mismos puntos de la primera curva del ptalo de la flor. Creamos las guas aadiendo las siguientes lneas de cdigo debajo de las del paso anterior:

ctx.strokeStyle = 'rgb(255,0,0)'; ctx.beginPath(); ctx.arc(pt1.x, pt1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp1.x, cp1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp2.x, cp2.y, 2, 0, Math.PI * 2, false); ctx.arc(pt2.x, pt2.y, 2, 0, Math.PI * 2, false); ctx.stroke();

/ejemplo/canvas/curva/dibujo-curvas5.html La primera lnea cambia el trazo a rojo brillante, que veremos por fuera del dibujo del ptalo. Las seis lneas siguientes generan una lnea poligonal con circulitos pequeos en cada punto utilizado por la primera curva de Bezier. El resultado final seria:

30

Uso de textos dentro del Canvas Adems de lneas y formas, en un canvas podemos dibujar textos. Los tipos de letra, tamaos y grosores se establecen de manera parecida a como se hace con CSS y siguen las mismas reglas con respecto a los tipos de letras, tamaos y grosores disponibles. A diferencia de CSS, no existe aqu el concepto de mrgenes internos o externos. En este caso el texto se sita en la posicin definida por las coordenadas X e Y, que expresan la distancia en pxeles horizontal y vertical, con respecto al origen (la esquina superior izquierda del canvas). Vamos a crear una tarjeta de identificacin: Busca la segunda funcin strokeRect y aade este cdigo para dibujar el texto de cabecera:

ctx.fillText(HOLA, MI NOMBRE ES ', 12, 40);

Esta lnea de cdigo dibuja un texto, que se indica en el primer parmetro, empezando en las coordenadas indicadas por los parmetros segundo (valor x) y tercero (valor y). Utiliza la fuente por defecto y el color del texto ser blanco, heredado del valor de fillStyle que se ha declarado anteriormente en el cdigo. El resultado, debera quedar as:

/ejemplo/canvas/texto/agrego-texto2.html Para aumentar el tamao y grosor de la letra, insertamos estas lneas de cdigo antes de la lnea del paso anterior:

ctx.font = "bold 1.8em sans-serif"; ctx.fillText('HOLA MI NOMBRE ES', 12, 40);

/ejemplo/canvas/texto/agrego-texto3.html

31

Puedes ver que, igual que ocurre con CSS, puedes definir el tamao de la fuente utilizando valores relativos. En este caso el texto de cabecera ser 1,8 veces el tamao de la fuente del elemento canvas, tamao que viene heredado del objeto <body> de la pgina HTML salvo que indiquemos expresamente otra cosa. En un navegador, se vera as:

Para aadir tu nombre a la tarjeta, inserta otra llamada a fillText. Para conseguir que el texto destaque y parezca escrito a mano, vamos a utilizar una fuente distinta, con un tamao mayor:

ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.font = 'bold 84px Comic Sans MS'; ctx.textAlign = 'center'; ctx.fillText('Betina', 150, 150);

/ejemplo/canvas/texto/agrego-texto4.html La primera lnea cambia el color del texto a negro. La segunda, fija la fuente con un valor absoluto de 84 pixels de altura y el tipo de letra ser Comic Sans MS, que es un tipo de letra que imita la escritura manual. La siguiente lnea establece el alineamiento horizontal del texto con respecto a la coordenada de posicin, y le aplica el valor center. Otras posibilidades de alineamiento horizontal son right y el valor por defecto (left). As se vera en un navegador:.

32

Adems, otras de las nuevas funcionalidades de Javascript incluyen:

Web Sockets
La especificacin WebSocket define un API que establece conexiones "socket" entre un navegador Web y un servidor. Dicho con otras palabras: existe una conexin persistente entre el cliente y el servidor, y ambas partes pueden empezar a enviar datos en cualquier momento.

Uso actual de WebSockets WebSocket sigue siendo una tecnologa joven y no est implementada completamente en todos los navegadores. Para estos casos, se puede utilizar WebSocket con bibliotecas como socket.io, que viene con una implementacin cliente-servidor del protocolo e incluye alternativas Tambin hay soluciones comerciales como PusherApp, que se puede integrar fcilmente en cualquier entorno Web con un API HTTP que enve mensajes WebSocket a los clientes. Casos prcticos WebSocket se utiliza siempre que sea necesario contar con una conexin casi a tiempo real y de latencia baja entre el cliente y el servidor. Es necesario tener en cuenta que esto podra significar tener que replantearte cmo se ha desarrollado las aplicaciones de servidor, adoptando un nuevo enfoque en tecnologas. Estos son algunos ejemplos de casos prcticos: Juegos online multijugadores Aplicaciones de chat Rotativos de informacin deportiva Actualizaciones en tiempo real de las actividades de tus amigos

33

Arrastrar y soltar
Los llamados eventos de arrastrar y soltar, comnmente conocidos por su trmino en ingls Drag and Drop, son una de las funcionalidades principales y ms comunes de las interfaces grficas actuales. HTML5, cuenta con las caractersticas necesarias para poder crear y manejar esta clase de eventos sin necesidad de recurrir a algn complemento.

Drag and Drop nativo en los navegadores modernos La tarea de arrastrar y soltar en un navegador, esta compuesta por dos partes bsicas, los atributos HTML5 y la funcin JavaScript. No se usar para hacer todo el proceso como antes, pero si para llevar acabo parte de la funcionalidad en el manejo de eventos. Veamos el ejemplo: ejemplos/drag-and-drop/drag-and-drop-html5.html Explicacin del proceso, en 4 pasos: Paso 1: crear los elementos La primera parte de nuestro proceso consiste en crear el o los elementos que sern arrastrados, para ello debemos darle esta propiedad, es por eso que debemos agregar el atributo draggable con el valor true, dentro de la etiqueta que corresponde al elemento que queremos utilizar. Este atributo le indicar al navegador que este elemento se puede mover sin alguna objecin. <p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)">

Paso 2: hacer draggable el elemento Como segundo paso debemos llamar a la funcin drag de Javascript. Existen varios formas de hacerlo, una manera sencilla es agregarle el atributo ondragstart en cuyo valor mandaremos llamar a la funcin. Por lo tanto, si queremos hacer que una imagen se pueda arrastrar debemos escribir el siguiente cdigo:

<p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)"> <img id="img" src=html5-mobile.jpg /><br/> <span id="span">Arrastrame!</span> </p>

34

Mientras que el Javascript lucir de sta manera:

function drag(prrafo, evento) { evento.dataTransfer.setData('Text', parrafo.id); }

Paso 3: dar formato a los elementos Despus de crear los elementos que queremos arrastrar, pasamos a darle forma al contenedor donde los soltaremos; para ello podemos elegir un elemento div el cual deber llevar los atributos ondrop, ondragenter y ondragover. El atributo ondrop permitir llamar la funcin Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento por defecto del navegador es cancelar soltados, devolver false en los atributos dragenter y dragover permitir el movimiento.

<div id="contenedor" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">Contenendor</div>

Por su parte en la funcin &quot;drop&quot; de Javascript debemos llamar a preventDefault(), para indicar que el soltado es permitido en esa zona.

function drop(contenedor, evento) { var id = evento.dataTransfer.getData('Text'); contenedor.appendChild(document.getElementById(id)); evento.preventDefault(); }

Vale aclarar que estos eventos nos permiten enviar informacin junto con el elemento que estamos arrastrado, es por ello que se puede utilizar para importar datos a otro elemento.

35

Paso 4: drag and drop Ahora simplemente basta con que agreguemos un poco de estilo a los elementos para darle una mejor presentacin a nuestra pgina. Agregar un color de fondo diferente para el cuerpo y el contenedor, al igual que un borde, ayudar al cliente a distinguir la zona receptora. El producto final, este drag and drop con html5, ser un prrafo compuesto por una imagen y un texto el cual podemos seleccionar, arrastrar y soltar en un elemento div conocido como contenedor, donde quedar localizado una vez que soltemos el botn del mouse. Podemos crear todos los elementos arrastrables que queramos, el punto es hacer un contenedor ms grande para no verlos encimados.

6. Compatibilidad HTML5 en mviles y tablets

HTML5 es una excelente opcin para los desarrolladores que quieren crear un sitio compatible con los dispositivos mviles mas modernos y comenzar a ofrecer nuevos e innovadores servicios haciendo uso de todas las nuevas caractersticas del HTML5. Sin embargo este lenguaje actualmente esta apenas dando sus primeros pasos y aun tiene muchos problemas de implementacin y compatibilidad en las diferentes plataformas mviles. Para crear un sitio Web optimizado para mviles es indispensable aplicar una serie de trucos y buenas practicas para garantizar resultados consistentes. Afortunadamente un grupo de desarrolladores profesionales conscientes de este problema crearon un proyecto que nos ofrece instantneamente todo lo necesario para crear un sitio mvil HTML5 de calidad profesional.

Mobile Boilerplate Este proyecto es un derivado del legendario HTML5 Boilerplate. Usando los mismos principios, el Mobile Boilerplate es una versin optimizada para smarphones y otros equipos mviles de alta gama. Incluye una gran cantidad de trucos y tcnicas para garantizar la compatibilidad , consistencia y rendimiento de tu sitio Web, entre sus principales caractersticas estn: Creado usando buenas practicas de desarrollo tanto en la estructura del cdigo como en el CSS Optimizado para funcionar en los principales smartphones y equipos de alta gama ( Android, iOS, Symbian, Blackberry)

36

Ajustes del rea de visin o Viewport para evitar problemas de escala involuntaria del sitio Media queries que permiten adaptar el sitio segn tamao y resolucin del equipo Favicons de mltiples resoluciones.

y muchsimos trucos tcnicos mas, que te darn un solido punto de partida para cualquier proyecto mvil. Importante aclarar que esta plantilla esta planeada para dar la mejor experiencia en smartphones, celulares modernos y equipos de alta gama, para darle soporte a equipos de baja gama y mviles bsicos, es mejor aplicar otras tcnicas.

Como instalar Mobile Boilerplate La instalacin toma solo unos minutos, lo nico que hay que hacer es bajar el archivo disponible en el sitio oficial de Una vez descargado simplemente se descomprime el fichero y tendrs un grupo de archivos algo similar a este:

37

Puedes copiar estos archivos directamente a la base de tu proyecto Web y comenzar a trabajar en ellos de inmediato. El archivo index.html ya viene listo para ser la base de tu proyecto, brelo y comienza a editarlo a partir el tag <body>. En la carpeta CSS encontraras un archivo llamado style.css basado en los principios del normalize.css (normalizar y standarizar los elementos grficos de todos los navegadores) pero adaptado especficamente para los navegadores de dispositivos mviles. Por ultimo en la carpeta img, se encuentran 3 subcarpetas con los nombres h, l , m cada una de ellas alberga favicons y pantallas de inicio para equipos de diferentes resoluciones (high, low, medium) puedes editar esas imgenes con tus logos e iconos para desplegarlas en las barras de navegacin y pantallas de inicio de equipos iOS y Android. Bonus: puedes usar Mobile Boilerplate como base para proyectos phoneGap Para usar Mobile Boilerplate simplemente debes agregar el script de phoneGap al index.html y podrs usar esta plantilla como base de proyectos robustos en phonegap que se desplegaran correctamente en mltiples pantallas y plataformas.

38