You are on page 1of 319

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

P R E L IM IN A R 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

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

* 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

P R E L IM IN A R E S

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

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

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

P R E L IM IN A R E S

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

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

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

P R E L IM IN A R E S

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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");

)
if (err.code = = 3 ) {

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

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

<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) {


if (err.code = = 0 ) {
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

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

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

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

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

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

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

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

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:

< !D 0 C T Y P E htm l>


<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

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

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

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

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

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

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

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

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

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

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

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

< 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

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

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

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

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

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

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

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

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

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

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

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

< 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&aacute;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

3. FUNDAMENTOS DE JQ UERY MOBILE

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

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

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

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

< 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&eacute;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

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

</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

3. FUNDAMENTOS DE JQ UERY MOBILE

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&acute;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

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

< 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

3. FUNDAMENTOS DE JQ UERY MOBILE

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&uacute;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

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

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

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

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:

d D O C T Y P E htm l>
<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 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

< 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

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

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 <!-- S crip t para enviar correo

electrnico~ > con la s ig u ie n te fu n ci n :

www.redusers.com

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

Urtt: '" Hh.ii


FA R V IN G

on*oUvo J t con a c to

fpioanin*9ii*tcai4

Z
0

"iMirwt

na

suwm

C2 )

o 1

g)

r a

