PROYECTO DE FIN DE CARRERA
TÍTULO DEL PFC: Es udio, uso e implemen ación de una aplicación de
las nue as ca ac e ís icas de HTML5
TITULACIÓN: Ingenie ía de Telecomunicación (segundo ciclo)
AUTOR: Ma c Naha o Pa a
DIRECTOR: Roc Mesegue Palla ès
FECHA: 3 de oc ub e de 2011
Ti le: Es udio, uso e implemen ación de una aplicación de las nue as
ca ac e ís icas de HTML5
Au ho : Ma c Naha o Pa a
Di ec o : Roc Mesegue Palla ès
Da e: Oc obe , 3 d 2011
O e iew
In e ne has e ol ed du ing he las ew yea s, no only in e ms o speed bu
also in e ms o he ole i plays in people‟s li es.
HTML is explained wi h g ea e de ail in he i s ew chap e s, bu as an
in oduc o y de ini ion one could say ha HTML is he “pape ” whe e he
con en one sees while b owsing he web “is w i en”. Nowadays people expec
mo e han jus ex o s a ic con en , and any news si e will ha e ideos and
o ums whe e people can pos commen s.
Mobiles pla o ms play an impo an ole in all his, because In e ne is no
longe accessed so ely om home, bu om o he places as well, such as
phones. I is in his con ex whe e he solu ions ou side he s anda d ha e
s a ed exac ing hei oll due o hei highe compu a ional needs, and because
o i se e al la ge companies ha e lend hei suppo o he e olu ion o HTML
om 4 o 5.
HTML5 is s ill in cons an e olu ion, and despi e no being a closed s anda d,
i s goal is o sol e all he a o emen ioned p oblems. The ul ima e goal is o
de ine a mode n s anda d in line wi h he cu en use ha he web is gi en and
which can be used as a basis o web de elopmen .
This p ojec con ains a heo e ical analysis o he main di e ences be ween he
las e sion and he 5 h, checking which elemen s appea and which do no
a e he s anda d e olu ion. Case s udies a e ca ied ou o each unc ionali y
in o de o check how hey wo k. The nex s ep consis s in imming he
p e ious selec ion o unc ionali ies, and c ea ing an applica ion using he
esul ing unc ionali ies in combina ion wi h one ano he in o de o be e
obse e he possibili ies ha HTML5 o e s. Load es s on he clien side a e
pe o med as a las case s udy, hus checking he esou ces consump ion and
he a ic gene a ed by he b owse .
The conclusion is ha while HTML5 is no a closed s anda d, i has
compa ibili y p oblems bu also o e s many in e es ing hings o implemen in
he nea u u e.
Tí ulo: Es udio, uso e implemen ación de una aplicación de las nue as
ca ac e ís icas de HTML5
Au o : Ma c Naha o Pa a
Di ec o : Roc Mesegue Palla ès
Fecha: 3 de oc ub e de 2011
Resumen
En los úl imos años In e ne ha su ido una e olución, no solo en cuan o al
aumen o de elocidad sino ambién en lo e e en e al uso que se le da.
HTML se explica con de alle en los p ime os capí ulos pe o como esumen, se
puede deci que iene a se el „papel‟ sob e el cual se p esen a el con enido
que se e al u iliza un na egado web. En la ac ualidad ya no solo se en a a
e una página web con con enidos es á icos o solo ex o, po ejemplo, en
cualquie dia io que se pueda consul a online apa ecen ideos e incluso o os
sob e los cuales comen a una no icia.
Los e minales mó iles juegan ambién un papel impo an e en es e aspec o,
ya no se accede a una página web solo desde casa sino ambién desde un
elé ono po ejemplo. Algunas de las soluciones ue a del es ánda han
supues o p oblemas po su al o consumo de ecu sos y po ello g andes
emp esas han apoyado la e olución de HTML de su e sión 4 a la 5.
HTML5 es á oda ía en cons an e e olución, no es un es ánda ya ce ado
pe o man iene como obje i o soluciona p oblemas como los mencionados. La
me a es de ini un es ánda que sea la base pa a el desa ollo web y que
ealmen e se adecúe al uso que se le da hoy en día al acceso de páginas web.
En es e p oyec o se ealiza un análisis eó ico de las di e encias en e la
e sión an e io y la 5, comp obando qué elemen os apa ecen y cuales
desapa ecen as la e olución del es ánda . Se ealizan casos p ác icos de las
nue as uncionalidades pa a comp oba su uncionamien o. El paso siguien e
ha sido hace o a selección de en e las p obadas y ealiza un p oyec o que
las conjun e pa a e las posibilidades que HTML5 o ece. Como úl imo
eje cicio se ealizan unas p uebas de ca ga en el lado del clien e,
comp obando el consumo de ecu sos y el á ico gene ado en el na egado .
Todo es o pa a llega a e que HTML5 es un es ánda no ce ado, que
albe ga p oblemas de compa ibilidad pe o que o ece muchas cosas
in e esan es a aplica en un u u o p óximo.
ÍNDICE
INTRODUCCIÓN .............................................................................................. 1
CAPÍTULO 1. TECNOLOGÍAS UTILIZADAS ................................................... 3
1.1. ¿Qué es HTML? ................................................................................................................3
1.2. E olución de las e siones de HTML ..............................................................................3
1.3. Ja aSc ip .........................................................................................................................4
1.4. Hojas de es ilo CSS. .........................................................................................................5
CAPÍTULO 2. INTRODUCCIÓN A HTML5 ....................................................... 6
2.1. HTML5 ................................................................................................................................6
2.2. Apo aciones de HTML5. ¿Qué abandona y qué inco po a? ........................................7
2.2.1. Elemen os que desapa ecen .................................................................................8
2.2.2. Elemen os que apa ecen .......................................................................................8
CAPÍTULO 3. NUEVAS CARACTERÍSTICAS DE HTML5, EXPLICACIÓN Y
EJEMPLOS .................................................................................................... 10
3.1. In oducción a las nue as ca ac e ís icas de HTML5 ..................................................10
3.1.1. Almacenamien o en local .....................................................................................10
3.1.2. Can as.................................................................................................................10
3.1.3. Geolocalización ...................................................................................................10
3.1.4. T abajado es web o web wo ke s ........................................................................11
3.1.5. T abajando en modo o line .................................................................................11
3.1.6. Video....................................................................................................................11
3.1.7. WebSocke s .........................................................................................................12
3.2. Comp obación de compa ibilidad con HTML5 .............................................................12
3.3. In oducción p ác ica a las nue as posibilidades de HTML5 .....................................15
3.3.1. Almacenamien o en local .....................................................................................15
3.3.2. Can as.................................................................................................................17
3.3.3. Cumplimen ando o mula ios ...............................................................................19
3.3.4. Geolocalización ...................................................................................................24
3.3.5. T abajando en modo o line .................................................................................25
3.3.6. Video....................................................................................................................28
3.3.7 WebSocke s .........................................................................................................30
CAPÍTULO 4. SUDOKU CON HTML5 ............................................................ 33
CAPÍTULO 5. PRUEBAS DE RENDIMIENTO Y ANÁLISIS DEL TRÁFICO
POR LA RED .................................................................................................. 42
CAPÍTULO 6. CONCLUSIONES Y LÍNEAS FUTURAS ................................. 46
6.1. Impac o medioambien al ................................................................................................46
6.2. Análisis de los obje i os ma cados ..............................................................................46
6.3. Líneas u u as .................................................................................................................47
6.4. Conclusión pe sonal ......................................................................................................47
BIBLIOGRAFÍA .............................................................................................. 49
ANEXO A. ...................................................................................................... 52
A.1 HTML5 ..............................................................................................................................52
A.1.1 A ibu os que desapa ecen ..................................................................................52
A.1.2 Es ilos que desapa ecen......................................................................................52
A.1.3 Elemen os que apa ecen .....................................................................................52
A.2 Código HTML5 ................................................................................................................53
A.2.1 Comp obación de compa ibilidad de o ma os de ideo en HTML5 Tes .h ml .....53
A.2.2 WebSocke s. Se ido Py hon .............................................................................53
A.3 Cap u as na egado es ...................................................................................................57
A.3.1 Ch ome 10 ...........................................................................................................57
A.3.2 Fi e ox 3.6 ............................................................................................................57
A.3.3 Fi e ox 4.0 ............................................................................................................57
A.3.4 In e ne Explo e 8 ...............................................................................................58
A.3.5 In e ne Explo e 9 ...............................................................................................58
A.3.6 Ope a 11 ..............................................................................................................59
A.3.7 Sa a i 5 ................................................................................................................59
A.4 Código de la aplicación inal .........................................................................................60
A.4.1 Final.h ml .............................................................................................................60
A.4.2 ConEs ilo.css .......................................................................................................61
A.4.3 Audio.js ................................................................................................................61
A.4.4 Can as.js .............................................................................................................62
A.4.5 Ca ga Inicial.js .....................................................................................................67
A.4.6 Con ado .js ..........................................................................................................68
A.4.7 PosicionPun e o.js ...............................................................................................69
A.4.8 WebSocke .js .......................................................................................................69

