Scribd
Cargar
317 vistas53 páginas

HTML5 PDF

Cargado por

Will Jimenez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
317 vistas53 páginas

HTML5 PDF

Cargado por

Will Jimenez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 53

12 horas con

HTML5, CSS3 y
Javascript
CURSO ACELERADO
C AP TU L O 1

HTML 5

HTML5 es el presente de la web y si no ests asimilando lo que


est pasando ya eres parte de la vieja generacin de
desarrolladores. Eso tendra que tenerte preocupado.

HTML5 implica saber que hoy en da no empresas de tecnologa que cuentan con
nos conectamos solo desde el ordenador frontends, backends, sysadmins, mobile
sino desde telfonos mviles, tabletas, devs, comunity managers y arquitectos
eBooks, netbooks, y otra gama de disposi- de informacin en los proyectos que es-
tivos. El html5 supuso que se acabaron tn reiventando mercados
los webmasters independientes y hoy ha-
blamos de equipos multidisciplinarios de
1
Podemos hablar de todas las empresas La versin anterior y ms usada de
gigantes de la web: Microsoft, Google, HTML, HTML4, carece de caractersti-
Apple, Adobe, Facebook, Yahoo, Mozilla cas necesarias para la creacin de aplica-
y miles de proyectos tecnolgicos que ciones modernas basadas en un navega-
hoy se basan en HTML5, lo apoyan y tie- dor. El uso fuerte de Javascript ha ayuda-
nen propuestas que los hacen competir do a mejorar esto, gracias a frameworks
en cdigo en el navegador ms cercano y como jQuery, entre otros.
desde cualquier dispositivo.

LA LENTA EXTINCIN DE FLASH

Flash en especial ha sido usado en reem-


plazo de HTML para desarrollar web
apps que superaran las habilidades de
un navegador: Audio, video, webcams,
micrfonos, datos binarios, animaciones
vectoriales, componentes de interfaz
complejos, entre muchas otras cosas.
Como dato curioso el HTML5 tiene logo
de superhroe y vende incluso camisetas Ahora HTML5 es capaz de hacer esto
para apoyar al movimiento? sin necesidad de plugins y con una gran
compatibilidad entre navegadores.

No obstante flash no ha muerto y sigue


HTML5 es la actualizacin de HTML, el
usndose en muchos sitios webs y aplica-
lenguaje en el que es creada la web.
ciones multimedia
HTML5 tambin es un termino de marke-
ting para agrupar las nuevas tecnologas
de desarrollo de aplicaciones web:
HTML5, CSS3 y nuevas capacidades de
Javascript.

2
S EC C I N 1

ETIQUETAS DE HTML5
HTML4 y HTML5 son 100% compatibles lo que va a recibir, y cmo deber proce-
entre s. Todo el cdigo que tienes en sarlo. De esta manera, la misma pgina,
HTML normal seguir funcionando sin con distintos doctype, o peor an, sin l,
problemas en HTML5. Para empezar a se ver de distinta manera, incluso en el
usar HTML5 lo nico que tienes que ha- mismo navegador.
cer es colocar este DOCTYPE4 antes de
Por ello, es necesario elegir adecuada-
la etiqueta <html>:
mente un doctype, y seguirlo.

Las posibilidades? Unas cuantas, pero


<!DOCTYPE HTML> mi primer consejo es que se usen Doc-
type para xHTML. El segundo: que se eli-
Es un DOCTYPE mucho ms simplifica- ja "xHTML STRICT".
do que XHTML5 (cuyas reglas siguen De esta manera, le advertiremos al nave-
siendo usadas) y te permite usar todas gador de que va a recibir cdigo xHTML
las habilidades de HTML5 sin que nada estndar (W3C).
de lo que ya tienes programado deje de
funcionar.
<!DOCTYPE html PUBLIC "-//W3C//
Es muy importante escribir correctamen-
DTD XHTML 1.0 Transitional//EN"
te tanto el cdigo CSS como el xHTML. Y
sobre todo, este ltimo, pues no pode- "http://www.w3.org/TR/xhtml1/DTD/x
mos olvidar que xHTML, es la base de la html1-transitional.dtd">
WEB, y el armazn sobre el que se aplica-
r el CSS.
VALIDAR LA WEB:
Para que el cdigo xHTML sea adecuado
y rgido, existe el DOCTYPE. Sin exten-
derme mucho, es una declaracin para Se trata de verificar que el cdigo
hacer que el navegador, entienda qu es (x)HTML de tu WEB es coherente con su

3
doctype. Cmo hacerlo? Pues mediante
el validador de la W3C.
<NAV>
Igual que <header>, <nav> est disea-
do para que ah coloques la botonera de
VALIDAR EL CSS:
navegacin principal. Puedes colocar
Se trata de verificar que el CSS que he-
cualquier etiqueta dentro, aunque lo re-
mos escrito, es igualmente adecuado y
comendado es usar listas <ul>.
sin errores.

Esto debemos hacerlo para asegurarnos


la compatibilidad entre navegadores. <SECTION>
Define un rea de contenido nica den-
La W3C tambin nos ofrece su Valida-
tro del sitio. En un blog, sera la zona
dor de CSS,
donde estn todos los posts. En un video
de youtube, habra un section para el vi-
deo, uno para los datos del video, otro pa-
<HEADER>
Hacer cosas como <div id=header> es ra la zona de comentarios.
un poco extrao cuando el 99% de los
proyectos web tienen una cabecera. <hea-
<ARTICLE>
der> est diseada para reemplazar la ne-
Define zonas nicas de contenido inde-
cesidad de crear divs sin significado se-
pendiente. En el home de un blog, cada
mntico.
post sera un article. En un post del blog,
el post y cada uno de sus comentarios se-
ra un <article>.
<HGROUP>
Muchos headers necesitan mltiples ttu-
los, como un blog que tiene un titulo y
<ASIDE>
un tagline explicando el blog. <hgroup>
Cualquier contenido que no est relacio-
permite colocar un h1, h2 y h3 dentro del
nado con el objetivo primario de la pgi-
header sin afectar el SEO, permitiendo
na va en un aside. En un blog, obviamen-
usar otro h1 en el sitio. En el HTML ac-
te el aside es la barra lateral de informa-
tual, slo puedes usar h1 una vez por si-
cin. En el home de un peridico, puede
tio o el h1 pierde prioridad de SEO.

4
ser el rea de indicadores econmicos, o EJEMPLO DE NUEVAS ETIQUETAS
muy normalmente la publicidad. HTML5

<header>
<FOOTER> <hgroup>
Este es obvio. Es el pie de pgina y todo <h1>El blog de html5</h1>
lo que lo compone. <h2>Este es el blog de html5</h2>
</hgroup>
Atencin <div> no est muerto: Estas </header>
nuevas etiquetas no significan que ya no <nav>
se use <div>. Div siempre debe usarse Aqu va la botonera de navegacin

cuando necesites una caja con objetivos </nav>


<section>
de diseo grfico o cualquier cosa que no
<article>Aqu va un post, con su titulo en
tenga significado semntico. Slo usa las h2</article>
etiquetas semnticas de HTML5 donde <article>Aqu va un post, con su titulo en
sean necesarias. h2</article>
<article>Aqu va un post, con su titulo en
h2</article>
</section>
<aside>
Barra lateral con cosas como cuentas de
twitter, facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, copyright, etc.
</footer>

5
S EC C I N 2

NUEVAS ETIQUETAS DE HTML 5


Video, audio y animacin vectorial estn Un rea de dibujo vectorial y de bitmaps
en la lista de prioridades de todas las per- con Javascript. Es un API de dibujo ente-
sonas que ensean el html5. Especfica- ro para Javascript.
mente, las nuevas etiquetas son:
<SVG>
Una etiqueta, igual que <img>, para in-
sertar dibujos y animaciones vectoriales
<VIDEO>
al estilo de Flash. Todo basado en el es-
Inserta video sin necesidad de plugins.
tndar abierto SVG (Scalable Vector Gra-
Es muy fcil usarla, pero cada navegador
phics), derivado de XML.
soporta codecs diferentes de video, lo
que hace necesario recodificar un video
en mltiples codecs. En un futuro captu-
TABLA PERIDICA DE LAS ETIQUETAS
lo hablaremos un poco del problema que HTML
este tag est generando y cmo utilizar-
la.
Es recomendable visitar este sitio web pa-
<AUDIO> ra obtener una visin de las etiquetas
Lo mismo que video, pero sin video. Pue- html 4 y 5.
de usar mltiples formatos, en especial
mp3, pero tambin depende del navega- Hay etiquetas que han cado en desuso y
dor. otras caractersticas tambin interesan-
tes que no he mencionado, podis consul-
<INPUT >
tar todas las etiquetas en forma de tabla
Input ya exista como la etiqueta para in-
peridica en el siguiente enlace
sertar cajas de texto y botones. Ahora es
ms poderosa, con la capacidad de inser- http://joshduck.com/periodic-table.htm
tar cajas tipo email que se autovalidan,
calendarios tipo date, sliders, nme-
ros, entre otras.

