Desarrollo Web para Dispositivos Móviles PDF

DESARROLLO WEB
PARA DISPOSITIVOS
MVILES
HERRAMIENTAS PARA DISEAR Y PROGRAMAR W EBA PPS
por Fernando Luna
RedUSERS
t S
TIT U L O :
Desarrollo w eb para dispositivos m viles
AUTORES:
Fernando Luna
C O LE C C I N :
Manuales Users
FO RM ATO:
24xl7cm
PG INAS:
320
Copyright O MMXIV. E s una publicacin de Fox Andina en coedicin con DLAGA S.A. Hecho el depsito que m arca la ley 11723.
Todos los derechos reservados. E s ta publicacin no puede ser reproducida ni en todo ni en parte, por ningn medio actual o
futuro sin el permiso previo y por escrito de Fox Andina S.A . Su infraccin est penada por las leyes 11723 y 25446. La editorial
no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricacin, funcionamiento y/o utilizacin de los
servicios y productos que se describen y/o analizan. Todas las m arcas mencionadas en este libro son propiedad exclusiva de sus
respectivos dueos. Impreso en Argentina. Libro de edicin argentina. Primera impresin realizada en Sevagraf, Costa Rica 5226.
Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Aires en X, MMXIV.
ISBN 978-987-1949-83-0
L u n a , Fern a n d o
D e s a r r o l l o w e b p a r a d is p o s it iv o s m v il e s . - l a e d . - C i u d a d A u t n o m a d e B u e n o s A i r e s : F o x A n d i n a ;
B u e n o s A ir e s : D a la g a , 2 0 1 4 .
3 2 0 p . ; 2 4 x 1 7 cm . - (M a n u a l u se rs; 2 6 9 )
ISB N 978-987-1949-83-0
1 . In f o r m t ic a . I . T tu lo
CDD 005.3
USEftS
P R E L IM IN A R E S
Fernando Luna
Es diplom ado en desarrolllo de
aplicaciones para d isp o sitivo s m viles
y actualm ente se desem pea com o ana
lista funcional de sistem as. Realiza tareas
de relevam iento, diseo, prototipado y
especificaciones tcnicas para brindar
soluciones inform ticas.
Colabora con las revistas USERS
y POWER USERS y en vario s blogs de
program acin y tecnologa.
En el ao 2011 lanz su p rim er libro,
VISUAL BASIC 2010- M anual del programador.

E-mail: fernando@ vidam obile.com .ar
Twitter: @m obilepadawan
Facebook: facebook.com/ferpro
Dedicatoria
Esta nueva obra est dedicada a m is hijos Nicols y Ju lin , que son el com
bustible que im pulsa mi m otor de aprendizaje y constante mejora.
A mi com paera de vida, Laura, quien me brinda la perfecta arm ona em o
cional; y a mis viejos, quienes siguen ilum inando desde el ter mi cam ino por
este mundo.
Agradecim ientos
Sin duda no puedo d ejar de agradecer a la ed ito rial por el constante
ap oyo y o rientaci n p ara que mi segundo sueo se co n vie rta en realidad.
Tam bin a mi fa m ilia, q uienes siguen respetando mis tiem p o s y acom pa
ndom e en el sueo de ser autor.
www.redusers.com
USERS
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
Prlogo
Mi infancia estuvo acom paada de algn que otro juguete
electrnico y tam bin de la pasin de mi padre por la msica
contem pornea, quien hizo que me criara desde tem prana edad
rodeado de tocadiscos, com binados y grabadores m onoaurales.
Por suerte (o por desgracia), la profesin de mi progenitor
lo oblig a tener soldadores y destornilladores de todo tipo,
y fueron estas herram ientas las culpables de incitarm e a saciar
mi fanatism o por la electrnica, a conocer ms de cerca cada
com ponente que conform aba los artefactos.
En mi ad olescencia me ocup de aprender los secretos de
la electrnica aplicado s al m undo de la radio, el audio y la co m
putacin, en el m om ento en que a esta ltim a an se la llam aba
"electrnica d ig ital.
Ya con la pedagoga m oldeada, gracias a mi amigo Hernn,
del m aravillo so m undo del silicio, las placas conductoras y las
m em branas d ielctricas, realic un paso fugaz por el mundo
de las com unicaciones entre radioaficionados.
Luego lleg mi prim era com putadora, una 80286 con 2 MB
de m em oria RAM, con la que com enc a dar m is prim eros
pasos en el m bito de la com putacin: prim ero, com o operador
ofim tico y diseador grfico; despus llegaron la anim acin
y el diseo asistido por com putadora; y, por ltim o, la progra
macin. En mi caso, la ltim a fue la vencida.
Los ltim os protagonistas que generaron inters en m
fueron los BBS, seguidos de internet. Estas inm ensas centrales
de inform acin que crecen da a da term inaron de fo rjar mis
conocim ientos y mi pasin por este m a ravillo so m undo digital.
La evo lu ci n tecnolgica sigui avanzando, y hoy encuentro
conjugados, en cualq uier d isp o sitivo m vil, los cuatro elem en
tos que m arcaron mi pasin por el desarrollo de aplicaciones
para este pequeo m undo de bolsillo: la electrnica, la in fo rm
tica, las com unicaciones y la program acin. Esta ltim a es, sin
dudas, la que me perm ite estructu rar y m oldear la m anera en
que quiero d isfru tar de las otras tres.
Fernando Ornar Luna
www.redusers.com
t/ S E / ?S
El libro de un vistazo
Esta obra est destinad o a d ise ad o res web, program adores y e n tu sias
tas de la tecnologa que deseen crear o ad ap tar un sitio w eb a los d isp o s i
tivo s m viles. A lo largo del libro b rin d arem o s co no cim ien to s tiles para
d isear y p rog ram ar W ebApps d inm icas y explotarem os las capacidades
del h ard w are de estos d isp o sitivos.
PLATAFORMAS Y TECNOLOGAS MVILES

COMPONENETES DE JQUERY MOBILE
C o m o u su a rio s d e e q u ip o s m v ile s , s e g u ra m e n te
C o n la s n o c io n e s b s ic a s d e e s t e fra m e w o rk ,
p e n s a m o s q u e la re vo lu c i n d e e s t o s e s
e x p lo ta re m o s la s o p c io n e s q u e e s t e n o s brinda
m u y re c ie n te , p e ro e n v e rd a d lleva d c a d a s
a t r a v s d e lo s w id g e ts . C o m p o n e n te s q u e
g e s t n d o s e . C o n o c e r e m o s la h is to ria y e v o lu c i n
n o s p e rm itir n d e s a r ro lla r s o lu c io n e s p a r a las
d e lo s d is p o s itiv o s m v ile s , lo s p rin c ip a le s
d ife re n te s p la ta fo rm a s m v ile s e n la s q u e se
c o m p e t id o r e s y la s h e rra m ie n ta s n e c e s a r ia s
d e s p le g a r n u e s tro p r o y e c to w e b .
p a ra in g r e s a r e n e l d e s a r ro llo d e a p lic a c io n e s .
L / l/ l/
HTML5
INTERACCIN CON EL HARDWARE

DE COMUNICACIONES
H T M L 5 e s e l le n g u a je q u e c o n ju g la tra n s ic i n
H a b ie n d o c o n s o lid a d o e l le n g u a je H T M L 5
d e s itio s w e b , d e e s c r it o r io a m v ile s .
c o n jQ u e ry M o t )ile y J a v a S c r i p t , e s t e c ap tu lo
C o n o c e r e m o s su s fu n c io n e s d e s t a c a d a s e
n o s p e rm itir e x p lo ra r a l m x im o la s d iv e rs a s
in g r e s a re m o s al m u n d o d e la s c o m u n ic a c io n e s
c a p a c id a d e s di 3 c o m u n ic a c i n q u e p u e d e
d e la m a n o d e la g e o lo c a liz a c i n .
d e s a r ro lla r una w e b m vil e n los s m a r tp h o n e s

y ta b le ts .
l/ l/ l/
FUNDAMENTOS DE JQUERY MOBILE

jQ u e ry M o b ile b rin d a a d is e a d o r e s y
LENGUAJE S DE PROGRAMACIN
p r o g r a m a d o r e s h e rra m ie n ta s p a ra c r e a r
E l c o n te n id o d in m ic o de la W e b n o s p e rm ite
una e s tr u c tu r a w e b m vil y fu n c io n a l.
c o m p le m e n ta r H T M L 5 , jQ u e ry M o b ile, Ja v a S c r ip t
A p r e n d e r e m o s a u tiliz ar e s t e fra m e w o rk , q u e
y el a c c e s o a l h a rd w a re d el d is p o s itiv o c o n
n o s s o lu c io n a r f c ilm e n te la a rd u a ta r e a de
el le n g u a je d e p ro g ra m a c i n P H P y la b a s e
d is e a r e s t t ic a m e n t e una w e b h o m o g n e a
de d a to s M y S Q L , p a ra d e s a rro lla r s o lu c io n e s
y m u ltip la tafo rm a.
m v ile s d e s e n te n d id a s del c o n te n id o e s t tic o .
www.redusers.com
USERS
* 0 7
PHONEGAP
ALMACENAMIENTO LOCAL
Y APLICACIONES OFFLINE
E n e s t e c a p t u lo in t r o d u c ir e m o s el
O tro a v a n c e surgido d e la p la ta fo rm a H T M L 5
f r a m e w o r k P h o n e G a p y e l s e r v ic io
e s la c a p a c id a d d e a lm a c e n a r in fo rm aci n en el
P h o n e G a p B u ild , q u e p e r m it e c o n v e r t ir una
n a v e g a d o r d el clien te. A q u n o s in tro d u cirem o s en
W e b A p p p a r a m v ile s e n u n a a p p q u e p o d r
lo s fu n d a m e n to s b s ic o s d e la utilizacin d e W e b
d is t r ib u ir s e en la s p r in c ip a le s t ie n d a s d e
S t o r a g e , W e b S Q L , In d ex ed D a ta b a s e y A p p C a c h e
a p lic a c io n e s m v ile s .
*na
WEBAPPS PARA iOS
|V|/ *AeA
BB10, WINDOWS PHONE

Y EMULADORES WEB
E l s is t e m a o p e ra tiv o m vil d e A p p le p re s ta
I
|
l/ l/ l/
n o v e d o s a s c a p a c id a d e s p a r a W e b A p p s . Aqu
A g ru p a m o s aqu la s b a s e s p a ra utilizar las
la s a p r o v e c h a r e m o s , m o d ific a n d o d e fo rm a
h e rra m ie n ta s de testing q u e o fre c e n los diferentes
t ra n s p a r e n t e n u e s tra s a p lic a c io n e s w e b
fa b ric a n te s d e d isp o sitivo s m viles. E s to n o s
m v ile s p a r a q u e fo rm e n p a rte d e l e s c rito rio
perm itir p ro b ar lo s d esarro llo s en las distintas
d e O S c o m o una a p lic a c i n n ativa .
p la ta fo rm a s virtuales, en c a s o d e n o p o s e e r los
WEBAPPS PARA ANDROID Y OTROS

DISPOSITIVOS
I
i
A n d ro id a d o p t la s c a p a c id a d e s p r e s t a d a s p o r
E s t e a p n d ic e e n g lo b a lo s fu n d a m e n to s de
e l n a v e g a d o r w e b S a f a r i. C o n o c e r e m o s c m o
F ire fo x O S , su s im u la d o r y la a rq u ite c tu ra d e
a g r e g a r u n a a p lic a c i n w e b al e s c r it o r io de
s u s a p lic a c io n e s . T a m b i n v e re m o s la s b a s e s
A n d ro id . L u e g o r e p a s a r e m o s la s s o lu c io n e s
p a r a d istrib u ir n u e s t r a s W e b A p p s e n M ozilla
q u e o tr a s p la ta fo rm a s o fre c e n e n e s t e te rre n o .
M a rk e tp la c e .
IN FO R M AC IO N C O M P LE M E N TA R IA
A lo largo de este manual, podr en co ntrar una se rie de recu ad ro s que le brindarn inform acin com plem entaria:
curio sid ad es, tru co s, id e a s y con sejo s so b re los te m a s tratad o s. P a ra que pueda distinguirlos en form a m s sencilla,
c a d a recuadro e s t identificado con diferentes iconos:
CURIOSIDADES
E IDEAS
ATEN CIO N
DATOS UTILES
SITIO S W EB
Y NOVEDADES
www.redusers.com
E S IS
Contenido
Sobre el a u to r............................................................................ 4
P r lo g o
..........................................................
Ven tajas y desventajas entre platafo rm as
34
Tecn olog as de la W eb a c tu a l............................................ 35
E l lib ro de un v is ta zo ...............................................................6
H T M L 5 ........................................................................ 36
In fo rm a ci n com plem entaria............................. ................. 7
C S S .................................................. ............................ 37
In tro d u c c i n ............................................................................12
Ja v a S c r ip t .................................................................... 38
Lib rera s y fram ew orks m viles................................ 39
Entornos de d e s a rro llo ...............................................41
R e s u m e n .................................................... - .............................43
Plataform as y tecnologas
m viles
A c tiv id a d e s ............................................... ...............................44
In tro d u c c i n a la W eb m v il............................. - ..............14

U n nuevo panoram a.................................................... 16
E l mundo w e b ......................................................
18
E l mundo mobile w e b ................................................. 19
I
HTM L5
E l le nguaje H T M L 5 .............................. - ............................. 46
20
Su principal objetivo................................................... 46
P la ta form a s m vile s..............................................................22
D eclaraciones y m eta tags....................................................50
IO S .........................................................................................22
D o ctyp e........................................................................ 50
A n d ro id ........................................................................ 23
C h arset......................................................................... 52
W in d o w s P h o n e ...........................................................24
Estructu ra d e un documento H T M L 5 ...................... 53
C undo se conjugaron web y mobile w e b ?
B la c k B e r r y ................................................................... 25
Otros sistem as op erativos.......................................... 26
A p lic a cio n e s m v ile s ............................................................ 30

W e b A p p s...................................................................... 31
H T M L 5 para aplicaciones m vile s
............................. 56
Componentes < Inp u tTyp e> .......................................56
G e o loc a liza ci n .......................................
63
Elem entos p ara el e je rc ic io .......................................64
Apps n a tiva s................................................................ 32
R e s u m e n ..................................................
71
Apps hbridas............................................................... 32
A c tiv id a d e s ............................................... ...............................72
Fundamentos de jQ u e ry Mobile
Qu es jQ u e ry M ob ile?........................................................74
hOlh
jQ uery M o b ile = jQuery, o n o ? ................................ 75

U tiliz a r jQuery M o b ile de form a local o rem ota?..7 6
In stalar JQ M de form a local......................................77
1 i 01
1 E
-
www.redusers.com
Configuracin de una W e b A p p con jQuery M obile ..79
E s tru c tu ra y w id g e ts ............................
80
USEMOS
P a g e .............................................................................. 80
H e a d e r......................................................................... 81
C o n te n ......................................................................... 81
F o o t e r ...........................................................................82
Navigation B a r ............................................................ 83
Transitions.................................................................... 84
Dialog P a g e ..................................................................86
E je rc ic io p r c tic o ..................................................................87
C re a r la estructura H T M L ......................................... 88
R e s u m e n .................................................................................103
A c tiv id a d e s ...................................
104
I
Interaccin con el hardware
de com unicaciones
9 ^FAHMlNG
L a W eb y el hardware
A li!u u y >
r o n w * lo * K t i* o o i|.
c a v T t a u i r o i " t o t cU t 10 D' a urctooa:
de lo s d ispositivos m v ile s ............................................... 144

Hipervnculos en jQ uery M o b ile ..............................146
fe s
lo s O rg n ico s
Interaccin con e l sm artphone o t a b le t ................ 147
p i t e *
<on l * n c t <
gmar.rn> te n c u a , aowi. . I *
P ro d u c to s Hld
n<T>Brua quMkCoa
mr
^ PoaMu
ru olM . i
Com unicacin a travs de redes sociales............... 156

M ensajes con U R I scheme d e T w it te r ................... 159
C om p ortam ien tos de los eventos
C2J
i3>
=>
segn el d is p o s itiv o .............................................................165

Respuesta de eventos en ta b le ts.............................165
Respuesta de eventos en sm artphones.................. 167
I T*
U n a solucin v ia b le ..................................................168
Com ponentes de
jQ u e ry Mobile
In vo c a r llam ados y m ensajes de t e x t o ........................ 168

Ex ten d er el uso de L is tV ie w ................................... 169
C o m p o n e n te s .......................................................................106
R esu m en................................................................................. 173
Navigation B a r .......................................................... 106
A c tiv id a d e s ............................................................................ 174
Listas ........................................................................ 109

Listas fo rm atead as...................................................109
B u tto n s ...................................................................... 115
Text In p u ts................................................................ 121
T h e m e s ...................................................................... 127
E je rc ic io in te g ra d o r............................................................ 128
Adaptacin a las pantallas de tab lets.....................128
R esum en
............................................................... 141
A c tiv id a d e s ............................................................................ 142
www.redusers.com
10
E je rc ic io p r c tic o : alm acenam iento lo c a l............... 225

Bases de d atos W eb S Q L ................... - ............................228
Lenguajes de program acin
Sistem as operativos que soportan W e b S Q L
E v o lu c i n
........................................................................176
M anejo de sentencias W e b S Q L .............................230
L a im portancia de lo d in m ico ............................... 176
In d exed D a ta b a se ................................. .............................. 233
La s plataform as m s com unes................................ 177
A p lica cio n e s o fflin e ...............................
Q u e s P H P ? ........................................................... 178
229
233
Cmo descargar una W e b A p p a undispositivo
234
Base de d atos........................................................................ 187
A p p C ach e...................................................................234
M y S Q L ....................................................................... 188
R e s u m e n .................................................. ..............................237
C re ar nuestra prim era base de datos..................... 190
A c tiv id a d e s ............................................. - ............................ 238
P H P y M y S Q L .............................................................
195
Funciones mysql connectO y m y q L s e le c L d b ()...1 9 6

.197
.197
.199
/ ---* cu
MIMIMi
iin
iftiautft
200
M y S Q L 5.1 R eference Manual