ÍNDICE DE FIGURAS
Fig. 2.1 Modi icación del DOCTYPE. ................................................................ 7
Fig. 3.1 Tes de HTML5 en el úl imo na egado de Mic oso . ......................... 12
Fig. 3.2 Sopo e de can as. ............................................................................ 13
Fig. 3.3 Sopo e de ex o en can as. ............................................................... 13
Fig. 3.4 Sopo e de ideo. ............................................................................... 13
Fig. 3.5 Sopo e de almacenamien o local, web wo ke s, abajo o line y
WebSocke s. ............................................................................................ 14
Fig. 3.6 Sopo e de geolocalización. ............................................................... 14
Fig. 3.7 Código pa a almacena en local. ........................................................ 16
Fig. 3.8 Va ian e de código pa a almacena en local. ...................................... 16
Fig. 3.9 Código pa a ecupe a el con enido almacenado en local. ................. 16
Fig. 3.10 Decla ación de can as. .................................................................... 17
Fig. 3.11 Ja aSc ip pa a pin a can as de ejemplo. ....................................... 18
Fig. 3.12 Seguimien o del a ón en un can as................................................. 19
Fig. 3.13 Tag pa a placeholde . ...................................................................... 19
Fig. 3.14 Tag pa a e-mail y di ección web. ...................................................... 20
Fig. 3.15 E-mail y u l en un e minal Iphone con iOS 4.3. ................................ 20
Fig. 3.16 Tag pa a selec o numé ico. ............................................................. 21
Fig. 3.17 Tag pa a selec o numé ico con slide . ............................................. 21
Fig. 3.18 Funcionamien o de spinbox y ange en un na egado Ch ome. ....... 22
Fig. 3.19 Código de ejemplo de da e ime. ....................................................... 22
Fig. 3.20 Ejemplo de calenda io con da e ime-local. ....................................... 23
Fig. 3.21 Tag pa a pale a de colo es en o mula io. ........................................ 23
Fig. 3.22 Pale a de colo es que apa ece con el inpu de ipo colo . ................. 23
Fig. 3.23 Código necesa io pa a geolicalicación. ............................................ 24
Fig. 3.24 Pe ición de pe miso pa a ob ene la localización en Ope a. ............. 24
Fig. 3.25 Resul ado de geolocalicación en Ope a. .......................................... 25
Fig. 3.26 Decla ación de mani es en el documen o HTML. ............................ 26
Fig. 3.27 Tex o en el in e io del documen o mani es . .................................... 26
Fig. 3.28 U ilización de NETWORK en el documen o mani es . ...................... 26
Fig. 3.29 U ilización de FALLBACK en el documen o mani es . ...................... 27
Fig. 3.30 Llamada a o os documen os HTML en el mani es . ......................... 27
Fig. 3.31 Llamada a página web almacenada en caché. ................................. 28
Fig. 3.32 Con igu ación del se ido pa a o ece ideo. ................................. 29
Fig. 3.33 Con igu ación de ideo pa a el na egado . ...................................... 29
Fig. 3.34 Handshake con el clien e 192.168.1.6 (a iba) y ............................... 31
Fig. 3.35 Decla ación de un nue o socke . ...................................................... 32
Fig. 3.36 WebSocke : onopen y onmessage. .................................................. 32
Fig. 3.37 WebSocke : send. ............................................................................ 32
Fig. 4.1 Pan alla inal. Sudoku. ........................................................................ 34
Fig. 4.2 Selec o de audio. .............................................................................. 34
Fig. 4.3 Código de audio.js. ............................................................................. 35
Fig. 4.4 Desplegable de sudokus. ................................................................... 36
Fig. 4.5 Código de la unción dibuja P incipal(). .............................................. 37
Fig. 4.6 Código de pin a P incipal. .................................................................. 37
Fig. 4.7 Código de Ca ga Local....................................................................... 38
Fig. 4.8 WebSocke en documen o HTML. ...................................................... 39
Fig. 4.9 onmessage del WebSocke p incipal. ................................................. 40
Fig. 4.10 Página p incipal as iempo jugando. ............................................... 40
Fig. 5.1 Consumo de CPU y RAM con el adminis ado de a eas de Windows.
................................................................................................................ 43
Fig. 5.2 Análisis con SpeedT ace . .................................................................. 44
Fig. 5.3 Ejemplo de GET del con enido. .......................................................... 45
Fig. 5.4 Ejemplo de en ío de da os con WebSocke . ...................................... 45
ÍNDICE DE TABLAS
Tabla 3.1 Tabla con ipos de inpu pa a mos a echa y ho a. ........................ 22
6 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
CAPÍTULO 2. INTRODUCCIÓN A HTML5
2.1. HTML5
HTML es aba empezando a queda abandonado debido a la apa ición de
aplicaciones que no es aban es anda izadas y que eque ían de un cie o
o den. En el 2004 se cons i uyó el WHATWG3 al ma gen del W3C, p omo ido
po emp esas impo an es como Apple, Ope a, Google o la undación Mozilla.
El p opósi o dejó de se académico pa a pasa a abaja en un modelo
esencialmen e p ác ico. En el año 2007 el W3C econoce la labo de WHATWG
y se pone a abaja basándose en lo que ya lle aba desa ollado el g upo.
La nue a e sión de HTML no abandona lo esencial, simplemen e soluciona de
una mane a más sencilla un mismo dilema y además se acili a la inclusión de
elemen os mul imedia, elemen o que había e olucionado no ablemen e desde
la e sión 4. El hecho de que la idea de HTML5 [7] haya sido esol e
p oblemas p ác icos ha p o ocado que las mismas soluciones acili en el
abajo en si uaciones eales. La inclusión del DOM4 en el mismo es ánda es
uno de los cambios más des acados ya que has a la ac ualidad, aunque es un
componen e undamen al de HTML, había sido a ado de o ma sepa ada.
Sob e DOM se pod ía ealiza un capí ulo conc e o, pe o pa a la necesidad de
es e p oyec o bas a deci que DOM es la de inición de un conjun o de
en idades en el documen o HTML y qué unciones se pueden ealiza sob e
és as. Pa a abaja en él, al igual que en o as ca ac e ís icas de HTML5, se
u iliza el lenguaje Ja aSc ip que pe mi e u iliza las unciones y e en os del
DOM.
WHATWG se basó en los siguien es p incipios a la ho a de diseña HTML5:
 Compa ibilidad: Al igual que con las e siones an e io es, se iene que
acili a el en endimien o de e siones an iguas y la inclusión de
unciones que no es én en el es ánda .
 Si algo es á bien hecho se eu iliza, no se in en a hace de o a o ma.
 Resoluciones de p oblemas eales, e las necesidades inales.
 La inclusión de la segu idad en la pa e del diseño. Las aplicaciones web
ienen p oblemas de segu idad y se iene que acili a la c eación de
webs segu as.
 Acceso uni e sal: En la ac ualidad no solo acceden o denado es a la
web. Los e minales mó iles, ideoconsolas, able s…no son más que
nue os disposi i os que han apa ecido y que quie en accede a es e
con enido.
3Web Hype ex Applica ion Technology Wo king G oup.
4Documen Objec Model o Modelo de Obje os del documen o.

In oducción a HTML5 7
Hay que deja como comen a io, que no odos los na egado es sopo an odas
las ca ac e ís icas de HTML5 en la ac ualidad. Los ab ican es se es án
poniendo al día pa a pode sopo a co ec amen e odas las uncionalidades
de HTML5 po lo que se equie e ene la úl ima e sión del na egado pa a
pode dis u a de es os con enidos. En e los que más sopo e ienen des acan
los na egado es del g upo WHATWG aunque Mic oso con la e sión 9 de
In e ne Explo e es á ealizando un buen abajo.
2.2. Apo aciones de HTML5. ¿Qué abandona y qué
inco po a?
HTML5 se ha de inido eniendo en cuen a a los diseñado es de páginas web y
los que c ean aplicaciones pa a ellas, o ien ándolo de o ma p ác ica con el
obje i o de esol e p oblemas de e siones an e io es. Además de acili a el
desa ollo p opo ciona he amien as más po en es que solucionan algunas
complejidades innecesa ias. Ha eliminado algunos componen es que habían
quedado obsole os y que en la ac ualidad apo aban poco.
Con HTML5 y sus ca ac e ís icas se ha in en ado hace que el es ánda no se
quede a ás a medida que la web siga e olucionando. Además se ha que ido
po encia especialmen e la inclusión de con enidos mul imedia y se ha
inco po ado en el es ánda el DOM, ya mencionado an e io men e. A
con inuación se pasa á a desc ibi de o ma más écnica y/o de código los
di e en es cambios que han apa ecido.
La decla ación inicial de un documen o pasa a se lo más sencilla posible. La
Fig. 2.1 mues a es a modi icación.
An es
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.01
T ansi ional//EN" h p://www.w3.o g/TR/h ml4/loose.d d>
Después
<!DOCTYPE HTML>
Fig. 2.1 Modi icación del DOCTYPE.
A ni el de ca ac e es, HTML5 se espalda comple amen e en el es ánda
UNICODE, lo que signi ica que el ex o en el código se mos a á po pan alla
al y como se encuen a en el documen o HTML, incluyendo ca ac e es
especiales como la ñ sin necesidad de u iliza “ñ”.
Desapa ecen muchos a ibu os en a o de los CSS, se econoce la labo que
ealizan y se desplazan es as ca ac e ís icas ue a del documen o HTML. Si
son de in e és es os a ibu os, debido a su ex ensión conside able se ha
desplazado al anexo A.1.1.
8 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
2.2.1. Elemen os que desapa ecen
<BASEFONT> y <FONT>
Es as dos di ec i as de inían el amaño po de ec o y el de únicamen e un
bloque de ex o. Aho a es a unción ha quedado elegada al a ibu o size. En el
caso de FONT, la apa ición de nue as di ec i as que se menciona án más
adelan e ha p opiciado es a decisión.
<CENTER>
Desde hace iempo ya no se u ilizaba es a di ec i a sino más bien el a ibu o
align pa a ealiza es a unción. Igualmen e HTML5 elega es as a eas de
aspec o isual al CSS.
También exis en o os es ilos que sí que han sido sup imidos comple amen e y
han sido desc i os en el anexo A.1.2.
<APPLET>
Los apple son pequeñas aplicaciones ealizadas en Ja a. La di ec i a
<APPLET> se ía pa a pode inc us a es e ipo de aplicaciones en el
na egado . Su ex inción iene dada po la uni e salización de la di ec i a
<OBJECT>. Ambas compa en la di ec i a común <PARAM> pa a in oduci
pa áme os po lo que no hay cambio en es e aspec o.
Los ames
Si bien no es cie o que desapa ecen del odo, HTML solo con empla los
ames lo an es o i ames y el uso de dis in as en anas de des ino con el
a ibu o a ge .
2.2.2. Elemen os que apa ecen
A pa i de aquí se comen a án nue as di ec i as y a ibu os que se inco po an
en es e nue o es ánda . Se mencionan b e emen e algunas de ellas pe o
ealmen e es en es e pun o en el que empieza el desa ollo p ác ico de es e
p oyec o. Algunas di ec i as nue as p opo cionan muchas u ilidades p ác icas
y ienen un con enido mucho más amplio que una simple de inición.
En es e documen o p incipal se mencionan las más impo an es, pe o el es o
de elemen os que apa ecen se pueden encon a en el anexo A.1.3.
Pa a la edición de ex os exis en los siguien es:
 <ARTICLE>, como la o ma pa a delimi a un a ículo.
 <FOOTER> y <HEADER>, pie y cabece a de un documen o.
In oducción a HTML5 9
 <SECTION>, pa a delimi a un á ea den o del documen o pa a, po
ejemplo, hace uso de es ilos sob e él.
Pa a mul imedia e in e ac i idad los siguien es:
 <FIGURE>, elemen o que a a de engloba a un componen e
mul imedia y a su in o mación asociada.
 <FIGCAPTION>, di ec i a enca gada de almacena el í ulo de la igu a.
 <VIDEO> y <AUDIO>, son dos de las di ec i as más necesi adas que se
han incluido. Su nomb e lo indica p ác icamen e odo, pe mi e inclui
an o a chi os de ideo como de audio sin necesidad de u iliza
al e na i as como Flash.
 <CANVAS>, de ine un lienzo y pe mi e abaja con múl iples capas y
