Certificado

HTML 5 para
mviles.

Manual del participante

2014

M anual del participante

ndice

ndice .................................................................................................. 3
Formacin de la comunidad de aprendizaje . ........................................ 4
Objetivo del curso . .............................................................................. 5
O bjetivo ...................................................................................................... 5
Introduccin . .............................................................................................. 5
Unidad 1 Introduccin . ........................................................................ 7
H istoria de H TM L y los estndares w eb ....................................................... 7
La W 3C ........................................................................................................ 9
El nuevo estndar H TM L5 . .......................................................................... 10
Restricciones y advertencias sobre H TM L5 ................................................. 11
Unidad 2 Sintaxis ................................................................................ 12
Elem entos nuevos en H TM L 5 ..................................................................... 12
Elem entos desechados H TM L 4 . .................................................................. 12
Unidad 3 Estructura de HTML 5 ........................................................... 13
Estructura . ................................................................................................. 13
Validacin .................................................................................................. 16
Unidad 4 Funcionalidades ................................................................... 18
W eb Form s . ................................................................................................ 18
Audio y video . ............................................................................................ 19
Canvas . ...................................................................................................... 20
Contenidos sem nticos ............................................................................... 23
Geolocalizacin ......................................................................................... 24
Unidad 5 Primeras Aplicaciones .......................................................... 26
D esarrollo del contenido ............................................................................ 26
Javascript ................................................................................................... 26
CSS . ........................................................................................................... 27
D espliegue en diversos navegadores .......................................................... 27
Conclusiones finales . .......................................................................... 28
Fuentes de consulta . ........................................................................... 30
Cibergrafa ................................................................................................. 30

M anual del participante

Formacin de la comunidad de aprendizaje

La formacin de la comunidad de aprendizaje es un proceso que debe llevarse a cabo para
iniciar cada uno de nuestros cursos.

Su finalidad es crear un clima propicio para la celebracin de la actividad instruccional, es
decir, generar un entendimiento previo entre el instructor y los participantes sobre los
temas que se desarrollarn durante sta, as como las estrategias educativas que se
llevarn a cabo para lograr un mejor aprendizaje.

Un adecuado manejo de la comunidad de aprendizaje es un elemento fundamental para
garantizar la satisfaccin de uno de los clientes involucrados en la imparticin de los
cursos: los participantes.


Presentacin del
Nombre, profesin, aos de experiencia como instructor,
Instructor:
experiencia en la imparticin del curso, o cursos similares
o relacionados.

Alineacin de
El instructor recabar las expectativas de los participantes
expectativas:
respecto al curso, con el fin de dejarles claro el objetivo del
mismo.
En caso de que alguna expectativa no coincida con los
temas que el curso contiene, el instructor dejar claro
cules de las expectativas expresadas no sern cubiertas
con el curso y porqu.
Las expectativas alineadas sern anotadas en hojas de
rotafolio para su revisin al trmino del curso.
Durante el desarrollo del curso el instructor deber cubrir
las expectativas alineadas.

Presentacin del

El instructor presentar a los participantes el objetivo del

objetivo del curso:
curso, aclarando dudas al respecto si las hubiese.


Reglas de oro:
El instructor promover el establecimiento de reglas por
parte de los participantes que se observarn a travs del
curso; por lo que puede proponer: tiempo de tolerancia
para iniciar las sesiones, respeto hacia los compaeros,
participacin de todos en tcnicas y ejercicios grupales,
etc.; se incluirn todos los puntos que los participantes
consideren pertinentes.
Se anotarn los acuerdos en hojas de rotafolio y se
colocarn en un espacio en el que sean visibles a lo largo
de todo el curso.

M anual del participante

Cum plim iento de
expectativas

Al finalizar el curso el instructor deber llevar a cabo una

revisin de las expectativas alineadas que se anotaron en
hojas de rotafolio al inicio del curso
Se revisar cada una de las expectativas alineadas
palomeando las que hayan sido cumplidas, y el instructor
explicar de qu manera se llev a cabo tal cumplimiento.

Objetivo del curso

O bjetivo




Al final del curso el asistente podr desarrollar y desplegar

contenidos en dispositivos mviles aprovechando las ventajas

de HTML 5.





Introduccin

El curso se enfoca en el desarrollo de aplicaciones para dispositivos mviles utilizando
estndares abiertos como los son la nueva especificacin HTML5, CSS3 y JavaScript.