<CANVAS>
6
S EC C I N 3

FORMULARIOS WEB
Para el usuario, los formularios tienen 13 NUEVOS ATRIBUTOS:
ahora en HTML5 un comportamiento
ms inteligente, un campo de fecha mos- AUTOFOCUS
trar al usuario un calendario interacti- Hacemos foco en el input que tenga
vo, o hints (pistas) sobre qu ingresar en asociado ste valor al cargar la pgina
ese campo, foco automtico en el campo
PLACEHOLDER
inicial, formato correcto a medidas de
Para ofrecer una pista de lo que el
tiempo o seleccionar color mediante una
usuario debe ingresar
paleta de colores.
ACCEPT
Permite que solo el tipo de archivo de-
Html5 agrega MUCHAS novedades, nue- terminado pueda ser cargado en el for-
vos atributos, elementos y tipos de cam- mulario
pos. MULTIPLE
Permite seleccionar mltiples archivos
para ser cargados de una vez por el for-
Todos los ejemplos que salen a continua- mulario
cin funcionan en el navegador Opera,
MAX / MIN / STEP
pues es el que actualmente soporta me-
Podemos delimitar rango de valores
jor la mayora de las nuevas caractersti-
numricos permitidos mximos, mni-
cas, tambin muchas funcionan bien en
mos y mltiplos dentro de un rango.
Chrome, Firefox y hasta en Explorer, pe-
ro varias slo estn disponibles para Ope- FORM NO DISPONIBLE
ra actualmente. Pero esto no es razn pa- Este atributo nos permite colocar un
ra no usarlos, sino al contrario, porque elemento en cualquier parte de la pgi-
no sern visibles para algunos pero les na, no solamente dentro del form tag, y
ser muy til a quienes utilicen navega- que ste siga siendo procesado por el
dores modernos. form. Adems permite asociar un mismo

7
elemento a mas de un form simultanea- Para sobreescribir la codificacin por
mente defecto del formulario

REQUIRED FORMMETHOD
Atributo booleano que determina si el Para sobreescribir el mtodo de envo
elemento debe ser obligatorio o no por defecto del formulario

(Utilizado junto con pattern, max / FORMNOVALIDATE


min, email y otros nuevos atributos, Para sobreescribir novalidate de un for-
nos permite prescindir en gran medida mulario (Esto es til por ejemplo si tene-
de Javascript para validar nuestros for- mos un formulario con dos botones u ac-
mularios y hacero slo con el navega- ciones, uno de envo y otro para guardar
dor.) cambios, pero queremos que la valida-
cin ocurra al envar un formulario y no
AUTOCOMPLETE
si el formulario es guardado)
Permite especificar si un elemento pue-
de o no ser autocompletado por el nave- FORMTARGET
gador basado en entradas previas del Para sobreescribir la ventana destino
usuario por defecto del form

PATTERN
Para validar un elemento en base a
5 NUEVOS ELEMENTOS:
una expresin regular (RegEx)

DIRNAME NO DISPONIBLE
PROGRESS
Enva la direccin en que fue ingresa- Representa el grado de progreso de
do el texto en un input determinado (ej: una tarea o accin (ej: Representar la car-
de derecha a izquierda) ga de una imgen)
NOVALIDATE
METER
Evita la validacin del elemento al en- Se utiliza para medir algo con una esca-
viar el formulario la determinada, como temperatura o dis-
FORMACTION tancias.
Para sobreescribir el comportamiento
DATALIST
por defecto del formulario Si asociamos un text input a un Data-
FORMENCTYPE list (lista de valores) al hacer foco en ese

8
input aparece un dropdown mostrando DATETIME
el contenido del elemento Datalist Formato de fecha y hora con zona hora-
ria UTC
KEYGEN
Genera un par de claves de control pri- DATE
vada que se guarda en local y pblica Formato de fecha sin zona horaria
que se enva al servidor MONTH

OUTPUT Mes y ao sin zona horaria


Se utiliza para realizar clculos entre WEEK
campos (ej: La suma de 2 nmeros en Fecha para ingresar semana del ao
distintos inputs)
TIME
Hora completa sin zona horaria

13 NUEVOS TIPOS DE CAMPOS: datetime-local

Fecha y hora sin zona horaria


TEL
NUMBER
Para un nmero telefnico (En reali-
Valores numericos
dad, no prueba que sea un nmero, para
validar un formato numrico en particu- RANGE
lar se debe complementar con pattern) Valor numerico para controlar slider

SEARCH COLOR
Sugiere ingreso de texto en el input Para elegir colores de una paleta
(La diferencia entre search y un input de
texto comn es que puede ser reconoci-
do por la plataforma en la cual es visto Recuerda que elementos y atributos co-
para igualar su estilo) mo placeholder, autofocus, email, data-
list y required, entre los ms comunes,
URL
ya tienen un amplio soporte, y como al-
Para ingresar direcciones web absolu-
ternativa, siempre tenemos la posibili-
tas
dad de ofrecer una experiencia similar
EMAIL utilizando soporte de libreras de javas-
Para valores nicos o mltiples de di- cript (como modernizr) para navegado-
reccines de email res que no soportan an estos avances

9
de forma tal de ir incorporando poco a RESUMEN DE LAS ETIQUETAS EN LOS
poco esta nueva experiencia al diseo co- FORMULARIOS EN HTML 5

tidiano.
NUEVOS TIPOS DE ENTRADA:
Fuentes:
<input type="email" />
W 3 c S p e c i f i c a t i o n <input type="url" />
*http://wufoo.com/html5/ <input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="search" />
<input type="color" />

NUEVOS CONTROLES:
<output></output>

NUEVOS ATRIBUTOS:
autofocus
min
max
pattern
placeholder
required
step

10
EJEMPLO DE FORMULARIO HTML5 <section>
SIMPLE <p>Texto de la noticia #2...</p>
<!DOCTYPE html> </section>
<html> </article>
<head> </section>
<title>HTML5 test</title> <aside>
<meta content="text/html; <form>
charset=ISO-8859-1" http-equiv="content- <p><label>Nombre: <input name="name"
type" /> required></label></p>
</head> <p><label>E-mail: <input name="email"
<body> type="email" required></label></p>
<header> <p><label>Edad: <input type="number"
<nav> min="0" max="99" step="1" value="33"></
<ul> label></p>
<li><a href="#">Inicio</a></li> <p><label>Edad: <input type="range"
<li><a href="#">Pedidos</a></li> min="0" max="10" step="2" value="6"></
<li><a href="#">Facturas</a></li> label></p>
<li><a href="#">Administracin</a></li> <p><label>URL: <input name="url"
</ul> type="url"></label></p>
</nav> <p><label>Commentario: <textarea
<form> name="comment" required></textarea></
<input type="search" name="q" label></p>
placeholder="Bsqueda" /> <p><input type="submit"
</form> value="Enviar"></p>
</header> </form>
<section> </aside>
<article> <footer>
<header> <p>Copyleft 2010</p>
<h2>Noticia #1</h2> </footer>
</header> </body>
<section> </html>
<p>Texto de la noticia #1...</p>
</section>
</article>
<article>
<header>
<h2>Noticia #2</h2>
</header>