gene a aplicaciones dinámicas.
Ca ac e ís icas más gene ales de HTML5 se án explicadas en el capí ulo 3.
10 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
CAPÍTULO 3. NUEVAS CARACTERÍSTICAS DE HTML5,
EXPLICACIÓN Y EJEMPLOS
Es e capí ulo iene es obje i os p incipales. El p ime o de ellos es el de
explica b e emen e las nue as ca ac e ís icas de HTML5 [7]. El segundo es
c ea un documen o *.h ml que pe mi a comp oba si el na egado es
compa ible con HTML5. Es o es p imo dial ya que sin una he amien a que
pe mi a e los esul ados no es posible con empla si lo p og amado unciona
co ec amen e. En es e capí ulo se explica el uncionamien o de dicho
documen o y se mues a el código necesa io pa a lle a lo a cabo. El e ce y
úl imo obje i o es, median e ejemplos, mos a las bases pa a ealiza los
p ime os códigos de es as nue as ca ac e ís icas.
3.1. In oducción a las nue as ca ac e ís icas de HTML5
3.1.1. Almacenamien o en local
El concep o de almacenamien o en local es simila al de las cookies de ca a al
se ido . Las di e encias básicas son dos, la p ime a es que pe mi e almacena
más con enido que en una cookie y la segunda es que no se iene que i
en iando cons an emen e al se ido , como sí sucede con las cookies. Es a
in o mación se almacena en el usua io y se accede a ella median e Ja aSc ip .
Es os con enidos son almacenados en el na egado , cualquie a que u ilice el
mismo na egado pod á hace uso de ese con enido. Po el con a io, el
se ido solo puede e y/o modi ica el con enido que él ha c eado en el
usua io.
3.1.2. Can as
La de inición que HTML5 hace sob e es e elemen o es: un lienzo (can as) de
bi s en el que se pueden ende iza g á icos de juegos u o as imágenes
isuales al uelo. Lo que aducido end ía a deci que es un lienzo
independien e sob e el cual, median e Ja aSc ip , se pueden ealiza múl iples
acciones isuales con las que incluso se puede in e ac ua . Desde un pase de
o os, a elemen os mo iéndose lib emen e po ese lienzo has a ideojuegos
como los que se ealizaban pa a e minales mó iles.
3.1.3. Geolocalización
Poco se iene que deci sob e geolocalización. No es un es ánda que se haya
in oducido en HTML5 pe o sí se ha dado sopo e pa a pode u iliza lo
co ec amen e con el na egado . La in o mación no solo se puede o ece
median e un ha dwa e GPS especí ico sino ambién median e una di ección IP
o iangulación en e es aciones base de ele onía.
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 11
3.1.4. T abajado es web o web wo ke s
Aquí HTML5 ma ca un es ánda con la o ma la cual los na egado es ejecu an
Ja aSc ip de o ma anspa en e al usua io, en backg ound. Se pueden ene
múl iples “ abajado es” en di e en es h eads ealizando a eas mien as
exis en las habi uales en la página p incipal.
3.1.5. T abajando en modo o line
Es a ca ac e ís ica se puede de ini mejo con un ejemplo. Consis e en pode
na ega de o ma o line, ealiza cambios en el con enido y subi los a la ed en
el momen o en el que se uel a a ene conexión. Un ejemplo es pode
conec a se a Gmail, ealiza cambios en el con enido es ando desconec ado de
la ed y que se ac ualicen al ol e a es a conec ado.
3.1.6. Video
Sob e la de inición pa icula de es a nue a ca ac e ís ica poco hay que
menciona . Es a nue a di ec i a pe mi e in oduci ideo en HTML sin u iliza un
ep oduc o de Flash como se enía haciendo has a la echa. El apa ado que
sí ae con o e sia es el ipo de ideo que sopo a cada na egado , pues es a
di ec i a sopo a di e en es códecs y en unción del na egado se puede
ep oduci un ideo o no aunque sopo en dicha di ec i a.
Exis en 3 ipos de o ma os que son los más u ilizados:
 El p ime o es H264. En la ac ualidad se ha hablado mucho de es e
o ma o ya que es el es anda e de Apple y su Sa a i y pa a apoya lo
di ec amen e se ha op ado po deja de sopo a Flash en sus e minales
mó iles. Video en banda base, con audio en AAC LC en un con enedo
MPEG-4.
 El segundo es OggVo bis, has a aho a apoyado po Mozilla Fi e ox. Se
a a de audio Vo bis con el códec de ideo Theo a en un con enedo
Ogg.
 El úl imo es un nue o o ma o ecién apa ecido. WebM es un o ma o
lib e y que es á ecibiendo el apoyo de Fi e ox, Ope a y Ch ome que
ecien emen e ha no i icado que deja de o ece compa ibilidad con
H264. Es e o ma o iene muy impulsado po usua ios de so wa e lib e
y la g an mayo ía de p og amas que codi ican a es e o ma o son
p og amas pa a el sis ema ope a i o Linux.

12 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
3.1.7. WebSocke s
La de inición se puede esumi en que es una nue a ca ac e ís ica de
comunicación que inco po a HTML5 en la que se de ine un canal de
comunicación ull-duplex a a és de un socke sob e la web [8]. Con es o lo
que se in en a consegui es que la comunicación en e el se ido y el clien e
sea ins an ánea de o ma bidi eccional. En el apa ado 3.3 de es e capí ulo se
da án más de alles écnicos sob e es a nue a ca ac e ís ica.
3.2. Comp obación de compa ibilidad con HTML5
En es e apa ado se p ocede á a comp oba la compa ibilidad de un na egado
web con HTML5 y se explica á cómo se ha ealizado el documen o que ealiza
las p uebas. Dicho documen o se ha c eado desde ce o pa a es e p oyec o po
lo que se de alla á el con enido y el uncionamien o paso po paso.El esul ado
inal es el mos ado en la Fig. 3.1.
Fig. 3.1 Tes de HTML5 en el úl imo na egado de Mic oso .
La aducción de la Fig. 3.1 es que In e ne Explo e sopo a odas las
ca ac e ís icas explicadas en el capí ulo an e io excep uando las aplicaciones
en local, WebSocke s y los o ma os de ideo OggVo bis y WebM a la ho a de
ep oduci ideo. El documen o se denomina HTML5 Tes .h ml y en él se ha
ealizado una unción es () que se enca ga de ealiza un i con odas las
unciones que se de alla án a con inuación y colo ea una abla en ojo o e de.
Hay que menciona la excepción de los o ma os de ideo pues o que el
na egado no e o na un ue sino un p obably, maybe o un alo en blanco en
unción de lo capaz que se ea pa a ep oduci ese ipo de con enido. En el
anexo A.3 se pueden isualiza más cap u as con odos los na egado es de
ac ualidad, Fi e ox, Ch ome, Ope a y Sa a i y di e en es e siones. Es as
cap u as no se han in oducido en el p oyec o ya que no o man pa e de los
obje i os.
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 13
La p ime a p ueba ealizada es la de sopo e a can as median e la unción de
la Fig. 3.2.
unc ion suppo s_can as(){
e u n !!documen .c ea eElemen ('can as').ge Con ex ;
}
Fig. 3.2 Sopo e de can as.
La unción suppo s_can as() ealiza es cosas en esa sola línea. P ime o, con
c ea eElemen se in en a c ea un elemen o can as y es e elemen o queda á
lo an e en la memo ia. Con ge Con ex se ob iene el con enido de dicho
elemen o y con la doble exclamación se ue za a de ol e ue o alse en
unción de si ha podido ealiza se o no. Po lo que el esul ado de
suppo s_can as() es un booleano indicando si ha podido c ea se o no. En el
can as ambién se puede in oduci ex o po lo que ambién se c ea una
unción pa a comp oba su compa ibilidad ya que una cosa no asegu a la o a.
unc ion suppo s_can as_ ex (){
i (!suppo s_can as()){ e u n alse; }
a dummy_can as=documen .c ea eElemen ('can as');
a con ex =dummy_can as.ge Con ex ('2d');
e u n ypeo con ex . illTex == ' unc ion';
}
Fig. 3.3 Sopo e de ex o en can as.
En la Fig. 3.3 el uncionamien o es simila al de la unción de comp obación del
can as. En es e caso inicialmen e en el i se comp ueba si sopo a can as
po que de no se así no ha ía al a ealiza la siguien e comp obación. A
con inuación se c ea la a iable dummy_can as y se in oduce el con enido en
con ex . Si con ex iene la unción illTex signi ica que sí se sopo a ex o en el
can as.
La Fig. 3.4 mues a el código pa a la compa ibilidad con ideo en HTML.
unc ion suppo s_ ideo(){
e u n !!documen .c ea eElemen (' ideo').canPlayType;
}
Fig. 3.4 Sopo e de ideo.
En la unción suppo s_ ideo() se c ea un elemen o ideo y se le ealiza una
consul a con la ca ac e ís ica canPlayType El esul ado ob enido ambién es un
booleano. En es e documen o HTML ambién se ha ealizado la comp obación
14 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
de compa ibilidad con OggVo bis, H264 y WebM. El código necesa io es á
disponible en el anexo A.2.1.
La Fig. 3.5 mues a el código pa a el almacenamien o en local, web wo ke s,
abajo en o line y WebSocke s.
unc ion suppo s_local_s o age(){
e u n('localS o age' in window)&& window['localS o age']!==null;
}
unc ion suppo s_web_wo ke s(){
e u n !!window.Wo ke ;
}
unc ion suppo s_o line(){
e u n !!window.applica ionCache;
}
unc ion suppo s_websocke () {
e u n !!window.WebSocke ;
}
Fig. 3.5 Sopo e de almacenamien o local, web wo ke s, abajo o line y
WebSocke s.
El mo i o po el cual se explican es as cua o comp obaciones en conjun o es
po que se comp ueban de la misma o ma. Todas ellas son una p opiedad del
obje o window po lo que pa a de ec a si uncionan se decide llama las y
comp oba si exis en.
Pa a ealiza la comp obación de la geolocalización el mecanismo es el mismo
que las cua o an e io es unciones solo que la p opiedad es del obje o
na iga o en ez de window. La Fig. 3.6 con iene el código necesa io.
Func ion suppo s_geoloca ion(){
e u n !!na iga o .geoloca ion;
}
Fig. 3.6 Sopo e de geolocalización.
Aho a bien, du an e las p ác icas de es as unciones, se sus i uye on los e u n
po ale s pa a pode comp oba su co ec o uncionamien o ya que como se
puede ap ecia , dichas unciones no mues an el esul ado al usua io sino que
simplemen e e o nan un pa áme o al na egado .
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 15
3.3. In oducción p ác ica a las nue as posibilidades de
HTML5
3.3.1. Almacenamien o en local
El almacenamien o local es uno de los elemen os que cla amen e di e encia las
aplicaciones web con las locales, eniendo una cla a en aja el segundo g upo.
En una aplicación ejecu ada localmen e en un o denado el sis ema le
p opo ciona un almacenamien o en unción a lo que la aplicación equie e. En
una aplicación web, po el con a io, es o no se podía p oduci y una de las
opciones u ilizadas ha sido la u ilización de cookies en el na egado , elemen o
que, apa e de es a limi ado a unos 4 KB, e a necesa io ans e i al se ido
cons an emen e y es o alen izaba la comunicación clien e-se ido .
El obje i o en onces se ijó en:
 Un mayo amaño de almacenamien o en el clien e.
 Que es os da os se man engan al ac ualiza la página.
 Que no se enga que ans e i al se ido cons an emen e.
 No eque i de la u ilización de plugins, ya que Flash había