HTML 5 es la base de la web 2.0 Geolocalizacin, video, audio, streaming, nuevos
componentes y etiquetas. Este curso sirve de introduccin para el participante en el
desarrollo de este tipo de aplicaciones, empezando por el aprendizaje de los componentes
HTML necesarios e incidiendo en las nuevas caractersticas. Si unimos las nuevas
caractersticas de CSS, adems de complejidad se puede dotar a nuestras aplicaciones de
un diseo impresionante.

M anual del participante

M anual del participante

Unidad 1 Introduccin

HTML, siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), hace
referencia al lenguaje de marcado para la elaboracin de pginas web. Es un estndar que
sirve de referencia para la elaboracin de pginas web en sus diferentes versiones, define
una estructura bsica y un cdigo (denominado cdigo HTML) para la definicin de
contenido de una pgina web, como texto, imgenes, etc. Es un estndar a cargo de la W3C,
organizacin dedicada a la estandarizacin de casi todas las tecnologas ligadas a la web,
sobre todo en lo referente a su escritura e interpretacin. Es el
lenguaje con el que se definen las pginas web.

El lenguaje HTML basa su filosofa de desarrollo en la
referenciacin. Para aadir un elemento externo a la pgina
(imagen, vdeo, script, etc.), este no se incrusta directamente
en el cdigo de la pgina, sino que se hace una referencia a la
ubicacin de dicho elemento mediante texto. De este modo, la
pgina web contiene slo texto mientras que recae en el
navegador web (interpretador del cdigo) la tarea de unir
todos los elementos y visualizar la pgina final. Al ser un
estndar, HTML busca ser un lenguaje que permita que
cualquier pgina web escrita en una determinada versin, pueda ser interpretada de la
misma forma (estndar) por cualquier navegador web actualizado.

Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido
diversas caractersticas, con el fin de hacerlo ms eficiente y facilitar el desarrollo de
pginas web compatibles con distintos navegadores y plataformas (PC de escritorio,
porttiles, telfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar
correctamente una nueva versin de HTML, los desarrolladores de navegadores web deben
incorporar estos cambios y el usuario debe ser capaz de usar la nueva versin del
navegador con los cambios incorporados. Usualmente los cambios son aplicados mediante
parches de actualizacin automtica (Firefox, Chrome) u ofreciendo una nueva versin del
navegador con todos los cambios incorporados, en un sitio web de descarga oficial
(Internet Explorer). Un navegador no actualizado no ser capaz de interpretar
correctamente una pgina web escrita en una versin de HTML superior a la que pueda
interpretar, lo que obliga muchas veces a los desarrolladores a aplicar tcnicas y cambios
que permitan corregir problemas de visualizacin e incluso de interpretacin de cdigo
HTML. As mismo, las pginas escritas en una versin anterior de HTML deberan ser
actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores
an mantienen la capacidad de interpretar pginas web de versiones HTML anteriores. Por
estas razones, an existen diferencias entre distintos navegadores y versiones al interpretar
una misma pgina web.

Historia de HTML y los estndares web

M anual del participante

En 1989 existan dos tcnicas que permitan vincular documentos electrnicos, por un lado
los hipervnculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas denominado
SGML.

Por entonces, Tim Berners-Lee, quien trabajaba en el
Centro Europeo de Investigaciones N ucleares
CERN da a conocer a la prensa que estaba trabajando
en un sistema que permitir acceder a ficheros en lnea
que funcionaba sobre redes de computadoras o
mquinas electrnicas basadas en el protocolo TCP/IP.
Inicialmente fue desarrollado para que se pueda
compartir fcilmente informacin entre cientficos de
distintas universidades e institutos de investigacin de todo el mundo.
Tim Berners-Lee en 1991 describe 22 elementos que incluyen el diseo inicial y
relativamente simple de HTML. Trece de estos elementos todava existen en HTML 4.

Berners-Lee consideraba a HTML una ampliacin de SGML, pero no fue formalmente
reconocida como tal hasta la publicacin a mediados de 1993, por la IETF, de una primera
proposicin para una especificacin de HTML: el boceto Hypertext Markup Language de
Berners-Lee y Dan Connolly, el cual inclua una Definicin de Tipo de Documento SGML
para definir la gramtica. El boceto expir luego de seis meses, pero fue notable por su
reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imgenes
sin cambio de lnea, que reflejaba la filosofa del IETF de basar estndares en prototipos
con xito. De la misma manera, el boceto competidor de Dave Raggett HTML+ (Hypertext
Markup Format) (Formato de Marcaje de Hipertexto), de finales de 1993, sugera
estandarizar caractersticas ya implementadas, como las tablas.

El primer documento formal con la descripcin de HTML se public en 1991 bajo el
nombre HTML Tags (Etiquetas HTML)

Los trabajos para crear un sucesor del HTML, denominado H TM L +, comenzaron a finales
de 1993. HTML+ se dise originalmente para ser un superconjunto del HTML que
permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera
especificacin formal de HTML+ se le dio, por lo tanto, el nmero de versin 2 para
distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron,
pero nunca se convirti en un estndar, a pesar de ser la base formalmente ms parecida al
aspecto compositivo de las especificaciones actuales.

El borrador del estndar H TM L 3.0 fue propuesto por el recin formado W3C en marzo de
1995. Con l se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para
crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos
matemticos complejos. Aunque se dise para ser compatible con HTML 2.0, era
demasiado complejo para ser implementado con la tecnologa de la poca, y cuando el

M anual del participante

borrador del estndar expir en septiembre de 1995, se abandon debido a la carencia de

apoyos de los fabricantes de navegadores web.

El H TM L 3.1 nunca lleg a ser propuesto oficialmente, y el estndar siguiente fue el HTML
3.2, que abandonaba la mayora de las nuevas caractersticas del HTML 3.0 y, a cambio,
adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape
y Mosaic. La posibilidad de trabajar con frmulas matemticas que se haba propuesto en
el HTML 3.0 pas a quedar integrada en un estndar distinto llamado MathML.

En 1997, H TM L 4.0 se public como una recomendacin del W3C. HTML 4.0 adopt
muchos elementos especficos desarrollados inicialmente para un navegador web concreto,
pero al mismo tiempo comenz a limpiar el HTML sealando algunos de ellos como
desaprobados o deprecated en ingls.

HTML 4.0 implementa caractersticas como XForms 1.0 que no
necesitan implementar motores de navegacin que eran
incompatibles con algunas pginas web HTML.

En 2004 la W3C reabri el debate de la evolucin del HTML, y se
dieron a conocer las bases para la versin H TM L5. No obstante, este trabajo fue
rechazado por los miembros del W3C y se dara preferencia al desarrollo del XML.

Apple, Mozilla y Opera anunciaron su inters en seguir trabajando en el proyecto bajo
el nom bre de W H ATW G,18 que se basa en la compatibilidad con tecnologas anteriores.

En 2006, el W3C se interes en el desarrollo de HTML5, y en 2007 se uni al grupo de
trabajo del WHATWG para unificar el proyecto.

La W3C
El Consorcio World Wide Web (W3C) es una comunidad internacional donde las
organizaciones Miembro, personal a tiempo completo y el pblico en general trabajan
conjuntamente para desarrollar estndares Web. Liderado por el inventor de la Web Tim
Berners-Lee y el Director Ejecutivo (CEO) Jeffrey Jaffe, la misin del W3C es guiar la Web
hacia su mximo potencial.

Q u hace el W 3C?

La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el
crecimiento de la Web a largo plazo. Los estndares del W3C definen las partes claves que
hacen que la World Wide Web funcione.
Dnde est el W 3C?

M anual del participante

El W3C no slo tiene una sede fsica. Existen tres instituciones que "albergan" al W3C: MIT
(en Cambridge, Massachusetts, EEUU), ERCIM (en Sophia-Antipolis, Francia) y la
Universidad de Keio (cerca de Tokio, Japn).

El equipo del W3C est distribuido por todo el mundo, pero muchas de estas personas se
concentran en Cambridge, Massachusetts (EEUU), Sophia-Antipolis (Francia) y Tokio
(Japn). Adems, el W3C est representado en otras 17 regiones del mundo a travs de
representantes que se basan en organizaciones. El W3C llama a estos puntos "Oficinas del
W3C."

Validador
http://validator.w3.org/
Tutoriales
http://www.w3schools.com/

Apartado W 3C CSS
http://www.w3.org/Style/CSS/

El nuevo estndar HTML5

La controversia recae en que ciertas compaas actan como si HTML5 fuera el estndar,
cuando la realidad es que ningn navegador lo soporta al 100% todava.
La revisin incluye:
Las etiquetas multimedia para audio y video con soporte a distinto cdec.
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Tu navegador no implementa el elemento <code>video</code>.
</video>

La etiqueta canvas para dibujar contenido en el navegador (2D y 3D) (Recomendado:
Cmo dibujar curvas cuadrticas en un Canvas de HTML5)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Las etiquetas datagrid, details, menu y command, que permiten manejar grandes
conjuntos de datos

10

M anual del participante

Formularios ms inteligentes que nos permitirn hacer cosas como validacin de
llenado mediante el uso de atributos requeridos, a travs de los nuevos tipos email,
number, url, datetime, etc. (Recomendado: Cmo usar campos de voz con HTML5)

<input type="text" name="nombre" required/>

APIs que permiten Arrastrar y Soltar objetos como imgenes, trabajar Off-Line,
utilizar Geoposicionamiento, Almacenamiento persistente con base de datos local,
Websockets y ms.

navigator.geolocation.getCurrentPosition(show_map)

Restricciones y advertencias sobre HTML5
La especificacin de HTML 5 no ha finalizado, an pueden sucederse cambios.
No todo funciona en todos los navegadores.
Las aplicaciones para iOS eran lentas e inestables. La apuesta de Facebook por HTML5 no
result tan exitosa como esperaban, al final se opt por desarrollar aplicaciones nativas
para iOS y Android y as depender menos de HTML5.

11

M anual del participante

Unidad 2 Sintaxis
Es una sintaxis mucho ms relajada que la impuesta por el XHTML y permite tanto
maysculas como minsculas como combinaciones de ambas en nombres de etiqueta y de
atributo.

Permite parametrizar los atributos sin comillas, siempre que el valor del atributo no
contenga espacios, " ' ` = < >.

Los siguientes ejemplos son igualmente vlidos:

<img src="nice.jpg" />
<img src="nice.jpg">
<img src="nice.jpg">
<img src=nice.jpg>
<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

Elementos nuevos en HTML 5
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de
los sitios web modernos. Algunos de ellos son tcnicamente similares a las etiquetas <div>
y <span>, pero tienen un significado semntico, como por ejemplo <nav> (bloque de
navegacin del sitio web) y <footer>.

Otros elementos proporcionan nuevas funcionalidades a travs de una interfaz
estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>,
capaz de renderizar elementos 3D en los navegadores ms importantes (Mozilla, Chrome,
Opera, Safari e IE).

Elementos desechados HTML 4

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<hgroup>
<isindex>
<noframes>

12

M anual del participante

<s>
<strike>
<tt>
<u>
<xmp>

Unidad 3 Estructura de HTML 5

Estructura

Estructura bsica de una pgina en H TM L5

En HTML5 la estructura interna bsica de una pgina web se ha simplificado, reduciendo el
cdigo innecesario hasta quedarse con el esqueleto bsico, que sera el siguiente:

<!doctype html>
<html>

<head>
<meta charset="utf-8"/>
<title>Ttulo de la web</title>
</head>

<body>
Contenido de la web
</body>

</html>

Cada fichero HTML est compuesto de dos partes. El <head>, donde se aade toda la
informacin que el navegador necesita pero que no se visualizar y el <body>, que ser
toda la informacin que contiene la pgina y que el navegador visualizar.

<head>

Todo lo que coloquemos entre las etiquetas del <head> y </head>, aunque no se
visualizar en el navegador, ofrece informacin importante sobre la propia pgina, por lo
que en el <head> se introduce informacin referente a:

la codificacin de la pgina (para que aparezcan los acentos correctamente)
utilizando 'meta charset'.
el ttulo de la pgina, que aparece en la pestaa del navegador (a travs de 'title').
La descripcin de la temtica de la pgina para los buscadores (Google entre otros).
el estilo CSS que la pgina utilizar (lo trataremos en el tema: Introduccin a CSS3).

13

M anual del participante

la programacin en javaScript (en el caso de que se utilice).

Por otra parte, dentro del <body> colocaremos todo aquello que s se tiene que visualizar
en el navegador, entre lo que vamos a destacar las etiquetas semnticas.

14

M anual del participante

Las nuevas etiquetas (sem nticas)

Una de las novedades de HTML5 hace referencia a las etiquetas semnticas, que tienen
como objetivo crear cajas o apartados de contenido dentro de la pgina pudiendo aportar
un significado semntico interno dependiendo del contenido que contenga. As, si un
apartado tiene como nombre <header>, el navegador sabr que se trata de un encabezado,
o si por el contrario se utiliza la etiqueta <nav> identificar que es una barra de
navegacin y que por lo tanto es donde se encuentran los enlaces de la pgina.
As, utilizando las etiquetas semnticas, se puede identificar el contenido que cada
apartado de la pgina contiene, huyendo de esta manera del abusivo uso que se hace del
omnipresente DIV (que no aporta ninguna informacin adicional sobre la informacin de
la informacin que contiene).
Las etiquetas semnticas ms importantes
son:

H eader
Nav
Section
Article
Aside
Footer

A continuacin las describiremos:

H eader: Es el equivalente a la cabecera de la
pgina web. Contiene el ttulo o nombre de la empresa/titular de la pgina, logo e
informacin relacionada.
Nav: Este apartado contiene los enlaces (barra de navegacin) externos o internos de la
pgina.
Section: Este gran apartado puede agrupar diferentes subapartados (de tipo 'article') de
diferentes temas, o bien puede definir un gran apartado de contenido unitario.
Article: Es una pieza independiente de contenido, que puede estar contenida (o no)
dentro de un apartado de tipo 'section'.
Aside: Define un bloque de contenido (tangencial) relacionado con el contenido principal,
pero que no es esencial para la compresin del mismo.
Footer: Equivale al pie de pgina de un apartado concreto ('section' o 'article') o de la
pgina web en general.
Para seleccionar el nombre de estas etiquetas, Ian Hickson (el editor de HTML5) recurri a
las herramientas de Google para extraer datos de ms de mil millones de pginas web

15

M anual del participante

reales, repasando los ID y los nombres de clase ms utilizados en la web. Si quieres ms

informacin puedes acceder a Google Code: Web Authoring Stadistics: Classes.
Estructura com pleja

Una estructura HTML que contenga referencia a un CSS externo, contenga el bloque de
cdigo CSS interno y tenga las etiquetas semnticas bsicas podra ser el siguiente:

<!doctype html>
<html>

<head>
<meta charset="utf-8"/>
<meta name="description" content="Resumen del contenido de la pgina">
<title>Ttulo de la pgina</title>
<link rel=stylesheet href="css/estilo.css" type="text/css"/>
<style type="text/css">
</style>

</head>

<body>
<header>
</header>

<section id="contenido">
Contenido de la web
</section>

<footer>
</footer>
</body>

</html>

Validacin

Testea qu tan compatible es tu navegador con HTML 5, con la siguiente herramienta:

H TM L5 Test es un sitio que ejecuta un test para ver cun apto es tu navegador con
el nuevo HTML5. Slo tienen que entrar al sitio y esperar unos segundos a que se
ejecute el test y nos de los resultados, ofreciendo un sistema de puntaje hasta 400
puntos dependiendo de cuantas caractersticas de HTML5 soporta tu navegador.

http://html5test.com/

16

M anual del participante

Por ejemplo, Chrom e 14.0 fue el ganador con 340 puntos de 400 posibles. Este
navegador ha implementado la mayora de la funcionalidad para ser compatible
con HTML5. Adicionalmente, muchas de las caractersticas que no han sido
aadidas ya son soportadas parcialmente. As que Google Chrome est por
mucho al frente de la carrera.

En seguida se encuentra M ozilla Firefox 7.0 con 313 puntos, Todava les
faltan ciertos elementos, pero obtuvo puntos bonus por su excelente soporte a
video y sus reglas de parsing.

Internet Explorer, como de costumbre, est muy por detrs de los dems. Con su
versin Internet 8 obteniendo 32 puntos de 400, y en su versin 9 obteniendo 141 puntos.
Es muy mala calificacin para lo que alguna vez fue el navegador ms popular del mundo.
Internet Explorer ha estado tratando de acatar los estndares internacionales en cuanto a
CSS se refiere, sin embargo ha dado mucho que desear, ya que ni siquiera soporta al 100%
los estndares CSS3, y no parece haber muchos cambios a futuro.

As que, aqu estn las estadsticas. Por el momento el nico
navegador que te puede llevar lejos es Google Chrome, y, hasta
que todos los navegadores se actualicen, es muy recomendable
usar HTML5 solo espordicamente en tus diseos, hasta que
realmente sea un verdadero estndar.

Ejercicio.

Analiza 5 sitios w eb en el validador de w 3c
En este ejercicio vamos validar cinco sitios web, con la herramienta que nos proporciona
W3C.


Sigamos los siguientes pasos:

17

M anual del participante

Unidad 4 Funcionalidades

Web Forms

Nuevos atributos para <input>

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
color
pattern (regexp)
placeholder
required
step

Nuevos atributos para <form >

autocom plete Atributo para autocompletar datos en formularios.


<form action="" autocomplete="on">
Primer nombre: <input type="text" name="nombre" >

<br/>
Apellidos: <input type="text" name="apellidos">

<br/>
Email: <input type="email" name="email">

<br/>
Fecha de nacimiento: <input type="date" name="fecha">

<br/>

Nmero Favorito 1-5 <input type="number" name="quantity" min="1"
max="5">

<br/>
<input type="submit" value="Enviar>

</form>

18

M anual del participante

novalidate se puede establecer en elementos form que tienen restricciones de validacin

para permitir el envo del formulario sin que se realice una validacin.

<form action= novalidate >

Primer nombre: <input type="text" name="nombre" required>
<br/>
Apellidos: <input type="text" name="apellidos">
<br/>
Email: <input type="email" name="email">
<br/>
<input type="submit" value="Enviar>
</form>

Audio y video

Anteriormente no exista un standard para manejar archivos de audio en un web site. Solo
se poda manejar audio con ayuda de plug-in

HTML 5 ha implementado una etiqueta para el manejo de archivos de audio <audio>

Ejem plo

<audio controls>

<source src="tesone.mp3" type="audio/mpeg">

Tu navegador no soporta html5
</audio>


Nota: Soporte de archivos MP3, Wav y Ogg

Atributos de la etiqueta <audio>
autoplay Especfica si el audio comenzar a ejecutarse tan
pronto como est listo.
controls Especfica si los controles (inicio/paro) se deben
mostrar.
loop Especfica si el audio debe comenzar de nuevo una vez haya
terminado.
preload Especfica cmo se debe cargar el audio cuando se cargue la pgina.
src Especfica la URL del origen del audio.

19

M anual del participante

HTML 5 ha implementado una etiqueta para el manejo de archivos de video <video>

Atributos de la etiqueta <video>
autoplay Especfica si el vdeo comenzar a ejecutarse tan pronto como est listo.
controls Especfica si los controles (inicio/paro) se
deben mostrar.
height Especfica la altura del reproductor de vdeo.
loop Especfica si el vdeo debe comenzar de nuevo
una vez haya terminado.
m uted Especfica si el audio del vdeo debe estar
apagado.
poster Especifica una imagen para ser mostrada
mientras el vdeo se carga y hasta que el usuario pulse el botn de inicio.
preload Especfica cmo se debe cargar el vdeo cuando se cargue la pgina.

Ejem plo

<video width="320" height="240" controls>
<source src="buenfin.mp4" type="video/mp4">
Tu navegador no soporta video
</video>

Nota: Soporte de archivos M P4, W ebM y O gg

Canvas

El elemento canvas (lienzo) puede definirse como un entorno para crear
imgenes dinmicas en el navegador (2D y 3D) (Recomendado: Cmo dibujar
curvas cuadrticas en un Canvas de HTML5)


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

El potencial de canvas reside en su habilidad para actualizar su contenido en tiempo real.
Si usamos esa habilidad para responder a eventos de usuario, podemos crear herramientas
y juegos que anteriormente a la nueva especificacin hubiesen requerido de un plugin
externo como Flash.

Analiza el siguiente cdigo

20

M anual del participante

21

M anual del participante

<canvas id="micanvas" width="350" height="350" style="border: 1px solid #000000;">

Tu navegador no soporta canvas.
</canvas>
<script>
var miCanvas=document.getElementById("micanvas");
var cxt=miCanvas.getContext("2d");
cxt.fillStyle="blue";
cxt.fillRect(10,10,100,50);
</script>

Puedes consultar los siguientes ejem plos de canvas en 3D

http://www.kevs3d.co.uk/dev/html5logo/
http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html
http://seb.ly/demos/canvas3d/canvas3d2.html
http://seb.ly/demos/GravityParticles/ParticlesForces3D2.html

Prctica la elaboracin de canvas en http://www.htmlya.com.ar/html5/

Ejercicio

Actividad: D ibujando H TM L5 con H TM L5

En este ejercicio vamos a dibujar.

Sigamos los siguientes pasos:

22

M anual del participante

Contenidos semnticos

La semntica es una de las funciones en las que ms se
diferencia la plataforma web de otras plataformas de
aplicaciones. Los desarrolladores suelen ignorar esta
funcin o restarle importancia, pero su dominio puede
reportar muchos beneficios para los proyectos.
Pues te permite saber qu contenidos se han colocado
en la cabecera, elemento HEADER, cules son los temas
de los que se habla en una web, los ARTICLES, o cules
son los enlaces a las secciones principales del sitio,
colocados en la etiqueta NAV.
Podemos definir un esquema de documento HTML utilizando los elementos h1 a h6: , por
ejemplo:
<h1>Genbeta Dev</h1>
<h2>Editores</h2>
<p>Sigue todos los posts de nuestros editores en Genbeta Dev</p>
<h3>Txema Rodriguez</h3>
<p>Apasionado por la tecnologa trabaja en Madrid...</p>
<h3>Jorge Ruvira</h3>
<p>Ingeniero Tcnico de informtica de sistemas por la...</p>
<h3>Carlos Paramio</h3>
<p>Tiene 33 aos y vive en la ciudad de Algeciras Cdiz...</p>
<small>Los editores son todos unos frikis del quince</small>

Lo anterior generara este esquema

Genbeta Dev
|_ Editores
|_ Txema Rodriguez
|_ Jorge Ruvira
|_ Carlos PAramio

Por qu hacer sem ntica?

La razn es que las etiquetas p y h1 transmiten informacin extra acerca del contenido.
Estas dicen esto es un prrafo y esto es un ttulo en el primer nivel, respectivamente.
El autor hace todo el esfuerzo para asegurar que el etiquetado organiza y estructura el
contenido.

23

M anual del participante

Geolocalizacin

La API de geolocalizacin permite al usuario compartir su
ubicacin a las aplicaciones web si as lo desea. Por razones de
privacidad, al usuario se le pide que confirme el permiso para
proporcionar informacin de ubicacin.


Para obtener la ubicacin actual del usuario, puede llamar al mtodo getCurrentPosition().
Esto inicia una solicitud asncrona para detectar la posicin del usuario, y consulta el
hardware de posicionamiento para obtener informacin actualizada. Cuando se determina
la posicin, la funcin de callback es ejecutada. Si lo desea, puede proporcionar otra
funcin de callback que se ejecuta si se produce un error. Un tercer parmetro opcional, es
un objeto de opciones donde se puede establecer la edad mxima de la posicin devuelta,
el tiempo de espera para una solicitud y si se requiere una alta precisin para la posicin.
Cuando getCurrentPosition() ejecutan la funcin de xito, le envan a sta un objeto con
dos propiedades, timestamp y coords.
tim estam p es una marca de tiempo expresada en milisegundos, que indica el momento en
que se ha obtenido la ubicacin.
A su vez coords es un contenedor para las propiedades que ms nos interesan:
latitude: La latitud de la posicin en grados decimales. Un valor positivo equivale a
latitud norte, y uno negativo a latitud sur.
longitude: La longitud de la posicin en grados decimales. Un valor positivo
equivale a longitud este, y uno negativo a longitud oeste.
altitude: La altitud, expresada en metros.
accuracy: La precisin de la estimacin de la latitud y la longitud, expresada en
metros; indica la distancia de error mxima entre la posicin estimada y la posicin
real.
altitudeAccuracy: La precisin de la estimacin de la altitud, expresada en metros;
indica la distancia de error mxima entre la altura estimada y la altura real.
heading: Indica la direccin del movimiento en comparacin con una ubicacin
anterior, y se expresa en grados decimales con respecto al norte real, en el sentido
de las agujas del reloj es decir, que 45, por ejemplo, significa noreste. Como se
puede intuir, esta propiedad slo tendr valor si se est obteniendo la ubicacin con
watchPosition().
speed: La velocidad del movimiento, expresada en metros por segundo. Como
heading, slo tendr valor en el objeto de posicin que devuelva watchPosition().

24

M anual del participante

La localizacin por wifi se produce por la triangulacin de los puntos donde se encuentran
los routers que tenemos a nuestro alrededor, seguro que hemos visto alguna vez al coche
de Google, verdad?, pues tambin lleva una antena wifi escaneando los puntos de acceso y
registrando su ubicacin.
Si queremos estas variables para situar en nuestra web un mapa, por
ejemplo, podemos consultar el API de google para obtener uno,
pasndole estos parmetros.
Ejem plo de Geolocalizacin
Actividad: Localizndote
En este ejercicio vamos a crear una aplicacin de tracking sencilla utilizando la API de
geolocalizacin de HTML5. Vamos a recuperar las coordenadas desde el API y los vamos a
mostrar en un mapa.
Sigamos los siguientes pasos:

25

M anual del participante

Unidad 5 Primeras Aplicaciones

Desarrollo del contenido

Cuando HTML5 se combina con JavaScript y CSS3, puede hacer cosas bastante curiosas, y
esta afirmacin es especialmente cierta en el desarrollo de aplicaciones mviles.

Las principales plataformas mviles, incluyendo iOS (Apple), Android y Blackberry tienen
navegadores que son compatibles con HTML5. Los desarrolladores que crean aplicaciones
web HTML5 para equipos de sobremesa, pueden utilizar el mismo cdigo para el
desarrollo de una aplicacin para iPad o cualquier otra aplicacin para tablets.

Javascript

JavaScript es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript.
Se define como orientado a objetos,3 basado en prototipos, imperativo, dbilmente tipado
y dinmico.

Javascript es lo que se utiliza en los sitios web para hacer esos efectos molones de sliders,
mover bloques de contenido (drag&drop), bsicamente cualquier tipo de interactividad
entre el usuario y la pgina web utiliza Javascript, por ejemplo:

Seguramente en ms de una
ocasin has odo hablar
de AJAX. Bien, AJAX significa
Asynchronous
JavaScript And XML s,
Javascript.

JQuery es un framework de Javascript


H erram ientas que proporciona JQ uery

El Them eRoller: es una herramienta web que nos permite crear temas personalizados
para nuestras aplicaciones mviles sin necesidad de escribir una sola lnea de cdigo CSS.
Slo hay que arrastrar y soltar algunos componentes para crear verdaderas obras de arte.
Luego, podemos compartirlas mediante su URL o descargarlas en un archivo ZIP, listas
para produccin.

http://themeroller.jquerymobile.com/

Los D em os: es un marco HTML5 interfaz de usuario tctil optimizada diseada para
hacer que los sitios web sensibles y aplicaciones que se puede acceder a todos los
dispositivos smartphone, tablet y de escritorio.

http://demos.jquerymobile.com/1.4.2/

26

M anual del participante

El API
http://api.jquerymobile.com/


Llevando Jquery M obile a una App

Android iO S

CSS

Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen
referencia a un lenguaje de hojas de estilos usado para describir la
presentacin semntica (el aspecto y formato) de un documento escrito en
lenguaje de marcas. Su aplicacin ms comn es dar estilo a pginas webs
escritas en lenguaje HTML y XHTML, pero tambin puede ser aplicado a
cualquier tipo de documentosXML, incluyendo SVG y XUL.

En otras palabras ms llanas, cuando entramos en una pgina web vemos que existen
colores de fondo, que la informacin se muestra en columnas, que los enlaces tienen un
color y al pasar sobre l con el ratn cambian de color, que existen mens desplegables,
etc. Todo esto se consigue con CSS.

Despliegue en diversos navegadores

Dado que HTML5 llama cada vez ms la atencin a fin de marcar nuestras las tendencias de
las nuevas pginas la nica manera de conseguir que IE reconozca los nuevos elementos,
como <article>, <section>, etc. es utilizar el shiv (navaja) HTML5
https://code.google.com/p/html5shim/

27

M anual del participante

Conclusiones finales


Est claro que HTML5 ha dejado ya de ser el futuro para convertirse en el presente. Ya la
gran mayora de navegadores modernos soportan gran cantidad de los nuevos elementos
del estndar lo que hace que su uso se ya posible hoy da. Pero HTML5 no es lo nico que
ha evolucionado, conjunto a l ha crecido CSS3 y la nueva generacin de JavaScript.

La nueva versin de CSS nos va a permitir que el diseo de pginas web cambie por
completo, esta nueva versin nos va a permitir hacer cosas que antes eran impensables,
podremos incluso dibujar con CSS, hacer que nuestras webs cobren vida, y otras muchas
cosas. Esto har que los diseadores que quieran mantenerse al da tenga que evolucionar,
tenga que cambiar el concepto de hacer diseos web como si fueran artistas y pasar a
hacer web como si fueran programadores haciendo uso de las nuevas herramientas que
nos ofrece CSS3. Lo que est claro que la tecnologa avanza y que todo el que se dedique al
desarrollo web, ya sean programadores o diseadores tendrn que ir de la mano de la
evolucin para no quedarse estancado en el pasado.

28

M anual del participante

29

M anual del participante

Fuentes de consulta

Cibergrafa

Autor:
Ttulo:
Vnculo:
Editor:

Autor:
Ttulo:
Vnculo:
Editor:

Autor:
Ttulo:
Vnculo:
Editor:

Autor:
Ttulo:
Vnculo:
Editor:

Autor:
Ttulo:
Vnculo:
Editor:
Autor:
Ttulo:
Vnculo:
Editor:

Sal Gonzlez Fernndez

Pruebas para el futuro inmediato: geolocalizacin
http://digitalicon.es/blog/pruebas-futuro-inmediato-geolocalizacion/

Diego Garca y Rubn Lara
Using geolocation
https://developer.mozilla.org/es/docs/WebAPI/Using_geolocation
Mozilla Foundation
lvarez Miguel ngel
Introduccin al HTML
http://www.desarrolloweb.com/articulos/534.php
Desarrollo Web
Lpez Javier
Estructura semntica de HTML5
http://www.jabmultimedia.com/t1_estructura.html
Jabmultimedia

W3C
Sobre el W3C
http://www.w3c.es/Consorcio/
W3C

Wikipedia
HTML 5
http://es.wikipedia.org/wiki/HTML5#Nuevos_elementos
Wikipedia

30