Includmg M y S Q L Cluslet N D B 6 X/7 X Reference
G u id e
* tJ,-
.216
.215
w
llM
lIMtaM
**
"""
....
W ebApps para iOS

D isear una W e b A p p para iO S
...........................240
E l navegador S a fa ri y sus prestaciones..................241
E je rc ic io in te g ra d o r: A d d to hom e screen .................248

M o strar la W e b A p p com o n ativa en i O S ............... 249
Splash screen de la a p lica c i n ................................ 251
A g reg ar splash screen a nuestro proyecto............. 254
R e s u m e n ..................................................
257
A c tiv id a d e s .............................................. - ............................258
Alm acenam iento local

y aplicaciones offline
A lm a cen a m ien to lo c a l..........................................
218
Comprobacin de compatibilidad
W ebApps para Android

y otros dispositivos
de un n aveg a d o r....................................................... 221
D isear una W e b A p p para A n d r o id ...........
Lo cal storage............................................................. 219
www.redusers.com
.260
11
USERS
L a generacin B B 1 0 ................................................293
H erram ientas de desarrollo p ara B B 1 0 ................ 293
D esarrollo m ob ile para W in d o w s P h o n e .................... 297

W in d o w s Phone 7 y 8 ...............................................297
Instalacin de herram ientas M icro so ft................. 298
E m u la r W e b A p p s en la com p u ta d ora .......................... 302

Utilizacin de Rip ple E m u la to r............................. 30 3
E l aporte de F ire fo x ................................................ 30 5
1 1 1
Google Chrom e p a ra Android:
Firefox OS
la estrella esp era d a ..................................................260
Un nuevo ju g a d o r en el ecosistem a m v il....... .........308
V is u a liza r una W e b A p p com o nativa en A n d ro id ....264
A rq uitectu ra de Firefo x O S ............................ ........3 0 9
C re a r los iconos p a ra nuestra W e b A p p ................. 264
C aractersticas del S .O .................................... ........3 1 0
D efinir el m eta tag <mobile-web-app-capable> ...266
E l sim u la d or.................................................................
In sta la r la W e b A p p en A ndroid............................... 267
M ano s a la o b ra............................................... ........3 1 5
A g reg ar W ebA p p s en B la c k B e r r y .......................... 269
Testear nuestro d esarro llo ..............................
R esum en
............................................................. 271
A c tiv id a d e s
............................................................. 272
D istrib ucin de a p lic a cio n e s ................................. .........318
PhoneGap
In tr o d u c c i n .........................................................................274
A r q u it e c tu r a ............................................................. 275
D re a m w e a v e ry P h o n e G a p ..................................... 276
C m o tra n sform a r una W e b A p p en h b rid a
277
M odificacin de index.htm l..................................... 280

Cm o testea r nuestra app com p ila d a .....................287
R e s u m e n ................................................................................. 289
A c tiv id a d e s ............................................................................ 290
BB10, Windows Phone

y em uladores web
P ro g ra m a ci n nativa para B la c k B e rry 1 0 .................292
www.redusers.com
12
USEFtS
Introduccin
Si segm entam os los notables avances que tuvieron lugar en
las ltim as dos dcadas en m ateria de evolucin tecnolgica,
podem os resum irlos en tres actores im portantes: la com p uta
dora personal, internet y la telefona m vil. Debemos destacar,
adem s, que este ltim o actor tuvo su propio Big Bang dentro de
la evolucin m encionada, dado que no solo p erm iti com unicar
a las personas en cualq u ier punto donde se encuentren, sino que
tam bin supo tom ar lo m ejor de los prim eros dos actores y co n
ju g a rlo en un nico producto.
De este m odo, la te le fo n a m vil logr consolid arse com o el
p u nto de p artid a de todas las a ctivid a d es relacion ad as al uso
co tid ian o de servicio s. A travs de ella, ho y en da podem os
re aliz ar m ltip les y va ria d as tareas, entre las que podem os
m encionar: establecer co ntacto social con nuestro s pares, e n
v ia r y re cib ir m ensajes de correo electrnico, m irar nuestras
series o p elcu las favo ritas, re aliz ar llam ados telefnico s, leer
libros electrnicos, establecer una agenda de activid ad es,
co m p rar p ro d u cto s y servicio s, n aveg ar p or in ternet y hasta
p rep arar una receta de cocina.
Com o d esab o llad o re s de aplicacio nes inform ticas b uscare
mos, a travs de esta obra, explotar estas nuevas tecnologas a
p artir del desarrollo de soluciones que apro vechen los recursos
que nos brinda hoy un telfono inteligente o una tablet.
G racias a la constante actualizacin de la tecnologa basada
en la Web, estas solu ciones pueden llevarse adelante tanto desde
una aplicacin n ativa instalada en un d isp o sitivo com o desde
una pgina web cargada en nuestro navegador m vil favorito.
Los in vitam o s a descubrir, en las prxim as pginas, cmo
podem os explotar cada una de las caractersticas que brindan
los d isp o sitivo s m viles, enfocndonos en la arquitectura de
hardw are y softw are que cada uno de estos pequeos artefactos
pone a disp osicin del usuario.
www.fedusers.com
z o
\\\\\\\\\\\\\\\
///////////////
Plataformas y
tecnologas mviles
En e ste c a p tu lo c o n o c e re m o s la e v o lu c i n d e la te c n o lo g a
m v il y w e b . V e re m o s c m o esta ltim a se a d a p t al p e q u e o
m u n d o de lo s d is p o s itiv o s m v ile s h a c ie n d o q u e un s im p le
te l fo n o se c o n v irtie ra , en c o rto tie m p o , en un s m a rtp h o n e .
T a m b i n c o n o c e re m o s lo s p rin c ip a le s sis te m a s o p e ra tiv o s
m v ile s , las d ife re n c ia s e n tre W e b A p p , a p p n a tiv a y a p p
h b rid a , y cu les so n los fra m e w o rk s m s p o p u la re s .
Introduccin a la Web m vil....14
Tecnologas de la Web actual ..35
Plataformas mviles................. 22
Resumen......................................43
Aplicaciones m viles................ 30
Actividades................................. 44
14
F Z n iH
1 . P L A T A F O R M A S Y T E C N O L O G A S M V IL E S
Introduccin a la Web mvil

Para q u ien es som os fa n tico s de la tecn o log a m vil, "mobile" es la
p alab ra que ms suena en n uestras m entes desde, ap ro xim adam ente,
el ao 2007. Si bien los d isp o s itiv o s m vile s se in teg raro n en n u estra
v id a dos d cadas antes, pod em os to m ar com o quiebre, en el segm ento
de las tecn o lo g as de b o lsillo , la p re se n ta ci n de iPhone d entro de
este m ercad o , en aquel ao.
El m undo IT ya ve n a trab aja n d o , desde algunos aos antes, en
la re in v e n c i n del terreno de d isp o s itiv o s m vile s, para que estos
g an aran un papel m ucho ms im p o rtan te en n u estras v id a s . D entro
de los d is p o s itiv o s que ms se v e n d ie ro n en esta ltim a dcada,
p od em os d estaca r netbooks, tablets, h an d h eld s y sm artphones.
A lg u n o s de estos d is p o s itiv o s lo g raro n ace p ta ci n , m ien tras
que o tros tu v ie ro n que e sp erar un poco la e vo lu ci n del m ercado
y e n co n tra r a lte rn a tiv a s que p erm itie se n in v o lu c ra r m s la aten ci n
d el u su a rio final.
D entro de a q u e llo s que llegaro n a d estiem po , pod em os d estacar
las tab lets, d ado que A p p le h ab a lan z ad o u n a p rim e ra v e rs i n de
estas en los in icio s de la d cada del 90, con un eq u ip o b autizad o
com o A p p le Newton. Si bien la in ic ia tiv a no tu vo , en general, m ucha
a cep taci n , co m p arad a con el auge de iPad o A n d ro id a ctu a lm en te
en este segm ento, al m enos pod em os re co n o cer que d io pie al
s u rg im ie n to de otras ideas que, con el tiem p o , to m aro n vu e lo y
ganaron m s in te r s p or p arte de los u su ario s
nales, com o la PDA Palm Pilot.
LA P R IM E R A V E R S I N
D E U N A T A B L E T FUE
Los eq u ip o s u ltra p o rt tile s o netbooks

h icie ro n su p rim era a p arici n de la m ano
de los h a n d h e ld s p resen tad o s p or Casio y
LA A P P L E N EW T O N ,
COMPAQ, a fines de la d cad a del 90. Casiopeia
LA N Z A D A EN LA
A - l l y COMPAQ C-2010 fu ero n los p rim ero s

d isp o s itiv o s m vile s que b uscaro n a ca p a ra r el
D C A D A D E 1990
lu g ar que las netbooks a lca n z a ro n entre 2006

y 2011 en el m ercado de co m p u tad o ras.
Este tipo de d isp o sitivos, ju n to con los
escneres de m ano Psion, rescataron el sistem a o p erativo Windows CE

pensado originalm ente para los handhelds de Casio y COMPAQ. Hoy,
W indow s CE sigue vigente y presta servicios a equipos Psion, entre otros.
www.redusers.com
E S S 3
15
Figura 1. COMPAQ C2010 y Casiopeia A - ll (1998) fueron

las primeras netbooks, mientras que Apple Newton (1993)
fue la primera tablet que inspir el lanzamiento de los PDA.
En el segmento de los sm artphones, podem os destacar que la llegada
tem prana de estos dispositivos al m ercado de telefona m vil fue de la
m ano de Nokia. Algunos aos ms tarde se sum la firma Sony Ericsson.
N o k ia lanz, en m arzo de 1996, el te l fo n o co m p u tad o ra Nokia
9000 Communicator, d is p o s itiv o que tu vo algunas e vo lu cio n e s

y fin a liz su e x iste n cia en el 2004 co n el m od elo Nokia 9500
Communicator. Su ltim a v e rs i n ten a Bluetooth, Wi-Fi, teclad o

fs ico QWERTY y un sistem a o p e ra tivo grfico c u y o naveg ad o r
so p o rtab a pginas en Flash. El N okia 9000, el p rim ero de la serie,
p u d o co n o ce rse en la p e lc u la El Santo , en la que el personaje
p rin c ip a l u tiliz a b a el s e rv ic io de m ltip le s cu en tas de e-mail y hasta
re cib a faxes a tra v s de este telfono.
\\)
R ED U S ER S PREM IUM
P a ra
o b tener m aterial ad icional gratuito,
ingrese
a la
s e cc i n
P u b lic a c io n e s / L ib ro s dentro d e
h ttp :/ / p r e m iu m .r e d u s e r s .c o m . Alli p o d r ve r to d o s n u e stro s ttulos y a c c e d e r a con ten id o extra

de c a d a uno, c o m o los ejem p lo s utilizados por el autor, a p n d ic e s y a rc h ivo s ed itab les o d e cd ig o
fuente. E n tre los co m p le m en to s d e e s te libro en co n tra r , a d em s, tutoriales en vid eo para m ejorar
la co m p ren si n de lo s c o n c e p to s d esarro llad o s en la obra.
www.redusers.com
16
USEftS
1 . P L A T A F O R M A S V T E C N O L O G A S M V IL E S
A lg u n o s aos d esp us, So n y Ericss o n lleg al m ercad o con su

m o d elo P990, un telfo n o t ctil con p a n ta lla grfica de 2S6 co lo res
y Stylus pen para el m an ejo de las a p lic a cio n e s en pantalla.
Figura 2. De izquierda a derecha: Sony Ericsson p990, Palm Pilot y Nokia

Communicator 9500, equipos considerados como los primeros smartphones.
H oy podem os d ecir que gran p arte de los fracasos de esa poca
pudo deberse a la ausencia de ap licacio nes que d ieran v a lo r agregado
a estos d isp o sitivo s. A lguno s de estos term in ales tu vie ro n una tienda
de ap licacio nes propia, pero estaba lim itad a a los d esarro llo s de las
resp ectivas em p resas o de algunos socios m uy cercanos a estas.
Un nuevo panorama
En 2007, el panoram a mobile cam bi por com pleto. Apple
present el iPhone, las netbooks explotaron en ven tas y, un ao ms
tarde, ap areciero n las tablets. As fue com o la tecnologa que haba
su rg id o entre diez y q uince aos antes reapareci en el m ercado
com ercial con otro fo rm ato y de la m ano de nuevos jugad ores. Ju n to
con ellos, llegaro n los app stores o tiendas de ap licacio nes. Estos
facto res p erm itie ro n a b rir el m ercado de ganancias, no solo a las
co rp o racio n es que d esarro llan estos p roductos, sino a cu alq u ier
p a rtic u la r o pequea co rp o raci n . D entro de estos m ercados, los que
m s generan ingresos ho y son los de la telefo n a m vil, con su batera
de apps g ratuitas y pagas, seguidos p or el m ercado de las tablets.
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S
USE&S
En algunos pases com o A rg en tin a, la telefona ce lu la r acapar el

m ercado de m anera im pensada, su p eran d o en nm ero a la telefona
fija e in clu so a la p oblacin de toda una nacin.
En un estu d io lle vad o ad elante en 2013, la p oblacin argentina
se estim en 45 m illo nes de habitantes. La te le fo n a fija se calcul
en 12.5 m illo nes, m ien tras que la telefona m vil era de 52.3 m illones
de celulares en uso. En el ltim o lustro, la telefo n a m vil super con
creces a la cantid ad de lneas telefn icas de hogares y, en m uchos
casos, el telfono ce lu la r reem plaz p or com pleto a las lneas fijas.
Con la p ro life ra ci n de lneas telef n icas m vile s y abonos para
las conexiones de datos com o 2G, 3G y 4G, algunas netbooks y tablets
in co rp o raro n en sus m odelos la opcin de in stala r un ch ip GSM para
re a liz a r llam adas, e n via r SM S o n aveg ar por la Web.
Top 5 d e plataform as m viles entre Ju lio d e 2 0 1 3 y Sep tiem b re d e 2014
Android
IOS
Se rie s 40
Sa m su n g
Blackberry OS
W ind ow s Phone
Figura 3. Con una clara ventaja por sobre la competencia,

Android dominaba, a fines de 2013, el mercado de los smartphones,
donde lleva ms de 250 millones de equipos vendidos.
En 2009, p re v io a l la n z a m ie n to del iPad, m u ch as em presas
q u is ie ro n ad elan tarse al ru m o r de la tab le t de A p p le y p resen taron
su a lte rn a tiv a : h icie ro n funcio nar, en m odo t ctil, sistem as o p erativo s
com o W in dow s Vista y Seven, y algunos, A n d ro id . Tam b in llegaron
los h b rid o s: netbooks que p erm ita n to rce r su p an talla para
c o n v e rtirla en un d is p o s itiv o tctil.
www.redusers.com
c_/si=*?s
18
1. P L A T A F O R M A S Y T E C N O L O G A S M V IL E S
Pese a los esfuerzos realizados p or las firm as IT, iPad rom pi todas las
reglas y no consigui tener un com petidor decente que le hiciera frente.
El mundo web
Si b ien en las ln e a s a n te rio re s d e sc rib im o s lo que es una
p lataform a mvil, p od ram o s, ahora, d e fin ir el co n cep to: se trata de

todo aquel d is p o s itiv o de f c il traslad o , que d isp o n e de d eterm in ad as
p restacio n es que nos a y u d a n en el d esem peo d iario de nuestras
a c tiv id a d e s la b o ra le s y/ o acadm icas.
Entre las ca ra c te rs tic a s m s im p o rtan te s de u n a p latafo rm a m vil,
podem os destacar:
Siste m a o p e ra tiv o am igable.
C o n e ctiv id a d a internet.
D isp o n ib ilid a d de a p lic a cio n e s p ara m ltip le s p ro p sito s.
M ltip le s o p cion es de co m u n icaci n con n u e stro s pares.
In te g ra ci n de correo e le ctr n ic o y o tros m ed ios de co m u n icaci n .
A lm a ce n a m ie n to de d o cu m en to s vario s.
A cceso a co n te n id o s m u ltim ed ia.
D e p e n d ie n d o de la e m p resa fa b rica n te p or la que optem os,

p odrem os tener m s o m enos s e rv ic io s in teg rad o s en el d isp o s itiv o .
Sin em bargo, en las p lata fo rm a s m vile s co n sid e ra d as de gama
m e d ia en ad ela n te , co n tam o s con todas las ca ra cte rs tica s listadas.
H o y el m ayo r uso de p la ta fo rm a s m vile s pasa por los sm artp ho n es
o te l fo n o s in telig en tes; luego, p or las tab lets; y, p or ltim o , las
n etb o o ks o u ltra b o o k s (una categ o ra que se in teg r en 2012).
Las ta b le ts v ie n e n cre cie n d o fu ertem ente en el cam p o de
im p le m e n ta ci n acad m ico , lab o ral y, p or ltim o , p ersonal, y desde el
IN IC IO S DE LA T E C N O L O G A W A P
W ire le s s A p p lic a tio n P r o to c o l n aci c o m o un e s t n d a r a b ierto p ara a p lica c io n e s que se com unican
d e m a n era
inalm brica. Asi, se
e s ta b le c i un conjunto
de p ro to co lo s que
norm aliz la
m anera
d e e n te n d e rs e entre dispositivos inalm b rico s, co n el objetivo de a c c e d e r a los princip ales se rvicio s web
(e-mail, new sletter, w eb).
www.redusers.com
ao 2012 su ve n ta su p era al co m e rcio de co m p u tad o ras de e scrito rio

y p o rttiles.
Entre todas las prestaciones que los sm artphones nos brindan, vale
destacar que la m ayora de estas pasan ho y p or un m ism o canal: la Web.
El m u nd o web se in ic i en 1994 de form a m a siva y, en 1995, ya se
h ab a ex p an d id o h acia n u m e ro so s nichos, tan to c o rp o ra tiv o s com o
acad m ico s y p a rticu la re s.
El d e s a rro llo de la Web, tal com o la co no cem o s, p a rti de la
m a sifica ci n de sitio s c o rp o ra tiv o s, del uso c o tid ia n o del correo
e le ctr n ico , de la in te g ra ci n de salas de chat y sistem as de
m e n s a je ra in stan tn ea, d en tro de los cu ales d estacam o s a ICQ
com o el p io n e ro en este cam po.
Con el tiem po, tam bin se in tro d u je ro n m ejoras, com o ser: la m sica
digital, la v is u a liz a c i n de vid eo s, la integracin de p latafo rm as de
d esarro llo de w eb s d inm icas de m anera ms am igable y, p or supuesto,
la p oten ciacin de la esttica de los sitio s web de la m ano de la casi
extinta tecnologa Flash.
-i
Figura 4. ICQ, la Web esttica, Internet Explorer y Macromedia Shockwave

Player son algunas de las primeras tecnologas web en el nacimiento de internet.
El mundo mobile web

Si bien iPhone replante el concep to de la Web en los d isp o sitivo s
m vile s al m o d ificar su naveg ad o r web, Safari, con d eterm inad as
ca ra cte rsticas H T M L y CSS p rop ias de una p antalla de m enos de 4
pulgadas, la Web m vil ya exista en la telefona ce lu la r desde inicios
de la dcada de 2000.
www.redusers.com
20
c_/si=*?s
M uchos telfonos -com o el Nokia C om m unicator o So n y Ericsson

p990- ya incorporaban un navegador web en sus equipos m viles. Y los
handheld CO M PAQ y Casio de fines de la dcada del 90 tam bin posean
una versin reducida de IE, bautizada com o Pocket Internet Explorer.
Hacia fines de los 90, los handheld p osean una p antalla de 7
pulgadas que p erm ita co n tar con reso lu cio n es de 800x480 u 800x600
pixeles, casi iguales a la reso lu ci n de un m o nito r de 14 pulgadas de

aquella poca. Esto no im p ed a que la Web en s se rep ro d u je ra en casi
toda su totalidad en estos equipos.
Sin em bargo, con el tiem po los sm artp ho nes coparon el terreno y
a ch icaro n sus pantallas con el afn de o cu p ar lo m nim o indispensable,
y la Web en s debi m utar hacia la Web m vil, una alte rn a tiv a visib le,
rpida y de m u y bajo consum o en KB, que p od a rep ro d u cirse de
m anera decente en las p antallas de los telfono s m viles.
La tecnologa WAP fue la que lle v in te rn e t a los telfonos m viles.
Era m u y lenta y el v a lo r de la factu raci n p or uso de kilo bytes de
consum o era igual o ms alto que un m inuto de aire de una llam ada
m vil. A un as, logr una fuerte ad o p ci n en u n corto tiem po.
Cundo se conjugaron web

y mobile web?
Las tecn o lo g as 2G y 3G, ju n to a la c o n e c tiv id a d Wi-Fi p ortada
a los m vile s, h iciero n p o sib le que la te le fo n a m vil e x p lo tara en
todo su esplendor.
iPhone 1 im p lem en to una serie de ctags HTML> a la ve rsi n m vil

del navegador web Safari. Este fue el in ic io de las in vestig acio n es
de nuevas o p cion es que p e rm itira n d istin g u ir una conexin de
com p utadora norm al de una conexin m vil.
E L IP A D EN L A U N IV E R S ID A D
D e sd e el lanzam iento d e iPa d en 2 0 1 0 , m u ch a s u niversid ad es em p ezaron a tom ar en serio e s te d ispositivo
c o m o herram ienta d e aprendizaje. U n a de la s p rim e ra s fue Se to n Hill University (w w w .s e to n h ill.e d u ), que
d esd e abril de e s e ao co m en z a utilizar e s te dispositivo c o m o h erram ienta p a ra to d o s su s alumnos.
www.redusers.com
Con la im p le m en ta ci n de tags p ro p ietario s para m obile, sum ada

al hecho de que JavaScript siem p re estu vo presente en este tip o de
d isp o sitivo s, co m en zaron a crearse alte rn ativa s que com b inaban las
tecnologas H TM L, CSS y Ja v a S c rip t para m ejorar el terreno m vil y
lograr, as, m ejores p ro d ucto s basados en la Web.
C23
Figura 5. La evolucin de la Web mvil desde la era WAP a inicios de 2000,

escalando en la evolucin iPhone y finalizando en las actuales aplicaciones web.
La tecnologa Flash no se vio p ro m o vid a sobre la p latafo rm a web
porque, para la carga de un sitio Flash en una com p utadora de
escritorio , se requera de un tiem po que iba de unos segundos hasta
al m enos un m inuto. Esto se trad u ca en una im p o rtante cantid ad de
m in u to s de dem ora, sum ados a la baja m em oria RAM y los escasos
M egahertz de los p rocesadores de aquella poca.

Luego, p ara te rm in ar de p ro m o ve r las tecnologas m vile s y
co n ju garlas con el m enor im pacto posible con las tecnologas de la Web
bsica, se in ici un plan que perm itiera, m ediante H TM L y CSS, unificar
el d e sa rro llo web para ms de una plataform a.
Esto es lo que se conoce ho y com o HTML5. No solo es el p rincip al
responsable de la unificacin web (desktop y m obile), sino que se
integra con CSS y Ja v a S c rip t de m anera tal que las tres tecnologas
b rin d an las h erram ien tas necesarias para lograr una n ica web, con el
m enor esfuerzo p osib le, p ara todas las p lataform as.
www.redusers.com
22
c_/si=*?s
Plataformas mviles
El m ercado m o b ile d isp o n e de un nm ero im p o rta n te (y d ifc il
de c a lc u la r) de p lata fo rm a s m vile s que agrup an tanto a los telfonos
in te lig e n te s com o a las tab lets y d isp o s itiv o s h b rid o s (aq u ello s que
co n ju g an una tab let con una co m p u ta d o ra p o rt til).
D entro de este m ercad o a m p lio y lle n o de m arcas y m odelos,
lo que m s im p o rta a un d e sa rro lla d o r es la p lata fo rm a basad a en
so ftw are, ya que la Web m vil se enfoca siem p re en el softw are,
que es el encargad o de in te rac tu a r con el h a rd w are en s.
Por ello, nos ce n trarem o s en co n o ce r los sistem as o p e ra tivo s
que actu a lm e n te existen, con sus lim ita cio n e s y co in cid e n c ia s
en el m und o m vil.
OS
Este sistem a o p e ra tivo es p ro p io de la firm a A p ple. Fue
d e sa rro lla d o en 2006, para se r in teg rad o al la n z a m ie n to de iPhone
en el ao siguiente. In icia lm e n te este sistem a o p e ra tiv o no ten a un
nom bre d efin id o tal com o lo conocem os ahora; sim p le m e n te , se lo
llam aba iPhone OS.
A p p le afirm aba que iPho ne co rra una ve rsi n a d ap ta d a de OSX.
iOS o b tu vo su nom bre oficial recin a p rin c ip io s de 2008, cuando

A p p le o fic ia liz el la n z a m ie n to del iPhone SDK, que p e rm ita a
c u a lq u ie r d e sa rro lla d o r crear a p lic a cio n e s para este m ercado.
Con el tiem po, iO S se ad ap t a las v e rs io n e s t ctile s de iPod, iPad
y, finalm ente, a A p p le TV, aun q u e este ltim o no puede e je cu ta r las
a p lic a cio n e s iO S cread as para el e co sistem a iPh o n e y iPad.
A l m o m en to de e s c rib ir esta p u b licaci n , iO S a lca n z a la v e rs i n 7.1,
la cual fu n cio n a en d is p o s itiv o s iPho ne 4S, iPad 2 o s u p e rio r y Apple
L A T E C N O L O G IA W A P DIA A DIA
La p rim era lleg ad a d e internet a los telfo n o s m viles fue a tra v s d e la tecn o lo g a W AP, q u e utilizaba la
frecu en cia p o rta d o ra de se a l telef n ica p a ra en viar y re cib ir d a to s. L o s n aveg a d o res w e b m o strab an
p g in as sim ilares (texto e im g en es) a ia s utilizadas en la d c a d a del 90.
www.redusers.com
B s s a
23
T V 2.0 o superior. La firm a de C u p e rtin o ha d ejad o de d ar soporte

p ara el sistem a o p e ra tiv o iO S 4.0 o a n te rio r y p ro m u e ve en su sitio
web la a d ap taci n de ap p s para iPad, iPod To u ch y iPho ne a la ltim a
ve rs i n d isp o n ib le .
A p p le es d e sa rro lla d o ra tan to del h ard w are com o del sistem a
o p e ra tiv o de to d o s sus d isp o s itiv o s m viles.
Android
El s iste m a o p e ra tivo A n d ro id , actu a lm e n te
p ro p ied ad de G oogle Inc., tu v o sus org enes
com o un sistem a o p e ra tiv o m vil in d ep en d ien te,
p ro p ied ad de A n d ro id Inc.. En base al inters
de Google p or el m ercad o de d isp o s itiv o s
m vile s, la firm a v io que el m und o su cu m b i a
CUAN D O G O O G LE
C O M PR A N D RO ID ,
CO M EN Z A A D A P T A R
E L S IS T E M A A S U S
la p ro p u esta de A p p le cu an d o se rum oreab a, en
N E C E S ID A D E S
2006, sobre el p o sib le lan z am ien to de iPho ne, y

d e c id i a d q u irir u n sistem a o p e ra tivo a van z ad o
en cu an to a p re stacio n e s, p ara p o d e r e n tra r de
lle n o al m ercad o m o b ile, con u n a h e rra m ie n ta slida.
As fu e com o G o o gle co m p r la firm a A n d ro id Inc. y co m en z a

a d a p ta r este sis te m a o p e ra tiv o en base a sus n e ce sid ad e s. A n d ro id ,
al m o m en to de e s c rib ir esta p u b lic a c i n , se e n cu e n tra en su v e rs i n
4.4 (Kit Kat). La p rim e ra v e rs i n (1.5) fu e la n z a d a en 2008, y, a
p a rtir de la v e rs i n 2.1, A n d ro id co m e n z a g anar p o p u la rid a d .
Sus v e rs io n e s 2.2 y 2.3 fu e ro n a d a p ta d a s - g ra cia s a que se sigue
m a n te n ie n d o com o c d ig o o p e n s o u r c e - a tab lets y n etb o o ks sin
so p o rte o fic ia l de Google.
Al v e r que el m ercad o p ro m e ta m s que un te l fo n o in te lig en te,
Google d ecid i la n z ar A n d ro id 3.0, esp ecficam en te d ise a d o para
tab lets. Luego de su a c tu a liz a c i n a la ve rsi n 3.1 (Honeycomb),
A n d ro id salt d ire cta m e n te a la ve rsi n 4.0, u n ifican d o su ncleo
p ara sm a rtp h o n e s y tablets, de m anera in te lig en te . Es por ello que,
hoy, c u a lq u ie r a p lic a ci n d e sa rro lla d a p ara esta p lata fo rm a puede
in sta la rse tanto en telfo n o s m vile s com o en tablets.
G racias a su ve rsi n open source, A n d ro id co n sig u i m uchos
clo n es a lte rn a tiv o s , ad ap tad os en su m a y o ra p or em p resas asiticas,
que b rin d an el m ism o se rv icio que la v e rs i n p ro m o v id a p or Google,
www.redusers.com
24
USEftS
au n q ue sin el so po rte oficial de esta em p resa (m o tivo por el cual

deben te n e r su m ercad o in d e p e n d ie n te de ap lica cio n e s).
D en tro de las ve rsio n e s a lte rn a tiv a s de A n d ro id , pod em os destacar
la u tiliz a d a p o r la firm a XIAOMI, m uy p o p u la r en C hina, co n un
m ercad o de ms de 40 m illo n e s de d isp o s itiv o s ve n d id o s, y la
a d ap ta ci n Fire OS, b au tiz a d a as p or Am azon, q u ie n tom el cdigo
fu ente de A n d ro id y cre sus p ro p ia s tab lets e e-readers, com o as
ta m b i n su p ro p io eco sistem a de ap lica cio n e s.
Figura 6. OS 7.1 y Android 4.4, los actuales sistemas operativos

mviles que reinan el mercado de smartphones y tablets.
Windows Phone
M icrosoft tam bin irru m p i , en 2010, en el m ercado de la telefona
m vil con su sistem a o p e ra tivo W indows Phone. Este fue una
re in g en iera co m p leta del v ie jo sistem a o p e ra tivo W indows Mobile,
que no haba logrado inters en la p oblacin y que M icroso ft tam bin
haba dejado ab and o nad o en su m om ento.
A co rralad a p or el creciente uso de d isp o sitivo s m viles, la firm a
de Redm ond d ecid i ingresar en este terreno desde cero, con un nuevo
desarrollo. W in d o w s Phone, al m om ento de e scrib ir esta publicaci n,
se e n cu en tra en su ve rsi n 8.1, aunque en el m ercado se encuentran
m u chos d isp o sitiv o s de ve rsi n 7.x activos.
www.redusers.com
[g s a s a
25
BlackBerry
RIM se reb au tiz en 2013 com o BlackBerry para u n i ca r la
im agen de la co m p aa con la de sus p ro d ucto s estrella. Black Berry
actu alm ente se encuentra en la ve rs i n 10.2.1. A p a rtir de la ve rsi n
10.0, realiz una re ing en iera co m p le ta de su
p latafo rm a m vil, al tom ar el sistem a o p e ra tivo
QNX com o base.
B L A C K B E R R Y P E R D IO
Este s iste m a o p e ra tiv o g a ra n tiz a , d esd e hace
M ER C A D O PO R NO
m s de una d cad a, un c o rre c to fu n c io n a m ie n to

m u ltita re a en tiem p o real. A n iv e l m u n d ial,
H A B E R A C TU A LIZA D O
B la c k B e rr y p e rd i gran p arte de su m ercado
A T IE M P O SU S IS T E M A
p o r el p oco in te r s en a c tu a liz a r a tie m p o su

s iste m a o p e ra tivo .
O PER A T IV O
A n en el m ercado se pueden enco ntrar

equipos B lack B e rry co rriend o la ve rsi n 7.x de
su sistem a operativo . BlackBerry, al igual que
A p ple, es d esarro llad o ra del h ard w are y sistem a
o p e ra tivo de todas sus p latafo rm as m viles.
09:00
-V

ir
&
<***
a n
Z //
|j MmL
W
~ ir *
r
m tx O
o
Figura 7. Windows Phone 8.1 y BlackBerry 10 ocupan el tercero

y cuarto puesto en el m ercado de dispositivos mviles.
www.redusers.com
26
c_/si=*?s
Otros sistemas operativos

Com o bien d ijim o s, el m ercad o p rin cip a l se centra h o y d en tro de
estas p la ta fo rm a s m vile s, las cuales se d isp u ta n en todo m om ento
su h egem o na en el terren o m o b ile. Pero, aun as, h ay o tros ju g ad o res
que tu vie ro n su m o m en to de g lo ria y que to d a v a ho y siguen
co n se rvan d o un n ich o del m ercad o , o b ien b u scan ganrselo con
el tiem p o . Veam os un d etalle de cad a uno a co n tin u a ci n .
Firefox OS
La Fundacin Mozilla, d uea de la p lata fo rm a open source
lid e ra d a p or Firefox B ro w ser y T h u n d e rb ird . entre otras grandes
a p lica cio n e s, d e c id i in c u rs io n a r en 2012 en el terren o de un sistem a
o p e ra tiv o m vil. El im p u lso que lle v a M o z illa a este te rre n o fu e el
cre cie n te in te rs p o r p arte de los u su a rio s en la n ave g aci n web y en
el uso de a p lic a cio n e s que se e je cu ta n d en tro de un brow ser. Teniendo
el re sp ald o de un gran m ercad o de u su ario s y la p o p u la rid a d lograda
por H TM L5, CSS3 y Ja v a S c r ip t com o base fu n d a m en tal de tecn o log a
en el m undo web, M o z illa, co n el ap o yo de T elef n ica de Espaa,
d e c id i crear un s iste m a o p e ra tivo m vil que tom ara com o filoso fa
las a p lic a cio n e s w eb b asad as en los tres p ila re s fu n d a m e n ta le s de la
Web de hoy.
A s n aci Firefox OS, ap un tad o en un p rin c ip io para m ercados
em ergentes. Firefo x OS se in teg ra con telfo n o s in te lig e n te s de baja
y m edia gam a, com o un sm artp ho n e que fu n cio n a basado en IIT M L5 ,
CSS y Ja v a S c rip t. Todas las a p lic a cio n e s n a tiva s que se in sta le n en el
d is p o s itiv o d eb ern ser d e sa rro lla d a s co n las tres tecno log as p ilares
de la Web de hoy, y no b ajo fram e w o rk s p ro p ie ta rio s com o XCode,
A n d ro id Studio, V isual Studio o QNX Mom entics IDE, com o as

lo req u ieren sus co m p e tid o re s p rin cip a le s.
RIM
La e m p re s a c a n a d ie n s e c re a d o ra d e B la c k B e rry an sigue dom inando m u ch o s m e rc a d o s, principalm ente
en La tin o a m rica , donde su ahora anticu ad a g a m a d e eq u ip o s m viles, con ve rs io n e s de sistem a
o perativo 6.x y 7.x, tod ava sigue d eslu m b ran do a la g en te co n la co m o d id a d de un te c la d o Q W ERTY.
www.redusers.com
E s s a
Tizen
Este sistem a o p e ra tivo m vil nace de un p ro ye cto en co n ju n to de la
Fundacin Linux, Sam sung e Intel, to m an d o com o base el sistem a

o p e ra tiv o MeeGo. Este ltim o fue im p o rta n te en el e co sistem a Nokia,
que lo d ej ab an d o n ad o p ara p ro m o ve r Symbian y la p latafo rm a S40,
m u ch o antes de que M icro so ft a d q u irie ra la firm a finlandesa.
T iz e n basa su a rq u ite c tu ra p rin c ip a l en H TM L5 y otros estndares
web y fu e p ensado no solo para el m und o de los sm artp h o n es, sino
tam b in para tablets, netbooks, smart T V s y otros sistem as de
e n tre te n im ie n to ve h icu la re s .
A ctu alm en te , T iz e n se en cu e n tra en su ve rs i n 2.2, dando retroco m p a tib ilid a d con las a p lic a cio n e s M eeGo a travs de la API basada
en HTM L5.
Figura 8. Bajo un look que los empareja bastante, Firefox OS y Tizen OS buscan
ser los protagonistas en la prxima revolucin de sistemas operativos mviles.
Ubuntu Phone
Canonical, la firm a cread o ra de U bu n tu Linux, el sistem a
o p e ra tiv o Lin u x ms p o p u la r de la ltim a dcada, tam b in d ecid i
www.redusers.com
28
c_/si=*?s
co m e n z ar a e x p lo ra r el m un d o de las p a n ta lla s tctiles. As fue com o

d e s a rro ll el sistem a o p e ra tiv o Ubuntu Touch, que p e rm iti integrar
Linux co n las p antallas tctiles. Po ste rio rm e n te , la firm a se v o lc al
d e s a rro llo de un sistem a o p e ra tivo m v il, al cual b a u tiz a ro n com o
U bu ntu Phone.
A l m o m en to de e s c rib ir esta obra, U b untu Pho ne no ha sido
lanzado al m ercad o . Se estim a que, p ara fines de 2014 o in icio s
de 2015, este sistem a o p e ra tiv o co m en z ar a ser d is trib u id o en
d ife re n tes m odelos de equip o s.
S existe una v e rs i n in sta la b le de este sistem a o p e ra tivo en
algunos te rm in a le s A n d ro id ms p o p u lares, com o ser Samsung
Galaxy 3 y 4, o Nexus 4 y 5, entre otros. Esto Ies p erm ite a los

d e s a rro lla d o re s ex p lo rar el e co sistem a U b u n tu Phone y co m en z ar
a d ise a r ap ps para esta p latafo rm a.
Fire
F IR E O S C O R R E E N
D IS P O S IT IV O S K IN D L E
os
Este sistem a o p e ra tivo es una a d ap ta ci n del

cdigo fuen te de A n d ro id , im p le m e n ta d o p or la
firm a A m azo n . Fire OS co rre d esde hace algunos
Y E S T BA SA D O EN
aos en la m a y o ra de los d is p o s itiv o s Kindle
E L CDIGO F U E N T E
e - re a d e rs y tablets A m azon Kindle Fire.

Al estar basado en el cdigo fuente de
D E AN D RO ID
A n d ro id , Fire OS p erm ite crear ap lica cio n e s

n a tiva s con las m ism as h e rra m ie n ta s de
d e sa rro llo que se u tiliz a n p ara A n d ro id .
Es ms, de m an era p eri d ica , Fire OS lanza
a ctu a liz a cio n e s que in c lu y e n las n o ved ad es del sistem a o p e ra tivo

A n d ro id que fu e ro n lib e ra d a s para su v e rs i n open source.
Nokia d ecid i en 2 0 1 2 retirar del m e rc a d o a Sym b ian y M e e G o p a ra d a rle total p a s o a W in d o w s Phone.

Sin e m b arg o , a m b o s sis te m a s o p era tivo s se caracteriza ro n por d a r el puntapi inicial a e s ta s nuevas
g e n e ra cio n e s que lideran el m e rc ad o . M en s b a s a d o s en ico n o s, bien e s tru c tu ra d o s y g iles en cuanto
a m an ejo tctil o m e d ian te fle ch a s d e navegacin.
www.redusers.com
A m azo n, p or el m o m ento , solo co m e rcia liz a e q u ip o s e-reader

o tablets co n este sistem a o p e ra tivo . A l m om ento de e s c rib ir esta
p u b lica ci n , Fire OS no est integrado en ningn sm artp ho ne.
EseabCh
f ' ta itt |
H om e
r K#B*o<Jy
Mulle
Figura 9. Ubuntu Phone y Fire OS. Este ltimo no pertenece

a la gama smartphone, pero se rumorea desde 2012
que Amazon ingresar pronto en este mercado.
Nokia
N okia to d a v a m a n tie n e su ln e a de e q u ip o s S40, b asad o s en el
s iste m a o p e ra tiv o h o m n im o , b ajo la ln e a Asha. Sym bian fu e otro
sistem a o p e ra tiv o lan z ad o p or N okia que an m a n ten a su e co sistem a
de a p lic a c io n e s p ro p ie ta ria s . Pero fu e d e te rm in a d a su d isc o n tin u id a d
al m o m en to del a n u n c io o ficia l de la co m p ra de esta firm a p or parte
de M icro so ft.
Casi todos los sistem as m e n cio n ad o s poseen las m ism as
ca ra cte rsticas: in teg ran ap ps p ro p ie ta ria s d escarg ables desde
sus re sp e ctiv as tien d as de a p lic a cio n e s, poseen GPS, acelerm etro ,
n a ve g ad o re s web con soporte para H TM L5, co n e ctivid a d a in te rn e t
m e d ian te 3G y 4G, y u tiliz a c i n de Wi-Fi para el m ism o p ro p sito .
www.redusers.com
30
H SSS
Aplicaciones mviles
Si bien el h ard w are y la v a rie d a d de sistem as o p e ra tivo s son
las e strella s ms im p o rtan tes del m o m en to en el eco sistem a m vil,
no pod em os p asar p or alto que todos estos p io n e ro s no se ra n nada
si no e x istieran las tien d as de ap licacio n e s.
Estas tie n d a s poseen cie n to s de m iles de ap ps pagas o gratuitas
que p erm iten in te rac tu a r de d iv e rs a s m an eras a tra v s del d isp o s itiv o
m vil, u tiliz a n d o las b on d ad es del h ard w are de cada equ ip o , al que
solo usan para in g re sar in fo rm aci n im p o rta n te para el usuario,
o sim p le m e n te para ju g a r los vid e o ju e g o s de
m oda, entre otras a lte rn a tiv a s ms.
E L M ERC A D O DE
L A S A P L IC A C IO N E S
NO S E L IM IT A SOLO
A A P L IC A C IO N E S
IN S T A L A B L E S
Pero el m ercad o de a p lic a cio n e s m vile s no

se lim ita solo a a p lic a cio n e s in s ta la b le s. M uchas
de estas n aciero n o rig in a lm e n te com o un sitio
web p ara co m p u tad o ra s de e s crito rio y m viles,
y con el tie m p o se tran sfo rm a ro n en a p lic a cio n e s
n a tiva s in sta la b le s. O tra s n aciero n com o una
a p lica ci n w eb y an h o y se siguen m antenien do
com o tales, co n su m ie n d o alg u n as b ond ades de
los b ro w se rs m v ile s que fa c ilita n su uso.
Las ap ps m vile s p ued en in te ra c tu a r con el
u s u a rio h acie n d o uso del e sp acio de alm a ce n a m ie n to del d isp o sitiv o

o in tegrnd o se con parte del h ard w are . Podem os m encionar, com o
ejem plo s: una ap p m vil que nos a yu d e a d esp la z arn o s por una
ciu d ad y que u tilice la fu n ci n de g e o lo ca liz a ci n del eq u ip o en
c o n ju n to con los m ap as que posee el d isp o s itiv o ; o una app que
oficie de agenda te le f n ica de p ro fe sio n a le s esp ecfico s para poder
co m u n ica rn o s con ellos, y a sea m ed iante un llam a d o te le f n ico ,
un e-mail o un m ensaje de texto.
O tro uso m u y co m n es el de las a p lic a cio n e s com o Instagram
o las basadas en redes so ciale s (Google Plus, Facebook o Twitter),
que nos fa cilita n la co m u n ica c i n co n n u e stro s co n o cid o s a travs
de p u b licacio n e s, o bien co m p a rtie n d o una foto o v id e o tom ada
desde la m ism a ap p que hace uso de la cm ara de los telfono s.
Com o vem os, la in teg raci n de las ap ps con el h ard w are de los
eq u ip o s es casi in fin ita. El nico lm ite aqui estab lecid o es n u estra
im a g in aci n com o d esa rro lla d o re s.
www.redusers.com
E E S 3
to* 4
&
31
Co*
Figura 10. Las redes sociales fueron las primeras

aplicaciones mviles en llegar a los telfonos inteligentes.
WebApps
W e b A p p p ro vien e de la co n ju n ci n de las palabras en ingls W eb
Application (ap licaci n web). Este tipo de a p lica cio n e s son accedidas
m ediante la Web o una red Intran et. Para acced er a ellas, el requisito
esencial es contar con un naveg ad o r web que p erm ita ejecutarlas.
De este m odo, una W ebApp puede categ orizarse com o un program a
in form tico, con la d ife re n cia de que se ejecuta desde un b ro w ser web.
Su e stru ctu ra est co nfo rm ad a m ayorm ente por: H TM L, CSS,
Ja v a S c rip t, y/ o algn otro lenguaje de p ro g ram acin que trabaje
del lado del se rv id o r (PHP, ASP.Net, Pytho n, Ruby, CGI, Perl, etctera).
U N O , DOS 0 MS D E S A R R O LLO S ?
Una
de
b uena
p ra c tic a
en el m undo del d e s arro llo p a ra e s c rito rio y
Responsive Web Design.
m viles
se
da
de
la
m ano
S e trata de un m e c a n is m o que perm ite c re a r un so lo sitio w e b que
se m u estra a d a p ta d o a la p la ta fo rm a d e s d e d o n d e a c c e d e m o s . Aun a s , no siem p re e s c o n ve n ie n te

a p lica r e s ta t c n ic a , d eb id o a una cu e sti n de p e rfo rm a n c e .
www.redusers.com
32
USEftS
RU
B L !S 5 :r- j= :
p y * i i
I -------
w m
a --------
Figura
11.
Muchas WebApps han lanzado una versin especfica para
dispositivos mviles, aun teniendo una aplicacin nativa para ellos.
Apps nativas
Una app nativa es a q uella ap licaci n que fue p rogram ad a para
ser in stalad a d entro de un sistem a o p e ra tivo determ inado. Para
el caso de las a p licacio n e s m viles, una ap p n a tiv a es aq uella que
fue program ada b ajo el lenguaje o framevvork recom endado por el
fabricante del sistem a operativo .
Por ejem plo, para el caso de iOS, se u tiliz a Objective C bajo el
framevvork XCODE; p ara W in d o w s Phone es u tiliz a d o el lenguaje C#
o Visual Basic bajo el fram e w o rk Visual Studio; en la plataform a
A n d ro id se u tiliz a el lenguaje JAVA bajo d ive rso s IDEs; y, para la
p latafo rm a B la ck B e rry OS, se u tiliz a QNX Momentics IDE.
Estos fram ew o rks perm iten acced er m ediante las API (Application
Program m ing Interface) a p rcticam ente todas las caractersticas del

h ard w are y del sistem a o p erativo m vil.
Apps hbridas
Podem os d efin ir una ap licaci n hbrid a com o una ap licaci n web
d esarrollad a con los estndares H TM L, CSS y Ja v a S c rip t, entre otros, la
www.redusers.com
[g s a s a
33
cual es em paquetada bajo un co n ju n to de
U N A A PL IC A C IO N
reglas y p arm etro s que p erm ite in s ta la rla en

un d isp o s itiv o com o cu alq u ier ap licaci n nativa.
H B R ID A S IM U L A S E R
Luego, al ser ejecutada, la ap licaci n
U N A A PL IC A C I N
h b rid a u tiliz a r el m o to r del naveg ad o r web,

ocu ltan do su m en, su b arra de d ireccion es y de
NATIVA, EN LU G A R
h erram ien tas p ara poder sim ular que la W ebApp
DE UNA W E B A P P
es una ap licaci n nativa. U n claro ejem plo de app

h b rid a es el uso de PhoneGap com o fram ew ork
que in terced e entre el so ftw are -desarrollado
bajo estndares H TM L5, CSS y Ja va S crip t- con una lib re ra Ja v a S c rip t

que agrupa funcio nes especficas para acced er al h ard w are de los
d isp o sitivo s m viles.
PhoneG ap e jecu ta una sesin red u cid a del naveg ad o r w eb propio
de la p latafo rm a p ara sim u lar que la app en ejecu ci n es n a tiva y no
una W ebApp. Esto es im p ercep tib le para el u su a rio final, ya que una
app d esarrollad a cu m p lie n d o cierto s estndares, com o los que brinda
PhoneG ap, no presentar ninguna d ifere n cia al usuario final respecto
de una ap p nativa.
A p p s C r e a t e d w it h P h o r e G a o
B B C
Q9
7
h e a lt h 0 0
r a
Figura 12. Algunas de las aplicaciones que utilizaron la

tecnologa PhoneGap para crear apps hbridas multiplataforma.
www.redusers.com
34
c_/si=*?s
Ventajas y desventajas entre plataformas

La ventaja que presenta una W ebApp consiste en unificar, en un nico
desarrollo englobado bajo un web browser, una app que cum pla con
determ inadas funcionalidades. Esta es d esarrollada una sola vez y puede
ser ejecutada indistintam ente en un sm artphone,
tablet o com putadora de escritorio.
U N A A PLIC A C I N
H B R ID A P U E D E S E R
Com o d esventaja, podem os destacar que las

W ebApps utilizan de m anera lim itad a el hardw are
de los equipos donde se ejecutan. Y, en m uchos
LL E V A D A A V A R IA S
casos, el acceso al hardw are o sistem a operativo
P L A T A F O R M A S CON
que funciona bajo una plataform a no siem pre

funciona en todas las otras.
UN NICO D ES A R R O L LO
Las aplicaciones nativas perm iten alcanzar un

desarrollo ve lo z en cuanto a respuesta y un acceso
a casi todo el hardw are de los d isp o sitivos. Como
d esventaja, podem os destacar que, para lle var una app a las plataform as
nativas populares, debem os al m enos ap rend er unos cuatro o cinco
lenguajes de program acin d iferentes. Esto presentar una curva de
aprendizaje m uy grande, que insum e m uchas horas, y casi ninguna parte
del cdigo local u tiliz ad o en un desarrollo podr aprovecharse en otro.
Las ap licacio nes hbrid as nos dan la ve n ta ja de u tiliz a r un
fra m e w o rk com o PhoneG ap donde podem os d esarro lla r una nica app
que ser llevada a, por lo menos, cu atro o cin co p latafo rm as d istin tas
con un nico esfuerzo de d esarro llo . Com o desventaja, no siem pre
se puede acced er al hardw are de m anera com pleta y por igual desde
un nico d esarrollo; por esto, d ep en d ien d o la co m p le jid ad requerida,
puede que entre u n a p latafo rm a y o tra se p ierd an caractersticas.
Adem s, las ap ps h b rid as p resentan tiem pos de ejecu ci n in icial
m s lentos que los de u n a app nativa.
Em b ro llo s d e c d ig o y com p atibilid ad H T M L 5 llevaron a F a c e b o o k a dejar d e lado las ap licacio n es

hbridas de la ve rsi n mvil d e su sitio w e b , optando por d esarro llar d esd e c e ro una a p lica ci n nativa para
c a d a una de la s p la ta fo rm a s m viles existen tes. L o s c re a d o re s de S e n c h a T o u c h dem ostraron , a travs
de F a s tb o o k , que F a c e b o o k no e s tu v o tan a c e rta d o en e l cam bio.
www.redusers.com
Tecnologas de la Web actual

A lo largo de esta ltim a dcada, la tecnologa que reina la Web
cam bi drsticam ente. A p rin cip io s de 2000, cuando la banda ancha
com enz a m asificarse m und ialm ente, la tecn o log a Flash rein en casi
toda la Web gracias a que su in terfaz grfica p od a lle va r la im ag inacin
de un d esa rro lla d o r o d isead or web hacia cu a lq u ier rincn.
A p a rtir de 2007, cuando A p p le lanz su iPhone y, en su com unicad o
oficial, anunci que haban d ecid id o d ejar la tecnologa Flash fuera
de iOS, esta tecnologa co m enz a decaer a n ive l m undial. Como
p rin cip a le s problem as, p od em os m e n cio n ar que las bateras de los
d isp o sitivo s m viles no son m u y duraderas y las conexiones a internet
eran len tas (y lo siguen siendo en m uchos pases), p or lo que Flash
cau sara una dem ora im p o rtan te en cargar u n a web en iO S y co n su m ira
su batera. Un ltim o m o tivo : los baches de seguridad que siem pre
tuvo esta tecnologa podran causar serios pro b lem as a Apple.
A n d ro id , por su parte, apost a Flash, que tuvo soporte hasta la
ve rsi n 3.x de este sistem a operativo . A p artir de la ve rsi n 4.0, Adobe
d ecid i d isco n tin u a r el desarrollo de Flash para d isp o sitiv o s m viles,
y Google d ecid i d e ja r afu era el soporte Tlash en A n d ro id 4.0.
Por todo esto, HTM L5, CSS3, y Ja v a S c rip t pasaron a prim era p lana y
com enzaron a reinar fuertem ente en la Web. Repasem os, a continuacin,
estas tres caractersticas im portantes que hacen a la Web de hoy.
Figura 13. El poder de HTML5, CSS3 y JavaScript llev los videojuegos a la

pantalla de los navegadores web, llenando el vaco que haba dejado Adobe Flash.
www.redusers.com
36
/s i = * ? s
HTML5
El cam b io realiz ad o en los b ro w sers fue, d u ran te estos ltim o s
aos, sig n ifica tivo , y la m a y o r p arte de este se d eb i a HTM L5.
Pero, aun sabiendo esto, cabe que nos preg untem os... q u es,
exactam ente, H TM L5?
Podem os d e fin irlo com o un a c o le cci n de e stn d ares que
in flu ye n en el d ise o y en el d e sarro llo de u n a pgina w eb . A n te rio r
a H TM L5 , el e st n d a r que m arcaba la te n d e n c ia del m und o de los
naveg ad o res era H TM L 4.1. Estos estndares
son su p e rvis a d o s p or el W3C ( World Wide Web
H TM L5 E S UN A
C O LEC C I N DE
Consortium).
En la cre aci n de este n u evo co n ju n to de
estndares, H TM L5 d ecid i sa lta r las bases
E ST N D A R ES DE
de H T M L 4.1 y a p lic a r un re d ise o p ro p io de
D ISE O Y D E S A R R O L L O
cm o se debe e s tru c tu ra r u n sitio web. Esta

d ecisi n defini un co n ju n to de etiquetas
D E UN SITIO W E B
p re d e te rm in ad a s que p e rm ite n e stru c tu ra r una

pgina web de m anera rp id a, clara y co ncisa.
Poco a poco, los naveg ad o res w eb fu ero n
ad ap tan d o su m o to r de re n d e riz a c i n para in c lu ir el soporte

necesario p ara HTM L5. G oogle Chrom e fue uno de los naveg ad o res
que pudo a p re cia r tem p ranam en te este p o te n cia l y lo in c lu y desde
las p rim eras ve rsio n e s del brow ser.
Hoy, la m a y o ra de los b ro w se rs so po rtan un g ran nm ero
de e tiq u e tas que co n fo rm a n el e st n d a r H TM L5, p ero tam bin
en co n trare m o s d ife re n cia s entre p latafo rm as, com o, p or ejem plo,
el tipo de fo rm ato de re p ro d u cc i n de los tags <audio> y <video>.
d ep e n d ie n d o del m o to r u tiliz a d o p or el n a ve g ad o r web, podr
o no re p ro d u cirs e un cdec d eterm in ad o .
P R O B LEM A S E N E L CAM INO

En el d ise o c o rre c to d e una W e b A p p d e b e te n e rs e en cuenta un fa cto r su m a m e n te im portante:
el cdigo muerto. M u ch o s sitios co n o c id o s, c o m o
Amazon.com, p resen taro n p ro b le m a s d e p erfo rm an ce
y un gran co n su m o de b atera en m viles p o r ten er m ucho c d ig o Ja v a S c r ip t en d esu so , p ero p o r donde

el n a v e g a d o r w e b deb a p a s a r s o s.
www.redusers.com
La estructu ra de una pgina web tam bin fue reem plazad a casi
p or co m p leto con H TM L5. A ctu alm en te, crear una pgina web sim ple
se puede resu m ir en tan solo un par de tags que, gracias a su nom bre,
definen bien, en el cdigo H TM L, cul secci n co rresp o nd e a la pgina.
<head>
T tu lo de la pgina web
</head>
< body>
A q u i n c l u i m o s la d e s c r i p c i n q u e q u e r e m o s q u e t e n g a n u e s t r a p g i n a w e b .
< /body>
< footer>
C o p yrig h t 2012 - Fernando Luna
</footer>
Una sim ple lectura de este cdigo perm ite a cu alq u ier persona,, con
m n im o s co n o cim ien to s en el tema, conocer la m anera sim p le que tiene
HTM L5 de e stru ctu ra r una pgina web.
Figura 14. Un sitio web que funciona com o fuente

de informacin de la tecnologa HTML5 es www.html5rocks.com.
css
Las siglas CSS p ro vie n e n del ingls Cascade Style Sheets (Hojas
de estilo en cascada). Se u tiliz a para d efin ir la p re se n taci n de un
www.redusers.com
38
USEftS
d o cu m en to H T M L o XML e stru ctu ra d o . A ctu alm en te , W 3C se ocupa

de c u id a r y fo rm u la r la esp e cifica ci n final de las h o jas de estilo,
p ara que d ich o est n d a r quede d efin id o com o tal y sea im p lem e n ta d o
luego en los n a ve g ad o re s web.
CSS p erm ite se p arar la e stru c tu ra de un d ocum ento web de su
p re se n ta ci n en p antalla. El atrib u to <Style> p erm ite d efin ir un e stilo
e sp ecfico a cada e tiq u e ta que se u tiliz a d en tro de la co n stru cci n de
una pgina web. M ed ian te CSS, ento nces, podem os d efin ir el form ato,
color, fuente, tam ao, estilo, co lo r de fo nd o , b ord es, sub rayad o ,
u b ic a ci n en p an talla y o tros e lem en to s m s que co m p o n en un texto,
im agen o c u a lq u ie r o tro m ed io u tiliz a d o d en tro de una pgina web.
CSS3, su ltim a versin estable, perm ite aplicar reglas sim ilares a la
condicin IF de cualquier lenguaje de desarrollo, para determ inar qu
ancho de pantalla estamos utilizando y, en base a esto, aplicar un estilo
u otro a las etiquetas de cada pgina HTM L y m ostrar u ocultar secciones.
Figura 15. www.cssbasics.com nos pone a disposicin un libro online con

todas las caractersticas de CSS (desde cero, hasta transformarnos en ninjas).
JavaScript
Ja v a S c r ip t es un lenguaje de p ro g ram aci n in te rp re ta d o y definido
com o o rie n tad o a o bjeto s. Su p rin c ip a l u tiliz a c i n es del lado cliente,
m e d ian te un SDK que debe d is p o n e r el d is p o s itiv o p re via m e n te
in stalad o . Su m a y o r uso se da d entro de los naveg ad o res web.
www.redusers.com
E S S 3
39
M ediante este lenguaje de p rog ram acin podem os re a liz a r un

s in fn de cosas sobre los objetos que una pgina w eb puede tener.
A ctu alm en te todos los navegadores m odernos in te rp re ta n sin problem a
el cdigo Ja v a S c rip t que se integra d entro de las pginas web.
La m a y o ra de los d isp o s itiv o s m vile s tie n e n in s ta la d o Ja v a S c rip t
en su sistem a o p e ra tivo , lo que p erm ite a cu a lq u ie r p ro g ram ad o r web
a p ro ve ch a r m u ch as fu n c io n a lid a d e s re su m id a s d en tro del lenguaje
Ja v a S c rip t, para acced er a ciertas ca ra cte rstica s d e l d isp o s itiv o ,
p o te n cia n d o , as, el fu n cio n a m ie n to de una pgina web.
uj3schools :om
cus
**C
CU
,n
n rtw n
mQH
ttM
WTKCIKXHS IU M C
1 Build for the n e w W in d o w s Store.

1
* ' - l . PM# i
12 windowi a 1
1
J a v a S c r ip t
rh m
M v S c * p c i T H f e n p t r ? la n p js g i s i t** W S
l * v * S o % t u t e d r f c r i o W e s
M a l# fo n n a . com m um cat* willt 0>
lo a *
n d mucH rrwit
t t * * t o M i m . V o n w n jo y it.
T r y lt Y o j r s e l f E x a m p ie s in E a ch C h a p te r
M* tuuiut
W T M r v ir t
D G * CSS
DOMEv*m
O bJ#ct
i* T> * w a r
-CMC" * Iiv ilo w i x** erme r i t r t i
M y F ir s t J a v a S c r ip t E x a m p lt
*WH 8 p*>*7ip
n m il.
Figura 16. www.w3schools.com es un buen punto

de partida para aprender JavaScript desde cero.
Libreras y fram eworks mviles

Para co m p re n d e r m ejor los trm inos del d esarro llo web, debem os
separar los trm ino s libre ra y fram ework. Una lib re ra es un
I I
CSS3: E L VE R D U G O
La ltima versi n c o n o c id a d e C S S e s la versi n 3 , en la q u e se inco rp o raro n ve n ta ja s co m o anim acin,

d is e o g r fic o y estilo s e s p e c fic o s para la e s t tic a w eb, q u e hicieron q u e C S S , junto c o n Ja v a S c rip t,
se tra n s fo rm a ra en e l verd ugo del c a s i olvidado A d o b e Fla sh , pionero de la d c a d a del 2 0 0 0 en el diseo
w e b d e sitios anim ados.
www.redusers.com
40
USEftS
co n ju n to de tecnologas que puede englobar
L A S L IB R E R A S M S
caractersticas de CSS y Ja v a S c rip t y que nos
CO N O CID A S SON
facilita, de alguna m anera, el desarrollo de una

solucin web para am bas p lataform as. D entro de
JQ U E R Y M O B IL E ,
las lib reras ms co no cidas, podem os m encio n ar
SEN C H A TO U C H
a jQ u e r y Mobile, Sencha Touch y jQ u e r y UI,

entre otras.
Y JQ U E R Y U I
Estas se ocupan de co m p a cta r fu n cio n alid ad es

que requieren m ucho tiem po de elab o raci n por
parte de un d esa rro llad o r en funcio nes especficas
que nos ap ortan agilid ad al m om ento de d e sa rro lla r y nos perm iten
d esp reo cup arn o s p or la esttica o solucin cu an d o el p ro yecto se deba
ejecu tar en d iferentes p lataform as.
Por otro lado, el fram ew o rk nos p erm ite englobar, en u n nico
entorno, todo el co n ju n to de a rch ivo s y A PIs que nos perm iten
d e sarro llar una solucin, estructu rad o s de una m anera jerrq u ica .
D entro de los fra m e w o rk s ms co n o cid o s, pod em os m e n cio n ar
a Eclipse y N etbean s com o los m s p o p u lare s y g ratu ito s, y a
D re a m w e a v e r d en tro de los fram ew o rks pagos. Todos estos p restan

ca ra cte rs tica s sim ila re s, aunque con alg u n o s to q ues p erso n ales, y
p e rm ite n in c o rp o ra r las lib re ra s m e n cio n ad as a n te rio rm e n te sin
m a yo re s p rob lem as.
Figura 17. jQuery Mobile y Sencha Touch son las dos libreras
ms utilizadas para realizar WebApps y apps nativas.
www.redusers.com
Entornos de desarrollo
Los entornos de d e s a r r o llo (IDE, p or sus siglas en ingls)
p e rm ite n in co rp o ra r fu n c io n a lid a d e s extra de m an era n a tiva para
e je cu ta r los d e sa rro llo s en un am b ie n te de test, s im u la d o r y hasta
para co m p ila r los p ro ye cto s re a liz ad o s de m an era nativa.
D entro de los e n to rn o s de d e sa rro llo m s co m unes e n co n tram o s a
D ream w eaver, V isu a l Stu d io , QNX Mom entics IDE, Titanium Studio.
entre otros. Los fra m e w o rk s tam b in p e rm ite n re a liz a r co m p ilacio n es
de p ro ye cto s que se d e s a rro lla n de m anera n ativa , pero generalm en te
re q u ie re n de u n p lug in que p erm ita lle v a r a cabo esta acci n.
Dreamweaver
El ID E elegid o para lle v a r a d e la n te los d e s a rro llo s ser A d o b e
D ream w eaver. Este fu e elegid o d eb id o a que, desde el ao 2010,

in teg ra el d e s a rro llo web m o b ile de m anera n ativa . En 2012, la firm a
A d ob e a d q u iri la m e n cio n a d a e m p resa PhoneG ap, que perm ite
c o n v e rtir una web a ap p para las p lata fo rm a s m vile s m s pop ulares,
y con esto integr de m anera tra n sp are n te el uso de Pho neG ap d entro
del ID E D ream w eaver.
J
D re am w eaver C C
wm
El nuevo estndar
en estndares web.
U u a v a u n r w w a , a rra c / i i n * n o a n a a vto
rt^rlpadanartojprocrnwcfctofmcmto
M?
jn - H '- r -
c*'c
6c & w
conecacas y * tas nne.*i
*-na-.a
ce *0 c c ^ . v j . i
rc' D W "**IC t*
w t l c a i c a la i o - o c C - i , * a . j c a a m a r r a n a
a c e m e a ta i
a<a a
if * c s n * t a i a l c '-a m c
tuTundeC'MV'C*0 UHiCCuU3C MVtCICuC
ca
te * u
o j* *
Figura 18. Desde www.adobe.com/products/dreamweaver

podem os descargar la versin de prueba de este popular IDE.
www.redusers.com
42
USEKS
1 . P L A T A F O R M A S Y T E C N O L O G IA S M O V IL E S
O tra gran ve n ta ja de D re a m w ea ve r es que in clu ye un ento rno
WYSIWYG, que nos p erm ite ver, en tiem p o real, el resultado

d el cdigo que escrib im o s, y tam b in testear la fu n cio n alid a d del
resu lta d o de nuestro s d e sa rro llo s sin re c u rrir a w e b s e r v e r externos.
Si bien D re am w ea ve r es pago, se puede
d escarg ar una v e rs i n de p ru eb a p or 30 das,
D REAM W EAVER
con su scrip c i n p re via , en su pgina oficial:
P E R M IT E V E R EN
w w w .ad o be.co m /la/p ro d u cts/d ream w eaver.

html. La ltim a ve rs i n de D re am w eave r al
T IE M P O R E A L E L
m o m en to de e s c rib ir esta o bra es D re a m w ea ve r
RESULTAD O D EL
CC. Pero si d isp o n em o s de la v e rs i n 5.0, 5.5

o 6.0, tam b in p o d rem o s lle v a r a cabo estos
CDIGO E S C R IT O
d esa rro llo s, y, p ara la in teg raci n con PhoneG ap,

desde la v e rs i n 5.5.
Dado que D re a m w ea ve r fu n cio n a solo en las
p lata fo rm a s Mac y W in d o w s, q u ien es u tilice n
Linux o a lg u n a o tra v a ria n te de Unix pueden re c u rrir a Eclip se o

N etb eans com o fra m e w o rk de d esarro llo .
Estas dos p latafo rm as tie n e n ve rs io n e s para todos los sistem as
o p e ra tivo s, y Netbeans, a p a rtir de la v e rs i n 7.3, integra un web
s e rv e r n a tivo que p erm ite e je cu ta r las p ru e b a s en la co m p u tad o ra
d on d e d esarro lle m o s.
WI IMMllUUi
O
Q
J
E1a
r : -
, +
>
uaD
_
..MI M
alai * M . . * <M < M

. . I M
It .u w .
M .
la . M u t _ .ll
rt
FARMWG
Ii i m h i
...
mu
I*; ai** / |3* / l i*
Figura 19. Com o alternativa a Dreamweaver,

Netbeans es una excelente opcin, ya que su ltima versin
integra un visor WYSIWYG y un web server nativo.
www.redusers.com
USE&S
43
Y si d isp o n em o s de una red Wi-Fi y d is p o s itiv o s m vile s

p ara testear las W ebA pps, p o d rem o s acce d e r sin problem a
desde el web b ro w ser m o b ile al w eb s e rv e r que N etbeans ejecu ta.
Pu ede d escarg arse d esde el sig u ien te lin k w w w .n etbean s.org/
dow nloads/start.htm l?platform =w indow s& lang=en& option=all.

Si, p or el co n tra rio , se desea u tiliz a r Eclip se, este podr
d escarg arse d esde su sitio w eb oficial: w w w .e c lip s e .o rg .
E s te capitulo nos introdujo a las d ife ren tes platafo rm as m viles y vim o s c m o interacta la n u e va W eb
so b re e s to s n o ved o so s d isp o sitivo s. C o n o cim o s p a rte d e la historia de la s platafo rm as m s im portantes
y del n acim ien to d e la tecno lo ga H TM L5 q u e, junto c o n C S S 3 y Ja v a S c r ip t , im pone las re g la s de la nueva
W e b . Tambin re p a s a m o s la s diferen cias entre W eb A p p , a p p nativa y a p p hbrida, y los en to rno s d e
d esarrollo y libreras que n o s perm itirn llevar a c a b o nuestro cam in o h acia la c re a c i n d e a p licacio n es
m viles p a ra la m ayo ra d e lo s d ispo sitivo s actu ales.
www.redusers.com
44
F Z n iH
Actividades
T E S T DE A U TO E V A L U A C I N _____________________
1
Qu es una WebApp?
Mencione algunas ventajas que brinda una WebApp.
Qu es una aplicacin nativa?
Mencione dos caractersticas de las aplicaciones nativas que las coloquen

en desventaja con respecto a las WebApps.
Qu es una librera?
Adobe Flash consume m enos recursos que los que HTML5 y C S S exigen
en un browser?
Los dispositivos mviles de Apple poseen soporte de Adobe Flash Player?
Nombre al menos cuatro plataformas actuales del mundo mvil.
Qu es JavaScript?
10
Mencione al menos tres frameworks de desarrollo mvil.
P R O FESO R EN L IN E A
Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse
con nuestros expertos: profesor@redusers.com
www.redusers.com
\\\ \ \\ \ \\ \ \\ \ \\
///////////////
HTML5
H TM L5 es el le n g u a je d e m a rc a d o qu e d o m in a la W eb de h o y
y qu e s im p lific las fu n c io n e s u tiliz a d a s en lo s n a v e g a d o re s ,
ta n to de e s c rito rio c o m o d e lo s d is p o s itiv o s m v ile s .
En e ste c a p tu lo , h a re m o s un re p a so p o r a lg u n o s c o n c e p to s
im p o rta n te s d e la base p rin c ip a l de H TM L5 q u e n os sern
de su m a u tilid a d p a ra el re s to del lib ro .
T El lenguaje H T M L 5 ............. ....46
Geolocalizacin............
Declaraciones y metatags.... ....50
Resumen........................
HTML5 para
Actividades....................
aplicaciones mviles............ ....56
z 17 1z1
46
l/SERSl
2. H TM L5
El lenguaje HTML5
HTML5 fue creado con el propsito de b rindar soporte al contenido
existente en la Web basndose en los estndares im puestos con HTML
4.x, pero unificando la esttica y funcionalidad de los sitios en todos los

navegadores web, lo que se conoce com o com patibilidad cross-browsers.
Su principal objetivo
D el estn d ar propuesto por HTML5 podem os hacer alu sin a
los nuevos elem entos d entro de la sintaxis que difieren en gran
p arte de la ve rsi n a n te rio r de este lenguaje de m arcado. HTM L5 es
u tiliz ad o por los d isead ores que crean sitios web y no h ay ninguna
p ro b lem tica cuand o se requiere co m b in arlo con u n a ve rsi n anterior.
Navegadores y sistemas operativos

H TM L5 propone h erram ien tas avan z ad as y m ejores exp eriencias
para el usuario final g arantizand o el correcto fu n cio n am ien to de casi
todas sus etiquetas en la m ayo r cantid ad de navegadores web.
S ta tC o u n te r G lo b a l S ta ts
T o p 5 n a v e g a d o r e s w e b d e E s c rito rio e n t r e F e b r e ro d e 2 0 1 3 y F e b r e ro d e 2 0 1 4
0%
Figura
1.
10%
20%
30%
40%
50%
Hasta febrero de 2014, Google Chrome es el browser ms
utilizado, seguido por Internet Explorer, Firefox y, ms lejos, Opera.

H a b la r de naveg ad o res im p lica p ensar en Chrom e, Firefox, Internet
Explorer, Opera, C am ino, Safari, A n d ro id Brow ser, Galen, Slim Boat,
A p o llo , D o lp hin , iCab, O m niW eb, Voyager, SpaceTim e, Q upZ illa,
www.redusers.com
USEKS
47
N etSurf, Incgnito, Epiphany, myBrovvser, RockM elt, y otros tantos ms

que haran la lista casi interm inable.
T en em o s una o p ci n in m en sa de naveg ad o res web circu la n d o por
in te rn e t, y esto se debe a la varie d a d de p lata fo rm a s com o W indow s,
Linux, OS-X, iOS, A n d ro id , W in d o w s Phone, Nokia, B la ck B e rry, entre
otras tantas. Por su erte, desde hace un tiem po, los d e s a b o lla d o re s
co m p re n d ie ro n que lo ms im p o rta n te de un n aveg ad o r pasa p or el
m otor d e render, y as fue com o d ecid ie ro n a d ap ta r su s n u evas

v e rs io n e s con los m o to res de re n d e riz ad o m s p o p u la re s de la Web.
S ta tC o u n te r G lo b a l S ta ts
T o p 1 0 n a v e g a d o r e s w e b e n s m a r lp h o n e s e n t r e F e b r e r o d e 2 0 1 3 y F e b r e r o d e 2 0 1 4
Figura 2. Por la segmentacin de Android (versin 2.1 a 4.4), Android browser

es el navegador ms utilizado, dejando a Chrome relegado al sexto puesto.
H asta el m om ento de e s crib ir esta p u b licaci n , A n d ro id segua
rein an d o en el m ercado de sm artphones a n ive l m u n d ial, con una
p o rci n de m s del 80 % . Sin em bargo, a pesar de los grandes esfuerzos
realiz ad o s p or Google y de la cantid ad de firm as que integran el
sistem a o p e rativo A n d ro id en sus tablets, este sucum be en un terreno
que est siendo am p liam ente lid erad o p or iPad.
E L P ASA D O DE Y O U T U B E
Y o u T u b e dependi p o r a o s, en la rep rod u cci n d e sus vid e o s, del plugm F la s h P la y e r . To d as la s pelculas
eran co n ve rtid a s, en el p ro ce so d e upload, al form ato de vid eo .FLV . H T M L5 trajo vien to s de cam b io
a e s te p ortal, y a que ahora n o e s n e c e sa rio d ep e n d e r m s de e s te plugin.
www.redusers.com
48
l/SERSl
2. H TM L5
S la t C o u n t e r G lo b a l S ta ts
T o p 5 n a v e g a d o re s w e b e n ta b le ts e n t r e F e b re ro d e 2 0 1 3 y F e b re ro d e 2 0 1 4
Figura 3. Si bien Android ha conquistado el mercado de los

smartphones, an no se ha podido quedar con el de las tablets.
Motores de renderizado
Entendem os por motor de ren derizado al softw are que interpreta
el co n ten id o web (basado en H TM L, XML, grficos, CSS3 y Ja v a S c rip t) y
lo traduce a lenguaje grfico, p intand o en p antalla la esttica del sitio
web o correo electrnico, para que el usuario lo visu a lice o im prim a.
A p esar de que la segm entacin se est reduciend o, an existe una
varied ad im p ortante de m otores de rend erizad o . Entre ellos estn:
Gecko, T rid en t, W ebKit, KH TM L, Presto, Tasm an, gzilla, G tkH TM L, Servo
y Blink. Los tres p rim ero s son los ms u tiliz a d o s p or los brow sers ms
com unes de cada p latafo rm a, m ientras que Blink es el nuevo m otor
d esarrollad o para Google Chrom e que reem p laza a WebKit, y Servo es
el n uevo m otor d esarrollad o p or M ozilla, que reem plazar a Gecko en
las p latafo rm as con arq u ite ctu ra ARM.
Un HTML para dominarlos a todos

H asta ahora sabem os que los sistem as de e scrito rio estn dom inados
por W indow s: los sm artp hones, p or A ndroid; y las tablets, p or iPad,
aunque en estos dos ltim o s casos los co m p etid o res y ofertas de
sistem as o p erativo s abundan. Por el lado de los b row sers, debem os
hablar de m otores de render, ya que estos son los que interp retan al
lenguaje de m arcado, p rocesando co rrectam ente las nuevas etiquetas.
www.redusers.com
La m ayo ra de los b ro w sers pueden in te rp re ta r el lenguaje de

m arcado HTM L5 con casi la totalidad de sus funciones, por lo que los
d esarro llo s basados en esta tecnologa nos garantizan que funcio nan
casi p or igual en todas las p lataform as.
Un asp ecto m u y p o s itiv o de HTM L5 es que no solo se d ecid i a
d efin ir las e tiq u e tas p rin cip a le s del lengu aje H TM L, sin o que tam bin
in teg r un co m p e n d io de n u evas te cn o lo g as que se fu ero n in teg ran d o
a los d isp o s itiv o s . En tre ellas, d estacam os: geolocalizacin,
alm acenam iento web, w e b sockets y w e b w ork ers, e n tre otras

b on d ad es del lenguaje.
Todas estas m ejoras suponen una a ctu a liz a ci n que p otencia el
co njunto de herram ientas ya existente y hab ilita a que diseadores
y program adores web puedan crear pginas, sitio s ricos en co ntenido,
sin d ep en d er de herram ientas o plugins de terceros.
HTML5 garan tiza que quien disea una web b asad a en este nuevo
paradigm a lograr obtener una m ejor capacidad de respuesta y
velo cid ad . Adem s, al co m b inar este lenguaje con CSS3 y JS , cu alq u ier
d ise ad o r podr resolver, de form a nativa, tareas com p lejas com o lo
son la edicin de im genes, efectos de som bras, rep resentacin de
m apas, visu a liz a ci n de vid e o s y repro duccin de audio, as com o
o bten er la ub icacin fsica de un u su ario , entre otras tareas. Y lo m ejor
es que har todo esto sin tener que re cu rrir a un d esarro llo nativo.
C
rt
-TKo<*'KT<Vi*a
M O B ILE H T M L
Figura 4. Para conocer en detalle lo que nos brinda HTML5,

podemos recorrer el sitio www.mobilehtml5.org, donde
encontraremos su cobertura segn navegador y plataforma.
www.redusers.com
50
l/SERSl
2. H TM L5
Si bien existen d iferen cias y no todos los navegadores web soportan

todas las ca ra cte rstica s de HTM L5, la m ayo ra presta el soporte
necesario para que las W ebApps o sitios web basados en este nuevo
estnd ar puedan vis u a liz a rse correctam ente.
Declaraciones y metatags
Debem os aclarar, antes de in icia r el repaso de la e stru ctu ra de
declaraciones y metatags, que HTM L4 y HTML5 son co m p atibles

recpro cam ente. No hay restriccio n es en cuanto al diseo de una
pgina, y todo el cdigo que escribam os en HTM L4 funcio nar sin
p ro b lem as en HTM L5. De igual m anera, si una pgina re a liz ad a en
H TM L4 co n tien e etiquetas especificas de HTM L5, estas fu n cio n arn
sin ningn inco nveniente.
Doctype
Toda pgina web se in icia con la d eclaraci n de las etiquetas <html>
y se cierra con la m ism a etiqueta </html>. D entro de estas, se estructura
el encab ezad o de la pgina, <headx/head>, y el cuerpo de la pgina,
<bodyx/body>.
A n tep uesta a la etiq ueta H T M L que in ic ia la estructu ra de estos
a rch ivo s, debem os agregar la palabra doctype, que significa tipo de
documento. Esto se u tiliz a para que el naveg ad o r id entifiq ue el tip o de

a rch ivo que est p or abrir. Un naveg ad o r web puede a b rir tanto pginas
w eb com o pginas XML, im genes y, en las ltim as versio n es de los
b ro w sers ms populares, tam bin puede a b rir un arch ivo PDF directo,
sin necesidad de un plug in o ap licaci n clien te p reviam en te instalada.
\\\
D E F IN IC IO N E S D E L L E N G U A JE
L a s d e fin icio n e s de H T M L 5 an n o e s t n c e r r a d a s y s e e s tim a q u e p a ra fin es d e 2 0 1 4 recin
s e p u b lic a r el e s t n d a r definitivo . Aun a s i, lo s p rin c ip a le s n a v e g a d o re s w e b y a e s t n b rind an do
el s o p o rte c o rre s p o n d ie n te .
www.redusers.com
Dentro del encab ezad o de pgina <head> se agregan d eclaraciones

y referen cias a otros a rch ivo s que requiere la pgina en s, como:
R eferencias a h o jas de estilo CSS.
R eferencia a a rch ivo s Ja v a S c rip t que co n tienen funciones.
R eferencia a iconos o favicons.
Fu n cio nes en s de Ja v a S c rip t que no se agregan en ningn archivo.
El titu lo en s que m uestra la pgina en el naveg ad o r web.
< !d octyp e htm l>

<head>
< title > E s to es una pgina w eb</title>
< S cript>
Function SaludoO {
A le rtO H o la m undo');
>
</Script>
c lin k re l= "s ty le s h e e t" typ e = //text/css" h re f= "e stilo re d u se rs.css">
</head>
<body>
< ! - E structu ra de la pgina, ments, textos, im genes, videos, etc -->
</body>
</html>
En el cuerpo de pgina <body> se inco rp o ra todo el contenido

que n o rm alm ente visu a liz am o s en las pginas web de los sitios
que v isita m o s. Entre ellos:
El logo de la empresa.
La b arra de navegacin o m ens.
Fragm entos de textos e im genes.
Video, audio, Iin ks hacia otros tip os de archivo.

G ale ra de im genes.
Si an no hemos instalado ningn ed ito r de H T M L (como, por

ejem plo, Dream w eaver), podem os ab rir Notepad o Notepad++ y copiar
el cdigo de estos ejem plos en el orden en que fueron expuestos.
Luego guardam os el a rch ivo en form ato H TM L bajo el nom bre index.html,
y hacem os doble clic sobre l para verlo en el navegador.
www.redusers.com
52
2 . H TM L5
Figura 5. Dreamweaver permite identificar la estructura HTML, indicando

con diferentes colores cada seccin y notificando si hay un error de tipeo.
Charset
D entro del doctype co rresp o nd ien te a HTM L4, se d eclara charset,
que es u tiliz a d o para d efin ir el id io m a en el cual se realizar la pgina
web (espaol, ingls, francs, portugus, etctera). Esto afecta la
vis u a liz a ci n de los caracteres.
... S trc t/ / E I\ T ...
En HTML5 se sim plific esto, generando un charset internacional,

que perm ite la correcta visu a liz a ci n de todos los caracteres existentes.
c m e ta c h a rs e t= "u tf-8 ">
E D ITO R E S H TM L
P a r a el o b je tivo d e e s te libro, u tiliz a re m o s D r e a m w e a v e r c o m o e d ito r H T M L p re d e te rm in a d o .
D e s d e w w w .a d o b e .c o m p o d e m o s d e s c a rg a r la v e rs i n d e p ru e b a q u e d u ra 3 0 d a s. S i no, tam b i n
p o d e m o s re c u rrir a a lte rn a tiv a s c o m o N o te p a d + + , E c lip s e o N e tb e a n s . q u e ta m b i n re sa lta n
la sin ta x is d el len g u aje.
www.redusers.com
USEKS
53
Si deseam os d ecla rar un ch arset especfico para
P A R A D E C L A R A R UN
que la pgina se ve a co rrectam ente en ingls,

espaol, o en el idiom a que fuere, debem os
C H A R S E T E S P E C F IC O
buscar la referen cia ISO especfica al charset del
D E B E M O S B U S C A R LA
id io m a necesario. Por ejem p lo , en espaol se

u tiliz a Charset=ISO 8859 1.
R E F E R E N C IA ISO D E L
ID IO M A N E C E S A R IO
Estructura de un
documento HTML5
Ya conocem os cm o se e stru ctu ra un d ocum ento H TM L, tanto en su
encabezado
<head>
com o el co n ten id o del cuerpo de la pgina
< body> .
Nos queda p or delante repasar las secciones creadas para HTML5 que
represen tan el co n ten id o de una pgina web.
Todos los sitio s in co rp o ran en su e stru ctu ra una m etodologa sim ilar
para agrupar las d iferen tes secciones de un sitio. D entro de estas,
podem os destacar las siguientes:
Un encabezado (texto y/o logo).
Una barra de n aveg acin (lateral o superior).
Un rea central donde figura(n) la(s) n o ticia(s) o in fo rm aci n general.
Una barra lateral con in fo rm aci n o lin ks adicionales.
Un pie de pgina.
Encabezado
B a rra
B a rra d e navegacin
(links.
publicidad)
Cue rp o principal
(N o ticias , im g en e s, videos, e tc .)
P ie d e pg in a
Figura 6. Representacin grfica de las secciones de un sitio promedio.

HTML5 busc nombrar cada seccin de una manera mucho ms amigable.
www.redusers.com
54
l/SERSl
2. H TM L5
HTM L5 etiquet cada secci n con un nom bre que la referen cia
am igablem ente, para m ejorar la tarea del d ise ad o r web, com o
tam bin la de los m otores de indexacin. Veam os, en la siguiente
tabla, el nom bre de cada elem ento y su m anera de im p lem entaci n.
N U E V O S E L E M E N T O S E N H TM L5
ELEMENTO CDIGO DE IMPLEMENTACIN
T DESCRIPCIN
H eader
<header id= //encabezado//>
Cabecera de la pgina.
Hgroup
<hgroup>
P e rm ite agrup ar tags
< h l> T tu lo l< / h l>
del tipo ttu lo dentro de
< h2 > S u b ttulo 2</h2>
Header.
</hgroup>
Nav
<nav>
P e rm ite cre ar una barra
< a h r e f= " lin k l.h t m r > lin k l< /a >
de navegacin principal
<a h re f= "ln l< 2 .h tm l"> ln k 2</a>
que contiene diversas

etiquetas.
</nav>
Section
<section>
P e rm ite d e finir un rea
< h 2 > Ttu lo 2</h2>
de contenido dentro de
<im g src=//im agen ,7>
un sitio w eb. Se u tiliza
< p> Texto de la seccin</p>
habitualm ente en los
</section>
blogs, para agrupar

cada noticia o post.
Footer
< fo o te r>
Representa el pie de
< p > C op yrigh t 2014 - Redusers -
pgina de un sitio web.
Fernando Luna</p>
</footer>
E L EC O S IS TE M A C H A R S E T
D ad a la diversid ad de lenguas ex isten tes en e l mundo, e s co m p lica d o ab ord ar en profundidad to d o lo
referen te al c h a rs e t. Y no p o d e m o s dejarlo d e lado porque en el futuro n o s p ued en requ erir el d esarrollo
de a p lica c io n e s en cualquier idiom a. P o r ello, d e b e m o s ap un tar e l siguiente link de referen cia para
s a c a rn o s cualqu ier duda: w w w .d e s a r r o llo w e b .c o m / a r tic u lo s / ju e g o -c a r a c te r e s -c h a r s e t-h t m l.h tm l
www.redusers.com
USEKS
ELEMENTO CDIGO DE IMPLEMENTACIN

A rtic le
55
DESCRIPCIN
< artcle >
Define diversas zonas
< h l> V is u a l Basic 201 0< /hl>
con determ inado
< p > E I libro Manual V isu al Basic 2010
contenido dentro de
perm ite conocer a fondo la herram ienta
otro elem ento. Estos
com plem entaria de V isu al Studio...< /p >
contenidos pueden
</article>
anidarse para luego ser

extrados fcilm ente y
distribuidos a travs de
servicios R SS.
Aside
<aside>
P erm ite estructurar
<h4>Escapadas</h4>
en un sitio web todo
< p>B aha M anzano - V . la Angostura</p>
contenido que no
<p>Cabaas Huapi - Bariloche</p>
tenga relacin con los
...
elem entos p rim a rio s de
</aside>
este, com o ser una barra

la te ra l de inform acin.
Tabla 1. Nuevos elementos de estructura/semnticos en HTML5.

Existen m uchas ms etiquetas que nos perm iten crear una pgina
web m oderna y que, com b inadas con CSS, ayud arn a cu alq u ier
d esa rro llad o r o d ise ad o r web en la esttica y la estructura, pero el
o b je tivo de este lib ro es ab arcar el desarrollo web m obile y cm o se
integra este con los d isp o s itiv o s m viles. Por esta razn, dejarem os
el dise o esttico de cada a p lica ci n en m anos de una lib re ra com o
jQ u e ry M obile.
Si desean co n o cer ms a fondo sobre HTM L5 podrn hacerlo a travs
del manual HTML5 p ublicad o p or esta m ism a editorial.
KD
N U E V O S Y V IE JO S E L E M E N T O S HTM L5
D e b em o s te n e r en cuenta que H T M L5 e s t en co n stan te d esarro llo , p o r lo que lo s e le m e n to s que existen

actu alm en te pu ed en va ria r o h asta n o s e r tenidos en cuenta al m om en to d e d ictam in ar la s e s p e c ific a cio n e s
finales. En el p o rtal w 3 c .o r g p o d e m o s co n su lta r la inform acin p re c is a y actualizada.
www.redusers.com
56
USEFtS
2 H TM L5
HTML5 para
aplicaciones mviles
Los d isp o s itiv o s m vile s m odernos ad op taron HTML5 para explotar
de m anera eficiente el acceso que este lenguaje b rin d a al h ard w are y al
sistem a operativo . Y si pensam os en d isp o sitivo s m viles, sabem os en
que la m ayo ra de estos reina la interfaz de escritura tctil.
Estas interfaces perm iten el ingreso de datos, alfan um rico s o
n u m rico s, a tra v s de un teclado virtu a l, por lo cual este teclado,
a d ife re n cia de los fsico s, puede lim ita r su vis u a liz a ci n de teclas
en base al cam po de texto en el cual se debe ingresar inform acin.
Esto p erm ite fa c ilita r la v id a del d esa rro llad o r o d ise ad o r web, ya que
se e vita valid ar, m ediante algoritm os co m p lejos, los datos ingresados
en cada tipo de cam po.
A co n tinuaci n, repasarem os las p ro p uestas de HTM L5 que facilitan
el trabajo de cargar in fo rm aci n especfica en una pgina web.
"
t im e
r.
' f
*-
1 * .
B 1 C
T IM E
O
S F C T B N ft
Fiscal Cliff Averted. But

Further Deadlines Loom
Figura 7. Desde la proliferacin de los dispositivos mviles, el diseo

responsivo tom un papel muy importante en el terreno web.
Componentes <lnput Type>

Las etiquetas < In putType> p erm iten estab lecer el tip o de cam po que
se vis u a liz a en un fo rm u lario web. HTML5 pro p uso cam bios a estas
www.redusers.com
C E S3
57
etiquetas para facilitar, en los navegadores de escritorio , la valid aci n

de datos ingresados y, en los d isp o s itiv o s m viles tctiles, el ingreso
de in fo rm aci n a travs del teclad o correcto.
Veam os, a co ntinuaci n, cm o im p le m e n ta r favo rablem ente
la etiq u eta <InputType> en el diseo de ap licacio n e s m viles.
Input Type Color

Este in p u t typ e p erm ite v is u a liz a r la p aleta de co lo re s p ara que
se leccio n e m o s uno de ello s. So lam en te fu n cio n a en los naveg ad o res
C h ro m e y Opera.
Por favor, seleccione su color favorito: c in p u t typ e = //c o lo r// nam e=//c o lo rfa vo rito ,/>
M a n q a a e t o lo m c n H l
C rt
<
ilr'///CA),V^liirwvr)^lftop/Mo!nlr'%?OR(V!*^.?OPrnjfVT/Drs.irrollo^,?OMnhilrV, ''
41 |
Bienvenido a nm veb(punto)coin
Pot
la v a ,
id e c o a e
cok* fe v x tto .
Figura 8. Seleccin de un color dentro de la paleta

de colores disponibles en el sistema operativo.
IN P U T T Y P E S Y M O TO R ES D E R EN D ER IZA C IO N
D eb id o a la fra g m e n ta ci n de m o to re s de rend erizacin, m u ch a s v e c e s e n c o n tra re m o s q u e las etiqu etas
<lnput Type> no s e c o m p o rta n p o r igual en to d a s la s p la tafo rm as. M a yo rm e n te e s to o cu rre en aquellas

del tip o C o lo r , D a te y R a n g e , entre otras.
www.redusers.com
2.
S E F tS
H TM L5
Input Type Date

Perm ite m anip ular cam pos que requieran el ingreso de una fecha. Es
soportado, por el m om ento, por los navegadores Chrom e, Safari y Opera.
<nav>
Seleccione su fecha de nacim iento: cin p u t ty p e = "d a te "
nam e = " n a c im ie n to '^
</nav>
] M a n q o d e fe c h a s e n H T f
0 filey//C^User5/fcluna/DGSlctop/Mobile%20Bpok%OProject/Desarrc<? B
Qi W
B i e n v e n i d o 21 i i i i \ v i kb ( p i i i i t o ) c o i n
Seleccio ne su fecha de Nacim iento: 21/03/2013
marzo 2013 1
|> 11
dorn
lun
mar
mi
,u*
vio
2-1
26
26
2T
28
10
11
12
13
18
19
21)
?4
75
31
. hoy
14
E l
15
16
22
23
77
78
79
30
Dorrai
F ig u ra 9. Seleccin de la fecha desde un com bo desplegable. La forma

de visualizar el calendario cambiar segn el sistema operativo y navegador.
Input Type Datatime y Datetime-local

En am bos casos, nos perm ite m a n ip u lar un cam po especfico donde
seleccio nam o s la fecha y hora. Veam os el ejem plo para <InputType
Datetime>:
Ingrese fecha y hora de nacim iento: c in p u t ty p e = "d a te tim e " n a m e = "b d a ytim e ">
Y la fecha, hora y G M T correspondiente para cin p u t Type datetime-local>:
Ingrese fecha, y G M T hora de su nacim iento: c in p u t typ e = //d a te tim e -lo c a r/

n a m e = "b d a y tim e J o c a r>
www.redusers.com
59
Estos dos elem entos solo fu n cio n an co rrectam ente en los

n aveg ad ores Safari y Opera.
Input Type email

Perm ite d efinir un cam po donde solo se ingrese una d ireccin
de correo electrnico. Este in p u t typ e fu n cio n a solam ente en Opera,
Chrom e y Firefox.
I n g r e s e su e - m a i l : c i n p u t t y p e = " e m a i l " n a m e = " e m a i l " >
B ic a v e n id o a m lvu-b(punto> coni
A |
R
0
<>1z l *
P |
<3
l g l i j 1 k 1 l 1 a i I
.7123
1
i
1
r
Figura 10. En los dispositivos mviles, el teclado dispondr

de la tecla arroba dentro de las teclas predeterminadas.
Input Type URL

Al igual que la anterior, d n p u tT y p e UR L>
p erm ite in g resar una d irecci n U RL en un cam po.
Al m om ento, es so portado en Firefox, C hrom e y
Opera.
IN P U T T Y P E U R L
P E R M I T E IN G R E S A R
U N A D IR E C C I N U R L
E N UN CA M PO
In grese tam bin la U R L de su w eb: c in p u t t y p e = " u r r

nam e=//w eb//>
www.redusers.com
60
G 2H S
2. H TM L5
B ie n v e n id o a m iw e b ( p u n t o ) c o m
lagro<mi -mill
<3
1 1 L I 111
i ,i i
1
1 intro
s i
'
.7123
COm
7123
Figura 11. Para este input type, se incluye en el teclado

virtual una tecla de acceso rpido .COM, y se visualizan solo
los caracteres permitidos en una direccin URL.
Input Type Search

Este in p u t type m uestra un cam po de bsqueda que p erm ite ingresar
una leyenda in fo rm a tiv a que desaparece al e s crib ir sobre el cam po.
<nav>
In grese el te xto a buscar: c in p u t ty p e = "s e a rc h " n am e = "w e b sea rch "
p la c e h o ld e r= "T e xto a b u sca r"> c in p u t typ e = //button// value= //Buscar//>
</nav>
Este atrib u to fu n cio n a bien en Google C h ro m e y Safari. La leyenda

tam bin se ver en otros navegadores com o Firefox, aunque en este
no se m o strar el botn au to m tico de elim in aci n de texto.
M ARCA DE A G U A
T o d o s los c a m p o s de tex to p erm iten el u so d e la p rop ied ad placeholder= algn texto . E s to sirve co m o
una e s p e c ie d e o rien taci n al usuario p a ra que in g rese lo s d a to s c o rre c to s en el c a m p o , y e s m uy til
para a p lica r en p an tallas c o n m u cha inform acin y d e d im en sio nes redu cid as.
www.redusers.com
C E2 Z3
h file///C,A lM *V fo lu n a / D k to p / M
to k % 20l>roj
ISB
2l
61
B i e n v e n id o a m h v e b ( p iin t o ) c o m
In g re s e d texto a b u s c a r
Buscar
Figura 12. En Chrome y Safari este input type funciona

a la perfeccin. Es posible lograr lo mismo en otros navegadores,
pero ya deber entrar el cdigo JavaScript com o intermediario.
Input Type Range

Perm ite visualizar un control estilo Slider y establecer un valo r mnimo,
un valor mximo y el intervalo de cam bio entre uno y otro valor.
Seleccione el va lor corre cto: c in p u t ty p e = "ra n g e " n a m e = "va lo re s " m i n ^ ' l "
m a x = "1 5 ">
En el ejem plo, establecem os su v a lo r entre 1 y 15. En cam bio, no

establecim os el atributo step, con lo cual va ria r uno a uno su valor.
Si lo establecem os en step= 3 , al d e sliz a r el co n trol, este ten d r com o
p osib les valo res: 1, 3, 5, 7. 9, 11, 13, 15.
O TR O S IN P U T T Y P E S
Tambin ex isten o tro s input ty p e s, c o m o c in p u t Type W e e l o e c in p u t Type Month>. E s to s perm iten in
g re s a r los va lo re s n u m rico s d e la s s e m a n a s y m e s e s re sp ectiva m e n te . Funcionan c o rre c ta m e n te
en G o o g le C h ro m e, S a fa ri y O p era.
www.redusers.com
62
USEFtS
2 . H TM L5
a . -i . p n 4. =
B ie n v e n id o
n m u * b < p u n t o k *o i i
Bienvenido a miucbtpuntoH*m
Figura 13. Mientras que Google Chrome visualiza correctamente

el control Slider. si probamos el sitio en IE, verem os que solo se muestra
una caja de texto y en ella podremos ingresar cualquier valor.
Input Type Tel

Este cam po perm ite ingresar un nm ero de telfono. A sim ple
vista, parece ser un cam po com n y no tiene ningn efecto en los
naveg ad ores de escritorio . Solo verem o s su efecto en los navegadores
web de los telfono s m viles, donde, al p o sicio n ar el cu rso r en ese
cam po, se hab ilitar el teclado n um rico en el d isp o sitivo , para poder
in gresar solo nm eros.
In grese su nm ero de telfono: < In p u tT y p e = "T e l" nam e= //te l fo n o //>
Input Type Number

Este in p u t typ e fu n cio n a igual que Range, pero v is u a liz a un control
S p in en lu g ar de un co n tro l S lid e r , donde podem os aum entar o

d is m in u ir su va lo r d entro de un rango num rico especificado en los
atributo s Min y Max.
Ingrese el monto a tra n s fe rir (en pesos) $ :<nput ty p e = "n u m b e r"

n a m e = "tra n sfe re n cia " m in = "1 0 0 " m a x= /,500// ste p = "1 0 0 ">
www.redusers.com
Tam bin posee el atributo S te p , para establecer el in te rva lo entre

nm ero y nm ero. Funcio na en Chrom e, Safari y Opera.
C
iley/yUw rVtojfW ttofcto0/M otole%3)^
ir l P
A.
Bienvenido n miweb(ptinto)com
logrtp H moojiit
omeim (pem \S
00
Figura 14. Este control tipo Spin permite indicar un rango mnimo
y mximo y, tambin, ingresar el valor de form a manual,
siempre y cuando se respeten los rangos establecidos.
Geolocalizacin
Los navegadores web m odernos in clu ye n una fu n ci n de
geolocalizacin, a travs de la cual podem os o btener las coordenadas

de la p o sici n del equipo m ediante un m apa. Dado que todas las
d ire ccio n es IP de in ternet tienen una d ire cci n fsica asignad a segn
su uso, es posible e stim a r las coord enadas ap ro xim adas de los equipos.
Las co m p utadoras, tablets o telfonos que acceden a la Web a travs
de tecnologas 3G o 4G perm iten tria n g u la r una u b icaci n m ucho ms
p recisa de las coordenadas, lo cual nos d ar un resultad o m s acertado
que el que puede b rin d ar una co m p u tad o ra de e scrito rio co nectad a a
in te rn e t p or cable m dem o ADSL.
A travs de una fu n ci n de Ja v a S c rip t, podem os o btener los valo res
de latitud, longitud y altitu d ap roxim ados del equipo y, u tiliz an d o
un s e rv icio com o Google o Bing Maps, representarlas en un mapa.
Para com prender m ejor los trm inos hasta aqu repasados,
realizarem os un ejercicio prctico que nos p erm itir co m p render la
www.redusers.com
64
USEFtS
2 . H TM L5
estructura de los docum entos HTM L5, cm o integrar en ellos las libreras
Ja va Scrip t, cm o in vo car un m apa desde la API de Google Maps, y cmo
realiz ar la deteccin de nuestra ubicacin m ediante la geolocalizacin.
O t lec jlcjc n
(3
en
H I ML!>
u/Mtf.vWimnhili fflnrvaiVMoftil#W#h/rjipW6#nloril7,rlen/ln(J*if htmi
l p g u s l <iild ( o ir i| wiifm s ti iiIm m Iftn i o ii

w v n v .v i iJ a m o t ile .io ii i .a r T
^borms,.,
C c iv r i|> M tlr u | | k
a i
Figura 15. Ya sea desde un navegador web de escritorio o de un

dispositivo mvil, la geolocalizacin puede ser utilizada sin problema alguno.
Elementos para el ejercicio

Para poder re a liz a r el e je rcicio debem os p re p ara r los siguientes
elem entos:
Un a rch ivo H TM L, d eno m inad o index.html.
La API de Google M aps para u b ica r n u estra p osicin.
La in vo caci n a un CDN para uso de la lib re ra jQ u e ry.
U n s itio web g ra tu ito p ara a lo ja r nu estras pruebas,

o bien un w eb s e rv e r local.
Creacin de la pgina HTML

La pgina H T M L que crearem o s a co n tin u a ci n co n ten d r el cdigo
n ecesario (H T M L y Ja v a S c rip t) para poder re aliz ar nuestro ejercicio.
D icha pgina ser alo jad a para su prueba en una web gratu ita de las
que existen en internet. Si no q uerem os subir nuestras pruebas a un
sitio accesib le p or todos, podem os optar p or un web se rv e r instalable
en W indow s, Linux o Mac OS, entre las d istin ta s o p cion es existentes.
El cdigo base de index.html es el siguiente:
www.redusers.com
d D O C T Y P E h t m l>
< h t m l>
<head>
< title > G eo lo ca lza ci n en H T M L 5 < / title >
<m eta c h a rs e t= "u tf-8 ">
c s c rip t src=/7/ajax.googleapisxom /ajax/libs/jquery/1.11.0/jquery.m inJs//></
script>
</head>
<body>
</body>
</html>
C reem os el arch ivo de n uestro p rim e r p royecto y hagam os una

copia para tenerlo listo para los prxim os e jercicio s a elab o rar en
los ca p tu lo s sucesivos.
Integracin de libreras JS
Para poder im p lem en tar co rrectam ente nuestro mapa, utilizarem os
la A PI Ja v a S c rip t de Google M aps que nos p e rm itir v is u a liz a r nuestra
p osicin. Sum ada a esta, tam bin declararem o s la lib rera jQ u e ry, que
nos sim p lificar la tarea de e scrib ir el cdigo JS y de re fe re n cia r a cada
objeto creado en la pgina. En el Captulo 3 conocerem os en detalle
esta lib re ra y sus m ltip le s usos.
Dentro del encab ezad o del a rch ivo H TM L, agregam os las siguientes
lneas de cdigo:
<header>
< h l> G e o lo c a liza c i n en H T M L 5 < / h l>
< / h e ad e r>
< s e c t io n >
< a rtic le >

< d iv id = /m ap_canvas/ s ty le = 'w id th :1 0 0 % ; h e ig h t:1 0 0 % ;'x / d iv >
</article>
<div id= //respuesta//>
www.redusers.com
66
USEFtS
2 . H TM L5
</div>
</section>
El tag <header> p erm ite crear un ttu lo del tip o < h l> . A co ntinuacin,
ab rirem o s u n tag <section> d onde declararem o s u n n u evo tag <article>
seguido de un <div> que contiene una etiqueta del tipo canvas. Esta
p erm itir cargar luego el m apa que vis u a liz a r nuestra posicin.
Luego agregam os el siguiente cdigo:
<script type="text/javascript" src="http://maps.google.com/maps/api/

js?sensor=true"></script>
</scrpt>
Este cdigo inicia un nuevo script donde in clu ire m o s las funciones
co rresp o n d ien tes a g eo lo calizaci n. Estas funciones so licitarn perm iso
al u suario para u b ica r su p osici n , v a lid a r n los erro res que puedan
o cu rrir en la acep taci n o rechazo de la u b icaci n y d ib ujarn el
co rresp o nd iente m apa en la etiqueta Canvas para m ostrar nuestro lugar.
In clu yam o s, a co ntinuaci n, el siguiente cdigo d entro del tag script:
<script type=//text/javascript//>
var map;
var latitud;
var longitud;
var precisin;
$(document).ready(function() {
localizameO;
;
Las variables map, latitud, longitud y precisin alm acenarn los datos
de nuestra ubicacin cuando aceptem os que nos localice la pgina.
La siguiente funcin es una invocacin a jQuery, que perm itir ejecutar la
funcin localizameO cuando la pgina HTM L se haya cargado por completo.
www.redusers.com
C om encem os a e s crib ir las funciones:
function localizam eO {
f (navigator.geolocation ) {
navigator.geolocation.getCurrentPositioncoordenadas, e rro re s);
}else{
a le rtO E s te navegador no soporta ge o lo ca liza ci n /);
}
>
Esta fu n ci n invo ca al m todo navigator.geolocation.getCurrentPostion(),
que recibe dos parm etros: coordenadas y errores. Estos p arm etros son
del tip o funci n, que, a su vez, contiene otras fu n cio n es a invocar.
function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;
precisin = position.coords.accuracy;
ca rg a rM a p a O ;
}
Esta fu n ci n setea los valo res co rresp o nd ien tes a las va ria b le s
d eclarad as en el in icio del script, de acuerdo a los valo res recibid os del
m todo getCurrentPosition: latitu d , lo ngitud y p recisi n . Por ltim o , ya
cargados los valo res en las variab les, se in vo ca al m todo cargarM apa().
function e rro re s (e rr) {

if (err.code = = 0 ) {
a le r t C 'E r r o r general no id e n tific a d o ");
}
f (err.code = = 1) {
a l e r t ( " E I u s u a r i o n o a c e p t c o m p a r t i r su p o s i c i n " ) ;
>
f (err.code = = 2 ) {
a le r t ( v'N o se puede obtener la posicin a c tu a l");
)
www.redusers.com
68
USEFtS
2 . H TM L5
a le rtd 'T ie m p o de espera su p e ra d o ");
}
>
La sentencia err nos perm ite detectar los erro res que ocurren
en las d ive rsas in vo cacio n es de Ja v a S c rip t. A travs de la prop ied ad
err.code, podem os detectar si hubo o no u n error. Si esta d e v u e lv e 0,

es porque no ha o cu rrid o ningn error. Si d evu elve 1, es porque el
u su ario no acept co m p a rtir su ub icaci n. El erro r 2 se debe a que
no se pudo d eterm in ar la u b icaci n del usuario, y el erro r 3, a que
la fu n ci n getCurrentPosition super el tiem po de espera mxim o
para d e v o lv e r la p osicin del usuario.
function ca rg a rM a p a O {
var latlon = new g o o g le .m a p s.La tLn gd a titu d ,lo n g itu d );
var m isParam etros = {
zoom : 17,
ce n te r: latlon,
m apType ld : g o o g le .m a p s.M a p T yp e ld .R O A D M A P
>;
map = new go o g le .m a p s.M a p ($ (u# m a p _ c a n va s ").g e t(0 ), m isP aram etros);
var coordenadasM arcador = new g o o g le .m a p s.La tLn gd a titu d ,lo n g itu d );
var m arcador = new go o g le .m a p s.M a rke rd

position: coordenadasM arcador,
m ap: map,
title : "O b te n e r mi ubicacin a c tu a l"
;
>
Por ltim o, nos queda la fu n ci n p rin cip al: cargarM apa(). Esta funcin
p erm itir estab lecer la in v o ca ci n a Google M aps y pasarle todos los
p arm etros necesario s para d ib u ja r nuestra u b icaci n en el mapa.
Veam os el cdigo com pleto de nuestra pgina HTML:
< !D 0 C T Y P E htm l>
www.redusers.com
<htm l>
<head>
< title > G e o lo ca liza ci n en H T M L 5 < / title >
< m eta c h a rs e t= "u tf-8 ">
< scrip t src=/7/ajax.googleapis.com /ajax/lbs/jquery/1.11.0/jquery.m n.js//></
scrpt>
</head>
<body>
<header>
< h l> G e o lo c a liza c i n en H T M L 5 < / h l>
</header>
<section>
< a rtcle >
<dv d='m ap_canvas' s ty le = 'w id th :1 0 0 % ; h e ig h t:1 0 0 % ;/></div>
</article>
< d iv id = "re sp u e sta ">
</dv>
</secton>
< script ty p e = "te x t/ ja v a s c rip t"s rc = //http://maps.google.com/maps/api/

js ? s e n s o r= tru e "x / s c rp t>
< script typ e = "te xt/ ja v a s c rp t">

v a r map;
v a r latitud;
v a r longitud;
v a r precisin;
$ (d o cu m e n t).re a d y(fu n ctio n () {

lo ca liza m e O ;
;
function lo ca liza m e O {
if (navigator.geolocation ) {
navigator.geolocation.getCurrentPositionCcoordenadas, e rro re s);
www.redusers.com
S E F tS
2 . H TM L5
}else(
a le rtO E s te navegador no soporta geo lo ca liza cin /);
}
}
function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;
precisin = position.coords.accuracy;
c a rg a rM a p a O ;
function e rro re s (e rr) {

a le r tO 'E rro r general no id e n tifica d o /');
}
if (err.code == 1 ) {
a !e r t ( " E I usuario no acept com p a rtir su p o s ic i n ");
}
f (err.code == 2 ) (
a le r t(" N o se puede obtener la posicin a c tu a l");
}
if (err.code - - 3 ) {
a le rt("T ie m p o de espera su p e ra d o ");
)
)
function ca rg a rM a p a O (
var latlon = new g o o g le .m a p s.La tLn g(la titu d ,lo n g itu d );
var m isParam etros = {
zoom : 17,
center: latlon,
m apType ld : g o o g le .m a p s.M a p T yp e ld .R O A D M A P
map = new go o g le .m a p s.M a p ($ (u# m a p _ c a n va s ").g e t(0 ), m isP ara m e tros);
var coordenadasM arcador = new g o o g le .m a p s.L a tL n g d a titu d Jo n g itu d );
www.redusers.com
71
var m arcador = new g o o g le .m a p s.M a rk e r

position: coordenadasM arcador,
map: map,
title : "O b te n e r mi ubicacin a c tu a l"
;
}
</script>
</body>
</html>
Ya creada nuestra pgina H TM L de g eo lo caliz aci n, podem os su b irla

al s e rv id o r w eb y p robarla. Las pruebas se pueden re a liz a r desde un
naveg ad o r web de escritorio , pero lo m s acertado ser p ro b arlo desde
un n aveg ad o r web m vil. En lo posible, desde un sm artp ho ne o tab let
que soporte co n e ctivid a d 3G.
dametittr na* m
Figura 16. El
resultado de nuestro
ejercicio muestra
cm o el sistema
te
. tlilffv
usuario antes de
uMcaBOta tu au to o r**
S t'rm fi*
solicita permiso al
m ostrar su ubicacin
en Google Maps.
R ESU M EN
E s te captulo nos perm iti ad en trarno s un p o co en el n uevo m undo p ro p u esto p o r H T M L5 y c o n o c e r
la inclusin d e va ria s fu n cio n es tiles que n o s perm iten d e s a rro lla r m e jo re s sitios w eb. A su ve z, tam bin
realizam o s un re p a s o por la s d ife ren cia s q u e p o d e m o s e n co n tra r en distintas p la ta fo rm a s y /o distintos
n a v e g a d o re s w eb. E s to con stitu ye un d a to m uy til a te n e r en cu e n ta al m om en to de d e sarro llar una
ap licaci n w e b en la que b u s c a m o s cub rir lo m ejor p o sible to d a s la s platafo rm as existentes.
www.redusers.com
72
USEFtS
2 . H TM L5
Actividades
T E S T DE A U TO EVA LU A C I N
1
Qu funcin cumple H T M L en la Web?
Cul es la versin de HTML utilizada actualmente?
Mencione tres caractersticas distintivas de H TM L5 respecto de su versin anterior.
Cul es la estructura actual bsica que com pone un documento HTML?
HTML5 funciona por igual en todos los navegadores web existentes?
Input ty p e sigue siendo un nico estndar dentro de HTML5?
Mencione al m enos dos clases de input types soportados en HTML5.
La geolocalizacin determina automticamente la posicin del usuario?
Los navegadores web de escritorio soportan geolocalizacin?
10
Qu hay que tener en cuenta para geolocalizar a alguien con la m ayor precisin?
E JE R C IC IO S PR CTIC OS___________________________
1
Realice los ejercicios invocando a los diferentes < In p u t Type> en pginas

HTML distintas.
Instale al menos tres navegadores diferentes en su computadora.
Visualice las pginas HTML con los input types en cada uno de los navegadores.
Pruebe el sistema de geolocalizacin en un smartphone o tablet.
Agregue dos etiquetas al ejercicio de geolocalizacin que permitan visualizar

la latitud y longitud obtenida por la funcin localizar() en la pgina HTML.
P R O FESO R EN L IN E A
m

www.redusers.com
* n
\\\\\\\\\\\\\\\
///////////////
Fundamentos
de jQuery Mobile
La e s t tic a d e una a p lic a c i n w e b m v il es m u y im p o rta n te
en ca d a u n o d e io s p ro y e c to s q u e a b o rd a m o s . Y lo m e jo r para
re d u c ir lo s tie m p o s d e d e s a rro llo es re c u rrir a h e rra m ie n ta s
q u e n o s a y u d e n a e n fo c a r n u e s tro e s fu e rz o en la fu n c io n a lid a d
del s itio sin d e ja r d e lad o la e s t tic a . En los p r x im o s c a p tu lo s
n os c e n tra re m o s en jQ u e r y M o b ile , una d e las h e rra m ie n ta s
q u e c u m p le co n creces esta fu n c i n .
Qu es jQ u e ry M o b ile ? ..... ..... 74
R esum en..................... ................ 103
E s tru c tu ra y w id g e ts .......... ..... 80
A c tiv id a d e s ................ ................ 104
E je rc ic io p r c tic o ................ .....87
71z 1
74
l/SERSl
3 . F U N D A M E N T O S D E J Q U E R Y M O B IL E
Qu es jQuery Mobile?
jQ u e r y M obile es un co n ju n to de lib re ra s Ja v a S c r ip t y CSS,
c o n stru id o esp ecficam en te para d a r so po rte a m ltip le s p latafo rm as
al m o m ento de d ise a r tanto un s itio w eb com o una a p lica ci n
m vil. Perm ite, de m an era p r c tic a y s in co m p lica cio n e s, m a n ten er la
es tru c tu ra de un sitio p o r igual, al m om ento de v is u a liz a rlo desde
un a co m p u tad o ra de e s c rito rio , tablet, sm artp ho n e o te l fo n o ce lu la r
de baja, m ed ia o alta gam a con soporte para n aveg aci n web.
U no de los pasos m s im p o rta n tes a l m om ento de d ise a r una
W ebApp o app m vil es d efin ir bien la in te rfa z de u su a rio que la
a p lic a ci n ten d r y, p or supuesto, cm o se v e r en cada una de
las p lata fo rm a s donde p o d r ser ejecutada.
Si d e cid im o s h acer u n a a p lic a ci n web que pueda eje cu ta rse tanto
en un n a ve g ad o r de e scrito rio com o en un n a ve g ad o r web m vil,
deb em os ten e r en cu en ta que su in te rfa z sea lo ms s im ila r p osib le
para que los u su ario s co n cu rre n te s no deban tener que ap re n d e r dos
o ms ve ces a d esp la z arse p or n uestro sitio.
U na de las p rim eras in v e s tig a c io n e s que re a liz a n los u suario s
de a p lic a cio n e s m viles, al m o m en to de d e c id ir ca m b ia r h acia otro
sistem a o p e ra tivo m v il, est d estin ad a a saber si las ap ps de uso
co tid ia n o tie n e n su v e rs i n en la p lata fo rm a a la cual p ie n sa n m igrar.
Desde nuestro punto de vista, al m om ento de d e s arro llar ap ps web
m viles, la opcin de cam bio de usuario no nos deb era a fectar en lo
ms m nim o si tenem os las herram ientas necesarias para a fro n ta r un
d esarro llo que fu ncio n e p or igual en todas las p lataform as.
jQ u e ry M obile fue pensado desde sus in icio s para b rin d a r la m ayor
co m p a tib ilid a d posible en casi todas las p latafo rm as existentes, sean
o no m viles. Para estas ltim as, jQ u e r y M obile enfatiz en cu b rir la
m ayor cantid ad de equipos y web b ro w sers que existen en el m ercado,
SIM P LEZA S IN TEC N IC IS M O S

jQ u e ry M o b ile perm ite e s c rib ir a p lic a c io n e s w e b y m viles d e form a b sic a y sin ningn esfuerzo.
El d esarro llo
d e e s te fra m e w o rk fue p e n sa d o
p ara
una integracin
y p ro g ra m a d o res, s e a cual fu e re e l nivel d e su s co n o cim iento s.
www.redusers.com
am igable
p a ra d ise a d o re s
75
lo que garan tiza que nuestro sitio se ver -p rcticam ente- sin cam bios
tanto en un sm artp ho ne de alta gam a com o en uno de baja gama.
jQ u e r v
+ sb jQ u erv
C N I C A C O . 11
A T o u c h - O p t im iz e d W e b F r a m e v v o r k
r t
j o m
o<mnidlQ..eivMatMi'
j Q i t t r y M o te te t i a H T M I S - b a s e d u m m t o r f jc i / i t e r r
lo t i 9 'o d
t o m o h o r o p o n * M > w o b m il
m n a p p a th a t aro
a c c e w ib t e do I I im a itp h o n e to b te t a - d d e i k t o p d o w c a i
D a v a la p a r I M S
S e n o u tly c r o t i- p la lfo r m w lt k H TM LS
iame* ar0(1 (ury mobm >*
iVyri wvj ogONOratKM

K
1> Ufl
rh
A*
rori a m vomIo
* v
"
unsutetiUftMu
wtua* uo<ri
H *1
Figura 1. www.jquerymobile.com es el punto de partida inicial para trabajar

con este complemento pensado ntegramente para aplicaciones mviles.
jQ uery Mobile = jQ uery, o no?

La resp u esta a esta p reg unta es si: jQ u e r y y jQ u e r y M obile son
d ife re n te s. jQ u e ry es u n a lib re ra que co m p le m e n ta las w eb s y hace
ms am eno el d e sarro llo de un sitio , resu m iend o varias fu n cio n es
k ilo m tric a s -en cu an to a ln e a s de cdigo
refiere- en fu n cio n es m s am igables.
jQ u e r y M obile, p or su parte, est basado
en jQ u e ry : debem os u tiliz a r am bas lib re ra s
ju n ta s, pero la p rim e ra fa c ilita de fo rm a general
a los p ro g ram ad o res la in v o ca ci n de cada
fu n ci n , que ap are ce re su m id a en fo rm a de
e stilo s a p lic a b le s a los elem en to s que com p onen
una pgina w eb. jQ u e r y M obile busca, de esta
m anera, a g iliz a r el d e s a rro llo de u n a pgina
J Q U E R Y M O B IL E S E
BA SA EN JQ U E R Y
Y D EBEN USARSE
J U N T A S , A U N Q U E SON
L I B R E R A S D IS T IN T A S
web, c u m p lir con el re q u is ito de Responsive
W eb D esign y e v ita r que los d ise a d o re s deban

e s c rib ir cdigo co m p lejo.
www.redusers.com
76
USEFtS
Utilizar jQ u e ry Mobile de form a

local o remota?
Para im p le m e n ta r jQ u e r y M obile en un s itio w eb , w eb A p p o
a p lica ci n h b rid a se re q u ie re in clu ir, en los a rc h iv o s H T M L que
co m p o n d r n el sitio , u n a re fe re n cia a este c o n ju n to de lib re ra s.
Veamos, a continuacin, un ejem plo de cdigo, donde in vo cam os a las
libreras de jQ u e ry M obile d entro de una pgina web llam ada index.html:

<htm l>
<head>
c lin k re l= "s ty le s h e e t" h re f= 'fiq m /jq u e ry.m o b le -1 .1 .0 -rc.l.m in .css'7 >
< script s rc = " jq m /jq uery-1 .7 .1 .m in .js//></script>
< scrpt src= /y jq m / jq u e ry.m o b ile -1 .1 .0 -rc.l.m in .js//></script>
</head>
<body>
</body>
</html>
D entro de la e tiq u e ta <head> y </head> debem os in c lu ir las

re fe re n cia s a las lib re ra s de jQ u e r y M obile. Estas se co m p o n en por:
El arch ivo J q u e ry .m o b ile ? ? ? .c s s , que es la h o ja de estilos.
El arch ivo Jquery???.m in.js, que es el a rc h iv o Ja v a S c rip t

co rre s p o n d ie n te a jQ u e ry.
El a rc h iv o Jquery.mobile???.js, que co rresp o n d e al a rc h iv o Ja v a S c rip t

p ro p io de jQ u e ry.
La d en o m in aci n ? ? ? u tiliz a d a eq u iva le al nm ero de ve rsi n

co rre sp o n d ie n te de las lib reras. jQ u e r y M obile est en co nstante
d e sa rro llo , p or lo que la v e rs i n u tiliz a d a al m om ento de e scrib ir este
c a p tu lo v a ria r s ig n ifica tiva m e n te a la v e rs i n existen te cu an d o el
lib ro llegue al m ercado.
A u n as, pod em os o p tar p or u tiliz a r una lib re ra an tig u a de jQ u e ry
M o b ile sin p ro b lem a alguno. En las ltim a s ve rsio n e s lan z ad as al
m ercad o , se sim p lific la cantid ad de tem as esttico s que p erm iten
v a r ia r la gam a de co lo res de una W ebApp entre cin co d ife re n te s
www.redusers.com
77
o pcion es. La v e rs i n a ctu a l de este fra m e w o rk solo p erm ite u tiliz a r

dos tem as d ife re n te s u o p tar p or cre a r un tem a e sp ecfico a gusto del
d e s a rro llad o r/d ise a d o r, u tiliz a n d o la h e rra m ie n ta T hem eRoller.
i
*
{Z /Q u erv
A
0rwt.
( H iiit iM a
a t BM
optiMnl w l l n M
UKHM W f
U M N H tar
R a * J <j , M ittvn
R a a d o ^ M IM n
iw
IW rt,
* ***1 hnM
L H M I Mam
natKiM rlMUffn
. m a d i l M lia n
H h
Mm S o
c i
Cm o m i
* do.
Clir-HD o.
0*
Figura 2. ThemeRoller es la herramienta que provee jQuery Mobile

para desarrollar tem as personalizados para nuestros proyectos.
N o sotros u tiliz a re m o s jQ u e r y M obile 1.3.2 p ara los p rim ero s
e je m p lo s de este lib ro ; ms ad elan te , repasarem o s la ltim a ve rsi n
existen te al m om ento de e s c rib ir esta obra.
Instalar JQ M de form a local

jQ u e r y M obile puede d escarg arse de form a
lo ca l y co nfigurarse d ire cta m e n te en los
s e rv id o re s donde d esp legam o s n u estra W ebApp,
a p u n tan d o las lib re ra s a la su b earp eta donde
a lm acen am o s todo el fram ew o rk.
Si deseam os re a liz a r esta tarea, debem os
d escarg ar la v e rs i n de jQ u e r y M obile
co rre sp o n d ie n te a la que u tiliz a re m o s en estos
eje m p lo s, desde el sig u ien te lin k: http://
jq u e ry m o b ile .c o m / re so u rc e s/ d o w n lo a d /
J Q U E R Y M O B IL E
PU ED E DESCARGARSE
DE F O R M A LO C A L
O U S A R S E D E S D E UN
P R O V E E D O R REM O TO
jquery.m obile-1.3.2.zip.
A co n tin u a ci n , ub iq u em o s la v e rsi n 1.3.2
de esta lib re ra y p ro ced am o s a su descarga.
www.redusers.com
78
USEFtS
Utilizar JQM desde un CDN

T am b in es p osib le u tiliz a r JQ M desde un p ro ve e d o r rem oto de
lib re ra s, lo que se conoce com o CDN (Conten D elivery Network).
En tre los ms co n o cid o s e n co n tram o s a Google, M icro so ft y jQ u e ry.
Esto s se o cu p an de a lo ja r las lib re ra s de jQ u e ry , jQ u e r y M obile
y jQ u e r y UI, entre otras tan tas ms, y as e v ita r que no so tro s
ten gam os que o cu p a r espacio en n uestro s e rv id o r w eb o in cre m e n ta r
su sta n cia lm e n te el tam ao de in stala ci n de una app n a tiv a o hbrid a.
Veam os, a co n tin u a ci n , un e je m p lo de cm o lla m a r a las lib re ra s
rem o tas a lo ja d a s en el C D N de jQ u e ry :
d D O C T Y P E htm l>
<htm l>
<head>
< title > T tu lo de la pgina</title>
< m eta n a m e = "v ie w p o rt" content=//w id th = d e vice-w id th / in itia l-s c a le = l//>
< lin k re l^ 's ty le s h e e t" h r e f= ''http://code.jquery.com /m obile/1.3.2-rc.l/jquery.

m ob le-1 .3 .2 .m in.css" />
< script src= /' http://code.jquery.com /jquery-L8 .2 .m in.js//></script>
< script src= //http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scrp t>
</head>
<body>
</body>
</html>
Desventajas en el uso de CDN

La d e s v e n ta ja de u tiliz a r un CDN en una app es que esta
d e p e n d e r -al m enos la p rim e ra v e z que se in ic ie - de que exista
c o n e c tiv id a d a in te rn e t p ara p o d e r d esc a rg a r las lib re ra s rem o tas
al d isco lo ca l del d is p o s itiv o . Si el e q u ip o d ond e in sta la m o s la app
no tie n e c o n e c tiv id a d , d ifc ilm e n te se p u e d a u tiliz a r de m anera
co rre c ta , y p ro b a b le m e n te v is u a lic e m o s la p o rta d a sin a p lic a r el
e s tilo de jQ u e r y M obile.
www.redusers.com
USEKS
79
Configuracin de una WebApp

con jQ u e ry Mobile
Para e m p e z a r a u tiliz a r jQ u e r y M obile, re aliz a re m o s, a
co n tin u a ci n , un n u evo p ro yecto . Para e s tru c tu ra rlo co rrectam e n te ,
cream os una ca rp e ta lla m ad a Ejem plos Jquery M o b ile y, d entro
de esta, d e s c o m p rim im o s el co n te n id o del arch ivo .ZIP descargado.
Luego re n o m b ra m o s la carp eta de jQ u e r y M obile com o jqm.
A continuacin, en la carpeta raz de nuestro ejem plo, cream os una
pgina llam ada in d e x.h tm l y dentro de ella escribim os el siguiente cdigo:
d D O C T Y P E html>
< htm l>
<head>
< ttle > E je m p lo s con Jq u e ry M obile< /title>
c m e ta nam e=//v ie w p o rt// content= //w id th = d e vice-w id th / in itia l-s c a le = l">
c lin k re l= "s ty le s h e e t" h re f= //jqm /jquery.m obile.structure-1 .3.2 .m in.css// />
<linl< re l= "s ty le s h e e t" h re f= //jqm /jquery.m obile-1.3.2.m in.css/7 >
< script src= "jq m /jq ue ry.m o b ile -1 .3 .2 .m n .js"> < /scrip t>
< script s r c = " http://code.jquery.com /m oble/1.3.2/jquery.m oble-1.3.2.m n.
js "> < /scrip t>
</head>
<body>
< h l> E s to es jQ u e ry M o b ile < /h l>
< p > M i p rim e ra pgina web con JQ M </p>
</body>
</html>
C O M P A TIB ILID A D C ON E L N A VEG A D O R

jQ u e ry M o b ile nos g aran tiza, en c a d a nueva ve rsi n , que to d o s los d esarro llo s q u e usan e s te fram ew o rk
puedan visualizar una interfaz uniform e en cualqu ier platafo rm a mvil, dejando que C S S y J S
ajusten
las fun cio n alid ad es n e c e s a ria s para que la interfaz U X se a tra n sp a re n te al usuario, independientem ente
del d ispositivo d o n d e se ejecute.
www.redusers.com
80
USEFtS
Si v is u a liz a m o s este e jem p lo en el naveg ad o r, no en co n trare m o s

n ada d istin to en esta pgina web. P ara p o d er v e r un ve rd ad e ro cam bio
en el diseo de un sitio web con jQ u e r y M obile, debem os c o m e n z a ra
u tiliz a r a lg u n o s de sus com p onentes.
Estructura y widgets
jQ u e r y M obile basa su e stru ctu ra en el Responsive Web Design ,
p or lo cual aplica, m ed iante estilo s CSS, un dise o especfico para
las d iferentes secciones que com p onen una pgina web. Veamos,
a co ntinuaci n, los d istin to s co m p o nentes que podem os in teg rar en
un diseo ap licad o gracias a este co n ju n to de libreras. Estos
co m p o nentes nos p e rm itir n e stru ctu ra r toda pgina de jQ u e r y Mobile.
Page
Page nos p erm ite d efin ir la e s tru c tu ra e q u iv a le n te a <body> en un
H T M L com n. D entro de page a grup arem os todas las e stru ctu ra s de
en cab ezad o , pie de p gina, co n te n id o , b a rra s de h erram ie n ta s y otras
fu n c io n a lid a d e s que JQ M nos da.
Page no reem p laz a a la etiq ueta <body> d entro de un d ocum ento

H T M L ; p or el co n trario , se deben u tiliz a r los e lem en to s page d entro
de esta etiqueta. Veam os un e je m p lo a co n tin u a ci n :
<htm l>
<head>
</head>
<body>
<div d a ta -ro le = //page,/ id = "in d e x ">
< h l> E s to es jQ u e ry M o b ile < /h l>
< p > M p rim e ra pgina web con JQ M </p>
</div>
</body>
</html>
www.redusers.com
E2 S2 Z 3
81
A l d e s a rro lla r este ejem p lo , reco rd em o s que

d en tro del tag <head> debem os d e c la ra r la ruta
D EN T R O D E L TAG
de las lib re ra s de JQ M . Si lo e je cu ta m o s en un
H EA D D E B E M O S
n aveg ad o r web, no ve re m o s g ran d es cam bios,

ya que solo d efin im o s el e stilo page. Para poder
v e r cam bios en una pgina w eb, debem os
D E C L A R A R L A RU T A
D E L A S L I B R E R A S DE
u tiliz a r m n im am en te las e stru ctu ra s header,
J Q U E R Y M O B IL E
conten y footer.
Header
La e tiq u e ta <header> no es ms que un en cab ezad o que tendr
n u e stra pgina. En e lla p o d em o s in d ic a r el ttu lo , in co rp o ra r un logo
y hasta uno o ms botones con fu n cio n e s de m en.
Veam os un e je m p lo donde solo in clu im o s el ttu lo :
<body>
<div d a ta -ro le = "p a g e " d = "in d e x ">
< d iv d a ta -ro le = "h e a d e r">
< h l> E s to es Jq u e ry M o b ile < /h l>
</div>
< p > M p rim e ra pgina web con JQ M </p>
</div>
</body>
Content
La e tiq u e ta <content> nos p e rm itir in co rp o ra r d ive rso s co n te n id o s
en la pgina creada con jQ u e r y M obile. Eq u ivale al cu erp o p rin cip a l
de un H TM L, y solo se puede u tiliz a r una e tiq u e ta content d entro de
una e tiq u e ta page.
<body>
<div d a ta -ro le = "p a g e " id = "n d e x ">
www.redusers.com
82
USEFtS
< dv d a ta -ro le = "h e a d e r">

< h l> E s to es JQ u e ry M ob le< /hl>
</div>
< dv d a ta -ro le = "c o n te n t">
< p > M prim era pgina web con JQ M </p>
</div>
</div>
</body>
Footer
La etiq ueta <footer> nos p erm ite in co rp o ra r un pie de pgina
al co n ten id o creado con jQ u e r y M obile. Podem os especificar, por
ejem p lo , el c o p y rig h t de la pgina web o a p lic a ci n , in c lu ir alguna
im agen refe ren te o p u b licid a d e s, o bien, sim p le m e n te , e stru ctu ra r
una b arra de h e rram ien tas.
<body>
<div d a ta -ro le = "p a g e " d = "in d e x ">
< d iv d a ta -ro le = "h e a d e r">
< h l> E s to es JQ u e ry M ob ile< /h l>
</div>
< d iv d a ta -ro le = "c o n te n t">
< p>M prim era pgina web con JQ M </p>
</div>
<div d a ta -ro le = "fo o te r">
< p > C o p yrigh t 2013: Fernando Luna</p>
</div>
</div>
< /body>
Para que nu estra pgina no v is u a lic e de m anera co n tig u a las tres

se ccio n es u tiliz a d a s , d eb em os agregar a la secci n footer la sen tencia
data-position= fixed , fo rz a n d o as a esta secci n a u b ica rse en el pie

de pgina del brow ser.
w w w .re d u s e r s .c o m
El cdigo de fo o te r debe q u ed ar de la sig u ien te m anera:
<div d a ta -ro le = "fo o te r" d a ta -p o s to n = "fixe d ">

< h 6 > C o p yn gh t 2013: Fem ando Luna</h6>
</div>
F ig u ra 3. jQuery Mobile representa la esttica de una WebApp de la misma

form a, tanto en un navegador de escritorio com o en un dispositivo mvil.
Navigation Bar
A tra v s de la e tiq u e ta <navigation> pod em os cre a r una b a rra de
h erram ien tas o b a rra de n avegacin en n u estra W ebA pp. Esta

e tiq u e ta p erm ite definir, en su in terio r, b oto nes co m b inad o s con
texto, ico no o am bos.
Esta etiq u eta suele u b icarse d entro de las e tiq u e tas header o
fo o te r de la W ebA pp, para p o d er te n er la p a n ta lla co rrectam en te

estru ctu ra d a. Sin im p o rta r su u b icaci n , cu a n d o cream o s una
b arra de h e rra m ie n ta s, esta a g ru p a los b oto nes en una so la lnea,
d is trib u y n d o lo s de m anera e q u ita tiv a a lo largo de la pantalla.
El m xim o de b oto nes p e rm itid o s en una so la lnea es cinco .
De te n e r que su p e ra r esta ca n tid a d , de fo rm a a u to m tica los botones
se d is trib u ir n en dos lneas.
www.redusers.com
3. FUNDAMENTOS DE JQ UERY MOBILE
S E F tS
Veam os un e je m p lo de navigation:
<dv d a ta -ro le = "h e a d e r">

< H l> N a v g a tio n B a r< / H l>
<div d a ta -ro le = "n a v b a r">
< ul>
< l i x a h r e f = " # " d a ta -ic o n = ''a rro w -r> A tr s < / a > < / li>
d i x a h r e f = " # " d ata-con = //a r ro w -r/y> A d e la n te < / a x / li>
< l i x a h r e f = " # " d a ta -ic o n = "re fre s h "> R e c a rg a r< / a x / l>
< l i x a h r e f = " # " d a ta -ic o n = "s ta r"> F a vo n to < / a > </l>
</ul>
</div>
</div>
O btend rem os, a co n tin u a ci n , una b arra de h e rra m ie n ta s sim ila r

a la de los n aveg ad o res web para sm artp h o n e s. En los siguientes
ca p tu lo s, ve re m o s m s o p cio n e s de p e rs o n a liz a c i n de esta etiqueta.
Figura 4. La creacin de una barra de herramientas, ya sea en el extremo

superior o inferior de la pantalla, es posible gracias a N a v ig a t io n Bar.
Transitions
D e n tro de jQ u e r y M o b ile , los v n c u lo s e s ta b le c id o s h a cia o tras
p g in a s (o p ag es) se p u e d e n r e a liz a r m e d ia n te a n im a c io n e s
www.redusers.com
85
USEKS
p re e s ta b le c id a s d e n tro de este fra m e w o rk : a e sta s se las d e n o m in a
tra n s ic io n e s . A c tu a lm e n te , existe u n a se rie de tra n s ic io n e s que

p u e d e n a p ro v e c h a rs e , que fu e ro n b a u tiz a d a s com o fade, pop,
flip , slide, slideU p y slideD ow n. Se in v o c a n d e n tro de un lin k de la

s ig u ie n te m an era:
<a h re f= "c o n ta c to .h tm l" d a ta -ro le ^ 'b u tto n " datatran sition = "fa d e"> C on tcten os< /a>
La tra n s ic i n slide genera un efecto de

d e s liz a m ie n to de la pgina hacia uno de los
S L ID E U P Y
extrem os de la p antalla. La tra n s ic i n flip rota

la pgin a sobre su eje, p e rm itie n d o la en trad a
S L ID E D O W N
de la n u e va pgina cuand o fin a liz a la rotacin.
G EN ERA N EFECTOS
Fade genera un efecto sim ila r al

d e sv a n e cim ie n to ; pop. un efecto em ergente
DE D E S P L A Z A M IE N T O
desde el cen tro de la pgina; y slideUp y slideDown
V E R T IC A L
generan un efecto de d e sp laz a m ie n to v e rtic a l

h a cia a rrib a y h a cia abajo, resp ectivam e n te .
No existen re stric c io n e s para el uso de las
tra n sicio n e s: d esde cu a lq u ie r w id g e t o texto que
d isp o n g a un lin k, estas p u ed e n se r ap licad as sin problem a.
La n ica re stric ci n que puede e n co n trarse en el uso de las
tra n s ic io n e s es que el n a ve g ad o r web del d is p o s itiv o m vil no soporte

la ca ra cte rs tica de tra n sici n , la cual es p ro p ia de los e fe c to s CSS.
O tra re stric c i n en las tra n s ic io n e s puede e n co n trarse cuan d o,
p or ejem plo, en A n d ro id o iOS, el u su a rio d e s a c tiv a los efectos
de a n im a ci n de las a p lica cio n e s, m ens, etctera, desde el sistem a
o p e ra tivo para a h o rra r batera.
1/ 1/ 1/
F U N C IO N A M IE N T O DE TR A N S IC IO N E S
Al m o m en to de escrib ir e s te captulo, jQ u e ry M obile inform a
que an se
en cuentran trabajand o
en una solucin p a ra que la s tra n sicio n es funcionen en to d a s la s p latafo rm as. Dado que se b a sa n en
e fe c to s
CSS,
la s tra n s ic io n e s qu ed an lim itadas a la im plem entacin de e s ta te c n o lo g a en to d o s los
n a v e g a d o re s web.
www.redusers.com
86
USEFtS
Esta fu n c io n a lid a d tam b in ca u sa r que las tran sicio n e s se vean

de m anera in te rm ite n te o que d ire ctam en te no se re p ro d u z ca n en
el d is p o s itiv o del usuario.
Dialog Page
Esta etiq ueta perm ite que una pgina definid a com o page con
jQ u e ry M obile o cu a lq u ie r otra pgina rem ota pueda ser vis u a liz a d a
m ed iante un dilogo. Esto genera una ven tan a tipo m odal, que aparece
su sp en d id a por encim a de la pgina d esde donde la invo cam os.
Para re a liz a r esto, sim p le m e n te debem os agregarle un atrib u to
a los h ip e rv in c u lo s cread o s con JQ M .
Veam os a co n tin u a ci n un ejem plo:
<a h re f= "g ra c a s .h tm r d a ta -re l= "d ia lo g " d a ta -ro le = //button// datath e m e = "b ''> E n va r< /a >
Cise Dialog
Las p ginas v is u a liz a d a s con el atrib u to data-rel= dialog crean,
de m anera p re d e te rm in ad a, un botn s u p e rio r que p erm ite cerrar
la pgina m odal. Este tip o de ve n ta n a s g e n e ra lm e n te se u tiliz a para
v is u a liz a r un fo rm u la rio , una ve n ta n a del e stilo A cerca d e y,
tam b in, cie rto s m en sajes de d ilo g o que in te ra c t a n con el usuario.
Si en nu estra W ebApp in clu im o s fo rm u lario s m odales, lo ms com n
es d arle al usuario la p o sib ilid ad de que interacte a travs de los
b otones de o pciones del cuadro de dilogo, con lo cual el botn cerrar
que genera la etiqueta Dialog Page no nos ser til. Podem os ocultarlo
u tiliz a n d o el siguiente atrib u to d entro de la in vo caci n a Dialog Page:
d a ta -c lo s e -b tn = "n o n e "
Tam b in pod em os ca m b ia r la u b icaci n del botn cerrar, el cual

o rig in a lm e n te se sit a en el extrem o iz q u ie rd o de Dialog Page.
Sim p le m e n te d eb em os agregar el sig u ien te atributo:
data-close -btn= ,/rig h t,/
www.redusers.com
Estilos en Dialog Page

Por d efecto, la v e n ta n a de d ilo g o se p resenta con bordes
red o n d ead o s. Este e stilo v ie n e a p lic a d o desde la lib re ra de jQ u e ry
M obile. Si deseam os e lim in a rlo , para que la ve n ta n a se p re se n te en
su fo rm a n a tu ral, d eb em os u tiliz a r el sig u ien te cdigo:
d ata-corn e rs= //none//
V ^
v tdor*obtlc c o m z f / M o b h 'W e b .'C a f O
IF )
20 32 I
I*.
X 3 + d 2 2033
i victanobilcccwn v/M obiVW pbA'ai C
F o r m u la r io d e r e g ia .
R e g is t r o re a liz a d o
U s u a rio
Su regatro se ho realizado con xco Gracias

poi ser porto de njcotro encuesta.
ftmobilpnadawan
Recuerde Que pura participar del sorteo, debe

seguirnos en Twilter y agregarnos en
Email
Facebook y Google*
fcrn on dofj f d ig ita l c o m e r
Revistas
O
Buscador
Publicidad Online
Olroa medio*
Abrir
Figura 5. D ia lo g Page nos simplifica la visualizacin de formularios modal

o cuadros de dilogo, basndose en un simple HTML de jQuery Mobile.
Ejercicio prctico
Para p o d er co n s o lid a r los ejem p lo s hasta aqu repasados,
re a liz a re m o s a co n tin u a ci n un e je rc ic io integrador. Este e je rc ic io
nos m o strar cm o in te g rar las fu n cio n e s de jQ u e ry M obile de m anera
p tim a y sin n ecesidad de llegar a e la b o ra r un d e sa rro llo co m p lejo.
El o b je tiv o es d e s a rro lla r un s itio w eb co rp o ra tivo . Este p resen tar
una em p resa d eterm in a d a , contar su h isto ria y los p ro d u cto s que
www.redusers.com
88
USEFtS
co m e rcializ a. A d em s, nos p e rm itir co n o cer
DESARROLLAREM OS
la u b ica ci n de su p lanta de e la b o ra ci n y nos
CON J Q M UT ILIZAN D O
a yu d a r a co n ta cta r a la em presa m ed iante

el e n vo de un m en saje de correo electrnico.
PA G E, H E A D E R ,
Las fu n cio n a lid a d e s b sicas que tendr

la pgina web que e lab o rem o s nos p e rm itir n
NAVIGATION B A R ,
re a liz a r u n d e sa rro llo con jQ u e r y M obile
C O N T E N T Y FO O T ER
u tiliz a n d o los elem ento s page, header, navigation
bar, content y footer. Po drem o s tam b in a p lica r

tra n sic io n e s entre pginas e in co rp o ra r im genes
y texto d is trib u id o s estratg icam en te p or la
p gina para su co rrecta v is u a liz a c i n en d is p o s itiv o s m viles.
Por ltim o , re aliz a re m o s un fo rm u la rio de co n tacto que in vo ca r
a la a p lic a ci n de co rreo e le ctr n ico in sta la d a en el d is p o s itiv o m vil,
p ara que e n ve el m ensaje de contacto.
Crear la estructura HTML

D escarguem os los a rc h iv o s necesario s para d e s a rro lla r n uestro
e je m p lo del sig u ien te link: https://p rem iu m .red u sers.com . D entro
d el m a terial, en co n trare m o s un a rch ivo d en o m in ad o base.html, que
nos s e rv ir de p u n to de p a rtid a para crear nu estra web.
C rearem o s, a co n tin u a ci n , la e s tru c tu ra del sitio web. Deber
te n e r una ca rp e ta co n te n e d o ra a la que b au tiz are m o s g re e n b e rrie s .
D en tro de esta, co p iam o s el a rc h iv o base.html y lo ren o m b ram o s com o
index.htm l. Luego, cream os la ca rp eta im gen es y, d en tro de esta,

co p iam o s los a rc h iv o s de im genes que hem os descargado.
A hora nos queda agregar el sig u ien te co n te n id o d entro del tag
<body> y </body>:
< d iv d a ta -ro le = "p a g e " id=//index// d a ta -th e m e = "d ">

<div d a ta -ro le = "h e a d e r" d a ta -th e m e = "c " a lgn = //ce n te r//>
<im g src = "im a g e n e s / L o g o 8 0 0 xl5 0 .g if" s ty le = "w id th :8 0 % ;m a x w id th :4 0 0 p x "a lt= "G re e n b e rrie s L o g o '7lo n gd e sc= "G re en b errie s Farm ing L o g o ">
</div>
< d iv d a ta -ro le = /,content,/ d a ta -th e m e = "d ">
<p>B ienvenido a < b > G re e n & B e rrie s Farming</b>.</p>
www.redusers.com
< p>N uestra com pa& n tilde;& iacute;a se especializa en la

plantaci& oacute;n, cosecha y d istnbuci& oacute;n por m ayor y m enor de frutos rojos
y productos relacionados.</p>
<px/p>
< p > A diferencia de otras firm as productoras, G re e n & B e rrie s posee dos
lneas de productos: Frutos rojos org& aacute;nicos, sembrados y cosechados bajo los
principales estándares de calidad, y Frutos ro jo s hidrop& oacute;nicos, que
cumplen con su etiqueta org& aacu te;n ca, pero con la diferencia que estos son semb
rados y desarrollados & iacute;ntegram ente bajo el sistem a de hidroponia.</p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -th e m e = "c " d a ta -p o s itio n = "fix e d ">
<h5> C o p yrig h t V id a M obile</h5>
</dv>
</div>
In icia m o s la e s tru c tu ra de JQ M co n el tag <Page>. Com o id, lo

b au tiz a m o s index, igual que la pgina in icia l, y le a p lic a m o s el tema
d , p ro p io de JQ M . D entro de este tag, ab rim o s o tro tag <header>,

donde re em p la z am o s el ttu lo de en cab ezad o p or u n a im agen con
el logo de la co m p aa. Este tag posee com o a trib u to s destacables
el tem a c y la alin e a c i n c en ter .
El tag <im g> de logo engloba, d en tro de las ca ra cte rstica s ms
im p o rta n te s, u n an ch o que no supera el 80 % del tam ao de la
pgina y un ancho m xim o no m ayo r a 400 pixeles. Com o hered a la
alin e aci n e sta b le cid a en <header>, p or d efe cto estar centrado.
C e rra d o el tag </header>, in icia m o s un tag <content> donde
ap lica m o s un tem a d . D entro de este, e scrib im o s la p resen taci n
del sitio co rp o ra tivo , en m arcan d o el texto d en tro del tag <p> y </p>
(p arag rap h ). Podem os d estaca r p rrafos u tiliz a n d o n e g rita o cu rsiva
(<strong>, <em>), en tre o tros estilos.
Establecer una barra de herramientas

A co n tin u a ci n , para p o d er n aveg ar de m anera p tim a p or el sitio
web m v il, in co rp o ra re m o s una b arra de h e rram ien tas. Esta barra
estar d iv id id a en cu atro seccio n es, a saber:
www.redusers.com
S E F tS
H isto ria
Pro d u cto s
Sho w ro o m
Contacto
Para no so b recarg ar el sitio web m v il, d escarta re m o s el u so de la

etiq u e ta <footer>. En su lugar, situ arem o s la b arra de h e rram ie n tas. Al
fin a liz a r el d iv <content>, in icia m o s un n u evo d iv del tip o Navigation
Bar. Para ello, escrib im o s el sig u ien te cdigo:

< d iv d a ta -ro le = //navbar// d a ta -p o s to n = "fixe d ">
<ul>
< l i x a h re f= "in d e x.h tm l" d a ta -ic o n = "s ta r'/class= "ui-disabled"> H storia</a> </li>
c l i x a h re f= "p ro d u c to s .h tm l" data-icon = //check//> P ro d u c to s < / a x/ l>
< l i x a h re f= ,/show room .htm l// data-icon = //search//> S h o w ro o m < / a x / li>
< l i x a h re f= //con tacto.htm l// d ata-icon = "info''> C on tacto< :/a>
<1li>
</ul>
</div>
Figura 6. El desarrollo en Dreamweaver nos permite, a travs

de la opcin L iv e , ver en vivo el resultado de nuestro sitio web mvil.
De los cu a tro b oto n es que agregam os en la b arra de h e rra m ie n ta s,
p o d em o s n o ta r que Historia es d ife re n te a los dem s. Este p osee el
www.redusers.com
91
a trib u to class= ui-disabled\ el cu al d e s a c tiv a el b ot n sim p le m e n te

p orq u e el u s u a rio se e n cu e n tra en la se cci n co rre s p o n d ie n te a este.
Por cada n u e va p antalla que tenga nuestra web m obile, agregarem os
esta caracterstica al botn co rresp o nd ien te a dicha seccin.
B ie n v e n id o a G r o e n ! B e m o e F a r m m g
Mueclro compaa se copccioliza en la plantacin,

cosecha y distribucin por mayor y menor d e frutos
ojos y producios relacionados
A diferencia de oirs lim a s productoras.
Sreen&Berries posee dos lineas de producios Frutos
'ojos orgnicos, sembrados y cosechados bajo los
nnnnpalpc Mtndarec e ra l dad. y Frutos rojos
nidroponicos. que cumplen con su etiqueta orgnica,
pero con la difeteriua que calo* aon aembiddua f
desabollados mtegramente bajo ei sistema de
nidroponia
Figura 7. La portada
principal de nuestro proyecto
P r o d u c io s
S h o w to o m
C o n ta c to
------------------------------------------------
ya ha tom ado forma.
Crear la seccin Productos

Esta se cci n m o strar una in tro d u c c i n a
los p ro d u cto s que co m e rcia liz a la em p resa y
agregar dos im genes: una por cad a categ ora
de p ro d u cto . C u an d o el u su a rio haga c lic en
la categ o ra de su in te r s, se a b rir una nueva
pgin a m odal que v is u a liz a r los p ro d ucto s
co rresp o n d ie n te s. Para ello, u tiliz a re m o s D ia lo g
P a g e . Tom am os n u e va m e n te el a rc h iv o base.html,
lo co p iam o s y ren o m b ram o s com o productos,
htm l. Agregam os la b arra de herram ien tas
PARA CREAR
L A S E C C I N DE
P R O D U C T O S D E LA
E M PR E SA USAREM OS
DIALOG P A G E
in ferio r, y seteam os el botn Productos con el

a trib u to ui-disabled. Agregam os, luego, el cdigo
co rre sp o n d ie n te al <body>:
www.redusers.com
USERS
< d iv d a ta -ro le = "p a g e " id = //productos// data-the m e = //d//>

<dv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a lg n = "c e n te r">
<m g s rc = "m a g e n e s / L o g o 8 0 0 xl5 0 .g if" style = //w d th :8 0 % ;m a x w d th :4 0 0 p x "a lt= "G re e n b e rrie s L o g o " longde sc= "G re en b erre s Farm ing L o g o ">
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
<h2>Productos</h2>
< p > A continuac& oacute;n puede conocer los productos que co m e rcia liza
mos. H aga c lic sobre la cate gor& iacute;a de su nterés.</p>
<div id = "m a g e n e s -ln k s " a lg n = "c e n te r">
<a h re f= "o rg a n c o s .h tm l" d a t a -r e != " d ia lo g " x m g src="m agenes/
pro d u ctos-organ icos.jpg" S ty le = "w id th :1 0 0 % ;m n -w id th :1 5 0 p x ;m a x w id th :6 0 0 p x ;b o rd e r:lp x "/ x / a > < p > < / p >
<a h re f= //hidroponicos.htm l'/ d a t a -r e l= " d ia lo g " x im g src="im agenes/
pro d uctos-hidro po nico s.jpg" S ty le = "w id th :1 0 0 % ;m in -w id th :1 5 0 p x ;m a x w d th :6 0 0 p x ;b o rd e r:lp x " /></a>
</dv>
< d iv d a ta -ro le = //navbar// d a ta -p o s tio n = "fixe d ">
< u l>
< l i x a h re f= "in d e x .h tm l" d a ta -ic o n = "s ta r"> H is to ria < / a x / li>
< l i x a h ref= //#// data-con="checl<" cla ss= "u -d isa b le d "> P ro d u cto s< /a x/l>
< l i x a h ref= //show room .htm l// data-con = "se arch"> S ho w roo m < /a > < /li>
c l i x a h re f= //con tacto.htm l// d a ta -ico n = "n fo "> C o n ta cto < /a > </li>
</ul>
www.redusers.com
</div>
</dv>
En productos.htm l agregam os, en la secci n <content>, un texto

sim p le seguido de dos im genes, una p or cad a categ o ra de p ro d u cto
que la e m p resa m aneja, que, a su ve z , o fician de h ip e rvn c u lo .
A l h a ce r c lic sobre estas im genes, se a b rir un pop-up (ve n ta n a
m o d al), que v is u a liz a r la in fo rm a c i n co rre sp o n d ie n te a este
segm ento de p ro d ucto .
P
ti?
w w w vicamobde co m 3 'M o bleW eO /C af
23:55
l)
G R EEN BERR IES

FARMING
M
w
Productos
A continuacin puede co n o cer los p ro d uctos que
co m ercializam o s H ag a c lic so b re la catego ra de
su inters
O rg n ico s
Figura 8. Desde
la pgina p ro d u cto s.
html podemos acceder

O
H is to ria
S h o w ro o m
C ontado
a las distintas categoras

que esta web ofrece.
Veam os aho ra al cdigo de la pgina organicos.htm l, tom and o

n u e vam en te com o cdigo in ic ia l la pgina base.html:
<dv d a ta -ro le = "p a g e " d = "o rg a n ic o s " data-the m e = //c " >
< d iv d a ta -ro le = "h e a d e i'"d a ta -th e m e = "c " a lig n = "c e n te r">
< h4 > Frutos org& aacute;nicos</h4>
</div>
< d iv d a ta -ro le = "c o n te n t" data-them e= ,,d// >
www.redusers.com
S E F tS
<div d = "im g -lo g o " a lig n = "c e n te r">

<m g src=//m agenes/p-organc-2 00 x20 0 .jpg"/>
</div>
<p>Conservam os la calidad de nuestros productos trat& aacute;ndolos con
t& eacute;cnicas que garantizan su frescura y sabor, sin que sean alterados por e l
ementos qu´m icos.</p>
< p>Actualm ente com ercializam os: < stron g> Fru tilla s/ Cerezas, Ciruelas,
Ar& aacute;ndanos, Corintos, Frambuesas, M oras coloradas y M oras negras.</
s tro n g x p >
</div>
La pgina de p ro d u cto s o rg n ico s se v is u a liz a r en form a m odal:
W-eWC* C C)
4 B R R IES
FARM NG
#
w
F r u t o * ocqarac<o
Producto!
'
A continuador purror c o n x w la prtd ucfc* que

conrrcioirarrx>5 M*q* etc oocre la (oteqcru o*
su tictes
/-
jetos Orgnicos
Productos H idra?
Conservam os l cabcad denues-ro

procuctoi trof#*mJo 4o co n ICcntc* je*
gjrsnti/an su frescura y aaftor am que sean
a A e ^ d o s p o r d e m e n to * q u m ie c o
A rtc a lm e M e c c m e fc a fc / a n o
Frutillas.
C v e z a s . C ir u e la s . A r n d a n o s , C o n o t o .
F r a o b u e i a * . M x a s c o l r a la s y M o r a s
F ig u ra 9. Al hacer un tap sobre el banner Productos orgnicos

se despliega la pgina o r g a n ic o s .h tm l en m odo pop-up.
A h o ra re p e tim o s este ltim o paso, crean d o la pgina h id ro p o n ic o s .
h tm l. A co n tin u a ci n , el cdigo de esta n u e va pgina:
<dv d a ta -ro le = "p a g e " d=//hidroponicos// d a ta -th e m e = "c ">

< d iv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a lig n = "c e n te r">
www.redusers.com
< h4 > Frutos hidrop& oacute;nicos</h4>

</dv>
< dv d a ta -ro le = "c o n te n t" data-them e= ,/d// >
< div id = "im g -lo g o " a lig n = " c e n te r" >
< im g src="im agenes/p-hydi'oponic-20 0x2 0 0.jpg// />
</div>
<p>Disponem os de la m ism a va ria n te de frutos rojos org& aacute;nicos de
sarrollados bajo el sistem a de hydroponia, tra ta d o con sustratos org& aacute;nicos
creado a base de extractos de desechos de frutas y verduras org& aacute;nicas.</p>
<p>Estos productos est& aacute;n disponibles todo el a & n tild e ;o , ya que
son desarrollados bajo un m icroclim a especialm ente dise& ntilde;ado para este
p ro p & o a c u te ;s ito .< / p x p >
</div>
.2 3 :5 5
0 T
.2 3 :5 6
^suJanobeccaiff/Mob*eWetyCaj 0 Q
~
G F E - N S E R R IE S
FA'MING
Frutos hidroponic-
P ro d u c to s
A c o n t in ja c r .o n p u e d e c c r to c e - lo a p r o d u c t o s c o e
com ercialzanos Haga d ie sobre U categorta de

ou m t e r o
odLctos Orgnicos
Lisponem os d e la m ism a vnante ae m itos
P r o d u c to s H id
WJl iSfl
rojos ergmeos desarrollados b a p el

sistema d e nydroooma tratado con sustratos
crg a n co s creadc a base de extractos de
cesechos de truras y verduras orgnicas
C a lo s p r o d u c io s r a t n U ia p c m b lc a to d o e l
ao, ya q u e so n cesarrollados b a p un
m ic r o c lim a e s p e c ia lm e n t e d is e a d o p a r a
este proposto
Figura 10. Al hacer un tap sobre el banner Productos hidropnicos

se despliega la pgina h i d r o p o n i c o s . h t m l en modo Popup.
Crear la seccin Showroom

Ya en tram o s en la recta final de n uestro p rim e r sitio w eb m vil.
C rearem os, a co n tin u a ci n , la a n te ltim a seccin, Showroom, donde
www.redusers.com
S E F tS
u tiliz a re m o s un m ap a e st tico de Google M aps con una d ire cci n

ficticia de la p la n ta de a te n ci n al p b lico .
R ep licam o s los pasos p ara la cre a ci n de un nuevo a rc h iv o HTML,
al cual lla m are m o s show room .htm l. En l, co m p letam o s el cdigo
co rre sp o n d ie n te a jQ u e r y M ob ile, con lo siguiente:
< d iv d a ta -ro le = //page// id = "p ro d u c to s " data-the m e = //d//>

< dv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a lig n = //ce n te r//>
<m g src = "im a g e n e s / L o g o 8 0 0 xl5 0 .g if" s ty le = "w id th :8 0 % ;m a x w id th :4 0 0 p x" a lt= "G re e n b e rrie s L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o ">
</dv>
< dv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
< h4 > Aten c& o acute ;n al público</h4>
< d iv id = "m a p a " a lign = //ce n te r//>
<im g b orde r= //2// s tyle = 'b o rd e r-c o lo r:# 6 9 C ' s r c = " http://maps.
googleaps.com /m aps/ap/$tatcm ap?center=-34.618747,-58.842229&zoom =16&
size = 3 5 0 x2 0 0 & m a rk e rs = s ize :m d % 7 C c o lo r:b lu e % 7 C la b e l:G % 7 C -3 4 .6 1 8 7 4 7 /5 8.8 42 22 9& sensor=true" />
</dv>
< p > L o invitam os a conocer nuestro Show room ubicado en < stron g> Au topista
del Oeste, K M . 44.500, La Reja, Buenos Aires</strong>.</p>
< p> A qu & iacute; encontrar& aacute; todos nuestros productos envasados y listos
para llevar. Com un& iacute;quese previam ente p o r te l& eacu te;fon o para coordinar
una cita : < stron g> 0 2 3 2 1 -2 3 4 -9 8 7 6 < /stron gx/p >
</div>
< d iv d a ta -ro le = //navbar// d a ta -p o s itio n = "fixe d ">
< u l>
< l i x a h r e f= " in d e x .h tm r d a ta -ico n = "s ta r"> H is to n a < / a > < / li>
< l i x a h re f= "p ro d u c to s .h tm r d a ta-icon = "ch e ck"> P ro d u ctos< /a> < /li>
< l i x a h r e f = " # " d a ta -ic o n = "s e a rc h " c la ss= "u i-d isa b led "> S h o w roo m < /
a x / l>
d i x a h ref= //contacto.htm l// d a ta -ic o n = "in fo "> C o n ta c to < /a > </li>
</ul>
</div>
</div>
En esta n u e va p gina, in c lu im o s el uso de Static Maps, los m apas

esttico s de G oogle Maps. Lo in clu im o s d en tro de un tag <im g>,
www.redusers.com
97
in d ica n d o en el a trib u to src= la U R L co rresp o n d ie n te al mapa.

Si a n a liz a m o s el cdigo de esta U RL, pod em os e n co n tra r el p arm etro
Center=, seg u id o de las co o rd e n ad as de latitud y longitud que sitan

el m apa en el p unto representad o .
c
Atencin a l publico
Lo invitamos a ccnocer nuestro Showroom

u b ic a d o e n A utopista del O este. K M 44 500. La
R eja. Buen o * Aires
Aqu encom iara todos nuestros productos

envasados y listos para llevar Comuniqese
previairente por telefono para coordinar una cita
02321 -234-9876
H is to ria
P ro o u c to t
C o n ta c to
Figura 11. Los mapas estticos

de Google Maps nos permiten
m ostrar una ubicacin utilizando
*-=>
C i
CD
este recurso de forma gratuita.
El p arm etro zoom, tal com o su nom bre lo

in dica, a p lic a la d istan cia a rep resen tar en el
mapa. Size recibe com o p arm etro el ancho por
E L PARM ETRO
alto que tendr el m apa (est lim itad o a 600 x

400 pixeles para los m apas estticos). Markers
p erm ite estab lecer uno o ms m arcad ores, a los
ZOOM A P L IC A
L A D ISTA N C IA
que les podem os in d icar el color, una inicial

que puede co ntener en el in te rio r del globo y las
coorden adas donde se ubicarn.
A REPRESENTAR
EN E L M A P A
Crear la seccin Contacto

La ltim a se cci n que d isp o n d r n uestro
sitio w eb m v il, es la de contacto. En ella,
www.redusers.com
98
USEFtS
estab lecerem o s un fo rm u lario que podr
U T IL IZ A R E M O S E L
co m p le ta r el clie n te , para luego e n v ia rlo por
C O R R E O E L E C T R N IC O
e-mail. La idea es u tiliz a r el co rreo electr n ico

que el u su a rio tiene co n fig u rad o en su
Q U E E L U S U A R IO T IE N E
d isp o s itiv o , in d e p e n d ie n te m e n te de cul sea
C O N F IG U R A D O E N S U
este. Esto nos da la v e n ta ja de que el u su ario

te n d r una co p ia del m en saje a lm ace n ad a en
D ISPO SIT IVO
sus e lem en to s e n via d o s , y que n u e stra VVebApp

no re q u e rir p ro ce sar el e n v o de un e-mail a
tra v s de un sistem a p ro p io interno.
El fo rm u la rio de la pgina Contacto constar
de los cam p o s E-mail, Asunto, M ensaje.
En el cam po E-mail, el u su a rio que d esea e n v ia r un m ensaje de

co n su lta debe in g resar su co rreo e le ctr n ico . Esto nos s e rv ir para
que el u s u a rio recib a una co p ia del m ensaje e n via d o . El e-mail de la
em presa ir em b eb id o d en tro de la pgina web y solo ser v isib le
cu an d o se cargue el m ensaje en el clie n te de co rreo por d efecto.
El cam po Asunto y el cam po Mensaje se cargarn de m anera
a u to m tica en los resp ectivo s cam pos del clien te de correo electrnico.
Creem os, a co n tin u a ci n , un nuevo a rch ivo H TM L, llam ad o c o n ta c to ,
h tm l, con el sig u ien te cdigo:
<htm l>
<head>
< ttle > G re e n b e rrie s Fa rm ing</title>
c m e ta nam e=//v ie w p o rt// c o n te n t= "w id th = d e vic e -w id th , in itia l-s c a le = l//>
c lin k re l= "s ty le s h e e t"h re f= "http://code.jquery.com/moble/1.3.2/jquery.
m obile-1.3.2.m in.css/#/>
< script src= //http://code.jquery.com /jquery-1.9.1.m n.js"></script>
<scrpt s rc = '/http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scrip t>
< ! S c rip t para enviar co rre o e le c tr n ic o ->
</head>
<body>
< d iv d a ta -ro le = "p a g e " id = "p ro d u c to s " d a ta -th e m e = "d ">
www.redusers.com
< d iv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a lig n = "c e n te r">
<m g src = "m a g e n e s / L o g o 8 0 0 xl5 0 .g f" s ty le = "w id th :8 0 % ;m a x w id th :4 0 0 p x "a lt= "G re e n b e rrie s L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o ">
</dv>
< d iv d a ta -ro le = //content// d a ta -th e m e = "d ">
< h 4 > F o n n u la rio de contacto</h4>
<form id = "e m a il" m e th o d = "p u t"
action= //e n v ia rE m a il()// >
< input ty p e = "e m a il" d = "c o rre o " placeh o ld e r= "su correo
e le c tr& o a c u te ;n ic o " />
c in p u t ty p e = " te x t" d = "a s u n to " n a m e = "a su n to "
p la ce h o ld e r= " A s u n to " />
< d iv c la s s = "u -fie ld -c o n ta in ">
< te xta re a n a m e = "m e n sa je " id = //m ensaje//
p la ce h o ld e r= "M e n sa je "> < /te xta re a >
< input typ e = //b u tto n " id = "e n v ia r" v a lu e = " E n v ia r"
o n c lc k = "s e n d M a ilO "/ >
</form>
</div>
</div>
< d iv d a ta -ro le = //navbar// d a ta -p o s itio n = "fixe d ">
<ul>
c l i x a h re f= //in d e x.htm l// d a ta -ic o n = "s ta r"> H s to ria < / a x / l>
< l i x a h re f= //p ro d uctos.htm l" d a ta -ic o n = "c h e c k //> P ro d u c to s < / a x/ li>
< l i x a h r e f = " # " d a ta -ic o n = "s e a rc h " > S h o w ro o m < / a x / li>
c l i x a h re f= "c o n ta c to .h tm l" data-icon = //in fo " cla s s= "u idsabled">Contacto</a> </li>
</ul>
</div>
</div>
</body>
</html>
www.redusers.com
100
USERS
Figura 12. Al igual que con el resto de las pginas, Dreamweaver

nos permite obtener una vista previa del formulario de contacto.
S i v is u a liz a m o s en el n a ve g a d o r la pgina H T M L creada,
ve re m o s s im p le m e n te un fo rm u la rio co n tres cam p o s. Para el
cam p o e-m ail, e s ta b le ce m o s, en el a trib u to placeholder, el texto
Su c o rre o e le c tr n ic o . P a ra los cam p o s asunto y mensaje

e s ta b le ce m o s, ta m b i n en el a trib u to placeholder, los re sp e c tiv o s
textos que in d ic a n su fu n c io n a lid a d .
D ad o que e sta m o s e la b o ra n d o una
DADO Q U E EN
W ebA pp id ea d a e s p e c c a m e n te para tab lets
ESTAS PANTALLAS EL
y sm a rtp h o n e s , sa b e m o s b ien que el e sp acio

es algo que en las p a n ta lla s de estos
E S P A C IO NO A BU N D A ,
d is p o s itiv o s no ab u n d a. Por e llo , re e m p la z a m o s
D EBEM O S RESERVARLO
las e tiq u e ta s que id e n tifica n a e sto s cam pos

con el a trib u to placeholder. C on esto nos
P A R A LO S T E X T IN P U T
a h o rra re m o s e sp a cio en p a n ta lla , que q ued ar

d isp o n ib le p ara los Text In p u t.
Po r ltim o , cre a m o s u n b ot n Enviar que
in v o c a la fu n ci n send E m ail(), la cual ten d r
la l g ica para que se d is p a re el c lie n te de co rreo e le c tr n ic o que

el u s u a rio tie n e co n fig u rad o en su d is p o s itiv o . R eem p lacem o s
en el c d igo , a co n tin u a c i n , el texto 

< lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m e d ia = "(d e vic e -w id th : 3 2 0 p x )"
h re f= "a p p le -to u ch -sta rtu p -m a ge -3 2 0 x4 6 0 .p n g ">


< link re l= "a p p le -to u ch -sta rtu p -im a g e " m e d ia = "(d e vice -w id th : 3 20px) and (-w e b k it-d e v ice -p ixe l-ra tio : 2 )"h re f= "a p p le -to u c h -sta rtu p -im a g e -6 4 0 x9 2 0 .p n g">
Com parando uno con el otro, notam os que se u tiliza un media
query de CSS para especificar la imagen correspondiente a iPhone

Retina. Esto se debe a que en todos los d isp o sitivo s iPhone, tengan
o no pantalla Retina, cuando se inicia Safari Mobile, este reporta a
Ja v a S c rip t una resolucin de pantalla correspondiente a 320 x 460
pixeles, notando la diferencia entre una pantalla Retina y una no

Retina. La propiedad Pixel Ratio tiene un valo r 2 para las pantallas de alta
resolucin, m ientras que para las p antallas no Retina posee un v a lo r 1.
M O B IL E -W E B -C A P A B L E
El u so d e la s W e b A p p s que p rescin den d e to d a s las fun cio n alid ad es d el n a v e g a d o r w e b en los dispositivos
m viles se fue p ro p ag an d o hacia e l re s to de los n aveg a d o res m viles de la s platafo rm as Android,
Sy m b ian y B la c k B e rry 10, tom and o la prem isa im p uesta p o r A p ple d esd e el ao 20 0 7 .
www.redusers.com
253
Splash screen para iPad

A d ife re n c ia de lo v is to con los d isp o s itiv o s iPho ne e iPod, en
las tab lets iPad s se puede co n fig u rar una im agen splash screen
e sp ecfica para el d is p o s itiv o que se e n cu e n tra ap aisad o y o tro para
el d is p o s itiv o que se e n cu en tra en p o sici n v e rtic a l. La t cn ica a
a p lic a r es s im ila r a la d e scrip ta para iPho ne, con excepcin de los
iPad que rep o rtan u n a re so lu ci n de 768 x 1 0 2 4 p ix e le s .
Veamos entonces un ejem plo de cdigo para los iPad apaisados, con
pantalla com n y pantalla Retina, y para aquellos iPad que se encuentran
en p osicin vertical, diferenciando tam bin el tipo de pantalla.
< !-- iPad (vertical/portrait) -->

c lin k re l= "a p p le -to u c h -s ta rtu p -m a g e " m e d ia = "(d e vic e -w id th : 7 6 8 px) and (o r ientation: p o r tr a it )" h re f= "a p p le -to u c h -s ta rtu p -im a g e -7 6 8 xl0 0 4 .p n g ">
< !-- iPad (Apaisado/landscape) -->

c lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m e d ia = "(d e vic e -w id th : 7 6 8 px) and (o r ientation: landscape)" h re f= //a p ple -tou ch-startup-im age-1 0 2 4 x7 4 8 .png//>
< ! - iPad (Retina, vertical/portrait) >

c lin k re l= "a p p le -to u c h -s ta rtu p -m a g e " m e d ia = "(d e vic e -w id th : 7 6 8 px) and (o r ientation: p o rtra it) and (-w e b k it-d e v ic e -p ix e l-ra tio : 2 ) " h re f= "a p p le -to u ch -sta rtu p im age-1 53 6x20 08 .png//>
< ! - iPad (Retina, apaisado/landscape) -->

c lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m edia= //(d e vic e -w id th : 7 6 8 px) and (o r ientation: landscape) and (-w e b k it-d e v ic e -p ixe l-ra tio : 2 ) " h re f= /,apple -tou ch-startupm a g e -2 0 4 8 xl4 9 6 .p n g ">
F ig u ra 6. Ya
tenemos todas
las variantes
de imgenes
splash screen
listas para
incorporar
a nuestra
WebApp.
www.redusers.com
254
8. W E B A P P S
USEFtS
P A R A IO S
Agregar splash screen

a nuestro proyecto
Ya con el co n cep to b sico de cm o a p lic a r una p an talla de
in ic io a nu estra W ebApp, crearem o s a co n tin u a ci n las p a n ta lla s
co rres p o n d ie n te s que sern a p licad as a n u e stro p ro ye cto
G reen & B erries Farming, p ara que este resp o n d a com o una
a p lic a ci n n ativa cu an d o sea agregada a
la p antalla p rin c ip a l de un d isp o s itiv o iOS.
C R EA R EM O S UNA
IM A G E N P O R CADA
Para ello, crearem o s un a im ag en p or cada una

de las re so lu cio n e s re p re sen tad as en el ejem plo.
D entro del m aterial a d ic io n a l que se puede
R E S O L U C I N
d escarg ar en https://prem ium .redusers.com
REPRESENTADA
e n co n trarem o s, d en tro de la carp eta splashscreen,

unas im genes creadas para este prop sito.
EN E L E JE M P L O
Ya co n los a rc h iv o s d efin id o s, pasam os a

in co rp o ra r el co rresp o n d ie n te cdigo al a rch ivo
ndex.htm l de n u e stro p ro yecto.

A co n tin u a ci n agregam os, a los iconos
d efin id o s p ara n u estra a p lic a ci n , el cdigo co rre sp o n d ie n te a las
im genes splash screen:
< !-- Cdigo splash screen para Phone-iPod -->

< lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m edia= //(d e vic e -w id th : 3 2 0 p x )"
h re f= "lo g o -g b -3 2 0 x4 6 0 .p n g ">
< lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m edia= ,/(d e vic e -w id th : 3 2 0 px) and (-w e b k it-d e v ic e -p ixe l-ra tio : 2 ) " h re f= "lo g o -g b -6 4 0 x9 2 0 .p n g ">
< !-- Cdigo splash screen para iPad ~>

c lin k re l= "a p p le -to u c h -s ta rtu p -im a g e " m e d ia = "(d e vic e -w d th : 7 6 8 px) and (o r ientation: p o rtra it)/y h re f= //lo g o -g b -7 6 8 xl0 0 4 .p n g //>
< ln k re l= "a p p le -to u c h -s ta rtu p -m a g e " m e d ia = "(d e vic e -w d th : 7 6 8 px) and (o r i
e n ta d o r: landscape)" h re f= //lo go -gb -1 0 2 4 x7 4 8 .pn g//>
< link re l= "a p p le -to u ch -sta rtu p -m a g e " m ed a = "(d e vice-w id th : 768px) and (orie n tation: p o rtra it) and (-w e b k it-d e vice -p ixe l-ra tio :
2) Iiref= "lo go -gb -1 5 3 6 x2 0 0 8 .p n g ">
< link re l= "a p p le -to u c h -sta rtu p -im a g e " m edia=//(device-w idth : 768px) and (o rentation: landscape) and (-w e b k it-d e vice -p ixe l-ra tio : 2 )"h re f= "lo g o -g b -2 0 4 8 x l4 9 6 .
p n g ">
www.redusers.com
255
PAP: AGREGAR UNA WEBAPP A LA PANTALLA DE INICIO DE IOS
Presione el botn C o m p a r t i r del navegador Safari M obile y, desde el men emergente,
01
seleccione la opcin A a d i r a l
i n i c i o . A continuacin, deber verificar que el icono
y el ttu lo a m ostrar sean los mismos que configur a travs del H T M L .
02
Una vez agregada la W ebApp a la pantalla de inicio, ver el icono de la aplicacin

junto con el resto de los iconos de aplicaciones instalados. Podr ingresar a su
W ebApp desde este acceso, sin tener que escribir la U R L en el navegador web de iOS.
www.redusers.com
256
03
8. W E B A P P S
USEFtS
A l ejecutarse la W ebApp, S a fari M obile visualizar en pantalla el splash screen

correspondiente al dispositivo desde el cual se in icia la W e b App.
G R E E N B E R R IE S
&
04
P A R A IO S
FARMING
P a ra el caso de los dispositivos iP a d , la im agen splash screen que se visualizar

ser la correspondiente a la posicin de la pantalla del dispositivo (p o r tr a it o
la n d sca p e).
www.redusers.com
257
05
Finalm ente, ya podr u tiliza r su W eb App como si fuese una aplicacin instalada
localm ente en OS, sin necesidad de visu a liza r la b arra de herram ientas o barra
de direcciones del navegador web S a fa ri M obile.
A lo larg o d e e s te captulo, re p a s a m o s los c o n c e p to s b s ic o s p ara p o d er a d a p ta r una W e b A p p y a g reg arla

a la pantalla d e inicio de iO S , co n su re sp ectivo ico n o y sp lash sc re e n , p rescin dien d o de la funcionalidad
com p leta y d e la s herram ientas que o to rg a un n a v e g a d o r w e b c o m o Sa fari. Tam bin ap ren d im o s a cre a r
los d ife ren tes ico n o s y p an tallas d e inicio, dep en d ien d o d el tipo d e d ispositivo iO S donde n u estra W ebA pp
pueda lleg ar a ejecu tarse.
www.redusers.com
258
USEFtS
8. W E B A P P S
P A R A IO S
Actividades
1
Para qu sirve el meta tag viewport?
Son propias de Apple las etiquetas viewport?
Qu beneficio nos brinda incluir en una pgina web apple-mobile-web-appcapable?
Qu utilidad representa el atributo content= black-translucent ?
Cmo podem os desactivar el form ateo automtico de nmeros telefnicos

de pginas web en iPhone?
Qu utilidad nos brinda el atributo -precomposed en un icono?
Sirve utilizar el atributo -precomposed en las im genes splash screen?
De todo un sitio web, qu archivo debem os modificar para incorporarle

los com andos necesarios que permitan instalarlo en la pantalla de iOS?
10
Para qu plataforma sirve un icono de 57 x 57 pixeles?

En qu plataformas podem os utilizar imgenes splash screen horizontales
y verticales?

www.redusers.com
///////////////
WebApps para Android

y otros dispositivos
En e ste c a p itu lo a p re n d e re m o s lo s c o n c e p to s b s ic o s q u e
es n e c e s a rio in c o rp o ra r a una W e b A p p para p o d e r in s ta la rla
en la p a n ta lla p rin c ip a l d e lo s d is p o s itiv o s A n d r o id . T a m b i n
v e re m o s q u o tra fu n c io n a lid a d s im ila r n o s b rin d a n las
p la ta fo rm a s B la c k B e rry 10 y los d is p o s itiv o s W in d o w s P h on e.
Disear una W eb App
R esum en...................... ................ 271
para A n d r o id ......................... .....260

* A c tiv id a d e s ................. ................ 272
V isu a liza r una W eb Ap p
com o nativa en A n d ro id ... .....264
z 17 1z1
260
USEFtS
9 . W E B A P P S P A R A A N D R O ID Y O T R O S D IS P O S IT IV O S
Disear una WebApp

para Android
La lleg ad a del sistem a o p e ra tiv o A n d ro id ve rs i n 4.0 trajo
la m ad u rez que los u su a rio s de telfono s in te lig e n te s y tablets
estaban e sp eran d o del sistem a o p e ra tivo ms u tiliz a d o en todo
el m undo. Tam b in re su lt una e v o lu c i n s ig n ifica tiva para m uchos
d e s a b o lla d o re s de a p lic a cio n e s n a tiva s, h b rid a s y W ebApps,
p u esto que d eb an a c tu a liz a r d e te rm in a d a s ca ra cte rs tica s com o
el p ro cesad o r del equipo y el so ftw a re d isp o n ib le en l.
Y, ce n tr n d o n o s en el terren o de los d e s a b o lla d o re s web,
estos req u eran un fu e rte cam bio en el n ave g ad o r web p or defecto
d el eq uip o , que era, desde las p rim eras v e rs io n e s de este sistem a
o p e ra tivo , A n d roid Browser. Se tra ta de un n ave g ad o r web que
c u m p la con las ca ra c te rs tic a s b sicas de v is u a liz a r W ebA pps y sitio s
w eb o rie n ta d o s a d isp o s itiv o s m vile s, pero que no m o strab a ninguna
e v o lu c i n en cu a n to al m o to r de ren d eriz ad o , d eja n d o de lad o un
s in fn de ca ra c te rs tic a s que JavaScript, HTML5 y CSS3 ponan
a d isp o sic i n del d e s a b o lla d o r web o rie n ta d o al terren o m vil.
Google Chrom e para Android:

la estrella esperada
A p rin c ip io s de 2012, cuand o ya estaba en cam ino el sistem a
o p e ra tiv o m vil A n d ro id 4.0, Google a n u n ci el la n z a m ie n to
de la v e rs i n beta de G oo gle C hro m e p ara esta p lata fo rm a . Chrom e
fin alm ente lleg p ara q ued arse en los d is p o s itiv o s A n d ro id , trayen d o
consigo v a ria s de las ca ra cte rs tica s d estacadas de su ve rsi n
de e scrito rio , entre las cu ales podem os d estacar la sin cro n iz a ci n
a u to m tica de m arcad o res y sitio s web v is ita d o s y la in co rp o raci n
de una fu n cio n a lid a d que p erm ite acced er a las pginas visita d a s
en o tros d isp o sitiv o s.
Si b ien A n d ro id 4.0 segua ten ie n d o com o n aveg ad o r web
p or defecto a A n d ro id Brow ser, a p a rtir de la ve rs i n 4.1 de este
sistem a o p e ra tivo , Google C hro m e tom las rie n d as y pas a te n e r la
e x c lu siv id a d de n aveg aci n en el terren o m vil. Todos estos cam bios
www.redusers.com
USEKS
261
se d iero n en el m o m en to en que A n d ro id em p ez a g an ar espacio

entre los d isp o s itiv o s m vile s y en el que Google C h ro m e com enzab a
a se r el n aveg ad o r de e scrito rio m s u tiliz a d o a n iv e l m u n d ial.
Debem os d e sta c a r q ue, si bien A n d ro id 4.1 o s u p e rio r no se
a ctu a liz a frecu e n te m e n te en todos los d isp o s itiv o s m vile s por igual,
esto no se debe al d esin ters de la e m p resa cread o ra, sino a que el
d is trib u id o r de h a rd w are que in clu ye A n d ro id com o sistem a o p e ra tivo
siem p re lo ad ap ta a sus n ecesid ad es antes de la n z a r la ve rs i n al
m ercad o . Tam bin, en m uchos casos, surgen n u evo s d isp o s itiv o s
que se c o n v ie rte n en e s tre lla d en tro de una co m p a a, y p or ello
los p rio riz an , d ejand o de lado las a ctu a liz a cio n e s de sus d isp o s itiv o s
m s an tiguo s o con m enos ven tas.
P o r suerte, Google C h ro m e pas a ser, d esde la v e rs i n de A n d ro id
4.1, el n a ve g ad o r web p or d efecto en esta p lata fo rm a , que a su vez
se a c tu a liz a de fo rm a in d e p e n d ie n te al sistem a o p e ra tivo . Esto nos
p erm ite co n ta r con m ejo ras co n sta n te s en su m otor de ren d eriz ad o ,
el cual, ho y p or hoy, tien e el papel de n cleo del n a v e g a d o r web.
S e g m e n t a c i n d e l m e r c a d o A n d r o id (T a b le t , S m a r t p h o n e s y C o n s o la s )
KitKat 14.4.3]
Froyo (2. 2)
Gingerbread [2.3]
Honeycomb [3.X]
F ig u ra 1. Este grfico de abril de 2014 muestra la fragmentacin

de Android, donde se representa la fuerte adopcin de los usuarios
finales de dispositivos que poseen Android 4,0 o superior.
Chrome Mobile y las nuevas caractersticas

G oogle C hrom e Mobile in co rp o r , a p a rtir de la v e rs i n 31 beta,
www.redusers.com
262
l/SERSl
un a n u e va c a ra c te rs tic a m u y im p o rtan te para los d e s a b o lla d o re s

de a p lic a cio n e s w eb m viles, que p erm ite co n fig u rar una W ebApp
en A n d ro id m e d ian te un acceso d ire cto en la p a n ta lla p rin c ip a l del
d isp o s itiv o , para p o d er e je cu ta rla en m o d alid ad p an talla co m p leta
o fu ll-sc re e n app mode. Esta o p ci n u tiliz a el m o to r de C hro m e
M obile para A n d ro id y, adem s, tom a la p rem isa de lo que ya
a p re n d im o s en el Captulo 8 de este lib ro : pod em os agregar
W ebA pps a la p a n ta lla p rin c ip a l de iOS y que estas se e je cu te n
a p a n ta lla co m p leta.
Particularidades de la funcionalidad
en Chrome Mobile
Com o d e s a b o lla d o re s web, debem os tener en cu e n ta que
Ch rom e M ob ile, a p a rtir de la v e rs i n 31.0, ad op t una serie de
fu n c io n a lid a d e s p ro p ias que lo d ife re n cia n de lo que se puede
re a liz a r en iO S con Safari M obile ten iendo una W ebA pp fu n cio n an d o
a p a n ta lla co m p leta. Entre otras d ife re n cias, pod em os d esta car que
las a p lic a cio n e s w eb in sta lad a s en la p a n ta lla p rin c ip a l de A n d ro id
trab ajan exactam ente igual que com o lo h aran al eje cu ta rse d en tro
del n a ve g ad o r web C hro m e M obile. AI u tiliz a r el m o to r de re n d e rizad o
WebKit de C h ro m e M obile, se im p la n ta n las m ism as p o ltica s de

seguridad Sandbox que este b ro w se r posee, y tam b in se acced er
a las m ism as APIs que este n aveg ad o r m vil b rin d a.
Por o tra parte, en Google C hro m e M obile existe una d ife re n cia
vis ib le con la m ism a ca ra c te rs tic a que p resta iOS: la W ebA pp que
eje cu te m o s a p an talla co m p le ta en A n d ro id se v is u a liz a r en el listado
de a p lic a cio n e s a ctiv as , Task Switcher, aunq ue no con su propio
ico n o sin o co n el de Google C h ro m e. A sim is m o , com o n o m b re no
figu rar el ttu lo de la W ebA pp, sin o que se podr leer la leyenda
N O V E D A D E S D E LO S N A V E G A D O R E S M OVILES
T o d o s los n a v e g a d o re s w e b m viles disponen de inform acin de la s A P Is y la m eto d o loga de d esarrollo
de sitios y a p lica c io n e s w e b en la s p g in as princip ales de su s fa b rica n tes. L a inform acin so b re C h ro m e
para Android p o d e m o s en co n tra rla en la U R L : h ttp s :/ / d e v e lo p e r .c h r o m e .c o m / d e v to o ls / in d e x .
www.redusers.com
263
"W e b A p p ", para A n d ro id en ingls, o " A p lic a c i n W e b , para

la v e rs i n en esp a o l. Este in d ic a d o r p e rm itir que el u su a rio sepa
que est e je cu tan d o una W ebApp que co nsum e datos de in te rn e t
del d is p o s itiv o m vil.
F ig u ra 2. En el cambiador
de aplicaciones de Android
podemos distinguir cules
son nativas y cules son
WebApps.
Al m om ento de e s c rib ir esta o bra, Google C hro m e no ha
in co rp o ra d o tam p oco la cap acid ad de in teg rar una im agen del tipo
s p la s h s c r e e n a las W ebA pps que in stalem o s en la p an ta lla p rin cip a l
de A n d ro id . Por lo tanto, cu an d o e jecu te m o s una W ebApp a p a n ta lla
co m p leta, en el in icio de esta se m o strar una p a n ta lla b lan ca hasta
tanto se cargue la pgina p rin cip a l de la web.
URL externas
Com o m ed id a de seguridad d estacable p or sobre la fu n cio n a lid a d
im p le m e n ta d a en iOS, A n d ro id p erm ite co n o cer cund o una W ebApp
nos lle v a a un sitio w eb externo: pod em os v is u a liz a r, en el extrem o
s u p e rio r de la p antalla, la U R L hacia la cual n u estra W ebA pp a p antalla
co m p le ta re d irig i el n ave g ad o r del usuario. Esto se im p le m e n to para
n o tifica r al u su ario del telfon o m vil cu n d o u n a W ebApp carga una
pgin a w eb a jena a la U RL o rig in a l desde donde se in sta l el acceso
d ire cto en la p a n ta lla de A n d ro id .
www.redusers.com
264
USEFtS
[ u p a
m tacebook co m
Men
Fernando Ornar Luna
Historia
>
Productos
>
A f W n i d o r * o n a h o ra
:>!>owTOom
Contacto
>
Cn
jro K / v l
cu rCtKPuooK
\
9
Lg m v ra m c s
u b .c a tto e n A *
Rea. B u e n o s
A q u enconara
ervasados / (
previamente i
02321 2 3 4 9 J
F ig u ra 3. Al ingresar a una URL externa, desde una WebApp

instalada en la pantalla principal de Android, el navegador Chrome nos
visualizar la URL accedida en el extrem o superior de la ventana.
Visualizar una WebApp

como nativa en Android
A co n tin u a ci n , ad ap tarem o s el e je rc ic io U se r Book Store
re a liz a d o en el Captulo 6, para p o d er in s ta la rlo en la p antalla
p rin cip a l de los d isp o s itiv o s A n d ro id . En este caso, in co rp o ra rem o s
el icono co rre sp o n d ie n te para v is u a liz a r la W ebA pp en el e scrito rio
de A n d ro id y m o d ificarem o s los meta tags p ara que la W ebApp pueda
cargarse a p a n ta lla co m p leta, al igual que lo que hem os realizad o
en el Captulo 8 para la p latafo rm a iOS.
C rear los iconos para nuestra WebApp

Para in co rp o ra r un ico n o d is tin tiv o para n u estra W ebA pp, debem os
cre a rlo en dos tam aos d iferen tes: 196 x 196 pixeles y 128 x 128
pixeles. C hrom e para A n d ro id re so lv e r cu l es el ms in d icad o

p ara agregar a la p an talla del d is p o s itiv o donde se in sta la r el acceso
a la W ebApp. Si bien hay m uchas m o d a lid a d es de p a n ta lla s -dado
www.redusers.com
265
que Chrom e para A n d ro id fu n cio n a a p a rtir de la ve rsi n 4.0 de este

sistem a o p erativo -, las p antallas de estos eq u ip o s su elen d isp o n er
de una re so lu ci n alta. Es por esto que se d ejan de lado todas las
p a n ta lla s de baja reso lu ci n , com o las que se p ued en e n co n trar
en e q u ip o s que co rren la v e rs i n 2.x de este sistem a o p erativo .
Lo p rim ero que debem os hacer, ento nces, es cre a r u n icono
d is tin tiv o para n u e stra W ebApp de 196 x 196 pixeles. Puede tener
la fo rm a que n o so tro s deseem os, aunque Google siem p re reco m ienda,
para la cre a ci n de ico no s para la p latafo rm a A n d ro id , re sp e tar las
n o rm a tiva s y sugerencias que ellos re a liz a n a tra v s del sitio web
h ttp://developer.android.com . Si vam o s a tra b a ja r con el e jem p lo

re a liz a d o en este lib ro y no co n uno p ro p io, podem os d escarg ar
ento nces, p ara a g iliz a r n u e stra tarea, los a rc h iv o s de e je m p lo desde
el sitio de Red U sers Prem ium : h ttp s://p rem iu m .red u sers.co m .
mm
taam
3ri.it.
loo Co
y v
'n
n*
QP
%/
y y
4<f.
y 4.
/ i.
QA
A
9.
QB
/ /.
.
ez*
n r .n r
BOOKs
r. r o n g
i
_ rs 531
ik.m .
ljr.IT :
BOOKs
r.rnr.n.
53
oa
i la.ia
ibd\
F ig u ra 4. Los dos archivos .PNG diagramados que sern

los iconos de nuestra WebApp instalable en Android.
Ya d efin id o el icono, lo g u ard am o s en la carp eta ra z del p royecto
U ser Bo o k Store con el n o m b re ic_ubsl96xl96.png. Luego guard am os
el a rc h iv o con el nom bre ic_ubsl28xl28.png y lo re d im e n sio n am o s a
128 x 128 pixeles. De esta form a, ya tenem os d efin id o s los dos iconos
que in co rp o ra re m o s a la W ebApp en cuestin.
Ahora nos resta in c lu ir el cdigo e sp ecfico en el a rc h iv o home.php
de n u e stro p ro ye cto p ara que C hro m e para A n d ro id pueda d etectar
www.redusers.com
266
USEFtS
el ico n o co rre sp o n d ie n te al in s ta la rlo en la p an talla p rin cip a l del

d isp o s itiv o . Este cdigo d eb em os agregarlo d entro del tag <H EAD >,
igual que lo realiz am o s con n u estra W ebApp para iOS en el ca p tu lo
anterior. El cdigo es el siguiente:
c lin k r e l= " ic o n " s iz e s = "1 9 6 x l9 6 " h re f= "c _ u b s l9 6 x l9 6 .p n g ">

< lnk r e l= " ic o n " s iz e s = "1 2 8 x l2 8 " h re f= "c _ u b s l2 8 x l2 8 .p n g ">
< /H E A D >
El ttulo de la ap licaci n quedar definido p or el tag < T IT L E >

d el a rch ivo index.html o home.php (en n uestro caso); p or lo tanto,
debem os tener cu id ad o de que este tag no sea m odificado por
n in g u n a fu n cio n alid a d p rogram ad a d entro de la pgina. Por ejem plo,
si d esarrollam os una W ebApp que fu n cio n a com o un calend ario,
y en el tag < T IT L E > m u estra la fecha del da, cu an d o esta ap licaci n
sea instalada en un equipo A n d ro id , quedar con el ttulo de la fecha
en la cual se instal; por tal m o tivo , d eb eram o s e v ita r siem pre poner
una fecha en el tag < T IT L E > .
Definir el meta tag

<m obile-web-app-capable>
A h o ra nos resta d efin ir el tag que in te rp re ta r que n u e stra W ebApp
puede in sta la rse en la p a n ta lla p rin cip a l de A n d ro id y co rrer en
p a n ta lla co m p le ta cu a n d o sea e je cu ta d a desde a ll. Este cdigo
tam b in debem os in c o rp o ra rlo d en tro del tag < H EA D > , ju s to debajo
de la d efin ici n del m eta tag < T IT L E > y antes de los m eta tags
co rre sp o n d ie n te a los iconos.
El cdigo es el siguiente:
<HEAD>
c m e ta n a m e = "v ie w p o rt" c o n te n t= "w d th = d e vc e -w d th ">

c m e ta n a m e = "m o b ile -w e b -a p p -ca p a b le " c o n te n t= "y e s ">
www.redusers.com
267
Com o podem os ver, el meta tag es sim ilar al que escribim os para
iOS, con la diferencia de que no incluye la sigla
a p p le -
al inicio. Ya con
esto definido, podem os guardar la pgina home.php de nuestro proyecto,

subirla al se rvid o r web donde la ejecutam os y probar que todo funcione
de la m ism a m anera que antes. Dentro de este p royecto no debem os
en co n trar ninguna diferencia funcional con lo realizado hasta aqu.
Instalar la WebApp en Android

Si todo fu n cio n a de m anera p tim a, ya estam o s en co n d ic io n e s de
in s ta la r la W ebApp U se r Book Store en el sistem a o p e ra tivo A ndroid.
Para e llo , debem os ca rg a r la pgina p rin c ip a l en el n aveg ad o r Google
C h ro m e de nuestro d is p o s itiv o A n d ro id , y luego seguir las
in d ic a cio n e s del sig u ien te Paso a paso:
PAP: IN STA LA R LA W EBAPP EN ANDROID

Con la W e b A p p preparada, ingrese a la U R L correspondiente desde el navegador
01
Google Chrom e para A n d ro id . U na vez que carg la pgina principal ( i n d e x . h t m l

o h o m e . p h p ), ya puede in icia r la instalacin del proyecto.
BOOK
U UM o 4* life*/ Ufenufttto*
B ie n v e n id o s a USER BOCK STORE

E n n u e s tr a s tie n d a s p o d r e n c o n tra r la rre |or
v a r ie d a d d e lib r o s , la s c l o j l o s y re v is ta s
d e d ic a d a s a I b te c n o lo g a
E n tre la v a rie d a d de p ro d u c t o s q u e c o n ta rn o s
p o U c n io i d e a ta c a t l o a lib io s o fim lic o s , que
c u b re n to d a la v a r ie d a d de a p lic a c io n e s de
n fir m n v ic te rto c . y n u o c tr a ceeeldH
p r o g r a m a c i n la c t a l c u b re la m a y o r v a r e d a d de
te c n o lo g io r. y n e rra m ie n tio d e d e s a r r o llo d e !
m e r c a d o actu al.
www.redusers.com
268
02
USEFtS
A continuacin, despliegue el men de G oogle Chrom e, ubicado a la derecha de la

b arra de direcciones, y busque la opcin A g r e g a r a p a n t a l l a
a p a n t a lla
p r i n c ip a l o Add
to
ppal
A g re g a r
hom e s c r e e n , dependiendo de si tenemos
un sm artphone, una ta blet en espaol o un dispositivo con A n d ro id en ingls.
w * i U f r o b i a con m
E n niK-stroUwn* ' ,l3,oruJ
--.tdwl
C i c a d a s i a le Jom partir,
Eniriavaread
podTTKi5d*slac
c u b f c n lo d il v
olif
p *o < r> m a c O n l
Trvri* I/v ii.m v

m e t e r t e c t i
03
Se desplegar una ventana que o frece r cam biar el ttu lo de la aplicacin. Por
defecto, tra e r lo especificado en el tag < t i t i e > del encabezado de la pgina
H T M L del sitio web. Una vez aceptado o cam biado dicho ttu lo, presione A g r e g a r
www.redusers.com
269
04
Esta ltim a accin agregar el acceso de nuestra W eb App a la pantalla principal

de A n d ro id . C hrom e de finir cul es el m ejor cono para visu a liza r dicho acceso
d ire cto . Si lo ejecuta, ya podr u tiliz a r la W e b A p p a pantalla com pleta, com o si
se tratase de una aplicacin nativa de A n d ro id .
BOOK
' - . i i - . i l " - . i t m R O M UTCWI
fu ...n ,.. M lak (-I m.'i-ilii I- m*|n

vaiMOul li tfra to<utoi.Y w-iUa
OriHi r l M * ta mmlim u
t i * .
peceas c o l K * .o U ros ufrniiiros tjir
c u t*"i tOli! ^
r plteam-.- (!*
nuMlraMWiVi
a cus! e m e l i ir * n r * j r u o
*KPIn r lr'irwwm A* u-wralnrW
Com o hem os visto, A n d ro id nos fa cilita la tarea de in sta la r WebApps

en los d isp o sitiv o s con sistem a o p e ra tivo A n d ro id 4.0 o superior.
A su vez, com o realizam os esta accin desde Google Chrom e, nos
aseguram os de que cu a lq u ier m o d ificaci n que hagam os sobre la
W ebApp quedar actu a liz ad a de form a auto m tica en el d isp o sitiv o
de cada usuario que tenga el acceso d irecto a ella, sin necesidad de
re a liz a r ningn tipo de actu a liz a ci n de softw are. A su vez, nuestra
W ebApp siem p re contar con las ltim as especificaciones que se hayan
in clu id o en Chrom e, referentes a Ja v a S c rip t, CSS o HTML5.
A gregar WebApps en BlackBerry

B l a c k B e r r y 10 ha m arcad o un cam bio sig n ifica tivo d en tro del
terren o de los m vile s basados en la cl sica te cn o lo g a Black Be rry.
Sus ltim a s ve rs io n e s p u sie ro n a esta p latafo rm a a la par del resto
de sus co m p e tid o re s en el m ercado m o b ile. Y, de hecho, el n aveg ad o r
web in c lu id o en su sistem a o p e ra tiv o es uno de los que ms soporte
le da al e co sistem a que rodea a HTML5.
www.redusers.com
270
USEFtS
Desde la v e rs i n 10 de B la ck B e rry, el b ro w se r de esta p latafo rm a

p erm ite ag reg ar W eb A p p s a la p a n ta lla p rin c ip a l, co n ciertas
re striccio n e s, que rep asarem o s a co n tin u a ci n .
Iconos para BB10

Solo se soporta un tip o de icono que representa a la W ebApp que se
desea agregar a la p antalla p rin cip al de u n d isp o s itiv o BB10. El icono
debe respetar los 150 x 150 p ix e le s , y para in co rp o rar el meta tag
co rresp o nd ien te en una pgina web debem os hacerlo -al igual que en
A n d ro id e iOS- a travs de la sentencia < lin k re l> . Veam os un ejem plo:
c lin k re l= "a p p le -to u c h -ic o n " h re f= "c _ u b s l5 0 x l5 0 .p n g ">
La p rim e ra im p re si n que pod em os e n co n tra r aqu es que BB10

u tiliz a el m ism o atrib u to d efin id o p ara el n aveg ad o r Safari M obile.
La segunda d ife re n c ia es que no u tiliz a el a trib u to sizes= x x , sino
que d ire ctam en te no se lo in c lu y e d entro de la sentencia.
Agregar WebApp a pantalla de BB10

El n ave g ad o r web de B la c k B e rry 10 o s u p e rio r tam b in d isp o n e de
la fu n c io n a lid a d de A gregar a pantalla principal. Si in co rp o ra m o s el icono
de 150 x 150 p ixeles al cdigo de n u estro p ro yecto , p od rem o s hacer
que este se ve a co rrectam e n te d esde el e scrito rio de B la c k B e rry 10.
Figura 5. El archivo .PNG de 150 pixeles permitir establecer el icono

que deseem os para instalar nuestra WebApp en la plataforma BB10.
www.redusers.com
USEKS
271
Trabajar a pantalla completa

B la c k B e rry 10 no in clu y e la fu n cio n a lid a d m obile-web-app-capable
p or d efecto, pero s so p o rta la u tiliz a c i n de Ja v a S c rip t, que perm ite
lle v a r u n a W ebA pp a la m o d alid ad de p a n ta lla co m p leta. Esto se puede
re a liz a r a tra v s de la clase navigator.standalone, c u y o v a lo r b ooleano
d eber e stab lecerse en true. Esta m ism a fu n cio n alid a d est so p o rtad a
tam b in por la p lata fo rm a iO S y p o r la casi d esap a re cid a p latafo rm a
Symbian, m u y p o p u lar d entro de la gam a de telfono s Nokia, p revio s

a la llegada de W in d o w s Phone.
Instalar WebApps en dispositivos Windows Phone

W in d o w s Phone es el n u evo sistem a o p e ra tivo que, y a en su
ve rs i n 8, ha d em o stra d o se r un co m p e tid o r se rio para el resto de
las p latafo rm as. A ctu a lm en te , W in d o w s Phone p erm ite crear un acceso
d ire cto en el e s crito rio del sistem a o p e ra tivo m vil de cu a lq u ie r web,
aunque no reco n oce los m eta tags u tiliz a d o s en las otras p latafo rm as
m vile s. Por lo tanto, al e je cu tar n u e stra W ebA pp verem o s
in d e fe ctib le m e n te la b arra de d ire ccio n e s de In te rn e t Ex p lo re r M obile.
A l m o m en to de e s c rib ir esta obra, W in d o w s Phone no perm ite
cre a r ico no s p e rso n a liz a d o s para crear un acceso a la W ebA pp en
su in te rfa z M e tr o ; por lo tanto, al a n cla r a in ic io n u e stra W ebApp,
el sistem a re a liz a r una ca p tu ra de p a n ta lla de la pgina que estam os
n aveg an d o en ese m om ento.
E s te captulo n o s perm iti c o n o c e r la A P I p a ra a g re g a r a la pantalla d e inicio de Android n u estras

ap lica cio n es w e b m viles. A p ren d im os a redim ensio n ar los ic o n o s d e Android, a d ap ta r el m e ta tag
co rresp o n d ie n te y ve r el co m p ortam ien to d e n u estra W e b A p p una vez que s e instal en el escrito rio
d e Android. Tambin re p a s a m o s la s o p cio n e s que p resen tan la s platafo rm as B la c k B e rry 10 y W in d o w s
Ph o n e a la ho ra de a g re g a r una W e b A p p a su s pantallas d e inicio.
www.redusers.com
272
USEFtS
Actividades
TEST DE AUTOEVALUACIN____________________
1
Permite Android incorporar W ebApps a su pantalla de inicio?
Qu diferencias existen entre los m e ta ta g s de Android y los de iOS?
Qu navegador se requiere para agregar una WebApp a la pantalla de inicio

de Android?
Cules son las dimensiones para los iconos que debemos crear para Android?
Android identifica las imgenes del tipo sp la sh screen?
Qu diferencia encontram os entre una WebApp instalada en la pantalla de iOS

y una WebApp instalada en la pantalla de Android?
Dispone de meta ta gs propios el browser de BlackBerry para agregar una

W ebApp a su pantalla de inicio?
Qu diferencia al navegador web de BlackBerry 10 del resto de los navegado

res web mviles?
Permite Windows Phone agregar WebApps a la pantalla de inicio desde su

navegador Internet Explorer?
10
Existen meta tags especficos para W indows Phone que permitan realizar
esta ltima tarea?

www.redusers.com
*
\\\\\\\\\\\\\\\
///////////////
PhoneGap
En e s te capitu lo , nos a c e r c a r e m o s a Ph on eG ap , c o n o c id o
ta m b i n c o m o A p a c h e C o rd o v a , un fr a m e w o r k m obile
m ultip latafo rm a q u e nos perm ite con vertir n u estro sitio
w e b p a ra m viles en una aplicacin in stalable en te lfo n o s
in teligentes y ta b le ts. T am bin h a re m o s un re p a so por las
p rin cip ales ca ra c te rstic a s d e e s ta librera q u e nos perm ite
f cilm e n te a p r o v e c h a r d iv e r s o s re c u rso s d e h a rd w a re de
los d isp o sitiv o s m viles.
In tro d u c c i n ........................ .....274
Cm o tra n sform a r
una W e b A p p en hb rid a ..... .....277
Resum en...................... ................ 289
A c tiv id a d e s .................
j
7 1 z1
274
USEKS
10. PH O N EC AP
Introduccin
P h o n e G a p naci con la p rem isa de p erm itir el d esarro llo de
a p licacio nes m vile s para m ltip le s p latafo rm as partiend o desde
un nico d esarro llo englobado p or las tecnologas HTML5, CSS y
Ja v a S crip t. La p ropagacin de la tecnologa en m ateria m vil hizo
que un p ro g ram ad o r o e m p resa deba ad ap tarse a las necesidades
de su cliente, que -g lo b aliz aci n m ed iante- puede estar situado
en cu alq u ier rinc n del m undo.
Sum ada a esta variab le , la tendencia de uso de d isp o sitiv o s m viles
en el rincn donde este clien te se encuentre puede ser com pletam ente
d istin ta a la tendencia m arcada en el pas donde reside el program ador;
p or lo tanto, este ltim o tendr que co n tar con los co no cim iento s
n ecesarios que lo h ab iliten para poder d esarro llar un a a p lica ci n m vil,
y a sea para A n d ro id , com o para iOS, W in d o w s Phone o Black Berry, entre
otras p latafo rm as populares.
PhoneG ap busca, desde las bases del d esarro llo web, aco rtar lo
m s posible las d iferen cias que existen entre las d istin tas plataform as
d isem inad as p or los m ercados de todo el m undo. A travs de una
lib rera creada en Ja v a S c rip t, propone acced er a las caractersticas
p rin cip a le s de cada equipo m vil, com o ser el GPS, acelcrm etro,
cm ara o alm acenam iento local, entre otras funcionalid ades.
E a s ily c re a te apps u sing t h e w e b

te c h n o lo g ie s yo u k n o w a n d love
H T M L , C SS, and Ja v a S c r ip t
A d ab e P h o n e G ap C n ia p c n e
T h e P t i n e G 9 D e v e l o p e f M P
F ig u ra 1. Desde el sitio web www.phonegap.com podemos acceder a toda

la informacin referente a este framework multiplataforma que nos permite
crear una app mvil desde el cdigo fuente de una WebApp.
www.redusers.com
E2 S2 Z 3
275
A s, con sim p les co no cim ien to s web, podrem os crear en tiem po

rcord a p licacio n e s m vile s sin la necesidad de tener que em paparnos
de co n o cim ien to de cada una de las p latafo rm as existentes en el
b olsillo de los usuarios.
Esto nos a yu d a a acortar la cu rva de ap ren d izaje y, a su vez,
a conseguir, m ediante un nico esfuerzo, ab arcar una integracin
en m ltip le s p latafo rm as con una in terfaz unificada.
Arquitectura
PhoneG ap a p ro vech a la arq u ite ctu ra
PH O N EG A PC REA
im p lem en tad a en el naveg ad o r web de los
U N A A PL IC A C I N
telfon o s m viles para crear una ap licaci n que

se v is u a liz a en un co n ten ed o r w eb (ms conocido
Q U E E X P L O T A LA S
com o el m otor del b ro w se r), se ejecuta a p antalla
C A R A C T E R S T IC A S
co m p leta y explota las ca ra cte rstica s lo cales del

sistem a o p e rativo desde su API JavaScript.
L O C A L E S D E L S.O.
La interfaz de nu estra ap licaci n m vil es

creada p or co m p leto en HTML, CSS y fram ew o rks
com o jQ u e ry M obile y Ja v a S c rip t, y u tiliz a el co n ten ed o r PhoneGap
para p o d er hacer co rrectam ente el d esp liegu e de nuestra ap licaci n
en los d iferen tes sistem as operativo s.
Cuando cream os una ap licaci n PhoneG ap, com nm ente llam ada
com pilacin, esta se tran sfo rm a en un a rc h iv o b in ario que podr ser

d istrib u id o en las tiendas de ap licacio nes ms conocidas (G oogle Play,
Tunes, A m azon M arket y W indow s Phone M arketplace, entre

otros), respetando, por supuesto, los req u isito s que cada tienda dicta.
Internam ente, los archivo s web que com ponen nuestra app de
PhoneGap se encuentran alm acenados de m anera local y se cargan en
el contenedor web. As, PhoneGap nos perm ite d esarro llar una app desde
los arch ivo s base de una WebApp, u tilizan d o las m ltip les pginas HTM L
que hayam os creado. Sin embargo, debem os tener cuidado cuando
desarrollam os una app PhoneGap de m ltip les pginas con las variables
creadas en Ja va S crip t, ya que estos valores pueden perderse entre la
in vocacin de una pgina y otra. En estos casos, debem os contem plar
la opcin de alm acenar los valo res de variab les de form a local, com o
vim o s en el Captulo 7 de esta obra, para poder, as, m antener la
consistencia de una W ebApp que tiene cierta com plejidad en su funcin.
www.redusers.com
276
EEH 3
1 0 . PH O N EG A P
rn
Figura 2. Desde el sitio web http://docs.phonegap.com

podrem os acceder a toda la documentacin de este framework,
para conocer en detalle las opciones que nos brinda.
Dream weaver y PhoneGap

PhoneG ap naci com o un p ro yecto in d ep en d ien te que p erm ita
en cap su lar sitio s w eb en el m otor WebKit del naveg ad o r Safari,
pensado o rig in alm en te para la p latafo rm a iOS. En base a las buenas
crticas que recib i el equipo de d e sa rro llo p or este sensacional
fram ew o rk, co n el tiem p o fue m ejorado y traslad ad o a las diferentes
p latafo rm as que actualm ente cubre.
A lguno s aos m s tarde -y tal vez porque A d o b e Flash, que era
el cab allo de batallas, qued relegado de las p latafo rm as m viles-,
la firm a Adobe decidi a d q u irir PhoneG ap e in teg rarlo en su producto
D ream w eaver, que ho y por ho y sigue siendo la a p lic a ci n ms

u tiliz a d a para la co n stru cci n de sitio s web en d iferen tes lenguajes.
E L FR A M EW O R K P H O N E G A P
P h o n eG ap n o solo n o s perm ite com p ilar una W e b A p p hacia la s platafo rm as m viles; tam bin nos
brinda una s e rie de h erram ientas, m ed iante la A P I, q u e utilizando Ja v a S c r ip t n o s perm itirn explotar
las c a ra c te rs tic a s p rin cip a les d el h ardw are d e los dispositivos m viles.
www.redusers.com
USEKS
277
As fue com o, desde la versin 5.5 de esta herram ienta, D ream w eaver
com enz a d ar soporte para PhoneGap. Aun as, Nitobi, el creador de
este m aravillo so fram ework, puso com o condicin que PhoneGap fuera
de cdigo libre: por esta razn, se desprendi una ve rsi n libre bajo
licen cia Apache, com nm ente conocida com o Apache Cordova.
Adobe se qued con el derecho de PhoneG ap y PhoneG ap Build;
A pache C ordova, p or o tro lado, es d istrib u id o de form a gratuita
entre quienes q u ieren d esarro llar ap licacio n e s m vile s hbridas,
m anteniendo la filosofa o riginal con que Nitobi cre PhoneG ap.
Cmo transformar una

WebApp en hbrida
A co n tinuaci n, repasarem o s los concep tos bsicos que necesitam os
conocer para poder adaptar rp id am ente una W ebApp d esarrollad a para
que pueda fu n cio n ar com o una app instalable en nuestros d isp o sitivo s
m viles. U tiliz are m o s las bases de PhoneG ap Build , lo cual nos evita
tener que co n tar con una ve rsi n de D ream w eaver en nuestro equipo.
Lo p rim ero que debem os hacer es o btener una cuenta en PhoneGap
Build. Para ello, nos d irig im o s a https://build.PhoneGap.com y
seleccio n am o s R e g is te r. Esta o p ci n nos p erm itir elegir entre los
d iferen tes planes para registrarno s en el servicio de PhoneG ap Build.
El p rim ero de ellos es gratuito y nos h a b ilita a poder crear solo
una ap licaci n p rivad a. El resto de las a p licacio n e s que creem os estar
d isp o n ib le para cualq uiera que pueda n aveg ar p or ella y descargar el
cdigo fuente. Si deseam os que esto ltim o no ocurra, debem os elegir
algn plan pago.
A P A C H E COR DOVA
La firm a N itobi, c re a d o ra del fram ew o rk P h o n eG a p , vend i en 2 0 1 2 la platafo rm a P h o n e G a p y P h o n eG ap

Build a A d ob e, co n la con d ici n d e p o d er m an te n er una versi n del fra m e w o rk bajo licencia A p ach e
(o p en so u rce) d estin a d a a la com unidad q u e colab or en el d esarrollo d el fram ew o rk.
www.redusers.com
278
USEFtS
10. PH O N EG A P
F ig u ra 3. Desde h ttp s :/ / b u ild .P h o n e G a p .c o m / p la n s

podemos crear nuestra cuenta o utilizar una cuenta existente
de GitHub o Adobe ID y elegir el plan que ms nos convenga.
Si ya d isp o nem o s de una cuenta de s e rv icio s p ertenecientes a
Adobe, com o, por ejem plo, A d o b e ID o G it H u b ID , tam bin podrem os
u tiliz a rla s para id en tificarn o s en el se rvicio de PhoneG ap Build y as
e v ita r tener que crear u n a cu en ta desde cero.
F ig u ra 4. Ya creada la cuenta y validada mediante un e-mail

enviado a nuestra casilla de usuario, podemos iniciar sesin
en el servicio y com enzar a utilizar PhoneGap Build.
www.redusers.com
279
Una vez que ingresam os al servicio de
A L IN G R E S A R A
PhoneG ap Build , verem os all, en form a de listado,

todas las aplicaciones PhoneGap que hemos
P H O N E G A P B U IL D
ido creando. Para cada una de las aplicaciones
V E R E M O S TO D A S LA S
que cream os, obtendrem os un app ID que las

identifica d entro del servicio de PhoneGap Build.
A P L IC A C IO N E S Q U E
Adem s, accederem os a otros datos, com o los del
H E M O S IDO C R EA N D O
p ro p ietario de la app, donde figurar una direccin

de correo electrnico correspondiente al usuario
que la subi, la ve rsi n de PhoneG ap u tilizada para
co m p ilarla y, a travs de una serie de iconos, podrem os ve r tam bin

para qu plataform as fue com pilada exitosam ente nuestra app.
Las p latafo rm as para las cuales se com p il de m anera exitosa se
ve r n en azul, m ien tras que en ro jo se vern las p latafo rm as para
las cu ales no se haya podido re a liz a r esta accin.
Figura 5. Desde nuestro perfil de PhoneGap Build podemos administrar

las apps creadas con este framework, agregar nuevos proyectos
y recompilar los existentes si estos requirieran un cambio.
Esta d ife re n cia rad ica en que, en algunas p lataform as,
se requiere a d icio n a r a rch ivo s que nos identifiq uen a nosotros
com o d e s a b o lla d o re s certificad os. Por ejem plo, en iO S necesitam os
registrarn o s com o d e s a b o lla d o re s , obtener un A pple D e v elo p er ID
y un co n ju n to de a rch ivo s que se sum an a nuestra app para poder
ce rtificar que esta le co rresp o nd e a un d e s a b o lla d o r certificado.
www.redusers.com
280
USEFtS
10. PH O N EG A P
F ig u ra 6. Todos los portales que permiten la creacin y distribucin

de apps para dispositivos mviles poseen un apartado para
que los desabolladores creen su cuenta de usuario.
De no contar con esto, nunca podrem os d istrib u ir apps d entro
de la p latafo rm a iTunes. En el caso de A n d ro id , Google nos perm ite
co m p ilar ap licacio n es sin registrarno s com o d e s a b o lla d o re s y
p ro b arlas en su p lataform a; en ese caso, es el usuario q uien asum e
el riesgo de lo que pueda llegar a p asar al m om ento de in sta la r y
e jecu tar una app que no ha sido va lid a d a p or Google y que, por
supuesto, no est d isp o nib le en su tienda de ap licacio nes Google Play.
Por ltim o , B la ck B e rry tam bin so lic ita el registro de d e sa b o lla d o re s,
al igual que M icrosoft para su p latafo rm a W in d o w s Phone.
Ya estam os en co n d ic io n e s de co m p ila r una de las W ebApps
que d e sa rro lla m o s a lo largo de este lib ro en PhoneG ap, para
p o d e r d is trib u irla en los eq u ip o s m vile s que deseem os. La prueba
que m o strarem o s a co n tin u a ci n pod em os re a liz a rla tanto en un
d is p o s itiv o fs ic o com o en un em ulad or. T o m arem o s el cdigo fuente
de la a p lic a ci n D O CTO R ASSISTANCE, d e s a rro lla d a en el C aptulo 5
de este libro.
Modificacin de index.html
Al cdigo de la ap licaci n slo debem os re aliz arle una sim ple
m o d ificaci n en su a rch ivo p rin cip a l, index.htm l. Para esto, lo editam os
www.redusers.com
E2 S2 Z 3
281
en nuestro editor web favo rito y, en el <header> de d icho archivo,

agregam os la siguiente lnea de cdigo:
<script src=" Phonegap.js">c/script>
Esto h ab ilitar a PhoneG ap Build , cuando

procese el cdigo fuente de nuestro proyecto,
PH O N EG A P PRO VEE
a detectar que este debe co m p ilarse b ajo esta
E L ARCH IVO
plataform a. No im p o rta si agregam os o no el

arch ivo J S co rresp o nd ien te a PhoneG ap.
P H O N E G A P .JS
Al m om ento de co m p ilar para cada una de las

p latafo rm as existentes, PhoneG ap Build ubicar el
a rch ivo co rresp o nd iente a estas p latafo rm as antes
P A R A CADA S IS T E M A
O P ER A T IV O M VIL
de re a liz a r la co m p ila ci n de n uestro p royecto.

Actualm ente PhoneGap dispone de un archivo
P hon e G ap .js para cada sistem a operativo m vil para
el cual perm ite com pilar una aplicacin. Esto lo har la plataform a de
m anera transparente para el desarrollad os evitando as varios dolores de
cabeza, com o tambin la necesidad de subir una copia de nuestro cdigo
fuente por cada plataform a a la que deseamos com p ilar nuestro proyecto.
Veam os, a co ntinuaci n, cm o queda el cdigo fuente de la pgina
p rin cip al:
<htm l>
<head>
c title > D o c to r Assistance</title>
cmeta name="viewport" content="width=device-width, initial-scale=l//>

clink rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.
mobile-l.3-2.min.css'' />
cscript src="http://code.jquery.com/jqiiery-1.9.1.min.js"></scrpt>
c s c rip t s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js"></scrpt>
cscript src="Phonegap.js" ></script>
c/script>
c/head>
www.redusers.com
USEFtS
10. PH O N EG A P
F ig u ra 7. Con una simple lnea en el archivo i n d e x . h t m l

de nuestra WebApp ya podremos subirla al portal PhoneGap Build
para transformarla en una app para las diferentes plataformas mviles.
Creacin del icono de nuestra app

La siguiente tarea que debemos realizar es crear el icono que
com pondr nuestra aplicacin m vil. El icono debe basarse en el isologo
de nuestra WebApp. Descargando el cdigo fuente que corresponde a este
proyecto desde https://prem ium .redusers.com , encontrarem os un
icono ya creado en la carpeta raz. Este icono debe m antener una medida
estndar de 57x57 pixeles, exigida por PhoneGap Build.
.3. S'~
ISIoctor
C p E s s is ta n c e
\/
f
JA
i...................................................... ............ .........j i

9
ow
#
O"
a
F ig u ra 8. Desde nuestro editor de imgenes favorito podremos

crear rpidamente el icono de nuestra aplicacin, para luego subirlo
a PhoneGap Build y empaquetar nuestro proyecto como app.
www.redusers.com
283
Empaquetar nuestro proyecto

A co n tin u a ci n , debem os cre a r un a rc h iv o .Z IP que subirem o s
a los s e rv id o re s de Pho neG ap Bu ild . Este d eber co n te n e r todos
los a rc h iv o s y la e s tru c tu ra de ca rp eta s que le co rresp o nd en .
Si, p or e je m p lo , en nuestro p ro y e cto tenem o s d efin id o el uso de
a rc h iv o s rem o tos jQ u e r y M obile, estos p o d rn ser reem p lazad o s
p or las su b carp etas que co n ten g an en fo rm a lo cal los arch ivo s.
Esto e v ita r que con cada in ic io de n u estra a p lic a ci n se d eb a ir
a b u scar el co n te n id o rem o to de jQ u e r y M obile. Com o beneficio,
se o p tim iz a r nu estra ap p y no se u tiliz a r un co nsum o de datos
de in te rn e t en el d is p o s itiv o del clie n te . Cm o d esven taja , podem os
in d ic a r que el peso en k ilo b y te s de n u e stra app d ep en d er de cu n to
ocupen los a rc h iv o s y d ep en d en cias de jQ u e r y M obile.
Una vez que y a tenem os m od ificado el a rch ivo index.html de nuestro
p ro yecto, creado el arch ivo .Z IP y definido el icono de n u estra app,
podem os dar de alta este p ro yecto en PhoneG ap Build . Para ello,
tenem os que ir a la pgina p rin cip al de PhoneG ap Bu ild y p resionar
el botn +new app. Enseguida se a b rir el apartado para la cre aci n de
una nueva app, en el cual enco ntrarem o s d ife re n te s m aneras de in clu ir
los a rch ivo s de dep endencia a nuestro p erfil de PhoneGap.
F ig u ra 9. En el proceso de creacin de un nuevo proyecto

PhoneGap Build, podrem os seleccionar desde nuestra computadora
el archivo Zip que agrupe la estructura de nuestra aplicacin.
www.redusers.com
284
G 2H S
1 0 . PH O N EG A P
Una de las opciones es poner la ruta desde nuestro perfil de GitHub; la

otra, subir un archivo Zip desde nuestra com putadora. Aqu utilizarem os,
a modo de ejem plo, esta ltim a opcin. Para com enzar, presionam os el
botn Upload Z IP file, y, desde la ventana de dilogo que se abre en nuestro
equipo, ubicam os el archivo Zip, lo seleccionam os y presionam os el botn
Abrir. De esta forma, ser cargado a nuestro perfil de PhoneGap.

Ya subido el a rch ivo al se rvid o r de PhoneG ap Build , p resionam os
sobre el ttulo de la nueva a p lica ci n creada para in g resar al detalle
de esta, en donde podrem os especificar la in fo rm aci n ad icion al
p ertinente. Lo prim ero que harem os es u b ica r el ap artad o Configuration,
en donde ingresarem os, en el cam po app title , el nom bre de nuestra
app, D o c t o r A s s is t a n c e . Luego seleccio nam o s el icono de esta,
p resionand o el botn Seleccionar archivo y d irig in d o n os hasta la carp eta
que contiene d icho a rch ivo en form ato PNG.
lj
- 1 ^
---------------------------
3
uTT*
___________ d i \
F ig u ra 10. El icono creado para identificar nuestra app tambin puede ser
subido desde el portal PhoneGap Build en el momento de crear el proyecto.
C O N F IG U R A C IO N D E T A L L A D A D E L P R O Y E C T
P h o n eG ap d ispone d e un archivo d enom inad o c o n fig .x m l, en donde s e podrn configurar, d e m a n era deta
llada, la s pantallas d e inicio, ico n o s y s e rvicio s del m vil que nuestra a p p utilizar. El archivo p u ed e su m arse
en la c a rp e ta raz de nuestro p ro y e c to H TM L, o p o d e m o s d eja r que P h o n e G a p lo g en e re autom ticam ente.
www.redusers.com
285
En el cam po P a cka ge debem os declarar un nom bre d escrip tivo para

que lleve el proceso que ejecuta el sistem a operativo m vil, con el fin
de iden tificar nuestra app. En nuestro caso, debem os ingresar un nom bre
que identifique a nuestra app y el nom bre de nuestra com paa:
co m .d o c to ra ss ista n c e .vid a m o b ile .
En el cam po V e rs i n , incluim o s la versin de nuestro proyecto. Si es

la p rim era de ellas, solo debem os ingresar 1.0. A m edida que agreguem os
fun cio n alid ades o m ejoras, irem os increm entando el dgito verificador
para las actualizaciones, o el dgito p rincip al para una nueva versin.
Luego nos queda seleccio n ar la ve rsi n de PhoneG ap con la cual
co m p ilarem os nuestro p royecto y agregar, en el cam po Description,
un co m en tario que explique de form a clara el o b je tivo de nuestra app.
Con estos datos ya com pletados, solo nos queda p resio n ar el botn
Save p ara g u ard ar nuestra n u e va app en el perfil de PhoneG ap Build
y ya poder re co m p ila r y descargar los a rch ivo s binario s de cada

p lataform a. PhoneG ap Build nos avisar, m ediante un m ensaje de alerta
en la barra su p erio r del sitio web, que la app agregada ya se encuentra
en cola de co m p ila ci n para las d istin ta s p lataform as.
Finalizado este proceso, encontrarem os en cada una de las plataform as
un botn a z u l que identifica que el archivo b in a r io de nuestra app ya se
encuentra listo para ser descargado, o un botn r o jo que indica que falta
inform acin para poder com pilar nuestra aplicacin para esa plataforma.
v , |M
;::r 3 A
B<J
**rv
Deo
fe |
S*W>1
-
Doctor Assistance
&
v*
F ig u ra 11. Ya creado nuestro proyecto, al presionar S a v e , PhoneGap Build

comenzar el proceso de compilacin hacia las distintas plataformas mviles.
www.redusers.com
286
USEFtS
10. PH O N EG A P
De las p latafo rm as d isp o n ib le s para co m p ilar nuestra app en

PhoneG ap Build , debem os d estacar que solo W in d o w s Phone y A n d ro id
perm iten co m p ilar nuestra ap p sin los certificad os de d esarrollad or
co rresp o nd ientes. Si bien d icha app no se podr subir a la tienda
de ap licacio nes de la p lataform a, al m enos podrem os testearla
en un sim u la d o r o d isp o sitivo fsico en m odo debug.
Incluir certificados de desarrollador

Para in c lu ir certificad os de d esarro llad o r de a p licacio n e s para
las d iferen tes p lataform as, debem os su scrib irn o s a estas de acuerdo
a lo que cada fabricante de sistem as o p erativo s m vile s indica.
Ser d esa rro llad o r de d eterm inad as p latafo rm as com o iOS, A nd roid
y W ind ow s Phone tiene u n costo anual.
re
F ig u ra 12. Desde el perfil de las distintas plataformas

podem os incorporar los correspondientes certificados obtenidos
desde el portal de desarrollador de cada fabricante.
Las p lata fo rm a s B la c k B e rry y N okia (esta ltim a, solo para la
lin e a S y m b ia n o S 4 0 ) no re q u ie ren un pago anual, sino que poseen
s u s crip c io n e s g ratu itas. A co n tin u a ci n , en la tabla, d etallam os
el p o rta l de su s crip c i n p ara cad a co m unid ad de d e sa rro llad o re s
de a p lic a cio n e s m viles:
www.redusers.com
P O R T A L E S P A R A S U S C R IP C I N D E D E S A R R O L L A D O R E S
PLATAFORMA
287
USERS
SITIO WEB DE SUSCRIPCIN
iO S
h ttp s :/ / d e v e lo p e r.a p p le .c o m / p ro g ra m s / io s
A n d ro id
h ttp :/ / d e v e lo p e r.a n d ro id .c o m / in tl/ e s / in d e x .h tm l
W ind ow s 8 /
h ttp ://d e v .w in d o w s .c o m /e n -u s/ jo in
W ind ow s Phone
B la c k B e rry
h ttp s :/ / d e v e lo p e r.b la c k b e rry.c o m
N o kia (p la ta fo rm a s
h ttp :/ / d e v e lo p e r.n o k ia .c o m / c o m m u n ity / w ik i/ P u b lis h _
d ife re n te s a W P h one )
a n d _S u b scrib e
T a b la 1. Detalle de los sitios web que nos permiten suscribirnos

com o desarrolladores mviles de las distintas plataformas.
Cm o testear nuestra app compilada

Por ltim o, nos queda testear n u estra ap licaci n ya com p ilada
para las d iferentes p latafo rm as. Para ello, p odrem os p ro ced er de dos
form as d istin tas. U na opcin es d escarg ar el arch ivo b inario a nuestra
co m p u tad o ra y luego su b irlo al d isp o sitiv o o sim ulador. La otra opcin
es aprovechar, desde u n d isp o sitivo fsico , con una app que lea cdigos
QR, la lectura del cdigo co rresp o nd iente ubicado a la d erech a de
nuestro p ro yecto en PhoneG ap Build.
Veam os a co n tin u a ci n un e jem p lo de cm o in stalar nuestra app
co m p ila d a en PhoneG ap Build desde un d isp o s itiv o A n d ro id , u tiliza n d o
una app de c d ig o Q R . Prim ero ab rirem o s la ap licaci n lectora de
cdigos QR. Si no d isp o nem o s de esta a p licaci n, podem os descargar,
desde la tienda Google Play, Q R D r o id .
C E R TIF IC A D O S DE D ES A R R O LLA D O R
L o s distintos ve n d e d o res d e la s p la ta fo rm a s m viles im plem entan un certificad o d e d e s a b o lla d o r
p erso nalizado segn la p latafo rm a. En N o kia e iO S , por ejem plo, d e b e m o s g estio n a r un ID nico p ara
c a d a app q u e c re a m o s, m ientras q u e M icro so ft s lo valida a tra v s de un D e v e lo p e r ID nico.
www.redusers.com
288
USEFtS
10. PH O N EG A P
Una vez in icia d o Q R D roid (o nuestro lector de cdigos QR favorito),

deberem os en fo car el co rresp o nd iente cdigo QR visu a liz a d o en
nu estro perfil de PhoneG ap Build hasta que este pueda ser ledo por
el program a. A co n tin u aci n , la ap licaci n lecto ra de cdigos QR abrir
el naveg ad o r web p or defecto instalado en el telfono m vil o tab let e
in icia r la d escarga del a rc h iv o A P K co rresp o nd ien te a nuestra app que
deseam os instalar.
Figura 13. A travs de cualquier aplicacin lectora de

cdigos QR podemos iniciar la descarga e instalacin de
nuestro proyecto compilado desde PhoneGap Build.
Es p ro b a b le que el n a ve g a d o r web del
S I E L NAVEGADOR
N O S P R E G U N T A SI
Q U E R E M O S D ES C A R G A R
E L ARCH IVO A PK ,
A C EP T A M O S
d is p o s itiv o m vil nos p re g u n te si d eseam o s

d e sca rg a r el a r c h iv o A PK a n u e stro d is p o s itiv o ,
p o r cu e stio n es de se g u rid a d . S im p le m e n te
d eb em o s a c e p ta r d ich a d escarg a. Luego, desde
la b a rra de tareas de A n d ro id , se le c cio n a re m o s
el a rc h iv o d escarg a d o al d is p o s itiv o para
p o d er in ic ia r la in s ta la c i n de n u e s tra app
en m o d o debug.
A co n tin u a ci n , v is u a liz a re m o s los pasos de
in s ta la c i n de cu a lq u ie r app que d escargam os
en A n d ro id : debem os a ce p ta r las co n d ic io n e s y p ro ce d e r con la

in s ta la ci n de nu estra app. AI fin a liz a r d ich a in stalaci n , el proceso
www.redusers.com
289
nos o fre ce r a b rir la a p lic a ci n . P re sio n am o s el co rre sp o n d ie n te

botn, y listo : ya p od rem o s v e rific a r el fu n cio n am ie n to de nuestra
p rim e ra W ebApp c o n v e rtid a a a p lic a ci n m ed ian te Pho n eG ap Bu ild .
D o c tc * A T O s tn n c * -o * ) u g apfc
D o c to r A s t is t a n c e
D M M m u l a r la p l c ^ . o o -
D o c to r A t s r t a n c
nr
a to M o v w n t*
aoc0
v '5 * < jie a p f c c a c i0 n
0P9 , li
&
F ig u ra 14. Luego de pasar por el proceso de instalacin,

nuestra app podr ser testeada en el dispositivo mvil.
|W
R ESU M EN
Ph o n eG a p /A p a ch e C o rd o va nos p erm ite r p id a m e n te tran sfo rm ar un sitio w e b en una app p a ra dispositivos
m viles, co n m uy p o c o esfuerzo. C om b inan d o e s te fra m e w o rk con el servicio de P h o n e G a p B uild lograrem os,
en tiem p o rco rd , portar cualquier W e b A p p h acia el m undo de la s ap lica cio n es in stalab les en Android,
iO S , B la c k B e rry . W in d o w s P h o n e o los d ispo sitivo s Nokia b a s a d o s en Sym b ian y S 4 0 .
www.redusers.com
290
USEFtS
10. PH O N EG A P
Actividades
T E S T DE A U TO E V A L U A C I N _____________________
1
Qu es PhoneGap?
Qu diferencia hay entre PhoneGap y Apache Cordova?
Qu diferencia hay entre PhoneGap y PhoneGap Build?
Podemos utilizar PhoneGap slo para com pilar WebApps a apps hbridas?
Investigue, en el prim er captulo de este libro, la diferencia entre app nativa

y app hbrida.
Cmo trabaja una app hbrida?
Hacia qu plataformas podem os com pilar en PhoneGap Build?
Para qu sirven los certificados de desabollador?
o
De qu forma podem os instalar una app compilada en PhoneGap Build?
10
Qu plataformas compiladas en PhoneGap Build nos permiten testear

las aplicaciones sin el certificado de desabolladores?

www.redusers.com
///////////////
BB10, Windows Phone

y emuladores web
Este c a p tu lo n o s b rin d a r un p a n o ra m a so b re las
h e rra m ie n ta s p a ra el d e s a rro llo n a tiv o de a p lic a c io n e s
m v ile s para las p la ta fo rm a s B la c k B e rry 10 y W in d o w s
P h on e. C o n o c e re m o s c u le s son lo s S D K d e ca d a u n o
d e e s to s siste m a s o p e ra tiv o s m v ile s , q u re q u is ito s
d e b e m o s c u m p lir en e sto s te rre n o s y c m o p o d re m o s
p ro b a r n u e s tro s d e s a rro llo s a tra v s de los s im u la d o re s
m v ile s q u e cada p la ta fo rm a p o n e a n u e s tra d is p o s ic i n .
P rog ra m a ci n nativa
para B la c k B e rry 1 0 ............ ......292
D esarrollo m obile para

W in d o w s P h o n e .................. ... .297
7 1 z1
E m u la r W e b A p p s
en la c o m p u ta d o ra ....................302
292
USEFtS
A P N D IC E A . B B I O, W IN D O W S P H O N E Y E M U L A D O R E S W E B
Programacin nativa
para BlackBerry 10
Si bien iPhone es el producto ms d estacado en el terren o m obile
y fu e el que cam bi rotund am ente la m anera de u tiliz a r u n celular,
debem os reco nocer que gran parte del m rito en los avances de
n aveg ad ores y sistem as de m ensajera avanzad os, d entro del terreno
m vil, lo tiene, desde m ucho tiem po antes, la p latafo rm a BlackBerry.
Esta p latafo rm a realiz cam bios sig n ificativo s en el terreno m vil,
dado que ad op t las bondades que la em presa P a lm haba puesto en
el m ercado de la telefona m vil y la co m p utaci n p ersonal porttil
desde fines de la dcada del 90. As fu e com o B lack B e rry condecor
esta p latafo rm a con un sistem a de n aveg acin p or web y actu alizaci n
de las no ticias p resentadas en nuestros sitio s o blogs ms reconocidos
m ed iante el sistem a RSS.
BlackBerry tam bin inici, en parte, el terreno de la mensajera
instantnea m vil desde su plataform a BBM ( B la c k B e r r y M e ss e n g e r).
Incorpor un sistem a de chat sim ilar al que nos present IC Q e n los
inicios de la Web de escritorio, que evitaba que tuviram os que darles
nuestro nm ero de telfono a los interlocutores con los que chatebamos.
El sistem a de m ensajera BBM es, hasta hoy, m uy querido y deseado
p or m iles de u su ario s en todo el m undo. Por esto, B la ck B e rry decidi,
a p a rtir de 2014, lle v a r su sistem a BBM a las p latafo rm as iOS y A ndroid,
a pesar de que los laureles en el terreno los tenga ahora W h a ts A p p .
F ig u ra 1. Una de las ltimas versiones de telfonos P a lm , junto con el

primer RIM (solo localizador) y la nueva generacin de esta plataforma.
www.redusers.com
USERS
293
La generacin BB10
La llegada de B la ck B e rry 10 al m ercado m undial
CON B L A C K B E R R Y 10,
le d io un nuevo resp iro a una p latafo rm a que pas
B B P R O P U S O UN
de ser ld e r e x clu sivo en el terreno m vil a casi

d esap arecer p or co m p leto de este. BlackBerry 10
N U EV O S.O. CON
retorn con a rtille ra pesada. Propuso u n nuevo
M U L T IT A R E A EN
sistem a o p e rativo con m u ltita re a en tiem po real
T IE M P O R E A L
y lanz telfonos inteligen tes que respetan las

caractersticas clsicas de los m odelos QWERTY:
Q10 y Q5, y tam b in otros m odelos tctiles,

Z10 y Z30, que pelean palm o a palm o con iOS y A n d ro id , entre otros
com p etidores. Y, a la par de estos nuevos m odelos en el m ercado,
B la ck B e rry lanz tam bin un nuevo co n ju n to de h erram ien tas para
d esarro llad o res de esta p lataform a.
Herram ientas de desarrollo para BB10

D entro de las herram ientas de d esarro llo de ap licacio nes para la
p latafo rm a Black Berry, tenem os la p o sib ilid ad de seleccio n ar el IDE
y SDK para la v ie ja generacin de equipos, para la nueva generacin
BB10 y para B lack B e rry PlayBook. A su vez, el m ercado se segm enta
en el d esarro llo de ap licacio nes nativas, el d e sa rro llo de aplicacio nes
basadas en IIT M L5 y ap licacio nes creadas con A d o b e Air. Adem s,
en este ltim o tiem po, BB10 inco rpo r tam bin un runtim e que
le perm ite co rrer aplicacion es A n d ro id d entro de su plataform a.
Desarrollo nativo
Las herram ientas de desarrollo nativo perm iten crear apps para BB10
de dos m aneras: directam ente, u tilizand o cdigo C++, o com binando
D E S A R R O LLO P A R A B LA C K B E R R Y
En e s to s ltim os m e s e s , B la c k B e rry d ecid i c o m p le m en ta r el d esarro llo nativo, b a sa d o en W e b W o r k s ,
d irecta m e n te co n el com p ilad o r A p a c h e C o r d o v a , porque e s te ltimo resu elve c asi to d o el a c c e s o al
h ardw are que los equipos B B exigen.
www.redusers.com
294
USEFtS
este cdigo con el lenguaje Q M L y Ja va S crip t, ap ro vechand o estos dos

para la construccin UI de la app y dejando el cdigo C para el acceso
al hardw are y otras funcionalidades m s com plejas.
El IDE en prim er plano

M om entics IDE es el am biente de d esarro llo que propone
B la ck B e rry para la co d ificaci n de ap ps n ativas. Este ento rno de
d esarro llo fue co n stru id o desde el cdigo fuente de Eclipse; por lo
tanto, q uienes hayan program ado o program en en esta plataform a,
se en co n trarn en un am b iente fam iliar, dado que m antiene las m ism as
ca ra cte rsticas que Eclipse.
F ig u ra 2. Q N X M o m e n tic s ID E provee, en un entorno fcil y amigable,

todas las herramientas para programar, de forma nativa, aplicaciones BB10.
Desarrollo basado en HTML5

Este u ltim o tiem po, B la ck B e rry com prendi, al igual que M icrosoft,
que el d esarro llo de ap licacio nes m viles basadas en la tecnologa
H TM L5 no es m alo, y que, a su vez, le p erm ite que ms d esa b o llad o re s
se acerquen a la p latafo rm a, lle va n d o consigo sus ap licacio nes m viles.
A s fue que d ecid iero n in co rp o rar Apache C ordova (an conocido
com o PhoneGap) com o la base p rin cip al de d esarro llo de apps hbrid as
con HTML5. Por eso, ho y A p ache C ordova est integrado com o plugin
al am biente de desarrollo W ebW orks de BB.
www.redusers.com
295
H T M L 5 WeBW.
BlackBerry WebWorks 2.1
n
SU* e > w
- * - v n !h na S
F ig u ra 3. Apache Cordova fue integrado com o plugin oficial

a la interfaz WebWorks para desarrollar apps hbridas para Android.
La interfaz BB en HTML5
Para p o d er d esarro llar ap licacio nes h b rid as que lu z ca n igual que la
in te rfa z n ativa de BB10, tam bin contam os con una ve rsi n a lte rn a tiv a
para integrarse con j Q u e r y M o b ile y asi f cilm e n te crear la in terfaz de
BB desde CSS y Ja v a S c rip t: B B U I.js .
F ig u ra 4. Aplicaciones com o C o lo r N o te s 10 demuestran

que B B U I.js es una gran apuesta para crear interfaces BB10
para los desarrolladores WebWorks o PhoneGap.
www.redusers.com
2%
A P N D IC E A . BB1 O, W IN D O W S P H O N E Y E M U L A D O R E S W E B
El gran simulador
Todo gran ento rno de desarrollo debe tener un gran sim u lad or
para co m p letar el am b iente p erfecto de cdigo y testing. BB10 no
es la excepcin, ya que desde sus in icio s el am b iente de desarrollo de
esta p latafo rm a puso a d isp o sici n de los p ro g ram ad o res un excelente
am biente de testing. Este est com puesto por VM W are Player
(w w w .vm w are.com /products/player), el cliente que p erm ite correr

m quinas v irtu a le s de d iferen tes sistem as o p e rativo s y las m quinas
v irtu a le s en s de cada p latafo rm a de BB. Estas se descargan desde el
sitio web oficial de d e s a b o lla d o re s BB: h ttp://developer.blackberry.
com /devzon e/develop/sim ulator/bb 10 allsim versions.htm l
'
* A
11
10 D r n i m a t e
M u j> _ tn u m
'
11*
i1
Figura 5. VMWare Player con dos mquinas

virtuales que emulan a BB10 y BB10.2.
El uso de las m quinas v irtu a le s B la ck B e rry nos p erm itir, tanto
en el d esarro llo n a tivo com o en el d esarro llo web, testear nuestras
ap licacio nes en el ento rno Black Berry, si este es uno de los destinos
donde nu estra W ebApp correr.
El cliente de em ulacin V M W a r e
P l a y e r no so lo e s utilizado p a ra e m u la r lo s d ife ren tes sistem as
operativos d e B la c k B e rry , sino que tam bin p erm ite c re a r m q u in as virtuales p a ra instalar, por ejem plo,
el siste m a o p erativo W in d o w s 8, en tre otros.
www.redusers.com
E2 S2 Z 3
297
Desarrollo mobile para

Windows Phone
O tra de las p latafo rm as ms im portantes en el m undo del desarrollo
m vil es W ind ow s Phone. Este sistem a o p erativo m vil fue la apuesta
de M icrosoft para v o lv e r a ganar una cuota de m ercado en un ecosistem a
que no ha dejado de crecer en la ltim a dcada y en el cual la firm a de
Redm ond tuvo una p articip aci n p revia con W ind ow s Mobile.
Ju n to con la llegada de W in d o w s Phone, un sistem a o p e ra tivo
m vil co m p letam ente renovado en cuanto
a fu n cio n alid a d e s e in te rfa z grca, lleg la
ad ap taci n de sus herram ientas basadas en
D ESD E SU
V isu al Studio. Visual Stud io posee, desde
V E R S I N 2010,
su ve rsi n 2010, un soporte para desarrollo

de ap licacio nes nativas para W in d o w s Phone.
V IS U A L ST U D IO P O S E E
Este d esarro llo se basa, en parte, en la tecnologa
SO PO RTE PARA
XAML y, la otra parte, en la tecnologa de sus

lenguajes n ativo s: C # y V isu al Basic.
W IN D O W S P H O N E
W indow s Phone 7.0 fue la prim era ve rsi n de

este ren ovad o sistem a o p e rativo y, com o brow ser
m obile, in clu y una ve rsi n red u cid a de Internet
Explorer. Luego lleg la a ctu a liz aci n a W indow s

Phone 7.5 y, finalm ente, la ve rsi n 7.8, con m ejoras co nstantes en
la fu n cio n alid a d del sistem a o p erativo . Por ltim o , lleg al m ercado
W ind ow s Phone 8, que in clu y com o novedad p rin cip a l el soporte
de p rocesad ores de doble ncleo.
Windows Phone 7 y 8
M icrosoft firm u n co n ve n io con Nokia para el lan z am ien to m asivo
de la p latafo rm a W in d o w s Phone. Este acuerdo traa una serie de
ven tajas para am bas em presas, ya que N okia fue, d urante m uchos
aos, p ionera en m ateria de equipos celu lares por su gran calidad
de hardw are y softw are, y M icroso ft -si bien segua gozando de la
p op u larid ad m und ial del sistem a o p erativo W in d o w s en los e scrito rio s
de ms del 90 % de los equipos- necesitaba recuperar rpidam ente
el terren o m vil ced id o a sus p rin cip a le s com petidores.
www.redusers.com
298
l/SERSl
A P N D IC E A . B B 1 0 , W IN D O W S P H O N E Y E M U L A D O R E S W E B
C uand o se firm este acuerdo, Nokia llevab a va rio s aos perdiendo

m ercado de un m odo grosero: entre el 11 y el 23 % anual de u su ario s de
la p latafo rm a Nokia se pasaba a otras tecnologas ms m odernas. Este
problem a surgi porque Nokia tena tres sistem as o p erativo s d iferentes
para su lnea de te le fo n a celular, m ien tras que los grandes ju g ad o res
del m om ento -LG y Sam sung, entre otros- haban co ncentrado las
fuerzas en ren o var su lnea de equipos solo con A ndroid.
A s fue com o lleg al m ercado la m arca L u m ia , con la que Nokia y
M icrosoft p resentaron la p latafo rm a W ind ow s Phone com o la novedad
que hara re su rg ir de las cenizas a am bas em presas. Pero el tiem po
trajo o tro revs ms para am bas firmas: W in d o w s Phone 8 lleg m uy
rpid o al m ercado y v in o o p tim izad o de fb rica para a p ro ve ch a r las
bondades de los p rocesad ores de dos y cuatro ncleos. Esto h izo que
la p rim e ra lnea de telfonos con W in d o w s Phone 7.x no p udiera m ig rar
nunca h acia el n u evo sistem a o p e ra tivo m vil de M icrosoft, porque
todos esos equipos posean un p ro cesad or m ononcleo.
Si bien este tem prano lanzam iento de W indow s Phone 8 no fue
un gran acierto, el afn de la gente por tener lo ltim o en m ateria de
telfonos inteligentes hizo que la falta de actualizaci n para los equipos
con W indow s Phone 7.x no afectara en gran parte a am bas firmas.
instalacin de herramientas Microsoft

V is u a l S tu d io 2 0 1 0 fue el p rim e r ID E prep arad o para d esarro llar
ap licacio nes n a tiva s para W in d o w s Phone 7.x. Este p rogram a b rinda
soporte para d esarro llad o res m obile, tanto en su ve rs i n paga com o
en su ve rs i n express. In clu ye un em ulad or de la p latafo rm a W ind ow s
Phone que nos perm ite in stala r y testear nuestras ap lica cio n e s nativas;
tam bin posee otras fu ncio nes algo ms avanzad as, que o frecen la
p osib ilid ad de cam biar los tem as de la in terfaz entre oscuro y claro,
SD K P A R A W IN D O W S P H O N E 8
S i utilizam os la ltim a ve rsi n del ID E V is u a l S t u d io 2 0 1 3 en su versi n profesional, n ecesitarem o s
c o n ta r co n un siste m a o p era tivo W in d o w s 8 p rofesional o superior. W in d o w s 7 no so p o rta los em ulad o res
W P de la ve rsi n 2 0 1 3 de V isual Studio.
www.redusers.com
299
y de m o d ificar la com b inaci n de colores de los iconos, etiquetas

y botones de la p lataform a. Adem s, in clu ye el navegador Internet
Ex plo rer M obile, desde el cual podrem os p ro b ar nuestras W ebApps
sin problem a.
Al m om ento de e s crib ir esta obra, Visual Stud io se encuentra en
su ve rsi n 2013 update 2. Tam bin posee la ve rs i n com pleta, paga,
y su ve rsi n express, gratu ita pero con ciertas lim itacio n es.
Descargar SDK de Windows Phone

Lo p rim ero que debem os hacer para poder acced er al SD K de
W ind ow s Phone es su scrib irn o s com o d esa rro lla d o re s de la plataform a
M icrosoft. Si ya d isponem os de una cuenta en alguno de los servicio s
de M icrosoft, com o ser Hotm ail, Live.com u Outlook.com . esta nos
s e rvir perfectam ente para acced er a la p latafo rm a de desarrollad ores
m obile de la firm a de Redm ond.
Para p o d er d escarg ar las h erra m ie n ta s de W in d o w s Phone debem os
acced er a la sig u ien te URL: h ttps://dev.w indow sphone.com /
e s-e s/ d o w n lo a d sd k ? lo g g e d _in = l. Desde a ll, p od rem o s acced er

a los in s ta la d o re s del SD K p ara W in d o w s Phone 8.1 (an en beta al
m o m en to de e s c rib ir esta obra), al em u lad o r de W in d o w s Phone 8.1,
al SD K para W in d o w s Phone 8.0 y a los e m u lad o res de W in d o w s Phone
8.0, que tam b in in c lu y e n el e m u la d o r p ara la p latafo rm a W in d o w s
Ph on e 7.5 o superior.
Herramientas para desarrolladores
Figura 6. El centro de desarrolladores de Microsoft provee todas las

herramientas para crear aplicaciones nativas o HTML5 para Windows Phone.
www.redusers.com
S E F tS
A P N D IC E A . BB I O, W IN D O W S PH O N E Y EM U LA D O R ES W EB
Visual Studio IDE para Windows Phone

E l e n to rn o de d e s a rro llo p ara la cre a c i n de a p lic a c io n e s n a tiva s
p ara W in d o w s Pho ne nos p ro ve e de to d o lo n e ce sario p ara p o d er
cre a r n u e stra s p ro p ia s a p lic a c io n e s n a tiva s p ara esta p latafo rm a .
Los d e s a rro llo s de a p lic a c io n e s W P se g m en ta n su cre a c i n a
tra v s de d ife re n te s t cn ica s . La p re m is a de M ic ro s o ft para la
cre a ci n de a p lic a c io n e s W P es que estas se u tilic e n con el te l fo n o
en m o d o v e r t i c a l , de la m ism a fo rm a que B la c k B e rr y p ro p one
la cre a ci n de sus a p lic a c io n e s . Esto se debe a que la m a y o ra de
los u s u a rio s de te l fo n o s m v ile s lo u tiliz a n m u ch o m s tiem p o
en m o d o v e rtic a l que en m odo h o riz o n ta l.
Figura 7. Visual Studio para W P nos permite tener una vista previa
de nuestro desarrollo y, a su vez, crea r los com ponentes tanto en modo
cdigo com o arrastrndolos desde la barra de herram ientas.
El le n g u a je de p ro g ra m a c i n p ara c re a r a p lic a c io n e s n a tiv a s

p a ra W in d o w s Pho ne p u e d e se r ta n to V is u a l C# com o V isu a l
B a s ic . A su v e z , la in te r fa z g r fic a de e s te se r e a liz a m e d ia n te
lo s c o m p o n e n te s de su b a rra d e h e rra m ie n ta s , a rra s tr n d o lo s
y s o lt n d o lo s a la p a n ta lla lla m a d a PhoneApplicationPage, o
a tra v s del c d ig o X A M L . Este ltim o es un le n g u a je que
u t iliz a tags, s im ila r al u tiliz a d o p o r C SS, X M L y H T M L p ara la
c re a c i n de p g in a s w eb o c o m p o n e n te s d o n d e se c o n fig u ra n
d ife re n te s a trib u to s .
www.redusers.com
tym
(mli MtOM
F ig u ra 8. En la creacin de un nuevo proyecto para WP, podemos

elegir el lenguaje y el tipo de diseo que nuestra app tendr.
W ind ow s Phone nos propone crear aplicacio nes con una ventana
sim ple, Standalone App, cuyo proyecto se conoce sim plem ente como
Aplicacin de W indow s Phone. O tra opcin es crear una Aplicacin

de enlace de datos de W indows Phone que nos perm ite generar un
array dinm ico de tem s a p artir de, por ejem plo, un cdigo JSon o RSS.
Tam bin d isp o nem o s de la creacin de una Aplicacin Panoram a,
la cual extiende su p antalla hacia los laterales del equipo, p erm itiend o
su vis u a liz a ci n a travs de h ip e rvn cu lo s que conectan cad a seccin
o d irectam ente naveg nd o la a travs del d eslizam ien to h o rizo n ta l de
la p antalla hacia la izq u ierd a o derecha.
F ig u ra 9. El tipo de proyecto A p lic a c i n P a n o ra m a nos permite

conectarnos a fuentes de noticias RSS y crear rpidamente aplicaciones
desde blogs de noticias con la esttica propia del sistema operativo WP.
www.redusers.com
302
USEFtS
Emular WebApps
en la computadora
Existen tam bin co m p lem en to s para naveg ad o res web que sirven
para e m u la r ap licacio nes web d entro de un b ro w ser instalado en
n u estra com putadora. Desde hace un tiem po, Google in clu ye en su
p ortal de ap licacio nes y extensiones para Chrom e un com plem ento
llam ad o R ipple Emulator, el cual nos ayuda a em ular fcilm en te
W ebApps y as p o d er v e r cm o lucen estas en las p antallas de
d isp o sitiv o s m viles, ya sea tablets
o sm artphones.
E L E M U L A D O R DE
Desde nuestro naveg ad o r Chrom e o desde
W E B A P P S R IP P L E
Chrom ium , podem os in sta la r Rip ple m ediante

la siguiente URL: https://chrom e.google.com /
EM U L A T O R E S UN A
w ebstore/detail/ripple-em ulator-beta/geel
D E L A S E X T E N S IO N E S
f hphabnejj hdalkj h gipoh gpdn oc?h l=es-419.

R ip p le Em u lato r es actualm ente un p royecto
PARA CHROM E
open source bajo la lice n cia Apache. Sim plem ente

debem os agregarlo com o co m p lem ento a nuestro
b ro w ser y ya estarem os listos para sacarle todo
el provecho.
R ip p le E m u la to r (B e ta )
n v w iiM t
Figura 10. R ip p le E m u la to r es un verdadero aliado

a la hora de testear WebApps bajo el m otor WebKit,
as com o aplicaciones hbridas desarrolladas con PhoneGap.
www.redusers.com
303
Utilizacin de Ripple Emulator

U na vez instalado R ip p le Em ulator, se crear un icono en la barra
de h erram ientas, ju s to despus de la barra de d ireccion es de Chrom e.
A su vez, desde chrome://extensions/ pod em os tener un co n tro l cuando
deseam os a ctiv a rlo o d esactivarlo de los co m p lem ento s de Google
Chrom e o C hro m ium .
Su u tiliz aci n es m u y f cil. Su p o nien d o que deseam os v e r el form ato
web de una pgina creada para p latafo rm as m viles, lo p rim ero que
debem os h acer es cargar la pgina en una pestaa del n aveg ad o r web.
Luego ejecutam os el co m p lem ento desde la barra de herram ientas;
este nos p reg untar si q uerem os v is u a liz a r una W ebApp (y podrem os
seleccio n ar el d isp o sitivo en donde esta se ver) o si estam os
co n stru yen d o e inten tan d o v is u a liz a r un d esarro llo realizado
en PhoneG ap o A p ache C o rdova.
PAP: ACTIVAR Y DESACTIVAR RIPPLE EM ULATOR
01
P rim e ro , cargue la pgina w eb a visualiza r. E sta se debe e nco ntrar en un servidor

web o rig in a l o W ebserver lo cal. No puede visualiza rse ninguna W e b A p p desde el
disco local de la com putadora.
c o m e to
www.redusers.com
304
02
USEKS
A P E N D IC E A . B B I O, W IN D O W S P H O N E Y E M U L A D O R E S W E B
A continuacin, Ripple E m u la to r le consultar qu tip o de aplicacin web desea

emular. E ntre ellas, podemos v e r W ebApps, aplicaciones PhoneGap y desarrollos
W e b W orks 1.0, 2.0 y para tablets de la lnea B la ckB e rry.
A r* y o * r s a t f) to r ih * ? ! 7 l
5553
t o r Ibis s p ecih c l * U
f r a s e s d w t O pMrtnrm 'm nW wr y t u * s n lo
t r t l l k j TtTl
AM d c
r -i u .
to .
1 (to M O ii 11o 01
e a d H C w O ju a p O )
t o a e m io m n in r u iD O ]
M M o n tC U M
t o w n
03
*M 0 M q a m
A l cargarse la in te rfa z Ripple Em ulator, desde el apartado D e v i c e s podr

seleccionar el dispositivo correcto que pe rm ita em u lar en la pantalla del em ulador
nuestra W e b App . Podr in tercam biar diferentes dispositivos desde la lista extensa
que ofrece Ripple.
www.redusers.com
Ite d & i
04
305
P a ra volver todo a la norm alidad, debe seleccionar nuevamente el botn R i p p l e

Em u l a t o r de la barra de herram ientas y presionar D i s a b l e . De no desactivarlo,
cada vez que vuelva a carg a r esta U R L se visualizar dentro de Ripple E m u lator
con la ltim a configuracin seleccionada.
El aporte de Firefox
El naveg ad o r web M o z illa F ir e f o x de e scrito rio in clu ye , desde sus
ltim as version es, la p o sib ilid ad de ad ap tar una web a un tam ao de
p antalla p red eterm inad o . Para v is u a liz a r esta opcin, prim ero debem os
cargar en una pestaa la pgina deseada y luego p re sio n ar CTRL +
S H IF T + M, o ir a Men principal/Desarrolladores/Vista de diseo adaptado.

Desde el m en s u p erio r de la v is ta de diseo ad ap tad a, podem os
recargar la pgina, em u la r los toques de p antalla com o si fuera un
d isp o s itiv o m vil, ca p tu rar la p antalla y guard arla com o imagen
EM U LA D O R E S IOS
Lam en tab lem en te,
Apple
nunca
puso
disposicin
e m u la d o res
de
su
sistem a
o p era tivo
mvil
para la platafo rm a W in d o w s o Linux, y a q u e la s h erram ie n tas que ellos exigen utilizar para d esarrollo
slo d ispo n en de una versi n que p u ed e in s ta larse y ejec u ta rs e en OS-X.
www.redusers.com
306
A P N D IC E A . BB1 0 , W IN D O W S P H O N E Y E M U L A D O R E S W E B
para p rop sitos de d ocum entacin, y hasta cam b iar la p o sici n de

la p antalla a m odo ho rizo ntal. Tam bin, desde el com bo desplegable
podem os seleccio n ar d ifere n tes m edidas de p antalla y hasta agregar
nuestras m edidas p red eterm inad as.
F ig u ra 11. El browser de escritorio Firefox incorpor la funcionalidad
V i s t a de d i s e o a d a p ta d o , que nos permite emular

una web en un tamao de pgina especfica.
P a ra
d esarro llar
em ular
co n
h erram ie n tas
Apple
o ficiales,
podem os
c o n tra ta r
el
se rvicio
d enom inado M a c In C lo u d (w w w .m a c in c lo u d .c o m ) q u e, por un pequeo c o s to , nos perm ite alquilar

una com p utad ora A p ple co n OS-X y a c c e d e r a e s ta por e s crito rio rem oto.
www.redusers.com
///////////////
Firefox OS
Este a p n d ic e n o s b rin d a una r p id a in tro d u c c i n
ai m u n d o de F ire fo x O S , un n u e v o ju g a d o r en el te rre n o
m o b ile q u e a p u n ta a a c e rc a r la te le fo n a m v il d e los
m e rc a d o s e m e rg e n te s al p a ra d ig m a del d e s a rro llo
w e b , b a sa n d o to d a su in te rfa z en la te c n o lo g a H T M L 5 .
E sto p e rm itir q u e c u a lq u ie r d e s a b o lla d o r o d is e a d o r w e b
p u e d a in te g ra r sus p ro d u c to s r p id a m e n te en esta p la ta fo rm a .
Un nuevo jugador
71Z1
Distribucin
en el ecosistema mvil
308
El simulador
312
de aplicaciones
31f
308
USEFtS
A P N D IC E B. F IR E F O X O S
Un nuevo jugador
en el ecosistema mvil
La Fundacin M ozilla lleva m s de una d cada desarrolland o
d iversas ap licacio nes bajo la filoso fa open source. Su p rin cip al
m isi n es m antener una selecci n de p ro d ucto s que ponen
a d isp o sici n del usuario una n u e va a lte rn a tiv a en el ecosistem a
de ap licacio nes de e scrito rio y -ahora- m viles.
D entro de sus p rin cip ales estrellas, podem os destacar a Firefox
y T h u n d erbird , naveg ad o r w eb y clien te de correo electrnico,
re sp ectivam en te. Toda la lnea de p ro d ucto s de M ozilla est d isp o nib le
de m anera gratuita, ya que son de cdigo ab ierto y m ultip latafo rm a,
lo que nos perm ite u tiliz a r el m ism o producto en W indow s, Linux,
BSD y OSX, sin existir d iferen cias entre estas plataform as.
Con los aos, el fuerte crecim iento de las plataform as m viles hizo
que M ozilla lanzara una versin m vil de su navegador web para casi
todas las plataform as existentes. H oy podem os usar Firefox tanto en las
com putadoras de escritorio com o en las tablets y celulares ms populares.
Figura 1. En la web oficial de Firefox OS (www.mozilla.org/es-ES/

firefox/os) encontramos toda la informacin referente a la plataforma.
Durante m ucho tiem po, M ozilla recib i apoyo eco n m ico de Google,
su p rin cip a l interesad o en el co rrecto d esarro llo de p ro d ucto s abiertos.
C uand o Google decidi seguir su cam ino p or el m und o web, lanzando
www.redusers.com
npggz a
309
Gm ail com o co rreo ele ctr n ico basado en web y, ms tarde, Chrom e
com o naveg ad o r web, M o z illa d ej de re c ib ir apoyo de esta com paa.
A un as, con la fin an ciaci n de otros interesados, pudo seguir
m an ten iendo hasta ho y su lnea de productos.
La llegada en 2012 de T elefnica de Espaa
F IR E F O X OS E S UN
com o financiador del p royecto M ozilla ayud

a esta fundacin a d esarro llar ms sistem as
S IS T E M A O PER A T IV O
y aplicaciones para el m undo m vil. A s fue

com o se potenci la idea de crear un sistem a
DE CDIGO A B IE R T O
o p erativo propio, de cdigo abierto y con un
D E LA FU N D A C I N
costo casi nulo para los fabricantes de hardw are
M O Z ILLA
m vil que eligieran integrar en sus productos este

sistem a operativo. De all naci Firefox OS.
El objetivo de Firefox OS es abaratar los costos
de los fabricantes de hardw are y operadores de telefona m vil, para que
com petir en las grandes ligas, con equipos de un costo econmico, no sea
un im pedim ento. As fue como, luego de la presentacin de un sistema
operativo de cdigo abierto -bautizado originalm ente Seabird e inspirado
en Android-, M ozilla pudo llevar a cabo su desarrollo completo.
Arquitectura de Firefox OS
Firefox OS d iv id e su arq u ite ctu ra en tres com ponentes:
Gonk: oficia de capa de bajo nivel de B2G con su kernel

basado en Linux y une este a una segunda capa que se ocup a
de la in te ra cci n con el hardw are.
Gecko: cum ple la fu n ci n de entorno de ejecucin

de las ap lica cio n es en general.
Gaia: o ficia de in terfaz grfica del sistem a o p erativo . Una vez

que la capa B2G se ejecut, todo lo referente a la grfica que
aparece en la p antalla de Firefox OS es resp o nsab ilidad de esta
capa. Las ap licacio nes de bloqueo, m arcad o r telefnico, m ensajes
de texto y m en de ap licacio n es, entre otras fu n cio n alid ad e s ms,
form an parte de la capa Gaia.
Las ap licacio nes que corren bajo Firefox O S estn im p lem entadas
bajo el estnd ar HTM L5, CSS3 y Ja v a S c rip t. Estas alcanzan, as, una
in terfaz que se e jecu ta co rrectam en te en este sistem a operativo.
www.redusers.com
USERS
Caractersticas del S.O.

Firefox OS posee una serie de ca ra cte rstica s que lo d iferencian
p or co m p leto del resto de los sistem as o p erativo s m viles.
Entre ellas, d estacam os las siguientes:
W ebA pps: todas las ap licacio nes de este S.O. estn basadas
en web (HTM L5, CSS, JS ). No existe ho y un fram e w o rk que perm ita
co d ificar y co m p ila r las ap licacio nes de m anera nativa. A un as,
las ap licacio nes son ejecutadas de m anera nativa, sin dep ender
del naveg ad o r web. A tra v s de un a rch ivo especfico, el S.O.
lee las ca racte rsticas que tiene cada ap p y las e jecu ta en pantalla
com pleta.
Storage: el a lm acen am ien to de datos de estas apps y tam bin

los que guarda el S.O. u tiliz a n SQLite com o base de datos.
UI: la interfaz grfica de las aplicaciones es adaptable a cualquier

tipo de pantalla y resolucin, sea o no tctil. Esto es posible gracias
a la capa Gaia. Utiliza la fuente tipogrfica por defecto, Fira Sans,
y los iconos del sistem a operativo poseen bordes redondeados.
Igualmente, la creacin de estos queda a criterio del autor de cada app.
G eolocalizacin el GPS de Firefox OS y el sistem a de

g eo lo calizaci n de usuario u tiliz a HERE, de Nokia, para v is u a liz a r
m apas y o rie n ta r a los co nd ucto res hacia su destino deseado.
F ig u ra 2. Firefox OS nos pone a disposicin todas las funciones de cualquier

smartphone y ejecuta tanto apps nativas com o WebApps sin complicaciones.
www.redusers.com
C E2 Z3
311
Las notificacio nes, la re p ro d u cci n de audio y vid e o y la tom a de

fo tog rafas tam bin se pueden lle var a cabo en este sistem a operativo.
Y, dado el m ercado elegido para d esp legar su m asificacin, Firefox
OS cuenta con una R a d io F M d entro del sistem a o p erativo , o bviand o
as la p op u larid ad de la co m p etencia, que p ro m u eve la sin to n a radial
m ediante s tr e a m in g .
rWmOS(n4M
,-
If7 51
- 2 2 48
54911331+8854 3
P a a f S4B1133IQ68&4~|
Mol ho. viajaste bien ?
E iw f
3o.
6o
9 ,
o.
4*
e
D n a ip ilM
SS
f t r c in n c p w til liM w tf i M
o v in
Figura 3. El simulador de Firefox OS pone a disposicin todas las

caractersticas del S.O. y funciona en Windows, Mac y Linux por igual.
Codificando apps
Com o b ie n d ijim o s en el in ic io de este a p n d ice , F ire fo x OS
p ro m u e v e el d e s a rro llo de a p lic a c io n e s n te g ra m e n te basadas
en te cn o lo g a s w eb, lo que p e rm ite que c u a lq u ie r p erso n a con
c o n o c im ie n to s b sico s en e sta s te cn o lo g a s p u ed a r p id a m e n te cre a r
u n a app c o m p a tib le p ara este siste m a o p e ra tiv o . Esto nos p e rm ite
| P A N E L DE A D M IN IS TR A C IO N
__________________________________________
Firefox b ro w se r nos pone a dispo sici n A p p M a n a g e r , el panei de adm inistracin principal de Firefox O S ,
d e s d e donde p o d e m o s adm inistrar la s a p lica c io n e s del dispositivo, d e te c ta r un telfono fsico, e je c u ta r el
sim ulador e instalar ap lica cio n es, entre o tra s c o s a s . S e a c c e d e d esd e e s ta U R L: a b o u t r a p p - m a n a g e r
www.redusers.com
312
USEF*S\
g a ra n tiz a r que todas las a p lic a c io n e s w eb que fu e ro n d e sa rro lla d a s

a lo larg o de este lib ro son to ta lm e n te co m p a tib le s co n Firefo x OS.
Y dado que Firefox OS no posee un fram ew o rk o ID E especfico
para el desarrollo de ap licaciones, ap ostand o por el estnd ar web,
la Fundacin M o zilla pudo ce n tra liz a r su esfuerzo en el desarrollo de
un sim u lad or que se integra co n el navegador web, y que nos perm ite,
as, p ro b ar todos nuestro s d esarro llo s tal com o si lo hiciram o s sobre
un d isp o sitivo fsico.
El simulador
Para poder in stalar el sim u la d o r Firefox OS, solo debem os
contar co n el naveg ad o r web Firefox. El sim u lad or se instalar
com o un co m p lem ento de este y se ejecutar de m anera fcil
desde la in terfaz del navegador.
Para in sta la rlo , debem os acce d e r al
PAR A IN STALAR EL
SIMULADOR FIREFOX
OS SOLO NECESITAMOS
EL NAVEGADOR WEB
sig u ien te lin k desde Firefo x b ro w ser: www.
addon s.m ozilla.org/es/firefox/adclon /

firefox-os-sim ulator. Luego, debem os
p re sio n a r el botn A gre g a r a Firefox y
e sp erar que fin alice el p ro ceso de in stala ci n .
Se d escarg ar el s im u la d o r y luego se agregar
com o co m p le m e n to de Firefox.
FIREFOX
Fin a liza d o este p roceso, p od rem o s acced er

al sim u lad o r desde una nueva pestaa,
d irig in d o n os al m en Firefox /Desarrollador Web/
Firefox OS Sim ulator. Se cargar el A d d o n en esta

pestaa y, sobre el lateral iz q u ierd o , verem o s la
FIR E F O X O S K N O W L E D G E D A TA B A S E
Para seguir al pie de la letra la correcta instalacin de Firefox OS y conocer con mayor profundidad
sus caractersticas, podemos ingresar al link: www.developer.mozilla.org/es/docs/Mozilla/
Firefox OS/Using the App Manager, donde encontraremos un instructivo completo y detallado.
www.redusers.com
313
opcin Simulator Stopped. Presio n an d o sobre esta, el sim u lad or

se in icia r en una ve n ta n a em ergente vis u a liz a n d o la pantalla
in icia l del sistem a o p e ra tivo m vil.
Ajustes
Desde el m en de a p lica cio n e s, pod em os acce d e r a los ajustes
gen erales del sistem a o p e ra tivo , d on d e p od rem o s co n fig u rar opciones
com o: id io m a, pas, ho rario , fecha, etctera. Una v e z co nfiguradas
las o p cio n e s p or d efecto de n u e stro sim ulad or, p od rem o s acced er
a la d escarga de a p lic a cio n e s d esd e F irefox M arketplace o co m en z ar
a a d ap ta r n uestras W ebA pps p ara d is trib u irla s en esta p lataform a.
11 o
F ig u ra 4. El panel de administracin ser el centro de pruebas de

nuestras aplicaciones sobre el simulador o dispositivo fsico Firefox OS.
Requisitos de una app

Las m trica s para el d e s a rro llo de una app que se ejecute de
m an era n a tiv a en Firefo x OS no p oseen re q u isito s co m p le jo s com o
puede tener una ap p de A n d ro id o iOS. Si d eseam o s c u m p lim e n ta r
el est n d ar U I, pod em os u tiliz a r las lib re ra s n a tiva s b asad as en CSS
b a u tiz a d a s b ajo el nom bre FFOS UI Style, las cu ales son d istrib u id a s
a tra v s del p ortal G itH ub de la Fu n d a ci n M o z illa: w w w .gith u b .
com /m oziIIa-b2g/gaia/tree/m aster/shared.
www.redusers.com
314
USEFtS
Firefox OS Ul Style
De este rep o sito rio debem os tom ar los a rch ivo s ubicados en la
carp eta /JS/ y en la carp eta / S T Y L E / . El resto de las carp etas posee
otros com ponentes, aunque an estos se encuentran en modo
b orrado r y no se recom ienda u tiliz arlo s.
Los a rch ivo s CSS poseen clases definidas para esta interfaz, sim ilares
a las de jQ u e ry M obile, con lo cual al e scrib ir un a rch ivo HTML,
p odrem os in vo ca r tags com o < d a ta -ro le = d ia lo g d a ta -ty p e = c o n firm >,
y as obtend rem os una ve n ta n a de dilogo que vis u a liz a r los botones
de co n firm aci n para ejecu tar otras accio nes y/ o cerrarse.
D entro de los sk in s o tem as que Firefox OS nos pone a disp o sicin,
se in clu ye n actu alm en te dos tem as especficos, a los cu ales accedem os
a trav s de las siguientes lneas de cdigo:
< c la ss = "s k in -o rg a n ic ">

//nos devolver el tem a claro
< cla ss = "s k n -d a rk ">

//nos devolver el tem a oscuro
Firefox OS propone, a travs de estos archivos, lograr la m ism a sim pleza

que jQ u e ry Mobile o Sencha Touch ponen a disposicin del desarrollador.
Disear los iconos de nuestra app

Para poder d ise ar iconos que cum plan con la esttica req uerid a por
Firefox OS, podem os acced er a la siguiente gua: w w w .m ozilIa.org/
en-US/styleguide/products/firefox-os/icons que nos p erm itir

co n o cer a fondo los re q u erim ien to s p rin cip a le s en cuanto a tam ao,
form a, p ro fu n d id ad y otras caractersticas prop ias del grfico que
d istin g u ir n u estra ap licaci n del resto d entro del sistem a operativo.
Ul alternativo
Igualm ente, si no q uerem os in vo lu crarn o s de lleno con el desarrollo
de ap licacio nes que u tilice n el estilo n ativo de Firefox OS, podem os
re c u rrir a la lib re ra de jQ u e ry M obile, sin que esto sea un im p edim ento
para d is trib u ir apps en M ozilla M arketplace.
www.redusers.com
315
Manos a la obra
Veam os a co n tin u aci n cm o podem os ad ap tar nuestra app
G r e e n & B e r r ie s F a r m in g para que co rra de m anera n a tiva en Firefox

OS. Para ello, co p iem os la carpeta del p ro yecto a una nueva ubicacin
y, una vez realizad o esto, renom brem os la carp eta raiz del proyecto
com o FFOS - G R E E N & B E R R IE S FARM IN G .
Realizado esto, el siguiente paso ser crear un archivo Manifiesto, al igual
que el desarrollado en el captulo P h o n e G a p , que nos perm itir indicarle
al sistem a operativo las principales caractersticas de nuestra app.
Manifest.webapp
El a rch ivo Manifest.webapp es el p rin cip al objeto al que Firefox OS
apunta cuando e jecu ta una aplicaci n. En este, el sistem a o p erativo
m vil e n co n trar toda la in fo rm aci n referente a la aplicaci n, para
poder in stalarla en el sistem a o p erativo , m o strar su co rresp o nd iente
icono e identificar, entre otras cosas, el ttu lo y qu fu n cio n alid ad es
del so ftw are o h ard w are u tiliz a r al m om ento de ejecutarse.
Para ello, d entro del a rch ivo en cuestin, debem os vo lca r el
siguiente contenido, que in clu ye los com andos a travs de los cuales
id en tifica r las ca ra cte rsticas m encio nad as de nuestra app. Antes
crearem os, d entro del d ire cto rio raz de nuestro p royecto, un archivo
con este nom bre. A co ntinuaci n, escribirem o s el siguiente cdigo:
{
"v e rs i n ": " 1 .0 " ,
" a m e " : "G re e n & B e rrie s F a rm in g ",
"d e s c rip tio n ": "E je m p lo funcional de A p p para Fire fox OS - by Fem ando L u n a ",
"la u n c h _ p a th ": "/ n d e x.h tm l",
" ic o n s ": {
" 4 8 " : "/im agenes/gb-48.png",
" 6 0 " : "/im agenes/gb-O.png",
" 1 2 8 " : "/im agenes/gb-128.png"
"d e v e lo p e r": {
" a m e " : "F e rn a n d o L u n a ",
" u r l " : " http://w w w .vidam obile.com .ar"
www.redusers.com
316
l/SERSl
"in s ta lls _ a llo w e d _ fro m ": [
w*//
l
"lo c a le s 7': {
"e n ":{
" d e s c r ip tio n " :" Ejem plo funcional de A p p para F ire fo x OS - by Fernando
L u n a ",
"d e v e lo p e r": {
" a m e " : "Fe rn a n d o Ornar L u n a ",
" u r l " : " http://w w w .vidam obile.com .ar"
}
}
>,
" d e fa u lt jo c a le " : " e s " ,
"p e rm iss io n s ": O,
"fu lls c re e n ": " t r u e "
Com o podem os ver, este cdigo es de m uy fcil in terp retaci n . En l,

indicam os el nom bre de la app, su versi n , el nom bre del d esarrollad or
y la U R L oficial. Tam bin podem os e sp ecificar una d escrip ci n de la
app y v o lv e r a d etallar todas sus ca racterstica s en todos los idiom as
que deseem os hacerlo, a travs del apartado locales y del ID del idiom a
es, en, etctera.

D efau ltjocale nos perm ite establecer el idiom a p rincip al con el que
la app se ejecutar, y, en el apartado permissions, podrem os establecer la
fun cio nalid ad de hardw are o sistem a operativo que la app utilizar.
Si este apartado queda en blanco, significa que se u tiliz a r n todas
las caractersticas del sistem a o p e rativo y del hardw are.
D A S H B O A R D DE FIR E F O X OS
D e sd e el Panel de control d e Firefox O S p o d e m o s no solo c a rg a r ap p s d e s d e su c a rp e ta con ten ed o ra,
sino tam b in, a tra v s de una U R L, validarla, ed itar el archivo m anifestw ebapp, y actu alizar e l p a c k a g e del
sim ulador si c a m b ia m o s algu n o en e l pro yecto , e n tre o tra s co s a s.
www.redusers.com
317
Por ltim o, el apartado fullscreen nos in d ica si la app se ejecutar

o no a p a n ta lla com pleta.
F ig u ra 5. Una aplicacin web com o Green&Berries y m a n ife s t .webapp

transformarn esta WebApp en una app nativa de Firefox OS.
Testear nuestro desarrollo

Solo nos queda testear la ap p en el sim ulador. Para ello, debem os
in gresar a este y, desde la secci n Dashboard, presio n ar el botn Aadir
aplicacin empaquetada. Buscam os, a co ntinuaci n, la ruta de la carpeta

de nuestra W ebApp y p resio n am o s Seleccionar.
F ig u ra 6. Si creamos correctamente el archivo m anifest.w ebapp,

nuestra app aparecer en el dashboard de Firefox y se instalar
en el simulador o dispositivo de desarrollo.
www.redusers.com
318
USEFtS
Nuestra app se in stalar en Firefox OS y se ejecu tar sin problem a,

tal com o se m uestra en la siguiente figura.
F ig u ra 7. Nuestra aplicacin ya se encuentra instalada en

Firefox OS y corre de manera independiente al navegador web.
Distribucin de aplicaciones
Por ltim o, para d is trib u ir nuestras ap licacio nes en M ozilla
M arketplace, debem os in scrib irn o s com o d e s a b o lla d o re s de la
p lataform a. Y para subir nuestras ap ps debem os crear, p reviam ente,
un a rch ivo Zip con la carp eta que co n tien e todo el proyecto.
M ozilla e n via r nuestra app para su co rresp o nd ien te certificacin
y, al cabo de unos das, recibirem o s el OK de la im p lem en taci n
de esta d entro del M arketplace, o el co rresp o nd ien te KO con los
co m entario s que in d ica n por qu fue rechazada nuestra app.
Si q uerem os d is trib u ir ap licacio nes por p rim era vez, M ozilla
M arketplace es la m ejor opcin para in d u cirn o s en el fascinante
m undo del d esarro llo de las ap licacio nes m viles, tanto por su
sim p leza y costo cero, com o por otras tantas bondades prop ias
de la p lataform a.
www.redusers.com
DESARROLLO WEB PARA DISPOSITIVOS MVILES

Este lib ro est d irig id o a q uienes buscan a cercarse a la p rogram acin de soluciones para el cre cien te ecosistem a de
ta b le ts y sm artph on es. En cada c a p tu lo se aborda un d esarrollo w eb con acceso a c a ra c te rs tic a s propias de los s is te
m as o p e ra tivo s m viles iO S, A n d ro id , W indow s Phone, B la c k B e rry y Firefox OS. Entre otros proyectos, invocarem os lla m a
dos te le fn icos y vid eocon feren cia s desde una w eb, y aprovecharem os la s ca p a cid a d e s de g e o loca liza cin y soluciones
que in tera ct en con redes socia les. Finalm ente, aprenderem os a c o n ve rtir una w eb m vil en una a p lica ci n n a tiva .
A
*
La integracin de las apps con el hardware

de los equipos es casi infinita. El nico lmite
es nuestra imaginacin como desarrolladores.
77
* EN ESTE L IB R O A P R E N D ER :
P l a t a f o r m a s y t e c n o l o g a s m v ile s : sistem as operativos mviles. Diferencias
entre WebApp. App nativa y App hbrida. Tecnologas de la web actual.
H T M L 5 : navegadores, sistem as operativos y motores de renderizado.
Declaraciones y metatags. HTML5 para aplicaciones mviles. Geolocalizacin.
j Q u e r y M o b ile : definicin. Uso local o remoto. Configuracin de una WebApp.
i W
Componentes y estructura.
W e b A p p s p a r a iQ S y A n d r o id : diseo. Prestaciones de Safari y de Google
Chrome mobile. Visualizacin de una WebApp como nativa.
S O B R E E L AUTO R
F e m a n d o L u n a es a n a lis ta fu n c io n a ! de
A l m a c e n a m i e n t o lo c a l y a p l i c a c io n e s o f flin e : Local Storage y Session Storage.
s is te m a s y c u e n ta c o n u n a d ip lm n a tu ra
Creacin de un formulario. B ases de datos Web S Q L
e n d e s a rro llo d e a p lic a c io n e s p a ra

d is p o s itiv o s m viles p o r la UTN.
P h o n e G a p : arquitectura. Integracin con Dreamweaver. Transformacin
Es c o la b o ra d o r de la s re v is ta s Power
de una WebApp en hbrida.
y U sersy a u to r de Visual Basic 2010,

p u b lic a d o p o r esta e d ito ria l.
P r o g r a m a c i n n a t iv a p a r a B l a c k B e r r y 1 0 y W in d o w s P h o n e : herramientas
de desarrollo. Emulacin de WebApps en la computadora con Ripple Emulator.
N I V E L D E U S U A R IO
In te r m e d io
BBC
OQp
C A T E G O R A
D e s a rr o llo / In te r n e t / M o b ile
Eli
IS B N : 9 7 8 - 9 8 7 - 1 9 4 9 - 8 3 - 0
- i
RU
R E O U S E R S .c o m
P R O F E S O R E N L N E A
E n n u e stro s itio p o d r e n c o n tra r n o ticias
A n te c u a lq u ie r co n s u lta t c n ic a re la cio n a d a
re la c io n a d a s y ta m b i n p a rtic ip a r de la c o m u n id a d
con e l lib ro , p u e d e c o n ta c ta rs e co n n u e stro s
de te c n o lo g a m s im p o rta n te de A m ric a L a tin a .
expertos: p ro fe s o r@ re d u s e rs .c o m .
9871 949830

Desarrollo Web para Dispositivos Móviles PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desarrollo Web para Dispositivos Móviles PDF

Uploaded by

Copyright:

Available Formats

DESARROLLO WEB

por Fernando Luna

Desarrollo w eb para dispositivos m viles

VISUAL BASIC 2010- M anual del programador.

Fernando Ornar Luna

PLATAFORMAS Y TECNOLOGAS MVILES

n o s p e rm itir n d e s a r ro lla r s o lu c io n e s p a r a las

d e lo s d is p o s itiv o s m v ile s , lo s p rin c ip a le s

INTERACCIN CON EL HARDWARE

d e s a r ro lla r una w e b m vil e n los s m a r tp h o n e s

FUNDAMENTOS DE JQUERY MOBILE

m v ile s d e s e n te n d id a s del c o n te n id o e s t tic o .

n a v e g a d o r d el clien te. A q u n o s in tro d u cirem o s en

WEBAPPS PARA iOS

BB10, WINDOWS PHONE

A g ru p a m o s aqu la s b a s e s p a ra utilizar las

h e rra m ie n ta s de testing q u e o fre c e n los diferentes

fa b ric a n te s d e d isp o sitivo s m viles. E s to n o s

m v ile s p a r a q u e fo rm e n p a rte d e l e s c rito rio

perm itir p ro b ar lo s d esarro llo s en las distintas

d e O S c o m o una a p lic a c i n n ativa .

WEBAPPS PARA ANDROID Y OTROS

Ven tajas y desventajas entre platafo rm as

Tecn olog as de la W eb a c tu a l............................................ 35

In fo rm a ci n com plem entaria............................. ................. 7

A c tiv id a d e s ............................................... ...............................44

In tro d u c c i n a la W eb m v il............................. - ..............14

E l mundo mobile w e b ................................................. 19

P la ta form a s m vile s..............................................................22

D eclaraciones y m eta tags....................................................50

Estructu ra d e un documento H T M L 5 ...................... 53

C undo se conjugaron web y mobile w e b ?

A p lic a cio n e s m v ile s ............................................................ 30

H T M L 5 para aplicaciones m vile s

Componentes < Inp u tTyp e> .......................................56

G e o loc a liza ci n .......................................

Elem entos p ara el e je rc ic io .......................................64

Apps n a tiva s................................................................ 32

A c tiv id a d e s ............................................... ...............................72

jQ uery M o b ile = jQuery, o n o ? ................................ 75

Configuracin de una W e b A p p con jQuery M obile ..79

de lo s d ispositivos m v ile s ............................................... 144

Interaccin con e l sm artphone o t a b le t ................ 147

Com unicacin a travs de redes sociales............... 156

C om p ortam ien tos de los eventos

segn el d is p o s itiv o .............................................................165

In vo c a r llam ados y m ensajes de t e x t o ........................ 168

R esu m en................................................................................. 173

Navigation B a r .......................................................... 106

A c tiv id a d e s ............................................................................ 174

Listas ........................................................................ 109

A c tiv id a d e s ............................................................................ 142

E je rc ic io p r c tic o : alm acenam iento lo c a l............... 225

Lenguajes de program acin

Sistem as operativos que soportan W e b S Q L

M anejo de sentencias W e b S Q L .............................230

L a im portancia de lo d in m ico ............................... 176

In d exed D a ta b a se ................................. .............................. 233

La s plataform as m s com unes................................ 177

A p lica cio n e s o fflin e ...............................

Cmo descargar una W e b A p p a undispositivo

Base de d atos........................................................................ 187

C re ar nuestra prim era base de datos..................... 190