implemen ado algunas opciones pe o limi adas al uso de su máquina.
La especi icación se llama “almacenamien o web” aunque algunas compañías
lo anuncian como “almacenamien o local” o “almacenamien o DOM”. Su
uncionamien o es simila a las cookies con las di e encias de que es a
in o mación pe manece al ce a el na egado y no se ansmi e al se ido a
no se que se especi ique, haciendo mención. En cuan o al ema del espacio
es a ez el es ánda no es el que limi a sino el na egado del usua io. Po
de ec o la mayo ía de na egado es pe mi en almacena al ededo de 5 MB en
local a cada página a la que se accede y el p og amado web no puede hace
nada pa a modi ica dicho amaño. Recien emen e algunos na egado es
o ecen al usua io, a a és de los ajus es, la opción de a ia es e amaño,
o eciendo un mayo amaño de almacenamien o en local. Si es e amaño se
excede se mues a un e o y no es posible hace apa ece una p egun a pa a
modi ica es e amaño.
Ac ualmen e compañías como Google es án p esen ando API‟s pa a c ea
bases de da os en ese amaño que nos p esen a el na egado basados en
SQL. No es un es ánda de HTML5 pe o mues a una de las posibles u ilidades
que se pueden ealiza sob e el almacenamien o local, mos ando el po encial
que puede llega a ene .
A con inuación se p ocede á a la explicación del ejemplo p ác ico. Desde el
código Ja aSc ip se accede al almacenamien o con el obje o „localS o age‟.
Hay que eco da que an es de p ocede con el ejemplo se iene que
22 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
desplazamien os de 5 en 5. En la Fig. 3.18 se puede ap ecia en un na egado
Ch ome el uncionamien o de los dos ipos mencionados an e io men e.
Fig. 3.18 Funcionamien o de spinbox y ange en un na egado Ch ome.
Fechas y colo es
Exis en dos ipos en los o mula ios que es án sopo ados po muy pocos
na egado es, po no deci simplemen e po uno de los más impo an es. Es os
dos ipos son los e e en es a las echas y a la selección de un colo , da e y
colo espec i amen e. Hay que especi ica que ha sido necesa io ins ala el
na egado Ope a 11 pa a pode ap ecia su uncionamien o po que ninguno de
los o os na egado es ha sido capaz de ep oduci los co ec amen e.
El ipo da e se dispone de múl iples o mas pa a apo a di e en es
compo amien os. La Tabla 3.1 mues a los inpu s que se pueden in oduci .
Tabla 3.1 Tabla con ipos de inpu pa a mos a echa y ho a.
Tipos de inpu
Compo amien o
da e
Apa ece un calenda io pa a selecciona una echa.
mon h
Mues a simplemen e el mes.
week
Mues a simplemen e una semana.
ime
Mues a la ho a.
da e ime
Combinación de da e y ime.
da e ime-local
Mues a po de ec o el día/mes ac ual en unción del na egado .
La Fig. 3.19 mues a el ejemplo de código ealizado. Tan simple como
decla a lo en el ype y apa ece á lo mos ado en la Fig. 3.20.
< o m …>
…
<inpu ype="da e ime-local">
…
</ o m>
Fig. 3.19 Código de ejemplo de da e ime.

Nue as ca ac e ís icas de HTML5, explicación y ejemplos 23
Fig. 3.20 Ejemplo de calenda io con da e ime-local.
El ipo colo pe mi e selecciona un colo y mues a su alo en hexadecimal.
Pa a pode ap ecia alguna de las u ilidades de es a ca ac e ís ica se ha
ealizado un ejemplo en el que no solo se ha u ilizado el ipo colo . La Fig. 3.21
mues a el código de ejemplo.
< o m …>
…
<inpu ype="colo " id="colo " onChange="colo ea ();">
<b >
<inpu ype=" ex " s yle="colo : #11aa11;"
alue="El ex o de aquí den o cambia de colo a u gus o :)" id="colo ” />
…
</ o m>
Fig. 3.21 Tag pa a pale a de colo es en o mula io.
Se ha decla ado el inpu de ipo colo y con el a ibu o onChange se consigue
ealiza una unción al p oduci se un cambio en dicha di ec i a. En es e caso,
se llama a la unción colo ea () que cambia el colo al campo de ipo ex que se
ha decla ado a con inuación. La Fig. 3.22 mues a un ejemplo de lo que se
debe ap ecia pa a comp oba su co ec o uncionamien o.
Fig. 3.22 Pale a de colo es que apa ece con el inpu de ipo colo .
24 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
3.3.4. Geolocalización
An es de empeza a habla sob e es e ema hay que ecalca que es a
in o mación ha de se opcional, es deci , es a in o mación no se iene que
ob ene a no se que el usua io inal lo pe mi a.
La API de geolocalización pe mi e al se ido ob ene la ubicación del usua io
que es á na egando po dicha página. Con es a in o mación se pueden ealiza
múl iples a eas como po ejemplo selecciona el idioma po de ec o de la
página u ob ene in o mación sob e di e en es se icios p óximos. Como
sucede con los can as la mayo ía de código se encuen a in oducido en
Ja aSc ip u ilizando p opiedades del nue o obje o „na iga o ‟. La Fig. 3.23
mues a el código necesa io y pos e io men e se explican las unciones
u ilizadas de dicha API.
<h ml>
…
<sc ip >
unc ion ge Geoloca ion(){
i (na iga o .geoloca ion){
na iga o .geoloca ion.ge Cu en Posi ion(showPosi ion);
}else{
ale ("Tuna egado no sopo ageolocalizacion.");
}
}
unc ion showPosi ion(posi ion){
documen .ge Elemen ById("La i ud").inne HTML=posi ion.coo ds.la i ude;
…
}
</sc ip >
…
</h ml>
Fig. 3.23 Código necesa io pa a geolicalicación.
La p ime a unción, as comp oba la compa ibilidad con HTML5, ealiza una
llamada a la unción showPosi ion(). Como se ha mencionado, el mos a la
ubicación es opcional y aquí es donde apa ece la unción ge Cu en Posi ion().
Es a unción, en la API de geolocalización, p o oca que apa ezca una ba a
pidiendo pe miso pa a ob ene la in o mación de la ubicación como la que se
mues a en la Fig. 3.24.
Fig. 3.24 Pe ición de pe miso pa a ob ene la localización en Ope a.
En caso de con i ma dicho pe miso, la unción showPosi ion() que se llama en
su in e io pod á ene acceso a la in o mación necesa ia. A la unción se le
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 25
pasa el pa áme o posi ion que ienen dos p opiedades básicas, coo ds y
imes amp. Den o del p ime o exis en odos los pa áme os como la i ud,
longi ud, elocidad, e c; mien as que el segundo es simplemen e eso, una
ma ca empo al. Es a úl ima unción se ha p og amado solici ando odas las
p opiedades del obje o posi ion pe o en el ejemplo de es e apa ado solo se
explica á uno.
El código de es e documen o es muy simila al explicado en el documen o
HTML5 Tes .h ml. En el cue po del documen o se ha ealizado una abla
asignando id’s a odos los compon es. Después desde la unción
showPosi ion() se llaman a odas las p opiedades del elemen o posi ion y se
in oducen en el documen o HTML a mos a . En el ejemplo se llama al campo
“la i ud” y se le in oduce el alo de posi ion.coo ds.la i ude, enca gado de
ob ene dicho alo . La Fig. 3.25 mues a el esul ado de ab i el documen o en
un na egado Ope a. Los campos que salen en blanco es in o mación que el
na egado no sopo a. En el caso del TimeS amp son el núme o de segundos
que han pasado desde el 1 de ene o de 1970, se mues a en alo absolu o.
Fig. 3.25 Resul ado de geolocalicación en Ope a.
3.3.5. T abajando en modo o line
Una aplicación web o line no es más que una lis a de URLs apun ando hacia
a chi os HTML, CSS, Ja aSc ip o a o os elemen os que debe ían de es a
p esen es. La página p incipal apun a a es a lis a llamada mani es ile, que no
es más que un a chi o de ex o colocado en o a pa e del se ido . Si el
na egado sopo a es a ca ac e ís ica de HTML5 lee á la lis a de URLs, se
baja á lo que necesi e, ealiza á copias en local y au omá icamen e las i á
eniendo al día. En el momen o de accede a dicha di ección web es ando sin
conexión a la ed el na egado au omá icamen e mos a á las copias en local.
A pa i de aquí, el p og amado web ha de decidi si ese con enido se iene
que i ac ualizando o no, dejándolo de allado en la aplicación. La inclusión de
es e documen o se ealiza de la o ma que se mues a en la Fig. 3.26.
26 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
<!DOCTYPE HTML>
<h ml xml:lang="es" lang="es" mani es ="almacenado.mani es ">
...
</h ml>
Fig. 3.26 Decla ación de mani es en el documen o HTML.
Es e documen o puede es a colocado en cualquie pa e del se ido pe o
iene que se se ida como ex /cache-mani es po lo que en el caso de u iliza
un se ido web basado en Apache se end ía que in oduci la siguien e línea
en el a chi o h access: AddType ex /cache-mani es .mani es
De es a o ma los a chi os e minados en .mani es se án se idos como se
equie e. La Fig. 3.27 mues a un ejemplo del con enido de es e documen o, el
cual debe empeza con CACHE MANIFEST.
CACHE MANIFEST
/Es ilo.css
/Ja aSc ip .js
/Imagen.jpg
Fig. 3.27 Tex o en el in e io del documen o mani es .
Con el a chi o de la Fig. 3.27, el clien e lee el con enido y Es ilo.css,
Ja aSc ip .js e Imagen.jpg se án desca gados del se ido . La u ilidad de es a
lis a no ecae en desca ga una página con odos sus elemen os, cosa que
puede hace la caché del na egado , sino en el hecho de baja se di e en es
páginas HTML que es án enlazadas en e si y pode na ega en e ellas
simplemen e habiendo enido In e ne al desca ga la página p incipal.
¿Qué sucede si hay algún ipo de con enido que no iene que queda en local?
En el caso de ene una aplicación CGI, po ejemplo, incluida en el a ibu o de
una imagen o un can as que ealiza la unción de con ado no in e esa ía que
eso se almacenase en local ya que pe de ía oda su u ilidad. Pa a e i a es o
se u iliza una línea con la palab a NETWORK y a con inuación lo que no se
quie e desca ga . La o ma de esc ibi lo se mues a en la Fig. 3.28.
CACHE MANIFEST
NETWORK:
/aplicacion.cgi
CACHE:
/Es ilo.css
/Ja aSc ip .js
/Imagen.jpg
Fig. 3.28 U ilización de NETWORK en el documen o mani es .
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 27
Como se puede ap ecia , se in oduce aho a una línea CACHE pa a especi ica
a pa i de donde empieza la pa e que se iene que almacena .
Po úl imo exis e o o ipo de sección llamada secciones al e na i as, o en
inglés Fallback Sec ions. En el caso de que una web u ie a muchas páginas
con muchos elemen os se ía un p oblema ene que desca ga lo odo.
U ilizando dicha sección lo que se consigue es que simplemen e se i án
almacenando en local las páginas que se hayan isi ado. Todas las páginas
apun a ían al a chi o .mani es , y en el momen o de accede a alguna el
na egado p egun a si ya la iene, y en caso nega i o se desca ga ía odo su
con enido. Es o se ealiza c eando una “appcache” (ab e ia u a de aplicación
caché), desca gando el con enido y añadiendo dicha u l en es a pequeña
aplicación. Es o signi ica, que no hay que añadi las páginas en el a chi o
.mani es sino que hay una pequeña aplicación ealizando es a a ea de modo
silencioso. El código se ía el mos ado en la Fig. 3.29.
CACHE MANIFEST
FALLBACK:
/ /o line.h ml
NETWORK:
*
Fig. 3.29 U ilización de FALLBACK en el documen o mani es .
Lo p ime o que apa ece es la sección FALLBACK, después no una u l sino un
pa ón que indica cualquie página del si io web. En el caso de in en a accede
sin ene conexión a In e ne y la página no se encon ase en la appcache, se
mos a ía la página o line.h ml en ez de apa ece un e o . El as e isco que
apa ece en la sección NETWORK indica que en caso de no ene el con enido
en la appcache y ene conexión, pueda con inua bajando con enidos.
A con inuación se p ocede á con el ejemplo p ác ico. Pa a empeza se ha
c eado una ca pe a con odos los documen os que se iene que desca ga el
usua io una ez conec ado. Como se ha comen ado pueden se a chi os
HTML, hojas de es ilo, imágenes, e c. Pa a que el ejemplo quede lo más
sencillo la lis a de a chi os se á la mos ada en la Fig. 3.30.
CACHE MANIFEST
/cache/Pagina2.h ml
/cache/Pagina3.h ml
Fig. 3.30 Llamada a o os documen os HTML en el mani es .
Al accede al a chi o o line.h ml se desca ga á, con él, el a chi o .mani es .
Una ez ealizada dicha acción, pa a comp oba su uncionamien o, se p ocede
a desconec a de In e ne y accede a los links que e e encian a Pagina2.h ml
y Pagina3.h ml. Se puede ap ecia cómo se puede na ega en e dichas