(g

C2 D

m n
b n

23

Figura 13. El formulario con el atributo p l a c e h o l d e r activo y con el foco


en el campo e-mail, que activa el teclado correcto. Por ltimo, al escribir
la direccin de correo electrnico, se elimina el texto de placeholder.

<script typ e = "te x t/ ja v a s c rip t">


var em ail = d o c u m e n t.g e tE le m e n tB yld ('c o rre o ');
var asunto = d o c iim e n t.g e tE le m e n tB yld ('a su n to ');
var msj = d o c u m e n t.ge tE le m e n tB yld ('m e n sa je ');
function se n d M a ilO {
var asunto = d o cu m e n t.ge tE le m e n tB yId ("a su n to //).valu e;
var mensaje = d o cu m e n t.g e tE le m e n tB yId (um e n sa je ").
valu;
var link = " m a ilto :in fo @ gre e n b e rrie sfa rm in g.co m "
+ "? c c = "+ e m a il
+ "& s u b je c t= "+ a s u n to .re p la c e (" " , " % 2 0 " )
+ " & b o d y = " + m e n s a je .re p la ce (" " , " % 2 0 " )
w in d o w .loca tio n .h ref = link;

}
</script>

Esta fu n ci n crea u n a serie de v a ria b le s en su in icio :

var email, var asunto y var m sj. Estas v a ria b le s o b tie n e n , m e d ia n te

www.redusers.com

102

USEFtS

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

docum en t.getE lem en tB yld , el v a lo r de los re sp e c tiv o s cam pos


d e l fo rm u la rio . En tre p a r n te sis, e sta b le ce re m o s qu cam p o s
d e l fo rm u la rio d eb e id e n tific a r p ara to m ar su valo r. Luego
a rm a re m o s el strin g que e je c u ta r el

h y p e rlin k m a ilto:, e x iste n te en H T M L desde


su s in ic io s .

A L A R M A R E L S T R IN G

Po r ltim o , al a rm a r el s trin g u tiliz a m o s


la fu n ci n rep la ce() e x isten te, p ro p ia de cada

U T IL IZ A M O S LA

v a ria b le cre a d a en Ja v a S c r ip t, que reem p laz a

F U N C I N R E P L A C E O ,

los e sp a c io s que p ued an e x is tir en el asu n to

D E CADA V A R IA B L E

y cu e rp o del m e n sa je p or el ch a r %20,
e q u iv a le n te a un e sp a cio en H TM L.

CREADA EN J S

A s, el s trin g q u ed a co n fe ccio n a d o
de la sig u ie n te m anera: m a ilto:info@

greenberriesfarm ing.com ?cc=em ail& subject=asunto


&body=m ensaje.

u tev o cir c o m *

G R E E .N B z R R E S

FAFtWlNG

tT#oonl(nsinigmu com
c o r u

H o la , c v a o t o sto o > f u m i n o q u e
io m p r a
fiu io o n u t m i c o '

a praoueio

(4ob, i-uitu ear- dockmi*?*que deba


ecnprar 0 frutoi natutXmT

+ -

Enviar

z
0
Hmmim

0
Pn-lurto.

* t >

*ia

deb*

*-=>

(C 3

<

III
ni m

4-*

a*

Figura 14. Al presionar el botn E n v ia r , la WebApp ejecutar el cliente


de correo por defecto. Si hay ms de uno, el usuario deber elegir.
Por ltimo, se cargar el formulario con los cam pos completos.
N uestra W ebA pp se o cu p ar de in v o c a r el clie n te de correo
e le ctr n ic o que el d is p o s itiv o tien e co nfigurado . En caso de haber
m s de uno, el u s u a rio del e q u ip o ser quien elegir a tra v s de cul
se e n via r el m ensaje.

www.redusers.com

103

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

Figura 15. Cualquiera sea el dispositivo, la respuesta de la funcin


send M ail ( ) se com portar correctam ente, cargando los campos
automticamente para luego enviar el mensaje de correo electrnico.

jQ u e ry M o b ile n o s a b re un a b a n ico de p o sib ilid a d e s p a ra d is e a r a p lic a c io n e s w e b m v ile s co m o


tam b i n a p lic a c io n e s hbridas. N o s a y u d a a m an te n er la m ism a e s tru c tu ra en to d a s la s p g in a s sin
im p o rta r el n a v e g a d o r w e b , g e n e ra e fe c to s de tra n s ic i n en tre p g in a s e inclu so re s u e lv e m u ch o s
lla m a d o s a fu n cio n es de o tro s len g u a jes d e m a n e ra tra n s p a re n te , g ra c ia s a la in teg raci n c o n A JA X
que trae. R e c o m e n d a m o s se g u ir ex p lo ran d o p eri d ic a m e n te la w e b de jQ u e ry M o b ile p a ra en te ra rn o s
de la s ju g o s a s n o ve d a d e s p a ra im p le m e n ta r en n u e stro s d esarro llo s.

www.redusers.com

104

USEFtS

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

Actividades
T E S T DE A U TO E V A L U A C I N ______________________
1

Qu es jQ u e ry Mobile?

Qu librera adicional necesita jQ uery Mobile para funcionar?

Hay alguna manera de poder utilizar jQuery Mobile sin instalarlo en nuestro
servidor?

Cmo se com pone generalm ente una pgina creada con jQ uery Mobile?

Cuntos tipos de input text podemos identificar?

Para qu se utiliza el atributo data-role=button?

Qu requiere un Form ulario para funcionar com o tal?

Cmo puedo utilizar teclados personalizados en los dispositivos mviles?

Indique el tipo de input type que permite ingresar slo nmeros.

10

Qu uso podem os darle al atributo data-role= Dialog ?

E JE R C IC IO S P R C TIC O S_________________________
1

Desarrolle un sitio web con las siguientes secciones: Inicio, Institucional,

Servicios. Contacto, donde cada seccin sea una pgina diferente. Luego
incluya textos de ejemplo en cada una.

Cree un formulario con los tipos de campo text, email, password. textarea.

Incorpore un botn de enviar y un botn de limpiar campos.

Si tiene un sitio web propio, modifique el ejemplo de envo de e-mail con la


funcin de e-mail que le provee su hosting.

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

www.redusers.com

* n

\\\\\\\\\\\\\\\

///////////////

Componentes de
jQuery Mobile
En el c a p itu lo a n te rio r c o n o c im o s las bases n ecesa ria s para
im p le m e n ta r jQ u e r y M o b ile en n u e s tro d e s a rro llo m o b ile w e b .
A h o r a n o s in tro d u c ire m o s an m s en este p o p u la r fra m e w o rk
p a ra p o d e r sa c a r p ro v e c h o al m x im o d e los c o m p o n e n te s
p re d is e a d o s qu e JQ M nos o fre c e , d e n o m in a d o s w id g e ts , y asi
p o d e r e x p lo ta r su fu n c io n a lid a d al m x im o , e s tru c tu ra n d o
una w e b m v il d e m a n e ra tal q u e n u e stro s p ro y e c to s
b a la n ceen a rm o n io s a m e n te su e s t tic a y fu n c io n a lid a d .

7 1Z1

Componentes

106

* Resumen

Ejercicio integrador

128

Actividades

14]

142

106

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

Componentes
En jQ u e r y M obile d efinim o s com o co m p o n en te s a aq u e llo s objetos
que co n fo rm a n el co n te n id o de una pgina. Este fra m e w o rk nos
p ro vee de un set de co m p o n en te s o w id g e ts que pod em os u tiliz a r
p ara d iv e rs a s fu n cio n a lid a d e s en esta p latafo rm a.
E n tre los w id g e ts m s p o p u la re s p o d e m o s d e s ta c a r los
s ig u ie n te s : listas, vietas, c a ja s de texto, etiqu etas, bo to n es,

c o n tro l c a le n d a r io y slid er. T a m b i n e x is te n o tro s c o m p o n e n te s


que nos p e rm ite n d a rle v id a y fu n c io n a lid a d a u n a p g in a y que,
a d em s, h a ce n q ue esta lu z ca p o r ig u a l en to d as las p la ta fo rm a s
d o n d e es v is u a liz a d a .
D ep e n d ien d o de la fu n ci n o e stru c tu ra que debam os a rm a r
en n u e stra web m vil, pod rem os sacar p ro ve ch o de cad a uno de los
co m p o n en tes de JQ M para d e s a rro lla r m ens fu n cio n ale s, estab lecer
filtro s au to m tico s en p a n ta lla s con m uchos datos y a p ro v e c h a r las
d iv e rs a s va ria n te s que un m ism o co m p o n en te nos ofrece.
A co ntinuaci n, listarem os los p rin cip a le s co m p o nentes que
podem os u tiliz a r en jQ u e ry M obile y verem o s un e jem p lo de cada uno.

Navigation Bar
En el Captulo 3, repasam o s el co n ce p to b sico del uso del
co m p o n en te NavBar. V im os cm o cre a r b otones, ag reg arles un icono
o un texto, y c m o e s tru c tu ra r la b arra de h e rra m ie n ta s en el extrem o
s u p e rio r o in fe rio r de la p a n ta lla . Veam os, a co n tin u a ci n , qu otras
o p cion es nos o frece este m a ra villo so com p onente.

Botn activo
En el e je rc ic io re a liz a d o de G reen & B erries Farm ing en el cap tu lo
anterior, estab le cim o s que, cad a vez que ingresam o s a u n a seccin
d el s itio w eb m v il, el b ot n de d ich a secci n quede in h a b ilita d o :

Disabled. Esto p erm ite e v ita r que el usuario pulse n u e vam e n te el botn
y que la pgina se refresque.
En la m a y o ra de las pginas web de hoy, el re fre s c o de pgina no
es un p ro b lem a cuand o naveg am o s p or Wi-Fi o a tra v s de una LAN,
pero, cu an d o el u su a rio u tiliz a su d isp o s itiv o m vil m e d ian te el pack

www.redusers.com

USEKS

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

107

de datos 3G o sim ilar, estos datos generalm ente


tie n e n u n co n sum o m ensual lim itad o y, por lo

EV IT A R E L R E F R E S C O

tanto, el exceso se le fa ctu ra ap arte al cliente.

IN N E C E S A R IO D E UN

Por tal m otivo, si podem os e vita r el refresco

SITIO W E B P R E V IE N E

in n ecesario de una pgina, no solo ejercem os una


buena p r ctica com o program adores, sino que

L A P R D ID A DE LO S

tam bin evitam os la p rd id a de datos ingresados

DATOS IN G R E S A D O S

en un fo rm u lario e im p ed im o s que el usuario


consum a in n ecesariam ente de su pack de datos.
O tra v a ria n te que pod em os a p lic a r en la
p r ctica de n ave g aci n m ed iante u n co m p o nente

NavBar es la de m arcar el botn co rre sp o n d ie n te a la secci n


en la cu a l nos en co n tram o s com o botn activo.
Esto se re a liz a de la sig u ie n te m anera:

< div d a ta -ro le = "n a v b a r" d a ta -p o s itio n = "fixe d ">


< ul>
< l x a h r e f = " # " d a ta -ic o n = "s ta r" cla s s= "u i-b tn -a c tive u i-state p e rs ist"> H is to n a c /a > c /li>
< l i x a h re f= "p ro d u c to s .h tm l" d a ta -ic o n = "c h e c k "> P ro d u c to s c / a x / li>
c l i x a h re f= //# // d a ta -ico n = "se a rch "> S h o w ro o m c/a > c/l>
c l i x a h r e f = " # " d a ta -ic o n = "in fo "> C o n ta c to c /a > c/l>
c/ul>
c/di v>

A l cargar la pgina H T M L co rre sp o n d ie n te a la d ire cc i n que


deseam os d ireccio n ar, re em p la z a m o s la U RL de la pgina p or el
ca r cte r # y agregam os, en las p ro p ied ad e s del botn, el atrib u to

class= ui-btn -active ui-state-persist , lo que nos p e rm itir resa lta r


el botn co rre sp o n d ie n te a la secci n con o tro color.

N A V IG A T IO N BAR Y P A N E L
Al m om en to d e realizar una w e b m vil, p o d e m o s e s ta b le c e r c o m o b uena p r ctica la c re a c i n de un men
co n el w id g et P a n e l , y de una b arra d e n aveg aci n c o n el w id g et N a v ig a tio n B a r, intercalando la visualizacin
del p rim ero si la p g in a w e b se c a rg a en una tab let, o del segun d o , si e s vista en un sm artphone.

www.redusers.com

108

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

~GF
h ;'

_^c O
A QHfcfcNBt.MHfcti M

a
F A F M IN G

F A H M IN G

G R K N B : * n iE S

F A flV lN G

W
lo .m iJ .m d cantar

s l " i l U n i f nr-imj

Kun*a:urr(iiriar tvKmu n j maiucrv

lU K -xn. y d .lin ii.u -. (lii . . . . . ( m ir u u>*uIim

-M <tc o n W m u |i
( ! * Ileo U W B di C < M W <IUlC

M*

lOiiilx-- ( nuMaftafcM>*1*w*

ic to s O rg n ico s

pene c a n n u r M m :k cfitod <c u o c ^


lu iU B O iilia qui cuin|iun con
niijOiic^
p w i < la CiNraiiiB iiuaaalnsu n om biadM f

tu a t n *

I^^KJ*^tthiZk4l

IV^dTf flV>
P ro d u c to s H d
r i a u i : i Ijiu n a ta llN O C m u n iu iM

p-nan w

01J ? l f l

M iHni .na i

Figura 1. Nuestro proyecto Green&Berries Farming


con su Navigation Bar modificada.

Barra de navegacin siempre visible


Si p rob am os nuestro e je m p lo a n te rio r desde un telfon o m vil
o tab le t y p ulsam os sobre algn lu g ar del rea de n ave g aci n que
no posea links, una vez cargad a la seccin, n o tarem o s que la barra
de h erram ie n ta s se o cu lta a u to m ticam en te . Si vo lv e m o s a p ulsar
en un lugar lib re, la b a rra de h e rra m ie n ta s a p are ce r o tra vez.
Si q uerem o s e v ita r co n fu sio n e s a los u su ario s del sitio web,
p o d em o s h acer que la barra de h e rra m ie n ta s quede s ie m p re v is ib le .
Para e llo , d eb em os in c o rp o ra rla a la secci n <Header> o <Footer>,
d ep e n d ie n d o de la u b ica ci n que le asig n am o s en pantalla.
Dado que, en n u e stro caso, u tiliz a m o s NavBar e n el pie de pgina,
y no un co m p o n en te F o o t e r , ve re m o s cm o in co rp o ra rlo fijand o la
b arra de h erra m ie n tas all.

< d iv d a ta -ro le = "fo o te r">


< d iv d a ta -ro le = "n a v b a r">
<ul>
d i x a h r e f = " # " cla s s= "u i-b tn -a c tive u i-sta te -p e rs ist"> H is t o r ia d
a x / li>
d i x a h re f= //pro d u ctos.h tm r/> P ro d u c to s < / a x / li>
d i x a h re f= "s h o w ro o m .h tm r> S h o w ro o m < / a x / li>
d i x a h re f= //con tacto.htm l,/> C o n ta c to < / a x / l>
< /u l>

</div>
</div>

www.redusers.com

E2 S2 Z 3

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

109

Listas
El co m p o n en te L i s t es un w id g et que p erm ite fo rm a te ar una
lista d eso rd en ad a de te m s a tra v s del a trib u to data-role=listview.
El a trib u to se encarga, a tra v s de la lib re ra JQ M , de d arle un form ato
am igable, el cual har que una sim p le lista se ve a com o un listad o de
item s p ro fesio n al.

<dv d a ta -ro le = "c o n te n t" data-them e= //d/,>


<h4 a lg n = "c e n te r"> T o p Ten libros de program aci& oacute;n</h4>
< p > < / p >

<ul data-role=//lstview//>
c l i x a h r e f= "# "> V is u a l B a s ic c / a x / l>
< l i x a h r e f= "# "> V is u a l C+ +c/a> c/li>
d i x a h re f= //# //> V isu a l C # c / a x / li>
c l i x a h r e f = " # " > P H P < / a x / l>
c l i x a h r e f= "# "> J a v a S c rp t< / a x / li>
c l i x a h r e f = " # " > H T M L 5 c / a x / li>
c/ul>

c/div>

R e e m p lazan d o el carcter # en la se n te n cia ca href= #>, podem os


asig n a rle u n h y p erlin k a cad a itemlist y, as, e n v ia r al u su ario hacia
o tra URL. Si no agregam os nada, el ico no arrow d erech o no ap arecer.

Listas form ateadas


A estas sim p le s lis ta s p o d em o s d a rle s un
asp ecto p ro fe sio n a l, a p lic n d o le s un fo rm ato
p ara que no m u estren solo texto. Veam os
las o p cio n e s de las que d isp o nem o s.

P A R A Q U E L A S L IS T A S
NO M U E S T R E N SO LO
TEXTO , P O D EM O S
A P L IC A R L E S UN
FO RM ATO

Bordes redondeados
A esta lista le p od em os a p lic a r un borde
redo n dead o para que tenga e stilo y se despegue
del resto del co n te n id o de la p gina, en caso de que agreguem os
ms texto e im genes. Sim p le m e n te , debem os agregar el atrib u to
data-inset= true .

www.redusers.com

110

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

<ul d a ta -ro le = "lis tv ie w " d ata-i n s e t= "tru e ">


< l i x a h re f= "# "> V is u a l B a s ic < / a x / li>
< l i x a h r e f= "# "> V is u a l C + + < / a x / l>
d i x a h re f= //#//> V isu a l C # < / a x / li>
< l i x a h r e f = " # " > P H P < / a x / li>
d i x a h r e f= "# "> J a v a S c rip t< / a x / l>
< l i x a h re f= //#//> H T M L 5 < / a x / l>
</ul>

Lista numerada
Los tem s que co m p o n en un Listview pueden ser n u m e ra d o s de
fo rm a co n s e cu tiva . Para e llo , d eb em os m o d ificar la a p e rtu ra de una
lista, ca m b ian d o su v a lo r o rig in al <ul data-role...> por col data-role...>.

Too T K n m *

T a Ton I f t m *

IC**
Vrt uaf C

I C

Y m tC f

MTMi

Figura 2. ListView clsico, ListView formateado y lista numerada son


algunos de los estilos que jQuery Mobile nos propone para listar contenido.
A co n tin u a ci n , crearem o s un e jem p lo de lista s num eradas a p a rtir
de una serie de lib ro s tcnicos:

<h3 > TopTen libros de program acin</h3>

www.redusers.com

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

c o l d a ta -ro le = " lis tv e w ">


< li> V isu a l Basc</I>
< li> V su a l C+ +< /li>
< li> V is u a l C#</l>
< li> P H P < / li>
< li> Ja va S crip t< /l>
< I> H T M L 5 < /I>
< li> C S S 3 < /l>
< li> Phonegap< /li>
< li> O b je ctiv e C</li>
< l> D e sa rro llo A n d ro id con Java</li>
</ol>

Lista dividida
Los L is t lt e m s pueden a g ru p a r su co n te n id o de una form a
e sp ecfica que p o d em o s d rse la no so tro s com o p rog ram ad ores.
Para e llo , debem os u tiliz a r <data-role= listd ivid e r > en la creaci n
de la lista y esp e cificar el tip o de ag ru p am ie n to que vam os a darle.

<ul d a ta -ro le = "lis tv ie w " d a ta -in s e t= "tru e ">


d i d a ta -ro le = "lis t-d iv id e r"> In fo rm tic a < / li>
< li> W in d o w s 7</li>
< li> W in d o w s 8</li>
< l> U b u n tu L in u x 14.04</li>
< l> M a c 0 S -X < / li>
< li> M ic ro s o ft O ffice 365</li>
< li d a ta -ro le = "lis t-d iv id e r"> P ro g ra m a c i n < / l>

<li>PHP</li>
< li> Ja va S c rip t< /l>
< li> H T M L 5 < / li>
< l> C S S 3 < /li>
d > P h o n e g a p < /li>

</uI>

www.redusers.com

112

E S 3 Z 3

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

Autodividers
Si n ecesitam o s g e n erar un L istV ie w con d iv is i n a u to m tica del
co n te n id o p ara lis ta r un g lo sario tcn ico o rd en ad o a lfa b tica m e n te y
d iv id id o p or letra, por ejem p lo , pod em os u tiliza r, d en tro de ListView ,
el a trib u to <data-autodividers= tru e >.

<ul d a ta -ro le = "lis tv ie w " d a ta -a u to d iv id e rs = "tru e ">


< li> App end</li>
< li> A s new</li>
< li> B oolean< /l>
< li> Catch</li>
< li> C u rre ncy< /li>
< li> D e cim al< /li>
< li> D im < /li>
< li> D o Loop</li>
< li> D ouble< /li>
< li>else</l>
< li> e lse If</I>
< li> E rr< / li>
< li> If< / l>
< li> In te g e r< /l>
< li> M essageB ox< /li>

<li>Private</li>

</ul>

A G R U P A M IE N TO DE TEM S
S i el tipo d e d esarro llo w e b que realizam o s requ iere visualizar una lista d e tem s ex ten sa, e s fundam ental
e s ta b le c e r un punto d e se p araci n entre los tem s, a tra v s del u s o d e los atributos A u to D iv id e rs o

D a ta D iv id e r s . D e e s ta fo rm a , la experiencia d e usuario al m om en to d e utilizar la W e b A p p se r superior,


y a q u e p resen tar una m e jo r visualizacin de la inform acin m o strad a.

www.redusers.com

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

l i

[ t

2326|

Capitulo 04

t?

m 23

18

Captulo 04

M o b ile W eb

Figura 3. D a ta D i v i d e r s y A u t o D i v i d e r s son dos


atributos tiles para el correcto agrupamiento de tems.

Filtrar Listltems
Puede p asar que u tiliz a n d o ListV ie w se nos p rese n te u n a lista
p ro lo n g a d a de te m s a v is u a liz a r y no tengam os m an era de agrupar
el co n te n id o con autodividers o list-d ivide r. En este caso, para que
el u su ario de la a p lic a ci n no deba tener que h acer un co nstante
scro ll sobre la p a n ta lla , pod em os fa c ilita rle la tarea a p lic a n d o , en el
ListV ie w , el a trib u to data-filter= tru e .
Veam os un e je m p lo a co n tin u aci n :

<ul d a ta -ro le = /,listvie w // d a ta -filte r = "tru e ">


<li> Append</l>
< li> A s new</l>
< l> B oolean</li>
< li> Catch</li>
< li> C u rre n cy< /li>
< l> D ecim al< /li>

www.redusers.com

114

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

< li> D im < /li>


< l> D o Loop</l>
< li> D oub le< /li>
< li> else< /li>
< li> e lse If</I>
< l> E rr< /li>

< li> In te g e r< /li>


< li> M essageB ox< /li>

</ul>

El atrib u to data-filter nos p erm ite agregar, en el e n cab ezad o del


w id g et ListV ie w , un cam po del tip o <input type search> que o ficiar
de cam p o de b sq ueda. Al e s crib ir una o ms letras en l, jQ u e r y
M obile a p lic a r un filtro sobre todos los L is tlte m s co in cid e n te s
y s lo m o stra r estos en pantalla.
Si q uerem o s e lim in a r el filtro a p lica d o , sim p le m e n te borram os
el texto ingresad o o p re sio n a m o s sobre el botn que ap arece sobre el
extrem o d erech o del input type, y el texto se e lim in a r y restab lecer
el Listlte m con todo su co ntenido.

F ig u ra 4. El atributo d a t a - f i l t e r es una utilidad que simplifica


complejas funciones que en otros medios haran lenta la web dinmica.

www.redusers.com

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

Buttons
Los b oto nes tam b in son parte de jQ u e ry M obile. M od ificado s
s ig n ifica tiva m e n te si los co m p aram o s con un b ot n estn d ar creado
con HTML, s irv e n p ara u n s in fn de situ a cio n e s d en tro de una
W ebApp. El w id g e t Button, d entro de JQ M , se puede u tiliz a r de dos
fo rm as d ife re n te s. La p rim e ra es in vo can d o una U RL d eterm in ad a
o u n a pgina w eb a tra v s de su link:

< a h r e f = " m i u r L h t m l " d a t a - r o l e = " b u t t o n " > M i lin k < / a >

Y la segunda es crean d o el w id g e t Button, y que este in vo q u e a una


fu n ci n Ja v a S c rip t:

< d v d a t a - r o l e = //b u t t o n // o n c l i c k = " m F u n c i o n J $ ( ) " > M i lin k < / d iv >

Al igual que co n el resto de los w id g e ts de jQ u e r y M obile que


rep asam o s hasta ahora, el o b jeto b u tto n nos p erm ite p e rs o n a liz a rlo
en base a n u e stra n ecesid ad . Veam os, a co n tin u a ci n , qu a trib u to s
pod em os esp ecificarle.

Deshabilitar botn
M ediante la clase ui-disabled, p o d em o s e s p e cifica r que un w id g et
Bu tto n ap arezca d e sh a b ilita d o p or defecto. Luego pod em os h a b ilita rlo
a tra v s de una fu n ci n o even to creado en Ja v a S c rip t. Veam os un
ejem plo:

< a h r e f = " m u r L h t m l " d a t a - r o l e = " b u t t o n " c la s s = " u i - d s a b l e d " > M lin k < / a >

Si p o ste rio rm en te d eseam o s crear u n a fu n ci n que in d iq u e que,


luego de d eterm in a d a co n d ici n , el b ot n d e sh a b ilitad o p or defecto
deba cam b iar su estado, tenem o s que agregarle un id p ara p o d er

www.redusers.com

116

l/SERSl

4. C O M P O N E N T E S

D E J Q U E R Y M O B IL E

id e n tifica rlo f cilm e n te desde el cdigo Ja v a S c rip t. El c d ig o quedar


de la sig u ie n te m anera:

<a h re f= "m iu rl.h tm l" d a ta -ro le = "b u tto n " id = "m iB u tto n L in k " c la s s = "u id is a b le d "> M i lin l / a >

Minimizar el tamao
M E D IA N T E UN
A T R IB U T O , P O D E M O S
M IN IM IZ A R E L
TA M A O E S T N D A R
DE UN BOTN

En m uchos casos, la p a n ta lla de un


d is p o s itiv o m vil requiere v is u a liz a r un
im p o rta n te n m ero de o bjeto s y. dado que
estas p a n ta lla s son s ig n ifica tiva m e n te ms
p eq u e as que las de los m o n ito res, debem os
te n e r ate n ci n en la cre aci n de estos objetos.
Bu tto n nos p erm ite, m e d ian te el atrib u to
d a ta -m in i= t r u e ,,f m in im iz a r el tam ao estnd ar

que trae p or d efecto. Veam os cm o hacerlo


en el sig u ien te cdigo:

<a h re f= //m iu rl.h tm r/ d a ta -ro le = "b u tto n " d a ta -m in i= "tru e "> M i link</a>

Para re stau ra r su tam ao, sim p le m e n te e lim in a m o s este atrib u to


o cam b iam o s el estado Tru e p o r False.

U TILIZ A C I N DE B O TO N E S E N FO R M U LA R IO S
El uso de botones en un form ulario siem pre se limita a las funciones d e E n v ia r, L im p ia r c a m p o s
o C a n c e la r . En este a specto, deberem os contem plar la agrupacin de lo s b otones mediante
data-role= controlgroup en las pantallas que son am plias, com o las d e una tablet. En las pantallas

de los telfonos m viles, es conveniente agru parlos de form a vertical.

www.redusers.com

D E2 Z 3

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

117

Capitulo 04

Jq u e r y M o t ile B u ll n

B o l o n s im p le

Boion drshablrtado

ftnvn m m m u i r f n

Figura 5. Esta
pgina nos muestra
el widget B u tto n
en su formato

M o b d f W ck

estndar, deshabilitado
C Z31

y reducido en altura.

Form buttons
Los fo rm u la rio s en H T M L son p rim o rd ia le s , en general, para
co m p le ta r datos que luego sern e n via d o s p or e-mail o gu ard ad o s
en una base de datos. Si co m b in a m o s JQ M con un Form, d eb em os
tener en cu en ta que, al cre a r el input type= button , este asu m ir la
e sttica de los b oto nes de jQ u e r y M obile.
Si deseam os e v ita r esto y v is u a liz a r un o b jeto b u tto n tal com o se
ve o rig in a lm e n te en H TM L, sim p le m e n te d eb em os a g reg ar el atrib u to
d a ta -ro le = n o n e en la creacin.

c in p u t typ e = //button// v a lu e = "E n v ia r" d a ta -ro le = "n o n e ">

Agregar un icono
Al igual que el w id g et N avig a tio n Bar, Button so po rta la
v is u a liz a c i n de ico n o s en su interior. Esto se re a liz a agregando
el atrib u to data-icon cu an d o cream o s el botn. Veam os un ejem plo:

www.redusers.com

118

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

<a h re f= "fa v o rito s .h tm r d a ta -ro le = "b u tto n " d a ta -ico n = "sta r"> F a vo rito s< /a >

Por d efecto, el icono Star, in teg ran te del set de ico no s que vien e
con la lib re ra JQ M , se agregar en el extrem o iz q u ie rd o del botn.
A su ve z , p o d em o s co m b in a r y d is m in u ir el tam a o del b ot n sin que
este p ierd a su icono, co m b in a n d o am bos a trib u to s en la creaci n .

<a h re f= //favo ritos.htm ly/ d a ta -ro le = "b u tto n " d a ta -ic o n = "s ta r" da ta m in i= "tru e "> F a v o rito s < / a >

Botones compactos
SI N UESTRA W E B A P P
D E B E V IS U A L IZ A R S E
EN PO SIC I N
H O RIZONTAL, PO D EM O S
CO M PA CTA R E L BOTN

El w id g et B utton se cre a o cu p an d o casi todo


el an ch o de la p antalla. A s, la v is u a liz a c i n
en p o sici n v e rtic a l no es un pro b lem a, dado
que d isp o n e de un ancho red u cid o . Pero si
n u e stra W ebA pp debe v is u a liz a rs e en p o sici n
h o riz o n tal, e stticam e n te el botn te n d r un
e stilo in n e ce sa ria m en te exagerado. Esto podem os
s o lu c io n a rlo con los a trib u to s mini e inline, los
cu ales nos p erm iten crear b oto nes com p actos
tanto en alto com o en ancho, resp e ctivam e n te .
Veam os un ejem plo:

<a h r e f= "in d e x .h tm r d a ta -ro le = "b u tto n " d a ta -in lin e = "tru e " datath e m e = "b "> A c e p ta r< /a >
<a h re f= "in d e x .h tm l" d a ta -ro le = "b u tto n " d a ta -in lin e = //tru e ,/>Cancelar</a>

De esta fo rm a, el anch o que to m arn los botones p or defecto


ser el n ecesario para v is u a liz a r el texto que los d escrib e.

www.redusers.com

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

C aptulo O*

jq u e r r M o M

t B a tlo n s

B o lo n f r i a n d j r

Enmr
Boion ccr) ic o
O

F a v o n io

B o ta n c on i c o m r u n w a d o

F ig u ra 6. Aqu podemos
observar el botn normal
utilizado en formularios, el
botn con icono y el botn
+zd

C2D

o 1

con icono com pacto.

Posicionamiento del icono


Si no tenem os pro b lem as co n la can tid ad de co m p o n en te s en
p a n ta lla y deseam os ca m b ia r la u b ic a ci n del ico no que ilu s tra el
w id g e t Button, pod em os u tiliz a r el atrib u to data-iconpos en la creacin
del botn. Veam os un ejem plo:

< a h re f= "fa v o rito s .h tm l" d a ta -ro le = "b u tto n " d a ta -ic o n = "s ta r" da ta co n p o s= "righ t"> Fa vorto s< /a >

<a h r e f= "p rin c ip a l.h tm r d a ta -ro le = "b u tto n " d a ta -c o n = "h o m e " dataconpos=//le ft//> P rn c p a k / a >

< a h r e f = " p r o d u c t o s . h t m l " d a t a - r o l e = //b u t t o n // d a t a - i c o n = " g r d " d a t a c o n p o s = "t o p "> P ro d u c to s < / a >

< a h re f= "c o n ta c to .h tm l" d a ta -ro le = "b u tto n " data-con = "che cl< " dataiconpos=//bottom //>Contacto</a>

www.redusers.com

120

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

jq u tr r M o tile B-tlon

Bo t n c c n a h r+ acicn d e co n o a la d erecha

F a v o n io *

Bo t n c c n a iire a c x n d e co n o a la i;q u * d a

Pmcvd

B o l n c c n afcreac*cn d e co n o superior

O
Produ cto*

Bo t n co n a lire a o c n d e co n o n fe ro r

C o n ta d o

Figura 7. Los widgets


B u t t o n que utilizan iconos

Mtate wrtto

pueden ubicarlos en
*z>

23

c =T

cualquiera de sus lados.

Agrupacin de botones
Tam b in es p o sib le cre a r un set de b oto nes ag ru p ad o s m ediante
un co n te n e d o r que nos p erm ita, tanto v e rtic a l com o h o riz o n ta lm e n te ,
v is u a liz a r un c o n ju n to de b oto nes que co n fo rm a n un m ism o objeto.
Veam os un ejem plo:

< d iv d a t a - r o l e = " c o n t r o l g r o u p " >


< a h r e f= " a c e p t o .h t m r d a ta -r o le = "b u tto n "> S k / a >
< a h r e f = //n o a c e p t o .h t m l// d a t a - r o l e = " b u t t o n " > N o < / a >
< a h r e f = " c o n d c i o n a l . h t m l " d a t a - r o l e = //b u t t o n //> T a l v e z < / a >

</div>

El co n te n e d o r controlgroup nos p erm ite a g ru p a r u n set de co ntroles.


Po r d efecto, su ag ru p aci n se re a liz a d e m an era v e rtic a l, dado que en
la m a y o ra de los d is p o s itiv o s m vile s se e n cu en tra de esta m anera.
T am b in es p o sib le re a liz a r el ag ru p am ien to de m anera h o rizo n tal,
agregando el atrib u to data-type, com o vem o s en el s ig u ie n te ejem plo:

www.redusers.com

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

<dv d a ta -ro le = //co n tro lgro u p // d a ta -ty p e = "h o riz o n ta l">


<a h ref= //acepto.htm l// d a ta -ro le = "b u tto n "> A c e p ta r< / a >
<a h re f= "n o a c e p to .h tm l" d a ta -ro le = "b u tto n "> C a n c e la r< /a >
<a h ref= //co n d ic io n a l.h tm r/ d a ta -ro le = //button//>Ayuda</a>

</div>

Los a trib u to s p re se n tad o s hasta aqu p erm iten re d u c ir el tam ao


de un b otn, tan to de form a h o riz o n ta l com o v e rtic a l. Tam b in nos
p e rm ite n agregar un icono en d ife re n te s p o sicio n e s d en tro del
botn, y h asta a g ru p a r un c o n ju n to de b oto nes g racias al atrib u to
data-role= controlgroup .
0

* .

f t 23:51

C apitulo 04

J q u e r y M o b ile B u ll n *
b o i o n a j u s t a d o a l c o n t e n id o

C a n c e la r

A g r u p a c i n d e b o l c n c o ve rtic a l

Si
No
Tal v

A g r u p a c i n d e b o tc n e a h o rrz o n ta l

A c e p ta r

C a n c e la r

Ayuda

F ig u ra 8. Tanto vertical
com o horizontalmente,

M ob ile w eb

agrupar botones nos ayuda


a centralizar de forma ptima

C23
k_

la pantalla creada.

Text Inputs
En el C a p tu lo 3 nos interio rizam o s en el uso de Text Input
en reem plazo de los cam pos clsicos utilizados en el viejo HTML.
A continuacin, repasarem os algunas variantes ms de este com ponente
y cm o nos ayu d ar en el desarrollo de nuestras soluciones.

www.redusers.com

122

l/SERSl

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

Vista clsica
Al text in p u t clsico , que se crea sim p le m e n te con la sen tencia

cin p u t type= te x t >, p od em os o to rg arle un v a lo r agregado, por


ejem p lo , id en tifica n d o con un Label el tip o de dato que deseam os
ingresar. Esto lo hacem os de la s ig u ie n te m anera:

c la b e l fo r= "in p u tB a s ic o "> In g re s e algo:</label>


c in p u t typ e = //te xt// id = "in p u tB a s c o " v a lu e = "" />

Com o re su ltad o , o btenem o s una etiq ueta

PO DEM O S D A R LE MS
V A LO R A L T EX T IN PU T ,
ID EN T IFIC A N D O E L
T IP O D E DATO Q U E
S E IN G R E S A R

que d escrib e el v a lo r a in g resar en este


cam po y, en el segundo rengln, el text in p u t
co rresp o n d ien te . Pero, com o bien d ijim o s en
re itera d a s o p o rtu n id a d e s, en un d isp o s itiv o
m v il d eb em os te n e r cu id ad o con el espacio
a u tiliz a r, d ado que las p a n ta lla s son reducid as.
De tal manera, podem os recu rrir al atributo

data-mini, el cual nos ayud ar a reducir el alto


del cam po de entrada:

c la b e l fo r= "n p u tB a s ic o M in i"> In g re s e algo :c/la b e l>


c in p u t t y p e = " t e x t" id = "in p u tB a sico M n i" v a lu e = " " d a ta -m in i= ,/tru e // />

Field Container
Tam bin, si deseam os re su m ir el Label m s el cam po en una sola
ln ea en pantalla, lo podem os re aliz ar u tiliz a n d o un com ponente

field container.

F IE LD C O N T A IN E R
El u so de fie ld c o n ta in e r a tra v s d e jQ u e ry M obile puede a p ro v e c h a rse siem pre en pantallas d e amplia
visualizacin, aunque d e b e m o s ten er en cu e n ta que. si un form ulario co n tie n e d em asia d o s cam p o s,
para red u cir la invasin d e w id g ets en la pantalla d e la W e b A p p p o d r re e m p la z a rse el u s o de Label for
por el atributo placeholder.

www.redusers.com

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

<div d a ta -ro le = "fie ld c o n ta n ">


< label fo r= "n p u tU n a L n e a "> In grese algo:</label>
<nput t y p e = " t e x t" d = " in p u tU n a L in e a " v a lu e = " " />
</dv>

F ig u ra 9 . Un t e x t i n p u t normal, uno reducido en altura


y el ltimo con su L a b e ! correspondiente en una sola lnea.

Password
Tam bin p o d em o s cre a r cam p o s del tip o c o n t r a s e a , in d ica n d o
en el atrib u to T y p e = p a s s w o rd .

c la b e l fo r= "in p u tP a s s "> Ingrese su password:</label>


c in p u t typ e = "p a s s w o rd " id = /,inputPass,/ v a lu e = ""/ >

El ca r cte r co m o d n que v is u a liz a r , en lugar de la co ntrasea,


es el u tiliz a d o p or el sistem a o p e ra tiv o donde se e jecu ta esta W ebApp.

Number
El a trib u to ty p e = n u m b e r nos h a b ilita a in g re sa r solo caracteres
u tiliz a n d o el teclad o n u m rico del d isp o s itiv o m vil, au n q u e debem os
a cla ra r que esto solo fu n cio n a en sm a rtp h o n e s en m odo v e rtic a l y no
apaisado.

www.redusers.com

124

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

c in p u t ty p e = "n u m b e r" id = "in p u tN u m " v a lu e = ""/ >

Figura 10. El t e x t -in p u t p a s s w o r d y el t e x t i n p u t number


cumpliendo las correspondientes funciones asignadas.

E-mail
El atributo type= em ar activa el form ato de teclado para ingresar una
d ireccin de correo electrnico, identificando la tecla @ (arroba) en el
teclado com n del d isp o sitivo m vil. Funciona en tablets y sm artphones.

*4

<>

M aM aW *

**o

n a

"

Figura 11. T e x t i n p u t e m a il nos permite ajustar el teclado


de los dispositivos mviles con el carcter arroba disponible.

www.redusers.com

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

c in p u t ty p e = " e m a r id = " in p u t E m a r v a lu e = "" />

URL
S im ila r al anterior, este in p u t ty p e nos h ab ilita a e s c rib ir una
U RL. En los d isp o s itiv o s m o d erno s, d ep e n d ie n d o de la m arca, puede
h a b ilita r o no teclas esp eciales p ara in g resar www., .com , y/.
En los d is p o s itiv o s m s m odernos, d ep e n d ien d o del sistem a
o p e ra tivo , puede in c lu ir so lo la tecla esp ecial /.

c in p u t ty p e = " u r l" id = "in p u tU R L " v a lu e = ""/ >

ro M o m *

(J Q

-f

n. fcuiMU

m^eMtue-mad
Iniliw'* *
I9M lto Htb
[
K'Krt*Hrtv*n*1,yrWv-i<.i*<
<

MoM'Web
Q

W
A

E
S

7
MJ3

R
F

D
X

T
G
V
/

Y
H

U
J

K
N

1
L

m
.

cam

q w e r t y i l l o

P
f
1

z x c v b n m *

rm

t23

SBS

, i

o 1

Figura 12. T e x t i n p u t URL nos habilita las


teclas .com y / para escribir direcciones web.

Tel
Este in p u t typ e fu n cio n a, al igual que Number, p e rm itie n d o ingresar
un n m ero de telfon o en el cam po. Reco rdem os que la a c tiv a c i n del
teclad o n u m rico slo fu n cio n a en sm artp h o n e s en m odo v e rtic a l y, a
d ife re n cia de Number, h ab ilita los caracte re s * y #.

c in p u t typ e = /'t e l// id= //in p u tT e l" v a lu e = " " />

www.redusers.com

126

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

am

*oc

OH.

5 MI

ron

ru v

MMO

/X V Z

Figura 13. T e x t i n p u t T e l nos habilita el teclado numrico


en smartphones, y en una tablet prioriza el acceso al pad numrico.

Date
A tra v s de input type= date p odrem os in g re sa r una fecha
fo rm atead a com o d a/m es/ao. Debem os tener en cuenta que este
in p u t typ e se v is u a liz a de form a d istin ta en los d ife re n te s m otores
de naveg ad o res w eb; p or lo tanto, en d e te rm in a d a s o casio n es este
tip o de cam po fu n c io n a r slo com o un TextBox ms.

Figura 14. T e x t i n p u t D a te adopta la versin de visualizacin


de calendario de la plataforma mvil slo en motores WebKit.

www.redusers.com

127

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

Them es
jQ u e r y M obile in co rp o ra u n a serie de temas
en su p la n tilla CSS. Si u tiliz a m o s u n a v e rs i n
antigua, d isp o n ib le hasta la 1.3.2, podem os

H A ST A LA V E R S IO N

co n tar co n hasta cin co tem as d ife re n te s que

1.3.2, JQ U E R Y M O B IL E

ad orn an la e st tica de cad a w id get, m ien tras

IN C O R P O R A B A

que en la ltim a v e rs i n estable al m om ento


de e s c rib ir este ca p tu lo (1.4.2), jQ u e r y M obile

CINCO T E M A S

lim it a dos tem as su e st tica grfica.

D IF E R E N T E S

Ig u alm en te, esto no es un im p e d im en to para


que d estaq uem o s nuestro s itio web d esarro llad o
con jQ u e r y M obile, ya que este in co rp o ra una
ve rs i n web d isp o n ib le en http://them roller.

jq u e ry m o b ile .c o m de un g e n erad o r de tem as o nline.

f : ijQuer/

O
to d ,
S atn p l

n d

R * t OOl, ft t f | 'N *

^anpfc* Iwt M lnfc)

* * K l o n ly lnH K n
Im k r d H ll r o

Rm o o n l r II** m
O

lln k r d fc * ! II m i

O IU<ku

O R-

ihrkbo

( h c ik b a i

j |

0 11

OVIMMI1

Figura 15. T h e m e R o l le r nos permitir ajustar los colores


y estilos de cada widget de jQuery Mobile.

IN P U T T Y P E D A TE
In p u t T y p e D a te v a ra su visualizacin segn el n a v e g a d o r w e b que utilice el u su ario de nuestra W ebA pp;
por lo tanto, otra alternativa se r utilizar, d e fo rm a independiente, un cam p o p ara el da, otro p a ra el m es
y o tro p ara el ao, p a ra que el u su ario c a rg u e p o r se p a ra d o e l va lo r d e la fech a en c a d a uno.

www.redusers.com

128

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

A travs de esta h erram ien ta , p odrem os cre a r n teg ram en te un


tem a desde cero, b asn d o no s en las p aletas de co lo re s que por
defecto nos o frece T h e m e R o Ile r o e lig ie n d o esp e cficam en te un co lo r
para cada uno de los co m p o n en te s y w id g ets de esta herram ien ta.
A m ed id a que elegim o s u n objeto de la in te rfa z grfica de JQ M ,
p od rem o s p e rs o n a liz a r el color, la som bra, la fu e n te, el tam ao
de los bordes, la som bra de cada co n to rn o y otras accio n e s ms.
A l fin a liz a r la esp e cificaci n de n uestro tem a, pod em os d esca rg ar el
a rc h iv o CSS co rre sp o n d ie n te con los cam b io s que re a liz a m o s para as
re e m p la z a rlo en la ruta de nu estras pginas web.

Ejercicio integrador
N u evam en te nos e n co n tram o s con u n e je rc ic io in te g rad o r que nos
a y u d a r a re p asar alg u n o s co n cep to s hasta aho ra visto s y a co n o cer
m e jo r el resto de las b on d ad es que JQ M pone a n u e stra d isp o sici n .
V o lvem o s a u tiliz a r el e je rc ic io re a liz a d o en el Captulo 3, que
a d ap tare m o s lig eram en te para que pueda v is u a liz a rs e de m anera
d ife re n cia d a en tab lets. D escarguem os, e n to nces, el c d ig o de
e jem p lo de este e je rc ic io desde p re m iu m .re d u se rs.c o m para
p o d er m o d ificar su estru ctu ra .

LA E X P E R IE N C IA DE
NAVEGACIN C A M BIA

Adaptacin a las
pantallas de tablets
Com o bien sabem os, las p a n ta lla s de tablets

R O T U N D A M EN T E E N T R E

(ya sean en fo rm ato v e rtic a l u h o riz o n ta l) nos

D ISPO SITIVO S DE CINCO

b rind an u n a ex p erien cia de n ave g aci n m ucho


m s cm oda y agrad ab le que la que otorga un

Y S E IS P U LG A D A S

telfon o m vil.
Si d isp o n em o s de un d is p o s itiv o de hasta
cin co pulgadas, la u s a b ilid a d de una W ebApp
ser no rm al y se ig u alar a cu a lq u ie r otra

ap p n a tiv a in sta la d a en el telfo n o . A h o ra, si d isp o nem o s de un


d is p o s itiv o d en o m in a d o P h a b le t , o de una ta b le t p or a rrib a de las

www.redusers.com

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

seis p u lg adas, la ex p e rie n cia de n ave g aci n ca m b iar rotund am ente,


ya que sus p a n ta lla s poseen m ucho m s e sp a c io p ara d is trib u ir
co m p o n en tes y v is u a liz a r texto, im genes y vid eo.
Por ello, tom ando la idea de que n u e stra pgina web puede
v is u a liz a rs e en un sm artp ho n e o u n a tab let, sim u lare m o s la
a d ap ta ci n de n u e stro p ro ye cto a las p a n ta lla s m s grandes,
p u d ie n d o , a su vez, a p ro v e c h a r ca ra c te rs tic a s de JQ M que hasta
ahora no hem os explorado.

Cambiar NavBar por el widget Panel


Hasta aho ra a p ro ve ch a m o s una b arra de h e rra m ie n ta s que nos
p e rm iti d esp la z arn o s p or el s itio w eb c o rp o ra tiv o que d esarro llam o s
en el ca p itu lo anterior. A hora, s im u la n d o que su co n te n id o debe ser
exp lo tado en una tab let, lo m o d ificarem o s para p o d er a p ro ve ch a r
las ca ra cte rs tica s que nos b rin d a n las p antallas de m a y o r a m p litu d .
En p rin cip io , reem p laz are m o s NavBar por un p anel la te ral que
ap arecer al m om ento que lo in vo q u e m o s. Luego e lim in a rem o s
la b arra de n ave g aci n in fe rio r y u b icarem os, en su lugar,

div data-role= fo o te r .
Luego a b rim o s un a co p ia de n uestro p ro ye cto a n te rio r y editam os
el a rch ivo index.htm l. Entre <div data-role= page > y

<div data-role= header > e scrib im o s el sig u ien te cdigo:

<div 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 ">


< d iv d a ta -ro le = //panel,/ id = "p a n e l M e n " d a ta -d is p la y = "re v e a l" datap osition= //le ft// d a ta -th e m e = "a ">
< d iv id = "titu lo M e n u " a lig n = "c e n te r">
<p>M en& uacute;</p>
< p> </p>
</d iv>
<ul d a ta -ro le = /,listvie w // d a ta -th e m e = "a ">
d i x a h re f= "n d e x .h tm r> H s to n a < / a x / l>
d i x a h r e f= " # " class= "ui-btn-active u i-sta te -p e rs ist"> P ro d u cto s< / a x/ li>
d i x a h re f= //show room .htm l,,> S h o w ro o m < / a x / li>
d i x a h re f= //contacto.htm l//>Contacto</a> </li>

www.redusers.com

130

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

</ul>

</div>
<div d a ta -ro le = "h e a d e r" d a ta -th e m e = "c " a lign = //center//>

C ream o s u n div data-role= p a n e r al cual id e n tifica m o s con un


n o m b re a travs de su id= panelMenu\ Luego le in d ica m o s al panel,
a tra v s del atrib u to data-position= le ft\ que debe e sta r alin e a d o a
la iz q u ie rd a de la p a n ta lla y, m e d ian te el efecto data-display=MrevealM,
que se debe visu a liz a r.
A co n tin u a ci n , cream o s el m en para cada una de las secciones
que n uestro sitio web posee. Para ello, d e clara m o s un n u evo div cu yo
n o m b re es id= titu loM en u co n a lin e a c i n en el centro. En su interior,
cream os un p rra fo titu la d o Men. Por ltim o , cerram o s el div.
Seg u id o a este, cream o s el m en de n ave g aci n para el sitio m ediante
el co m p o n en te ListV ie w , a p lic n d o le un tem a data-them e= a .
Nos queda, a co n tin u aci n , agregar el sistem a de lista, con el cual
arm am os cada botn de N avigatio n Bar. Para esto, copiam os el cdigo
co m p leto de ListV ie w ubicado d entro del div in fe rio r y lo pegam os
seguido al tag Men que cream os. Q uitam o s de cada Listltem el atributo

data-icon, dado que no ser u tiliz a d o . JQ M asigna el ico no arrow-r


a cad a Listltem para in d ica r cuando este tiene un h ip e rv n c u lo asociado.
e

Men

G R E E N B E R R IE S

Wc

F A R M IN G

H is to ria

P ro d u c to s

>

Sb o w ro o m

>

C o n ta cto

>

B e n v c iio o s G r c e n & B e r r ic s F a r m in g
N u estra co m p aa s e e sp e cia liz a e n te o tan lad o n . c o se c h a y distrito!
rojos y p ro d u cio s re te c o ra c o s
A d ife re n c ia d e o t ra s firm a s p ro d u c to ra s . G r e e n ^ B e r ie s p n s e e d o s
o rg n ic o s , s e m b ra d o s y c o s e c h a d o s b o fi to s p rin c ip a le s e s t n d a re s ;
fK if o p o m c o s . g u o c u m p le n

con s u

otqo !a o rg m c a .

pero c o n

d e s a b o lla d o s In te g ra m e n te b a jo e s is te m a d e h t ro p c n a

Figura 16. El resultado de nuestro objeto P a n e l ,


que reemplazar al men original de nuestro proyecto.

www.redusers.com

te rtt

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

U na v e z que obtenem os el re su lta d o de la F ig u r a 16, debem os


re p e tir esto por cad a uno de los a rc h iv o s que co m p o n en n u e stro sitio:

productos.htm l, showroom .htm l y contacto.htm l, u tiliz a n d o los a trib u to s


e sta b le cid o s en cada h ip e rv n c u lo de cada una de las pginas.

Reemplazar Navigation Bar por Footer


Para p o d er e s tiliz a r el sitio web m vil ah o ra que no tenem o s un
pie de pgina com o m en de naveg acin, reem p la za re m o s este por
data-role= footer . Elim in a m o s el div N a v ig a tio n Bar co m p leto y lo
re em p la z am o s p or el s ig u ie n te cdigo:

<div d a ta -ro le = "fo o te r" data-positon= /yfixed y/ d a ta -th e m e = "c ">


< h 4 > C o p yrig h t 2014 - Fernando Luna</h4>
</div>

Solo nos queda un cam b io m s p or hacer: h a b ilita r un botn


s u p e rio r que nos p erm ita d esp le g ar el n u evo m en de navegacin.
Com o estam o s a co stu m b rad o s a v e r en las ve rsio n e s m vile s de las
redes so ciales ms p o p u lare s (F a c e b o o k y G o o g le P lu s , entre otras),
el botn de d esp lieg u e del m en lateral suele u b ica rse en el extrem o
s u p e rio r iz q u ie rd o de la pantalla.
Para ello, debem os a p lic a r u n pequeo cam b io en el Div header
de n u estro p ro ye cto . A n a lice m o s el cdigo de header a co n tin u aci n :

<dv d a ta -ro le = "h e a d e r//d ata-the m e = //c// a lg n = "c e n te ryy>


< d iv d=/yim agen Logo/y a lign = //c e n te r//>
< im g src = "im a g e n e s / L o g o 8 0 0 xl5 0 .g if/y s ty le = "w id th :8 0 % ;m a x w id th :4 0 0 p xyy a lt= "G re e n b e m e s Lo go yy longdesc=y,G ree n b e m es Farm ing L o g o y/>

</div>
</div>

Dentro del data-role= header\ cream os un div con el nom bre

id= im agenLogo y alin eacin centrada. Para crear un botn que perm ita
d esp legar el w id g et Panel, debem os agregar antes de id= im agenLogo
un h ip e rvn c u lo fo rm atead o con los siguientes atributos:

www.redusers.com

132

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

data-icon= bars
data-corners= false
data-iconpos= n o te xt
Los atributos recin listados nos perm iten establecer un icono
del tipo barra, del estilo del men u tiliz ad o en la m ayora de las
apps actuales, sin bordes redondeados. Al no u tiliz a r el atributo

text en este botn, lo desactivarem os m ediante la instruccin


data-iconpos= notext\ para que la imagen tome la posicin central del div.
El c d ig o final de header debe se r igual al siguiente:

< d iv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c ">


<a h re f= "# p a n e lM e n " d a ta -c o n = "b a rs " d a ta -c o rn e rs = "fa ls e " d a ta conp o s= "no te xt"> < /a >
<div id = "im a g e n L o g o " 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" style = //w d th :8 0 % ;m a x w id th :4 0 0 p x" a lt= "G re e n b e rn e s L o g o " lo n gd e sc= "G re en b em e s Farm ing L o g o ">

</div>
</div>

El h ip e rv in c u lo href= #panelMenu har que, al p re sio n a r este


o bjeto , se in vo q u e el p anel co rresp o n d ie n te , v is u a liz a n d o el men
la te ral que hem os creado. Por ltim o , ap liq u e m o s n u e vam en te la
m o d ifica ci n del header en el resto de las pginas y, de esta m anera,
y a p od rem o s v is u a liz a r el panel late ral en cada una de las secciones
que tiene n u e stro sitio.
A co n tin u aci n , el c d ig o co m p leto de cada pgina creada:

index.htm l

< !D 0 C T Y P E htm l>


<htm l>
<head>
< title > G re e n b e rrie s Farm ing</title>
c m e ta 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">
c lin k re l= ;/stylesheet/y h re f= /,http://code.jquery.com/m obile/1.3.2/jquery.

www.redusers.com

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

m obile -1 .3 .2 .m in.css" />


< scrpt src= yyhttp://code.jquery.com /jquery-1.9.1.m n.jsyy></script>
< script src= y/http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m in.
jsyyx / s c r ip t >
</script>
</head>
<body>
< dv d a ta -ro le = "p a g e yy id=//index,/ data-the m e = //d//>
< d iv d a ta -ro le = "p a n e l/y d = yypanel M e n " data-disp lay= /yrevealyy datap o s ito n = "le ftyy data-them e= yyay/>
<dv d = yyttu lo M e n u y/ a lig n = yyce n te ryy>
<p>M en& uacute;</p>
< p > </p>

</dv>
<ul d a ta -ro le = yylistvie w /y data-the m e = yyayy>
< l x a h re f= yy#yy class=y/ui-btn -a ctive u i-sta te -p e rsisty/> H istoria</
a></li>
< l i x a h re f= y/pro d u ctos.h tm ry>Productos</a></l>
< l x a h re f= /ysh o w ro o m .h tm l"> S h o w ro o m < / a x/ li>
< l i x a h re f= y/con tacto.htm l/y>Contacto</a> </li>
</ul>
</div>
< d iv d a ta -ro le = y/headeryy d a ta -th e m e = "c ">
<a h re f= yy# panelM enuyy data-icon = yybarsyy d a ta -c o rn e rs = "fa ls e "
d a ta -ic o n p o s= "n o te xtyyx / a >
<div id= /ym a ge n Lo g o " a lig n = y/ce n te ry/>
<m g src=yyim a ge n e s/Lo g o 8 0 0 xl5 0 .gifyy style = yyw d th :8 0 % ;m a x w d th :4 0 0 p xy/a lt= y/G reenberres L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o yy>
</div>
</dv>
< d iv d a ta -ro le = yycontentyy data-the m e = yydyy>
<p>B ienvenido a < b > G re e n & B e rrie s Farmng</b>.</p>
< p>N uestra com pa& n tilde;& iacute;a se especializa en la
plantaci& oacute;n, cosecha y distribuci& oacute;n por m ayor y m enor de frutos rojos

www.redusers.com

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

y productos relacionados.</p>
<p></p>
< p > A diferencia de otras firm as productoras, G re e n & B e rrie s po
see dos l& iacute;neas de productos: Frutos rojos org& aacute;nicos, sembrados
y cosechados bajo los principales est& aacute;ndares de calidad, y Frutos rojos
hidrop& oacute;nicos, que cum plen con su etiqueta o rg& aa cu te;n ica, pero con la d ife
rencia que estos son sem brados y desarrollados & iacute;ntegram ente bajo el sistema
de hidroponia.</p>

</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n ^ 'fix e d " data-them e= //c//>
< h 4 > C o p yrig h t 2014 - Fernando Luna</h4>
</div>

</div>
</body>

</html>

< n *o * w * * c

w> r

MMWII

riflurUO*
t*M MH

rMgiwnmu

Copy

t e n ^ ia u

t lum

F ig u ra 17. El panel en accin, tanto en Android como en Pad.


productos.htm l

< !D 0 C T Y P E htm l>


<htm l>

www.redusers.com

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

<head>
< title > G re e n b e rrie s Farm ng</title>
<m eta nam e=//v ie w p o rt// c o n te n t^ 'w id tl^ d e v ic e -w id th , in itia l-s c a le = l">
<lnl< re l= "s ty le s h e e t" h re f= //http://code.jquery.com/m obile/1.3.2/jquery.
m obile -1 .3 .2 .m in.css" />
< script src= //http://code.jquery.com /jquery-1.9.1.m in.js//></script>
< script s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js " x / s c r ip t >
</script>
</head>
<body>
<dv d a ta -ro le = "p a g e " id = "p ro d u c to s" data-the m e = //d//>
< dv d a ta -ro le = "p a n e l" id = "p a n e lM e n u " d a ta -d is p la y = "re v e a l" datapositon=,/le f t" d a ta -th e m e = "a ">
<dv id=//titu lo M e n u " a lig n = "c e n te r">
<p> M en& uacute; </p>
<p> </p>

</div>
< ul d a ta -ro le = "lis tv ie w // d a ta -th e m e = "a ">
d i x a h r e f= "in d e x .h tm r > H is to n a < / a x / li>
< l i x a h r e f = " # " cla ss= "u i-b tn -a ctve ui-state -pe rsist"> P ro d u cto s< /
a x / li>
< l i x a h re f= "sh o w ro o m .h tm l,/> S h o w ro o m < / a x / li>
< l i x a h re f= "co n ta c to .h tm l//>Contacto</a> </li>
</lll>
</dv>
<div d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " algn = //center'/>
<a h re f= "# p a n e lM e n u " d a ta -ic o n = "b a rs " d a ta -c o rn e rs = "fa ls e " dataco np o s= "no te xt//x / a >
< d iv d = "m a g e n L o g o "a lig n = "c e n te r">
<im g s rc = "im a g e n e s / L o g o 8 0 0 xl5 0 .g if" s ty le = "w d th :8 0 % ;m a x w id th :4 0 0 p x "a lt= "G re e n b e m e s L o g o " longde $ c= "G re e nb em e s Farm ing L o g o ">

</div>
</dv>

www.redusers.com

136

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

< d iv d a ta -ro le = //content// data-the m e = //d//>


<h4>Productos</h4>
< p > A continuaci& oacute;n puede conocer los productos que com er
cializam os. H aga clic sobre la cate g or& ia cu te;a de su inter&eacute;s.</p>
< d iv id = "im a g e n e s -lin k s " a lig n = "c e n te r">
<a h re f= "o rg a n ic o s .h tm l" d a t a -r e l= " d ia lo g " x im g src= ;,imagenes/
prod uctos-organ icos.jpg" S ty le = "w id th :1 0 0 % ;m in -w id th :1 5 0 p x ;m a x w id th :600 px; border: l p x " / > < / a x p x / p >
<a h re f= "h id ro p o n ic o s .h tm r d a t a -r e l= " d ia lo g " x im g
src="im agenes/productos-h id ro p o n ico s.jp g" S ty le = ''w id th :1 0 0 % ;m in 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 " /></a>

</div>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fixe d " data-the m e = //c//>
< h 4 > C o pyrigh t 2014 - Fernando Luna</h4>
</div>
</div>
</body>
</html>

Figura 18. Todas las secciones se comportan


por igual luego de utilizar el atributo u i - b u t t o n - a c t i v e .

www.redusers.com

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

s h o w ro o m .h tm l

< !D 0 C T Y P E htm l>


< htm l>
<head>
< title > G re e n b e m e s Farm ing</title>
<m eta n a m e = "v e w p o rt" c o n te n t= "w id th = d e vice -w id th / in ita l-s c a le = l//>
<lnl< re l= "s ty le s h e e t" h r e f = " http://code.jquery.com/m obile/1.3.2/jquery.
m ob ile -1 .3 .2 .m in .css" />
< script s r c = " h ttp ://co d e .jq u e ry.co m /jq u e ry-1 .9 .1 .m n .js"x/scrip t>
< script s r c = " http://code.jquery.com /m oble/1.3.2/jquery.m obile-L3.2.m n.
js " x / s c r ip t >
</script>
</head>
<body>
<dv d a ta -ro le = "p a g e " d = "p ro d u cto s" d a ta -th e m e = "d ">
< d iv d a ta -ro le = "p a n e l" d = "p a n e lM e n u " d a ta -d is p la y = "re v e a l" datap o s itio n = "le ft" d a ta -th e m e = "a ">
<dv d = "ttu lo M e n u " a lig n = "c e n te r">
<p>M en& uacute;</p>
<p> </p>
</dv>
< ul d a ta -ro le = "lis tv ie w " d a ta -th e m e = "a ">
< l i x a h re f= "in d e x.h tm l//> H is to ria < / a x / li>
c l i x a h re f= "p ro d u c to s .h tm l"> P ro d u c to s < / a x/ l>
< l i x a h r e f = " # " cla ss= "u i-b tn -a ctve u -state -pe rsst"> S h ow ro om < /
a x / li>
< l i x a h re f= "co n ta cto .h tm l"> C o n ta cto < /a > </li>
</ul>
</dv>
<div 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">
<a h re f= "# p a n e lM e n u " d a ta -ic o n = "b a rs " d a ta -c o rn e rs = "fa ls e " datac o n p o s = "n o te x t"x / a >
<div id = "m a g e n L o g o " a lig n = "c e n te r">
<im g src = "m 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 m e s L o g o " lo n g d e sc= "G re e n b e m e s Farm ing L o g o ">

www.redusers.com

USEFtS

4 C O M P O N E N T E S D E J Q U E R Y M O B IL E

</div>
</dv>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
< h4 > Aten ci& oacute;n al p&uacute;blico</h4>
<div d=//m apa// a !ig n = "c e n te r">
< m g b o rd e r= "2 " style = 'b o rd e r-c o lo r:# 6 9 C ' s rc = "http://maps.
googleapis.com /m aps/api/staticm ap?center=-34.618747,-58.842229&zoom =16&
s ize = 3 5 0 x2 0 0 & m a rk e rs = s ize :m d % 7 C c o lo r:b k ie % 7 C la b e l :G % 7 C -3 4 .618747,5 8.8 42 22 9& sensor=true" />
</div>
< p > Lo invitam os a conocer nuestro Show room ubicado en
< stron g> Au topista del Oeste, K M . 44.500, L a R eja, Buenos Aires</strong>.</p>
< p > A qu & acu te; encontrar& aacute; todos nuestros productos envasados y
listos para llevar. Com un&iacute;quese previam ente por te l& eacu te;fon o para coordi
n ar una cita : <strong>02321-234-9876</strong></p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fixe d " d a ta -th e m e = "c ">
< h 4 > C o p yrigh t 2014 - Fernando Luna</h4>

</div>
</dv>
</body>
</html>

Figura 19. El men desplegado en la seccin Showroom


de nuestro proyecto corriendo en el simulador BlackBerry 10.

www.redusers.com

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

c o n ta c to .h tm l

< !D 0 C T Y P E htm l>


< htm l>
<head>
< title > G re e n b e m e s Fai-m ng</title>
<m eta n a m e = "v ie w p o rt" c o n te n t= "w id th = d e vice -w id th / in ita l-s c a le = l//>
<lnl< re l= "s ty le s h e e t" h r e f = " http://code.jquery.com/m obile/1.3.2/jquery.
m ob le-1 .3 .2 .m in.css" />
< script s r c = " http://code.jquery.com /jquery-1.9.1.m nJs,/></script>
< script s r c = " http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m n.
js " x / s c r ip t >
<script typ e = "te x t/ ja v a s c rip t">
var em ail = d o c u m e n t.g e tE le m e n tB yld ('c o rre o ');
var asunto = d o cu m e n t.ge tE le m en tB yld O a su n to');
var msj = d o c u m e n t.ge tE le m e n tB yld ('m e n sa je ');
function se n d M a ilO {
var asunto = d o c u m e n t.g e tE le m e n tB yId ("a su n to ").va lu e ;
var mensaje = d ocu m e n t.ge tE le m en tB yId ( "m e n s a je ").
valu;
var link = " m a ilto :in fo @ gre e n b e rrie sfa rm in g.co m "
+ "? c c = "+ e m a l
+ "& s u b je c t= "+ a s u n to .re p la c e (" " " % 2 0 " )
+ "& b o d y = " + m e n s a je .re p la ce (" " , " % 2 0 " )
w in d o w .loca tio n .h ref = link;

}
</script>
</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 ">
< d iv d a ta -ro le = "p a n e l" id = "p a n e lM e n u " d a ta -d is p la y = "re v e a l" datap o s itio n = "le ft" d a ta -th e m e = "a ">
<div id = "titu lo M e n u " a lig n = //c e n te r,/>
<p>M en& uacute;</p>
<p> </p>
</div>

www.redusers.com

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

< ul d a ta -ro le = "lis tv ie w " d a ta -th e m e = "a ">


< l i x a h re f= "in d e x .h tm r> H is to ria c / a > c / li>
< l i x a h re f= "p ro d u cto s.h tm l//> P ro d u c to s < / a x/ li>
< l i x a h re f= "s h o w ro o m .h tm l"> S h o w ro o m c / a x / li>
< l i x a h re f= "c o n ta c to .h tm rc la s s = "u i-b tn -a c tiv e u-statep e rsist"> C on tacto c/a > </li>
</ul>
</dv>
<div 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">
< a h re f= //# panelM enu// d a ta -ic o n = "b a rs " d a ta -c o rn e rs = "fa ls e " dataconpos=//notext//x / a >
c d iv id = "im a g e n L o g o " a lig n = "c e 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 d th:4 0 0 px//a lt= //G reenberries L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o ">

</div>
</dv>
< d iv d a ta -ro le = ;/c o n te n t" d a ta -th e m e = "d ">
< h 4 > Fo rm u lario 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()// >
c in p u t ty p e = "e in a il" d = "c o rre o "p la c e h o ld e r= "s u correo
e le c tr& o a c u te ;n ic o " />
c in p u t t y p e = " t e x t" id = "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 " />
c d iv c la s s = "u i-fie ld -c o n ta in ">
c te x ta re a n a m e = "m e n sa je " d=//mensaje//
p la c e h o ld e r= "M e n sa je " ro w s = "1 0 " c o ls = "5 0 " > c/textarea>
c in p u t ty p 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 IO " d a ta -in lin e = "tru e "/ >
c/form >
c/div>
c / d iv >

c d iv d a ta -ro le = "fo o te r" d a ta -p o s to n = "fixe d " d a ta -th e m e = "c ">


< h 4 > C o p yrig h t 2014 - Fernando Lunac/h4>
c/div>
c/body>
c/htm l>

www.redusers.com

141

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

Figura 20. La ltima seccin de nuestro proyecto,


representada en el simulador de Windows Phone.

R ESU M EN
H as ta aqu h em o s c o n o c id o los co m p o n e n tes de jQ u e ry M obile que n o s perm iten d e s p le g a r un de
sarro llo w e b mvil c o n m uy p o co esfu e rzo y. a su ve z, o b te n e r resu ltado s re a le s en tiem po rcord.
Pu d im o s

tam b in

verifica r

c m o

n u estra

app

se

c o m p o rta

en

d ife ren tes

platafo rm as

m viles

- c o m o , iO S , Android, W in d o w s Ph o n e y B la c k B e rry 10-, lo que n o s ayud a v e r el resu ltado c e rte ro que


jQ u e ry M obile p ropone d esd e su fram ew o rk.

www.redusers.com

142

USEFtS

4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E

Actividades
T E S T DE A U TO E V A L U A C I N ______________________
1

Cmo puedo visualizar un link activo en jQ uery Mobile?

Cm o quito los bordes redondeados de un botn?

Qu es una lista autodividida?

Qu widget nos permite aplicar un filtro de bsqueda?

Cmo deshabilito un widget Button?

Mencione al m enos un campo que permita visualizar el teclado numrico.

Para qu sirve el input type URL?

Qu nos permite realizar el objeto Panel?

En qu sector se ubica el d a ta -ro le = P a n e r?

10

Cmo puedo personalizar los colores de un sitio construido con JQM?

E JE R C IC IO S P R C TIC O S_________________________
1

Explore Them eRoller y cree un tem a personalizado.

Investigue cm o descargar un tema desde Them eRoller y cm o aplicarlo


a nuestro proyecto.

Investigue qu otras opciones de visualizacin de un widget Panel podemos


utilizar.

Investigue qu otras opciones de input type existen.

Busque un simulador mvil disponible en internet, descrguelo e instlelo.

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

www.redusers.com

* n

\\\\\\\\\\\\\\\

///////////////

Interaccin con
el hardware de
comunicaciones
Este c a p itu lo n o s tra s la d a r al te rre n o de las c o m u n ic a c io n e s
a tra v s de los d is p o s itiv o s m v ile s : v id e o c o n fe re n c ia s ,
lla m a d a s v a S k y p e , lla m a d o s te le f n ic o s y m e n sa je s d e te x to .
Estas so n a lg u n a s de las o p c io n e s q u e a p re n d e re m o s a
in te g ra r en n u e stra s a p lic a c io n e s w e b m v ile s : c o n o c e re m o s
c m o in v o c a rla s y c m o se c o m p o rta ca d a una d e ellas
c u a n d o el d is p o s itiv o n o p o se e a lg u n a c a ra c te rs tic a .

La Web y el hardware de los


disDositivos mviles............... 144
Comportamientos de los

Invocar llamados
v mensaies de te xto ....

168

Resumen........................... .......173

eventos segn el dispositivo..165


r Actividades...................... .......174
____

71z 1

144

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

La Web y el hardware
de los dispositivos mviles
Con el a va n ce te cn o l g ico de las co m u n ica cio n e s y la m asificaci n
a n iv e l m u n d ia l de las co m p u ta d o ra s, in te rne t, los te l fo n o s m vile s
y las tab lets, entre o tros d isp o sitiv o s, h o y co n tam o s con un
s in n m e ro de o p cio n es para co m u n ica rn o s co n n u e stro s pares.
Y lo m e jo r de todo es que, g racias a la in teg raci n de los se rv icio s
de datos en los telfono s m vile s y tablets, pod em os h acer uso de
casi todas estas fo rm as de co m u n ica ci n desde n uestro d is p o s itiv o
m v il. T am p o co pod em os d e ja r de re co n o cer que hubo una fuerte
p en etraci n de la red in te rn e t en los sm artp h o n e s y tablets, lo cual
h iz o e v o lu c io n a r fa vo ra b le m e n te los e st n d are s web, p ara que estos
ltim o s se in te g raran con las d iv e rs a s o p cio n e s de co m u n ica ci n con
las que co n tam o s hoy.
C uand o h ab lam os de sistem as de comunicacin, debem os
s e p a ra r el co n cep to en tres m e to d o lo g as d istin tas:

Sistema de com unicacin p o r voz.

Sistema de com unicacin p o r texto escrito.

Sistema de videocom unicacin.


A su vez, estos sistem as de co m u n icaci n se d esp lie g an a travs

de dos canales d iferen tes:

La red de telefo n a m vil.

La red de datos m viles.

Y si re p re se n ta m o s estos siste m as de co m u n ic a c i n m ed iante


el sistem a de p e rte n e n c ia u tiliz a d o en la T eora de conjuntos,
n o ta re m o s que todos e llo s co n ju g a n en am b as p la ta fo rm a s y ya
n in g u n o es e x c lu s iv o de la red de te le fo n a m vil.
Esto o cu rre g ra cia s a siste m a s com o S k y p e , que p erm iten ,
con un co sto m n im o , e s ta b le c e r una c o m u n ic a c i n co n un
te l fo n o fijo o m v il a tra v s de la red v o I P , la cual in te g ra los
s iste m a s de co m u n ic a c i n te le f n ic a c l s ico s a tra v s de la red
de datos de in te rn e t.

www.redusers.com

USEKS

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

145

Figura 1. Este pequeo diagrama, basado en la Teora


de conjuntos, nos permite representar el canal de transporte
para la diversidad de comunicaciones actuales.
La red de te le fo n a clsica ya no es u n re q u isito in d isp en sab le
para co m u n icarse co n otras personas. En un fu tu ro cercano, todos
los sistem as de co m u n ica cio n e s que u tiliz a n una red de telefo n a
(m vil o fija) te rm in a rn m ig rand o hacia la red de datos,
a p ro ve ch a n d o las g ran d es ve n ta ja s que b rin d a la te le fo n a VoIP.
Si b ien esto parece d em asiad o fu tu ris ta p or el m om ento,
no podem os p asar por alto que a lg u n o s fab rica n te s de eq u ip o s
te le f n ico s in a l m b ric o s d isp o n e n ya, en el
m ercad o , de m o d elo s de ap arato s que fu n cio n an
con p a n ta lla s t ctile s y co rren , p or ejem p lo , el
sistem a o p e ra tiv o A n d ro id , co n acceso a la tienda
de a p lic a cio n e s Google P la y in clu id o .
Este tip o de equipos nos perm ite contar
con un sistem a com o Skyp e, in stalad o en el
aparato telefnico, a travs del cual podem os
ap rovechar, p or una ta rifa m nim a, los sistem as
de co m u n icacin telef n ica a cu alq u ier parte del

LA R E D D E T E L E F O N A
C L S IC A YA NO
E S UN R E Q U IS IT O
IN D IS P E N S A B L E P A R A
H A B L A R CON OTRO S

m undo, y hasta co n tar co n un nm ero de telfono


in te rn acio n al propio. Solo necesitam os tener
acceso a internet para que esto funcione.

www.redusers.com

146

l/SERSl

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Los siste m a s w eb e v o lu c io n a ro n a trav s de los naveg ad o res


m viles y - v o lv ie n d o al te rre n o de la p ro g ram aci n - desde hace
unos a o s nos p erm iten co n ta r con un co n ju n to de p ro to co lo s y
etiq u e tas para in te ra c tu a r de fo rm a tran sp a re n te con el hardw are
de los d isp o s itiv o s m viles. Veam os, a co n tin u a ci n , cm o sacar
p ro vecho de estos m ecan ism o s desde n u e stra web m vil.

Hipervnculos en jQ u e ry Mobile
En los p rim ero s cap tu lo s de esta obra cono cim o s la etiq ueta lin k ,
la cual nos perm ite estab lecer un h ip e rv n c u lo hacia otra pgina web
o e n v ia r un co rreo electrn ico. En los navegadores web m vile s se
extendi esta fu n cio n alid ad , a l agregar la capacidad de in vo ca r a
eventos de llam ad a telefnica, SMS, Skype, entre otros. El uso de lin k
se rea liz a a travs del tag <a h re f= u r l > . En jQ u e ry M obile podem os
u tiliz a rlo de d iversas form as, com o, p or ejem plo, a travs de un botn:

<a h re f= "w w w .m is itio .c o m "d a ta -ro le = "b u tto n " d = "m B o to n "> Ir al sitio web</a>

Tam bin podem os utilizarlo con un sim ple texto que contenga una URL:

<a h r e f = " w w w .m isitio .co m " id= //m L in k //> lr al sitio web</a>

O a tra v s d e l u so de listas:

<ul d a ta -ro le = "lis tv ie w " id = "m L is ta ">


c i l x a h re f= "w w w .m s itio .c o m "> Ir al sitio w e b < / a x / il>
c i l x a h re f= "w w w .o tro s itio .c o m "> Ir a o tro sitio w e b < / a x / il>
</ul>

U R IS C H E M E S
S e denom ina U R I s c h e m e s a la s e s p e c ific a cio n e s d e c a ra c te re s re s e rv a d o s que perm iten e s ta b le c e r un
hipervnculo a una funcin e s p e c ific a dentro d e un siste m a o p era tivo o h acia alguna a p lica ci n en particular.
S o n m uy utilizadas en internet, y c a d a v e z m s e m p re s a s de so ftw a re sum an e s ta s c a ra c te rs tic a s
a la W e b actual.

www.redusers.com

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

B S S a

147

En estos eje m p lo s, vem os el uso co m n que suele d arse a <a h re f>


p ara estab le ce r un h ip e rv n c u lo , tanto p ara una web v is u a liz a d a en
una co m p u ta d o ra de e s c rito rio com o tam b in para una w eb m vil.
A h o ra exp lo rarem o s las a lte rn a tiv a s de h ip e rv n c u lo s para estab lecer
co m u n ica cio n e s desde un a web m vil, u tiliz a n d o el h ard w are de
n u e stro telfono.

Interaccin con el sm artphone o tablet


Casi todos los naveg ad o res web m vile s m o d ern o s le dan soporte
al est n d ar de co m u n ica c io n e s a tra v s de h ip e rv n c u lo s que podem os
e je cu ta r desde un sm artp ho ne.
Desde las p rim eras ve rs io n e s de estos eq u ip o s in telig en tes
-m s p re cisa m en te , con el n a cim ie n to de iP h o n e - , el n aveg ad o r
w eb S a f a r i e stab leci un p ro to co lo au to m tico que p ro cesab a la
pgin a w eb que cargab a y generaba, a co n tin u a ci n , un h ip e rv n c u lo
sobre los nm ero s te le f n ico s que en esta ap are ca n .
Con el tiem po, el resto de los navegadores web m viles adoptaron
este estndar, con lo cual hoy es posible invo car los m todos de
com unicacin com unes en un telfono inteligente desde una pgina web.

Realizar una llamada


Para esta b lece r un h ip e rv n c u lo a u n a lla m ad a desde una pgina
web, pod em os h a ce r uso de la e tiq u e ta Tel. Para ello, debem os escrib ir
la sig u ien te sentencia:

<a href=//tel:54911-1234-5678'/>Llmame</a>

La pgina que posee un lin k de este tip o h a b ilita a que el


u su ario que lo p re sio n e cargue el n m e ro te le f n ico especificad o
en el h ip e rv n c u lo para p o d er e sta b le ce r u n a llam a d a te le f n ica .
Pero esto no fu n cio n a de m an era a u to m tica en los equipos.
C uand o el usuario ejecute el h ip e rv n c u lo , el sm artp ho n e cargar
el n m ero te le f n ico en el P a d del telfono, o le p re g u n tar al usuario
si d esea estab le ce r una co m u n ica ci n te le f n ica con d icho nm ero,
d ep e n d ie n d o del sistem a o p e ra tivo m vil en el cual sea realizad a
esta accin.

www.redusers.com

148

5. IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Esto o cu rre por una cu e s ti n de seg u rid ad , para que el u su ario


id en tifiq u e que la acci n in icia r u n a llam ad a te le f n ica , y no que esto
o cu rra de m anera au to m tica.

F ig u ra 2. Aqu podemos ver cm o se com porta


cada plataforma al invocar el hipervnculo Tel.

Formato numrico
El nm ero de te l fo n o que agregam os en el h ip e rv n c u lo puede
esta r escrito de m anera estndar, si es que la llam ad a a re a liz a r se
en cu en tra en una pgina que solo v is u a liz a n u su ario s de la m ism a
regin y lo calidad .
Para las pginas que son u tiliz a d a s a n iv e l in te rn a c io n a l, se debe
e sta b le ce r el c d ig o de pas seg u id o del cdigo de rea. Esto p erm itir
re a liz a r la llam a d a d esde un pas o lo ca lid a d d ife re n te de d on d e se
e n cu en tre ub icad o fsicam e n te el usuario.

K .

r 1
L" a

USO
DE
EN
HI O
V V
v U
1N
1 U
V M
l ' I tER
l l V OS
W
LDE
S I T
1E
U L
L iE
U F
I O
V N
i l O
V
b
l l IIP
I
1
V IN
l UE

L o s sitios w e b que carg an p g in as donde figura un nm ero telef n ico utilizando el n a v e g a d o r w e b Safari
para iPhone form atean auto m tica m en te el n m ero p a ra que p o d a m o s llam ar co n solo presionar
so b re

este . P a ra d e s h a c e r e s ta acci n , d e b e m o s incluir en el h ea d er de la pgina la etiqueta

< m e ta na m e= fo rm a t-d e te c tio n c o n te n t= te le p h o n e = n o >.

www.redusers.com

te . Y -

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

En el e je m p lo re a liz a d o estam os in c lu y e n d o u n n m e ro de telfono


m vil cu yo cdigo de pas co rresp o n d e a A rg e n tin a y su cdigo de
lo ca lid a d , a Buenos A ires.

C D IG O S T E L E F N IC O S P A R A L A C IU D A D D E B U E N O S A IR E S
FORMATO NUMRICO

T VALOR

REGIN

Cdigo de pas

54

Arge n tin a

Id entificad or de telfono mvil

Arge n tin a

Cdigo de rea

11

Buenos A ire s ( A M B A )

Tabla 1. Es importante tener la tabla de cdigos telefnicos internacionales


para desarrollar un sistema de comunicacin a telfonos mviles.

Button Cali en jQ uery Mobile


En el diseo de una a p lica ci n web m vil, es co n ven ien te agrupar
los nm eros de telfono a los cuales deseam os h a b ilita r la funcin
de llam ad a dentro de un botn con un icono d istin tiv o . Veam os cmo
realizaram o s esto con el w idget Button de jQ u e ry Mobile:

<a h re f= "te l:+ 5 4 9 1 1 -1 2 3 4 -5 6 7 8 /' d a ta -ro le = "b u tto n " id= ,/m iB o to n /,x i m g
src= "im gen es/phone-icon .pn g" />+54911-1234-5678</a>

El uso del guin

com o se p a ra d o r en el nm ero de te l fo n o no

es n ecesario . Se u tiliz a en a p lic a cio n e s o en textos para e s tru c tu ra r


la le ctu ra del nm ero te le f n ico ; p or lo tanto, no tie n e in je re n c ia
en el co m p o rtam ie n to de la acci n a realizar.

Skype Cali
C uand o se p o p u la riz la p lata fo rm a Skyp e, la firm a ento nces duea
de este p ro d ucto instaur , en el m ercad o web, los d en o m in ad o s
S k y p e B u t t o n s . Esto s b oto nes se p o d an in te g ra r en p ginas web
p ara que el u su ario que tu vie se Sk yp e en su co m p u tad o ra p u d iera
co n ta cta r a una em presa que b rin d a a te n ci n a tra v s de esta v a
con solo p re s io n a r este botn.

www.redusers.com

150

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Ju n to co n la in sta la ci n de Skype en los e q u ip o s locales, se


in sta la b a tam b in una lib re ra que m o d ificaba el co m p o rtam ie n to
del n aveg ad o r p ara que este, al p re sio n ar el botn Skype, in icia ra
esta a p lica ci n y llam ara d ire cta m e n te al u su ario que estaba
id en tificad o en el c d ig o de d ich o botn.
Con la p ro life ra c i n de las p lata fo rm a s m vile s, Skype lanz,
a tra v s del ap artad o D e v e lo p e rs de su p ortal, el URI scheme
co rresp o n d ie n te para que esto p u d iera im p le m e n ta rse en todo aquel
n aveg ad o r m vil que q u isie ra in te g ra r el lla m ad o a tra v s de Skype.
G racias a esta o p ci n -que fue m u y b ien a d o p tad a por los
p rin c ip a le s naveg ad o res w eb m viles-, si d eseam o s in vo ca r
una llam ad a a un eq u ip o con Sk y p e d esde una web m vil,
debem os crear el sig u ien te h ip e rvn c u lo :

<a href= "skype:usuariodeskype?caM " d a ta -ro le = //button//


d=//m iB o to n S k yp e //> <m g src= "im agen es/skype-con.pn g" w id th = "1 8 p x "
height= //1 8 p x///> Ll& aacute;m am e por Skype</a>

A l p re s io n a r el b ot n donde figure un n o m b r e d e u s u a r io S k y p e
v lid o , se e je cu ta r la p lata fo rm a de m e n sa je ra y se in icia r la
co m u n ica ci n con el d e s tin a ta rio esp ecificad o usuariodeskype.

F ig u ra 3. Con solo presionar el hipervnculo se iniciar


automticamente la llamada a travs de Skype.

www.redusers.com

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

T am b in se puede re e m p la z a r el nom bre de u su a rio Sk y p e p or un


n m ero de telfon o v lid o . Esta ltim a acci n fu n cio n ar solam ente
si ten em o s cr d ito cargado para re a liz a r lla m a d a s te le f n ica s a travs
de esta p latafo rm a.
Por su p u esto que es tam b in un re q u isito te n er Skyp e in sta lad o
en el d is p o s itiv o m vil y una cu en ta a c tiv a para que todo esto o curra.
A l in v o c a r u n a lla m a d a a un u su a rio Skyp e, au to m ticam en te se
in ic ia r la a p licaci n , la cual tratar de e sta b le ce r una co m u n icaci n
por vo z , u tiliz a n d o esta p lata fo rm a com o m edio.
T am b in es p osib le re a liz a r otras a ccio n es a tra v s de este m ism o
U RI schem e. Si, en lugar de una llam ad a, p refe rim o s u tiliz a r un
s is t e m a d e c h a t , sim p le m e n te debem os re em p laz a r el p arm etro
pasado d esp u s del signo de p reg u nta p or el v a lo r chat.

<a href="skype:TheSI<ypeUsemame?chat" ...>

En la im p le m e n ta ci n de este U RI schem e desde las p latafo rm as


m vile s no se co n te m p l el in ic io de una sesi n de Skype
d ire cta m en te a tra v s de vid e o c o n fe re n cia , ya que los eq u ip o s
m vile s h a b itu a lm e n te u tiliz a n un p ack de datos re strin g id o a
un co n su m o d e te rm in a d o p or m es, y p or ello se b usca e v ita r el
gasto p or p arte del clie n te que in ic ia la co m u n icaci n .

Figura 4. Al igual que con el llamado telefnico va Skype,


tambin podremos iniciar una nueva conversacin de chat.

www.redusers.com

152

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

En caso de que se re q u ie ra s o s in ic ia r una videoconferencia,


se puede a c tiv a r la vid e o c m a ra luego de in ic ia r el llam ado.

Videoconferencia en iOS con FaceTime


Si b ien d isp o n em o s de una v e rs i n de Sk y p e para iOS,
los fieles u su a rio s de la m arca A p p le d isp o n en de su p ro p io
sistem a de vid e o c o m u n ica ci n , co no cid o com o FaceTime.
Si d eb em os re a liz a r un d e s a rro llo e sp ecfico para esta p latafo rm a
y tenem os que in te g ra r FaceTim e com o so ftw a re de co m u n ica cio n e s
base, tam b in d isp o n em o s de U RI schem e.

<a href= "Fa ce tim e :+ 5 4 9 1 1 2 3 4 5 6 7 8 9 " d a ta -ro le = "b u tto n " d a ta -ic o n = "s k y p e "
id = "m B o to n F T im e "> L l m a m e p o r Facetime</a>

Este h ip e rv n c u lo esta b le cer una co m u n ica ci n telefn ica,


con la o p ci n de a c tiv a r el vid e o , u tiliz a n d o la p lata fo rm a FaceTim e.
A m b os in te rlo cu to re s d eb ern tener esta p latafo rm a configurada
en sus eq u ip o s iPhone: esta es la n ica o p c i n para e sta b le ce r un
lla m a d o m e d ian te un n m ero telefnico .

J U an pari

Figura 5. En la plataforma OS, tambin es posible


invocar las conferencias va FaceTime desde una WebApp.

www.redusers.com

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

O tra a lte rn a tiv a para u tiliz a r v id e o c o n fe re n c ia m ed iante FaceTim e


es a tra v s del I D d e A p p le (d ire cc i n de correo e le ctr n ico ), en
lu g ar del n m ero telef n ico . Esto nos p e rm itir esta b le cer una
v id e o lla m a d a con e q u ip o s Phone, iPod, iPad y M ac OS-X.

<a h re f= "F a c e tim e :m yA p p le ID @ m ye m a il.co m " d a ta -ro le = "b u tto n " dataic o n = "s k y p e " id = "m iB o to n F T m e "> L l m a m e p o r Facetme</a>

Enviar SMS desde una WebApp


Desde los sm a rtp h o n e s tam b in es p o sib le e n v ia r m ensajes
de texto u tiliz a n d o una W ebApp com o lanzador. Debem os te n e r en
cu en ta que, al igual que un lla m ad o te le f n ico desde una pgina web,
en los m en sajes de texto ser el u s u a rio quien p resio n e el botn
E n v ia r.

La W ebA pp solo puede in ic ia r la ve n tan a de un n u e vo m ensaje


de texto, ca rg a r el n m ero te le f n ico del d es tin a ta rio y el cu erp o del
m en saje que se desea enviar. Esto se realiz a de la s ig u ie n te m anera:

<a h ref= "sm s:+ 5 4 9 1 1 2 3 4 5 6 7 8 9 " d a ta -ro le = "b u tto n " d a ta -c o n = "s k yp e "
d = "m B o to n S M S "> E n v ia r SM S</a>

Esta acci n sim p le m e n te a b rir un n u evo m ensaje de texto y


cargar el n m ero de telfon o del d e s tin a ta rio en n u e stro equipo.
Si q u erem os in ic ia r un SM S co n un texto p red efin id o , debem os
re a liz a r lo siguiente:

< a href= "sm s:+ 5 4 9 1 1 2 3 4 5 6 7 8 9 ?b ody= H ola" d a ta -ro le = "b u tto n " dataic o n = "s k y p e " id = "m iB o to n S M S c o n T e x to "> E n v a r S M S conTexto</a>

Y si d eseam o s e n v ia r un SM S a m ltip le s d estin ata rio s,


sim p le m e n te d eb em o s se p a ra r los nm ero s de telfon o con
u n a com a. Veam os un e je m p lo a co n tin u a ci n :

< a href="sm s:+5491123456789, +549119 87 6 54 32 ?body=H ola% 20


a% 2 0 lo s % 2 0 d o s ." d a ta -ro le = //button// d a ta -c o n = "s k y p e "
d = "m iB o to n S M S c o n T e xto "> E n v ia r S M S conTexto< /a>

www.redusers.com

154

5. IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

j k

9 ,m *
-=>

C2D

c5>

Figura 6. En este ejemplo podemos ver cm o, desde una WebApp, iniciamos


un nuevo SMS con texto predefinido y dos telfonos com o destinatarios.

Mensajes a travs de BBM


D u ra n te el ao 2014, B la c k B e rry (ex R1M) traslad su clsico
m e n saje ro in sta n t n eo B l a c k B e r r y M e s s e n g e r (B B M ) hacia la
p lata fo rm a iO S y A n d ro id , con lo cu a l lo s antiguo s u su ario s de los
d is p o s itiv o s B la c k B e rry que cam b iaro n a otras p lata fo rm a s p u d ie ro n
seguir u tiliz a n d o el co nsagrado m e n saje ro BBM co n su P IN o rig inal.
Y, p or supuesto, al igual que el resto de los sistem as de m en sajera,
BBM lanz, desde hace unos aos, su p ro p io U RI schem e p ara poder
in icia r desde una W ebA pp un ch at o llam ad a de vo z a trav s de este
sistem a de m en sajera.
Veam os a c o n tin u a c i n cm o in ic ia r u n ch a t con un co ntacto
de BBM desde un b ot n de jQ u e r y M obile:

u i i n A P T r

r i i

i r n u

i j

l WIDGETS EN JQUERY MOBILE


a

ii

L o s w id g ets incluidos en jQ u e ry M o b ile tienen una infinidad d e funciones, atributos y even to s que pueden
s e r in vo ca d o s tan to d e s d e el H T M L co m o a tra v s de Ja v a S c r ip t . E s con ven iente c o n o c e r to d a su
cap a c id a d recu rrien d o a la d o cu m entaci n oficial: h ttp :/ / a p i.jq u e r y m o b ile .c o m / c a t e g o r y / w id g e t s .

www.redusers.com

It e d & i

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

155

<a href= "bbm ://2 9 9 4 9 AD 3 ?chat" d a ta -ro le = "b u tto n " id = " b t n B B M " x m g
src= "m agen es/bb m -con .pn g" w d th = ''1 8 p x " h e g h t= "1 8 p x"/ > B la c k b e rry M essenger</a>

Limitacin de BBM
B la c k B e rry M essenger p erm ite e stab le ce r un a co m u n ica c i n con
o tro PIN solo cu an d o am bos in te rlo cu to re s se a ce p taro n p re viam e n te
con los u su a rio s. Por ello, cu an d o in vo q u e m o s un chat hacia un PIN
de B la c k B e rry que no figura com o co ntacto, se a b rir d irectam en te
la v e n ta n a de in v ita c i n de BBM.

Figura 7. BlackBerry Messenger tambin puede


ser invocado mediante URI scheme.

APIS DE COMUNICACION
A lo largo del crecim ie n to d e las p la ta fo rm a s m viles, m s y m s sitios w e b , a p p s nativas y platafo rm as
de servicio w e b incluirn U RI s c h e m e s dentro de la funcionalidad m obile. E s bueno re c o rre r los b u sca d o res
w e b d e fo rm a p eri d ica p a ra c o n o c e r a fo nd o los a v a n c e s en e s te terreno.

www.redusers.com

156

l/SERSl

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Comunicacin a travs
de redes sociales
En base al im p a cto de las redes so ciales y al uso co tid ia n o que
todos les dam os, sum ad o a que casi to d as las em p resas co n sig u iero n
nuevos can a le s de co m u n ica ci n d ire cta con sus clie n te s a tra v s de
estas, las p lata fo rm a s m s p o p u la re s lle va ro n su p ro p io U RI schem e
a los naveg ad o res de e s crito rio y m viles.

Perfil y mensajes en Twitter


D esde los d is p o s itiv o s m vile s pod em os u tiliz a r el U R I schem e
de T w itte r para p o d er visu a liz a r, con u n sim p le tap, el p erfil de una
e m p resa o p erso n alid ad . Veam os un e jem p lo de cm o in v o c a r un
p erfil de T w itte r d esde una W ebApp:

<a href= "tw itter://u ser?screen _nam e= m oblepadaw an " d a ta -ro le = ,/button//
d = "b tn T w itte r//>@ m oblepadaw an en Tw tter< /a>

T a m b i n co n ta m o s co n la p o s ib ilid a d de in ic ia r un m e n sa je con
un texto p re d e fin id o , de la m ism a m a n e ra qu e lo h acem o s con un
e-m ail o SMS:

<a
Kef=//tw itte r:/ /p o s t? m e s sa g e = G e n ia l% 2 0 e l% 2 0 s tio % 2 0 V id a % 2 0 M o b ile % 2 0
http://w w w .vida m o bile .com .ai7 .% 2 0 P o w e re d% 2 0 by% 2 0 & # 6 4 m ob ilep adaw a n "
d a ta -ro le = "b u tto n " d = //b tn P o stT w itte r//> P o stea r U R L e nTw itte r< /a>

A l igual que en los e n vo s de larg o s textos por e-mail a tra v s de


un h ip e rv n c u lo o el e n v o de un SMS, d eb em os te n er en cuenta que

TWITTER URI SCHEME


Al igual q u e e l re sto de los URI s c h e m e s visto s, el de Twitter d isp o n e de una am plia cantidad
de fu n cio n es que n o s pu ed en llegar a s e r tiles p a ra d esarro llar tan to w e b s m viles c o m o a p p s nativas.
P o d e m o s a c c e d e r a e s ta s fu n cio n es a tra v s d e la siguiente U R L: h tt p s :/ / d e v .t w itt e r .c o m

www.redusers.com

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

n e ce sita m o s re em p la z ar algunos caracteres p or sus e q u iv a le n te s de la


tabla de cdigos H TM L.
En este ltim o ejem p lo , u tiliz a m o s n u e vam en te la co m b in aci n
% 2 0 para re em p laz a r los e sp acio s y la co m b in a ci n & # 6 4 para hacer

la arro b a co rre sp o n d ie n te al n o m b re de u su ario en Tw itter.

Figura 8. Twitter dispone de varias opciones de


URI schemes para invocar, desde una WebApp o app nativa, diversas
funciones de la red de microblogging.

Perfil y mensajes en Facebook


Al igual que en Tw itter, tam b in podem os in vo ca r el perfil
de Facebook de una persona o em p resa desde un h ip e rv n c u lo
e sta b le cid o en u n a W ebApp. Veam os, a co n tin u a ci n , cm o v is u a liz a r
un p erfil de esta red social:

<a h ref= //fb://profile/1363874497// d a ta -ro le = "b u tto n " id = "b tn F B P ro file "> < irrig
src= "im agen es/fb-con .p ng" w id th = "1 8 p x " he ight= /T 8 p x ///> P e rfil de Facebook</a>

A d ife re n cia de Tw itter, para v is u a liz a r un p erfil de Facebook


debem os in vo carlo a travs de su cdigo de id en tificaci n (F a c e b o o k

ID). En sus inicios, esta red social m anejaba ID de usuario s en lugar de


un nom bre personal o nicknam e. Con el tiem po in stau r el nicknam e,
pero esto no lleg a ap lica rse en el U R I schem e hasta el m om ento.

www.redusers.com

158

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

El ID de Faceb oo k de cad a persona o e m p resa se puede id en tifica r


en la U R L de una foto p u b lica d a en el perfil. A b rim o s un lbum
fo tog rfico que est p u b lica d o en el perfil que deseam os o bten er
y en la U RL e n co n trare m o s el ID en tre el ltim o p unto (.) y el final
de la URL, que g en eralm en te te rm in a con &type=3.
Tam bin podem os in v o c a r la co m u n icacin a travs del sistema de

m ensajera de Facebook. Podem os re a liz arlo de la siguiente manera:


<a h re f= '/fb://messaging/compose/1363874497" d a ta -ro le = "b u tto n "
d = "b tn F B P ro file //> < im g src= "im agen es/fb -ico n .p n g" w id th = "1 8 p x "
heght= ,/1 8 px/7> Chat por Facebook</a>

Esto a b rir d ire cta m e n te el sistem a de m e n sa je ra de Facebook


en la p a n ta lla del p erfil e sp ecificad o , p ara que el u su a rio escrib a
d ire cta m e n te el m ensaje que desea enviar.

Alcance de los URI schemes


La m a y o ra de los U RI sch em es que n aciero n estos ltim o s aos
lo h icie ro n para d e sp le g a r su p o ten cial en las p lata fo rm a s m viles.
Plasta el m o m ento , hem os rep asad o las siguientes:

Llam ad o telefnico .

Llam ad o p or Skype.

V id e o c o n fe re n c ia con FaceTim e.

E n v ia r SMS.

E n v ia r m e n saje s por BBM.

Perfil y m en sajes por Tw itter.

Perfil y m ensajes p or Facebook.

Estas fu n c io n a lid a d e s fu e ro n p ensad as n teg ram en te para


d is p o s itiv o s m vile s. De todas ellas, solo aq u e llo s eq u ip o s de
e s crito rio (W in d o w s, Linux, Mac) que tengan un clie n te Skyp e
in s ta la d o p o d rn h acer uso del h ip e rv n c u lo Tel:// y tam b in
d el h ip e rv n c u lo Skype://.
El resto de los U RI schem es fu n cio n ar n solo en las p latafo rm as
m vile s. Por su p u e sto que, para que fu n cio n en de m an era ptim a,
d eber e sta r in stala d o en el eq u ip o cad a u no de los sistem as de
m e n sa je ra a u tiliz a r com o p a sare la de co m u n ica ci n .

www.redusers.com

It e d & i

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

159

Y Facebook Messenger?
En el caso p u n tu a l de los U RI sch em es d e sa rro lla d o s para
Facebook, cuand o d eseem os in ic ia r un chat u tiliz a n d o esta tecnologa,
el d is p o s itiv o m vil d e te rm in a r si el eq u ip o tiene o no in stalad o
F a c e b o o k M e s s e n g e r . Si so lo tie n e la app de Facebook, se in ic ia r el
ch at a tra v s de esta; si existe Faceb oo k M essenger en el d isp o sitivo ,
se a b rir y se in ic ia r la co m u n ica ci n p or chat desde esta p lata fo rm a .

Figura 9. Facebook tambin dispone de una variada cantidad de


opciones para utilizar funcionalidades de su plataforma va URI schemes.

Mensajes con URI scheme de Twitter


A co n tinuaci n, d esarrollarem o s un pequeo e je rc ic io para probar
el concep to de U RI schem e en la p latafo rm a de Tw itter. Para ello,
in iciam o s un nuevo p ro yecto en n uestro ed ito r de cdigo, creando una
nu eva pgina H T M L a la que llam arem o s c o m e n t a r io s e n l4 0 .h t m l.

a n i

n f "

/\/\a m

i ki

i r 'r n

A P I DE C O M U N IC AC IO N FAC EB O O K

Al m om en to de utilizar el URI sc h e m e p a ra e n via r m e n s a je s a tra v s de F a c e b o o k , e s te funciona


de m a n era transparente p a ra el usuario, priorizando el u so de F a c e b o o k M e s se n g e r en los equipos
m viles. E n c a s o d e que e s ta app n o se en cu e n tre instalada, se utilizar la app d e F a c e b o o k en su lugar.

www.redusers.com

160

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

El p ro ye cto co n siste en sim ular, desde una

D E B E M O S C O N S ID E R A R

pgina que d isp o n e de un co m p o n en te Text Area,

Q U E T W IT T E R SOLO

cm o podem os in v ita r al u su a rio v is ita n te a


e s c rib ir su m ensaje en esta seccin, para luego

P E R M I T E P U B L IC A R

re d ire ccio n a rlo h acia la app de T w itte r que

M E N S A J E S D E 140

tiene in sta la d a en su d is p o s itiv o y, desde all,


p u b lica rlo en su tim e lin e .

CARACTERES

Pero esto no solo in vo lu cra al llam a d o del URI


schem e, sino que, para este d esarro llo , debem os
te n er en cu e n ta que T w itte r p erm ite p u b lica r
m en sajes de 140 ca ra cte re s so lam ente. Por tal

razn, d eb erem os a d v e rtir al u su a rio si se pasa de esta cantid ad


y, si lo hace, no p e rm itirle p u b lica r su m ensaje.
Vam os al cdigo: lo p rim ero que harem os es m o n tar la e stru ctu ra
b sica de una n u e va pgina HTML.

< !D 0 C T Y P E htm l>


<htm l>
<head>
< title > C o m e n ta n o s en 140</title>
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 vce -w id th , n ta l-s c a le = l">
<lnl< re l= "s tyle s h e e t" h re f= //http;//code.jquery.com/mobile/1.3.2/jquery.
m ob ile -1 .3 .2 .m in .css" />
<scrpt src= ,' http://code.jquery.com /jquery-1.9.1.m in.js//></script>
<scrpt s r c = " http://code.jquery.com /m oble/1.3.2/jquery.m oble-1.3.2.m in.
js //x / s c r ip t >

</head>
<body>
< dv d a ta -ro le = "p a g e " d=,/lstas,/ d a ta -th e m e = "d ">
<div d a ta -ro le = /,header// d a ta -th e m e = "c ">
< h4 > C ap& acute;tulo 05</h4>
</dv>
< d iv d a ta -ro le = //content//>
<h4> Com entarios en 140</h4>
< p>D & eacute;janos tus com entarios p o rT w itte r:< /p >

www.redusers.com

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

<dv id = "c o m e n ta rio s ">


< te xta re a id = "tx tC o m e n ta rio s " p la c e h o ld e r= "In g re sa tu com enta ro "> < /te xta re a >
</div>
<p id= //resto//>Restantes: 140</p>
< d iv d a ta -ro le = "b u tto n " id = ,,b tn E n via r// datan ln e = "tru e "d a ta -th e m e = "a "> E n v ia r< / d iv >
<nput ty p e = "r e s e t" id = "b tn L im p ia r" d a ta -in lin e = "tm e "
v a lu e ^ 'L m p ia r " />
</dv>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fix e d " d a ta -th e m e = "c ">
< h4 > M ob ile Web</h4>
</dv>

</div>
</body>
</html>

Esta e stru c tu ra es sim p le. Tenem os una pgina re a liz a d a en


jQ u e r y M obile con un ttu lo , un cam po de texto am p lio llam ad o

txtC om en tarios, u n a le ye n d a que dice cuntos ca ra cte re s restantes


nos q uedan en el cam po (englobad a d en tro de un div a la que
llam am o s resto), un b ot n Enviar y un b o t n Lim piar.
Esta pgina no tien e ninguna fu n cio n a lid a d , por lo tanto,
co m en zarem o s a agregrsela. En el <header>, a co n tin u a ci n de la
ltim a se n ten cia <script>, ab rire m o s un n u evo tag < s c rip tx / s c rp t>
para e s c rib ir algu nas fu n cio n e s en lenguaje Ja v a S c rip t.
Vam os p or la p rim era de ellas:

function lim piarC a m posO {


d o c u m e n t.g e tE le m e n tB yId ('txtC o m e n ta rio s ').va lu e = v/;
d o c u m e n t.g e tE le m e n tB y Id ('re s to ').n n e rH T M L = "R e sta n te s: 1 4 0 ";

La fu n ci n lim piarCam posO nos p erm ite b o rra r el co n te n id o del Text


A re a txtC om en ta rios y re setear el co n te n id o del d iv resto.

www.redusers.com

162

l/SERSl

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

A co n tin u a ci n , agregam os una n u e v a fu n ci n d en o m in ad a

cuentaCaracteres(), m s co m p le ja y extensa, que nos p e rm itir ve rifica r


cu nto s ca ractere s est e scrib ie n d o el u s u a rio y refle ja r el nm ero
restante en el divresto. El texto del div cam b iar a co lo r r o jo para
a d v e rtir que el u s u a rio se ha pasado de la ca n tid a d m xim a p e rm itid a
y, cu an d o v u e lv a a los p arm etro s no rm ales, el m ism o texto cam biar
n u e vam en te al co lo r negro.

function cue n ta C a ra cte re sO


var intCuenta = 0;
var ntTotal = 140;
var strR esto = d o c u m e n t.g e tE le m e n tB yld (Y e s to ');
var strCom ent = d o c u m e n t.g e tE le m e n tB yld ('txtC o m e n ta rio s');
intCuenta = strCom ent. valu, length;
intR esultado = ntTotal - intCuenta;
s trR e s to .in n e rH T M L = "R e sta n te s: " + intResultado;
if (in tR e sultad o < 0) {
strR e sto .style.co lo r = '# F F 0 0 0 0 ';

>
else {
strR e sto .style.co lo r = 'ftOOOOOO';

}
}
La va ria b le intCuenta posee un v a lo r in ic ia l en O, la v a ria b le ntTotal
un v a lo r in ic ia l de 140. intCuenta se ir in crem e n ta n d o a m ed id a que
agregam os ca ractere s en txtC om en tarios. Luego, intResultado te n d r el
v a lo r de intTotal m enos intCuenta, y lo m o s tra r en el d iv Resto.

LLA M A D O S M E D IA N TE W TA I
Al igual que la s d iv e rs a s fun cio n es p a ra realizar llam ad o s, p o d e m o s a p ro vech ar

la funcionalidad

W T A I:/ / , que nos perm ite g e n e ra r llam ad o s q u e incluyan las cod ifica cio n e s d e to n o s c o n o c id a s
co m o D T M F . t s t o p ro ve er so p o rte para co m u n ica rn o s a n m ero s telef n ico s en los que el con testad o r
auto m tico n o s atien d e en una prim era instancia.

www.redusers.com

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

A I final de la fu n ci n , p reg u ntam o s a tra v s de if ( ) si el v a lo r de

intResultado es m en o r a cero. De ser as, m o stra r el co n ten id o del


d iv Resto* en co lo r rojo; de lo co n trario , lo m o strar en co lo r negro.
Vam os ahora p o r la ltim a funci n, la cual nos p e rm itir (o no)
in ic ia r la app de T w itte r y cargar el texto ingresad o en txtC om entarios
p ara p u b lic a rlo en n uestro tim elin e.

vwvWa-(Wercr,a-VoMcv'j| ^

C c m * n t a i o i * n 140

On*'K>fr<js(on<e<iiiupo<i <*!**

o*comconensepodwwsretlalr un
>o t i* c n m n m x f c h a i ' o

t W M i t a en

App

fcsF o silivo fnvil

S o o n o s * s ! 3 i x b i - c a r f m e n s i j e . p re i(C *n *>

nensaies

reensaco

q w

f g

*0

j k

prewrartio
q w

presionan DresonnOjIa
he k h m
e r t y u

mm a r k

0 Pi
1
m

t3 1

ca

O-

*-*

nn

f
x

g
c

U B I
j k ,

h
v

CU

dT

Figura 10. Al iniciar el tipeo de nuestro mensaje, automticamente se inicia


el contador de caracteres y, si nos pasamos, cambia el color del texto a rojo.

function e n v ia rT w itO {
var ntCuenta = d o cu m e n t.g e tE le m e n tB yld ('txtC o m e n ta rio s').va lu .le n g th ;
var com entarios = d o c u m e n t.g e tE le m e n tB yId ('txtC o m e n ta n o s ').va lu e ;
if (in tC u en ta > 140) (
w in d o w .a le rt('M e n sa je e xte n so /);

}
else {
var msj = co m e n ta ro s.re p la c e (" " , " % 2 0 " ) ;
lo caton .href= "tw tter://post?m essage= " + msj;
return;

}
}

www.redusers.com

164

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

En la fu n ci n e n via rTw it() en co n tram o s

LA V A R IA B L E

la va ria b le ntCuenta que ca p tu ra la cantid ad

C O M E N T A R IO S

de ca ra cte re s que posee txtC om entarios. Luego,


la va ria b le com entarios tom a el v a lo r de los

T O M A E L V A L O R DE

caracteres ingresado s en txtC om entarios.

LO IN G R E S A D O EN

Si intCuenta su p era los 140 caracteres, alertar


al u su ario de que el m ensaje es extenso; si

T X T C O M E N T A R IO S

no, u tiliz a r la fu n ci n replace() para cam biar


los e sp acio s por el ca r cte r e q u iv a le n te y, por
ltim o , e je cu tar el U RI schem e para cargar
el m ensaje en Tw itter.
Ya tenem o s todas n uestras fu n cio n es

Ja v a S c r ip t escritas. A hora, vam o s a e n sam b larlas d entro de los


co m p o n en te s del H TM L p ara que fu n cio n en .
U bicam os el b ot n Lim piar y le agregam os, en el even to onC lick,
la fu n ci n lim piarCam pos().

cinput type="reset" id="btnLimpiar" data-inline="true" value="Limpiar"


onClick="limpiarCamposO" />
A h o ra, u b icam o s el co m p o n en te Text Area, al cual le agregam os
la fu n ci n cuentaCaracteres() en dos even to s: onK eyU pO y onKeyDown().

ctextarea id="txtComentarios" placeholder='Tngresa tu comentario"


onKeyDown="cuentaCaracteres()" onl<eyUp="cuentaCaracteres()">
</textarea>

Por ltim o , agregam os la fu n ci n en viarTw itQ al e ve n to onClicl<() del


b ot n Enviar. A d ife re n cia del resto de las fu n cio n e s in co rp o ra d a s en
los o tros co m p o nentes, a esta fu n ci n le an te p o n d re m o s return.

cdiv data-role="button" id="btnEnviar" data-mline=/;true;/ data-theme="a"


onClick="return enviarTwit()//>Enviarc/div>
D ado que su a cci n in vo ca r una a p lic a ci n externa, a travs de
la sen tencia return p e rm itire m o s que la W ebApp retom e el co n tro l
cu a n d o salgam os de la a p lic a ci n in vo ca d a (en este caso, T w itter).

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

F ig u ra 11. Una vez escrito el mensaje, solo nos resta presionar el botn
E n v i a r para finalizar su publicacin desde la app nativa de Twitter.

Comportamientos de los
eventos segn el dispositivo
Com o hem os v is to hasta aho ra, el uso de U RI schem es nos p erm ite
e je cu ta r d ive rsa s m aneras de co m u n ica c i n desde los d isp o s itiv o s
m vile s. Pero vale a cla ra r n u e vam en te que, d ep e n d ie n d o del
d is p o s itiv o m v il, algunas de estas tareas no se podrn lle v a r
a cabo de la m anera habitual.
Veam os, a co n tin u a ci n , cm o responde cada uno de los
d isp o s itiv o s m vile s a los even to s a tra v s de U RI schem es.

Respuesta de eventos en tablets


En las tab lets que existen actu alm e n te se p ued en re a liz a r casi
todos los e ve n to s que repasam os hasta el m om ento. Sin em bargo,
d eb em os tener en cuenta que algunos de ellos no pueden lle va rse
a cabo p orq ue la ap p o fu n ci n con la cual nu estra web m vil debe
in te ra c tu a r no est d isp o n ib le en el equipo.

www.redusers.com

166

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Por ejem p lo : las tablets, hasta el m om ento, no p erm iten d escarg ar


e in s ta la r la a p lic a c i n BBM ; p or lo tanto, este e ve n to no podr
lle v a rs e a cabo d esde una w eb m v il. R especto a los e ve n to s a re a liz a r
a tra v s del URI sch em e de Sk yp e, d ep en d er de que esta ap p est o
no in sta la d a en el equipo.

Figura 12. Invocacin


del URI scheme de BBM desde
un iPad. En este caso, el control
de error es realizado por el
sistema operativo.
Lo mismo ocurrir con los SMS: si la tablet no posee un m edio de
com unicacin que perm ita el uso de SMS, la invocacin al URI scheme
podr fallar y p roducir un error en la web. De igual
modo, la ltim a versin de la app H a n g o u ts, que

SO LO SE PUEDE

reem plaza al antiguo G T a lk , integra una funcin

IN V O C A R E L L L A M A D O

que perm ite, en algunos dispositivos Android,


utilizarla para el envo y recepcin de SMS.

A F A C E T IM E D E S D E
U N A W E B M V IL

Por el lado de FaceTim e, esta p latafo rm a


solo est d isp o n ib le para iOS, p or lo tanto,
cu a lq u ie r b ot n que in vo q u e el lla m a d o a

C A R G A D A E N IOS

esta a p lic a ci n desde un a w eb m v il cargada


en A n d ro id , B la c k B e rry o W in d o w s Phone no
te n d r fu n c io n a lid a d alguna. Por el lado de
los URI schem es de T w itter y Facebook, estos

fu n cio narn sin problem a alguno desde cu alq u ier d isp o sitivo m vil,
tablet o sm artphone y prcticam ente desde cu alq u ier sistem a operativo
m vil, siem pre y cuando la app est instalada en el d ispositivo.

www.redusers.com

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

En cu a n to a la in v o ca ci n de un lla m ad o te le f n ico estndar,


las tablets pueden re sp o n d e r de d os m aneras d istin ta s: si el sistem a
o p e ra tiv o es iOS, p od rn d e s v ia r el llam a d o te le f n ico a tra v s de
la app FaceT im e o in clu so a travs de Skype, si este est in stalad o .

F ig u ra 13. El iPad,
al no poder realizar
un llamado, ofrece
copiar el nmero,
guardarlo com o contacto
o enviar un mensaje
va iM e ssa g e.
Si no tenem o s o p ci n de n in g u n a p lata fo rm a de co m u n ica ci n en la
tablet, solo nos m o strar la o p ci n de agregar el n m ero de telfon o a
un co n tacto n u evo o existen te de nu estra lib re ta de d ire ccio n e s.

Respuesta de eventos en smartphones


Casi to d o s los even to s de los U RI sch em es v is to s fu n cio n a r n de
m anera p tim a en un sm artp ho n c. Es p ro b able que, si d ise am o s una
pgin a w eb que sea u tiliz a d a p or un segm ento co rp o ra tivo , las ap ps
de Facebook y T w itte r no estn in sta la d as en los d is p o s itiv o s m viles.
Por lo tanto, debem os v e rific a r si es c o n ve n ie n te que el u su ario
v a lid e (p o r ejem p lo , a tra v s de su perfil) si u tiliz a ap ps de redes
so cia le s o no, para as p o d e r c o n tro la r qu fu n cio n es so ciales nuestra
W ebA pp puede a c tiv a r y cu les no. O tra a lte rn a tiv a es estab le ce r un
co n tro l de erro re s cu an d o nuestra pgina web ejecu te una a cci n que
da error, ya que esto o cu rre co m n m en te con la in v o c a c i n de URI
schem es especficos.

www.redusers.com

168

l/SERSl

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Una solucin viable


Una de las so lu cio n e s a im p le m e n ta r en el d e sa rro llo de un sistem a
w eb m vil con la in v o c a c i n a URI schem es es co n te m p la r el tip o de
p lata fo rm a d on d e la web se est e je cu tan d o y, a trav s de u n listado
de e q u iv a le n c ia s, v is u a liz a r u o cu lta r los b oto nes de selecci n.
Para el co n tro l de v is u a liz a c i n de un h ip e rv n c u lo a llam ad os
o m en sajes de ch a t de BBM , p o d em o s c o n tro la r el tip o de sistem a
o p e ra tivo donde se carg la pgina. Si fue carg ad a en un iPad, en
un iPod o, tal ve z , en W in d o w s Phone, sabrem os que BBM no est
d isp o n ib le p ara estas p latafo rm as; p or lo tanto, p od rem o s e v ita r
m o strar el h ip e rvn c u lo .
Existen a lte rn a tiv a s en la Web, tanto g ra tu ita s com o pagas,
que nos p e rm itir n d etectar el tip o de d isp o s itiv o d on d e la pgina
w eb se carga y, en base a u n a serie de reglas a u to m ticas, m o stra r
u o c u lta r los b oto nes que p e rm ite n e stab le ce r una co m u n ica ci n .

Invocar llamados y
mensajes de texto
A co n tin u aci n , re a liz a re m o s u n e je rc ic io d on d e d elin earem o s
un p erfil de u su a rio y agregarem os en l los b oto nes necesario s para
in ic ia r una co m u n ica ci n a trav s de d istin to s m edios. Para poder
lle v a r a cabo el e je rc ic io , d eb erem os d escarg ar el a rc h iv o Cap05.

D octorA ssistan ce.rar y d e sc o m p rim ir su co n te n id o en una carpeta.


Luego, d esde D re a m w e a v e r (o n u estro e d ito r fa v o rito ) co m p letarem o s
este e je rc ic io con las pginas faltantes.

LLAMADOS DE AUDIO Y VIDEO


S o n p o c o s los p a s e s que han im plem entado un siste m a d e com un icaci n d e audio y vid eo en
los te l fo n o s m viles; para esto s, p o d e m o s utilizar el hip ervnculo

<href="av:+numerodetelefono>.

P a ra im plem entar e s ta funcionalidad, el dispositivo no solo debe e s ta r activo en los p ro ve ed o res d e


telefona m vil, sino tam b in c o n ta r co n una velo cid ad 3 G (c o m o m nim o) en la red de d a to s

www.redusers.com

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

Nuestro n u evo p ro ye cto , D octor Assistance, b rin d a p restacio n es


de salud con d ive rso s p ro fe sio n a le s m dicos, a q uien es, a tra v s de
esta W ebApp, p od rem o s c o n ta cta r de m anera d irecta.
La pgina index.htm l tiene una in tro d u c c i n ficticia de la co m p aa,
y la pgina prestaciones.htm l m u e stra d ife re n te s e sp e cia lid a d e s cln ica s
que el ce n tro m d ico atien d e. En prestaciones.htm l p od em os v e r el uso
de un n u evo w id g e t de jQ u e r y M o b ile que s im u la un aco rd e n con
co n te n id o d iverso .
N uestro o b je tivo ser in c o rp o ra r un h ip e rv n c u lo debajo de cada
p re sta ci n , m ed ian te el cu al, a l h acer clic, se d esp leg ar u n listado
con m dicos d on d e ve re m o s al p ro fe sio n a l y las d iv e rs a s m aneras
en que p od rem o s co m u n ica rn o s con l.
Para ello, p rim ero debem os cre a r un ListV iew con la in fo rm aci n
re su m id a de cad a p ro fe sio n a l. Luego, al p re s io n a r sobre este,
p od rem o s acced er al d etalle de cada m d ico y p o n ern o s en
co m u n ica ci n con l a trav s de d ife re n te s vas.

f r Duela* A u lla r t e # H c<eMlo tln la vlit.i ra


Muralla "um|nMtii'Ki. la rprtlatrca* la M fW dm ly
laaranotio pAfvuurtUado
ru ira lia a-liluilr*.
(Ja f l w n v u i

A im vto d *

Entidad* q ia la ca ifo im * ',

Daro* Am M w c i i o I w p una oh* on rprgi


Milla la b lluM n U * in ri.~ blll.w lr, ! MllNMIi MO. LUX
HMtnvacaln y c 4 (U d * n la o*n H O n .i| u i# * p o m V
a

n i D ilu ir r u i n a d a n u a a t i t r i c e i M d l

clnt#
** alln n u a a lii p i t n o p a l a i| a w o * i|ualar>*4

cintactc d i# ri r o n *1 c u a io o

m #4ko

* u n o dx ton

m a n iitin o i 1.nil**u v ! i h i * ' w

M nn ln iln

p w p lw iifw .p o f lo tanto in a u n * un
rt|in . I* r<t|in:iii*ntogiin qua partA atendw

umlua iv *ih lubII itri >,iii #


H alar u iof#aortal*i

q u u s trl

n c a lt a A b i fi# c o r r o n a c a n u a m r o * JM r o a d *
i l u d m it o a l c u p o n # a a u p o f l K O n m M i r o a

e ip e c ia l i u i con u n tm a d ir* c iA p ra

aWndnrii

I I v n lr n ia

O nunrmiWMA
O

C D N IC A M E D IC A

F ig u ra 14. Esta es la W ebApp que completaremos, integrndole


la funcionalidad de comunicaciones vista a lo largo de este captulo.

Extender el uso de ListView


Para disear la pgina donde listarem os a los profesionales,
recu rrirem o s al uso del w id g et ListView, conocido en el C a p tu lo 4, con

www.redusers.com

170

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

una pequea diferencia en su desarrollo. Incluirem os una variante de

Listview que nos p erm itir in clu ir una im agen y contenidos ms extensos.
M od ifiquem os e n to nce s el a rc h iv o endocrino.htm l ub icad o dentro
de la ca rp e ta del p ro ye cto d escargado. A l ab rirlo , solo en co n trarem o s
una pgina v a c a sin co n te n id o en el ap artad o content. Agreguem os
lo siguiente:

<p a lig n = "c e n te r"x s tro n g > E n d o c rin o lo g a c / s tro n g > c / p >
<div cla ss= "con te n t-p rm a ry":>
<ul d a ta -ro le = "lis tv ie w " d a ta -c o rn e rs = "tru e ">
c l i x a h re f= "d rn c o .h tm l" d a ta -re l= "D ia lo g ">
c im g src= //im agenes/drnico.png///>
ch3 >D r. N icol& aacute;s M oreno</h3>
< p > E sp ecia lista en endocrinologa</p>
< / a x / l>
</ul>
<ul d a ta -ro le = "lis tv ie w " d a ta -corn e rs= //tru e //>
c l i x a h re f= "d rju ly .h tm l" d a ta -re l= "D ia lo g ">
c im g src= "im agen es/drju ly.png'7 >
ch3 >D r. Ju li& a a cu te ;n Contec/h3>
cp > E sp e cia lista en endocrin ologa infantilc/p>
c/a>c/li>
c/ul>
c/div>

A travs de esta p o rci n de cdigo, agregam os d entro del cuerpo


de la pgina un ListV ie w del tip o T h u m b n a il V ie w . La e s tru c tu ra es
s im ila r a la del ListV ie w v is to en el ca p tu lo anterior, con al agregado
de que su in te rio r posee un fo rm ato d ive rso . En l, en co n trare m o s
una im agen, un ttu lo y una b re ve d escrip ci n .
La in co rp o ra ci n del h ip e rv n c u lo se sum a a la de una im agen,
u tiliz a n d o el tag <im g>. A d em s, un tag <h3> p ara el ttu lo y un <p>
p ara la d escrip ci n .
En el h ip e rv n c u lo de am bos Listlte m s se o b se rva el atrib u to

data-rel= D ialog , el cual d esp leg ar el d etalle del p ro fe sio n al ju n to


con sus v a s de co m u n ica c i n en una v e n ta n a em ergente.

www.redusers.com

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

Veam os el cdigo de la pgina drnico.html:

< !D O C T Y P E h tm l>
< htm l>
<head>
< title > D o c to r Assistance - P rofesionales E ndocrinologa< /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">
<lnl< re l= "s ty le s h e e t" h re f= //http://code.jquery.com/m obile/1.3.2/jquery.
m o b ile -l.3 -2 .m in .c s s " />
< script src= /,h ttp ://co d e .jq u e ry.co m /jq u e ry-1 .9 .1 .m in .js"x/scrip t>
< script s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js " x / s c r ip t >
</head>
<body>
< d iv d a ta -ro le = "p a g e " id = "c o n te n id o " d a ta -th e m e = "c ">
<div d a ta -ro le = "h e a d e r" >
<p a lig n = "c e n te r">
< strong> D r. N icol& aacute;s M oreno - Endocrin& oacute;logo</strong>
</p>
</div>
< d iv d a ta -ro le = //content// id = "c o n te n id o ">
<div id = "im a g e n // a lig n = ;/c e n te r"> < im g src= "im agen es/drn ico.pn g"/> < /
dv>
<a h re f= "te l:+ 5 4 9 1 187654321" d a ta -ro le = "b u tto n " datac o rn e rs = "fa ls e "> < m g src= "im agen es/phone-icon .pn g" w id th = "1 8 p x "
h e ig h t= "1 8 p x " /> Tel& eacu te;fon o mvil</a>
<a h ref= "sm s:+ 5 4 9 1 1 8 7 6 5 4 3 2 1 " d a ta -ro le = "b u tto n " datacorners=//f a l s e " x i m g src= "m agenes/sm s-icon.png" w id th = "1 8 p x " h e ig h t= "1 8 p x "
/> S M S al mvil</a>

</div>

</div>
</body>
</html>

www.redusers.com

S E R

5.

INTERACCIN CON EL HARDWARE DE COM UNICACIONES

F ig u ra 15. El resultado de la visualizacin del primer profesional


y la accin de llamar por telfono o enviar un SMS.
Y ahora vam o s p or el cdigo del o tro p ro fe sio n al, el cu a l se crear
a tra v s de la pgina drjuly.html:

< !D 0 C T Y P E htrnl>
<htm l>
<head>
< title > D o c to r Assistance - P rofesionales E ndocrinologa< /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= "style s h e e ty' h re f= //http://code.jquery.com/m oble/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>
< script src= //http://code.jquery.com /m oble/1.3.2/jquery.m oble-1.3.2.m n.
js"> < /scnpt>
</head>
<body>
<div d a ta -ro le = "p a g e " id = "c o n te n d o " d a ta -th e m e = "c ">
< d iv d a ta -ro le = //header// >
<p a lig n = //center/y>
< strong> D r. Ju l& a a cu te ;n Conte - E ndocrn & oacu te;logo nfantil</
strong>
</p>
</div>
<div d ata-ro le rr^co nten t77id = /ycontenido/7>
< d iv id= //im agen// a lign = /yce n te r/,x i m g src= y/im agenes/drjuly.png/y/></

www.redusers.com

C E2 Z3

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

173

div>
<a h re f= "s k y p e :e c h o l2 3 ? c a H " d a ta -ro le = //button// d a ta c o r n e r s = " f a ls e " x im g src= //im agenes/skype-icon.png// w id th = "1 8 p x "
h e ig h t= "1 8 p x " />

L la m a r por Skype</a>

<a h r e f^ 'b b m V / B B M P IN T c h a t"d a ta -ro le = "b u tto n "d a ta c o r n e r s = " f a ls e " x im g src= //m agenes/bbni-icon.png// w id th = "1 8 p x " he ight= //18px//
/> B la c k b e rry Messenger</a>
</div>
</dv>
</body>
</html>

Figura 16. El segundo de los profesionales habilita


la comunicacin a travs de Skype o BBM.

A lo largo de e s te cap tu lo , ap ren d im o s a invocar los d iferen tes sis te m a s d e co m u n ica ci n q u e p o d e m o s


utilizar d e s d e un telfono m vil o tab let. L la m a d o s telef n ico s, S M S , Sk y p e , F a c e T im e y B B M son algunas
d e la s o p cio n e s que p o d e m o s a p ro ve c h a r para en tablar una co m u n icaci n entre d o s o m s p artes.
Tambin, el u so d e U R I s c h e m e s n o s perm iti a p ro v e c h a r las c a r a c te rs tic a s d e la s re d e s s o c ia le s p ara
en tablar m e n sa je s entre u suarios. Y, por su p uesto , se g u im o s exp loran d o m s c a ra c te rs tic a s d e los
w id g ets p ro p u e sto s por jQ u e ry M obile para h ac e r m s a tra c tivo s n u e stro s p o rta le s m viles.

www.redusers.com

174

USEFtS

5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S

Actividades
T E S T DE A U TO E V A L U A C I N
1

Para qu sirve Listview?

Qu atributos podem os utilizar para crear un tem ListView?

Qu parmetros se pueden utilizar junto al hipervnculo SMS?

Cmo podem os personalizar la imagen de un w idget button?

Cmo deshabilitamos un w idget button?

E JE R C IC IO S P R C TIC O S
1

Investigue, a travs de internet, qu otros URI schem es existen.

Investigue los diferentes URI schem es de Facebook. Idee un w idget button


adicional que dispare otro esquema que aproveche algn atributo nuevo.

Investigue en jquerym obile.com acerca de Collapsible Set e incluya alguna


nueva funcionalidad en el proyecto desarrollado en este captulo.

Utilice la pgina profesionales.html y cree un ListView alfabtico de al menos


seis profesionales, incluyendo un link a su perfil.

Utilice algn simulador o emulador mvil y testee en l los ejercicios realizados


en este captulo.

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

www.redusers.com

///////////////

Lenguajes de
programacin
A lo la rg o de este c a p tu lo re p a sa re m o s el p ro c e s o
d e c re a c i n d e W e b A p p s d in m ic a s a p ro v e c h a n d o
el p o te n c ia l q u e n os b rin d a n los le n g u a je s de p ro g ra m a c i n
w e b . A tra v s d e e s to s , a p re n d e re m o s a tra b a ja r con
in fo rm a c i n a lm a c e n a d a en una b a se d e d a to s , a g ra b a r
re g is tro s y a g e n e ra r p a n ta lla s d in m ic a s in te g ra n d o
los w id g e ts d e jQ u e r y M o b ile d e sd e el le n g u a je PHP.

Evolucin..................... ............ 176

Integrar PHP
con jQuery M obile........ ........199

Base de datos.......................... 187


Resumen......................... ........215
PHP y M yS Q L............. ............ 195
Actividades..................... ........216

7 1z 1

176

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

Evolucin
A lo largo de la h isto ria de la inform tica, los lenguajes de
p rog ram acin ju g aro n un papel im p ortante y fueron adaptndose,
d u rante las n u evas generaciones, a los avances en esttica,
al fu n cio n am ien to de los sistem as o p erativo s y a la integracin
de nuevos servicio s, com o lo fue el n acim ien to de la WWW.
Los p rim ero s lenguajes de p rog ram acin u tiliz ab a n ed ito res bsicos
(generalm ente, los m ism os ed ito res de texto), y luego para desplegar
un p rogram a se re cu rra a co m p ilad o res especficos para cada sistem a
o perativo . El m und o evo lu cio n , y con la llegada de W in d o w s se
integraron d iversas p latafo rm as que brind aban un ID E com pleto
que reco noca errores en la escritu ra de sentencias, fu n cio n es y
d eclaraci n de variab les. Estos IDE, adem s, p erm itan el desarrollo
de las in terfaces visu a le s de u n a m anera m ucho ms am igable.
Luego, con la lleg ad a de la Web, los ID E ms p o p u lare s debieron
read ap tarse para so p o rta r m ltip le s len g u ajes de p ro g ram acin y, a
su vez, poder in te g ra rlo s en una n ica so lu ci n . Esto es lo que o cu rri
con los e d ito re s de cdigo com o Eclipse, Netbeans, D ream w eaver,
que daban so po rte para d e sa rro llo de so lu cio n e s b asad as en Web.
Estos e d ito re s d eb ieron ad ap tarse, de fo rm a n a tiv a o a tra v s de
p lu g in s, p ara d e te c ta r y so p o rta r cdigo HTML, CSS, JavaScript,

PHP, C#, V isual Basic, VBScript, Ajax, CGI y otros tantos lenguajes
m s que ho y se u tiliz a n a d ia rio en el d e sa rro llo web.

La importancia de lo dinmico
En m u ch o s caso s, la Web p ro m e d io fue o rie n ta d a a lo c o rp o ra tiv o ;
p o r lo ta n to , los ca m b io s q ue en esta o c u rrie ro n fu e ro n m n im o s
y, h asta en m u c h o s caso s, n u lo s. Pero co n el n a c im ie n to , hace
casi una d cad a, de la lla m a d a W e b 2.0, de los b lo g s y de la
in te g ra c i n de c o n te n id o m u ltim e d ia en los s itio s , m u ch as p g in as
w eb, h a s ta in c lu s o las m s s e n c illa s , d e b ie ro n m u d a r su co m o d id a d
e s t tic a h a cia la g e n e ra ci n de c o n te n id o d in m ic o , lo que p erm ite
a s e g u ra r que los u s u a rio s v o lv e r n re ite ra d a s ve ce s en b u sc a de
n u e v o s co n te n id o s .
T am b in las redes so ciale s se in te g ra ro n a las w eb s p a rticu la re s.
De esta m anera, se generan co n te n id o s co m p a rtid o s, tanto en una

www.redusers.com

D E2 Z 3

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

177

web e m p re sa ria l com o en el rin c n so cia l de esta. Por eso, cuando


p en sam os el d esarro llo de una pgina w eb , sea de e scrito rio o m vil,
es co n ve n ie n te d e lin e a rla de form a d in m ica desde su ve rsi n
p ro to tip o , para que sea posib le ca m b ia r su co n te n id o en el m om ento
en que sea necesario.

. o - o - v i-

.>

b ie s

3 I* * * * . l

F ig u ra 1. E c lip s e es uno de los entornos de desarrollo que


soporta una importante variedad de lenguajes de desarrollo.

Las plataformas ms comunes


En el te rre n o web, p o d em o s e n co n tra r d ecenas de p latafo rm as
m vile s que p ued en ad ap tarse r p id a m e n te a m o stra r un co n ten id o
d in m ico . En cu an to a le n g u aje s de d e sa rro llo , este terren o est
m u ch o m s aco tad o, y hasta se p o d ra d e cir que lim ita d o a dos o tres
grandes ju g a d o re s. Entre ellos, pod em os m en cio n ar las p latafo rm as

.NET, PHP y -algo ms lejos y casi o lvid a d o - JSP.


En cu a n to a im p le m e n ta ci n del lado del se rvid o r, los p ro veed o res
de h o stin g b rin d an p lanes que so p o rtan la p latafo rm a PH P y, en
m en o r m ed id a, A S P .N e t. Entre am bas p latafo rm as, PH P es ad ap tab le
p r ctica m e n te a cu a lq u ie r s e rv id o r web existente, sin im p o rta r
el sistem a o p e ra tivo que este tenga, y p erm ite tam b in co n ectarse
a un am p lio abanico de bases de datos casi de fo rm a transparente.
ASP.Net, p or su p arte, re q u iere para su im p le m e n taci n que el
s e rv id o r web est m o n tad o sobre una p latafo rm a W in d o w s y co rra

www.redusers.com

178

l/SERSl

6.

L E N G U A JE S D E P R O G R A M A C I N

el s e rv id o r web US. Si b ien tam b in perm ite

A S P .N E T EST

co n e ctivid a d a una can tid ad im p o rtan te de

ASOCIADO A S Q L

fuentes de datos, p ara m u ch o s casos se requiere


d isp o n e r de d riv e rs de terceros, in sta lad o s en

S E R V E R , M IE N T R A S

el se rvid o r, que p erm itan in ic ia r la conexin,

QUE P H P EST

co n su lta y alm a ce n a m ie n to de in fo rm aci n


en las bases de datos.

ASO CIADO A M Y SQ L

En la re la c i n lenguaje de p ro g ram aci n /b ase


de datos, pod em os a s o ciar rp id am en te a ASP.Net
con bases de datos SQL Server, y a PH P con
bases de datos MySQL. Estas d u p la s son

casi in a m o vib le s , a p esar de que cada p lata fo rm a asegura b rin d a r


c o n e c tiv id a d con su co n trap arte.
A lo largo de este cap tu lo , e x p licarem o s cm o fu n cio n a el lenguaje
PH P y tam b in en focarem os n u e stro s e je m p lo s en esta p latafo rm a.
La e le cci n de este lenguaje se debe a que casi todos los se rv id o re s
de h o stin g lo so portan, y algunos de e llo s b rin d a n una cu en ta de
u su ario g ra tu ita en la cu al p o d rem o s co n ta r con P H P com o lenguaje
so po rte y bases de d atos M ySQL.

Qu es PHP?
PH P es un lenguaje de p ro g ram acin de uso general que
p ro p o rcio n a la co d ificaci n de so lu cio n e s del lado del servid o r.
Fue cread o en 1995 p or Rasmus L e r d o r f p ara uso p ersonal. Se
d ise co n el fin de p ro v e e r co n te n id o web d in m ico , y fue p ensado
desde sus in icio s para p o d er v is u a liz a r la in fo rm a c i n s o lic ita d a al
s e rv id o r d entro del co n te n id o H T M L sin n ecesidad de te n e r que llam ar
a un a rc h iv o o lib re ra externo que procese los datos so licitad o s.

PR IM ER AS V E R S IO N E S DE PHP
Dado que P H P n aci de un d esarro llo p ersonalizado, las p rim eras ve rs io n e s de e s te len guaje ace p ta b a n
tanto las ex ten sio n e s de archivo term in a d a s en .P H P c o m o las ex ten sio n es d e archivo .P H P 2 o .PHP3,
donde originalm ente se indicaba co n qu versi n del lenguaje h ab a sid o desarro llad a. A partir de la
ve rsi n 4 .0 , e s to q u ed o bsoleto.

www.redusers.com

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

El cdigo de este lenguaje es p ro cesad o p or el s e rv id o r web con


un m d u lo de p ro ce sam ie n to PHP, el cual se encarga de generar una
pgin a H T M L p ura que luego se entrega al s e rv id o r w eb . Todas sus
ve rs io n e s fu ero n desp legad as de form a g ra tu ita com o so ftw are libre,
bajo la lice n cia G N U / F u b lic .
p h p

PHP5.6.0beta3 Released
T h t PHP d w o la p m e * ! le n t

ib M a y 2 0 K

o l W iP VC -Q oti5. *

1M I i j U i

trewvwilti Octal, ita ib * aO ugfu-aiv role**. M irtwniof PHPaa* w ouf*g*4 lo lo a thh vMtiton ctttt& U and

U w ia d k iB t o P M P

C d n e im e * Q A n g (ot

iO|WHTflvru|| I n lM lug l a f tin a y a a m

T H I S I i A D E V I I O W U N T W f / I I W O O N O T U S f I T !N M O O U C T I O T
I o m o ro I n t a n w t io a a b o u i tito n c * lo a lu i- r y o n i a n c h w k o u l Ih o v w r

p c t g i e O x ir n ie n ia t t o n o r y o u t a n

i a d i r * f u l l U n o l t u n g o s n n w h W S fil c o n u i i w r i i n r i m l a rc h iv e .

lew t u r c e d o a o l o a i . o l PH S .tk O l* ta ) p i r a s e v a N I h e d M r t a a d p * f i . \M \nA m n h l n o - l e s a n b e l o u r d on

U p c o o ilu g

coflMCMU

MidQn,pnp>nH/Qai.
Ou lu w tti a n l O.ial a v io m u ll *lin * u| o Ih n W u< May

inanUyo.1 rofO olp in a na a u P H P a v ilo *.

U s c i G ro u p E v n t s

PHP5.6.0beta2 Released

U M a v lO U

T h * M P c jiv t o p m o n t t e a m a n n r i u K V a u ii m m H l a t e d w iila W ly o l P HP S A 0 lM la 2 . A s w v e r t v r e d (h e le a m e
( i c e r e w U l i b r l a l , I I m U m w l i A l f l H n t u i U a h f e l / a m ijjO .m ly

S p o d a l Ih a n b

M I u s m u l O l P a i e r n c o u id e il l o u - j

11*,Hull*_IKli,>
0>
lT_ar*tm
iPn T>
l-fuit|nf *VV*ni.

Figura 2. PHP es un lenguaje web popular que naci de un proyecto


individual y que actualmente est presente en gran parte de la Web.

Simpleza en su sintaxis
PH P posee u n a sin taxis sim p le y m u y f cil de im p le m e n ta r en
cu a lq u ie r d e s a rro llo web. La sintaxis p ro p ia de PH P puede integ rarse
sin p ro b lem a s d en tro del cdigo H T M L que co m p o n e una pgina.
A su ve z , el m ism o lenguaje puede generar cdigo H TM L d in m ico ,
d efin i n d o lo entre sus sen tencias, para v is u a liz a r los resu ltad o s
so lic ita d o s con la m en o r co m p le jid a d posible.

PHP en el mundo mobile


El le n g u aje PH P se c a ra cte riz a por ser uno de los ms velo ce s en
p ro ce sa r p eticio n e s en el s e rv id o r y d e v o lv e r re su ltad o s fo rm atead o s
en H T M L al u su ario . Este le n g u aje no tiene una v e rs i n p en sad a para
el m u n d o m o b ile, pero, d ada su ve lo c id a d de resp u esta, se ha vu e lto
el le n g u aje id eal p ara im p le m e n ta r en so lu cio n es web m viles.

www.redusers.com

180

l/SERSl

6. L E N G U A J E S

D E P R O G R A M A C I N

Combinar tecnologas en una web mvil


La introd ucci n de PH P en un d esarro llo web im p lica cam biar las
pginas con extensin H T M L p or la extensin P H P , p ro p ia del lenguaje.
Esto p erm itir que el se rvid o r in terp rete que la pgina web so licitada
posee co n ten id o PH P y, p or lo tanto, que la procese para obtener
el resultad o so licitad o d e l cdigo PH P in clu id o en d icha pgina.
En los e je m p lo s re a liz a d o s en los ca p tu lo s
an te rio re s, H T M L p red o m in p or sobre cu alq u ier

IN T R O D U C IR P H P EN

o tro lenguaje de m a rca d o o de p ro g ram acin.


A co n tin u a ci n , harem o s que las d iferen tes

UN D E S A R R O L L O W E B
IM P L IC A C A M B IA R LA

tecn o lo g as repasadas hasta aho ra p uedan


c o n v iv ir en u n n ico d esarro llo . A p ro ve ch are m o s
el le n g u aje P H P p ara g e n erar los tags y el cdigo

E X T E N S I N H T M L PO R
LA E X T E N S I N P H P

d in m ico n ecesario que nos p e rm itir ab and o nar


la w eb e sttica, tan to en la v is u a liz a c i n de texto
e im genes o b ten id o s desde una base de datos
M ySQ L com o en la g eneraci n de w id g e ts p ro p ios
de jQ u e r y M obile.

Comandos bsicos del lenguaje


La u tiliz a c i n de cdigo PH P en una pgina H T M L se puede re a liz a r
de dos m an eras d ifere n te s. La p rim e ra es g en eran d o todo el co n ten id o
H T M L d esde PHP, y la segund a, generando el co n te n id o b sico de
la pgina en H T M L y solo el co n te n id o PH P d en tro de una o ms
fu n cio n e s lo cales o rem otas, para in te g ra rlo luego en las pginas
H T M L co n los tags co rresp o n d ie n te s.
Veam os, a co n tin u a ci n , a lg u n o s de los co m an d o s m s bsicos
de este len g u aje, para co m p re n d e r m ejo r su co n cep to y uso co tid ian o
d en tro de u n a pgina web.
i W

ED ITO R E S DE CODIGO

KD

La m ayo ra d e los ed ito res de c d ig o gratuitos, c o m o N o te p a d + + , E c lip s e o N e tB e a n s , p o see n re co


nocim iento d e sintaxis P H P d e m a n era nativa o a tra v s d e un plugin de f cil instalacin en la plataform a.
D rea m w e a ver, en to d a s su s ve rsio n e s, tam b in re co n o ce d e m a n era nativa la sintaxis d e e s te lenguaje.

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

Invocar un cdigo PHP


La in v o c a c i n del cdigo P H P siem p re se debe re a liz a r entre
<? y ?>. Todo lo que se e scrib a d entro de este tag ser in te rp re ta d o
y re su e lto p or el m otor de PH P in stalad o en el s e rv id o r web y
v is u a liz a d o luego en la pgina H T M L de form a tran sp aren te.
C ada lin e a de co m an d o que e s crib im o s en PH P debe ser
fin a liz a d a p or el p unto y com a, al igual que se hace en el
le n g u a je C y sus v a ria n te s .

Mostrar resultados con echo


C uand o q u eram o s e s c rib ir u n texto esp ecfico que d eb a ser
v is u a liz a d o en p antalla, d entro del cdigo PHP, d eb em os u tiliz a r
la se n te n cia: echo texto a visualizar;.

<body>
<div id = "m iT e x to P H P ">
<? Echo " H o la mundo. E sto es P H P ! " ; ?>

</div>
</body>

Declaracin de variables
A d ife re n c ia de o tro s len g u ajes, P H P p erm ite la d eclara ci n
de va ria b le s de m anera lib re, s in un tipo esp ecfico . Por lo tanto,
es p osib le que u n a m ism a va ria b le pueda co n te n e r tanto nm ero s
com o letras o valo res booleanos. Al d e fin ir una va ria b le , se debe
a n te p o n e r el sm b o lo ($) en su nom bre.
Veam os un e je m p lo de esto:

<?
$intN um ero = 3;
$ strA lfa = " E s to es un te x to ";
echo SintN um ero;
echo "< b r/ > ";
echo $ strA lfa ;

?>

www.redusers.com

182

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

F ig u ra 3. La declaracin de variables y su representacin


en pantalla en tan solo escasas lneas de cdigo.

Sentencia If
La se n te n c ia if p e rm ite d e fin ir que una c o n d ic i n se c u m p la y,
de se r a s, se e je cu te d e te rm in a d a p o rc i n de c d igo . V eam o s un
e je m p lo de ello:

<?
If ($ ntN um e ro = 3 ) {
Echo " E s te es el nm ero tre s/';

}
?>

If - Else
La s e n te n c ia If Else p e rm ite d efin ir, a tra v s de if, la e je c u c i n
de u n a p o rc i n de c d ig o ante u n a d e te rm in a d a c o n d ic i n y, a
tra v s de else, o tra p o rc i n de c d ig o , si la c o n d ic i n d e fin id a en if
no se cu m p le .

<?
if ($ ntN um e ro = = 3 ) {

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

echo " E s te es el nm ero tr e s ";


} else {
echo " N o se defini un va lor en la v a ria b le ";

>
?>

Do - While
La sen tencia do p erm ite e je cu ta r una d e term in ad a acci n hasta
que w h ile cu m p la co n una co n d ic i n d eterm in ad a. M ientras w h ile
no cu m p la la co n d ic i n , do seguir e je cu tan d o la p o rci n de cdigo
que tien e d efin id a. En esta exp resi n, la v a lid a c i n que fin a liz a la
e je cu ci n de do se rea liza al final.

<?
$j = 0;
Do {
$j ++;
echo " E l va lor de la variable $j es m enor a m il/ ';
echo " < b r > " ;
} W h ile ($ j < 9 9 9 );

?>

'. I W V

F ig u ra 4 . El bucle Do - W h il e en accin,
escribiendo cada recorrido realizado en la pgina HTML.

www.redusers.com

184

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

While
Esta sen tencia genera un b ucle que e jecu ta d eterm in a d o cdigo
m ie n tra s una co n d ic i n esp ecfica no se cu m p la. Al m om ento en
que se cum ple, el b ucle finaliza.

<?
$f = 0;
While ($f <= 100) {
Echo $f++;
}
echo "L a variable $j alcanz el valor Cien.";
?>

For
La sen ten cia fo r trabaja, igual que en el lenguaje C, e va lu a n d o tres
c o n d icio n e s. La p rim e ra co n d ic i n se e je c u ta al in ic io del b ucle de
m an era in c o n d ic io n a l. C u an d o v u e lv e a e m p e zar el ciclo , se eval a
la segun d a co n d ici n , la cu a l d e v u e lv e un v a lo r T R U E para que el ciclo
co n tin e , o, de lo co n tra rio , el b ucle finalizar.
La te rce ra co n d ic i n es e va lu a d a cada v e z que fin a liz a la eje cu ci n
de cad a b ucle co n te n id o en for. Veam os un e jem p lo de esta sentencia:

<?
For ($f = 0; Sf <= 100; $f++) <
Echo $f;
)
?>
El cdigo de e jem p lo in d ic a que la v a ria b le $f posee un v a lo r in icia l
de 0 (cero). El ciclo fo r se e je cu tar m ien tras la va ria b le $f sea m enor o
ig u a l a 100, sum and o, en cad a iteraci n , un a u n id ad a $f a tra v s de la
tercera expresin.

Funciones en PHP
A l igual que en otros lenguajes, PH P p erm ite e sta b le ce r fu ncio nes
p ara que p ued an ser u tiliz a d a s en ms de u n a secci n de la pgina

www.redusers.com

USEKS

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

185

web, e vita n d o as re p e tir el c d ig o y, a su vez, e s tru c tu r n d o lo


de m anera p ro lija.

Function C a lc u la rO

$f = i;
$j = 2;
$n = $f + $j;
return $n;

}
Estas fu n cio n e s p ued en o no re c ib ir uno o ms p arm etro s para
ser p ro cesad o s d entro de la fu n ci n , y estos p arm etro s, a su vez,
p u ed en d e v o lv e r un re su ltad o . Veam os cm o hacerlo:

Function CalculoD ina m ico C S p aram e tro l, $param etro2)

{
/A/aldamos re c ib ir nm eros para poder re a liza r la suma
I f (is _ n u m e ric ($ p a ra m e tro l) & & s_nu m e ric($ param e tro2 )) {
$n = $ p a ra m e tro l + $param etro2;

>
$n = $ p a ra m e tro l + $ param etro2;
Return $n;

>

Include
La sen tencia in c lu d e p erm ite agregar a rc h iv o s con co n te n id o puro
en PH P a la pgin a web actual para, de esta m anera, u tiliz a r d icho
co n te n id o y as p o d e r re a liz a r d eterm in ad as operacio nes.

KD

C R EA R P A G IN A S W E B E N P H P D ES D E CERO

P H P e s un lenguaje de p ro g ram aci n q u e, m ediante la sen ten cia echo, p u ed e reprod u cir sin problem a
cualquier sintaxis d e tipo H T M L o Ja v a S c r ip t . A su ve z. e s ta ltima tam bin puede invocar sintaxis de P H P
a tra v s d e su funcionalidad in n e r H T M L .

www.redusers.com

186

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

Por ejem p lo : cuando cream os fu n cio n e s que

L A S B A S E S DE

deben p ro cesar algo y d e v o lv e r un resultad o ,

DATOS SON

estas h ab itu alm en te se crean en u n a rch ivo


d efin id o que ser in clu id o en cada una de las

FUNDAM ENTALES

p ginas que req u ie ra n co n su m ir estas fu n cio n es.


Todo el co n te n id o que se cre a en este a rc h iv o

E N LA CR EA C IO N DE

tiene ca r cte r global; p or lo tanto, si d efinim o s

SIT IO S W E B D IN M ICOS

v a ria b le s con va lo re s d eterm in a d o s, al u tiliz a rla s


desde una pgina web que in clu y a este a rch ivo ,
la va ria b le p o d r co n su m irse con el v a lo r que ya
tiene definido.

Veam os un e je m p lo a co n tin u a ci n . Para ello, crearem o s un arch ivo


al que llam a re m o s variablefruta.php. En su in terio r, agregarem o s el
sig u ie n te cdigo:

<?
//Archivo variables.php
$ fruta = "A r n d a n o s '';
$ color = " A z u l" ;

?>

A h o ra crearem o s un a rch ivo PH P con co n te n id o H TM L, donde


agregarem os la re fe re n cia al a rc h iv o usodeinclude.php:

<htm l>
<? nclude 'v a ria b le fru ta .p h p '; ?>
<head>
< ! - contenido de header ~ >
</head>
<body>
< d iv id = "fru ta d e s c rip c io n ">
< p > F ru ta : <? echo $ fru ta; ?></p>
< p > C o lo r: < ? echo $ co lo r; ?></p>

</div>
</body>
</html>

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

F ig u ra 5. El resultado del ejemplo realizado con i n c l ude,

mostrando el valor de las variables, y el mismo resultado


eliminando la pgina v a r i a b l e f r u t a . php.

Require
La se n ten cia require es id n tica a la sen tencia include, con la
d ife re n cia de que la p rim era d eten d r la carga de la pgina si
el a rc h iv o que se desea in c lu ir no existe fsica m e n te en la ruta
esp ecificad a. Include solo v is u a liz a un e rro r en la ln e a que procesa
la in c lu s i n del a rch ivo , pero p erm ite seguir e je cu ta n d o el resto
del cdigo PH P que se e n cu e n tra en la pgina.
La se n te n cia de require es la siguiente:

<? requ ire 'varia bles.ph p' ?>

Base de datos
En la creacin de sitios web dinm icos, las bases de datos juegan
un papel fundam ental, alm acenando gran parte del contenido que suele
m ostrarse en estos sitios. A continuacin, haremos una breve introduccin
a M y S Q L , un sistem a de base de datos relacional que es el fiel compaero
de PHP en casi todos los sitios donde este lenguaje es protagonista.

www.redusers.com

188

l/SERSl

6. L E N G U A J E S

D E P R O G R A M A C I N

M ySQL
M ySQ L es un sistem a de g esti n de bases de datos re lacio n a l
d e sa rro lla d o p or la em p resa MySQL AB, que d esde en ero de 2008
es una s u b s id ia ria de Sun Microsystem s, la cual pertenece,
a su ve z , a O racle C orporation desde p rin c ip io s de 2010.
El d e sa rro llo de M ySQ L est b asado en u n a lic e n c ia GNU GPL,
excepto para las em p resas que re q u ie ra n in c o rp o ra r esta base
de datos para d is trib u irla co n p ro d u cto s cerrad o s o lice n ciad o s,
para las cu ales s se re q u iere el pago de una lice n cia p or su uso.
Entre los sitio s w eb ms p o p u la re s que
u tiliz a n este m o to r de base de datos d estacam os

M YSQL P O S E E SO P O R T E

Google, Facebook, Wikipedia. Twitter y

P A R A CASI TODOS LO S

YouTube. A su vez, la p lata fo rm a W o rd p ress


tam b in u tiliz a com o m o to r de datos la base

S IS T E M A S OPERATIVO S

M ySQ L para el a lm a ce n a m ie n to del co n ten id o

M S P O P U L A R E S , COMO

de cada blog que se genere con esta tecnologa.


M ySQ L posee so po rte p ara casi todos los

L IN U X Y W IN D O W S

sistem as o p e ra tivo s ms p o p u lares, entre los


cu ales pod em os e n co n tra r a Linux, BSD, OS-X,
y W in dow s (desd e su v e rs i n 95 en adelante).
Po r lo tanto, cu a lq u iera sea el sistem a o p e ra tivo

que u tilice m o s en el se rv id o r de n u e stra pgina web, este d isp o n d r


de u n a in sta laci n de este sistem a de base de datos.
Com o b ien d ijim o s, M ySQ L se co m p le m e n ta con PH P casi de
m anera tra n sp a re n te, aun q u e la base de datos se in icia a trav s de un
s e rv icio p or ln e a de co m an d o s. Ig u alm en te, existen so lu c io n e s com o

PHPMyADMIN, que nos p erm ite m a n ip u la r todas las tareas hab itu ales
en una base de datos, de m anera grfica. La m a y o ra de los se rv id o re s
w eb que p restan so po rte p ara PH P y M ySQ L tie n e n in stala d o , por
d efecto , el gestor de base de datos PH PM yA D M IN .

TIP O DE S IN T A X IS A IN VO C A R D ESD E PHP


P H P perm ite no so lo crea r, m e d ian te la sen ten cia echo, sintaxis propia de H TM L, sino que tam bin
perm ite in v o c a r sintaxis p a ra la c re a c i n d e input ty p e s o b lo q u es d e c d ig o H T M L que requieren
de la intervencin d e C S S .

www.redusers.com

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

Si no p oseem os actu a lm e n te un se rv id o r que nos b rin d e acceso a


PH P y M ySQ L, podem os d esca rg ar e in sta la r de m an era grca la suite

XAMPP (A p a ch e + M ySQ L 4- PH P + Perl) que nos p e rm itir , en poco


tiem po, m o ntar un sitio w eb con so po rte para todas estas tecnologas.
X A M PP d isp o n e de ve rs io n e s p ara W in d o w s, Linux y OS-X en su sitio
w eb oficial: h ttp s://apach efrien ds.org/es/in dex.h tm l.

M y S Q L 5 1 R e fe re n ce Manual
In c lo d ii'g M > G Q L M

NOO GX/7 X R e fe re e

Figura 6. En el sitio web de M ySQL (www.mysql.com) podemos encontrar


la informacin oficial de esta base de datos y un manual para el usuario.

Comandos bsicos SQL


El le n g u a je SQL (Structured Query Language) es u tiliz a d o tam bin
en M ySQ L p ara re a liz a r las o p eracio n es bsicas en la base de datos
(cre a r bases de datos, tablas, usu ario s, lis ta r reg istros alm acen ad o s
en tab las, agregar, elim inar, actu alizar, etctera).
Si no conocem os en p ro fu n d id a d el lenguaje SQ L, para m an ip u lar
los e je rc ic io s que nos restan hacer, podem os to m ar la referen cia bsica
que nos p rovee el sitio W3Schools, donde en co n trarem o s un excelente
tu to rial de M ySQ L y todos sus com andos: w w w .w 3schools.com /sql.
Tam bin, a tra v s de esta m ism a e d ito ria l, pod em os a cce d e r a una
d ive rs id a d de lib ro s que tratan el lenguaje PH P y M ySQ L co n m ayo r
p ro fu n d id a d y que nos sern de gran u tilid a d si deseam os lle v a r
a d elan te un sistem a a m p lio en fu n cio n alid a d e s . A ccedem o s a estos
lib ro s a tra v s de la sig u ien te URL: h ttp://usershop.redusers.com /

libros.asp?categoria=php.

www.redusers.com

190

l/SERSl

6.

L E N G U A JE S D E P R O G R A M A C I N

Y si p re fe rim o s la ve rsi n e le ctr n ic a de estos lib ro s, podem os


acced er a tra v s del s ig u ie n te link: http://usershop.redusers.com /

libros. asp ?tipo=ebook& categoria=ph p.

C rear nuestra prim era


base de datos
A co ntinuaci n, crearem os nuestra prim era base de datos, que nos
servir luego para agregar las tablas necesarias que u tiliz a re m o s en
los e je rcicio s a re aliz ar hacia el final de este cap tu lo . Si d isponem os
de un sitio web donde tenem os PH P y M ySQ L co rriend o en el W ebserver,
puede que a travs de este tengam os que gestio n ar la creaci n de una
nu eva base de datos desde el panel de co n tro l de usuario.
Esto se debe re a liz a r co n el fin de a d m in is tra r e ficien tem en te
los p erm iso s de seg u rid ad , los cuales no siem p re co in cid e n entre
la p lata fo rm a de a d m in is tra c i n del back-end de u n sitio w eb y
los co rresp o n d ie n te s p ara la a d m in istra c i n de las bases de datos.
En o tros casos, puede que la g esti n p ara cre a r u n a n u e va base
de datos se rea lice d ire cta m e n te desde la in te rfa z PH PM yA D M IN .
Verem os, a co n tin u aci n , las dos opciones.

Creacin de una base de datos


desde el panel de administracin web
En el p ro ve e d o r de h o stin g u tiliz a d o para re a liz a r estos e je rcicio s,
podem os e n co n tra r que el panel de co n tro l nos o fre ce la creaci n
de una base de datos M ySQ L. Veam os, a co n tin u a ci n , u n e jem p lo
de cm o se v is u a liz a el panel de cre a ci n de base de datos:

\\\

A D M IN IS TR A D O R E S M YSQL
M y S Q L no so lo e s a d m in istrab le v isu a lm e n te a t r a v s de la h erra m ie n ta P H P M y A D M IN . Tam bin existen
o tr a s a p lic a c io n e s in s ta la b le s en

s is te m a s o p e ra tiv o s

c o m o W in d o w s que

p erm iten adm inistrar

f cilm en te e s t e m o to r d e b a s e de d a to s: e n tre e llas, e s t n d b F o r g e S tu d io . S Q L w a v e M y S Q L C lie n t


y M y D B S tu d io .

www.redusers.com

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

F ig u ra 7. Panel de creacin de una base de datos MySQL


desde el back-end de un proveedor de hosting.
Com o p rim er paso, debem os cre a r la base de datos, llam ada,
en n u estro caso, usershop. Luego cre arem o s un u su a rio , que ser el
a d m in is tra d o r de la base de datos. Para p o d er a d m in istra rla , el paso
s ig u ie n te es d irig irn o s al panel Adm inistrar usuarios M yS Q L y a ll ele g ir
un n o m b re de u s u a rio a d m in istra d o r, u n a co n tra se a y la base de
datos a la cual se ap licar.

&

Bi

F ig u ra 8. Desde el mismo back-end de un proveedor de hosting,


podemos asignar el usuario que administrar la base de datos MySQL.
Reco rdem os que este paso no est d isp o n ib le en todos los
p ro ve e d o re s de hosting. D ep e n d ie n d o del s e rv ic io de ho stin g con el
que tengam os su scrip c i n , el panel puede v a r ia r o tal v e z no existir,

www.redusers.com

192

USERS

6 . L E N G U A J E S D E P R O G R A M A C I N

p or lo cu a l d eb erem o s re a liz a r la cre aci n y a d m in is tra c i n de


una base de datos d irectam e n te desde la in te rfa z PH PM yA D M IN .

Creacin de una base


de datos desde PHPMyADMIN
El p anel PH PM yA D M IN nos p erm ite visu a liz a r, cre a r y m an ip u lar
todo el co n te n id o de una base de datos M ySQ L. D isp one de una serie
de pestaas d esde d on d e p od rem o s re a liz a r todas las tareas ms
com unes. H a b itu alm e n te , las bases de datos creadas en M ySQ L
su elen v is u a liz a rs e en el m arco iz q u ie rd o de la p antalla, que co n tien e
un h ip e rv n c u lo . H acie n d o c lic en l pod em os acced er a v is u a liz a r
el co n ten id o de la base de datos y otras operacio nes.
Veam os ento nces cm o crear una base de datos desde el panel
de a d m in istra c i n PH PM yA D M IN . Para acced er al panel PH PM yA D M IN
in s ta la d o en n u e stro s e rv id o r web lo cal, d eb em os in g resar en
el n aveg ad o r la direccin IP de nu estra PC o de la PC donde
m o n tam o s XAMPP, seguido de la b arra / y la carp eta phpmyadmin.
P o r ejem p lo : http://127.0.0.l:8 0 8 6 /ph pm yadm in /.
Luego, ingresam o s el u su a rio y co n tra se a de a d m in istra d o r
que se leccio n a m o s al in sta la r la p lata fo rm a X A M PP o la p ro vista por
n u e stro p ro v e e d o r de ho sting . Com o resu ltad o , ve re m o s el panel de
a d m in is tra c i n PH PM yA D M IN re p re sen tad o en la Figura 9.
p h p U y A d m ln

EESH

F ig u ra 9. El panel PHPM yADM IN es la interfaz desarrollada en PHP que


permite administrar, de forma ptima y cmoda, las bases de datos MySQL.

www.redusers.com

USEKS

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

Si PH PM yA D M IN lo p erm ite, pod em os cre a r la base de datos desde


la in te rfa z grfica. Si no, desde la p esta a SQ L pod em os a cced e r a un
p an el de co m an d o s y cre a r desde a ll la base de datos a tra v s de la
se n te n cia SQL:

create D A T A B A S E usershop;

Ya creada la base de datos, debem os d e fin ir las tab las que


u tiliz a re m o s en e lla . Esta acci n p o d em o s re a liz a rla d esde el botn
u b icad o en el panel iz q u ierd o :

C r e a r T a b la .

Presio n am o s sobre l y se

a b rir u n a p a n ta lla en la que debem os d e fin ir los cam pos y tip o s de


datos de la tabla.
A co n tin u a ci n , d efin im o s las sig u ie n te s p ro p ied a d e s p ara la tabla
a crear:

SUCURSALES
COLUM N A

T IP O

L O N G IT U D /
VALO RES

Id

B ig in t

N o m b r e d e lo c a l

V a rc h a r

50

D o m ic ilio

V a rc h a r

100

L o c a lid a d

V a rc h a r

50

T e l fo n o

V a rc h a r

15

E - m a il

V a rc h a r

50

U b ic a c i n

V a rc h a r

100

M o to r de

M y IS A M

IN D IC E

P rim a r y

A U T O IN C R E M E N T O

T ru e

a lm a c e n a m ie n t o :
C o t e ja m ie n t o :

L a t in l_ s p a n is h _ c i

Tabla 1. Definicin tcnica de la tabla S u cu rsa le s.


Ya cre a d a la tabla, solo nos queda in co rp o ra r a lg u n o s registros
re sp e tan d o la co m p le titu d de to d o s los cam p o s que in clu irem o s.
Po dem os agregar n u e stro s p ro p io s re g istro s o, en su d efecto, u tiliz a r

www.redusers.com

USEFtS

6 . L E N G U A J E S D E P R O G R A M A C I N

la im p o rta c i n de datos que PH PM yA D M IN nos p ro vee en la secci n


Importar. Ju n to al m ate ria l a d ic io n a l de este lib ro , d isp o n em o s de
un a rc h iv o d escarg ab le llam ad o sucursales.sql.zip, en c u y o in te rio r
se e n co n trar un a rc h iv o con extensin .SQL desde el cual podem os
re a liz a r la cre aci n de la tabla con todos sus cam p o s y algunos
reg istros d efin id os p re v ia m e n te p ara este ejem plo.

p b p M u A d m ln
H E nroca

* u-

W *.-> < n r *a o W

WX

<

*>' biMOa.

E a|noi

i n i t i c ( o c o l o n u i l 1 1 lOmuAi w l i

y * O p . . r l. - . ..

4 M O t+ j

5ELKT

ttU w n K s
IM IT O
|E* . a | | e i l H

a C o tam o a
1U
Jd u B k l k >

1 lo tlM s I
3 S h M
;
t _
T

' u i i
M k jim m

T ipo

C rn -jo m i n

-* >

KftarflOOl Iali1_*p ofc_o


th a rttli
K h a r tlS ) M n 1_ o |i m f r .u
r h wa nt'inll . I
an rin
non .i v1 o.MIi I|.
o i qn
R h|1D D i

E*B .

*c

M JT O JB C nE * *?< r

No

to m a 9
" A l,
______ l i . ____
? __
___ Ot
-

tto
ra
No

| n p r\ i
H

-'flu n o

r U m tM .

fe

ta p M

No

g ro o
h
r.u-..m
ranpura

Un
rio

BtnoMr U t o *
Ih i m i 9 C i m a r M i
' .
-

No

0 fc*ariai to o m f t a a W rtanm i> u ' M m a tm

Faunmot

C anN oi

O F ti^ a a

'n rn o u

tu * o cooiM Tn

4 V H 3 * I - B iu in M i Kamtarwmo to a r n o a i m o c a

rnuiiwW-. o** * r .

" i

Indices. _

Figura 10. La vista desde PHPMyADMIN de la tabla Sucursales


creada para los prxim os ejercicios que realizaremos.

Figura 11. Desde el panel SQL de PHPMyADMIN tambin es posible ejecutar


comandos de creacin de base de datos y tablas, entre otros.

www.redusers.com

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

PHP y MySQL
PH P d isp o n e de una fu n ci n in te rn a que nos p erm ite co n ectarn os
a las b ases de datos, ya sea M ySQ L o c u a lq u ie r o tra de las so p o rtad as
p or este lenguaje. En esta p lata fo rm a , cada v e z que d eb em os leer
el co n te n id o de una o ms tablas, p rim e ro se debe in vo ca r la
ap ertu ra de la base de datos y luego se re a liz a la le ctu ra de las tab las
co rresp o n d ie n tes.
Para p o d er a v a n z a r con los e je rc ic io s co rres p o n d ie n te s a
este ca p tu lo , d e sarro lla re m o s a co n tin u a ci n un a rc h iv o .P H P que
d isp o n d r de las fu n cio n es que p re cisem o s p ara co n e cta rn o s a la base
de datos y re a liz a r las o p e ra cio n e s n ecesarias sobre sus tablas.
Lo que harem os ah o ra es cre a r un a rch ivo n u evo al que llam arem o s
c n .p h p . N otem os que, a d ife re n cia de lo v is to en ca p tu lo s anterio res,

el tip o de a rc h iv o que crearem o s a co n tin u a ci n no es un H TM L, sino


un a rc h iv o PH P puro, que co n te n d r todas las fu n cio n es y v a ria b le s
que necesitem os.
Ya creado el a rc h iv o , lo p rim ero que debem os h a ce r es definir,
en l, la e s tru c tu ra que nos p erm ite e scrib ir cdigo PHP. Por ello,
e scrib im o s la sig u ien te sentencia:

<?

?>
D entro de esta lla ve , p ro p ia del le n g u aje PHP, d efin ire m o s todas
las fu n cio n es y v a ria b le s que u tiliz a re m o s . Lo p rim ero que harem os
ser d e c la ra r una se rie de v a ria b le s que co n ten d rn : el n o m b re del
servid o r, la base de datos, la tabla, el u su ario y la co n tra se a que
u tiliz a re m o s p ara acce d e r a ella.

$servdor = 'lo ca lh o st';


Susuario = 'usuario7;
$passwd = 'passw o rd';
$tablasucursales = 'sucursales';
$basededatos = 'usershop';
$ query = w;

www.redusers.com

196

USEF*S\

6. L E N G U A J E S

D E P R O G R A M A C I N

Funciones mysql_connect()
y myql_select_db()
Por el m o m ento , u tiliz a re m o s estas v a ria b le s . La p rim e ra de
e lla s c o n tie n e el n o m b re del s e rv id o r d o n d e est a lo ja d a la base
de d ato s M ySQ L. C o m o PH P es un c d ig o que se e je c u ta en el
se rv id o r, d eb em o s d e fin ir localhost com o v a lo r p o r d e fe cto . La
se g u n d a v a ria b le c o n tie n e el n o m b re de u su a rio ; la te rce ra , la
c o n tra s e a u tiliz a d a para M ySQ L; la cu a rta , el n o m b re de la tab la
a la cu a l q u ere m o s acced er; la q u in ta , el n o m b re de la base de
d ato s a la que d e se a m o s co n e c ta rn o s ; y la ltim a est v a c a , pero
ser la que c o n te n d r la c o n s u lta SQ L que re c u p e ra r los d ato s que
d ese e m o s v is u a liz a r.
Seguido a la creacin de variables, crearem os la conexin a la base de
datos y la lectura de la tabla Sucursales. Este cdigo estar a continuacin
de la declaracin de variables realizada. Vemoslo:

$conn = m ysql_connect($servdor, $usuario, $passwd) o r die ('O c u rri un e rro r al


conectarse al servid or m ysql \ m y s q l_ e rro rO );
m ysql_select_db($basededatos) or d ie ('N o se pudo seleccionar la base de d a tos');
$ query = 'S E L E C T D IS T IN C T R O W (lo c a lid a d ) A S localidad F R O M \$tablasucursales;
S result = m ysq l_q u e ry($ q u e ry) o r d ie 'F a ll la co n su lta :' . m y s q L e rro rO );

La variable $conn recibe el resultado de la conexin a la base de


datos M ySQL, a travs de la fu n ci n mysql_connect(), donde pasamos
los parm etros $servidor, $usuario y $passwd. Seguida a esta funcin,
controlam os si dio error o no, m ediante or die(), donde debem os agregar
el texto a v isu a liz a r si se p ro d ujo un a falla en el intento de conexin.

P A C K A G E S 0 S P E N M YSQL
S to re d

Los

P ro c e d u r e s ('p ro ced im ien to s a lm a ce n a d o s', en esp a o l), tam b in s e pueden cre a r

en M y S Q L . A diferen cia de otros m o to re s de b a s e d e d ato s, m u cho s I S P tienen p o r d e fe c to bloqueada


e s ta funcionalidad. S e d eb e co n su lta r co n el so p o rte t c n ico del IS P si e s fa ctib le o no habilitar esta
funcionalidad en el panel d e adm inistracin w eb.

www.redusers.com

USEKS

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

197

C uand o estab lecem os co n ex i n co n el m o to r M ySQ L, nos queda


definir, a tra v s de la fu n ci n m ysql_select_db($basededatos), la base
de datos en s con la que vam o s a trabajar. A l igual que con la fu n ci n
anterior, co n tro la m o s si se p ro d uce un e rro r en el in te n to de seleccin
de la base de datos m e d ian te or die().
Por ltimo, nos queda realizar la consulta SQ L sobre la tabla Sucursales.
Esto lo realizam os poniendo la consulta SQ L dentro de la variable Squery.
la que luego pasam os como parm etro a la funcin mysqLquery.
Si rodo va bien, nos co n e cta re m o s al m o to r M ySQL,
s e leccio n a rem o s la base de datos y leerem os la tab la Su cursales
en base a la co n s u lta SQ L realizad a.

Consulta SELECT DISTINCTROW


Para quienes nunca trabajaron con sentencias SQL, destacam os
que la consulta realizada a la tabla Sucursales solo recupera uno de
todos los cam pos que contiene. El nico cam po que, por el m om ento,
querem os v isu a liz a r es L o c a lid a d , y solo deseam os m ostrar localidades
que no se repitan; por ello, u tilizam o s la sentencia DISTINCTROW () que
seleccionar slo un registro de todos los que existan.

Visualizacin de datos
Ya cream o s el cdigo del lado d e l s e rv id o r que nos p erm ite acced er
a la base de datos y c o n s u lta r su co n te n id o . Com o este lo realiz am o s
sobre un a rch ivo co n ex tensi n PHP, al ser un lenguaje de servid o r,
si a lg u ie n conoce este a rc h iv o y lo llam a de m an era in d e p e n d ie n te a
tra v s de la U R L de un n a ve g ad o r w eb, no podr v is u a liz a r el cdigo
u tiliz a d o , dado que este se e je cu ta en el s e rv id o r y d e v u e lv e una
pgin a en fo rm ato H TM L, que es lo que recibe el n a ve g ad o r web.

LIM ITA R LO S R EG IS TR O S O B TE N ID O S
C a d a con su lta en M y S Q L p u ed e lim itar la can tid ad de re g is tro s q u e se d e s e a obtener. E s to s e puede
realizar co n el c o m a n d o L iM IT x, y, el c u a l lim itar co n x el reg istro inicial y co n y el reg istro final
a m o strar. E s t a funcionalidad se utiliza al final de la se n te n c ia SQ L.

www.redusers.com

198

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

Si ejecu tam o s esta pgina en un b ro w ser y se leccio n a m o s la opcin

Ver cdigo fuente, solo ob ten d rem os una pgina en b lanco. Si esta
co n tien e g eneraci n de H TM L a tra v s de la sen tencia echo de PHP,
solo ve re m o s un H TM L esttico com o re su ltad o , p ero nunca verem o s
va ria b le s , fu n cio n e s y sen te n cia s SQ L escrita s d entro de PHP.
Para fin aliz a r la prueba realiz a d a hasta ahora, crearem os una sim ple
pgina con extensin .P H P que nos perm ita m o strar los registros
obtenid os de la co n su lta realiz a d a a la tabla Sucursales. La llam arem os

sucursales.php y, d entro de ella, escribirem o s el siguiente cdigo:


< !D 0 C T Y P E htm!>
<htm l>
<head>
< title > L is ta r localidades</title>
<m eta n a m e = "v ie w p o rt" co n te n t= "w id th = d e vce -w d th , in itia l-s c a le = l//>
</head>
<body>

<?
//V isu a liza r resultados en H T M L
requ ire 'en.php';
echo "< ta b le > \ n ";
w h ile ($ lin e = m ys q L fe tc h .a rra y S re s u lt, M Y S Q L _ A S S O C )) {
echo "\ t< tr> \ n ";
foreach ($ lin e as $ col_value) {
echo "\t\t<td>$col_value</td>\n/;;

}
echo "\t< /tr> \n";

}
echo "< /table> \n ";
rn ysq l_fre e _re su lt($ re su lt); //Liberar la tabla
m ysq l_ close($ lin k); // C e rra r la conexin M yS Q L

?>
< /body>

</html>

En principio, u tilizam o s require para que, ju n to con la pgina

sucursales.php, se cargue el cdigo desarrollado en la pgina en.php.


Seguido a esto, generam os, m ediante la sentencia echo, una tabla como

www.redusers.com

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

se u tilizaba en las prim eras version es de H T M L para estructurar datos en


pantalla. Luego nos queda, a trav s de la se n te n cia w h le(), re c o rre r la
tab la Su cu rsale s, para p o d er leer cada uno de los reg istros d evu elto s,
y as v is u a liz a rlo s d en tro de una nueva celd a de la tabla creada. La
se n te n cia m ysql_free_result() nos p erm ite lib e ra r la tab la invo cad a,
y la sen tencia m ysql_close() cierra la conexin con el s e rv id o r M ySQL.
N otem os que uno de los p arm etro s u tiliz a d o s en la fu n ci n

m ysql_fetch_array() es $result, la v a ria b le que recib e el re su lta d o de la


co n su lta SQ L en la pgina cn.php. Al in c lu ir esta ltim a pgina d entro
de sucursales.php, estam os h e red an d o de e lla las fu n cio n es y v a ria b le s
creadas y seteadas.
f u

wwrw vtcamobile com

2242

L o c a lid a d e s

Ciudad de Sueros Aires


San Carlos d? Banloch*
Crdoba
Uruguay

F ig u ra 12. El resultado de la visualizacin


de las localidades representado en una pgina PHP.

Integrar PHP con


jQuery Mobile
Ya co n los co n ce p to s bsicos de PH P y M ySQ L, a p ro vech a re m o s
la tab la Su cu rsa le s que hem os creado para re a liz a r un e jercicio
que nos ensee a co m p le m e n ta r PH P con jQ u e ry M obile. Esto nos
p e rm itir d e s a rro lla r a p lic a cio n e s w eb m vile s d in m icas, d efin ien d o
una e s tru c tu ra que se ocupe del d ise o de in te rfaz de u su ario ,

www.redusers.com

200

USEFtS

6 . L E N G U A J E S D E P R O G R A M A C I N

y que esta e s tru c tu ra a su vez co n su m a datos de una base de datos


s in n ecesid ad de estar re d ise a n d o la a p lic a c i n w eb cad a vez que
n e ce site m o s agregar o q u ita r in fo rm aci n .

Proyecto: libreras
A co n tin u a ci n , d e sa rro lla re m o s u n n u e vo e je rc ic io que co n sis tir
en re p re sen ta r la web m vil de una cad en a de lib re ra s. La a p lica ci n
p e rm itir v is u a liz a r un lista d o de su cu rs a le s ag ru p ad as por localidad ,
donde, al se le c cio n a r u n a lo ca lid a d , p od rem o s e n tra r a v e r todas
las su cu rs a le s que existen en ella. Luego, p odrem os seleccio n ar
una su cu rsa l y v e r en d etalle la in fo rm aci n , ju n to co n u n m apa de
su u b ica ci n fsica , el cual se crear de fo rm a d in m ica u tiliz a n d o
las co o rd e n ad as (la titu d y lo n g itu d ) del local.
Para p o d er lle v a r a cabo este eje rcicio , debem os haber realizad o
el e je rc ic io anterior, ya que u tiliz a re m o s M ySQ L com o base de datos
de las su cu rsale s y PH P para acce d e r a esta in fo rm aci n d in m ica y
v is u a liz a rla en pantalla.
23:23

BOOK
T IU * 4 *

ia ie m tU *

Bienvenidos a USER BOOK STORE E n nuestras


tiendas p o cra encontrar la m ejor variedad de
libros, fascculos y revistas d ed icad as a la
tecnologa

Entro la vanodad d e productoG que contam os


podem os destacar los libros ofim aticos, que
cubren toda la variedad de aplicaciones de
oficina existentes, y nuestra seccin
program acin, la cual cubre la m ayor variedad de
tecnologas y herramientas de desarrollo del
mercado actual

S t d 's S s S / ! S l

Figura 13. Nuestro


proyecto, bautizado

User Book Store,


O

Imeio

C iir u ic a la c

Toda.

nos permitir explorar


el poder en conjunto
de PHP, MySQL
y jQuery Mobile.

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

Preparar el entorno
Para p o d er lle v a r a cabo este e je rc ic io , d escarg arem o s de la seccin

Redusers Premium el m ate ria l co rre sp o n d ie n te a este ca p tu lo , ubicado


d en tro del a rc h iv o Cap06.userbookstore.rar. A q u e n co n trare m o s una
carp eta que co n tien e la e stru c tu ra b sica del sitio , la pgina p rin cip a l

(hom e.php), una carp eta (images) con las im genes que u tiliz a re m o s en
el e je rc ic io y los a rc h iv o s bsicos de PH P p ara co n e cta rn o s a M ySQ L
y p o d e r acce d e r al co n te n id o de la tabla Su cursales.
El cdigo a m o d ifica r del a rc h iv o cn.php es el siguiente:

Sservidor = ' M IS E R V I DO R M Y S Q L ';


$usuario = 'M IN O M B R E D E U S U A R IO ';
$passwd = 'M IP A S S W O R D ';
$tablasucursales = 'sucursales';
$basededatos = 'B A S E D E D A T O S C R E A D A ';
$query = w; //variable a u tiliza r
$ qu e rylib re ria s = w; //variable a u tiliza r
$ ltroloca lid a d = ' y; //variable a u tiliza r

En el a rc h iv o cn.php deb em os m o d ifica r las va ria b le s


co rre s p o n d ie n te s que nos p e rm ite n acced er a la base de datos M ySQ L
de n u e stro s e rv id o r web p erso n al o el in stala d o m ed iante la so lucin
X A M PP m e n cio n ad a en el in icio de este cap tu lo.
Con esto ya aju stad o , nos queda cre a r la pgina sucursales.php,
d on d e lista re m o s las su cu rs a le s de esta cad ena de lib re ras,
v is u a liz a n d o un L is tV ie w con las lo ca lid a d e s donde hay uno o ms
lo cales. Para ello, agregam os el sig u ien te cdigo base en el a rch ivo

sucursales.php:
< !D 0 C T Y P E htm l>
<htm l>
< head>

< title > U S E R Book Store< /title>


c m e ta n a m e = "v ie w p o rt" c o n te n t= "w id th = d e vice -w id th / in itia l-s c a le = l">
<linl< re l= "s ty le s h e e t" h r e f = " http://code.jquery.com/m obile/1.3.2/jquery.
m ob ile-1 .3 .2 .m n.css" />
< script s r c = " http://code.jquery.com /jqiiery-1 .9.1 .m n.js">< /script>

www.redusers.com

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

<script src=77http://code.jquery.com/mobile/1.3.2/jquery.moble-1.3.2.min.
js77x/ s c rip t>
<?

//Llamar los archivos Require


?>

</script>
</head>
<body>
<div data-role=77page77id=//index// data-theme=//d//>
<div data-role=77header77data-theme=7'c77data-position=/7fixed77>
<div id="im agenLogo" align=77center">
<mg src="mages/Logo250x42.png" style=//max-width:250px;minwidth:250px//alt=', USER Book Store77longdesc=77USER Book Store77>
</dv>

</dv>
<div data-role=7/content7/data-theme=/'d/7>
<p algn=/7center7'><strong>Sucursales USER BOOK STORE</strong></
P>

<br>
<P>
<?

//Cdigo PHP
?>

</p>
</div>
<div data-role=77footer77data-position=77fixed77data-theme=7/c77dataposition=77fixed77>
<div data-role="navbar,7>
<ul>
d i x a href=77home.php7/ data-icon=7/home77> Inicio< /ax/li>
< l i x a href=77#77data-icon=77search77>Sucursales</ax/li>
< l i x a href=77#77data-icon=77plus77>Profesionales</ax/l>
</ul>
</div>
</div>
</div>
</body>

</html>

www.redusers.com

ES2 Z 3

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

203

Esto nos p erm ite te n er el cdigo base p ara la pgin a que lis ta r
las lo ca lid a d e s. D entro de la se cci n content de jQ u e r y M obile,
re se rva m o s el espacio co rre sp o n d ie n te para e scrib ir el cdigo PH P
que crear, de m anera d in m ica , el L is tV ie w que nos m o strar todas
las lo ca lid a d e s existen tes en la tab la, to m n d o las del cam p o localidad
de la tab la Su cursales.
A n te s de e s c rib ir el cdigo co rresp o n d ie n te , cre arem o s un nuevo
a rc h iv o lla m a d o selectsuc.php, d onde in clu ire m o s la co n su lta SQL
co rre sp o n d ie n te que nos p e rm itir filtra r las lo ca lid a d e s de form a
in d iv id u a l cargad as en cada reg istro de la tabla Sucursales.
El cdigo de este a rc h iv o es el siguiente:

<?
$ q u e rylib re ria s = 'S E L E C T D IS T IN C T R O W (lo ca lid a d ) A S localidad
F R O M sucursales L I M I T O ,3 0 ';
$ result = m ysq l_ q u e ry($ q u e rylib re ria s) o r d ie ('F a ll la c o n s u lt a :'. m ys q L
e rro rO );

?>

A tra v s de la v a ria b le $querylibrerias, generam os una co n su lta SQL,


en la cual u tiliz a m o s la cl u su la D IS T IN C T R O W , que nos p e rm itir
o b te n e r un n ico reg istro entre N rep etid o s. De esta m anera, podem os
co n o ce r el lista d o de cad a lo ca lid a d nica. Luego, a tra v s de la
va ria b le $result, e je cu tam o s la co n s u lta SQ L en la base de datos
para o b te n e r el co n ju n to de reg istros co rresp o n d ie n te .
Ahora vo lvem o s al cdigo del arch ivo sucursales.php. En el apartado

<Header>, ju s to debajo de todas las d eclaracio n es <script>, encontram os


una pequea sen tencia PHP, a tra v s de la cual in clu im o s el arch ivo

en.php, que contiene el co n ju n to de variab le s con la in fo rm aci n de


u suario, passw ord y base de datos, y la conexin a M ySQL.
D ebajo de este a rc h iv o , in clu im o s la llam ad a a selectsuc.php, en el
que, al cargarse ju n to co n la pgina in vo ca d a , e jecu ta m o s la co n su lta
en s. Debem os tener en cu e n ta que el llam ad o al a rch ivo en.php ya se
hizo, p or lo que ya tenem os conexin a la base de datos M ySQ L.

require 'en.php';
require 'selectsuc.php';

www.redusers.com

204

l/SERSl

6.

L E N G U A JE S D E P R O G R A M A C I N

Ahora solo nos resta escrib ir d entro del cuerpo p rincip al de la pgina
el cdigo PHP que nos listar, a travs de un w idget ListView, el conjunto
de localidades que tienen una o ms libreras. Ubicam os el cdigo PH P
iniciado cuando cream os la pgina y elim inam os la lnea correspondiente
al com entario. En su lugar, agregam os la siguiente sentencia:

<?
echo " < u l d a ta -ro le = /listvie w / d a ta -in s e t= 'tru e '> ";
w h ile ($ ro w = m ysql_fetch_assoc($ result))(
$ filtrolocalid ad = $ ro w ['lo c a lid a d '];
S filtro lib re ria s = "lib re ria s .p h p ? l= /'.$ filtro lo ca ld a d ;
echo " c l i x a h ref= //L $ filt r o lib r e n a s " V L $ r o w ['lo c a lid a d /].//< / a x / li> ,/;

}
echo "< / u l> ";

?>

Este b lo q u e de c d ig o PH P u tiliz a la sen tencia

L A S E N T E N C IA
E C H O S E U T ILIZ A
PARA C REAR
D E F O R M A D IN M IC A
UN W ID G E T L IS T V IE W

echo p ara cre a r de fo rm a d in m ica un w id g et


ListV iew . La in s tru c c i n while p erm ite re co rre r
el set de reg istros que cargam os le y e n d o la tabla
Su cu rsa le s en la v a ria b le $result. R eco rre desde el
p rim ero hasta el ltim o y se asig n a a la variab le

Sfiltrolocalidad el v a lo r del cam po localidad del


reg istro que se est leyendo.
Luego asignam o s, en la va ria b le $filtrolibrerias,
una U R L p ara m e triz a d a que nos p e rm itir ,
al p re sio n a r sobre ella, lis ta r todas las lib re ra s

existentes en esa lo calid ad . Por ltim o escrib im o s, m e d ian te la


sen tencia echo, el Lis tlte m co rre sp o n d ie n te cu yo n o m b re co rresp o nd e
a la lo ca lid a d que estam o s re co rrie n d o m ed iante la sen tencia while.

Tal c o m o vim o s en los cap tu lo s a n te rio re s, p o d e m o s o p ta r p o r la c re a c i n d e un m en inferior,


utilizando el c o m a n d o NavBar d e jQ u e ry M obile, o d e un m en lateral, utilizando el c o m a n d o Panel d e e s te
fram e w o rk . E s te ltimo n o s s e r til para aq uellos p ro y e c to s que requieran m s e s p a c io en pantalla.

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

fp r

205

- . . , 3 3,1

* w viciamofcie coro ar.MobdeW,h/i:.a|

C IQ

BOOK

S u u u M l n U S E R BO O K ST O R E

C iu d a d d e B u e n o s A ire s

S a n C a rio d e B a rilo e h e

Crdoba

U iuyuuy

o
F ig u ra 14. La pgina
s u c u r s a l e s .p h p ya
visualiza las localidades

o
imoo

radas

Sicuraates

O
^

que tienen al menos una


sucursal de la cadena
de libreras.

Libreras por localidad


A co n tin u a ci n , cream o s una n u e va pgina PH P que nos p e rm itir
o b te n e r el lista d o de lib re ra s de la lo calid a d se leccio n a d a co n el
L is tV ie w creado en la pgina sucursales.php. La e stru c tu ra b sica
del n u evo a rch ivo , al que lla m a re m o s libreras.php, es el siguiente:

d D O C T Y P E h t m l>

< htm l>


<head>
< title > U S E R Books Store< /title>
c m e ta n a m e = "v ie w p o rt" c o n te n t= "w id th = d e vice -w id th y in ta l-s c a le = l//>
<lnl< re l= "s ty le s h e e t" h r e f = " http://code.jquery.com/m obile/1.3.2/jquery.
m obile-1 .3.2 .m in.css// />
< s c r i p t s r c = //h t t p : / / c o d e . j q u e r y . c o m / j q u e r y - 1 . 9 . 1 . m i n . j s ,/> < / s c r p t >

< script s r c = " http://code.jquery.com /m oble/L3.2/jquery.m obile-1.3.2.m n.


js"> < /scrip t>

<?
//obtener lib rera s segn la localidad seleccionada

www.redusers.com

S E F tS

6.

LENGUAJES DE PROGRAMACIN

?>
</script>
</head>
<body>
< d iv d a ta -ro le = "p a g e " d=//index// d a ta -th e m e = "d ">
<dv d a ta -ro le = "h e a d e r" d a ta -th e m e = "c " d a ta -p o s to n = "fixe d ">
<div id = "im a g e n L o g o " a lig n = //ce n te r//>
< m g src= "im a ges/Logo2 5 0 x4 2 .p n g" style = "m a x-w id th :2 5 0 p x ;m in w id th :2 5 0 p x" a lt = " U S E R Book S to r e " lo n g d e s c = "U S E R Book S to re ">

</div>
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
<p a lig n = "c e n te r"xs tro n g > L o c a lid a d : <? //filtro aplicado ?> < /strongx/p>
<br>
<P>

<?
//Listar las sucursales obtenidas

?>
</p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fixe d " d a ta -th e m e = "c " d a ta p o s itio n = "fix e d ">
< d iv d a ta -ro le = "n a v b a r">
<ul>
< l i x a h re f= "h o m e .p h p " data-icon = //h o m e"> In icio< /a> < /li>
< l i x a h r e f = " # " d ata-icon = "search"> S ucu rsales< /a> < /li>
< l i x a h ref= //# // data-icon = //plus"> Profesionales</a> </li>
</ul>

</div>
</div>
</div>
<^body>
</html>

Esta pgina tiene la p articu larid ad de estru ctu ra r el llam ad o a


a rch ivo s .PH P que u tiliz a m o s con la sentencia require, de una m anera
d istin ta a la que vim o s en la pgina sucursales.php. En el <Header> de
esta pgina a b rim o s una llave con cdigo PH P y escrib im os lo siguiente:

www.redusers.com

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

E2 S2 Z 3

207

requ ire 'en.php';


$ filtrolocald ad = $ _ G E T [ " I " ] ;
if (trm ($ filtro lo c a lid a d ) = = " " ) (
$ ltroloca lid a d = "T o d a s ";
Ssqlquery = " S E L E C T nom bredelocal, dom icilio F R O M sucursales
L I M I T O , 1 0 0 ";

}
else {
$sqlquery = " S E L E C T nom bredelocal, dom icilio F R O M sucursales
W H E R E localidad = w/.$ filtrolocalid ad /,/ L I M I T 0 ,1 0 0 " ;

}
require 'selectlocalidad.php';

En el <Header> in clu im o s, en la p rim e ra linea, el llam ad o a l a rch ivo

cn.php, el cual o b tien e las v a ria b le s necesarias y se conecta a la base


de datos M ySQ L. Luego, al lla m a r la pgina libreras.php desde la
pgina sucursales.php, en la U RL pasam os com o p arm etro una va ria b le
d en o m in a d a $1, a la que le in d ica m o s qu lo ca lid a d debe filtrar.
Esta va ria b le es la que hered a el filtro que debem os u tiliz a r en la
co n su lta a la base de datos. A co n tin u a ci n , asignam o s en la va ria b le

$filtrolocaiidad el v a lo r o b ten id o a tra v s del paso de p arm etro s de


la URL. Para ello, u tiliz a m o s la se n te n cia $ _ G E T [], p o n ien d o entre
co rch etes y co m illa s dob les el n o m b re de la va ria b le $1 pasad a com o
p arm etro , pero o b v ian d o el signo $, que no es n ecesario . Seguido
a esto, a tra v s de la se n te n cia if, co n su lta m o s si en $filtrolocaldad
se guard o no un valor. Si no se guard,
le asig n am o s a esta va ria b le el v a lo r Todas ,
y arm am o s una co n su lta en $sqlquery que

SEGN EL

d e v u e lv a todas las lib re ra s. Si la va ria b le

$filtrolocalidad tiene un v a lo r asignado, arm am os


la co n su lta SQ L in d ic a n d o com o p arm etro el
v a lo r de esta v a ria b le . P o r ltim o , llam am o s a

require selectlocalidad.php para e je cu ta r el va lo r


de la va ria b le $sqlquery.
Entonces, d ep e n d ie n d o del resu lta d o obtenido

R E S U L T A D O D E L IF,
S E C O N S U L T A R PO R
TODOS O P A R T E DE
LO S R E G IS T R O S

a tra v s de la co n d ic i n if, se cre a r u n a co n su lta


SQ L esp ecfica p ara que d e v u e lv a la in fo rm a c i n
filtrad a o el total de re g istro s existentes.

www.redusers.com

208

USEFtS

6 . L E N G U A J E S D E P R O G R A M A C I N

Informar las sucursales que se listan


En base al c o n tro l que h icim o s a tra v s de la co n d ic i n if,
a p ro ve ch a m o s que tenem o s la in fo rm ac i n de la lo calid a d a v is u a liz a r
y la m o stram o s com o ttu lo en el cu erp o de la pgina. D entro de
las lla v e s de cdigo PH P que p reced en al ttu lo Localidad, agregam os
el siguiente cdigo:

echo $ filtrolocaldad ;

Esto p e rm itir co n o ce r si filtram o s una lo c a lid a d e sp e cfica o si


v is u a liz a m o s todas las lo calid ad es.
Por ltim o , nos queda agregar el cdigo co rre sp o n d ie n te p ara crear
el L is tV ie w d in m ico y que este nos m u estre en d etalle el nom bre
d el local listad o y el d o m icilio . Esta in fo rm a c i n la v is u a liz a r en el
m ism o Listltem , el cual d u p lica el co n te n id o que v is u a liz a cada tem ,
fo rm a te an d o la in fo rm a c i n con u n ttu lo y un prrafo.

F ig u ra 15. Al seleccionar una localidad, el sistema cargar


todas las libreras, obtenindolas a travs de la consulta SQL.
Veam os a co n tin u a ci n el cdigo:

e c h o "< u l d a ta -ro le = 'lis tv e w ' d a ta -in s e t= 'tru e '> ";


w h ile ($ ro w = m ysql_fetch_assoc($ resultado)){
echo " c l i x a h re f= 'd e ta lle .p h p ? d = " $ ro w ['n o m b r e d e lo c a n "'> ";

www.redusers.com

B s s a

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

209

echo "< h 2 > ".$ ro w ['n o m b re d e lo c a l/].//</h2>//;


echo " < p x p > " ;
e c h o "< p > ,/.$ ro w ['d o m c ilio /]/'< /p > //;
e c h o " < / a x / l> " ;

}
e c h o "< / u l> ";

Nuevam ente cream os, a travs de la sentencia e ch o , la estructura


b sica de un ListView , co m b innd o la con la sentencia w h ile (), que nos
p erm ite re co rrer el set de registros obtenidos. C ream os un h ip ervn cu lo
para cada tem , lo que nos p erm itir ir al d etalle de la inform acin
de la lib rera. Seguido a esto, visu aliz a m o s, m ediante el form ato < h2 > ,
el nom bre del local, y el d om icilio , m ed iante el form ato < p>.

Visualizar la informacin completa


En el tram o final del ejercicio, nos queda desplegar una ltim a
pgina que nos perm ita acceder al detalle de una librera. En esta
pgina podrem os ve r el nom bre del local, su dom icilio, un m apa con
la ubicacin fsica, el telfono y su e m ail. En estos ltim os dos cam pos
crearem os los h ip ervn culo s necesarios para in icia r una com unicacin
telefn ica desde la W ebApp o e n via r un correo de consulta.

Creacin de mapa dinmico utilizando Bing Maps


Para poder v is u a liz a r un m apa esttico que se cree de form a
d in m ica en vi n d o le las coord enadas co rresp o nd ien tes, en este
e je rcicio u tiliz are m o s los se rvicio s de Bing Maps. Si tenem os cuenta
de correo ele ctr n ico de Hotmail.com u Outlook.com, podrem os
u tiliz a rla para registrarno s en el se rv icio de Bing M aps Portal y poder
o bten er el token co rresp o nd iente para u tiliz a r en nuestro sitio web.
Este token es una cla v e a lfa n u m ric a que se debe p asar com o
p arm etro en la U RL que genera la im ag en del m ap a esttico de Bing.
Es un re q u isito im p o rtan te para p o d er d e s a rro lla r esta parte del
e je rc ic io . Podem os, com o a lte rn a tiv a , cre a r un a rc h iv o de im agen
que cap ture las co o rd e n ad as del d o m ic ilio y a so cia rlo con
el co rre sp o n d ie n te reg istro, pero esta tarea d eb eram o s hacerla a
fu tu ro p or cada n u evo re g istro que se agregue en la base de datos.

www.redusers.com

210

USERS

6 . L E N G U A J E S D E P R O G R A M A C I N

Po r ello, es m s til crear el co rre sp o n d ie n te token o A P I K e y


y so lo o cu p arn o s de tener las co o rd e n ad as alm acen ad as en un
re g istro para luego p asarlas com o p arm etro y que la im agen
del m apa se genere a u to m ticam en te.
Para cre a r la clave, nos d irig im o s a w w w .b in g m a p s p o r t a l.c o m
y nos Iog ueam o s com o usu ario s. U na v e z re a liz a d o esto, d entro de la
p a n ta lla p rin c ip a l de este recu rso e n co n trare m o s el m en My Accounts
y, por debajo de este, la o p ci n Create or view keys. In g resam o s a esta
o p ci n y cargam os la in fo rm a c i n que nos solicita.
En el apartado A p p lic a tio n Typ e podemos especificar el tipo de objetivo
que tendr el consum o de mapas Bing. Si es para una aplicacin comercial,
seguramente deberemos pagar un canon mensual. Podem os utilizar, a
m odo de prueba, las opciones Public Website, Education o Prvate Website.
Por ltim o obtend rem os la clave, que ser u n a cad ena alfan um rica
s im ila r a la siguiente:

Au06VfPiYbbaDSf5987aSFdsfdsfHjyyhm apsdariW SF557m ssdRy77er.

Ifc in g

b5

S= -

,iw

wTii*. M
.I
twrlh.W i " * M

M
I.H1
.*

.1

F ig u ra 16. A partir de w w w .b in g m a p sp o rtal.co m podem os crear las

claves necesarias para utilizar los mapas de Bing desde nuestra aplicacin.

Crear el detalle de la sucursal


U na vez que la gestin de la API K ey de Bing M aps fue realizad a,
nos queda crear una nueva pgina a la que llam arem o s detalle.php,

www.redusers.com

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

B s s a

211

que co rresp o nd e a la que estam o s in vo ca n d o desde los h ip e rv n c u lo s


d in m ico s creados en la pgina sucursales.php.
La e s tru c tu ra de esta pgina es la siguiente:

< !D 0 C T Y P E htm l>


<htm l>
<head>
< title > U S E R Books S tore< /title>
<m eta n a m e = "v ie w p o rt" c o n te n t= "w id th = d e vice -w id th , in itia l-s c a le = l">
< link re l= "s ty le s h e e t" h re f= " http://code.jquery.eom /m obile/l.3.2/jquery.
m ob ile-1 .3 .2 .m n.css" />
<scrpt src= //http://code.jquery.com /jquery-1.9.1.m in.js//></script>
<scrpt s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m in.
js " x / s c r ip t >

<?
//Obtener sucursal a visualiza r

?>
</head>
<body>
< d iv d a ta -ro le = //page// id = "in d e x " 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 " d a ta -p o s ito n = "fixe d ">
<div id= //im a ge n Logo // a lig n = //ce n te r//>
<im g src= "im ages/Logo2 5 0 x4 2 .pn g" s ty le = "m a x-w id th :2 5 0 p x ;m in w id th :2 5 0 p x " a lt= " U S E R Book S to r e " lo n g d e s c = "U S E R Book S to re ">

</div>
</d v>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">

<?
//M ostrar el detalle de la sucursal

?>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fix e d " d a ta -th e m e = "c " da ta p o s ito n = "fixe d ">
<div d a ta -ro le = "n a v b a r">
<ul>
c l i x a h r e f= "# " d a ta -re l= "b a c k " data-icon = "b ack,,> V o lv e r< / a x / li>
< l i x a h ref= "su cu rsa le s.p h p " data-icon = "se arch "> S u cu rsale s< /

www.redusers.com

212

USEFtS

6. L E N G U A J E S

D E P R O G R A M A C I N

a></li>
c l i x a h re f= "lib re n a s .p h p ? $ l= " d a ta -c o n = "g n d //>Todas</a></l>
</ul>

</div>
</div>
</div>
</body>
</html>

El o b je tivo de esta pgina ser lis ta r el d etalle de la lib re ra .


V is u a liz a re m o s el nom bre, el m ap a de su ub icaci n, el d o m icilio ,
la lo ca lid ad y, por ltim o , dos vvidgets button, donde pod rem os
in v o c a r el llam ado te le f n ico a la su cu rsal o generar una nueva
co n su lta p o r e-mail a su d ire cc i n de co rreo. C o m o h icim o s en las
p ginas an te rio re s, cream o s un cdigo en el a p artad o <header> de
esta pgina, donde agregam os la sig u ien te sen tencia PHP:

re q u ire 'c n .p h p 7;

Sfiltrodetalle = $ _G ET ["d "];


if (trim($filtrodetalle) ==v/) {
headerCLocation: sucursales.php');
)
else {
$sqlquery = "S E L E C T * FROM sucursales W H E R E nombredelocal = '".$filtrodetalle/" L IM IT O , 1";
}
requ ire 'se le ctd e talle .ph p';

In vo cam o s in icia lm e n te al a rc h iv o cn.php p ara co n e cta rn o s a M ySQ L


y a la base de d atos co rresp o n d ie n te . Luego obtenem o s, en la va ria b le

$filtrodetalle, el v a lo r del p arm etro pasado por URL. Seguidam ente,


m e d ian te la co n d ic i n if, co n tro lam o s que la va ria b le tenga un v a lo r
asignado. Si no lo tiene, e n to nce s re d ire ccio n a m o s al u s u a rio a
la pgina sucursales.php, para que seleccio n e una su cu rsal vlid a.
De esta m anera e vitam o s que el u su a rio cargue d irectam e n te
la pgina detalle.php sin un v a lo r v lid o com o p arm etro.
Si la va ria b le $filtrodetalle tien e un valor, en to nces obtenem os,
m e d ian te la co n su lta SQ L, el n o m b re del lo cal que deseam os

www.redusers.com

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

B S S 3

213

visu a liz a r. P o r ltim o , in vo ca m o s el a rch ivo selectdetalle.php, que


crearem o s a co n tin u aci n :
<?
$ resultado = m ysql_query<$sqlquery) or d ie O F a ll la c o n s u lt a :'. m ys q L e r-

rorO);
?>

Este archivo, al igual que los anteriores, slo se ocupa de invocar


la consulta SQL cargado en la variable $sqlquery, y obtener el registro
especificado com o parmetro. Volvem os al archivo detalle.php. En el
cuerpo del m ism o agregamos el siguiente cdigo:

w h ile ($ ro w = m ysql_fetch_assoc($ resultado)){


echo " < p a lign = /center/x s t r o n g > //.$ row ['n om b re d eloca l/]/ /</strong></p>//;
echo "< d v id = 've rM a p a ' a lig r W c e n t e r V ';
Scoordenada = Srow L'ub icacio n'J;
Sancho = 350;
S alto = 150;
Smapa = " h ttp ://d ev.virtu ale arth.n et/R E S T/vl/lm agery/M ap/R o adr.S coo
rdenada/71 6?m apS ize=".S ancho/7/ '.$ a lto ."& p p = ".$ c o o rd e n a d a / 7;6 4 ;U & k e y = A
P I_l< E Y _ D E _ B 1N G M A P S " ;
echo "< m g b orde r= 737style = 7b o rd e r-c o lo r:g re y' src= /7/.$m apa/7/
title = /7'.$coordenada///> //;
echo "< /d iv> 77;
echo "< p x s tro n g > D o m ic lio :< / s tro n g > u.$ ro w ['d o m icilo 7]/ 7< /p > ";
//echo " < b r > " ;
echo "< p > < s tro n g > L o c a lid a d :< / s tro n g > ".$ ro w r'lo c a lid a d ']."< / p > ";
Slink = " t e l: /7.$ ro w ['te le fo n o 7] ;
echo " < a h ref= /7/.Slink/7' d a ta -ro le = 7button7data-corn e rs= 7fa lse '> L la m a r:
u.$ ro w ['te le fo n o 7] " < / a > " ;
//echo u< b r> 7/;
$ l n k = " m a l t o : //. $ r o w [ ' e m a i l /] / /? s u b j e c t = C o n s u l t a % 2 0 d e s d e % 2 0 l a % 2 0

w e b ";
echo " < a h ref= /" .$ lin k / " d a ta -ro le = 'b u tto n ' d a ta -co rn e rs= 'fa ls e '> E n via r
consulta x e m a ik / a > ";

www.redusers.com

214

USEFtS

6 . L E N G U A J E S D E P R O G R A M A C I N

Al igual que en la carga de un conjunto de registros, se debe iniciar un


bucle while para poder cargar el nico registro obtenido. Luego creamos
un prrafo con alineacin al centro de la pgina, donde visualizam os el
nombre del local. Creamos un div, centrado tambin, donde ubicaremos la
imagen del mapa dinmico que invocaremos desde Bing Maps.
Luego, en las tre s v a ria b le s sig u ien tes, $coordenada, $ancho y

Salto, aju stam o s los va lo res que p e rm itir n id e n tific a r y fo rm a te ar


el m apa que necesitam o s visu a liz a r. En la va ria b le $coordenada,
co n figuram o s el d ato alm acen ad o en el cam po ubicacin, el cual
co n tie n e las co o rd e n ad as que debem os id e n tifica r en el mapa.
Luego, en las v a ria b le s Sancho y Salto, seteam os los va lo re s w idth
y height, resp e ctivam e n te, que le d arem o s al m apa en p antalla.
Por defecto establecemos un valor pequeo, pensado para un
smartphone, pero este puede volverse dinm ico si combinamos PH P con
Ja va S crip t para obtener el ancho de la pantalla del equipo. Igualmente,
debemos verificar la docum entacin de Bing Maps, ya que, en estos
casos, los mapas estticos poseen un ancho mximo definido que no
puede superar determ inada cantidad de pixeles. Esta docum entacin es
cambiante, por lo tanto, debemos consultarla peridicam ente dependiendo
del tipo de proyecto que abordem os con mapas estticos o dinm icos.

c o

BOOK

BOOK

l o c ik la d : < iui'jiiI ile lluetwn Arr-

D w m d te

A H r ra lu v ta tZ X I
u

CAA

*-

ii * * - m i im M r a t

Figura 17. Al seleccionar una librera, se listar el detalle de esta,


visualizando su ubicacin desde un mapa esttico generado con Bing Maps.
Sig u ien d o en la co n fo rm a ci n del d etalle de los datos de la lib re ra
co n su lta d a, en la v a ria b le $mapa seteam os la U R L co rresp o n d ie n te a

www.redusers.com

C E2 Z3

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

215

Bin g M aps, co m b in a n d o en la U R L los v a lo re s o b ten id o s en la variab le


anterior. Esta U RL est co n fo rm a d a p or una serie de p arm etros
p e rs o n a liz a b le s que p od rem o s co n su lta r en el p o rtal de Bing Maps,
p ara agregar o m o d ificar los datos p or d efe cto aq u generados.
Seguido a esto, cream os una imagen con un borde de 3 p ix e le s en
color gris y establecem os com o destino el valo r contenido en la variable

$mapa. Luego nos queda m o strar el dato del d om icilio y localidad de la


librera. Por ltim o, cream os dos h ip ervn culo s del tipo button, donde
establecem os: en el prim ero, el discado del nm ero telefnico del local,
y en el segundo, un h ip ervn cu lo que inicie un nuevo m ensaje de correo
electrnico, donde podem os vo lca r la consulta a realizar.
N u estro e je rc ic io ya est co m p leto . So lo nos resta n aveg ar p or l
y p ro b a r a fondo las fu n cio n a lid a d e s im p lem en tad as.

Figura 18. Los botones generados en el detalle


tambin poseen la funcionalidad de iniciar un llamado
o enviar un correo electrnico a la sucursal visualizada.

RESUMEN
A lo largo d e e s te captulo, realizam o s una rpida introduccin al lenguaje P H P y al siste m a de b a se d e datos
M y S Q L . C o n o c im o s h erra m ie n ta s c o m o X A M PP, q u e nos perm ite c o n ta r c o n un siste m a w e b m o n tad o en
n u estra co m p u ta d o ra p ersonal, re p a s a m o s la herram ienta P H P M yA D M IN , con el fin d e ad m inistrar M y S Q L
de form a visu al, y realizam o s un ejercicio com p leto que n o s p erm iti com b in ar H T M L5 , Ja v a S c r ip t , jQuery
M obile, P H P y M y S Q L para g e n e ra r un p o rtal d inm ico q u e a p ro vech e la s c a ra c te rs tic a s d e una b a se
d e d ato s, e l sistem a de co m u n ica c io n e s de los telfo n o s m viles y los m a p a s e s t tic o s que B in g M ap s
pone a n u estra d isposicin.

www.redusers.com

216

USEFtS

6.

L E N G U A J E S D E P R O G R A M A C I N

Actividades
T E S T DE A U TO E V A L U A C I N _________________
1

Qu significa PHP?

Cul es la form a de iniciar un bloque de cdigo en este lenguaje?

Cul es la estructura de una funcin PHP?

Las funciones PHP pueden recibir parmetros?

Las funciones PHP pueden devolver un resultado?

Cmo se puede administrar visualmente una base de datos M yS Q L?

E JE R C IC IO S P R C TIC O S
1

Agregue al m enos un registro ms con una nueva localidad en M ySQL


y su correspondiente coordenada (utilice B in g M a p s o G o o g le M aps
para conseguir las coordenadas correctas de la direccin agregada).

Liste la seccin S u c u rs a le s para validar que la nueva localidad se visualice.

Desde la aplicacin, ingrese a la localidad y al detalle de esta para visualizar


su correcto funcionamiento.

Agregue un cam po ms a la tabla M ySQL que sea del tipo booleano


y modifique la aplicacin para que solo liste localidades y libreras
que tengan el valor T R U E en este nuevo campo.

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

www.redusers.com

* n

\\\\\\\\\\\\\\\

///////////////

Almacenamiento local
y aplicaciones offline
En e s t e capitulo r e p a s a r e m o s las di fer en tes p r o p u e s t a s de
HTML5 para a l m a c e n a r sitios y d a t o s en los di s p o si ti vo s del
usuario. A tr a v s del a lm a c e n a m ie n to local, p o d r e m o s g u a rd ar
d e s d e informacin simple has ta una b a s e de d a t o s en el
n a v e g a d o r w e b mvil. Tambin c o n o c e r e m o s las aplicaciones
offline que permiten d e s c a r g a r una WebApp co m p le ta
y utilizarla sin ne c e s i d a d de e s ta r c o n e c t a d o s a internet.

Almacenamiento local............218

Aplicaciones offline.................233

Ejercicio prctico:

Resumen.................................... 237

almacenamiento local............. 225


t

Bases de datos Web S Q L ....... 228


-rlndexed Database.....................233

7 1 Z1

Actividades................................238

218

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L IC A C IO N E S O F F L IN E

Almacenamiento local
El co nglom erado de ca ra cte rsticas que HTML5 trajo al m undo web
y a la Web m vil in clu ye, tam bin, cam bios im p o rtantes en cuanto
a alm acenam ien to local del lado del cliente. Desde los in icio s de la
Web -tal com o la conocem os hoy-, todo tip o de alm acenam iento de
in fo rm aci n en las com p utadoras del clien te se llev a cabo u tiliza n d o
el m todo de cookies. Este im p arta la creaci n de una especie de
a rch ivo que oficiaba de va ria b le en el equipo cliente, en el que se
alm acenab a in fo rm aci n im p o rtante que s e rv ira para re u tiliz a r
en el sitio web d u ra n te todo el tiem po de navegacin de un usuario.
La inform acin de datos alm acenada en cookies poda estar o no atada
a una fecha de ven cim iento especfica. Si, p or ejem plo, le preguntam os
al usuario de una pgina web su nom bre cuando ingresa por prim era
vez, el valo r ingresado por el usuario puede alm acenarse en u n a cookie
y reutilizarse todas las veces que este vu e lva a ingresar a al sitio web,
o bien elim inarse luego de un perodo de tiem po determ inado.
Sin em bargo, con la e vo lu ci n del lenguaje H TM L, desde el
m odelo im p uesto p or HTM L5, se p lan te una m ejora en cuanto a
a lm acenam iento de la in fo rm aci n en los equipos del usuario, que
b rin d a una alte rn a tiv a ms co m p leta a las clsicas cookies, desde
la caracterstica de alm acenam iento lo cal (o, en ingls, local storage).

..............

>n i M

a w

o M -W

iw ii,T m u

Figura 1. Desde los navegadores de escritorio, utilizando las


herramientas para el desarrollador, podemos acceder a visualizar las
diferentes opciones de almacenamiento que nos brinda HTML5.

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

USEKS

219

Local storage
El a lm a ce n a m ie n to local, co n o cid o com o local storage en HTM L5,
nos p erm ite g u ard ar una ca n tid ad m ucho m ayo r de datos en el
eq u ip o del clie n te que lo que h a b itu a lm en te p erm ite g u a rd a r una
cookie. Lo cal storage nos o frece u n a cap acid ad de 5 m e g a b y te s de
alm a ce n am ie n to local, co n tra los 4 kilobytes m xim os que perm ite
g u ard ar cada cookie.
O tra de las v e n ta ja s d estacad as del
alm a ce n am ie n to lo cal es que cada sitio web
que u tiliz a cookies en el equipo clie n te e n va
los datos de esta p or cada p etici n clie n te /

L O C A L S T O R A G E NOS
P E R M IT E GUARDAR

s e rv id o r que se re a liz a entre el b ro w se r y la


web v is ita d a . Esto sucede co m n m en te cuando
se crea una cookie de sesi n de u su ario , que

M S DATOS Q U E U N A
CO O KIE E N E L EQ U IPO

debe v ia ja r d u ra n te cada v is ita o actu a liz a ci n

D E L C L IE N T E

de in fo rm a c i n en una pgina web.


Si bien las cookies no d ejan de se r tiles
p ara m u ch as im p le m e n ta cio n e s de co m u n ica ci n
y m an ejo de datos, este e n vo co n stan te de

in fo rm a c i n entre el eq u ip o clie n te y el s e rv id o r genera ra le n tiz a c i n


de la co m u n ica c i n entre los extrem os y hasta puede p re se n tar
p ro b lem as de seguridad in fo rm tic a si la in fo rm a c i n alm acenad a
es sen sib le y no est cifrada.
A s es com o H TM L5, en la cre aci n de la e s p e cifica c i n de
alm a ce n am ie n to de d ato s locales, d ecid i b rin d a r una a lte rn a tiv a
a las cl sica s cookies, p rese n ta n d o la so lu c i n a tra v s de la
im p le m e n ta ci n de lo ca l storage y sessio n storage, p ara alm acen ar
datos lo cales v a rio s o in fo rm ac i n segura sobre la sesi n de un
u su ario m ed ian te login.

i/ i/ i/

W EB S TO R A G E EN H TM L5
Tanto local sto ra g e c o m o s e ssio n s to ra g e so n im p le m e n ta cio n e s que n a c e n de la A P I W e b S t o r a g e
d eta lla d a en la e s p e c ific a c i n de H T M L5 . L a c re a c i n d e e s to s e le m e n to s se re aliz al c o n c e b irlo s
c o m o a trib u to s d el ob jeto W in d o w , p re s e n te en J a v a S c r ip t, p a ra el m an ejo d e d ife ren tes funcionali
d a d e s d en tro de un sitio w e b .

www.redusers.com

220

l/SERSl

7 . A L M A C E N A M IE N T O L O C A L Y A P L IC A C IO N E S O F F L IN E

Comportamiento de local storage


A trav s de local storage podem os d efinir una serie de atributo s
y m todos con los cu ales realizarem os, luego, d iferentes acciones
de alm acenam iento y recu p eraci n de datos.

C O M P O N E N T E S D E L A M E T O D O L O G A D E A L M A C E N A M IE N T O
CLAVE

TIPO

( J )

DESCRIPCIN

Getltem(key)

Mtodo

Devuelve una cadena con el valor del elemento clave (key).

Setltem(key, valu)

Mtodo

Almacena un valor (valu), referenciado por una clave (key).

Removeltem(key)

Mtodo

Elimina la clave y el valor especificados.

Length

Atributo

Contiene el nmero de elementos almacenados como par


(clave/valor).

Key(index)

Atributo

Devuelve una cadena con la clave del elemento que ocupa la


posicin indicada en (index), dentro de la coleccin de datos
almacenados en (key).

Clearf)

Mtodo

Elimina todos los elementos previamente creados.

Tabla 1. Descripcin de los elementos que componen


la metodologa de almacenamiento propuesta en HTML5.
Todos los datos que alm acenam os m ediante

LO S DATOS

el uso de lo cal storage son guard ados de m anera


ind efinid a, al m enos hasta que ejecutam o s el

G UA RD A D O S M E D IA N T E

m todo clear(), que se ocup a de e lim in ar todo

LOCALSTORAGESON

elem ento creado.

A L M A C E N A D O S DE
M A N E R A IN D EF IN ID A

Comportamiento de session storage


Session storage se co m p o rta de la m ism a
m anera que local storage, alm acenand o datos
m ediante la especificacin de sus d iferentes

a trib u to s y m todos. La d ife re n cia rad ica en que, cuando finalizam os


la n avegacin en el sitio web y cerram os el naveg ad o r o la ven tan a en
cuestin, toda esta in fo rm aci n es elim in ad a del equipo.

www.redusers.com

USEKS

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

221

Com probacin de compatibilidad


de un navegador
Si bien nuestro enfoque est orientad o por co m p leto a la tecnologa
m obile, siem p re debem os asegurarnos, a la hora de im p lem en tar
este tipo de so lu c i n en una web m vil, que el naveg ad o r web
del clien te tenga co m p a tib ilid a d con la p rop uesta de Web Storage.
Esto se puede realizar fcilm en te desde Ja v a S c rip t, y una b uena p rctica
es im p le m e n tarlo en el in icio de una W ebApp. As, les in form am o s a
los usu ario s que v is ita n el sitio si el naveg ad o r de su d isp o sitiv o m vil
p erm itir ejecu tar o no ciertas acciones de la W ebApp. Esta p rem isa nos
p erm ite a nosotros, com o program adores, tener en cu en ta si p erm itim o s
que el u su ario u tilice o 110 n uestro d esarro llo , evitand o as tener errores
no co n trolad o s desde la p ersp ectiva de Ja v a S c rip t.
Para poder co m p rob ar si cu a lq u ier n aveg ad o r web que accede a
nuestra W ebApp d isp o n e de co m p a tib ilid ad con la fu n cio n alid ad de Web
Storage, debem os e s crib ir la siguiente sentencia Ja v a S c rip t:

< script typ e = //text/javascript//>


function c o m p ro b a rS o p o rte W S O (
if (w indow .sessionStorage & & w in d o w .loca lS tora ge ) {
a le rtC S u dispositivo perm ite u tiliz a r alm acenam iento lo ca l/);
} else (
a le r t'S u dispositivo no soporta el uso de W eb S tora ge /);

//Aqu podemos aplicar redirect hacia otra pgina.


}
}
</script>

C OM PROBAR L A C O M P A TIB ILID A D


A travs del sitio web www.w3.org, podemos acceder en detalle a todas las caractersticas tcnicas del
lenguaje HTML en todas sus variantes. All podemos conocer, adems, las especificaciones actualmente
vigentes, como tambin aquellas que ya no son soportadas por lo navegadores modernos.

www.redusers.com

222

R H I5 3

7 . A L M A C E N A M IE N T O L O C A L Y A P L IC A C IO N E S O F F L IN E

En este bloque de cdigo enco ntram o s que se u tiliz a el objeto

window para d eterm in ar si el naveg ad o r web soporta local storage o


session storage. Estas dos ca ra cte rstica s nacieron ju n ta s d entro de
la esp ecificacin Web Storage de HTM L5. A un as, siem p re es bueno
realizar esta valid a ci n , para asegurarno s por co m p leto de que sean
soportadas p or el naveg ad o r web.

F ig u ra 2. Si utilizamos Dreamweaver para el desarrollo,


podemos verificar que el navegador integrado en esta
herramienta no soporta el almacenamiento local.
A m odo de ejem plo, d esarrollarem o s, a co ntinuaci n, una pequea
web que nos p erm itir v e rific a r la co m p a tib ilid ad de un naveg ad o r web
con local storage y session storage. Verem os luego, im p lem en tan d o el
cdigo Ja v a S c rip t en el que cream os la fu n ci n com probarSoporteW SQ,
si el naveg ad o r que tenem os instalado en nuestra co m p u tad o ra o
telfono m vil soporta las caractersticas m encionadas. As, sabrem os
si n uestro naveg ad o r soporta el a lm acen am ien to local o no.

E L S ITIO W E B CAN I USE


La pgina w e b oficial w w w .w 3 .o rg / T R / w e b s to ra g e / # s to ra g e n o s perm ite c o n o c e r en detalle to d a s las
funcionalidades que ten em o s disponibles m ediante el uso de W e b Sto ra g e . E s ta pgina w e b n o s lista en
form a autom tica inform acin de aquellas se n ten cias que n o co n o c e m o s en detalle del lenguaje HTM L5.

www.redusers.com

223

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

S^ihut i M rn tc n Uaro

CcpyngN 2014 F a m a tfo Luna

F ig u ra 3. Tanto Internet Explorer com o Google Chrome soportan el


almacenamiento local propuesto por local storage y session storage.
R ealicem os entonces una pequea pgina web que nos in form e
si el navegador soporta o no el alm acen am ien to local. Para ello,
agregarem os en una pgina sim p le un botn que co n tien e la funcin
Ja v a S c rip t que vim o s anterio rm ente.
A co n tinuaci n, el cdigo de la pgina web:
c D O C T Y P E htm l>
< htm l>
<head>
< title > A lm a ce n a m ie n to lo c a k / title >
< m eta n a m e = "v ie w p o rt" con te n t= "w d th = d e vic e -w id th , in ta l-s c a le = l//>
c lin k re l= "s ty le s h e e t" href='M ittp://code.jquery.com /m obile/1.3.2/jquery.
m ob ile -1 .3 .2 .m in .css" />
< script src= //http://code.jquery.com /jqiiery-L9 .1 .m n.js//></script>
< scrpt src= //http://codeJquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js"> < /scrip t>
< script typ e = "te x t/ ja v a s c rip t">

//Aqu incorporamos el cdigo JavaScript


//de la funcin com probarSoporteW SO

</scnpt>

www.redusers.com

224

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L IC A C IO N E S O F F L IN E

</head>
<body>
< dv d a ta -ro le = "p a g e " d = "n d e x// 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 ">
< h4 > Alm acenam iento lo ca k/h 4 >
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
V e rific a r si el equipo tien e com patibilidad.
< br>
< d iv d a ta -ro le = "b u tto n " o n C Ic l< = "ja va sc rip t:co m p ro b a r$ o p o rte W S ();">
Verificar</div>

</div>
< d iv d a ta -ro le = //footer// d a ta -p o s itio n = "fixe d " d a ta -th e m e = "c " d a ta p o s itio n = "fix e d ">
C o p yrig h t 2014 - Fernando Luna
</div>

</div>
</body>
</html>

En el ap artad o co rresp o nd ien te al script, luego de la declaracin


de los com ponentes co rresp o nd ientes a jQ u e ry M obile, agregam os
el script co rresp o nd iente de verifica ci n . U na v e z realizad o esto,
ya estam os listos para su b ir la pgina w eb a n uestro hosting y cargarla
en el n aveg ad o r web local o en nuestro d isp o sitivo m vil.

F igu ra 4. Google Chrome para Android tambin soporta el almacenamiento local.

www.redusers.com

H Eg g al

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

225

Ejercicio prctico:
almacenamiento local
A co n tinuaci n, realizarem os un pequeo fo rm u la rio que har uso
del alm acenam iento local de los datos cargados en los resp ectivo s
cam pos. Para ello, agregarem os cuatro cam pos y dos botones. En los
cam pos guard arem os datos de tipo texto, y los botones in vo carn dos
funciones. Una de ellas alm acenar en el naveg ad o r web del cliente
los datos cargados p reviam en te en los cam pos, y la otra p erm itir
recu p e ra r los datos alm acenados m ediante local storage.
Veam os el cdigo HTML:

< !D 0 C T Y P E htm l>


<htm l>
<head>
< ttle > A lm acen arn ie n to local</title>
c m e ta n a m e = "v ie w p o rt" con te n t= "w d th = d e vce -w d th , in itia l-s c a le = l//>
<lnl< re l= "s ty le s h e e t" h r e f = " http://code.jquery.eom /m obile/l.3.2/jquery.
m ob ile -1 .3 .2 .m in .css" />
< script s r c = " http://code.jquei7.com /jqiiery-1.9 .1 .m in.js"> < /script>
< script s r c = " http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scrp t>
< script typ e = "te xt/ ja v a s c rp t">
var storage = localS torage;

function g u a rd a rO {
v a r clave = "n o m b re ";
var v a lo r = d ocu m e n t.ge tE le m e n tB yd t'n o m b re 7).valu;
storage.setItem (clave, v a lo r);
var clave = "a p e llid o ";
v a r v a lo r = d o c u m e n t.g e tE le m e n tB yId ('a p e llid o ').va lu e ;
storage .setlte m clave , v a lo r);
var clave = "c o r r e o " ;
var v a lo r = docu m e n t.ge tE le m e n tB yld O co rre o O .va lu e ;
storage.setltem CcIave, v a lo r);
var clave = "te le fo n o ";

www.redusers.com

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E

var v a lo r = d o c u m e n t.g e tE le m e n tB yld ('te le fo n o ').va lu ;


storage .setlte m (clave , v a lo r);
a le rtt'T o d o s los elem entos fueron alm acenados/);

function re c u p e ra r) (
v a r v a lo r = sto ra g e .g e tlte m ('n o m b re ');
d o c u m e n t.g e tE le m e n tB yld ('n o m b re ').va lu = valor;
v a r v a lo r = sto ra g e .g e tlte m ('a p e llid o ');
d o c u m e n t.g e tE le m e n tB yld C a p e llid o 'L va lu e = va lo r;
v a r v a lo r = s to ra g e .g e tlte m ('c o rre o ');
d o c u m e n t.g e tE le m e n tB yld O co rre o 'L va lu e = va lo r;
v a r v a lo r = sto ra g e .g e tlte m ('te le fo n o ');
d o c u m e n t.ge tE le m e n tB yld O te le fo n o 'Lva lu e = va lo r;

)
</script>
</head>
<body>
< d iv d a ta -ro le = //page// d = "in d e x " d a ta -th e m e = "d ">
<dv d a ta -ro le = "h e a d e r" d a ta -th e m e = "c ">
< h4 > Alm acenam iento locak/h4 >

</div>
< d iv d a ta -ro le = //content// d a ta -th e m e = "d ">
<form d = " e m a r m e th o d = "p u t" a c tio n = "e n v ia r" >
<nput typ e = //te x t// d=//nom bre// nam e=//nom bre//
p la c e h o ld e r= "N o m b re " />
<nput ty p e = " te x t" d = "a p e llid o " n a m e = "a p e lld o "
p la ce h o ld e r= " A p e llid o " />
c in p u t ty p e = "e in a il" id=//co rre o //placeho lde r= //su correo
e le c tr& o a c u te ;n ic o " />
< input ty p e = " te x t" id= //te le fo n o // n a m e = "te le fo n o "
placeholder= //Telefono// />
< d iv a lg n = "c e n te r">
< br>
< d iv d a ta -ro le = "b u tto n " d a ta -th e m e = "b " o n C Ick= "ja va scrip t:g u a rd
a r ( ) ;//>Guardar</div>
< br>

www.redusers.com

227

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

< dv d a ta -ro le = "b u tto n " o n C lic k = "ja v a $ crip t:re c u p e ra r();"> R e c u p
erar</div>
</div>
</form>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fix e d " d a ta -th e m e = "c " da ta p o s ito n = "fixe d ">
C o p yrig h t 2014 - Fernando Luna
</dv>

</div>
</body>
</html>

Este fo rm u lario sim ple posee dos funcio nes. La p rim era, llam ada

guardar(), se ocup a de guardar, en la variab le valor, los datos ingresados


en cada uno de los cam pos. Luego u tiliz a la fu n ci n setltem (clave, valor),
donde alm acenar, bajo el m ism o nom bre del cam po, el valo r que ha
sido ingresado en este.
La segunda fu n ci n se llam a recuperarQ y se ocupa de v o lv e r a
cargar, en cada uno de los cam pos, el v a lo r alm acenado m ediante local
storage, u tiliz a n d o la fu n ci n getltem (valor).

F ig u ra 5. Al finalizar el almacenamiento local de las variables, JavaScript


nos alerta con un mensaje que la tarea se llev a cabo correctamente.

www.redusers.com

228

R H I5 3

7 . A L M A C E N A M IE N T O L O C A L Y A P L IC A C IO N E S O F F L IN E

Si realiz am o s esta prueba en un equipo de e scritorio , podem os


acced er a la in fo rm aci n de alm acenam iento local que Google
Chrom e nos provee. Para esto, sim p lem ente debem os ingresar
a Men/Herramientas/Herramientas del desarrollador.

F ig u ra 6. Podem os acceder a los datos de local storage seleccionando


el sitio web desde el cual fue invocado el almacenamiento de la informacin.

Bases de datos Web SQL


O tra de las caractersticas fu n d am en tales im p lem entada ju n to con
el lenguaje HTM L5 es la p osib ilid ad de u tiliz a r bases de datos del tipo
SQ L creadas d irectam en te en la co m p u tad o ra del usuario. Esto perm ite
d e sarro llar una W ebApp en la que, en base al m anejo de grandes
vo l m en es de datos, la in fo rm aci n co nstantem ente u tiliz a d a pueda
cargarse de form a local y, de esta form a, pueda estar d isp o nib le todo

D ad a la diferen cia q u e Internet Exp lorer siem pre m antuvo co n re sp e c to a su s princip ales com p etid o res,
re co m e n d a m o s co n su lta r e l

sitio w e b

h t t p :/ / s t a t u s . m o d e r n .ie

y com p atibilid ad d e e s te n a v e g a d o r co n el alm a ce n a m ien to local.

www.redusers.com

p a ra

explorar la d o cu m entaci n

USEKS

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

229

el tiem po, sin sobrecargar el se rvid o r w eb ni

E N A P L IC A C IO N E S

co n su m ir un m ayo r ancho de banda.


O tra de las v e n ta ja s es que se p ued en crear

W E B , E L U SO DE W E B

a p lic a cio n e s web y a p lic a cio n e s w eb m viles


que fu n cio n en co m p le ta m e n te descon ectad as

SQ L D E B E R E A L IZ A R S E

del s e rv id o r rem o to. La A PI de base de datos

M E D IA N T E CDIGO

W eb SQL se im p le m e n to para m a n ip u la r estas

JA V A S C R IP T

bases de datos del lado del clie n te , m ediante


p e tic io n e s SQ L de form a a sin cro n a . A si, cu a lq u ier
se n te n cia que co n o cem o s y so lem os u tiliz a r en el

d e s a rro llo de base de datos -com o ser SQL Server, O racle o MySQL
tam b in p o d r ser e je cu ta d a co n tra la base de datos Web SQ L, de
fo rm a lo cal, sin im p o rta r que esta sea un Update, Create, Delete o Insert.

Sistemas operativos
que soportan Web SQL
A ctu a lm en te , los sistem as o p e ra tivo s m vile s que so po rtan
la im p le m e n ta ci n de Web SQ L son aq u e llo s que p ued en co rrer
un n a ve g ad o r w eb b asado en WebKit, com o lo son Google C hrom e,
Sa fa ri (d e sk to p y m o b ile), O pera, O pera M ini, A n d ro id B ro w se r y
C h ro m e para A n d ro id .
P o r lo tanto, desde la p e rs p e c tiv a de generar a p lic a cio n e s web
m vile s, los sistem as o p e ra tivo s m s p o p u la re s q ue so po rtan esta
ca ra c te rs tic a son A n d ro id , iOS y W in d o w s 8.x.
La m en tab lem en te, al m om ento de e s c rib ir esta obra, los
n aveg ad o res web In te rn e t Explorer, In te rn e t E x p lo re r m ob ile, M o z illa
Firefox, M o z illa Fire fo x m o b ile, M o z illa Firefo x p ara A n d ro id y
B la c k B e rry B ro w ser no so p o rtan la im p le m e n taci n de Web SQL.

B LA C K B E R R Y BR OW SER Y W EB S Q L
S i bien B la c k B e rry B ro w s e r e s t b a s a d o en W e b K it, por e l m om en to W eb S Q L no fue incluido en e l so p o rte
de e s ta p lataform a. D e b e m o s te n e r m uy en cuenta e s ta inform acin al m om en to d e d ecid ir si v a m o s a
realizar una ap licaci n w e b m vil d e s c o n e c ta d a q u e utilice una b a s e d e d a to s W e b SQ L.

www.redusers.com

230

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L IC A C IO N E S O F F L IN E

W e b S Q L D a ta b a se a

F ig u ra 7. En esta imagen podem os observar, resaltados en


color verde, los navegadores web que soportan el uso de Web SQL.

Manejo de sentencias Web SQL


El uso de Web SQ L en ap licacio nes web debe hacerse m ediante
cdigo Ja v a S c rip t, al igual que el resto de las ca ra cte rstica s de
alm acenam ien to que podem os re a liz a r con HTML5. La creaci n de
una base de datos, de una o ms tab las y la lectura de registro,
in serci n , actu aliz a ci n y e lim in a ci n de datos deben estar agrupadas
en d iferentes fu n cio n es de Ja v a S c rip t, para que -por supuesto- sea
m ucho ms cm odo in vo ca r cada una de ellas en el m om ento preciso.
Repasem os, a co n tin u aci n , cada una de las sentencias a
im p lem e n tar para el uso de una base de datos Web SQL.

Cmo crear una base de datos Web SQL


En la creaci n de una base de datos Web SQL, debem os tener en
cuenta que esta ten d r p or defecto un tam ao de 5 m egabytes. Este
es el tam ao m xim o p red eterm in ad o para las bases de datos locales,
y para que este crezca p or a rrib a de su v a lo r mximo se requerir
la a u to riz a ci n del usuario del equipo, quien h ab ilita r o no el
crecim ien to de la base de datos.
Se debe tener en cuenta esto cuando d esarro llem o s el proceso de
in serci n de datos. Si supera los 5 m egabytes y el usuario no habilita
el crecim ien to de la base de datos, se p ro d u cir un erro r en nuestra
aplicaci n, que deber ser co n tro lad o de la form a ms co nveniente.

www.redusers.com

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

La c re a c i n de un a base de d ato s Web SQ L se re a liz a de la


sig u ie n te m anera:

v a r webdb = {};
webdb.db = nuil;
webdb.open = function(opciones)

{
I f (typ e o f openDatabase = = "u n d e fin e d ") return;
var opciones = options || 0 ;
opciones.am e = opciones.am e ||'nom bredelabbdd';
opciones.m b = opciones.m b || 5;
opciones.desription = opciones.description ||'Descripcin de la base
de datos';
opciones.version = opciones.version || '1 .0 ';

v a r dbSize

= opciones.m b * 1024 * 1024;

>
Hasta aqui solo definim os cules son las caractersticas de la base de
datos que estam os creando. Le asignam os un nom bre, una descrip ci n,
el tam ao in icial en m egabytes y la versi n (in icialm en te, 1.0).
Ahora nos queda a b rir la base de datos. Veam os el cdigo
co rresp o nd ien te para su apertura:

W ebdb.db = openDatabase(opciones.nam e, opciones.version, opciones.description,


d b S ize );

Mediante la funcin openDatabase podemos acceder a la base de datos


que creamos anteriorm ente. Si la base de datos no existe en el equipo,
se crear, segn lo que establecim os en la definicin de parmetros
del bloque de cdigo anterior. Por ltim o, una vez que tenem os las
sentencias de creacin y/ o ap ertu ra de la base de datos, nos queda
ejecu tar la o peracin d eclarad a en la fu n ci n Function(). Veam os el
cdigo corresp ond iente:

w ebdb.executeSql = function(sql, data, onSuccess, o n E rro rK


if ( ! webdb.db) return;
w eb d b .d b .tra n sa ction (fu n ctio n (tx){tx.e xe cu te S q l(sq l, data, onSuccess, o n E rro r); ;

www.redusers.com

232

USEFtS

7 A L M A C E N A M IE N T O L O C A L Y A P L IC A C IO N E S O F F L IN E

Cmo crear una tabla


en una base de datos Web SQL
Una vez creada la base de datos y realizad a su ap ertura m ediante
cdigo Ja v a S c rip t, podem os co m en z ar a crear tablas y a agregarles
registros. Esto tam bin se realiz a desde Ja v a S c rip t de una m anera
sim p le y m u y sim ila r a la form a de crear tab las m ed iante cdigo en
c u a lq u ier ento rno de base de datos co rp o rativa.
Veam os, a co n tinuaci n, un ejem plo de esto:

w e b d b .e x e c u te S q K 'C R E A T E T A B L E I F N O T E X IS T S tabladeejem plo ( ID IN T E G E R P R IM A R Y K E Y A S C , te x t o T E X T , fecha_alta D A T E T IM E 777, ,


fu n c tio n tx, r)<
a le r t(" S e ha creado la t a b la :T A B L A D E E J E M
P L O 7' );

>,
fu n c tio n (tx/ e ){
a le r t ( u Se ha producido un e rro r al intentar
cre ar la ta bla: "e.m e ssage );

;
Este sim p le bloque de cdigo cre a u n a ta b la en la base de datos
p re v ia m e n te a b ierta, lla m a d a T A B L A D E E JE M P L O . D entro de la tabla
se define un cam po ID , del tip o in te g e r, al cual le estab lecem os la
p ro p ied ad de clave p rim a ria (o Prim ary K ey). Luego d efinim o s un
cam po Texto, d el tip o Text, y un terce r cam po lla m a d o Fecha alta,
d el tip o D A T E T IM E . A h o ra, nos resta agregar un registro de pruebas.
Veam os, a co n tin u a ci n , el cdigo para agregar reg istros m e d ian te la
se n te n cia IN S E R T

W e b d b .e xe c u te s q l('IN S E R T IN T O T A B L A D E E J E M P L O (Te xto , F e c h a .a lta )


V A L U E S (? ,? )', ['T e x to de ejem plo7] , new D a te O J,
fu n c tio n (tx, r) {
a le r t(" S e ha agregado un nuevo registro.77);

>,
fu n c tio n tx, e ){
a le r t(" S e produjo un e rro r en el a l t a : 77+ e.m essage);

w w w .re d u s e r s .c o m

233

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

Indexed Database
In d e x e d D B es un nuevo mtodo de alm acenam iento de datos en
HTML5. Las bases de datos web, al igual que en Web SQL, son alm acenadas
y actualizadas en el navegador web del usuario. Esto perm ite que los
desarrollaclores creen aplicaciones en las que, a travs de sim ples
consultas SQL, se puedan visu a liz ar datos en el navegador de usuario ms
rpidam ente. Haciendo uso de algunas funcionalidades de control offline
y online de una conexin a internet, estas bases podrn actualizarse de
m anera transparente para el usuario que navega por la pgina web.

Compatibl idao con el navegado

VikbUoragr namr/wlue ptun *

Inritnreliw >

H4r6 SQl Dotaba*' -

4+ 3.5*

2 3 *

4*

4*

10.5* 8*

10*

1S *

3 .1 *

1 0 .5 *

3.2*

2.1

4 .4 *

___

3 .2 *

2 .1 *

11.5+

22

H .S *

F ig u ra 8. En este grfico podemos apreciar el mapa de almacenamiento


local com puesto por Web Storage (local y session), Indexed DB
y Web SQL, segn el navegador web que soporta cada uno.

Aplicaciones offline
Otro de los grandes cam bios in clu id o s en H T M L 5 es que se puede
trab ajar con ap licacio nes offline. Dado que el nm ero de aplicacio nes
web crece da a da, y teniendo en cuenta todas las cap acid ades que
este lenguaje de m arcado d esarro ll a lo largo de su ltim a versin,
solo faltaba in c lu ir un soporte que le p erm itie ra al usuario de una
W ebApp p o d er segu ir trab ajan d o desconectado, ya sea cuando pierde
la conexin a internet, o sim p lem ente para a p ro ve ch ar el aho rro de
datos en los equipos m viles.

www.redusers.com

234

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E

La m o d alid ad de trabajo de ap licacio nes offline perm ite, en una


p rim era in stan cia, descargar al d isp o s itiv o o eq u ip o del usuario todas
las pginas web, a rch ivo s Ja v a S c rip t, hojas de estilo CSS, im genes
y a rch ivo s m u ltim ed ia en general que puede co n ten er un sitio web.
Esto se rea liz a una sola vez de form a com pleta; el resto de las
veces que acced em o s a la web, conectados a internet, se seguirn
d escargando aquellos arch ivo s que han sido m od ificado s en la versin
en lnea de la web o aquellos que fueron inco rp o rad o s posteriorm ente.
As, se realiza una actu alizaci n p arcial de la W ebApp en el equipo
lo cal y, en caso de que deseem os desconectarnos de in ternet para
a h o rra r datos, podrem os hacerlo sin problem a.

Cm o descargar una WebApp


a un dispositivo
La descarga de los archivo s para trabajar W ebApps de form a offline se
realiza incorporand o un archivo de m anifiesto ju n to a nuestra web. Este
arch ivo contendr el listado com pleto directono/subdirectorio/archivo.web
del contenido de toda la WebApp. De esta m anera podrem os descargar
la aplicacin y hasta in clu ir rutinas especficas para que la W ebApp se
com porte de m anera diferente m ientras est conectada o no a internet.

AppCache
El cach de ap licaci n o AppCache que se genera cuando
desarrollam os una aplicacin que trabaja sin conexin perm ite que
el desarrollad or especifique si todos los archivo s que com ponen una
W ebApp o solo una parte de ellos deben alm acenarse en el cach del
navegador web, para que estn a disp osicin de los usuarios que eligen
trabajar sin conexin en nuestro sitio.
Como ventaja, podem os destacar que cualquier aplicacin que genere
un cach local perm itir, por ejem plo, que el usuario navegue por este
sitio sin conexin a internet. Tam bin perm itir que pueda acceder a los
recursos, imgenes o contenido de texto ms rpido, dado que estarn
alm acenados en su equipo y no en la red. Otra ventaja es que se generar
una m enor carga en el servidor, por lo que el navegador web slo se
ocupar de descargar del servidor aquellos recursos que hayan cambiado.

www.redusers.com

H S2 Z 3

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

235

Archivo de manifiesto
Veam os, a co ntinuaci n, un ejem plo de cm o debem os co n fo rm ar
el a rch ivo de m anifiesto que perm ita descargar el co ntenido de una
web al cach del naveg ad o r local del usuario.
El p rim er cam bio que debem os in co rp o ra r es en el tag <html> de la
pgina web p rin cip a l del sitio w eb o W ebApp, p ara que el naveg ad o r
id en tifiq ue dnde se en cu en tra el arch ivo de configuracin de la cach.
El cdigo a u tiliz a r es el siguiente:

c h tm l m a n ife s t= "h ttp://w w w .m isitiow eb .com .arM ebA pp/exam ple.m f" >

</html>

D entro del a rch ivo de m anifiesto podem os seleccio n ar la URL


absoluta o re lativa al co n ten id o que d escargarem os en el equipo
cliente, pero siem p re debem os tener en cuenta que, si u tiliz am o s
una U RL absoluta, esta d eber tener una ruta hacia el m ism o origen
de nuestra W ebApp.
Si nuestra W ebApp est a lo ja d a en www.misitio.com.ar/WebApp/

index.html, d entro del a rch ivo de m anifiesto no p odrem os declarar


una im agen que est alojada, p or ejem plo, en w w w .m iotrositiow eb.

com .ar/im agenes/im agenweb.jpg.


Otro cam bio que debem os re a liz a r es la m o d ificaci n del a rch ivo

.htaccess de nuestro se rv id o r web, agregndole la sen tencia de tipo


MIME, para que pueda relacion ar la W ebApp con los archivo s
de m anifiesto:

Ad d Typ e text/cache-m anifest .appcache

Luego nos queda d eclara r el a rch ivo de m anifiesto com pleto,


in clu ye n d o en este cada uno de los a rch ivo s raz, carp etas y
subearpetas con sus re sp ectivo s arch ivo s que com ponen nuestra
W ebApp. Veam os un ejem plo a co ntinuacin:

C A C H E M A N IF E S T
CACHE:
index.htm l
stylesheet.css

www.redusers.com

236

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E

mages/logo.png
m a g e s / im g t o o lb a r l.p n g

im ages/im gtoolbar2.png
m ages/im gtoolbar3.png
scripts/funcionesJS.js
scnpts/variablesJS.js

Archivos online
Si n e ce sita m o s que la W ebApp est co n ectad a para, p or ejem plo,
id en tifica rn o s en una red con un nom bre de u su ario y co ntrasea,
p o d em o s d esta ca r esto d entro del a rch ivo de m anifiesto de la
sig u ie n te m anera:

N ETW O RK :
login.php
/myapi
http://api.facebook.com

En caso de falla
Si necesitam os que algn contenido se co n su lte de m anera online,
y la red donde corre nuestra W ebApp no lo perm ite, podem os in clu ir
en el a rc h iv o de m aniesto un apartado que contem p le esto y m uestre
una pgina o sen tencia Ja v a S c rip t alternativa:

FALLBACK:
/login.php /staticE iror.h tm l
m ages/large/online.jpg im ages/offline.jpg

Actualizacin mediante JavaScript


Tam bin podem os a p ro ve ch a r Ja v a S c rip t para que nos ayude
a a ctu a liz a r una W ebApp desde su ve rs i n o nline. Esto debem os
co m b in arlo co n sentencias que p erm itan detectar si el naveg ad o r est
o no conectado a internet. En caso de que est conectad o a internet,
sim p lem ente invo cam os la sentencia applicacionCache update().
Fin alizad a la a ctu aliz aci n , nos queda cam b iar al cach offline nuevo
para que los datos en p antalla se actu alicen . Para ello, invo carem o s

www.redusers.com

C E2 Z3

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

237

la sentencia a p p lic a c io n C a c h e .s w a p C a c h e Q , la cual su stitu ir la antigua


cach p or la nueva.
Veam os, a co ntinuaci n, un ejem plo de Ja va S crip t:

var appCache = w indow .applicationC ache;

appC ache.updateO ; //Actualizando la cach con los datos online.


if (appCache.status = = w in d o w .a p p lic a tio n C a c h e .U P D A T E R E A D Y ) {
appCache.sw apCacheO ; //A ctu alizacin com pleta, visu a liza r la nueva cach.

c *

A p p lic a tio n Cache

a i a- a

m m lii

neoo
j

A u d io tract*

TIO-

V id e o tracks
|

| O

Blob

n o -

Block b in d in g s (le , c o n s l funct on )


C anvas

F igu ra 9. A partir de la versin 10 de Internet Explorer, este navegador comenz


a prestar soporte al almacenamiento offline del contenido de WebApps.

R ESU M EN
L a s d ife ren tes o p cio n e s de alm a ce n a m ien to local m e d ian te c la v e s , c o o k ie s , b a s e s d e d a to s indexadas
o b a s e s de d a to s W e b S Q L co n vierte n a H T M L5 en el lenguaje p e rfe cto , que perm ite a una W ebA pp
trabajar en lnea y tam bin sin conexin a internet. C on algu n o s a ju stes b sic o s a n uestras ap lica cio n es
y el a p ro vech am ie n to del alm a ce n a m ien to local, p o d rem o s con tro lar en d etalle el com p o rta m ien to d e
n uestras W e b A p p s, para q u e nunca dejen al usuario d esorientad o a n te un e rro r o im p revisto no con tro lad o
durante la n av eg a ci n w eb.

www.redusers.com

238

USEFtS

7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E

Actividades
T E S T DE A U TO E V A L U A C I N ________________________
1

Cul fue, durante muchos aos, el modo de almacenamiento local de datos


ms comn en las aplicaciones web?

2
3

Qu ventajas supone el uso de Web Storage respecto de una cookie?

Cuntos tipos de almacenamiento local encontram os en Web Storage?

Qu tipo de base de datos local podem os aprovechar al crear una WebApp?

Qu es Indexed DB?

E JE R C IC IO S P R C TIC O S___________________________
1

Investigue en profundidad el almacenamiento con Indexed DB.


Cree un formulario con cam pos que permitan insertar los datos cargados
en una base de datos local Web SQL.

Desarrolle una funcin JavaScript que permita recuperar los datos almacenados
en Web SQL para listarlos en pantalla.

Elija un proyecto desarrollado previamente en este libro y cree el archivo


de manifiesto para utilizarlo en modo offline.

Investigue qu otras funciones JavaScript se pueden aprovechar con AppCache.

P R O FESO R EN LIN E A
Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse
con nuestros expertos: profesor@redusers.com

www.redusers.com

* n

\\\\\\\\\\\\\\\

///////////////

WebApps
para iOS
En e ste c a p itu lo , e x p lo ra re m o s las e n tra a s d e l siste m a
o p e ra tiv o p a ra m v ile s y ta b le ts de A p p le , O S. C o n o c e re m o s
a lg u n o s se cre to s q u e n o s p e rm itir n e x p lo ta r al m x im o las
fu n c io n a lid a d e s del n a v e g a d o r w e b S a fa ri, para q u e u n a w e b
m v il p u e d a ve rs e c o m o una a p lic a c i n n a tiva , in sta la d a
en el s iste m a o p e ra tiv o d e A p p le .

Disear una WebApp

Resumen.................... ...............257

para OS............................. .......240


Actividades............... ...............258
Ejercicio integrador:
Add to home screen........ .......248

7 1 z1

240

USEFtS

8. W E B A P P S

P A R A IO S

Disear una WebApp


para OS
Com o bien repasam os en el Captulo 1 de esta obra, se co n sid era
que iOS es el sistem a o p e ra tivo que m arc un q uiebre im p o rtan te
en el e co sistem a de los te l fo n o s m vile s in te lig e n te s a p a rtir de
2007. iO S trajo consigo u n a b a te ra de o p cio n e s que p erm itie ro n
a cad a d esarro lla d o !' exp lo tar la p latafo rm a en tiem p o rcord,
crean d o a p lic a cio n e s y so lu cio n e s web co m p a tib le s con el terren o
que A p p le p ro p u so d esde la cre aci n de iPho ne e iPo d Touch.
Luego, en 2010, con la lleg a d a de iPad , n u e va m e n te A p p le
se m o str im b a tib le en el te rre n o m o b ile p re s e n ta n d o un
n u e vo p ro d u c to s lid o y, a su v e z , h e re d a n d o gran p arte de las
c a ra c te rs tic a s de iPhone e iPod Touch. D u ran te el n a c im ie n to del
s iste m a o p e ra tiv o iOS, A p p le p ro p u so un a id ea in ic ia l q ue p e rm itie ra
d o ta r de in fo rm a c i n lo ms r p id o p o sib le al s iste m a o p e ra tiv o
m v il iOS, co n el o b je tiv o de d ife re n c ia rs e de todas las p ro p u e sta s
de sm a rtp h o n e s que y a e x ista n en el m ercad o . A p p le p lan te
la idea de p o b la r de a p lic a c io n e s in s ta la b le s el s iste m a o p e ra tiv o
iO S, que e s tu v ie ra n d ise a d a s p or un a co m u n id a d de desarrolla d o re s, re sp e ta n d o c ie rta m e n te los e st n d a re s im p u e sto s p or la
e m p resa de C u p e rtin o .
Esto s e st n d a re s eran b astan te exigentes para la poca. Req ueran
de una ca p a cita ci n in icia l en el d e s a rro llo en XCode + Cocoa para la
p lata fo rm a iOS, p ara todo aq uel n u e vo d e s a rro lla d o r de la p latafo rm a
de la m an zan ita. Por eso, h a b ilita ro n una segunda o p ci n para a tra e r
u su a rio s al te rre n o del sistem a o p e ra tivo de Apple.
La n u e va a lte rn a tiv a c o n s is ta en que cu a lq u ie r a p lic a ci n web
m vil o s itio w eb con in fo rm a c i n relevan te p u d ie ra ad ap tarse
r p id a m e n te e in te g rarse en el e s crito rio del sistem a o p e rativo
iO S com o si fuese una a p lic a ci n n ativa. L a fo rm a? U tiliz a r, en el
d e sa rro llo de la pgina web, d eterm in a d a s e tiq u e tas que p erm itie ra n
al n aveg ad o r web S afa ri detectar, p or e je m p lo , el icono d istin tiv o
de la w eb y el nom bre, e n tre o tros p a r m etro s ms, y as p o d er crear
un acceso d irecto en el e s c rito rio del s m artp h o n e de cad a usuario.
La aco gid a de este c o n ju n to de p arm etro s p or la co m u n id ad de
d e s a b o lla d o re s y d ise a d o re s w eb fue m u y buena. En m u y poco

www.redusers.com

241

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

tiem p o lo graron a d ap ta r los sitio s w eb al fo rm ato m obile para que


fu e ran f cilm e n te in s ta la d o s en los te l fo n o s in te lig e n te s de Apple,
hasta tanto o tro e q u ip o de d e sa rro lla d o re s p u d iera llegar a d ise ar
una s o lu c i n n a tiv a de cada p o rtal, p ro d u cto o s e rv ic io para todo
aquel c lie n te in te resa d o en c o n q u is ta r esta p la ta fo rm a con sus
p ro d u cto s y/ o se rvicio s.
A si fue com o A p p le supo b a la n cea r el e co siste m a de su fu tu ra
p lata fo rm a iT u n e s , la cual lleg al m ercad o algunos m eses despus
con una base de d ecen as de m iles de a p lic a cio n e s n ativas. Sum ado
a este co n ju n to de etiquetas p ro p u estas para la web m vil que lanz
A p p le ju n to con iO S, llegaro n o tros co n cu rso s que buscaban talen to s
en el terren o del d e sa rro llo m vil, y de estos su rg ie ro n a lte rn a tiv a s a
la p lata fo rm a que hasta ho y siguen v ig e n te s, com o P h o n e G a p .

El navegador Safari y sus prestaciones


El c o n ju n to de e tiq u e tas que A p p le p ro p u so a tra v s de Safari
m a rca ro n u n antes y un d esp u s en la p lata fo rm a . Tam b in en el
resto de los n aveg ad o res web, que co n el tiem p o fu ero n in co rp o ra n d o
so lu c io n e s b asad as en estas e tiq u e tas y otras m s p erso n aliz ad as.
Veam os, a co n tin u a ci n , un repaso de estas e tiq u e tas <meta> que
p erm iten v e r u n a a p lic a ci n web m vil com o u n a a p lic a ci n n ativa
en el sistem a o p e ra tivo iOS.

Rm S E R S I

n a

F ig u ra 1. El navegador
S a fa ri M ob ile , disponible
tanto en iPhone com o en
Pad y Pod Touch.

www.redusers.com

242

l/SERSl

8. W E B A P P S

P A R A IO S

Viewport
I.a etiq ueta view port p erm ite e stab le ce r el tam ao de v is u a liz a c i n
de una pgina web cu an d o esta se carga en el n aveg ad o r web Safari
para iOS. Este meta tag nos fa c ilita esta b le ce r el ancho y la escala
in ic ia l co n la cual se v is u a liz a una pgina w eb en este navegador,
recib ie n d o un p arm etro in ic ia l y uno final, que p ued en d ife r ir o ser
iguales. As, pod em os e sta b le ce r el aju ste del ancho de una pgina
web para v is u a liz a rs e en el b ro w se r y e sta b le ce r una esca la de zoom
o no. Veam os un ejem p lo :

cm eta ame = "v ie w p o rt" content = "w idth = 320, nitial-scale = 2.3, user-scalable = no">

La etiq ueta view port d eclara d a e stab lece un ancho de 320 pixeles.
La pgina se cargar a p lic a n d o un zoom in ic ia l de 2.3 veces
lo e sta b le cid o p or d efecto . Po r ltim o , el atrib u to user-scalable=no
im p id e re a liz a r un zoom sobre d icha pgina. Si d icho atrib u to
e s tu vie ra e stab le cid o en yes, el v is ita n te de la pgina p o d ra re alizar
zoom sobre el co n te n id o web visu a liz a d o .

Establecer el ancho del dispositivo


Si, p or ejem p lo , q u isi ra m o s que el ancho de nu estra web m vil
se a ju sta ra de m anera p re d e te rm in ad a al ancho del d isp o s itiv o en el
que se carga, p o d ram o s e sta b le ce r el a trib u to w idth p ara que se ocupe
de d e te c ta r el an ch o de la p a n ta lla del d isp o s itiv o . Esto es til cuando
un a web debe v is u a liz a rs e , p o r e je m p lo , en un iPhone 3G, iPhone 4
e iPhone 5, cu yas p antallas v a ra n en reso lu ci n .

c m e ta ame = "v ie w p o rt" content = "w id th = d e v ic e -w id th ">

L E N G U A JE DE PR O G R AM A C I N P A R A MAC
El d esarro llo d e ap lica cio n es nativas para OS-X y iO S se realiza s lo d esd e la plataform a OS-X a tra v s de
la a p lica ci n X C O D E , siendo e s te e l entorno de d esarro llo oficial q u e p ro ve e Apple. El len guaje a utilizar
en la co d ifica ci n e s O b je c tiv e - C .

www.redusers.com

E2 S2 Z 3

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

243

Las e tiq u e tas view port no son p rop ias de la p la ta fo rm a A p ple.


Tam b in son u tiliz a d a s en otras p lata fo rm a s m vile s y de escritorio ,
a lca n z a n d o p or igual el m ism o resu lta d o que lo g ram o s sobre iOS.

Correr una WebApp a pantalla completa


C uand o el m eta tag apple-m obile-web-app-capable se establece
en yes, la a p lica ci n web co rrer en m o d o pantalla completa.
El co m p o rtam ie n to p re d e te rm in ad o de este m eta tag puede ser
co n su lta d o u tiliz a n d o Ja v a S c rip t. De esta m anera, p od em o s d etectar
si la W ebA pp co rre o no a p an talla co m p le ta y, de acu erd o con este
re su ltad o , m o stra r o no una fu n cio n alid a d que p erm ita estab lecer
la w eb com o a p lica ci n n ativa. Veam os un ejem p lo :

c m e ta n a m e = "a p p le -m o b le -w e b -a p p -ca p a b le " content=//yes//>

U tiliz a n d o el tag, a tra v s de una fu n cio n a lid a d del n aveg ad o r web


Sa fa ri M obile, podem os estab le ce r que la web m v il sea v is u a liz a d a
a p a n ta lla co m p leta. Si q uerem os m o s tra r un b ot n de a yu d a en esta
web p ara que sea in sta la d a p or el u s u a rio en el e s crito rio de iOS,
a tra v s de la p ro p ied ad de solo le ctu ra window.navigator.standalone
d etectarem o s si la w eb m vil se v is u a liz a o no a p a n ta lla com pleta.

Definiendo el estilo de la barra de estado


T am b in existe u n m eta tag que p erm ite d e fin ir el co lo r de la
b a r r a d e e s t a d o de iOS, donde se v is u a liz a el n o m b re del
d isp o s itiv o , la co n e c tiv id a d y la hora. Veam os cm o p e rso n a liz a r
la b arra de estado desde una w eb m vil, de la sig u ien te m anera:

c m e ta n a m e = "a p p le -m o b ile -w e b -a p p -s ta tu s -b a r-s tyle " c o n te n t= "b la c k ">

Por d efecto, el m eta tag re p re sen ta d o m uestra la b arra de estado


de iO S en co lo r negro. Po dem os ca m b ia rlo a su co lo r p or defecto
estab le cien d o el atrib u to content= default , o pod em os v o lv e r
tra n s l c id a la b arra de estado aju stan d o el a trib u to a content= black-

translucent . Si no esp ecificam o s este m eta tag, su v a lo r p or defecto


asignad o p or el n aveg ad o r Safari es content= black .

www.redusers.com

244

8. W E B A P P S

USEFtS

P A R A IO S

Format Detection
La p latafo rm a iOS, esp ecficam en te en Phone, d etecta de m anera
a u to m tica todos los nm ero s de te l fo n o v is u a liz a d o s en una
p gina web. Lo s tra n sfo rm a al h ip e rv n c u lo tel:5 4 9 1 1 4 2 3 4 4 5 6 7 , que
p erm ite, con un sim p le toque en la pantalla, in ic ia r la llam ad a a ese
n m e ro de tel fo n o . Este p arm etro tam b in puede se r co n tro lad o
de m anera a u to m tica p or n u estra a p licaci n , d e sh a b ilitan d o d icha
fu n c io n a lid a d e sta b le cid a p or defecto en Safari M obile. Esto se rea liza
de la sig u ien te m anera:

c m e ta n a m e = "fo rm a t-d e te c to n " con te n t= "te le p h o n e = n o ">

Iconos para nuestra web mvil


T am b in es im p o rta n te , para v is u a liz a r u n a web m vil a p antalla
co m p leta en iOS, d efin ir un ico n o d e te rm in a d o que p erm ita id en tifica r
la W ebApp en la p a n ta lla de iOS. Si bien pod em os no esp e cifica r nada
y d e ja r que Sa fari M obile se ocupe de a sig n a r un ico no d eterm in ad o
a n u estra W ebA pp, esto no es c o n ve n ie n te p orq ue el naveg ad o r web
solo esta b le ce r com o ico n o una cap tu ra de p a n ta lla de nu estra web
m vil.
Si b ien la cap tu ra puede lu c ir e sp l n d id a, las buenas p rcticas
s iem p re d efinen que toda em p resa, p ro d u cto o se rv icio debe tener
un is o lo g o e sp ecfico que p erm ita id e n tifica r rp id am en te la m arca;
por lo tanto, ser c o n ve n ie n te tam b in lle v a r esta p r ctica a la
p la ta fo rm a iOS. D ebem os tener en cu en ta, al
m o m en to de d ise a r un ico no para n u estra web

TODA E M P R E S A ,
PRO D U C T O 0 S E R V IC IO
D E B E T E N E R UN
ISOLOGO E S P E C F IC O ,
T A M B I N E N IOS

m v il, que esta p lata fo rm a posee actu alm en te


un am p lio abanico de d isp o s itiv o s en el m ercado,
con d ife re n te s re so lu cio n e s de p antalla.
Q u ien es estn aco stu m b rad o s a d e sa rro llar
so lu cio n e s web, se g u ram en te alguna vez crearon
un S H O R T C U T IC O N . La p ro p u esta de A p p le es
sim ilar, con la d ife re n c ia de que no se lim ita
el icono a los 32 x 32 p ix e le s que la w eb de
e s crito rio req u iere, sin o que, d ep en d ie n d o de
la ve rs i n de iOS -o, m e jo r d ich o , de la versi n
del d is p o s itiv o m vil (iPad 2 , N ew iPad , iPad Air,

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

USEKS

245

iPad M in i, iPho ne 3GS, iPh o n e 4S, etctera)-, el ico no d eber tener un


tam ao e sp ecfico que se a ju ste a m o strar una re so lu ci n p tim a en
cada p an talla. Veam os, a co n tin u a ci n , la in fo rm a c i n co rrecta para
los ico n o s que debem os crear:

T A M A O S IN D IC A D O S P A R A ICO N O S
DISPOSITIVO APPLE

ANCHO Y ALTO DE LA IMAGEN

Phone / Pod Touch (no Retina)

57 x 57 pixeles

iPhone / Pod Touch (Retina)

114 x 114 pixeles

iPad (no Retina)

72 x 72 pixeles

iPad (Retina)

144 x 144 pixeles

Tab la 1. Tamao de iconos de pantalla segn el dispositivo Apple.


Com o pod em os observar, el tam ao de cad a ico no v a ra segn si
el d is p o s itiv o posee o no una p a n ta lla del tip o R e t in a . Estas necesitan
el dob le de re so lu ci n que las p antallas com unes, dado que d u p lica n
la d en sid ad de pixeles re p re sen tad o s en un esp a cio red u cid o : por
lo tanto, si u tiliz a m o s u n ico no no p rep arad o p ara las pantallas
Retina, este se v e r pixelado cu an d o n u e stra W ebApp se instale
en un d is p o s itiv o que s cuente co n u n a p a n talla de a lta d ensid ad
de pixeles. Esto hace que cuando d eseem os agregar una W ebApp a
la p a n ta lla de un d is p o s itiv o iOS d eb am o s cre a r estos cu atro ico no s
en tam ao s d ife ren te s. El n aveg ad o r Sa fa ri M obile d e c id ir cul es
el ico n o co rrecto que debe asig n a rle a n u estra a p lic a ci n al m om ento
de cre a r el acceso d irecto .

\\\
N A C IM IE N TO D E P H O N E G A P
E l fra m e w o rk m s p o pu lar p a ra e l d e s arro llo de a p lic a c io n e s hbridas, P h o n e G a p , n aci de un co n c u rso
o rg an iz ad o o rigin alm en te p o r A p p le p a ra p o ten ciar, c o n d e te rm in a d a s h e rra m ie n ta s, las W e b A p p s
d e s a rro lla d a s p a ra la p la ta fo rm a iO S , ex p lo ta n d o al m x im o lo s m e ta ta g s q u e o freca el n a v e g a d o r
S a fa ri M obile.

www.redusers.com

246

8. W E B A P P S

USERS

P A R A IO S

Cmo crear el icono


Para no co m p lica rn o s de e n tra d a en la cre a ci n del ico no correcto
p ara la p an talla iOS, lo p rim ero que debem os h a ce r es a rm a r la
im agen base e sta b le cie n d o una ca n tid a d m a y o r de pixeles al m xim o
d efin id o en la API del d isp o s itiv o . En este e je m p lo , arm arem o s una
im agen base de 200 x 200 pixeles, que luego red im e n sio n a re m o s
d esde n u e stro e d ito r de im genes p referid o , g u ard an d o cada n u evo
tam a o con un nom bre de a rch ivo que lo referen cie.

A tr h w e

% i

r iIriftn

i
1

Va

TVto

to n .***

r> M

V o tU m

AyuiM

i b * * * * . ! !
B

v k u p i * vw

1 :- IM U n y s l
tD J o p ia

E B 4 io i w 1

M w M i

QP
\

wtir.<

a.
.A

G #

l?. *

&

tolden

y 5?
*

p.

i k9
v*

IODO
OQ.

/ o o i o o

lia n .

Figura 2. El icono de nuestra WebApp creado en alta resolucin, a partir del


cual iremos reduciendo sus dimensiones para los distintos dispositivos iOS.
Para ah o rra r pasos en el prxim o e je rc ic io a realizar, debem os
d escarg ar el p ro ye cto asig n ad o a esta u n id ad desde http://prem ium .

redusers.com . A ll e n co n trare m o s el p ro ye cto a m o d ifica r y la


im agen co rre sp o n d ie n te en tam a o su p erio r, para luego
re d im e n sio n a rla para cada una de las versio n e s de p an talla
d el sistem a o p e ra tivo iO S que deseem o s cubrir.

El navegador Chrome en OS
El n ave g ad o r G oogle C hrom e tiene su p ro p ia ve rs i n para el
sistem a o p e ra tiv o iOS. Pero, segn las p o ltic a s de A p ple, puede

www.redusers.com

247

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

co rre r en este sistem a o p e ra tiv o si u tiliz a el

M U C H A S D E LA S

m o to r n a tiv o del n aveg ad o r web Sa fa ri M obile,


y no su p ro p io m o to r W e b K it . Por lo tanto, hay

F U N C IO N A L ID A D E S DE

m uchas de las fu n cio n a lid a d e s de Google Chrom e

G O O G LE C H R O M E NO

con las cu ales no p od rem o s co n tar en iOS.


Una de las ca ra cte rstica s ausentes en Google

ESTN D IS P O N IB L E S

C h ro m e p ara iO S es la in s ta la ci n y eje cu ci n

EN IOS

de exten sio nes creadas para el n a veg ad o r web


de G oogle. Tam p oco co n tam o s con la p o sib ilid ad
de agregar una W ebA pp a la p a n ta lla de iOS desde
Google C hrom e, p or ser esta una fu n ci n
existente
ya en Safari M obile.
Por lo tanto, cada v e z que ejecu tem o s u n a W ebA pp in sta la d a en
iOS, esta solo c o rre r u tiliz a n d o el n aveg ad o r w eb Safari M o b ile y el
so po rte que este b rin d a p ara H TM L5 y Ja v a S c rip t, que generalm ente
d ifiere de Google C hro m e y de o tro s naveg ad ores web existentes.

IfcwJU BH *

w w w ,fo d i* e f.c o m

EBOOKS

C O L E C C IO N E S

INI
FU

DIGITAL

Figura 3. El navegador Google Chrome corriendo en iOS.


Por polticas de Apple, no contam os con la posibilidad
de instalar W ebApps en iOS desde Chrome.

www.redusers.com

248

8. W E B A P P S

USEFtS

P A R A IO S

Ejercicio integrador:
Add to home screen
A co n tin u a ci n , a d ap ta re m o s el e je rc ic io re a liz a d o en los p rim ero s
ca p tu lo s de este lib ro , G reen & B erries Farming, para que pueda
s e r in sta la d o en los d isp o s itiv o s iOS, in d e p e n d ie n te m e n te del tipo
de p a n ta lla que estos tengan. Si ya d isp o n em o s de los a rch ivo s
de este e je rc ic io , d escarg ad o s desde el p ortal https://prem ium .

redusers.com , en co n trare m o s la c a rp e ta del p ro yecto Greenberries


y o tra carp eta d en o m in ad a iconos.
En esta ltim a , e n co n trare m o s una im agen llam ad a gb-logo.png,
que debem os a b rir con nuestro e d ito r de im g enes p re fe rid o y
re d im e n sio n a rla , p rim ero , a 144 x 144 pixeles. U na v e z realiz ad o
esto, debem os g u a rd a rla con el sig u ien te nom bre: gb-logo-144 xl4 4.png.
Luego d eb em os re d im e n sio n a rla n u e vam en te a 1 14 x 114 pixeles
y g u a rd a rla con el nom bre g b -lo g o -1 1 4 xll4 .p n g .
A co n tin u a ci n , vo lv e m o s a re d im e n sio n a r la im ag en a 72 x 72

pixeles y la guard am os con el n o m b re gb-logo-72x72.png. Por ltim o,


a 5 7 x 5 7 pixeles y la guard am o s com o gb-logo-57x57.png. El resultad o
o b ten id o debe ser s im ila r al que v is u a liz a m o s en la Figura 4.

**

KM

w .

G#
B

M mn
n *-
J fertud.

m i-w"i

G #

n i*

F ig u ra 4. El icono creado con sus distintas dimensiones,


especificadas en el nombre del archivo.

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

USEKS

249

Mostrar la WebApp como nativa en iOS


Ya con el repaso por las prestaciones del navegador Safari Mobile
y con los iconos creados y redim ensionados correctam ente, podem os
adaptar nuestra W ebApp para instalarla en la pantalla del sistema
operativo iOS. Lo p rim ero que debem os realiz ar es a b rir el proyecto que
descargam os desde R e d U s e r s P r e m iu m en nuestro editor web favorito.
Luego, debem os e d ita r el a rc h iv o index.htm l de n u estro p ro ye cto , al
cual le agregarem o s el c d ig o n ecesario p ara p o d e r in s ta la r la W ebApp
en la p a n ta lla de iOS. U b ica m o s d en tro de este c d ig o el apartado
<HEAD> del a rc h iv o H T M L e in m e d iatam e n te d eb ajo de la lnea
de cdigo cm eta name= view p ort content= w idth=device-w idth, in itia l-

sca le = l >, agregam os el sig u ien te cdigo:


c m e ta n a m e = "a p p le -m o b ile -w e b -a p p -ca p a b le " c o n te n t= "y e s ">
c m e ta n a m e = "a p p le -m o b ile -w e b -a p p -s ta tu s -b a r-s tyle "co n te n t= "b la c k ">

Este cdigo ya nos p erm ite d efin ir que nu estra W ebA pp es un sitio
web ap to para in sta la rse d en tro de la p a n ta lla p rin cip a l del sistem a
o p e ra tivo iOS. Luego d efin im o s que la b arra de tareas s u p e rio r de iOS
sea tra n sl cid a. Po dem os o p tar tam b in p or que sea negra o del co lo r
p or d efecto del sistem a o p erativo .

Icono de la aplicacin web


Seg u id o al cdigo agregado en el a rch ivo index.htm l, d eb em os sum ar
la d es c rip ci n para cada uno de los ico no s re d im e n sio n a d o s para las
d istin ta s p antallas de iO S. Para ello, agregam os el sig u ien te cdigo:

c lin k re l= "a p p le -to u c h -ic o n " s iz e s = "5 7 x 5 7 " h ref= //gb -lo go -5 7 x5 7 .p n g// />
c lin k re l= "a p p le -to u c h -c o n " sze s = "7 2 x7 2 " h re f= "g b -lo g o -7 2 x 7 2 .p n g " />

N A V E G A D O R E S W E B P A R A IOS
T o d o s los n a v e g a d o re s w e b que existen actu alm e n te p a ra la platafo rm a iO S utilizan c o m o m o to r

d e r e n d e r iz a d o d e la s p g in as w e b la versi n W e b K it de S a fa ri M obile. E s un requisito d e Apple.


C h ro m e y O p era M o b ile tam b in so n o b lig a d o s a utilizar e s te m o to r w e b y no su s propias ve rsio n e s.

www.redusers.com

250

8. W E B A P P S

USEFtS

P A R A IO S

< link re l= "a p p le -to u c h -ic o n " s iz e s = " 1 1 4 x ll4 " h r e f= "g b -lo g o -1 1 4 x ll4 .p n g "/>
c lin k re l= "a p p le -to u c h -ic o n " s iz e s = "1 1 4 x l4 4 " h re f= "g b -lo g o -1 4 4 x l4 4 .p n g "/ >

Con esto ya tenem o s d efin id o el icono para cada una de las


p o sib les p antallas de los d isp o s itiv o s que co rren iOS, in clu ye n d o
hasta la g en e raci n de iPad Mini e iPad Air, los ltim o s m odelos
de iPad lan zad o s p or A p p le al m o m en to de e s c rib ir esta obra.
Seg u ram en te las fu tu ra s ve rs io n e s de iPad au m e n ta r n la reso lu ci n
de su p a n ta lla y hasta ag ran d arn el rea de v is u a liz a c i n , lo que
pu ed e traer cam bios en la reso lu ci n co rrecta del ico no a crear.
Llegado el m om ento, solo debem os to m ar el a rc h iv o PNG base
que u tiliz a m o s al m om ento de d e s a rro lla r los e je rc ic io s de este
ca p tu lo y ad ap ta rlo a las fu tu ra s n u evas d im e n sio n e s, agregand o la
co rresp o n d ie n te ln e a de cdigo en la pgin a index.htm l.

Iconos prediseados
H ASTA LA V E R S I N
6.X DE IOS, A P P L E

Hasta la ve rsi n 6 .x del sistem a o p e rativo iOS,


A p p le in clu a dos tipos de iconos que se podan
crear para id en tificar una W ebApp in stalad a en la

IN C L U A TANTO ICONOS

home screen: los iconos com unes com o los que

C O M U N E S COMO

cream os en este e je rcicio y los p ersonalizad os,


con form a y diseo creado por uno m ism o y

P E R S O N A L IZ A D O S

que no pueden ser m odificados por el navegador


Safari Mobile.
A p a rtir de la v e rs i n 7.0, en la que su fri

un re d ise o im p o rtan te, m u ch a de la e s t tica 3 D que se ap licab a a los


ico n o s cuando las apps o W ebA pps eran in sta la d a s en la hom e screen
de este sistem a o p e ra tivo ya no es tan v is ib le , d ado que iOS 7.0 o
s u p e rio r a p lic a actu a lm e n te una e sttica d en o m in ad a 2 D en el diseo
de los iconos. Lo nico que m an e ja esta n u e va e st tica en p ara le lo a
su ve rsi n a n te rio r es el b o rd e red o n d ead o de cada icono.
Si deseam os que n u e stra W ebA pp posea ca ra cte rstica s
d eterm in a d a s en su icono, y que este no sea in te rv e n id o p or iOS,
debem os u tiliz a r la le ye n d a -precomposed al final del nom bre de
a rc h iv o de n u e stro s ico no s. El n o m b re q u ed a ra, p or ejem plo,
com o gb-logo-57x57-precom posed.png.

w w w .re d u s e r s .c o m

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

El cdigo co rre sp o n d ie n te al ico no precomposed debe q u ed ar de la


s ig u ie n te m anera:

c lin k re l= "a p p le -to u c h -ic o n " S zes= /,5 7 x5 7 // href= "gb -lo go -5 7 x5 7 -p reco m p o se d .
p n g "/ >

Reco rdem os que esto slo fu n c io n a r p ara las ve rsio n e s de iOS


an te rio re s a la 7.0.

F ig u ra 5. Hasta la versin 6.x de iOS, los iconos con efecto p re c o m p o s e d


eran vlidos para respetar el diseo personalizado de la web y no forzar a
tener la esttica de iOS. Desde la versin 7.0 esto ha sido discontinuado.

Splash screen de la aplicacin


Al igual que en las a p lic a cio n e s n a tiva s o h b rid a s que se in stala n
desde la tienda de a p lic a cio n e s A p p Store, los m eta tags del
n aveg ad o r Safari M obile nos p erm iten e sta b le ce r un a im agen
de in icio de W ebApp, co n o cid a com o sp la sh screen. Estas
im genes se m o strarn en el d is p o s itiv o e n el m om ento en que se
e jecu ta el in ic io de nu estra W ebA pp y e starn v is u a liz a d a s algunos
segu n d os m ien tra s se carga la pgina p rin c ip a l de la a p licaci n.
A d ife re n cia de lo que v im o s con el ico no de la W ebA pp, las im genes
re feren tes a la splash screen se segm entan p or d is p o s itiv o (iPh o n e /
iPod o iPad ) segn el tip o de pantalla.

www.redusers.com

252

l/SERSl

8. W E B A P P S

P A R A IO S

Splash screen para iPhone o Pod


La splash screen para iPho ne o iPod solo so p o rta la o rie n ta ci n

portrait (p ortarretrato o vertical). Esto o cu rre p orq ue las


W ebA pps no p ued en ser in icia d as en m odo landscape (apaisado
u horizontal). P o r lo tanto, m ie n tra s se in ic ia la W ebA pp desde la
p a n ta lla p rin c ip a l de iOS, la v is u a liz a c i n de la im ag en sp la sh screen
se har en m odo p o rtra it, sin im p o rta r si el d is p o s itiv o se e n cu en tra
en m odo ap aisad o o vertica l.
El tam ao de las im genes recom endadas por Apple para splash
screen a visu a liz ar en los d isp o sitivo s iPhone o iPod que no poseen
pantalla Retina es de 320 x 460 pixeles, m ientras que las imgenes
splash screen para los d isp o sitivo s iPhone que s poseen pantalla Retina
tienen exactam ente el doble de resolucin: 640 x 920 pixeles. El cdigo
para vis u a liz a r las im genes splash screen para iPhone es el siguiente:

<!-- iPhone -->


< 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 ">

<!-- iPhone (Retina) -->


< 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

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

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

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

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

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

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
T E S T DE A U TO E V A L U A C I N ______________________
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?

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

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

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

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

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

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

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

"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

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

[ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

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

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

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

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

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

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

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

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

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:

d D O C T Y P E htm l>
<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

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

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

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

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

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

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

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

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?

Si tiene alguna consulta tcnica relacionada con el contenido, puede contactarse


con nuestros expertos: profesor@redusers.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A P N D IC E B. F IR E F O X O S

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

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

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\

A P N D IC E B. F IR E F O X O 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

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

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

A P N D IC E B. F IR E F O X O S

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

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

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

A P N D IC E B. F IR E F O X O S

"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

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

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

A P N D IC E B. F IR E F O X O S

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