11
EJEMPLO DE FORMULARIO HTML5 <br />
COMPLEJO Semana: <input type="week"
name="week_control" />
<br />
<!DOCTYPE html> Nmero (min -10, max 10): <input
<html> type="number" name="number_control"
<head> min="-10" max="10" value="0" />
<meta charset="utf-8" /> <br />
Intervalo (min 0, max 10): <input
type="range" name="range_control" min="0"
<title>Ejemplo nuevos controles</title> max="10" value="0" /> <output
</head> for="range_control"
name="range_control_value" >0</output>
<body> <br />
<form action="." Telfono: <input type="tel"
oninput="range_control_value.value = name="tel_control" />
range_control.valueAsNumber"> <br />
<p> Trmino de bsqueda: <input type="search"
Nombre: <input type="text" name="search_control" />
name="name_control" autofocus required /> <br />
<br /> Color Favorito: <input type="color"
Correo Electrnico: <input type="email" name="color_control" />
name="email_control" required /> <br />
<br />
<input type="submit" value="Submit!" />
URL: <input type="url" name="url_control" </p>
placeholder="Escribe la URL de tu pgina
</form>
web personal" />
</body>
<br />
</html>
Fecha: <input type="date"
name="date_control" />
<br />
Tiempo: <input type="time"
name="time_control" />
<br />
Fecha y hora de nacimiento: <input
type="datetime" name="datetime_control" />
<br />
Mes: <input type="month"
name="month_control" />
12
EL PROBLEMA DE COMPATIBILIDAD VALIDACIN EN CLIENTE DE
CON LOS NAVEGADORES FORMULARIOS

Hasta ahora la forma que se utiliza para


validar los formularios del lado del clien-
te es javascript para ayudar al usuario a
completar correctamente los formularios
para recopilar coherentemente su infor-
macin, desde el registro y acceso de una
cuenta hasta procesos de pago de com-
pra y otros.

Las nuevas caractersticas para manejo


de formularios html5 permiten prescin-
dir de javascript para realizar validacio-
nes del lado del cliente, esto me permi-
te como diseador crear un formulario
completo sin recurrir a un desarrollador,
aumentando la productividad, sobre to-
do en equipos pequeos de trabajo.

En el ejemplo anterior el formulario ya


est validado.

Ahora presentaremos un ejercicio simple


de formulario validado con una hoja de
estilos

13
14
S EC C I N 4

AUDIO Y VIDEO
Hablar de vdeo en internet es hablar de Adobe por su parte haba logrado impor-
ciclos, de batallas entre los CEOs ms in- tantes avances para que desde archivos
fluyentes en el mundo de tecnologa, de .swf pudieras incorporar videos, pero no
la compleja estandarizacin de un codec haba un solo canal.
o de un player. Hay un avance importan-
te con el tag <video> pero esto apenas
empieza y mucha de la historia segura- En el ao 2005, tres jvenes dejaron de
mente se va a repetir nuevamente. trabajar en Paypal y emprendieron el sue-
o de crear una plataforma universal pa-
ra compartir video. Ese ao nace Youtu-
Regresemos en el tiempo al ao 2004. be.
No exista Youtube. Por lo mismo, si que-
ras alojar y compartir en un navegador
cualquier vdeo te enfrentabas a dramas Paralelamente, Adobe demostr que su
de plataforma, de ancho de banda y de esfuerzo para crear un sistema para re-
problemas de usabilidad para el usuario producir vdeo iba a ser valorado y apro-
final. vechara el dominio que su plugin de
flash tena en todos los navegadores del
planeta. Los sysadmins educaron a sus
Si encontrabas algn enlace que te lleva- usuarios a crearse una cuenta en youtu-
ra a ver videos en la web seguramente te be y que dejaran de molestar con comple-
sonaran los logos de Real Player, de jos servidores para alojar y reproducir v-
Windows Media Player o incluso de deos.
Quicktime. Del lado del servidor los
sysadmins tenan que pelear con Real
Media Server, Windows Media Server En abril del 2010 una carta de Steve
que era parte del IIS y otro montn de Jobs a todos los clientes de apple sobre
opciones, pero era complicado unificar. sus pensamientos de Flash arranca uno
de esos nuevos ciclos donde una platafor-
15
ma disruptiva que cada da ganaba mer- El debate sobre Flash y HTML5 da par
cado le daba la espalda al famoso plugin mucho. Adobe tiene tecnologa slida y
de Adobe en sus dispositivos mviles. es de los reproductores que mejor entien-
Apple le prometa larga vida al HTML5 de de codecs y licencias. Es una solucin
porque todo se poda resolver en temas prctica para que no tengamos que en-
de vdeo con un tag aprobado por el es- frentarnos con esos problemas y sigue
tndar. Hoy volvemos a tener una bata- siendo la base de Youtube. Youtube si-
lla de grandes empresas por el codec lue- gue siendo la solucin prctica para com-
go de que estn todos de acuerdo que el partir en segundos un vdeo, le genere-
navegador lleva una opcin amigable pa- mos difusin y hagamos adems social
ra incluir un elemento de video, porque media.
este elemento es tan importante como
las imgenes.
Pero incluso Youtube est haciendo es-
fuerzos importantes en miras de
Y podemos usar perfectamente el ejem- HTML5, resolviendo otros dramas que
plo de las imgenes para entender lo que incluye este tag.
pasa con el video. Todos los navegadores
Revisa http://youtube.com/html5 con
permiten que en un documento HTML
un navegador moderno y conoce ms de
incluyas un tag <img> al cual debes de-
sus experimentos.
cirle la ruta a una imagen. Y la imagen
puede ser un .jpg, un .gif, un .bmp o un
.png (entre otros formatos). Depender No dejamos de usar flash, es ms, es uno
de la capacidad de tu navegador para re- de los planes ms seguros para que mu-
conocer todos los contenidos de esta im- chas personas y navegadores viejos pue-
gen, interpretarla y mostrarla. Con el vi- dan ver tus contenidos en vdeo.
deo pasa lo mismo.

Uso del tag <video> y el soporte de for-


Con la etiqueta <video> dejamos de matos en diferentes navegadores
usar video en flash?

16
Si hablamos de navegadores, recuerda Recomendamos utilizarlo si la funcin
que hay una versin donde el video em- de la pgina es mostrar un video. Si por
pez a existir. Antes, simplemente no va el contrario, el video nicamente ayuda-
a mostrar contenido y detectarlo para r a complementar la informacin (un
mostrar un player alternativo (en flash) post que tiene mltiples videos o referen-
es recomendado: cias, no lo recomendamos)

IE 9+, Firefox 3.5+, Chrome 3.0+, Safari <video src=un-video.mp4


3.0+, Opera 10.5+, Android Browser width=320 height=240 preload=n-
2.0+, Safari Mobile 1.0+ one></video>

Para incluir un video con HTML5 usas el Y el anterior que le dir explicitamente
siguiente formato: que no tiene que precargar el video.

<video src=un-video.avi width=320 autoplay = dar play al video en cuanto


height=240></video> cargue la pgina sin accin del usuario
sobre los controles.

Adicionalmente al ancho y alto, hay atri-


butos adicionales que puede usar: <video src=un-video-mlw.avi
width=320 height=240 autoplay></
video>
preload = que empezar a precargar el
video independientemente de las accio-
nes del usuario sobre el player. controls = hace que vayan a incluirse
los controles (play, pausa, volumen, etc.)
en el player del video. Estos controles es-
<video src=un-video.avi width=320 tn predefinidos en cada navegador y co-
height=240 preload></video> mo veremos ms adelante en algunos pla-

17
yers opciones pueden ser modificados CODECS.
con javascript + css3.
Hay 3 que importan hoy en da: H.264,
VP8 y Theora.
<video src=un-video.avi width=320
height=240 controls></video>
H.264
Conocido como MPEG-4 Advanced Vi-
Aqu es super importante entender una deo Codiging, es el ms popular hoy en
diferencia entre los tipos de archivo y los da, lo usa youtube cuando muestra vi-
codex con que el video ha sido procesa- deos desde el flash player (el flash player
do. Un .avi, .mp4 (o .m4v), un .flv (flash lo soporta sin problema). Es el que le da
video) y un .ogv simplemente contienen vida a los videos en un iPhone, en tu
un video, pero cada formato puede tener iPad. Incluso muchos reproductores de
diferente forma de codificarlo. Blue-ray lo soportan. Es genial, es asom-
broso, pero tiene algunos temas legales
detrs que complica su existencia. Hay
Los navegadores y las compaias que los
un grupo, el MPEG LA group que tiene
producen han elegido soportar nica-
patente sobre este formato y le quiere co-
mente a algunos codecs y lamentable-
brar a todos los que decodifiquen su for-
mente no existe una alternativa definiti-
mato. Google no es muy amigo de este
va y universal. En serio, no existe, tene-
formato. Chrome ya tiene el 20% del mer-
mos tag <video> y el drama ha quedado
cado y Android sigue creciendo. En ene-
por aqu, en que tienes que codificar tus
ro le dijeron adis.
videos al menos en algunos formatos pa-
ra asegurarte que funcione en todos la- http://blog.chromium.org/2011/01/htm
dos. Ven por qu Youtube sigue siendo l-video-codec-support-in-chrome.html
una opcin maravillosa?