28 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
páginas sin ene conexión al se ido . La Fig. 3.31 mues a las líneas
impo an es del código HTML.
<h ml xml:lang="es" lang="es" mani es ="almacenado.mani es ">
…
<a h e ="cache/Pagina2.h ml">Página 2</a>
…
</h ml>
Fig. 3.31 Llamada a página web almacenada en caché.
Como se puede ap ecia , se añade en la cabece a HTML la u a al a chi o
.mani es y el es o es ag ega las e e encias an o a Pagina2.h ml como a
Pagina3.h ml. En el momen o de pulsa el link se accede a la página web
solici ada aun sin ene conexión.
3.3.6. Video
A ni el p ác ico es e elemen o es comple amen e dis in o a ni el de código que
el can as. La di e encia adica a la ho a de abaja con él ya que odo el
código se esc ibe en el documen o HTML y no se u iliza Ja aSc ip . En el
apa ado 3.1.6 de es e capí ulo se explican eó icamen e los di e en es ipos de
codecs que son más u ilizados en la ac ualidad, y a con inuación se p ocede á
a de alla en qué epe cu e a ni el p ác ico dichos o ma os.
En la ac ualidad hay múl iples p og amas que con ie en ideo de cualquie
o ma o a o o. En es e abajo no se ealiza á una compa a i a de
he amien as sino que se expond á el so wa e necesa io pa a ealiza p uebas
con la nue a di ec i a <VIDEO>. Una he amien a ú il es un di iso de ideo,
pa a abaja con pequeños agmen os que no equie an de mucho iempo al
codi ica los a di e en es o ma os ni consuman muchos ecu sos de ancho de
banda a la ho a de inco po a los en una web. Codi icado es de ideo hay
muchos que codi ican de un o ma o a o o po lo que cualquie p og ama de
es os puede ealiza la a ea eque ida. Hay que ema ca un p oblema con
webM ya que pa a Windows, en la echa en la que se ealizaba es e p oyec o,
no ha sido ácil encon a un p og ama que lo pudie a ealiza . Finalmen e, el
ideo se ha codi icado con i e ogg un complemen o muy ú il pa a el na egado
de Mozilla. En el caso de abaja con dis ibuciones Linux exis en muchas
he amien as pa a la codi icación.
An es de empeza a mos a el código hay que ad e i que se ienen que
in oduci las di ec i as pa a que el ideo sea se ido con el con enedo MIME
que oca. Al se un se ido Apache, en es e p oyec o se ha modi icado el
a chi o h pd.con añadiendo las es líneas que se mues an en la Fig. 3.32.
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 29
AddType ideo/ogg .og
AddType ideo/mp4 .mp4
AddType ideo/webm .webm
Fig. 3.32 Con igu ación del se ido pa a o ece ideo.
La Fig. 3.33 mues a el código ejemplo de es e apa ado.
<h ml>
…
< ideo id="mo ie" wid h="1280" heigh ="720" con ols>
<sou ce s c=" ideos/FT10.mp4"
ype=' ideo/mp4;codecs="a c1.42E01E,mp4a.40.2"' />
<sou ce s c="FT.webm" ype=' ideo/webm; codecs=" p8, o bis"' />
…
<embed s c="mediaplaye .sw " wid h="1280" heigh ="720"
allowsc ip access="always" allow ullsc een=" ue"
Flash a s="wid h=1280&heigh =720&&au os a = ue& epea = ue& ile= ideos/FT10.
l " />
</ ideo>
…
</h ml>
Fig. 3.33 Con igu ación de ideo pa a el na egado .
La di ec i a <VIDEO> es la p ime a decla ación de odas, donde se es ablece
el al o y el ancho con wid h y heigh . El a ibu o con ols si e pa a que
apa ezca una ba a in e io pa a pode pausa , ep oduci la película o subi y
baja el olumen. Lo siguien e es la uen e del a chi o que se a a ep oduci ,
con s c se in oduce la u a del ideo a ep oduci y con el a ibu o codecs se
indican los codecs a u iliza . No es obliga o io el a ibu o ype pe o se ha
in oducido en es e ejemplo po que esul a muy ú il a la ho a de o ece
di e en es opciones pa a pe mi i compa ibilidad con la mayo ía de
na egado es. En dicho a ibu o se especi ica el ipo de ideo de esa uen e y si
el na egado no la sopo a no se desca ga á ese a chi o, aho ando ancho de
banda y acili ando la a ea a conexiones len as. Po úl imo en el ejemplo se ha
pues o la di ec i a <EMBED> pa a añadi el mismo con enido en Flash.
El uncionamien o de es e ejemplo a ni el p ác ico es que el na egado se baja
el con enido HTML y en el caso de no sopo a HTML5 ep oduce el ideo en
Flash. Den o de las múl iples opciones de HTML5, és e desca ga y ep oduce
el o ma o que sopo e, o eciendo la máxima compa ibilidad. Como
incon enien e hay que des aca que pa a o ece odas las opciones de
ep oducción es necesa io ene el ideo en odos esos o ma os, ocupando el
co espondien e espacio en el se ido .
30 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
3.3.7 WebSocke s
An es de empeza a habla de WebSocke s [8] es necesa io explica la
e olución que ha expe imen ado HTML an es de llega a es a ca ac e ís ica.
Pa a empeza , el p o ocolo HTTP no ue diseñado con el p opósi o de albe ga
conexiones ull-duplex y las soluciones que se han ido aplicando has a le echa
han sido modi icaciones de su uncionamien o pa a ob ene el esul ado
deseado. En el caso de que e ene la página con in o mación lo más
ac ualizada posible lo p ime o que se piensa es el es a e escando la página
cons an emen e; ob iamen e no es la solución óp ima.
Se han u ilizado mecanismos de polling, sondeo en inglés, o incluso s eaming
pa a deja la conexión abie a. Un polling con mensajes co os p o oca á ico
innecesa io po la ed ya que se ab e y se cie a una conexión sin ninguna
ob ención de con enido. El denominado long-polling consis e en man ene el
mensaje en el se ido du an e un pe iodo de iempo. El g an incon enien e
adica en que puede habe momen os sin ninguna modi icación y momen os de
muchas modi icaciones, p o ocando un mensaje de g an amaño. El s eaming,
a pa e del conocido hecho de que man ene una comunicación abie a
consume ecu sos, dependiendo de los co a uegos el con enido se pod ía
almacena , e óneamen e, en un bu e y p o oca el mismo e ec o que el long-
polling.
Pa a hace se una idea de lo que son los WebSocke s puede se i el sabe el
nomb e inicial con el cual es aba de inido en la especi icación de HTML5,
“TCPConnec ion”. En la ac ualidad iene su especi icación p opia, como la
geolocalización o los web wo ke s pa a pode se cen a más en el ema. En
esumen, lo que se hace es pasa de una comunicación u ilizando el p o ocolo
HTTP a una basándose en el p o ocolo WebSocke . Se man iene el
in e cambio de in o mación en el p o ocolo HTTP, pe o en el handshake inicial
en e el clien e y el se ido se es ablece la comunicación WebSocke , en la
que se pueden en ia mensajes en ull-duplex. En el capí ulo 5 en el que se
habla de la ca ga de ed de es e p oyec o, se en a á en más de alle sob e la
di e encia que apo a WebSocke .
A con inuación se mues a un ejemplo p ác ico. An es de cen a se con el
código HTML hay que explica algo de los mo imien os ealizados en el
se ido . Como se ha explicado an e io men e, se cambia de p o ocolo pa a
en ia la in o mación po lo que el se ido iene que es a p epa ado pa a
ealiza es a a ea. Exis en múl iples se ido es WebSocke , p og amados en
Ja a, Ja aSc ip o py hon. Exis e una ex ensión pa a Apache llamada
mod_pywebsocke que inco po a la ca ac e ís ica mencionada.
Lamen ablemen e es e ipo de so wa e, al igual que muchas cosas
elacionadas con HTML, es á más p epa ado pa a sis emas Linux que no pa a
Windows en la e sión de 64 bi s. Pa a soluciona es e ema di ec amen e se
ha ins alado el so wa e de py hon [13] en la máquina Windows y se ha
ejecu ado la aplicación u ilizando el in é p e e.
Nue as ca ac e ís icas de HTML5, explicación y ejemplos 31
Dicho lo an e io y debido a que el obje i o de es e p oyec o es el clien e, no se
p o undiza á en el código py hon del se ido , aunque dicho código es á
disponible en el anexo A.2.2. Simplemen e comen a que en el se ido se ha
implan ado un echo que de uel e la in o mación que se le en ía, pa a
comp oba que unciona co ec amen e.
El uncionamien o del WebSocke no solo se puede con empla median e el
na egado . Al se un p o ocolo di e en e se ealiza un cambio de p o ocolo de
anspo e y con el wi esha k se puede ap ecia .
Al analiza el á ico se puede ap ecia el handshake que se es ablece en e
clien e y se ido pa a cambia la conexión de HTTP a ws. La Fig. 3.34 mues a
una cap u a del á ico de ed ealizada con wi esha k en el se ido .
Fig. 3.34 Handshake con el clien e 192.168.1.6 (a iba) y
se ido 192.168.1.4 (abajo).
WebSocke es un p o ocolo que, jun o con la mayo ía de lo is o de HTML5,
es á en cons an e y ac ual e olución. En el momen o de ealiza el p oyec o la
in o mación sob e cómo ealiza la comunicación se encon aba en e la
e sión 75 y 76 de dicho p o ocolo. La e sión implemen ada es la 76 en la que
la mejo a des acable es la inco po ación de cla es, o keys, pa a apo a
segu idad a las comunicaciones. En la Fig. 3.34 se puede ap ecia cómo
abajan con dichas cla es.
Vol iendo al ejemplo del código, en él se c ea una página web con un campo
de ex o en el que el clien e puede esc ibi ; un ex a ea en el que se
in oduci án los da os que lleguen po el socke web y un bo ón que eacciona á
al click, llamando a una unción que en ia á el con enido del p ime campo de
38 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
en qué ecuad o se quie e esc ibi o, en el caso del selec o , qué núme o se
quie e pin a .
Siguiendo en el a chi o Can as.js, la unción selección() ealiza una llamada a
ge Cu so Posi ion2() pa a ob ene la posición del a ón y, haciendo uso de
compa ado es, se da alo a la a iable numSeleccionado. Es a a iable es
global y su unción es la de ene el alo que se inse a en el can as p incipal
median e la unción pin a (). La unción pin a () iene un compo amien o
simila a la de selección(), ob iene la ubicación del click del a ón y pin a en el
can as; además en es a unción se in oduce el alo en la ma iz de juego
SudokuJuego.
Con las unciones explicadas has a es e momen o ya se puede juga . Se
aspasan alo es en e los dos can as dibujados median e a iables globales
en el código Ja aSc ip .
El siguien e añadido a la aplicación es el uso de almacenamien o en local, cuyo
código se encuen a ambién en el a chi o Can as.js y es una de las
p incipales azones po las cuales se abaja con a iables globales. Las
a iables ienen que se modi icadas mien as se juega y las unciones de
almacenamien o local ienen que ecibi pa áme os pa a que el juego quede al
cual se había dejado en el momen o de gua da la pa ida.
Pa a almacenamien o en local se han c eado 3 unciones: Gua da Local(),
Ca ga Local() y pin a Ca gado(). Gua da Local() almacena el sudoku de juego,
el sudoku en el que se es á jugando y los alo es del empo izado .
Ca ga Local() ob iene odos los alo es y llama a pin a Ca gado(). La Fig. 4.7
mues a el código de Ca ga Local().
unc ion Ca ga Local(){
a indiceLocal =0;
o ( =0; <9; ++){
o (ww=0;ww<9;ww++){
SudokuJuego[ww][ ] = localS o age.ge I em(indiceLocal);
indiceLocal++;
}
}
segundosC=localS o age.ge I em("TempoS");
minu osC= localS o age.ge I em("TempoM");
documen .ge Elemen ById(" empo izado Min"). alue=minu osC;
documen .ge Elemen ById(" empo izado Seg"). alue=segundosC;
SudokuElegido=localS o age.ge I em("NumSudoku");
pin a Ca gado (SudokuElegido);
}
Fig. 4.7 Código de Ca ga Local.
Del código an e io se puede ap ecia que los alo es de la ma iz se ca gan
o a ez en la ma iz de juego. Se habían gua dado los alo es con índices

Sudoku con HTML5 39
numé icos del 0 al 80 y se an ob eniendo median e ge I em. Los segundos y
los minu os se ob ienen y se in oducen en el documen o HTML en dos pasos;
es o se debe a que los alo es del con ado ambién son necesa ios a ni el
lógico y an o segundosC como minu osC son las a iables lógicas de es e
con ado . Po úl imo se ob iene el alo del sudoku con el que se es aba
jugando y se llama a pin a Ca gado(). Es a úl ima unción ha sido necesa ia
pa a eca ga los 2 sudokus de juego que al an. Una ez se ca gan el sudoku
con el esul ado y el sudoku con los alo es p ede e minados que no se á
modi icado, se p ocede a pin a en el can as p incipal. Al pin a los núme os es
necesa io pin a en azul los núme os p ede e minados y en neg o los que se
han in oducido du an e el juego.
La úl ima unción de Can as.js hace uso del úl imo Ja aSc ip del p oyec o,
WebSocke .js. La unción es HeAcabado() y se lanza al pulsa el bo ón del
documen o HTML “He acabado”. Es a unción comp ueba que el sudoku se ha
esuel o co ec amen e y en caso a i ma i o lanza un pop up pa a in oduci el
nomb e y llama a la unción en ia (), que se encuen a en el a chi o
WebSocke .js. Hay que ene en cuen a que el WebSocke ac úa po e en os,
es deci , iene ac i idades al ab i se, al ecibi un mensaje, e c.
Den o del a chi o WebSocke .js se cap an dichos e en os y además exis en
dos unciones que si en de in e acción en e la página HTML y el se ido
WebSocke . An es de segui explicando el uncionamien o, se ha de expone
que se ha c eado un ecuad o en el documen o HTML que cambia de colo en
unción de si se ha podido conec a al se ido WebSocke o no. Hoy en día
exis en muchos mo i os po lo que es o puede no sucede co ec amen e,
na egado es que no lo sopo an, e siones de na egado que lo sopo an pe o
u ilizan un p o ocolo de anspo e más nue o y p o ocan e o en la conexión o
incluso que el se ido WebSocke no se haya con igu ado co ec amen e, cosa
p obable cuando se es udia una nue a ecnología como se da en el caso de
es e p oyec o. La Fig. 4.8 mues a la pa e in e io de echa del documen o
HTML p incipal.
Fig. 4.8 WebSocke en documen o HTML.
40 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
El ecuad o e de ap eciable en la Fig. 4.8 mues a que se ha podido
es ablece la conexión con el WebSocke . Al ealiza el onopen del WebSocke
se accede a es e elemen o del documen o HTML y se le cambia el colo de ojo
a e de. La unción en ia () mencionada an e io men e con iene el send que
en ía un s ing con el o ma o “Minu os:Segundos-Nomb e/SudokuElegido”. El
o ma o es es e po emas de código que se ap ecian en la Fig. 4.9 con el
onmessage del WebSocke .
w.onmessage = unc ion (e en o){
a e en oS = e en o.da a;
e en oS = e en oS.spli ("/)");
i (e en oS[1] == SudokuElegido){
Lis a.push(e en oS[0]);
Lis a.so ();
}
…
};
Fig. 4.9 onmessage del WebSocke p incipal.
Es a unción, al ecibi el s ing lo sepa a en dos. Al en ia el sudoku con el que
se es aba jugando, o o usua io puede compa a si es á jugando al mismo
sudoku. En caso de se el mismo, ecibe el s ing con el iempo y el nomb e.
Pues o que el iempo es lo p ime o que apa ece en el s ing con hace un so
ya se o dena y se mues a al usua io en el ex a ea al y como se puede
obse a en la Fig. 4.10.
Fig. 4.10 Página p incipal as iempo jugando.
Sudoku con HTML5 41
La Fig. 4.10 mues a la página HTML as un iempo de juego y aquí se puede
ap ecia lo explicado has a es e pun o. Los núme os en azul que se ca gan po
de ec o y los neg os que se in oducen seleccionándonos en el selec o osa de
la de echa. La ba a de audio con una canción di e en e seleccionada y en la
pa e in e io de echa la in e acción que p opo ciona el WebSocke .
42 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
CAPÍTULO 5. PRUEBAS DE RENDIMIENTO Y ANÁLISIS
DEL TRÁFICO POR LA RED
Las p uebas de endimien o son aquellas p uebas que se u ilizan pa a analiza
la elocidad del sis ema a la ho a de ealiza una de e minada a ea. En el caso
de los se ido es web es a p ueba se ealiza bajo las condiciones a las que se
a a en en a ese sis ema una ez pues o al se icio de los clien es.
Las p uebas pe mi en analiza , en e o as cosas, la ca ga del sis ema, el
es és que puede sopo a y la es abilidad del mismo. Todas es as p uebas se
ealizan en el lado del se ido . En cuan o a la es abilidad, es a man iene un
lujo de pe iciones cons an es y comp ueba si el sis ema las a iende
co ec amen e o si, po ejemplo, deja esiduos de in o mación en la RAM. Po
o a pa e, la p ueba de es és analiza la can idad de usua ios que el sis ema
es capaz de sopo a . Finalmen e la p ueba de ca ga comp ueba iempos de
espues a en e se ido y clien e en unción de las pe iciones; es o es
impo an e en páginas webs que engan acceso a bases de da os o se icios
webs y se quie a comp oba que odo el conjun o unciona de o ma que el
usua io no no e len i ud en el sis ema.
En es e p oyec o se ha abajado en el lado del clien e con la pa e de
p esen ación y debido a es o no se le ha dedicado una p incipal a ención a la
con igu ación del se ido . En las p uebas de ca ga, la ecnología u ilizada en el
apa ado de WebSocke s es lo que puede hace a ia sensiblemen e el
esul ado inal.
Pa a ealiza p uebas en el lado del clien e, en es e p oyec o se han u ilizado
las he amien as SpeedT ace [17], Wi esha k 1.4.4 [18] y el adminis ado de
a eas de Windows. La he amien a SpeedT ace ealiza una a ea simila a las
p uebas de ca ga; pe mi e analiza iempos de in e acción en e el clien e y el
se ido pe o desde el lado del na egado . De hecho, SpeedT ace es un
plugin disponible pa a el na egado Ch ome. Wi esha k po su pa e, es una
he amien a que pe mi e isualiza y analiza el á ico que ci cula po la ed
donde es á conec ada la máquina que lo ejecu a; pe mi iendo en es e caso,
ap ecia el á ico que ci cula po el WebSocke , cosa que la he amien a
SpeedT ace no pe mi e. Po úl imo se ha u ilizado el adminis ado de a eas
de Windows pa a mos a el consumo de ecu sos de HTML5 pa a, po
ejemplo, compa a b e emen e el consumo del mismo ecu so en Flash.
La p ime a p ueba ealizada ha sido la del consumo de ecu sos con el
adminis ado de a eas. Es o es debido a que es a p ueba se ha ealizado con
el único documen o HTML que podía compa a equi a i amen e los ecu sos, el
de ideo. Pa a e i a ca gas adicionales se han c eado dos documen os HTML
nue os. El p ime o, sólo ca ga un a chi o mp4 con el ag de ideo mien as que
el segundo ca ga el mismo ideo pe o en o ma o l den o de la máquina de
Adobe.
P uebas de endimien o y análisis del á ico po la ed 43
Fig. 5.1 Consumo de CPU y RAM con el adminis ado de a eas de Windows.
La Fig. 5.1 mues a el consumo de CPU y RAM a la ho a de ab i los dos
documen os. En el apa ado de RAM, ambos consumen lo mismo; con el
na egado abie o sin nada ca gado la RAM enía ocupada 1.56 GB y al ca ga
los dos documen os HTML se si uaba en 1.70 GB, es u ie a el ideo lanzado o
no. En el uso de CPU apa ecen las di e encias. En la Figu a 5.1 solo se ma ca
un núcleo del p ocesado , pe o el compo amien o se puede deci que es
p ác icamen e simé ico. Las dos p ime as a iaciones de CPU ema cadas con
el p ime cí culo en ojo son debidas a la ep oducción del ideo en o ma o
mp4 (és e se ha ep oducido dos eces); la e ce a a iación de CPU, ma cada
con el segundo cí culo en ojo, es debida a la ep oducción del ideo en Flash.
Los pe iodos a ían po que Flash una ez e minado el ideo de 10 segundos
lo ol ía a ep oduci . Como se puede ap ecia las mon añas son más no ables
en HTML5, la a iación de la CPU en es e caso oscilaba en e el 20% y el 30%
mien as que con Flash se quedaba en e el 20% y el 25%. Con es os
esul ados se puede deci que, en es e caso y con es as condiciones, HTML5
consume más ecu sos ep oduciendo ideo que no Flash.
A con inuación median e SpeedT ace se analiza á el con enido desca gado
po el na egado . La Fig. 5.2 mues a qué ecibe el na egado as la pe ición
de la página web.