VP8.
Google compr hace unos aos a una em-
presa llamada On2 por una millonada
porque tenan avances con desarrollos
de codecs de videos. Y unos aos des-
18
pus ponen a disposicin del mundo el dio tambin nos trae opciones y compli-
VP8. Es todo lo bueno que puedas pedir caciones que te recomendara investigar.
en este tipo de problemas legales ya que
La opcin de controls en el tag video
lo liberaron gratis, sin pagar derechos a
abre un mundo de posibilidades para
quien lo quiera usar. Es un regalito de
que te pongas a generar un reproductor
Google para el mundo. Pero Microsoft y
visible al usuario personalizado. Y los
Apple no quieren regalos de nadie, as
hackers del mundo han
que ya entenders cul es el problema de
este formato. visto opcin para poner su talento artsti-
co a disposicin de los dems.

THEORA.
No tiene dramas de patentes, es royalty
free, funciona en Linux y es el que viene
en archivos Ogg. De hecho, se basa en de-
sarrollos de On2 (la empresa que even-
tualmente fue adquirida por Google) y
llev esto por otro camino que es muy li-
bre, transparente, bueno, pero menos po-
pular. Puedes instalar decodificadores en
windows, en mac. Hoy lo soporta Chro-
me (junto a VP8) y suena maravilloso pe-
ro como todo lo gratis y open source,
Google es amigo de este formato.

Resumen de estos formatos, tienes que


usar al menos h.264 y Theora o VP8 pa-
ra que la web te vea. No puedes usar solo
uno, toca elegir dos.

Y por cierto, solo hemos hablado de co-


decs de video. El drama con codecs de au-

19
ENLACES A PLAYERS valor por sobre lo que me puede entregar
Youtube.
Hay muchas opciones de players de vi-
deo que puedes utilizar e incluir en tus
Media Elements
pginas HTML5. La mejor opcin para
conocer este confuso panorama es la ta- http://mediaelementjs.com
bla que encontramos en esta web:
Otra de las propuestas, con un player pa-
http://praegnanz.de/html5video
ra <video> y <audio> que adems tiene
Las opciones son muchas y hay demasia- versiones compatibles con un flash pla-
dos grupos de desarrolladores aseguran- yer para navegadores viejos. Es de esos
do generar buenas alternativas al estan- que te permiten aprender bastante mien-
dar definido en cada navegador. tras juegas con su cdigo.

Entre las opciones ms populares all des-


critas y que hemos seguido:

Importante con el tema del video es en-


Videojs tender que HTML lo ha reconocido co-
mo una de las bases ms importantes de
http://videojs.com
la web del presente y su mundo de posibi-
Han sabido vender la propuesta de su lidades es increble.
player con varios skins que imitan los de
los principales sitios de video en la web.

Sublime Video

http://sublimevideo.net

Un proyecto con un fin comercial que


quiere hacerse cargo del player para que
te encargues de generar el contenido.
Aunque sigo sin verle la proposicin de

20
EJEMPLOS DE MULTIMEDIA

21
C AP TU L O 2

CSS 3

Disear en CSS ha sido una mezcla entre risas y lloros. No slo


por la falta de compatibilidad con IE, sino porque cosas como
bordes redondeados en tamaos dinmicos requiere mltiples
divs, estilos y cuatro PNGs diferentes en el mejor de los casos. Ya
no ms, CSS3 trae opciones que hacen el diseo realmente fcil.

@FONT-FACE funciona perfecto desde Internet Explo-


rer 6 para arriba. NADIE LO USA.
Es la capacidad de usar CUALQUIER Importante, antes que enteder @font-fa-
FUENTE EN HTML. Sin necesidad de ce tienes que aprender a usar una maravi-
Flash, Cufon, SiFR u otras cosas. Esto lla que nos trajo Google y que le hizo la
22
vida ms fcil a todos los amantes de la nas, el espacio entre ellas, lneas de sepa-
tipografa que estaban cansados de usar racin, etc.
Arial y Helvetica. Visita Google
WebFonts y aprovchalo.
OPACIDAD, TRANSPARENCIA, CANALES
http://www.google.com/webfonts/v2 ALPHA, CONTRASTE, SATURACIN Y
BRILLO

SELECTORES CSS
Vuelve lo que quieras transparente u opa-
co con una instruccin. Imgenes, tex-
Te ha tocado hacer un diseo donde tos, sombras, bordes, lo que sea. O si
una lista o tabla tiene algunos elementos quieres convertir una foto en blanco y ne-
en blanco y los otros en gris? Como una gro o sepia, lo puedes hacer con slo
cebra. Antes, la nica forma era hacerlo CSS.
a mano o con un script del lado del ser-
ver. Ahora, con CSS3, slo tienes que es-
pecificar un color para odd y otro para ANIMACIONES DE TRANSICIN Y
even y listo. TRANSFORMACIN

Igualmente, puedes crear estilos para el


primer elemento y otro para el ltimo. O Las animaciones que antes lograbas con
estilos para etiquetas iguales con ciertos jQuery o Javascript ahora pueden ser lo-
atributos diferentes en HTML. Y esto es grados slo con CSS. Con una ventaja adi-
muy compatible desde IE8. cional, al hacerlo con CSS, las animacio-
nes vendrn aceleradas por hardware.
Mucho ms veloces, sobre todo en dispo-
COLUMNAS DE TEXTO sitivos mviles.

http://www.cristalab.com/tips/animaci
Sabes cmo se haca antes que varios p- ones-css3-en-html-con-jquery-c91636l
rrafos de texto se dividiera en columnas
con HTML? No se poda. Ahora slo re-
quieres un atributo CSS para lograrlo. Y
puedes controlar la cantidad de colum-

23
S EC C I N 1

SOMBRAS, GRADIENTES Y
TRANSFORMACIONES
BORDES REDONDEADOS #ejemplo
{
-moz-border-radius-topleft: 10px;
S. Con una instruccin puedes hacer -moz-border-radius-topright: 10px;
que cualquier caja tenga bordes redon- -moz-border-radius-bottomright: 10px;
deados como quieras. Olvidate de crear -moz-border-radius-bottomleft: 10px;
mltiples divs, cortar pngs y otros temas }

arcaicos.

http://www.cristalab.com/tips/bordes-r Por otro lado, este es el encargado de lo-


edondeados-con-css3-c69441l/ grar el mismo efecto en iPhone, Safari y
Chrome:
http://www.cristalab.com/tips/bordes-r
edondeados-en-css-3-con-border-radius Cdigo :
-c91377l/ #ejemplo
{
Con las siguientes nuevas reglas de estilo
-webkit-border-top-left-radius: 10px;
includas en CSS3 podemos crear bordes -webkit-border-top-rightright-radius: 10px;
redondeados para nuestros tags en -webkit-border-bottom-left-radius: 10px;
XHTML. Todo sin usar algn tipo de -webkit-border-bottom-right-radius: 10px;
"truco" complejo o librera de Javascript }

dedicada exclusivamente a ello.


Sin duda es una de las caractersticas
mas adorables al momento de disear, y
Este es el cdigo que deber estar inclu- que por si fuera poco es un estndar bien
do en tu archivo CSS para que funcione aceptado por la W3C.
apropiadamente en Firefox 3 y posterio-
res:

Cdigo : Border-Radius

24
Entrar a http://border-radius.com y nos border-bottom-left-radius
encontramos con esto:
En esas esquinas marcadas en la aparte
anterior es donde debes ingresar el nu-
Webkit: Es un motor renderizado. Fun-
mero en pixeles de el grado de redondez
ciona como base para Safari y Google
deseada lo cual nos dar:
Chrome. En el CSS se representa:

Cdigo :

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Gecko:Es el motor de render usado por


Firefox y en CSS se representa con :

-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

CSS3 o W3C: Esta es la forma correcta,


que aun no la implementan muchos. Ca-
da navegador (menos Opera y Explorer)
tienen su propia implementacin, pero
esta es la forma estndar:

Cdigo :

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
25
REFLEXIONES, GRADIENTES Y webkit-transform : rotate(0deg) scale(1)
SOMBRAS rotate(0deg);
}