44 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
Fig. 5.2 Análisis con SpeedT ace .
En la pa e in e io de la Fig. 5.2 se mues a el p oceso que se sigue a la ho a
de desca ga el con enido. P ime o se baja el documen o HTML con la hoja de
es ilos y los dos can as p incipales. Como Can as.js impo a al es o de
Ja aSc ip s, se inicia la desca ga de es os al inaliza la del p ime o. Po úl imo
se desca ga el ondo de la página web y el mp3 que a en la pa e de audio.
Como se puede ap ecia ha habido p oblemas al desca ga el con enido del
mp3 y se ha in en ado desca ga múl iples eces. En la pa e supe io hay dos
anjas, en la supe io se puede obse a un zoom de la in e io . Como se
puede e , la p ime a mon aña en azul son las pe iciones de con enido
mien as que las g ises indican cuando el na egado es á ocupado debido a la
página web, debido a la desca ga p olongada del mp3 y del ondo. Las anjas
la gas ap eciables en la ba a de abajo indican el iempo que a da en e que
apa ece el pop up pidiendo el nomb e y se en ía. Es o iene en cuen a el
iempo que a da el usua io en pone el nomb e po lo que la du ación se
p olonga a a ios segundos.
Po úl imo se analiza el á ico median e Wi esha k. El obje i o es, a pa e de
ap ecia a ni el de á ico lo mismo que con el SpeedT ace , ap ecia el á ico
P uebas de endimien o y análisis del á ico po la ed 45
del WebSocke ya que és e no apa ece en es a úl ima he amien a po no se
á ico HTTP.
Fig. 5.3 Ejemplo de GET del con enido.
En la in e acción en e clien e y se ido el clien e ealiza GETs pa a solici a el
con enido; la Fig. 5.3 mues a un ejemplo de ello. Al explica la u ilidad del
WebSocke se hablaba de la educción de á ico al no ene que ealiza una
pe ición, sino es ablece una comunicación median e o o p o ocolo. La Fig. 5.4
mues a el amaño de un en ío de da os u ilizando el WebSocke .
Fig. 5.4 Ejemplo de en ío de da os con WebSocke .
Como se puede ap ecia , la educción de by es de un simple GET al en ío de
odos los da os que equie e la aplicación, aunque no sean muchos, pasa de
545 By es a 78 By es. G acias a es o se consigue educi en g an can idad el
á ico en la ed, lo cual e a uno de los obje i os p incipales de es a nue a
ca ac e ís ica apa ecida pa a HTML5 y mo i o de in e és del análisis del á ico.
46 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
CAPÍTULO 6. CONCLUSIONES Y LÍNEAS FUTURAS
El apa ado de conclusiones se di ide en cua o subapa ados. Un análisis de
los ecu sos u ilizados a la ho a de ealiza el p oyec o a modo de es udio del
posible impac o ambien al. Un análisis de los obje i os ma cados inicialmen e,
un análisis de las posibles mejo as al p oyec o o posibles a ian es y inalmen e
una conclusión pe sonal.
6.1. Impac o medioambien al
Po el hecho de se un p oyec o basado en desa ollo de so wa e se pod ía
a i ma que no supone un impac o di ec o al medio ambien e. En caso de
especi ica un impac o medioambien al, se pod ía hace mención del consumo
eléc ico de los componen es u ilizados, como la o e del o denado , el moni o
y el ou e que da acceso a In e ne . Es os componen es pueden a ia
no ablemen e el consumo eléc ico po lo que es e impac o medioambien al
indi ec o es di ícil de cuan i ica .
6.2. Análisis de los obje i os ma cados
El p ime obje i o e a el de analiza de o ma eó ica la e olución de HTML de
su e sión 4 a la 5. Al i hablando de cada una de las nue as ca ac e ís icas se
ha ido explicando el obje i o de la apa ición de és a. A modo de esumen se
puede deci que HTML5 añade elemen os que e an ealmen e necesa ios.
Mucho iempo es ancado en la e sión 4 había p o ocado que la web no
es u ie a p epa ada pa a el uso que aho a ecibe In e ne . HTML5 esuel e la
mayo ía de las nue as necesidades y sigue en cons an e e olución.
Los ejemplos p ác icos han sido ealizados co ec amen e y de o ma didác ica
pa a que un lec o sin expe iencia lo pueda segui sin p oblemas. Todos ellos
han uncionado co ec amen e po lo que se puede deci que el obje i o
ma cado inicialmen e se ha cumplido. La conclusión a ex ae no a ía as la
compa a i a eó ica; elemen os muy po en es y con g andes opciones. El
incon enien e que se puede ap ecia es que no odos los na egado es, a día
de hoy, sopo an co ec amen e odas las nue as uncionalidades. Ya no solo
en é minos de HTML5 sino con las di e en es codi icaciones de ideo que hay.
El p oyec o inal ha mos ado an o los p os como los con as de HTML5. No
exis e una complejidad ex ema a ni el de lógica del juego, pe o se ap ecia
cla amen e la po encia de HTML5 al in e ac ua múl iples de sus nue as
ca ac e ís icas. Po o a pa e, es o mismo ha hecho apa ece p oblemas
mayo es de compa ibilidad. Finalmen e se ha conseguido alcanza el obje i o
del p oyec o al ealiza un juego que unciona en el na egado Ch ome.
Conclusiones y líneas u u as 47
El úl imo obje i o ha sido el de las p uebas de ca ga en el lado del clien e, en el
na egado . És as han sido ealizadas has a el pun o que había ma cado en el
p oyec o y, aunque la compa a i a Flash con a HTML5 no se encon aba en
los obje i os, se ha podido ealiza una pequeña p ueba g acias al documen o
HTML5 que a aba el ep oduc o de ideo. La p ueba más des acable ha sido
la del á ico que gene a el clien e. El in e cambio de in o mación en e clien e y
el se ido usando WebSocke deja cla amen e en e idencia lo inde icien e que
es el p o ocolo HTTP pa a ans e encias pequeñas o asínc onas de da os.
WebSocke o ece un aho o de á ico cla amen e ap eciable. Una de las
mejo es ca ac e ís icas in oducidas en es a nue a e sión de HTML, sin duda.
Fue a de los obje i os y a modo de esumen con iene habla de las i udes de
HTML5. HTML5 es una ecnología que oda ía sigue e olucionando y iene
mucho u u o. G andes compañías como Google o Apple es án apoyando su
e olución, ya sea po in e eses económicos o po la iloso ía del so wa e lib e,
y suponen un g an espaldo a la ho a de gana e eno en el me cado. En un
u u o HTML5 es a á muy ex endido, ya sea en los na egado es de los
o denado es o en los na egado es pa a mó iles.
6.3. Líneas u u as
El obje i o p incipal de es e p oyec o no ha sido el de la ealización del
p oduc o inal, sino el es udio de una nue a ecnología. Es o signi ica que las
posibles mejo as se ían en é minos de endimien o.
A la ho a de analiza que se pod ía ealiza as es e p oyec o la solución es
muy amplia. El in e és apa ece, más que en amplia la aplicación inal, en el
campo de las múl iples APIs que es án apa eciendo. Escoge cualquie a y
empeza un p oyec o nue o a pa i de ella. Exis en de odo ipo, desde las que
o ecen ans o ma el almacenamien o en local en una base de da os has a,
las que pa a el au o del abajo pa ecen más a ac i as, aquellas diseñadas
pa a la implemen ación de ideojuegos.
6.4. Conclusión pe sonal
Desde casi el comple o desconocimien o de la p og amación en HTML y
Ja aSc ip es e p oyec o ha lle ado al ap endizaje de un lenguaje que mien as
se es udiaba iba e olucionando de o ma pa alela.
Exis e elicidad, no solo po la inalización del p oyec o, sino ambién po la
can idad de cosas ap endidas. No ha sido una pues a en ma cha de una
ecnología o algo eó ico ap endido en la uni e sidad sino una pues a en
p ác ica del concep o p incipal en ella, sabe desen ol e se con algo nue o.
Desde una idea inicial sob e un p oyec o de compa a i a eó ica has a habe
desa ollado inalmen e un juego ha esul ado se una supe ación de las
expec a i as iniciales.
54 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
de __ini __(sel , conn, se e ):
asynco e.dispa che _wi h_send.__ini __(sel , conn)
sel .se e = se e
sel .se e .sessions.append(sel )
sel . eadys a e = "connec ing"
sel .bu e = ""
de handle_ ead(sel ):
da a = sel . ec (1024)
sel .bu e += da a
i sel . eadys a e == "connec ing":
sel .pa se_connec ing()
eli sel . eadys a e == "open":
sel .pa se_ ame ype()
de handle_close(sel ):
sel .se e .sessions. emo e(sel )
sel .close()
de pa se_connec ing(sel ):
heade _end = sel .bu e . ind(" n n")
i heade _end == -1:
e u n
else:
heade = sel .bu e [:heade _end]
# emo e heade and ou by es o line endings om bu e
sel .bu e = sel .bu e [heade _end+4:]
heade _lines = heade .spli (" n")
heade s = {}
# alida e HTTP eques and cons uc loca ion
me hod, pa h, p o ocol = heade _lines[0].spli (" ")
i me hod != "GET" o p o ocol != "HTTP/1.1" o pa h[0] != "/":
sel . e mina e()
e u n
# pa se heade s
o line in heade _lines[1:]:
key, alue = line.spli (": ")
heade s[key] = alue
heade s["Loca ion"] = "ws://" + heade s["Hos "] + pa h
sel . eadys a e = "open"
sel .handle = sel .se e .handle s.ge (pa h, None)(sel )
i "Sec-WebSocke -Key1" in heade s.keys():
sel .send_se e _handshake_76(heade s)
else:
sel .send_se e _handshake_75(heade s)
de e mina e(sel ):
sel . eady_s a e = "closed"
sel .close()
de send_se e _handshake_76(sel , heade s):
"""
Send he WebSocke P o ocol .76 handshake esponse

Anexos 55
"""
key1 = heade s["Sec-WebSocke -Key1"]
key2 = heade s["Sec-WebSocke -Key2"]
# ead addi ional 8 by es om bu e
key3, sel .bu e = sel .bu e [:8], sel .bu e [8:]
esponse_ oken = sel .calcula e_key(key1, key2, key3)
# w i e ou esponse heade s
sel .send_by es("HTTP/1.1 101 Web Socke P o ocol Handshake n")
sel .send_by es("Upg ade: WebSocke n")
sel .send_by es("Connec ion: Upg ade n")
sel .send_by es("Sec-WebSocke -O igin: %s n" % heade s["O igin"])
sel .send_by es("Sec-WebSocke -Loca ion: %s n" % heade s["Loca ion"])
i "Sec-WebSocke -P o ocol" in heade s:
p o ocol = heade s["Sec-WebSocke -P o ocol"]
sel .send_by es("Sec-WebSocke -P o ocol: %s n" % p o ocol)
sel .send_by es(" n")
# w i e ou hashed esponse oken
sel .send_by es( esponse_ oken)
de calcula e_key(sel , key1, key2, key3):
# pa se keys 1 and 2 by ex ac ing nume ical cha ac e s
num1 = in ("".join([digi o digi in lis (key1) i digi .isdigi ()]))
spaces1 = len([cha o cha in lis (key1) i cha == " "])
num2 = in ("".join([digi o digi in lis (key2) i digi .isdigi ()]))
spaces2 = len([cha o cha in lis (key2) i cha == " "])
combined = s uc .pack(">II", num1/spaces1, num2/spaces2) + key3
# md5 sum he combined by es
e u n hashlib.md5(combined).diges ()
de pa se_ ame ype(sel ):
while len(sel .bu e ):
ype_by e = sel .bu e [0]
i ype_by e == " x00":
i no sel .pa se_ ex ame():
e u n
de pa se_ ex ame(sel ):
e mina o _index = sel .bu e . ind(" xFF")
i e mina o _index != -1:
ame = sel .bu e [1: e mina o _index]
sel .bu e = sel .bu e [ e mina o _index+1:]
s = ame.decode("UTF8")
sel .handle .dispa ch(s)
e u n T ue
else:
# incomple e ame
e u n alse
de send(sel , s):
i sel . eadys a e == "open":
sel .send_by es(" x00")
sel .send_by es(s.encode("UTF8"))
sel .send_by es(" xFF")
56 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
de send_by es(sel , by es):
asynco e.dispa che _wi h_send.send(sel , by es)
class EchoHandle (objec ):
"""
EchoHandle epi e lo que se le en ie a no se que se in oduzca la palab a bingo, que iene
so p esa.
"""
de __ini __(sel , conn):
sel .conn = conn
de dispa ch(sel , da a):
sel .conn.send("S dice:" + da a)
class WebSocke Se e (asynco e.dispa che ):
de __ini __(sel , po =80, handle s=None):
asynco e.dispa che .__ini __(sel )
sel .handle s = handle s
sel .sessions = []
sel .po = po
sel .c ea e_socke (socke .AF_INET, socke .SOCK_STREAM)
sel .se _ euse_add ()
sel .bind(("", po ))
sel .lis en(5)
de handle_accep (sel ):
conn, add = sel .accep ()
session = WebSocke Connec ion(conn, sel )
i __name__ == "__main__":
p in "S a ing WebSocke Se e "
WebSocke Se e (po =8080, handle s={"/echo": EchoHandle })
asynco e.loop()
Anexos 57
A.3 Cap u as na egado es
A.3.1 Ch ome 10
A.3.2 Fi e ox 3.6
A.3.3 Fi e ox 4.0
58 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
A.3.4 In e ne Explo e 8
A.3.5 In e ne Explo e 9
Anexos 59
A.3.6 Ope a 11
A.3.7 Sa a i 5