Si no has superado la web 2.0, puedes po-


ner reflexiones a cualquier elemento Cdigo :
HTML. Pero lo interesante es crear gra- $(".mySelector").CSS3Animate({
dientes para fondos y sombras para cajas "property": ["-moz-transform", "webkit-
o texto, todo en una sola linea de cdigo transform"],
y con el mismo nivel de complejidad que "transition-duration": 1000,
"css": {
logras con una sombra en Photoshop o
"-moz-transform" : "rotate(350deg)
Fireworks.
scale(1) rotate(15deg)",
"webkit-transform" : "rotate(350deg)
scale(1) rotate(15deg)"
JQUERY CSSANIMATE },
Download "oncomplete" :function(){
alert("listo!")
https://github.com/bipsa/css3Animate }
});

La implementacin de este plugin es sen-


cilla, solo se hace el selector y se llama el
mtodo CSSAnimate, como pueden no-
tar el plugin ya valida si soporta CSS
transitions, y de no soportarlo simple-
mente asigna los estilos a su seleccin.

Imaginemos que creas una clase llamada


".mySelector" que permitir rotar un ele-
mento HTML.

Cdigo :

.mySelector {
-moz-transform : rotate(0deg) scale(1)
rotate(0deg);

26
C AP TU L O 3

JAVASCRIPT

JavaScript se utiliza en miles de millones de pginas Web para


aadir funcionalidad, validar formularios, comunicarse con el
servidor y mucho ms.

JavaScript o tambin abreviado muchas que JavaScript nos va ayudar a dar dina-
veces JS por la extensin de los archivos mismo a la pgina.
.js. Sirve para desencadenar o activar
QU ES UN EVENTO EN JAVASCRIPT?
eventos motivados por acciones del clien- Es cuando desencadenamos una porcin
te (ocurre del lado del navegador) por de cdigo en base a una accin del usua-
eso se lo conoce como un lenguaje del la- rio. , como clic o doble clic, cargar la pagi-
do del cliente. Entonces esto se resume a na, salir de la pgina, etc.
27
Debemos recordar siempre que en JavaS- Ejemplo de JavaScript bsico
cript: Es sensible a maysculas y mins-
culas (Case Sensitive).

Se puede comentar de dos maneras:

/*
se comenta esto
*/
// este es el segundo comentario
Lo que hemos hecho es abrir los tags des-
Los { } se utilizan para definir fragmen-
de la lnea 7 para crear nuestro cdigo Ja-
tos de cdigo.
vaScript y procedimos a crear una fun-
El ; nos ayuda a marcar el final de una cin que inspeccionara nuestro documen-
sentencia. to en bsqueda del Id parrafoPrincipal
para almacenar la fecha actual dentro de
la etiqueta HTML que posea ese Id.

POSIBILIDADES INFINITAS PARA


Existen dos formas de incorporar cdigo JAVASCRIPT

JavaScript en nuestro proyecto:

Externamente: cuando se hace referen- Chrome Experiments, es un sitio dedica-


cia an archivo .js. do a la difusin de experimentos con tec-
nologas de punta para navegadores web.
Internamente: cuando el cdigo JavaS- Fue lanzado hace unos 18 meses bajo el
cript se encuentra en la misma pgina. auspicio de Google, quien recin celebr
la llegada del experimento nmero 100.
Por supuesto, JavaScript y HTML5, son
las tecnologas ms relevantes usadas en
el sitio para poner a prueba tu(s) navega-
dor(es).

28
S EC C I N 1

SALVANDO PREFERENCIAS DE
USUARIO
El almacenamiento local HTML5 se utili-
za para almacenar pares de clave-valor
Juegos: El almacenamiento local se pue-
en el lado del cliente. Estos pares de cla-
de utilizar para guardar el progreso de
ve-valor se pueden recuperar en pginas
un juego o las puntuaciones ms altas,
HTML que provengan del mismo domi-
que ms adelante se podrn recuperar.
nio. Los datos de almacenamiento local
se almacenan en el disco y se conservan Multimedia: Si una aplicacin web inte-
despus de reiniciar las aplicaciones. Pa- gra una secuencia de audio o vdeo, la
ra obtener informacin adicional sobre aplicacin puede almacenar la marca de
el almacenamiento local, lea la especifica- hora de estas secuencias en el almacena-
cin en miento local. Dado que estos datos se
http://dev.w3.org/html5/webstorage . conservan entre distintos reinicios de la
aplicacin, puede iniciar la secuencia de
audio o vdeo desde la ltima ubicacin
USO DEL ALMACENAMIENTO LOCAL pausada.
HTML5 EN LAS APLICACIONES
Las API JavaScript* siguientes se pue-
den utilizar para almacenar, recuperar,
El almacenamiento local HTML5 se pue- eliminar o borrar los datos:
de utilizar en aplicaciones que deben
guardar datos y preferencias de los usua-
rios de manera que se conserven des- Almacenar un valor:
pus de haber reiniciado las aplicacio- window.localStorage.setItem(keyinput,valinp
nes. A continuacin se ofrecen algunos ut)

ejemplos del uso del almacenamiento lo-


var keyinput = key10;
cal HTML5 a fin de aumentar la funcio-
var valoutput = value10;
nalidad de una aplicacin web. if(typeof(window.localStorage) !=
'undefined'){

29
Borrar todos los valores:
window.localStorage.setItem(keyinput,valinp
window.localStorage.clear()
ut);
}
if(typeof(window.localStorage) !=
else{
throw "window.localStorage, not 'undefined'){
window.localStorage. clear() ;
defined";
}
}
else{
throw "window.localStorage, not
Recuperar un valor: defined";
}
window.localStorage.getItem (keyinput);
var valoutput ;
if(typeof(window.localStorage) !=
'undefined'){
valoutput =
window.localStorage.getItem (key10);
}
else{
throw "window.localStorage, not
defined";
}

Eliminar un valor:

window.localStorage.removeItem(keyinput);
var valoutput ;
if(typeof(window.localStorage) !=
'undefined'){
valoutput = window.localStorage.
removeItem (key10);
}
else{
throw "window.localStorage, not
defined";
}

30
Cdigo de ejemplo: for input.*/
localStorageSample.html
function store_local(domid_prefix){
var keyinput =
document.getElementById('local_storage_ke
<!DOCTYPE HTML>
y').value;
var valinput =
<html>
document.getElementById('local_storage_val
<head>
ue').value;
<TITLE>HTML5 local storage tester
try{
(testbed)</TITLE>

</head>
if(typeof(window.localStorage) != 'undefined')
<body>
{
<div id="output_area"

style="position:relative;width:
window.localStorage.setItem(keyinput,valinp
100%;height:200px;overflow:auto;
ut);
border: dotted 1px #0000;">
}
</div>
else{
throw
<div>
"window.localStorage, not defined";
<input id="local_storage_key"
}
type="text" />
}
<input
catch(err){
id="local_storage_value" type="text" />

</div>
output_str("store_local,error," + err);
}
<div>
}
<input type="button"
value="load" onclick="load_local();"/>
/* load some string data from local
<input type="button"
storage
value="store" onclick="store_local();"/>
This is using some text input
</div>
elements on the page
<script id="this_page_js"
for the key name input and
type="text/javascript">
value output.*/

/* store some string data to local


function load_local(domid_prefix){
storage
This is using some text input
elements on the page
31
var keyinput =
document.getElementById('local_storage_ke
y').value;
var valoutput =
document.getElementById('local_storage_val
ue');
try {
if(typeof(window.localStorage)
!= 'undefined') {
valoutput.value =
window.localStorage.getItem(keyinput);
}
else {
throw "window.localStorage,
not defined";
}
}
catch(err) {
output_str("store_local,error,"
+ err);
}
}

/* function to print to the debug


area */

function output_str(str){
var da =
document.getElementById("output_area");
da.innerHTML += str + "<br/
>";
da.scrollTop = da.scrollHeight;
}
</script>
</body>
</html>

32
S EC C I N 2

WEB SOCKETS
Igual que XMLSockets en Actionscript, Hoy no son muchas las versiones esta-
Web Sockets permite hacer aplicaciones bles de browsers que lo soportan. No es
multiusuario en tiempo real, como jue- el caso de Google Chrome el cual viene
gos, chats, notificaciones, etc. Si el nave- con soporte para WebSockets desde su
gador no tiene soporte de Web Sockets, versin 4.
es posible usar implementaciones multiu-
Google Chrome 4 +
ser en Javascript como PubSubHubBub
Internet Explorer 9 beta +
http://code.google.com/p/pubsubhubbub/

Firefox 4 beta +

WebSockets es una tecnologa que est Safari 5 +

surgiendo de la mano de HTML5 y esta- Opera 10.70 +


r pronto disponible en todos nuestros
Ahora veamos un poco de cdigo. Lo pri-
browsers en poco tiempo.
mero que tenemos que saber es si el
WebSockets es una tecnologa que nos browser conectado soporta WebSockets,
da canales de comunicacin bidireccio- lo cual podemos comprobarlo de manera
nal, full-duplex a travs de un sencillo sencilla.
socket TCP. Traducido sto a nuestro m-
view plaincopy to clipboardprint?
bito ms cotidiano, es simplemente ser- var support = window.WebSocket != null;
ver push. Vamos a poder comunicarnos
real-time con nuestros clientes conecta-
dos cosas que trataba de emular la tecni- Ahora que sabemos que nuestro browser
ca Comet la cual haca vivir un request soporta WebSockets podemos empezar
http durante X tiempo y donde el server creando uno.
escribia en ese response emulando ser view plaincopy to clipboardprint?
un push. var socket = new WebSocket("/mysocket");

33
Una vez creado el objeto WebSocket va- De sta manera podemos tener una co-
mos a agregarle una serie de listeners pa- municacin bidireccional de manera sen-
ra poder manipular los eventos que ocu- cilla.
rran en el mismo.
Ahora veamos algunos escenarios donde
aplica la utilizacin de WebSockets

view plaincopy to clipboardprint? Es aplicable donde un servicio TCP debe


socket.onopen = function(e) { ser llevado a una arquitectura web (co-
alert("Socket is connected");
mo por ejemplo el servicio de mensajeria
};
XMPP)
socket.onclose = function(e) { Donde una aplicacin web necesita co-
alert("Socket is closed :(");
municar datos en real-time a sus clientes
}
(por ejemplo una aplicacin de stocks on-
// y finalmente el que mas nos interesa, el
push del server line)
socket.onmessage = function(e) {
WebSockets es un avance significativo
alert("Server sent a message: " + e.data);
}
para la web donde las aplicaciones en
browsers se parecen cada vez ms a las
de escritorio pero a su vez hiper conecta-
Sin dudas que el evento ms importante das entre s.
ac es el onmessage. El parmetro e.data
puede ser texto plano, json, xml o cual-
quier formato que estn acostumbrados ALGUNOS RECURSOS
a utilizar a diario.

Ahora vamos a ver un ejemplo de cuan- WebSockets


do el cliente quiere comunicarse con el http://www.websockets.com
server envindole un sencillo mensaje.
W3C WebSockets
http://dev.w3.org/html5/websockets/

view plaincopy to clipboardprint? WebSockets en Wikipedia


socket.send("data goes here"); http://en.wikipedia.org/wiki/WebSockets

34
S EC C I N 3

GEOLOCALIZACIN
Una de las principales novedades de if (navigator.geolocation)
HTML5 fue la aparicin de nuevas APIs
{
de Javascript que aumentan la potencia
de este lenguaje. // Cdigo de la aplicacin

Una de ellas es la nueva API de geolocali- }


zacin, que nos permite conocer la ubica- else
cin geogrfica del usuario, siempre y
cuando est usando un navegador que la {
tenga implementada y que el usuario d // No hay soporte para la geolocaliza-
su permiso. El navegador har uso de cin: podemos desistir o utilizar algn
muchos mtodos (GPS, Skyhook, Google mtodo alternativo
Geo, IP) para darte la latitud y longitud
}
de tus usuarios. Obviamente, ellos tienen
que dar permiso. Lo mejor es que funcio-
na en cualquier PC, no slo en telfonos
LA FUNCIN
NAVIGATOR.GEOLOCATION.GETCURREN
TPOSITION
Aunque la primera impresin sea que s- La ubicacin del usuario se obtiene a tra-
lo ser til para usuarios de navegadores vs de la siguiente funcin:
mviles, la realidad es que ste utiliza
otros medios adems del GPS para calcu-
lar la ubicacin del usuario, como por navigator.geolocation.getCurrentPosition(fun
ejemplo a travs de su direccin IP. cExito, funcError, opciones);

Esta funcin tiene tres parmetros (los


Antes de empezar a usar el API de geolo-
dos ltimos opcionales):
calizacin tendremos que comprobar
que el navegador la soporta:

35
funcExito: funcin de retorno que se Tipo de dato
ejecutar si se obtiene la posicin. Se le
Descripcin
pasar como parmetro un objeto Posi-
tion. coords.latitude

funcError: funcin de retorno que se double


ejecutar si no se obtiene la posicin. Se Latitud en grados decimales
le pasar como parmetro un objeto Posi-
tionError. coords.longitude

opciones: un objeto PositionOptions double


con parmetros para la obtencin de la Longitud en grados decimales
localizacin.
coords.accuracy
La funcin intentar obtener la posicin
double
del usuario. Si lo consigue llamar a la
funcin que le pasemos como primer pa- Precisin en metros
rmetro pasndole un objeto Position
timestamp
con esos datos. Si, por el contrario, no lo
consigue, llamar a la funcin que le pa- DOMTimeStamp
semos como segundo parmetro pasn-
Momento de la toma de estos datos
dole un objeto PositionError que indica-
r la razn por la que no lo ha consegui- coords.altitude
do. double o null

Altitud en metros
EL OBJETO POSITION
coords.altitudeAccuracy
Es el objeto que nos indicar la ubica-
cin del usuario si el navegador puede de- double o null
terminarla. Este objeto consta de los si- Precisin de la altitud en metros
guientes atributos:
coords.heading

double o null
Atributo

36
Orientacin en grados decimales en el 1 El usuario ha denegado el acceso a la
sentido de las agujas del reloj obtencin de su ubicacin

coords.speed POSITION_UNAVAILABLE

double o null 2 No se ha podido obtener la ubicacin


del usuario por alguna razn
Velocidad en metros/segundo
TIMEOUT
De todos los atributos slo
coords.latitude, coords 3 Se ha agotado el tiempo de espera para
obtener la ubicacin
De todos los atributos slo
coords.latitude, coords.longitude y El objeto PositionOptions
coords.accuracy es seguro que tendrn
valor. Los otros dependen de las aptitu-
des del dispositivo que est usando el Es el objeto que nos permitir poner al-
usuario. gunas condiciones a la obtencin de la
ubicacin del usuario. Este objeto consta
de los siguientes atributos:
EL OBJETO POSITIONERROR

Atributo
Es el objeto que nos indicar la causa
por la que no se ha podido determinar la Tipo de dato
ubicacin del usuario. Este objeto consta
Valor por defecto
de dos atributos: code y message. De es-
tos el que nos interesa es code que ser Descripcin
el que nos indique el error de forma ms
enableHighAccuracy
eficiente (message hace lo mismo pero
con una cadena explicativa del error). boolean

Valor false

Valor numrico Si el dispositivo y el usuario lo permiten


el navegador intentar obtener la ubica-
Descripcin
cin del usuario con una mayor preci-
PERMISSION_DENIED
37
sin. Esto suele suponer un mayor coste CurrentPosition con esta opcin activada
de recursos. d error mientras que puede tener xito
con ella desactivada.
timeout

long
OBTENER LA POSICIN DEL USUARIO
No tiene

Tiempo de espera mximo para obtener


Veamos ahora el cdigo para obtener la
la posicin en milisegundos. Este tiempo
posicin del usuario con: comprobacin
empieza a contar desde que el usuario da
de si el navegador soporta geolocaliza-
su permiso, no antes.
cin, recogida de los datos de latitud y
maximumAge longitud, control de errores y pasndole
las opciones de tiempo mximo de espe-
long
ra y antigedad.
0
(function(){
Antigedad mxima en milisegundos. var content =

Con el valor por defecto (0), cada vez document.getElementById("geolocation-


test");
que se pide la posicin se vuelve a calcu-
lar. Si ponemos algn valor mayor que if (navigator.geolocation)
cero, se busca en la cach y si hay una po- {
sicin tomada anteriormente no ms an-
tigua que el valor dado, se devuelve inme- navigator.geolocation.getCurrentPosition(fun

diatamente, ahorrando muchos recur- ction(objPosition)


{
sos. Con el valor Infinity siempre se de-
var lon =
volver un valor de la cach. objPosition.coords.longitude;
var lat =
objPosition.coords.latitude;
Hay que tener en cuenta que algunos dis-
positivos tienen distintos mtodos para content.innerHTML =
"<p><strong>Latitud:</strong> " + lat + "</
obtener la posicin si enableHighAccu-
p><p><strong>Longitud:</strong> " + lon +
racy est activado y si est desactivado,
"</p>";
con lo es posible que una llamada a get-

38
}, function(objPositionError) Y en el siguiente cuadro podemos ver el
{ resultado de este script aplicado en esta
switch (objPositionError.code)
pgina:
{
case Latitud: 40.4373898
objPositionError.PERMISSION_DENIED:
content.innerHTML = Longitud: -3.6987106
"No se ha permitido el acceso a la posicin
del usuario.";
break;
case
objPositionError.POSITION_UNAVAILABLE:
content.innerHTML =
"No se ha podido acceder a la informacin
de su posicin.";
break;
case
objPositionError.TIMEOUT:
content.innerHTML = "El
servicio ha tardado demasiado tiempo en
responder.";
break;
default:
content.innerHTML =
"Error desconocido.";
}
}, {
maximumAge: 75000,
timeout: 15000
});
}
else
{
content.innerHTML = "Su navegador no
soporta la API de geolocalizacin.";
}
})();

39
EJEMPLO DE CMO CAPTURAR Y </div>
MOSTRAR LOS DATOS DE </section>
GEOLOCALIZACIN
<html> <script type="text/javascript" src="http://
maps.google.com/maps/api/js?
<head> sensor=true"></script>

<title>Localizador</title> <script type="text/javascript">

<script type="text/javascript" var map;


src="jquery-1.7.1.min.js"></script>
var latitud;
<meta charset="UTF-8">
var longitud;
<style>
var precision;
body{
$(document).ready(function() {
font-family: "Helvetica Neue", "Helvetica",
Arial, Verdana, sans-serif; localizame();

} });

</style> function localizame() {


</head>
<body> if (navigator.geolocation) {

<header> navigator.geolocation.getCurrentPosition(coo
<h1>Localizador mediante HTML5</h1> rdenadas, errores);

</header> }else{
<section>
<article> alert('Oops! Tu navegador no soporta
<div id='map_canvas' style='width:100%; geolocalizacin. Bjate Chrome, que es
height:400px;'></div> gratis!');
</article>
}
<div id="respuesta">

40
} }

function coordenadas(position) { if (err.code == 3) {

latitud = position.coords.latitude; alert("Oops! Hemos superado el tiempo de


espera");
longitud = position.coords.longitude;
}
precision = position.coords.accuracy;
}
cargarMapa();
function cargarMapa() {
alert("Datos con una precisin de " +
precision/1000 + " km, " + precision + " var latlon = new
metros"); google.maps.LatLng(latitud,longitud);

} var myOptions = {

function errores(err) { zoom: 17,

if (err.code == 0) { center: latlon,

alert("Oops! Algo ha salido mal"); mapTypeId:


google.maps.MapTypeId.ROADMAP
}
};
if (err.code == 1) {
map = new google.maps.Map($
alert("Oops! No has aceptado compartir tu ("#map_canvas").get(0), myOptions);
posicin");

}
var coorMarcador = new
if (err.code == 2) { google.maps.LatLng(latitud,longitud);
var marcador = new google.maps.Marker({
alert("Oops! No se puede obtener la posicin
actual"); position: coorMarcador,

41
map: map,

title: "Dnde estoy?"

});

</script>

</body>

</html>

42
S EC C I N 4

WEB WORKERS
Saban que Javascript slo puede hacer EJEMPLO WEB WORKERS
una cosa al tiempo? Gran parte de la ra-
zn por la que Wave fall y las web apps <script language="javascript">
son simples es porque la multitarea es var worker = new Worker('myjavascript.js');
imposible. Web Workers soluciona eso. worker.onmessage = function(event)
Web Workers permite tener multiples .js { alert(event.data); };
</script>
corriendo en paralelo en una misma pgi-
na. Haciendo tareas complejas ms velo-
ces gracias al multithreading. OTROS PUNTOS A TENER EN CUENTA
CON WEBWORKERS

Los web workers permiten la ejecucin Creacin de un worker


de scripts en segundo plano, son proce-
sos de larga duracin y pueden consumir Mltiples workers
mucha memoria que hasta ahora se po- Parmetros en el worker
dan implementar con la funcin
Operaciones con parmetros
window.setTimeOut(). Los workers tie-
nen las siguientes ventajas: se ejecutan Procesar matrices
en threads separados, de forma concu-
rrente, no bloquean la interfaz de usua-
rio, pueden ser dedicados (al tab) o com-
partidos por varios tabs o por la ventana
e, incluso, podran persistir al cierre de
la misma.

43
DOS EJEMPLOS DE HTML Y JS TRA-
BAJANDO JUNTOS

44
S EC C I N 5

WEBGL
WebGL creci desde los experimentos mtica se proporciona como parte del
del canvas 3D comenzados por Vladimir lenguaje JavaScript.
Vukievi en Mozilla. El primero mostr
WebGL carece de las rutinas matemti-
un prototipo de Canvas 3D en 2006. A
cas matriz eliminadas en OpenGL 3.0.
finales de 2007, tanto Mozilla2 como
Esta funcionalidad debe ser proporciona-
Opera3 haban hecho sus propias imple-
da por el usuario en el espacio de cdigo
mentaciones separadas. A principios de
JavaScript; este cdigo necesario se com-
2009 Mozilla y Khronos formaron el
plementa con frecuencia con una biblio-
WebGL Working Group (Grupo de Traba-
teca de matriz tal como glMatrix, TDL, o
jo del WebGL).
MJS.
El Grupo de Trabajo del WebGL incluye
Apple, Google, Mozilla, y Opera, y
WebGL ya est presente en las builds de IMPLEMENTACIN

Mozilla Firefox, Mozilla Fennec, Google Actualmente es soportado principalmen-


Chrome y tambin en la versin de Safa- te en Internet Explorer (versin 11), Goo-
ri incorporada en OS X Lion (Safari 5.1). gle Chrome y Mozilla Firefox aunque
tambin funciona con limitaciones en
Notables primeras aplicaciones de Opera browser y en Safari bajo el siste-
WebGL incluyen Google Maps y Zygote ma operativo de Apple para computado-
Body. ras de escritorio.

Numerosas implementaciones han sido


DISEO desarrolladas adems para buscadores
WebGL est basado en OpenGL ES 2.0 y de plataformas mviles.
proporciona una API para grficos 3D.
Se utiliza el elemento canvas HTML5 y
se accede mediante interfaces Document BIBLIOTECAS EN JAVASCRIPT

Object Model. Gestin de memoria auto- Como WebGL es una tecnologa disea-
da para trabajar directamente con el
45
GPU (unidad de procesamiento grfico)
IMAGEN INTERACTIVA 3.1 Ejemplo de ani-
es difcil de codificar en comparacin macin html 5 integrada
con otros estndares web ms accesibles,
es por eso que muchas bibliotecas de Ja-
vaScript han surgido para resolver este
problema:

C3DL, CopperLicht, Curve3D, CubicVR,


EnergizeGL, GammaJS, GLGE, GTW,
JS3D, Kuda, O3D, OSG.JS, PhiloGL,
Pre3d, SceneJS, SpiderGL, TDL,
Three.js, X3DOM.
Realizado con el programa Hype
Entre ellas Three.js es la ms popular en
trminos de nmero de usuarios. Es lige-
ra y tiene un bajo nivel de complejidad
en comparacin con la especificacin
WebGL original.

CREACIN DEL CONTENIDO


Las escenas WebGL se pueden crear sin
necesidad de programacin utilizando
una herramienta de creacin de conteni-
dos, como Blender o con Autodesk Ma-
ya. Las escenas luego se exportan a
WebGL. Esto fue posible por primera vez
Inka3D, un plugin de exportacin
WebGL para Maya. Tambin hay servi-
cios para publicar contenido en lnea 3D
interactivo utilizando WebGL como
p3d.in y Sketchfab.

46
S EC C I N 6

DRAG & DROP


Vete a gmail, crea un email e intenta }
arrastrar un archivo del explorador de ar- </script> </head>
<body>
chivos al mail. Vers que es posible ad-

juntarlo con slo arrastrarlo. El gesto de
<div id="div1" ondrop="drop(event)"
arrastrar y soltar ahora es posible gracias ondragover="allowDrop(event)"></div>
a HTML5. Puedes traer trozos de datos o
archivos enteros. <img id="drag1" src="img_logo.gif"
draggable="true"
ondragstart="drag(event)" width="336"
height="69">
EJEMPLO DE DRAG AND DROP

</body>
<!DOCTYPE HTML> </html>
<html> <head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElement
ById(data));

47
S EC C I N 7

SVG Y CANVAS
SVG <canvas id="mycanvas" width="200"
renderizacin de grficos en funcin de height="100">
un documento SVG (Scalable Vector Gra- Your browser does not support the
<code>canvas</code> element.
phics),
</canvas>

<script language="javascript">
<svg>
<circle id="myCircle" var canvas =
cx="100" cy="75" r="50" document.getElementById('mycanvas');
fill="blue"
stroke="firebrick" var context = canvas.getContext('2d');
stroke-width="3" />
<text x="60" y="155">Hello World</text> contexto.fillRect(50, 0, 10, 150);
</svg>
</script>

CANVAS

nos permitir renderizar imgenes sin


necesidad de plugins, generando de for-
ma dinmica el contenido a travs de ja-
vascript , y es el elemento de la polmica,
en el que muchos han visto la muerte del
flash, como hasta ahora lo conocamos

48
S EC C I N 8

HTML5 EN IPHONE, ANDROID E


IPAD
El objetivo es lograr que las pginas web para que el usuario manualmente las car-
se vean correctamente en todos los nave- gue.
gadores de telfonos y otros equipos por-
Seguir utilizando las mismas pginas
tables como tabletas y eBooks. Cdigos y
estndar pero utilizar un script que detec-
scripts para identificar el navegador del
te los mviles y en ese caso carguen un
usuario y cargar el estilo CSS que permi-
estilo especifico solo para ellos.
ta mostrar una pgina web correctamen-
te. Utilizar pginas optimizadas para mvi-
les pero utilizar un script para que los na-
El gran problema, no es solo el de crear
vegadores estndar de escritorio usen un
nuevo contenido que sea compatible, si-
estilo apropiado para ellos.
no tambin el de adaptar pginas crea-
das con anterioridad y que no se mues- Por ltimo el mtodo que recomienda
tran debidamente en estos dispositivos. Google, usar Responsive web design. Al-
go en espaol como "diseo web respon-
Quizs no sea necesario adaptar todas,
sable o adaptable".
pero si las ms demandadas en cada ca-
so.

Existen varias opciones o alternativas pa- DETECTAR NAVEGACIN CON IPHO-


ra lograrlo: NE, IPOD O IPAD

Crear versiones de pginas optimizadas


para mviles, detectar y dirigir estos dis- Una vez tomada la decisin de que nece-
positivos a ellas. sitamos una adaptacin de nuestros con-
Crear versiones de pginas optimizadas tenidos para iPhone, lo que tenemos que
para mviles y solo colocar un link en la hacer es colocar un cdigo en la cabecera
parte superior de las pginas normales, de nuestras pginas, de este modo, cada

49
vez que un usuario acceda a travs de su siones optimizadas para estos dispositi-
iPhone a nuestra pgina, ser redirigido vos.
a la adaptacin que hemos diseado pa-
En este ejemplo se especifican solo tres
ra l.
agentes de usuario (iphone, ipad y kind-
le), pero se pueden usar varios.

El cdigo en javascript Los navegadores estndar continuaran


leyndo el resto de la pgina original.
<script type=text/javascript> if
((navigator.userAgent.indexOf(iPhone) != -1)
| (navigator.userAgent.indexOf(iPod) != -1) )
| (navigator.userAgent.indexOf(iPad) != -1) ) <?php
{ $navigator_user_agent =
/* iPhone user */ (isset($_SERVER['HTTP_USER_AGENT'])) ?
window.location.href=iphone/; strtolower($_SERVER['HTTP_USER_AGENT'])
} :'';
</script> if(
stristr($navigator_user_agent, "iphone")or
stristr($navigator_user_agent, "ipad")or
Lo nico que debis cambiar es el stristr($navigator_user_agent, "kindle")
window.location y sustituir iphone/ )
por la url en la que tengis colocada vues- {
header("Location: mobile/index.html");
tra adaptacin web para iPhone.
}
?>
<html>
SCRIPT PARA DETECTAR DISPOSITIVOS Resto del cdigo fuente de la pgina
MVILES Y REDIRIGIRLOS A UN </html>
DIRECTORIO

Responsive design
El siguiente script en lenguaje PHP, in-
sertado al comienzo de una pgina Responsive web design no es ms que
index.php, re-direccionar a los dispositi- servir a todo tipo de dispositivos, la mis-
vos mviles cuyos agentes de usuario se ma pgina o sea el mismo contenido
especifiquen, a un directorio llamado en HTML, pero utilizar CSS3 para definir la
este ejemplo mobile, que contiene las ver- forma en que se representa, de acuerdo
al tamao de su pantalla.
50
Para eso se pueden emplear los coman- ocultar la barra lateral, se activa cuando
dos CSS: "@media handheld" y "@media el ancho del navegador es inferior a
screen". 800px.

Se puede probar reduciendo el ancho de


la ventana del navegador, incluso con un
EJEMPLO DEL USO DE @MEDIA
HANDHELD navegador de escritorio como Google
Chrome.

En el siguiente ejemplo, de forma prede- @media screen and (min-width:300px) and


(max-width:800px) {
terminada el navegador cargar el archi-
body{font-size:0.8em;}
vo de estilo normal.css, si es un dispositi-
sidebar{display:none;}
vo portable el que carga la pgina, enton- }
ces leer el estilo inline, que modificar Usar CCS3 para disminuir el tamao de
el ancho y tamao de la fuente especifica- las imgenes
do en el archivo anterior
Unas de las reglas fundamentales para
lograr una buena experiencia en los dis-
<link rel="stylesheet" media="screen" positivos mviles, es evitar la barra hori-
type="text/css" href="normal.css" /> zontal que incomoda y casi hace imposi-
ble el desplazamiento por la pgina al
<style type="text/css"> usuario. Se puede hacer que las imge-
@media handheld
nes en una pgina, se reduzcan de forma
body{width:98%;font-family:Verdana;font-
automtica a la pantalla del dispositivo
size:16px;}
</style> para evitar que aparezca la barra desli-
zante horizontal de la siguiente forma:

Usar el comando @media screen <style>


img{max-width:100%;}
@media screen es algo parecido, la dife- </style>
rencia es que se aplica un estilo determi-
nado solo cuando cambia el tamao de la EJEMPLO PRCTICO DEL USO DE CSS
pantalla del dispositivo. PARA REDUCIR Y ENCAJAR LAS
IMGENES EN UNA PAGINA
En el siguiente ejemplo, se usa para cam-
biar el tamao de la fuente de la pgina y
51
Como comprobar cmo se ven las pgi- cio. Uno de los servicios ms eficientes
nas web en dispositivos diferentes es Pikock.com

Usar la Vista de diseo adaptable del na- Para probarlo carga en tu navegador:
vegador Firefox http://www.pikock.com/en/pi-responsive.htm

El navegador Firefox incluye desde la ver- Escoge en el men de la parte superior el


sin 15 en las Herramientas de desarro- dispositivo que se necesita simular.
lladores, una nueva utilidad llamada:
"Vista de diseo adaptable".

Permite comprobar cmo se ve la pgina


en que se est navegando, en las panta-
llas de los ms populares dispositivos
portables.

En el men se puede escoger entre las si-


guientes resoluciones:

320 x 480 - iPhone (3G - 3GS)


360 x 640
768 x 1024 - iPad 1 & 2
800 x 1280 - Nexus 4 Nokia Lumia
980 x 1280 Kindle Fire HD 7
1280 x 600 iPhone 5
1920 x 900 Microsoft Surface

Para abrir la Vista de diseo adaptable


usa las teclas Control + Mayus + M. Est
en Herramientas > desarrollo web

En la actualidad varios servicios de inter-


net permiten comprobar cmo se ve una
pgina web especfica en distintos dispo-
sitivos, solo es necesario introducir la di-
reccin URL y ver el resultado, de acuer-
do a las posibilidades que brinde el servi-
52

También podría gustarte