60 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
A.4 Código de la aplicación inal
A.4.1 Final.h ml
<!DOCTYPE h ml>
<h ml xml:lang="es" lang="es">
<head>
<me a cha se ="u -8">
< i le>Jugando con Can as</ i le>
<link el="s yleshee " ype=" ex /css" h e ="ConEs ilo.css" />
<sc ip s c="Can as.js"></sc ip >
<sc ip s c="audio.js"></sc ip >
</head>
<body onload="dibuja P incipal(); dibuja Selec o ();WebSocke ();">
<di s yle="heigh :40%; wid h:100%" class="Jus i icadoCen ado">
<h1>Sudoku sob e HTML5</h1>
</di >
<di s yle="heigh :60%;">
<di s yle="wid h:80%; loa :le " class="Jus i icadoCen ado">
<can as heigh ="290" wid h="290" id="p incipal"></can as>
<b >
<bu on onClick="Ca ga Local()" >Ca ga </bu on>
<bu on onClick="Gua da Local()">Gua da </bu on>
<bu on onClick="HeAcabado()">He acabado</bu on>
<b >
<b >
<SELECT NAME="elegi sudoku"
onChange="pin a P incipal( his.op ions[ his.selec edIndex]. alue); ese Con ado
();bo a Lis a();">
<op ion selec ed>--- Sudokus ---</op ion>
<op ion alue="Sudoku1" >Sudoku1</op ion>
<op ion alue="Sudoku2">Sudoku2</op ion>
<op ion alue="Sudoku3">Sudoku3</op ion>
</SELECT>
<b >
<b >
<audio au oplay con ols="" id=" ep oduc o ">
<sou ce s c="Musica/01_ i le.mp3">
</audio>
<b >
<b >
<SELECT NAME="selec o Cancion"
onChange="selecciona Cancion( his.op ions[ his.selec edIndex]. alue)">
<op ion selec ed>--- Canciones ---</op ion>
<op ion alue="Cancion1" >Ma io</op ion>
<op ion alue="Cancion2">Ma io e is1</op ion>
<op ion alue="Cancion3">Ma io bajo el agua</op ion>
</SELECT>
</di >
<di s yle="wid h:20%; loa : igh ;" class="Jus i icadoCen ado">
<can as heigh ="130" wid h="97" id="selec o "
onClick="ac i a Con ado ()"></can as>
<b >
<b >
Tempo izado :
<b >
<inpu ype=" ex " id=" empo izado Min" size="1" s yle=" ex -align: igh ">
<inpu ype=" ex " id=" empo izado Seg" size="1">
< able class="Cen ado">
< >
Anexos 61
< d >Conec ado</ d>
< d id="conec ado" ></ d>
</ >
< >
< d colspan="2">
< ex a ea id="ou pu " ows="15" cols="20"></ ex a ea>
</ d>
</ >
</ able>
</di >
</di >
</body>
</h ml>
A.4.2 ConEs ilo.css
@cha se "u -8";
.Jus i icadoDe echa {
ex -align: igh ;
}
.Jus i icadoCen ado {
ex -align: cen e ;
}
.Cen ado {
ma gin-le :au o;
ma gin- igh :au o;
}
#conec ado{
wid h:15px;
backg ound-colo :#FF0000;
}
can as{
backg ound-colo :#FFFFFF;
}
body {
backg ound-image: u l(„Fondo/ ondo_sudoku.png‟);
backg ound- epea : no- epea ;
}
A.4.3 Audio.js
// Una unción que ecibe un s ing con Cancion1, Cancion2 o Cancion3 que son los id's de un
selec y en unción de la selección ca ga una canción u o a.
unc ion selecciona Cancion (NumCancion){
i (NumCancion == "Cancion1"){
documen .ge Elemen ById(" ep oduc o ").s c="Musica/01_ i le.mp3";
//modi ica el sou ce de un <audio>
documen .ge Elemen ById(" ep oduc o ").play();
//inicia la ep odcción de la canción "ca gada"
}
62 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
else i (NumCancion == "Cancion2"){
documen .ge Elemen ById(" ep oduc o ").s c="Musica/02_ma io_ e is_(s anda d_l _1,_2
,_8,_9).mp3";
documen .ge Elemen ById(" ep oduc o ").play();
}
else i (NumCancion == "Cancion3"){
documen .ge Elemen ById(" ep oduc o ").s c="Musica/1-03-unde wa e .mp3";
documen .ge Elemen ById(" ep oduc o ").play();
}
}
A.4.4 Can as.js
//documen .w i e es como si esc ibie a en es e documen o el con enido del s c.
//Pa a es e sc ip es como si el código se encon a a en es e js.
documen .w i e("<sc ip ype=' ex /ja asc ip ' s c='Ca ga Inicial.js'></sc ip >");
documen .w i e("<sc ip ype=' ex /ja asc ip ' s c='Con ado .js'></sc ip >");
documen .w i e("<sc ip ype=' ex /ja asc ip ' s c='PosicionPun e o.js'></sc ip >");
documen .w i e("<sc ip ype=' ex /ja asc ip ' s c='WebSocke .js'></sc ip >");
//VARIABLES NECESARIAS
//Va iables del sudoku p incipal, decla adas a pa e pa a que se puedan u iliza en di e en es
// unciones
a SudokuP incipal = new A ay (9);
a SudokuResuel o = new A ay (9);
a SudokuJuego = new A ay (9);
o (i=0;i<9;i++){
SudokuP incipal[i]=new A ay(9);
SudokuResuel o[i]=new A ay(9);
SudokuJuego[i]=new A ay(9);
}
//Se inicializa es a a iable pa a ca ga po de ec o el sudoku 1
a SudokuElegido = "Sudoku1";
//Va iable del selec o que indica que núme o hay que in oduci en el sudoku p incipal
a numSeleccionado=0;
//Va iables del can as p incipal pa a pode u iliza las en las di e en es unciones
a p incipal;
a c xp;
a anchop;
a al op;
//FUNCIONES
//La uncion dibuja P incipal c ea el Can as del Sudoku
unc ion dibuja P incipal(x, y) {
//Se ob ienen los da os necesa ios pa a pode abaja con el can as p incipal
p incipal=documen .ge Elemen ById("p incipal");
c xp = p incipal.ge Con ex ("2d");
anchop= p incipal.wid h;
al op=p incipal.heigh ;
//Se añade un e en lis ene que llama a la unción pin a con un click en el can as
p incipal.addE en Lis ene ("click", pin a , alse);
//Se dibuja la cuad icula con lineas de pun o a pun o
c xp.beginPa h();
Anexos 63
o ( a x =0.5; x < anchop; x += 32) {
c xp.mo eTo(x, 0);
c xp.lineTo(x, 288.5);
}
o ( a y = 0.5; y < al op; y += 32) {
c xp.mo eTo(0, y);
c xp.lineTo(288.5, y);
}
c xp.s okeS yle = "#00e";
c xp.s oke();
c xp.beginPa h();
c xp.lineWid h = 3;
o ( a x = 0.5; x < anchop; x += 96) {
c xp.mo eTo(x, 0);
c xp.lineTo(x, 288.5);
}
o ( a y = 0.5; y < al op; y += 96) {
c xp.mo eTo(0, y);
c xp.lineTo(288.5, y);
}
c xp.s okeS yle = "#000";
c xp.s oke();
//Se llama a la unción pin a P incipal que añade los níme os del sudoku a la cuad icula
pin a P incipal (SudokuElegido);
}
//La unción pin a P incipal añade los núme os al sudoku p incipal según el sudoku
//seleccionado. Al necesi a la ma iz lógica pa a sabe que núme os in oduci , es a unción
// ambién ca ga las ma ices lógicas pa a pode ealiza el juego.
unc ion pin a P incipal (desplegable1){
SudokuElegido = desplegable1;
SudokuP incipal = Ca ga deA chi o(desplegable1);
SudokuJuego = Ca ga deA chi o(desplegable1);
SudokuResuel o = Ca ga Solucion (desplegable1);
c xp. ex Align = "cen e ";
c xp. illS yle= "whi e";
//algunos na egado es ole an " ", o os hay que pone # ...hay p oblemas a ios
a xx=0;
a yy=0;
//Se "bo a" odo pin ando ec angulos en blanco encima de lo que pudie a habe en los
ecuad os
o ( a x = 10; x < anchop-10; x += 32){
o ( a y = 10; y < al op-10; y += 32){
c xp. illRec (x, y, 10, 10);
}
}
//Se pin an en azul los núme os iniciales del sudoku.
c xp. illS yle= "blue"; //229
o ( a x = 16.5; x < anchop; x += 32){
o ( a y = 16.5; y < al op; y += 32){
i (SudokuP incipal[yy][xx] !=0)
c xp. illTex (SudokuP incipal[yy][xx], y, x);
yy++;
}
xx++;
yy=0;
}
}
70 Es udio, uso e implemen ación de una aplicación de las nue as ca ac e ís icas de HTML5
};
//Al ecibi in o mación del websocke comp ieba si la in o mación ecibida es del sudoku al que
//es amos jugando. En caso de se lo in oduce lo ecibido en la lis a y la o dena. In oduciendo
//Dicha lis a en el ex a ea p incipal pa a mos a lo al usua io.
w.onmessage = unc ion (e en o){
a e en oS = e en o.da a;
e en oS = e en oS.spli ("/)");
i (e en oS[1] == SudokuElegido){
Lis a.push(e en oS[0]);
Lis a.so ();
documen .ge Elemen ById("ou pu "). alue ="";
o (a=0; a<Lis a.leng h; a++)
documen .ge Elemen ById("ou pu "). alue +=Lis a[a] + " n";
}
};
//Al cambia de sudoku hay que einicia la lis a pues o que los alo es no si en.
unc ion bo a Lis a(){
Lis a= new A ay();
documen .ge Elemen ById("ou pu "). alue ="";
}
//La uncion en ia manda con w.send al se ido los alo es del empo izado , el nomb e del
//usua io y el sudoku en el que se es á jugando.
unc ion en ia (){
a name=p omp ("In oduce u nomb e");
i (name!=null && name!=""){
iempoM=documen .ge Elemen ById(" empo izado Min"). alue;
iempoS=documen .ge Elemen ById(" empo izado Seg"). alue;
i ( iempoM.leng h==1)
iempoM="0"+ iempoM;
i ( iempoS.leng h==1)
iempoS="0"+ iempoS;
w.send( iempoM+":"+ iempoS+"-"+name+"/)"+SudokuElegido);
//en es e pun o se manda la in o mación al websocke median e la uncion send.
}
}