Desarrollo-web-para-dispositivos-móviles-pdf

DESARROLLO WEB
PARA DISPOSITIVOS
MÓVILES
HERRAMIENTAS PARA DISEÑAR Y PROGRAMAR W EBA PPS
por Fernando Luna
RedUSERS
U
S
E
F
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
PÁG INAS:
320
Copyright O MMXIV. E s una publicación de Fox Andina en coedición con DÁLAGA S.A. Hecho el depósito que m arca la ley 11723.
Todos los derechos reservados. E s ta publicación no puede ser reproducida ni en todo ni en parte, por ningún medio actual o
futuro sin el permiso previo y por escrito de Fox Andina S.A . Su infracción está penada por las leyes 11723 y 25446. La editorial
no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamiento y/o utilización 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 dueños. Impreso en Argentina. Libro de edición argentina. Primera impresión 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
4
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 peña com o ana­
lista funcional de sistem as. Realiza tareas
de relevam iento, diseño, prototipado y
especificaciones técnicas para brindar
soluciones inform áticas.
Colabora con las revistas USERS
y POWER USERS y en vario s blogs de
program ación y tecnología.
En el año 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 Nicolás y Ju lián , que son el com­
bustible que im pulsa mi m otor de aprendizaje y constante mejora.
A mi com pañera de vida, Laura, quien me brinda la perfecta arm onía 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 sueño se co n vie rta en realidad.
Tam bién a mi fa m ilia, q uienes siguen respetando mis tiem p o s y acom pa­
ñándom e en el sueño 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
Prólogo
Mi infancia estuvo acom pañada de algún que otro juguete
electrónico y tam bién de la pasión de mi padre por la música
contem poránea, quien hizo que me criara desde tem prana edad
rodeado de tocadiscos, com binados y grabadores m onoaurales.
Por suerte (o por desgracia), la profesión 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 electrónica, a conocer más de cerca cada
com ponente que conform aba los artefactos.
En mi ad olescencia me ocupé de aprender los secretos de
la electrónica aplicado s al m undo de la radio, el audio y la co m ­
putación, en el m om ento en que a esta ú ltim a aún se la llam aba
"electrónica d ig ital”.
Ya con la pedagogía m oldeada, gracias a mi amigo Hernán,
del m aravillo so m undo del silicio, las placas conductoras y las
m em branas d ieléctricas, 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 putación: prim ero, com o operador
ofim ático y diseñador gráfico; después llegaron la anim ación
y el diseño asistido por com putadora; y, por últim o, la progra­
mación. En mi caso, la últim a fue la vencida.
Los últim os protagonistas que generaron interés en mí
fueron los BBS, seguidos de internet. Estas inm ensas centrales
de inform ación que crecen día a día term inaron de fo rjar mis
conocim ientos y mi pasión por este m a ravillo so m undo digital.
La evo lu ció n tecnológica siguió avanzando, y hoy encuentro
conjugados, en cualq uier d isp o sitivo m óvil, los cuatro elem en­
tos que m arcaron mi pasión por el desarrollo de aplicaciones
para este pequeño m undo de bolsillo: la electrónica, la in fo rm á­
tica, las com unicaciones y la program ación. 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
6
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 tecnología 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 iseñar y p rog ram ar W ebApps d inám icas y explotarem os las capacidades
del h ard w are de estos d isp o sitivos.
PLATAFORMAS Y TECNOLOGÍAS MÓVILES
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
1
INTERACCIÓN 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 PROGRAMACIÓN
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
7
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 utilización 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|/ *Ae»A
■
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 brindarán inform ación 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:
0
CURIOSIDADES
E IDEAS
ATEN CIO N
DATOS UTILES
SITIO S W EB
Y NOVEDADES
www.redusers.com
«
8
C
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
5
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 rería 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 tecnologías
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 uándo 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 híbridas............................................................... 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
hÉOlh
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
Configuración 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
Interacción 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
Hipervínculos en jQ uery M o b ile ..............................146
« • fe s
lo s O rg án ico s
Interacción 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 , aoíwi. . « I *
P ro d u c to s Hld
n»<T>Brua quMkCoa
mr
^ PoaMu
«ru olM . i
Com unicación a través 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
•o
C2J
i3>
♦
=>
M
según 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 solución 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
Adaptación 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 ación
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
Cómo 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,-
i
.216
i
| «
.215
• w
llM »
lIMtaM
**
"""
....
—
—
W ebApps para iOS
D iseñar 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 ..................................................
I
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
Comprobación de compatibilidad
W ebApps para Android
y otros dispositivos
de un n aveg a d o r....................................................... 221
D iseñar 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 generación 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
Instalación 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
Utilización de Rip ple E m u la to r............................. 30 3
E l aporte de F ire fo x ................................................ 30 5
B
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 aracterísticas 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 ución 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 odificación de index.htm l..................................... 280
Cóm 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
Introducción
Si segm entam os los notables avances que tuvieron lugar en
las últim as dos décadas en m ateria de evolución tecnológica,
podem os resum irlos en tres actores im portantes: la com p uta­
dora personal, internet y la telefonía m óvil. Debemos destacar,
adem ás, que este últim o actor tuvo su propio Big Bang dentro de
la evolución 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 bién 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 través de ella, ho y en día 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 electrónico, m irar nuestras
series o p elícu las favo ritas, re aliz ar llam ados telefónico s, leer
libros electrónicos, 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 través de esta obra, explotar estas nuevas tecnologías a
p artir del desarrollo de soluciones que apro vechen los recursos
que nos brinda hoy un teléfono inteligente o una tablet.
G racias a la constante actualización de la tecnología basada
en la Web, estas solu ciones pueden llevarse adelante tanto desde
una aplicación n ativa instalada en un d isp o sitivo com o desde
una página web cargada en nuestro navegador m óvil favorito.
Los in vitam o s a descubrir, en las próxim as páginas, cómo
podem os explotar cada una de las características que brindan
los d isp o sitivo s m óviles, enfocándonos en la arquitectura de
hardw are y softw are que cada uno de estos pequeños artefactos
pone a disp osición del usuario.
»
www.fedusers.com
z o
\\\\\\\\\\\\\\\
///////////////
Plataformas y
tecnologías móviles
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 .
Introducción a la Web m óvil....14
▼Tecnologías de la Web actual ..35
Plataformas móviles................. 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
Introducción a la Web móvil
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 más suena en n uestras m entes desde, ap ro xim adam ente,
el año 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 año.
El m undo IT ya ve n ía trab aja n d o , desde algunos años 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 más 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 más se v e n d ie ro n en esta ú ltim a década,
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
escáneres 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 telefonía m óvil fue de la
m ano de Nokia. Algunos años más 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
fís ico QWERTY y un sistem a o p e ra tivo gráfico c u y o naveg ad o r
so p o rtab a páginas 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 líc 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 teléfono.
\¿\¿)¿
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 títulos 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 cód 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 años d esp ués, So n y Ericss o n llegó al m ercad o con su
m o d elo P990, un teléfo n o tá ctil con p a n ta lla gráfica 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 año más
tarde, ap areciero n las tablets. Así fue com o la tecnología que había
su rg id o entre diez y q uince años 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 pequeña 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 batería
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 países com o A rg en tin a, la telefonía ce lu la r acaparó el
m ercado de m anera im pensada, su p eran d o en núm ero a la telefonía
fija e in clu so a la p oblación de toda una nación.
En un estu d io lle vad o ad elante en 2013, la p oblación 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 telefonía 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 líneas telefón icas de hogares y, en m uchos
casos, el teléfono ce lu la r reem plazó p or com pleto a las líneas fijas.
Con la p ro life ra ció n de líneas 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 opción 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 más 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 ién llegaron
los h íb rid o s: netbooks que p erm itía n to rce r su p an talla para
c o n v e rtirla en un d is p o s itiv o táctil.
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 lín e a s a n te rio re s d e sc rib im o s lo que es una
p lataform a móvil, p od ríam 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 peño d iario de nuestras
a c tiv id a d e s la b o ra le s y/ o académ icas.
Entre las ca ra c te rís 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 rís 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 ría 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
inalám 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 inalám 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
año 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 rtátiles.
Entre todas las prestaciones que los sm artphones nos brindan, vale
destacar que la m ayoría 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 ría in stan tán 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 bién 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 integración de p latafo rm as de
d esarro llo de w eb s d inám icas de m anera más am igable y, p or supuesto,
la p oten ciación de la estética de los sitio s web de la m ano de la casi
extinta tecnología Flash.
-i
Figura 4. ICQ, la Web estática, Internet Explorer y Macromedia Shockwave
Player son algunas de las primeras tecnologías 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 rísticas H T M L y CSS p rop ias de una p antalla de m enos de 4
pulgadas, la Web m ó vil ya existía en la telefonía ce lu la r desde inicios
de la década 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 teléfonos -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 década del 90 tam bién poseían
una versión reducida de IE, bautizada com o Pocket Internet Explorer.
Hacia fines de los 90, los handheld p oseían una p antalla de 7
pulgadas que p erm itía 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 afán 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,
rápida 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 teléfono s m óviles.
La tecnología WAP fue la que lle vó in te rn e t a los teléfonos 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 más 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.
¿Cuándo 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 itiría n d istin g u ir una conexión de
com p utadora norm al de una conexión 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 año 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
tecnologías 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 evolución de la Web móvil desde la era WAP a inicios de 2000,
escalando en la evolución iPhone y finalizando en las actuales aplicaciones web.
La tecnología 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 requería de un tiem po que iba de unos segundos hasta
al m enos un m inuto. Esto se trad u cía 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 tecnologías m ó vile s y
co n ju garlas con el m enor im pacto posible con las tecnologías de la Web
básica, se in ició un plan que perm itiera, m ediante H TM L y CSS, unificar
el d e sa rro llo web para más 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 unificación 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 tecnologías
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 móviles
El m ercado m o b ile d isp o n e de un núm ero im p o rta n te (y d ifíc il
de c a lc u la r) de p lata fo rm a s m ó vile s que agrup an tanto a los teléfonos
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 año 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 rría una ve rsió n a d ap ta d a de OSX.
iOS o b tu vo su nom bre oficial recién 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 itía 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 teléfo 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 oríg 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 interés
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 sólida.
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 tía 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 ecíficam 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 núcleo
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 teléfo 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 ría p or em p resas asiáticas,
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 más 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 código
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
móviles que reinan el mercado de smartphones y tablets.
Windows Phone
M icrosoft tam bién irru m p ió , en 2010, en el m ercado de la telefonía
m ó vil con su sistem a o p e ra tivo W indows Phone. Este fue una
re in g en iería co m p leta del v ie jo sistem a o p e ra tivo W indows Mobile,
que no había logrado interés en la p oblación y que M icroso ft tam bién
había 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 añía 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 iería 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.
f
09:00
-V
ÉÜ ®
ir
&
<•***
a n
Z //
b
|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 móviles.
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 nía 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 ganárselo 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 Fundación Mozilla, d ueña 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 rés 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 España,
d e c id ió crear un s iste m a o p e ra tivo m ó vil que tom ara com o filoso fía
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 teléfo 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 erán 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 aún 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 avía 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
Fundación 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 estándares
web y fu e p ensado no solo para el m und o de los sm artp h o n es, sino
tam b ién 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 través 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 próxima revolución de sistemas operativos móviles.
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 más p o p u la r de la ú ltim a década, tam b ién 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 táctiles. 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 táctiles. 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 más 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
código 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
años en la m a y o ría de los d is p o s itiv o s Kindle
E L CÓDIGO F U E N T E
e - re a d e rs y tablets A m azon Kindle Fire.
Al estar basado en el código 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 más, 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 táctil o m e d ian te fle ch a s d e navegació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
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 ningún sm artp ho ne.
EseabCh
f ' ta ■ itt» |
H om e
•J
m
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 lín 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 lín 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 aún 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 rísticas: 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, aceleróm 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 móviles
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 más 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 ría 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 más.
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 aún 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 tegránd 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 ecífico 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 través
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 cám ara de los teléfono 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 lím 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
g
to* 4
&
31
»
Co*
Figura 10. Las redes sociales fueron las primeras
aplicaciones móviles en llegar a los teléfonos inteligentes.
WebApps
W e b A p p p ro vien e de la co n ju n ció n de las palabras en inglés 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 algún otro lenguaje de p ro g ram ación que trabaje
del lado del se rv id o r (PHP, ASP.Net, Pytho n, Ruby, CGI, Perl, etcétera).
¿U N O , DOS 0 MÁS 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
c ■
RU
B L !S 5 :r- j= :
p y —* i i
I -------
¡ w m — »■
i
a --------
Figura
11.
Muchas WebApps han lanzado una versión específica para
dispositivos móviles, aun teniendo una aplicación 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 rácticam ente todas las características del
h ard w are y del sistem a o p erativo m óvil.
Apps híbridas
Podem os d efin ir una ap licació n híbrid a com o una ap licació n web
d esarrollad a con los estándares 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 arám 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 estándares H TM L5, CSS y Ja va S crip t- con una lib re ría Ja v a S c rip t
que agrupa funcio nes específicas para acced er al h ard w are de los
d isp o sitivo s m óviles.
PhoneG ap e jecu ta una sesión 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 estándares, 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
i
7
h e a lt h ® 0 0
r a
Figura 12. Algunas de las aplicaciones que utilizaron la
tecnología PhoneGap para crear apps híbridas 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 ación d iferentes. Esto presentará una curva de
aprendizaje m uy grande, que insum e m uchas horas, y casi ninguna parte
del código local u tiliz ad o en un desarrollo podrá aprovecharse en otro.
Las ap licacio nes híbrid 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 características.
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
híbridas de la ve rsió n móvil 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 través
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
Tecnologías de la Web actual
A lo largo de esta últim a década, la tecnología que reina la Web
cam bió drásticam 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 gráfica p od ía lle va r la im ag inación
de un d esa rro lla d o r o d iseñad or web hacia cu a lq u ier rincón.
A p a rtir de 2007, cuando A p p le lanzó su iPhone y, en su com unicad o
oficial, anunció que habían d ecid id o d ejar la tecnología Flash fuera
de iOS, esta tecnología 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 baterías 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 países), p or lo que Flash
cau saría una dem ora im p o rtan te en cargar u n a web en iO S y co n su m iría
su batería. Un ú ltim o m o tivo : los baches de seguridad que siem pre
tuvo esta tecnología podrían 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 continuación,
estas tres características 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 vacío que había dejado Adobe Flash.
www.redusers.com
36
l
/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
años, 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 stán d ares que
in flu ye n en el d ise ñ o y en el d e sarro llo de u n a página 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 estándares
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
estándares, 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
cóm 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
página web de m anera ráp 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 ría de los b ro w se rs so po rtan un g ran núm 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 bién
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 códec 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 código 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 atería 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 página web tam bién fue reem plazad a casi
p or co m p leto con H TM L5. A ctu alm en te, crear una página 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 código H TM L, cuál secció n co rresp o nd e a la página.
<head>
T ítu lo de la página 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 código 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 página web.
Figura 14. Un sitio web que funciona com o fuente
de información de la tecnología HTML5 es www.html5rocks.com.
css
Las siglas CSS p ro vie n e n del inglés 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 ecífico a cada e tiq u e ta que se u tiliz a d en tro de la co n stru cció n de
una página web. M ed ian te CSS, ento nces, podem os d efin ir el form ato,
color, fuente, tam año, 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 página web.
CSS3, su últim a versión estable, perm ite aplicar reglas sim ilares a la
condición 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 página HTM L y m ostrar u ocultar secciones.
Figura 15. www.cssbasics.com nos pone a disposición un libro online con
todas las características 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 ación podem os re a liz a r un
s in fín de cosas sobre los objetos que una página w eb puede tener.
A ctu alm en te todos los navegadores m odernos in te rp re ta n sin problem a
el código Ja v a S c rip t que se integra d entro de las páginas web.
La m a y o ría 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 rística 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 página web.
uj3schools :om
■cus
*’*C
CU
1
—
,n
—
W
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.
Librerías y fram eworks móviles
Para co m p re n d e r m ejor los térm inos del d esarro llo web, debem os
separar los térm ino s libre ría y fram ework. Una lib re ría es un
I I
CSS3: E L VE R D U G O
1
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 ación,
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 diseño
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 tecnologías que puede englobar
L A S L IB R E R ÍA S M Á S
características 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
solución web para am bas p lataform as. D entro de
JQ U E R Y M O B IL E ,
las lib rerías más 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 específicas
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 estética o solución 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 solución, estructu rad o s de una m anera jerárq u ica .
D entro de los fra m e w o rk s más 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 rís 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 ría 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 librerías
más 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 inglés)
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 ién 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 año 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 estándar
en estándares 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^rlpadanartojíprocrnwcfctofmcmto
Mí?
jn - H '- r -
c*'c«—
6«c & 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
m
a<a a
íif * c s n * t a i a l « • c '-a m c
tuTundeC'MV'C*0 UHiCC¡uU»3©C ÚMVtCICuC
ca
te *« u
o j* *
Figura 18. Desde www.adobe.com/products/dreamweaver
podem os descargar la versión 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 código que escrib im o s, y tam b ién 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 días,
D REAM W EAVER
con su scrip c ió n p re via , en su página 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 ién p o d rem o s lle v a r a cabo estos
CÓDIGO 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.
W■I IMM«llUUi
O
Q
—
J
E1a
y
r« :■ -
, +
ó
í
>
«
uaD
_
9
Í
«■■..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 opción, ya que su última versión
integra un visor WYSIWYG y un web server nativo.
»
www.redusers.com
M
W
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 interactúa 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 gía 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 . También 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 híbrida, y los en to rno s d e
d esarrollo y librerías que n o s perm itirán 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 ría 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?
2
Mencione algunas ventajas que brinda una WebApp.
3
¿Qué es una aplicación nativa?
4
Mencione dos características de las aplicaciones nativas que las coloquen
en desventaja con respecto a las WebApps.
5
¿Qué es una librería?
6
¿Adobe Flash consume m enos recursos que los que HTML5 y C S S exigen
en un browser?
7
¿Los dispositivos móviles de Apple poseen soporte de Adobe Flash Player?
8
Nombre al menos cuatro plataformas actuales del mundo móvil.
9
¿Qué es JavaScript?
10
Mencione al menos tres frameworks de desarrollo móvil.
P R O FESO R EN L IN E A
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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 serán
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
▼Geolocalización............
▼Declaraciones y metatags.... ....50
▼Resumen........................
▼HTML5 para
▼Actividades....................
aplicaciones móviles............ ....56
n
■
_
z 17 1z1
l
46
l/SERSl
2. H TM L5
El lenguaje HTML5
HTML5 fue creado con el propósito de b rindar soporte al contenido
existente en la Web basándose en los estándares im puestos con HTML
4.x, pero unificando la estética 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 están d ar propuesto por HTML5 podem os hacer alu sión 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 iseñad 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 más
utilizado, seguido por Internet Explorer, Firefox y, más 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, Galeón, 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, Incógnito, Epiphany, myBrovvser, RockM elt, y otros tantos más
que harían 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 más 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 segmentación de Android (versión 2.1 a 4.4), Android browser
es el navegador más 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 seguía
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 películas
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, aún 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, gráficos, CSS3 y Ja v a S c rip t) y
lo traduce a lenguaje gráfico, p intand o en p antalla la estética del sitio
web o correo electrónico, para que el usuario lo visu a lice o im prim a.
A p esar de que la segm entación se está reduciend o, aún existe una
varied ad im p ortante de m otores de rend erizad o . Entre ellos están:
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 más u tiliz a d o s p or los brow sers más
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 están 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 ría 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 tecnología 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 bién
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: geolocalización,
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 diseñadores
y program adores web puedan crear páginas, sitio s ricos en co ntenido,
sin d ep en d er de herram ientas o plugins de terceros.
HTML5 garan tiza que quien diseña 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 edición de im ágenes, efectos de som bras, rep resentación de
m apas, visu a liz a ció n de vid e o s y repro ducción de audio, así com o
o bten er la ub icación física 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
W
Figura 4. Para conocer en detalle lo que nos brinda HTML5,
podemos recorrer el sitio www.mobilehtml5.org, donde
encontraremos su cobertura según 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 rística s de HTM L5, la m ayo ría presta el soporte
necesario para que las W ebApps o sitios web basados en este nuevo
estánd 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
recípro cam ente. No hay restriccio n es en cuanto al diseño de una
página, y todo el código que escribam os en HTM L4 funcio nará sin
p ro b lem as en HTM L5. De igual m anera, si una página re a liz ad a en
H TM L4 co n tien e etiquetas especificas de HTM L5, estas fu n cio n arán
sin ningún inco nveniente.
Doctype
Toda página 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 página, <headx/head>, y el cuerpo de la página,
<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 páginas
w eb com o páginas XML, im ágenes y, en las ú ltim as versio n es de los
b ro w sers más populares, tam bién 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 aún 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 recién
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 página <head> se agregan d eclaraciones
y referen cias a otros a rch ivo s que requiere la página 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 ningún archivo.
•
El titu lo en sí que m uestra la página en el naveg ad o r web.
< !d octyp e htm l>
<head>
< title > E s to es una página 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 página, mentís, textos, im ágenes, videos, etc -->
</body>
</html>
En el cuerpo de página <body> se inco rp o ra todo el contenido
que n o rm alm ente visu a liz am o s en las páginas web de los sitios
que v isita m o s. Entre ellos:
•
El logo de la empresa.
•
La b arra de navegación o m enús.
•
Fragm entos de textos e im ágenes.
• Video, audio, Iin ks hacia otros tip os de archivo.
• G ale ría de im ágenes.
Si aún no hemos instalado ningún 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 código 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 sección 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 página
web (español, inglés, francés, portugués, etcétera). Esto afecta la
vis u a liz a ció n de los caracteres.
... S tr¡c 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 específico para
P A R A D E C L A R A R UN
que la página se ve a co rrectam ente en inglés,
español, 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 específica 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 español 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 cóm 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 página
< body> .
Nos queda p or delante repasar las secciones creadas para HTML5 que
represen tan el co n ten id o de una página web.
Todos los sitio s in co rp o ran en su e stru ctu ra una m etodología 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 ación (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 página.
Encabezado
B a rra
B a rra d e navegación
(links.
publicidad)
Cue rp o principal
(N o ticias , im á g en e s, videos, e tc .)
P ie d e pág in a
1
Figura 6. Representación gráfica de las secciones de un sitio promedio.
HTML5 buscó nombrar cada sección de una manera mucho más 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 bién la de los m otores de indexación. 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 ▼CÓDIGO DE IMPLEMENTACIÓN
-
•••
••• M
T DESCRIPCIÓN
H eader
<header id= //encabezado//>
Cabecera de la página.
Hgroup
<hgroup>
P e rm ite agrup ar tags
< h l> T ítu lo l< / h l>
del tipo títu lo dentro de
< h2 > S u b título 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 navegación principal
<a h re f= "l¡n l< 2 .h tm l"> l¡n k 2</a>
que contiene diversas
etiquetas.
</nav>
Section
<section>
P e rm ite d e finir un área
< h 2 > Títu lo 2</h2>
de contenido dentro de
<im g src=//im agen ,7>
un sitio w eb. Se u tiliza
< p> Texto de la sección</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 -
página 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 ▼CÓDIGO DE IMPLEMENTACIÓN
A rtic le
55
▼DESCRIPCIÓN
< art¡cle >
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
extraídos fácilm ente y
distribuidos a través de
servicios R SS.
Aside
<aside>
P erm ite estructurar
<h4>Escapadas</h4>
en un sitio web todo
< p>B ahía M anzano - V . la Angostura</p>
contenido que no
<p>Cabañas Huapi - Bariloche</p>
tenga relación con los
...
elem entos p rim a rio s de
</aside>
este, com o ser una barra
la te ra l de inform ación.
Tabla 1. Nuevos elementos de estructura/semánticos en HTML5.
Existen m uchas más etiquetas que nos perm iten crear una página
web m oderna y que, com b inadas con CSS, ayud arán a cu alq u ier
d esa rro llad o r o d ise ñ ad o r web en la estética y la estructura, pero el
o b je tivo de este lib ro es ab arcar el desarrollo web m obile y cóm o se
integra este con los d isp o s itiv o s m ó viles. Por esta razón, dejarem os
el diseñ o estético de cada a p lica ció n en m anos de una lib re ría com o
jQ u e ry M obile.
Si desean co n o cer más a fondo sobre HTM L5 podrán hacerlo a través
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 ación p re c is a y actualizada.
www.redusers.com
«
56
.
USEFtS
2 H TM L5
HTML5 para
aplicaciones móviles
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 ría de estos reina la interfaz de escritura táctil.
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 físico 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 ación.
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 específica en una página web.
c
a
—
« « ■ » "
a
-
t im e
r.
' ’ f ”
*-
C
A
1 * .
A
a
B Í 1 C
T IM E
O
Q
S F C T B N ft »
Fiscal Cliff Averted. But
Further Deadlines Loom
Figura 7. Desde la proliferación de los dispositivos móviles, el diseño
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 táctiles, el ingreso
de in fo rm ació n a través del teclad o correcto.
Veam os, a co ntinuació n, cóm o im p le m e n ta r favo rablem ente
la etiq u eta <InputType> en el diseño 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
x
<
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
m
cok* fe v x tto .
Figura 8. Selección 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 erización, 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
«
U
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
O
H
x
‘
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
1
2
3
4
5
R
7
8
9
10
11
12
13
u
18
19
21)
?4
75
31
1
. hoy
2
14
E l
|
«ó b
15
16
22
23
77
78
79
30
3
4
5
6
Dorrai
F ig u ra 9. Selección de la fecha desde un com bo desplegable. La forma
de visualizar el calendario cambiará según 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 específico 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 irección
de correo electrónico. 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
Q
1
I
W
A |
S
|
E
|
R
0
<>1z l *
T
L
Y
I
U
1
0
P |
<3
l g l « i j 1 k 1 l 1 a i I
I
i
l
l
.7123
1
i
1
r
-
t
í
Figura 10. En los dispositivos móviles, 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 bién 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
E
°
I
R
i
T
Y
i
U
y
o
y
p
<3
1
1 1 L I 111
i ,i i
1
1 intro
s i
♦
'
¡ G
°
s
J
C
V
B
N
:
/
-
-
O
‘
.7123
COm
■
7123
Figura 11. Para este input type, se incluye en el teclado
virtual una tecla de acceso rápido .COM, y se visualizan solo
los caracteres permitidos en una dirección URL.
Input Type Search
Este in p u t type m uestra un cam po de búsqueda 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 bién se verá en otros navegadores com o Firefox, aunque en este
no se m o strará el botón 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=” algún 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 ación 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 »
C
to k % 20l>roj«
ISB
%
2l
H
í»
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 perfección. Es posible lograr lo mismo en otros navegadores,
pero ya deberá entrar el código JavaScript com o intermediario.
Input Type Range
Perm ite visualizar un control estilo Slider y establecer un valo r mínimo,
un valor máximo 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
También 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
q
h
n m u * b < p u n t o k *o i i »
•*
Bienvenido a miucbtpuntoH*»m
•• • 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 núm ero de teléfono. A sim ple
vista, parece ser un cam po com ún y no tiene ningún efecto en los
naveg ad ores de escritorio . Solo verem o s su efecto en los navegadores
web de los teléfono 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 núm eros.
In grese su núm ero de teléfono: < 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 bién posee el atributo S te p , para establecer el in te rva lo entre
núm ero y núm ero. Funcio na en Chrom e, Safari y Opera.
C
ñ
iley/£yUw rVto«jfW ttofcto0/M otole%3)^
S
\
^
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 mínimo
y máximo y, también, ingresar el valor de form a manual,
siempre y cuando se respeten los rangos establecidos.
Geolocalización
Los navegadores web m odernos in clu ye n una fu n ció n de
geolocalización, a través 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 física asignad a según
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 teléfonos que acceden a la Web a través
de tecnologías 3G o 4G perm iten tria n g u la r una u b icació n m ucho más
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 través 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 térm inos hasta aquí repasados,
realizarem os un ejercicio práctico 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, cóm o integrar en ellos las librerías
Ja va Scrip t, cóm o in vo car un m apa desde la API de Google Maps, y cómo
realiz ar la detección de nuestra ubicación m ediante la geolocalización.
f
O tó lec jlcjcó n
(3
en
H I ML!>
+
u/Mtf.vWimnhili» fflnrvaiVMoftil#W#h/rjipW6#nlorilÍ7,»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
^•bormís,.,
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 móvil, la geolocalización 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 osición.
•
La in vo cació n a un CDN para uso de la lib re ría 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.
Creación de la página HTML
La página H T M L que crearem o s a co n tin u a ció n co n ten d rá el código
n ecesario (H T M L y Ja v a S c rip t) para poder re aliz ar nuestro ejercicio.
D icha página 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 código 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 l¡za 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 próxim os e jercicio s a elab o rar en
los ca p ítu lo s sucesivos.
Integración de librerías 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 osición. Sum ada a esta, tam bién declararem o s la lib rería jQ u e ry, que
nos sim p lificará la tarea de e scrib ir el código JS y de re fe re n cia r a cada
objeto creado en la página. En el Capítulo 3 conocerem os en detalle
esta lib re ría y sus m ú ltip le s usos.
Dentro del encab ezad o del a rch ivo H TM L, agregam os las siguientes
líneas de código:
<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 títu lo del tip o < h l> . A co ntinuación,
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 posición.
Luego agregam os el siguiente código:
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=true"></script>
</scr¡pt>
Este código 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 licitarán 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 ujarán 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 código d entro del tag script:
<script type=//text/javascript//>
var map;
var latitud;
var longitud;
var precisión;
$(document).ready(function() {
localizameO;
»;
Las variables map, latitud, longitud y precisión alm acenarán los datos
de nuestra ubicación cuando aceptem os que nos localice la página.
La siguiente función es una invocación a jQuery, que perm itirá ejecutar la
función localizameO cuando la página 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.getCurrentPositionícoordenadas, 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.getCurrentPos¡tion(),
que recibe dos parám etros: coordenadas y errores. Estos p arám 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;
precisión = 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 posición 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 través 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 ningún 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 máxim o
para d e v o lv e r la p osición 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 ubicación a c tu a l"
»;
>
Por últim o, nos queda la fu n ció n p rin cip al: cargarM apa(). Esta función
p erm itirá estab lecer la in v o ca ció n a Google M aps y pasarle todos los
p arám etros necesario s para d ib u ja r nuestra u b icació n en el mapa.
Veam os el código com pleto de nuestra página 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/l¡bs/jquery/1.11.0/jquery.m ¡n.js//></
scr¡pt>
</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 rt¡cle >
<d¡v ¡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 ">
</d¡v>
</sect¡on>
< 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 r¡p t>
< script typ e = "te xt/ ja v a s c r¡p t">
v a r map;
v a r latitud;
v a r longitud;
v a r precisión;
$ (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
U
S E F tS
2 . H TM L5
}else(
a le rtO E s te navegador no soporta geo lo ca liza ción /);
}
}
function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;
precisión = 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 posición 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 ubicación a c tu a l"
»;
}
</script>
</body>
</html>
Ya creada nuestra página 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.
c
«dametittr na* m
O
c
O
i
Figura 16. El
resultado de nuestro
ejercicio muestra
cóm o el sistema
te
. « tliláffv
usuario antes de
uMcaBOta » tu au to o ír**
S t'rm fi*
O
solicita permiso al
o
*
m ostrar su ubicación
en Google Maps.
R ESU M EN
E s te capítulo 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 inclusión 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 bién
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é función cumple H T M L en la Web?
2
¿Cuál es la versión de HTML utilizada actualmente?
3
Mencione tres características distintivas de H TM L5 respecto de su versión anterior.
4
¿Cuál es la estructura actual básica que com pone un documento HTML?
5
¿HTML5 funciona por igual en todos los navegadores web existentes?
6
¿Input ty p e sigue siendo un único estándar dentro de HTML5?
7
Mencione al m enos dos clases de input types soportados en HTML5.
8
¿La geolocalización determina automáticamente la posición del usuario?
9
¿Los navegadores web de escritorio soportan geolocalización?
10
¿Qué hay que tener en cuenta para geolocalizar a alguien con la m ayor precisión?
E JE R C IC IO S PR ÁCTIC OS___________________________
1
Realice los ejercicios invocando a los diferentes < In p u t Type> en páginas
HTML distintas.
2
Instale al menos tres navegadores diferentes en su computadora.
3
Visualice las páginas HTML con los input types en cada uno de los navegadores.
4
Pruebe el sistema de geolocalización en un smartphone o tablet.
5
Agregue dos etiquetas al ejercicio de geolocalización que permitan visualizar
la latitud y longitud obtenida por la función localizar() en la página HTML.
P R O FESO R EN L IN E A
m
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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
J
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 ría s Ja v a S c r ip t y CSS,
c o n stru id o esp ecíficam 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, cóm 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 más 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 más 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 opción de cam bio de usuario no nos deb ería a fectar en lo
más 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 ningún 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 integración
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 rácticam ente- sin cam bios
tanto en un sm artp ho ne de alta gam a com o en uno de baja gama.
¡i
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
i»
u
1
j o m
o<mni»dlQ..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 «£>*••
iV»yri wvj» ogONOratKM
»K »
«1>» Ufl
r±h
■
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 móviles.
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 ría que co m p le m e n ta las w eb s y hace
más 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 lín e a s de código
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 ría 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 página 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 página
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 código 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 ría s.
Veamos, a continuación, un ejem plo de código, donde in vo cam os a las
librerías de jQ u e ry M obile d entro de una página 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>
< scr¡pt 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 ría 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 núm ero de ve rsió n
co rre sp o n d ie n te de las lib rerías. 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 ría 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 estético 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 ecífico 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 »
m
«■optiMnl w l l n M
1
i
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
i
S
L H M I » Mam
0
«natKiM rlMUffn
O
. m í a d i l M lia n
O
H h»
O
Mm S o
o
a
c i»
O
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 ; más 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 ría 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 ría 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 ién es p osib le u tiliz a r JQ M desde un p ro ve e d o r rem oto de
lib re ría s, lo que se conoce com o CDN (Contení D elivery Network).
En tre los más 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 ría s de jQ u e ry , jQ u e r y M obile
y jQ u e r y UI, entre otras tan tas más, 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 año de in stala ció n de una app n a tiv a o híbrid a.
Veam os, a co n tin u a ció n , un e je m p lo de cóm o lla m a r a las lib re ría 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 página</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 ob¡le/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scr¡p 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 ría 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 ifíc 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
Configuración 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 continuación, en la carpeta raíz de nuestro ejem plo, cream os una
página llam ada in d e x.h tm l y dentro de ella escribim os el siguiente código:
d D O C T Y P E html>
< htm l>
<head>
< t¡tle > 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 ob¡le/1.3.2/jquery.m ob¡le-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 página 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 móvil, 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 página web. P ara p o d er v e r un ve rd ad e ro cam bio
en el diseño 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 específico para
las d iferentes secciones que com p onen una página web. Veamos,
a co ntinuació n, los d istin to s co m p o nentes que podem os in teg rar en
un diseño ap licad o gracias a este co n ju n to de librerías. Estos
co m p o nentes nos p e rm itirá n e stru ctu ra r toda página 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 página 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 ría 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 página 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 más que un en cab ezad o que tendrá
n u e stra página. En e lla p o d em o s in d ic a r el títu lo , in co rp o ra r un logo
y hasta uno o más 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 títu 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 página 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 página 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
< d¡v 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>
< d¡v d a ta -ro le = "c o n te n t">
< p > M ¡ prim era página 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 página
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 página 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 página 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 página 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 página 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 código 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 ¡t¡o 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 estética de una WebApp de la misma
form a, tanto en un navegador de escritorio com o en un dispositivo móvil.
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 avegación 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 línea,
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 línea 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 líneas.
www.redusers.com
U
3. FUNDAMENTOS DE JQ UERY MOBILE
S E F tS
Veam os un e je m p lo de navigation:
<d¡v 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 creación 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 tácten 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 página 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 págin 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 página cuand o fin a liz a la rotación.
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 página; 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 rís 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 enús, etcétera, desde el sistem a
o p e ra tivo para a h o rra r batería.
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 capítulo, jQ u e ry M obile inform a
que aún se
en cuentran trabajand o
en una solución 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 entación 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 ién 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 página definid a com o page con
jQ u e ry M obile o cu a lq u ie r otra página rem ota pueda ser vis u a liz a d a
m ed iante un diálogo. Esto genera una ven tan a tipo m odal, que aparece
su sp en d id a por encim a de la página 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 v¡a r< /a >
Cióse 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 botón s u p e rio r que p erm ite cerrar
la página 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 ién, cie rto s m en sajes de d iálo 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 más com ún
es d arle al usuario la p o sib ilid ad de que interactúe a través de los
b otones de o pciones del cuadro de diálogo, con lo cual el botón 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 ién pod em os ca m b ia r la u b icació n del botón 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 iálo 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 ría 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 código:
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*.
P
X 3 + d 2 2033
i victanobilcccwn v/M obiVW pbA'ai C
ÍQ
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 visualización de formularios modal
o cuadros de diálogo, basándose en un simple HTML de jQuery Mobile.
Ejercicio práctico
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á cóm 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 vío de un m en saje de correo electrónico.
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 página 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 ién a p lica r
tra n sic io n e s entre páginas e in co rp o ra r im ágenes
y texto d is trib u id o s estratég 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 víe 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 l¡gn = //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
líneas de productos: Frutos rojos org& aacute;nicos, sembrados y cosechados bajo los
principales estándares de calidad, y Frutos ro jo s hidrop& oacute;nicos, que
cumplen con su etiqueta org& aacu te;n ¡ca, pero con la diferencia que estos son semb­
rados y desarrollados & iacute;ntegram ente bajo el sistem a de hidroponia.</p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -th e m e = "c " d a ta -p o s itio n = "fix e d ">
<h5> C o p yrig h t V id a M obile</h5>
</d¡v>
</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 página 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 títu lo de en cab ezad o p or u n a im agen con
el logo de la co m p añía. 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 rística s más
im p o rta n te s, u n an ch o que no supera el 80 % del tam año de la
página 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
U
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 código:
< d iv d a ta -ro le = //navbar// d a ta -p o s ¡t¡o 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 través
de la opción L iv e , ver en vivo el resultado de nuestro sitio web móvil.
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 característica al botón co rresp o nd ien te a dicha sección.
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 compañía se copccioliza en la plantación,
cosecha y distribución por mayor y menor d e frutos
ojos y producios relacionados
A diferencia de oirás lim a s productoras.
Sreen&Berries posee dos lineas de producios Frutos
'ojos orgánicos, sembrados y cosechados bajo los
nnnnpalpc Mtándarec ñe ra l dad. y Frutos rojos
nidroponicos. que cumplen con su etiqueta orgánica,
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 sección 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 oría
de p ro d u cto . C u an d o el u su a rio haga c lic en
la categ o ría de su in te ré s, se a b rirá una nueva
págin 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 botón Productos con el
a trib u to ui-disabled. Agregam os, luego, el código
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//>
<d¡v d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a l¡g 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 err¡e s Farm ing L o g o ">
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
<h2>Productos</h2>
< p > A continuac¡& oacute;n puede conocer los productos que co m e rcia liza ­
mos. H aga c lic sobre la cate gor& iacute;a de su ¡nterés.</p>
<div id = "¡m a g e n e s -l¡n k s " a l¡g 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>
</d¡v>
< 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>
</d¡v>
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 ría 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 rvín 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
C
• 23:55
Í£l)
G R EEN BERR IES
FARMING
f
M
w
Productos
A continuación 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 ría de
su interés
O rg án ico s
Figura 8. Desde
la página p ro d u cto s.
html podemos acceder
O
O
O
H is to ria
S h o w ro o m
C ontado
a las distintas categorías
que esta web ofrece.
Veam os aho ra al código de la página organicos.htm l, tom and o
n u e vam en te com o código in ic ia l la página base.html:
<d¡v 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
U
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-organ¡c-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 página 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
conrrcioi»rarrx>5 M*q* etc oocre la (oteqcru o*
su «tictes
•/-
jetos Orgánicos
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
O
F ig u ra 9. Al hacer un tap sobre el banner Productos orgánicos
se despliega la página 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 página h id ro p o n ic o s .
h tm l. A co n tin u a ció n , el código de esta n u e va página:
<d¡v 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>
</d¡v>
< d¡v 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>
3 ▼
.2 3 :5 5
«.
0 T
.2 3 :5 6
^••suJanobáeccaiff/Mob*eWetyCaj 0 Q
~
9
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 ercialízanos Haga d ie sobre U categorta de
ou m t e r o
odLctos Orgánicos
Lisponem os d e la m ism a vénante ae m itos
P r o d u c to s H id
WJl «iSfl
rojos ergámeos 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 orgánicas
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
año, 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
O
G
O
este proposto
Figura 10. Al hacer un tap sobre el banner Productos hidropónicos
se despliega la página h i d r o p o n i c o s . h t m l en modo Popup.
Crear la sección 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 sección, Showroom, donde
www.redusers.com
U
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 código
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//>
< d¡v 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 ">
</d¡v>
< d¡v d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
< h4 > Aten c¡& o acute ;n al público</h4>
< d iv id = "m a p a " a lign = //ce n te r//>
<im g b orde r= //2// s tyle = 'b o rd e r-c o lo r:# 6 9 C ' s r c = " http://maps.
googleap¡s.com /m aps/ap¡/$tat¡cm 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" />
</d¡v>
< 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
estático 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 código de esta U RL, pod em os e n co n tra r el p arám etro
Center=, seg u id o de las co o rd e n ad as de latitud y longitud que sitúan
el m apa en el p unto representad o .
c
c
Atención 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 Comuniqúese
previairente por telefono para coordinar una cita
02321 -234-9876
o
o
o
H is to ria
P ro o u c to t
C o n ta c to
Figura 11. Los mapas estáticos
de Google Maps nos permiten
m ostrar una ubicación utilizando
*-=>
C ió
CD
este recurso de forma gratuita.
El p arám 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 arám etro el ancho por
E L PARÁM ETRO
alto que tendrá el m apa (está lim itad o a 600 x
400 pixeles para los m apas estáticos). Markers
p erm ite estab lecer uno o más 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 ubicarán.
A REPRESENTAR
EN E L M A P A
Crear la sección 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 cuál 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 página 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 página 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 cargarán de m anera
a u to m ática en los resp ectivo s cam pos del clien te de correo electrónico.
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 código:
d D O C T Y P E htm l>
<htm l>
<head>
< t¡tle > 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/mob¡le/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>
<scr¡pt s rc = '/http://code.jquery.com /m ob¡le/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 ">
</d¡v>
< 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 l¡c 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 id¡sabled">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 páginas, 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 página 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
electrónico~ > 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
A
•
Urtt: í'ü" Hh.ii
FA R V IN G
►o»n*oUívo J t con a c to
f«pioanin*«9ii*tcai4
q
w
e
1
y
u
0
p
q
w
e
r
t
V
u
o
p
a
o
d
9
h
j
1
ñ
a
s
d
f
g
h
j
.
A
Z
0
o
"iMirwt
na
suwm
C2 )
o 1
I
c
v
¡g)
—
b
■
m
«■
O
z
•r
r ía
(g
x
c
C2 D
■
y
m n
b n
m
«■
.
u
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 dirección de correo electrónico, 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 *
9¡
C
O
Í
G R E E .N B z R R E S
«
FAFtWlNG
^
t«T#oonl(nsinigm«u 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-uúitu ear- «dock«mi*?*que deba
ecnprar 0» frutoi natutXmT
í+ -
q
w
e
r
l
y
u
a
s
d
f
g
h
j
Enviar
z
0
Hmmim
0
Pn-lurto.
O
* t >
*ia
ñ
1
deb*
*-=>
(C 3
□<
x
c
v
b
i
p
III
ni m
«■
.
4-*
4
—
0
a*
Figura 14. Al presionar el botón E n v ia r , la WebApp ejecutará el cliente
de correo por defecto. Si hay más 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 cuál
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 función
send M ail ( ) se com portará correctam ente, cargando los campos
automáticamente para luego enviar el mensaje de correo electrónico.
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 híbridas. 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?
2
¿Qué librería adicional necesita jQ uery Mobile para funcionar?
3
¿Hay alguna manera de poder utilizar jQuery Mobile sin instalarlo en nuestro
servidor?
4
¿Cómo se com pone generalm ente una página creada con jQ uery Mobile?
5
¿Cuántos tipos de input text podemos identificar?
6
¿Para qué se utiliza el atributo data-role=”button”?
7
¿Qué requiere un Form ulario para funcionar com o tal?
8
¿Cómo puedo utilizar teclados personalizados en los dispositivos móviles?
9
Indique el tipo de input type que permite ingresar sólo números.
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 sección sea una página diferente. Luego
incluya textos de ejemplo en cada una.
2
Cree un formulario con los tipos de campo text, email, password. textarea.
3
Incorpore un botón de enviar y un botón de limpiar campos.
4
Si tiene un sitio web propio, modifique el ejemplo de envío de e-mail con la
función de e-mail que le provee su hosting.
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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 aún 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
t
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 página. 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, viñetas, 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 enús 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 Capítulo 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 cóm 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.
Botón 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 sección
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 botón
y que la página se refresque.
En la m a y o ría de las páginas web de hoy, el re fre s c o de página 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 página, 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 bién 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 botón 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 botón 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 página 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 página p or el
ca rá cte r # y agregam os, en las p ro p ied ad e s del botón, el atrib u to
class=” ui-btn -active ui-state-persist” , lo que nos p e rm itirá resa lta r
el botón 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 visualización
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
W
~GF£
h « ;'
_^c O í
A QHfcfcNBt.MHífcti M
M
a
F A F M IN G
•
F A H M IN G
•
*
G R K N B : * n iE S
4
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(iiria»r tvKmu «n j maiuc«rv
lU K -xn. y d .lin ii.u -. (lii . . . . . ( m ir u u>*uIim
t
-M <t»c 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 cf»itod <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
O
»»» M iHn»i .na i
O
Figura 1. Nuestro proyecto Green&Berries Farming
con su Navigation Bar modificada.
Barra de navegación siempre visible
Si p rob am os nuestro e je m p lo a n te rio r desde un teléfon o m ó vil
o tab le t y p ulsam os sobre algún lu g ar del área de n ave g ació n que
no posea links, una vez cargad a la sección, 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 página,
y no un co m p o n en te F o o t e r , ve re m o s cóm 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 ría 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.
<d¡v d a ta -ro le = "c o n te n t" data-them e= //d/,>
<h4 a l¡g n = "c e n te r"> T o p Ten libros de program aci& oacute;n</h4>
< p > < / p >
<ul data-role=//l¡stview//>
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 r¡p 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 carácter # 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
más 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 táC f
MTMi
Figura 2. ListView clásico, 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 técnicos:
<h3 > TopTen libros de program ación</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 Bas¡c</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 ecífica 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 técn 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 visualización de la inform ación 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?
*
a
m 23
18
Capítulo 04
M o b ile W eb
Ü
[
3
|
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 más 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 botón 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 harían lenta la web dinámica.
»
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 ién 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 están d ar creado
con HTML, s irv e n p ara u n s in fín 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 página 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 botón
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 código 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 tamaño
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 BOTÓN
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 más
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 año estánd ar
que trae p or d efecto. Veam os cóm o hacerlo
en el sig u ien te código:
<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 año, 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 agrupación 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 teléfonos 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
c
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
ftnv»n m m m u i r f n
Figura 5. Esta
página nos muestra
el widget B u tto n
en su formato
M o b d f W ck
estándar, deshabilitado
C Z31
J
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 serán 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 stética 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 creación.
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 botón. 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 ría JQ M , se agregará en el extrem o iz q u ie rd o del botón.
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 BOTÓN
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 stéticam e n te el botón 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 arán 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 apítulo 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
o
F ig u ra 6. Aquí podemos
observar el botón normal
utilizado en formularios, el
botón con icono y el botón
+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 creación
del botón. 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 vor¡to 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 " data¡conpos=//le ft//> P r¡n 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 *
O
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
O
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
o
Figura 7. Los widgets
B u t t o n que utilizan iconos
Mótate wrtto
pueden ubicarlos en
*z>
£23
c =T
cualquiera de sus lados.
Agrupación de botones
Tam b ién 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 ría 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 ién 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
<d¡v 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 año
de un b otón, tan to de form a h o riz o n ta l com o v e rtic a l. Tam b ién 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
botón, 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 clásicos utilizados en el viejo HTML.
A continuación, repasarem os algunas variantes más de este com ponente
y cóm 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 clásica
Al text in p u t clásico , 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 MÁS
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 renglón, 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 bién, si deseam os re su m ir el Label m ás el cam po en una sola
lín 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
visualización, 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 invasión 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 = " " />
</d¡v>
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 línea.
Password
Tam bién 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 ntraseña,
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 a¡r activa el form ato de teclado para ingresar una
d irección de correo electrónico, 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 *
w
Q
s
A
m
E
2
D
X
F
C
y
T
R
0
V
u
H
D
K
J
N
o
1
P
Ñ
**o
q
w
e
r
,
,
u
,
o
p
a
s
d
f
g
h
,
k
1
ñ |
0
X
n a
$
t
c
v
b
n
m
«*
•
"
M
Figura 11. T e x t i n p u t e m a il nos permite ajustar el teclado
de los dispositivos móviles con el carácter 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
c
-f
n. «fcuiMU
m^eMtue-mad
Iniliw»•'•*« •»*
I»9«M ílto Htb
[
»KÍ»'Krt*Hrtv*n*1,y»rWv«-i<.i*<í
<
MoM'Web
Q
W
A
E
S
7
MJ3
R
F
D
X
C
T
G
V
/
Y
H
U
J
R
K
N
1
L
0
Ñ
M
m
.
cam
q w e r t y i l l o
P
f
1
t
.
o
.
d
f
,
h
¡
k
.
O
z x c v b n m *
rm
/
•
Ít23
SBS
, i
^
O
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 teléfon o en el cam po. Reco rdem os que la a c tiv a c ió n del
teclad o n u m é rico sólo 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
2
*oc
3 »
-
.
4
OH.
5 MI
8
7
ron
8
9
*
#
0
ru v
MMO
/X V Z
1
« 1
+
O
oí
«
Figura 13. T e x t i n p u t T e l nos habilita el teclado numérico
en smartphones, y en una tablet prioriza el acceso al pad numérico.
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/año. 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á sólo com o un TextBox más.
Figura 14. T e x t i n p u t D a te adopta la versión de visualización
de calendario de la plataforma móvil sólo 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 gráfica.
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-»
Q
□ ihríkbo»
( h c ik b a i
p
O
j |
o
0 11
OVIMMI1
O
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 ría su visualización según 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 día, otro p a ra el m es
y o tro p ara el año, 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 través de esta h erram ien ta , p odrem os cre a r ín teg ram en te un
tem a desde cero, b asán 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 cíficam 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 gráfica 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 año
de los bordes, la som bra de cada co n to rn o y otras accio n e s más.
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 páginas 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 Capítulo 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
NAVEGACIÓN C A M BIA
Adaptación 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 cóm oda y agrad ab le que la que otorga un
Y S E IS P U LG A D A S
teléfon 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 teléfo 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 página 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 rís 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 rís 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 código:
<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 través 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 botón de N avigatio n Bar. Para esto, copiam os el código
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 añía 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
ot»qo© !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 rt»t«
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 páginas.
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 página com o m enú de naveg ación, 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 código:
<div d a ta -ro le = "fo o te r" data-posit¡on= /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 botón
s u p e rio r que nos p erm ita d esp le g ar el n u evo m enú de navegación.
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 más 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 botón 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 pequeño cam b io en el Div header
de n u estro p ro ye cto . A n a lice m o s el código de header a co n tin u ació n :
<d¡v d a ta -ro le = "h e a d e r//d ata-the m e = //c// a l¡g 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 eación centrada. Para crear un botón que perm ita
d esp legar el w id g et Panel, debem os agregar antes de id=” im agenLogo”
un h ip e rvín 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 recién listados nos perm iten establecer un icono
del tipo barra, del estilo del menú u tiliz ad o en la m ayoría de las
apps actuales, sin bordes redondeados. Al no u tiliz a r el atributo
text en este botón, lo desactivarem os m ediante la instrucción
data-iconpos=” notext’\ para que la imagen tome la posición 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 páginas 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 página 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" />
< scr¡pt src= yyhttp://code.jquery.com /jquery-1.9.1.m ¡n.jsyy></script>
< script src= y/http://code.jquery.com /m ob¡le/1.3.2/jquery.m obile-1.3.2.m in.
jsyyx / s c r ip t >
</script>
</head>
<body>
< d¡v 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 it¡o n = "le ftyy data-them e= yyay/>
<d¡v ¡d = yyt¡tu lo M e n u y/ a lig n = yyce n te ryy>
<p>M en& uacute;</p>
< p > </p>
</d¡v>
<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= /y¡m 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 reenberr¡es L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o yy>
</div>
</d¡v>
< 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 Farm¡ng</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
ríiflurUO»»*
•t*M MH
rMgiwnmu
Copy
t e n ^ ia u
é t lum
F ig u ra 17. El panel en acción, 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">
<l¡nl< 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>
<d¡v d a ta -ro le = "p a g e " id = "p ro d u c to s" data-the m e = //d//>
< d¡v 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" dataposit¡on=,/le f t" d a ta -th e m e = "a ">
<d¡v 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 ct¡ve 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>
</d¡v>
<div d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " al¡gn = //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 " data¡co 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>
</d¡v>
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é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 it¡a l-s c a le = l//>
<l¡nl< 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 ob¡le/1.3.2/jquery.m obile-L3.2.m ¡n.
js " x / s c r ip t >
</script>
</head>
<body>
<d¡v 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 ">
<d¡v ¡d = "t¡tu lo M e n u " a lig n = "c e n te r">
<p>M en& uacute;</p>
<p> </p>
</d¡v>
< 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 ct¡ve u ¡-state -pe rs¡st"> 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>
</d¡v>
<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 " data¡c 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>
</d¡v>
< 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ú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í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>
</d¡v>
</body>
</html>
Figura 19. El menú desplegado en la sección 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 it¡a l-s c a le = l//>
<l¡nl< 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 ob¡le/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>
</d¡v>
<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 " data¡conpos=//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>
</d¡v>
< 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 l¡c 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 ¡t¡o 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 sección 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 móvil 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 récord.
Pu d im o s
tam b ién
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
¿Cómo puedo visualizar un link activo en jQ uery Mobile?
2
¿Cóm o quito los bordes redondeados de un botón?
3
¿Qué es una lista autodividida?
4
¿Qué widget nos permite aplicar un filtro de búsqueda?
5
¿Cómo deshabilito un widget Button?
6
Mencione al m enos un campo que permita visualizar el teclado numérico.
7
¿Para qué sirve el input type URL?
8
¿Qué nos permite realizar el objeto Panel?
9
¿En qué sector se ubica el d a ta -ro le = ” P a n e r?
10
¿Cómo 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.
2
Investigue cóm o descargar un tema desde Them eRoller y cóm o aplicarlo
a nuestro proyecto.
3
Investigue qué otras opciones de visualización de un widget Panel podemos
utilizar.
4
Investigue qué otras opciones de input type existen.
5
Busque un simulador móvil disponible en internet, descárguelo e instálelo.
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
www.redusers.com
* n
\\\\\\\\\\\\\\\
///////////////
Interacción 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 rís tic a .
▼La Web y el hardware de los
disDositivos móviles............... 144
▼Comportamientos de los
t
Invocar llamados
v mensaies de te xto ....
n
168
▼Resumen........................... .......173
eventos según el dispositivo..165
r Actividades...................... .......174
____
71z 1
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 móviles
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 teléfono 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 comunicación, 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 unicación p o r voz.
•
Sistema de com unicación p o r texto escrito.
•
Sistema de videocom unicación.
A su vez, estos sistem as de co m u n icació n se d esp lie g an a través
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 eoría 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 pequeño diagrama, basado en la Teoría
de conjuntos, nos permite representar el canal de transporte
para la diversidad de comunicaciones actuales.
La red de te le fo n ía clásica 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 rán 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 telefónico, a través del cual podem os
ap rovechar, p or una ta rifa m ínim a, los sistem as
de co m u n icación 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 núm ero de teléfono
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 , cóm o sacar
p ro vecho de estos m ecan ism o s desde n u e stra web m ó vil.
Hipervínculos 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 página web
o e n v ia r un co rreo electrón 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 telefónica, SMS, Skype, entre otros. El uso de lin k
se rea liz a a través 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 través de un botón:
<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 bién 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
hipervínculo a una función 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 rís 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 ién 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 teléfono.
Interacción 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
págin 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 núm ero s te le fó n ico s que en esta ap are cía n .
Con el tiem po, el resto de los navegadores web m ó viles adoptaron
este estándar, con lo cual hoy es posible invo car los m étodos de
com unicación com unes en un teléfono inteligente desde una página 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 página
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'/>Llámame</a>
La página 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 teléfono, 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 núm 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 acción.
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 cóm o se com porta
cada plataforma al invocar el hipervínculo Tel.
Formato numérico
El núm 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 estándar, si es que la llam ad a a re a liz a r se
en cu en tra en una página que solo v is u a liz a n u su ario s de la m ism a
región y lo calidad .
Para las páginas 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 país seg u id o del código de área. Esto p erm itirá
re a liz a r la llam a d a d esde un país 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 físicam 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
W
L o s sitios w e b que carg an p á g in as donde figura un núm 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 página 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 -
1
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 teléfono
m ó vil cu yo código de país co rresp o n d e a A rg e n tin a y su código 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 NUMÉRICO
T VALOR
▼ REGIÓN
Código de país
54
Arge n tin a
Id entificad or de teléfono móvil
9
Arge n tin a
Código de área
11
Buenos A ire s ( A M B A )
Tabla 1. Es importante tener la tabla de códigos telefónicos internacionales
para desarrollar un sistema de comunicación a teléfonos móviles.
Button Cali en jQ uery Mobile
En el diseño de una a p lica ció n web m ó vil, es co n ven ien te agrupar
los núm eros de teléfono a los cuales deseam os h a b ilita r la función
de llam ad a dentro de un botón con un icono d istin tiv o . Veam os cómo
realizaríam 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 guión
com o se p a ra d o r en el núm 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 núm 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 dueña
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 botón.
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 ién una lib re ría 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 botón 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 botón.
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 rvín 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 ría 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 hipervínculo se iniciará
automáticamente la llamada a través 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 ién 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 teléfon 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 través
de esta p latafo rm a.
Por su p u esto que es tam b ién 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 ién 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 arám 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 telefónico vía Skype,
también podremos iniciar una nueva conversación 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 ecífico 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 ién 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 telefón 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 erán 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 telefónico .
J U an» par»i
Figura 5. En la plataforma ¡OS, también es posible
invocar las conferencias vía 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 Facet¡me</a>
Enviar SMS desde una WebApp
Desde los sm a rtp h o n e s tam b ién 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 página web,
en los m en sajes de texto será el u s u a rio quien p resio n e el botón
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 teléfon 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 núm ero s de teléfon 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
q
w
e
r
t
y
a
8
d
f
g
h
j k
b
n
O
z
x
c
v
9 ,m *
«-=>
C2D
S
I
^
0
P
1 ñ
m
a
- ©
Ü
c5>
Figura 6. En este ejemplo podemos ver cóm o, desde una WebApp, iniciamos
un nuevo SMS con texto predefinido y dos teléfonos com o destinatarios.
Mensajes a través de BBM
D u ra n te el año 2014, B la c k B e rry (ex R1M) traslad ó su clásico
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 sajería,
BBM lanzó, desde hace unos años, 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 sajería.
Veam os a c o n tin u a c ió n cóm 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
n
r
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>
Limitación 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 también 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 incluirán 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
Comunicación a través
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 cóm 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 ob¡lepadaw an " d a ta -ro le = ,/button//
¡d = "b tn T w itte r//>@ m ob¡lepadaw 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 vío 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 códigos 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 ién 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 , cóm 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 través de su código 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 ráfico 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 bién podem os in v o c a r la co m u n icación a través del sistema de
m ensajería 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 "
he¡ght= ,/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 ría 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 ría de los U RI sch em es que n aciero n estos ú ltim o s años
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 telefónico .
•
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 rán h acer uso del h ip e rv ín c u lo Tel:// y tam b ién
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 ría 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 tecnología,
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 también dispone de una variada cantidad de
opciones para utilizar funcionalidades de su plataforma vía URI schemes.
Mensajes con URI scheme de Twitter
A co n tinuació n, d esarrollarem o s un pequeño 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 código, creando una
nu eva página 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.
k
}
K
a n i
n f "
/\/\a m í
a
iÁ ki
r
i r 'r n
a
a
i
/
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
página 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
cóm 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 sección, 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
razón, 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 código: 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 página 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 v¡ce -w id th , ¡n ¡t¡a l-s c a le = l">
<l¡nl< 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" />
<scr¡pt src= ,' http://code.jquery.com /jquery-1.9.1.m in.js//></script>
<scr¡pt s r c = " http://code.jquery.com /m ob¡le/1.3.2/jquery.m ob¡le-1.3.2.m in.
js //x / s c r ip t >
</head>
<body>
< d¡v d a ta -ro le = "p a g e " ¡d=,/l¡stas,/ 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>
</d¡v>
< 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
<d¡v 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 r¡o "> < /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// data¡n l¡n 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 " />
</d¡v>
< 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>
</d¡v>
</div>
</body>
</html>
Esta e stru c tu ra es sim p le. Tenem os una página re a liz a d a en
jQ u e r y M obile con un títu 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 cuántos 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 página no tien e ninguna fu n cio n a lid a d , por lo tanto,
co m en zarem o s a agregársela. 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 r¡p 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 núm ero
restante en el div‘resto’. 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 arám 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’-VoMc««v'j| ^
^
C c m * n t a ‘i o i * n 140
On*'K>fr<js(on<e<i»iiu»po<i »<*!**
o*comconensepodwwsretlaílár un
>o » t« i* c n « m í « n m x f c h a i ' o
í t W M i t a en
9
App
«fcsF o silivo fnóvil
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
e
,
a
d
f g
s
*0
z
x
«
c
y
u
i
h
j k
,
b
Q
„
prewrartio
q w
presionan DresonánOjIa
he k h m
e r t y u
a
d
mm a r k
0 Pi
1 ñ
m
t3 1
s
ca
O-
z
*-*
nn
4
f
x
^
g
c
U B I
j k , ñ
h
v
b
n
CU
m
«■
.
« -
dT
Figura 10. Al iniciar el tipeo de nuestro mensaje, automáticamente 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 r¡o s.re p la c e (" " , " % 2 0 " ) ;
lo cat¡on .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 través 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 botón
E n v i a r para finalizar su publicación desde la app nativa de Twitter.
Comportamientos de los
eventos según 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 podrán lle v a r
a cabo de la m anera habitual.
Veam os, a co n tin u a ció n , cóm 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. Invocación
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 unicación que perm ita el uso de SMS, la invocación al URI scheme
podrá fallar y p roducir un error en la web. De igual
modo, la últim a versión 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 función
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 envío y recepción 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 narán sin problem a alguno desde cu alq u ier d isp o sitivo m óvil,
tablet o sm artphone y prácticam 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 estándar,
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 rán 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 través de Skype, si este está in stalad o .
F ig u ra 13. El iPad,
al no poder realizar
un llamado, ofrece
copiar el número,
guardarlo com o contacto
o enviar un mensaje
vía 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 teléfon 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
págin 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 estén 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 página 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 específicos.
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 solución 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 página. 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 rvín 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 página
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 páginas 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 ervínculo
<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
telefonía m óvil, sino tam b ién 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 página index.htm l tiene una in tro d u c c ió n ficticia de la co m p añía,
y la página prestaciones.htm l m u e stra d ife re n te s e sp e cia lid a d e s clín 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 vías.
f r Duela* A u lla r t e # H c<eM«lo tln la vlit.i ra
Muralla "um|n•Mtii'Ki. la r•prtlatrca* 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 * ',
Darío* 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
cl»nt#
*»•* 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«# r»i 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|i«n . «I* r<t|in:iii*ntogiin qua partíA atendw
•umlua i»v *ih lub«II 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 nunrmiíWMA
O
C D N IC A M E D IC A
F ig u ra 14. Esta es la W ebApp que completaremos, integrándole
la funcionalidad de comunicaciones vista a lo largo de este capítulo.
Extender el uso de ListView
Para diseñar la página 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 pequeña diferencia en su desarrollo. Incluirem os una variante de
Listview que nos p erm itirá in clu ir una im agen y contenidos más 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 página 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 r¡m 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 endocrinología</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 ología infantilc/p>
c/a>c/li>
c/ul>
c/div>
A través de esta p o rció n de código, agregam os d entro del cuerpo
de la página 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 títu 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 títu 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 código de la página 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 ndocrinología< /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">
<l¡nl< 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"/> < /
d¡v>
<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 móvil</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 móvil</a>
</div>
</div>
</body>
</html>
www.redusers.com
U
S E R
S
5.
INTERACCIÓN CON EL HARDWARE DE COM UNICACIONES
F ig u ra 15. El resultado de la visualización del primer profesional
y la acción de llamar por teléfono o enviar un SMS.
Y ahora vam o s p or el código del o tro p ro fe sio n al, el cu a l se creará
a tra vé s de la página drjuly.html:
< !D 0 C T Y P E htrnl>
<htm l>
<head>
< title > D o c to r Assistance - P rofesionales E ndocrinología< /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 ob¡le/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 ob¡le/1.3.2/jquery.m ob¡le-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 ndocr¡n & 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>
</d¡v>
</body>
</html>
Figura 16. El segundo de los profesionales habilita
la comunicación a través 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 teléfono 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.
También, 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 rís 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 rís 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?
2
¿Qué atributos podem os utilizar para crear un ítem ListView?
3
¿Qué parámetros se pueden utilizar junto al hipervínculo SMS?
4
¿Cómo podem os personalizar la imagen de un w idget button?
5
¿Cómo deshabilitamos un w idget button?
E JE R C IC IO S P R Á C TIC O S
1
Investigue, a través de internet, qué otros URI schem es existen.
2
Investigue los diferentes URI schem es de Facebook. Idee un w idget button
adicional que dispare otro esquema que aproveche algún atributo nuevo.
3
Investigue en jquerym obile.com acerca de Collapsible Set e incluya alguna
nueva funcionalidad en el proyecto desarrollado en este capítulo.
4
Utilice la página profesionales.html y cree un ListView alfabético de al menos
seis profesionales, incluyendo un link a su perfil.
5
Utilice algún simulador o emulador móvil y testee en él los ejercicios realizados
en este capítulo.
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
www.redusers.com
///////////////
Lenguajes de
programación
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.
▼Evolución..................... ............ 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
Evolución
A lo largo de la h isto ria de la inform ática, los lenguajes de
p rog ram ación ju g aro n un papel im p ortante y fueron adaptándose,
d u rante las n u evas generaciones, a los avances en estética,
al fu n cio n am ien to de los sistem as o p erativo s y a la integración
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 ación u tiliz ab a n ed ito res básicos
(generalm ente, los m ism os ed ito res de texto), y luego para desplegar
un p rogram a se re cu rría a co m p ilad o res específicos 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 nocía 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 itían el desarrollo
de las in terfaces visu a le s de u n a m anera m ucho más am igable.
Luego, con la lleg ad a de la Web, los ID E más 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 ación 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 código 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 código 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 dinámico
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 ién 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 página 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 más 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 ría 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 más 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 ién 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 ién 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 conexión,
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 ráp 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 cóm o fu n cio n a el lenguaje
PH P y tam b ién 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 ación 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 ría 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 código 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
págin 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|WHT«flvru||« I n lM lu«g 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
coflÍMCMU
«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 líy 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 código H T M L que co m p o n e una página.
A su ve z , el m ism o lenguaje puede generar código 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 más 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 tecnologías en una web móvil
La introd ucció n de PH P en un d esarro llo web im p lica cam biar las
páginas con extensión H T M L p or la extensión P H P , p ro p ia del lenguaje.
Esto p erm itirá que el se rvid o r in terp rete que la página 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 código PH P in clu id o en d icha página.
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 ación.
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 código
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 stática, 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 básicos del lenguaje
La u tiliz a c ió n de código PH P en una página 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 página en H T M L y solo el co n te n id o PH P d en tro de una o más
fu n cio n e s lo cales o rem otas, para in te g ra rlo luego en las páginas
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 básicos
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 página web.
i¿ W
ED ITO R E S DE CODIGO
KD
La m ayo ría 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 instalación 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 ién 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 código PHP
La in v o c a c ió n del código 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 página 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 ecífico que d eb a ser
v is u a liz a d o en p antalla, d entro del código 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>
Declaración 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 ecífico . 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 núm 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 sím 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 declaración de variables y su representación
en pantalla en tan solo escasas líneas de código.
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 núm 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 núm 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 código
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 acción,
escribiendo cada recorrido realizado en la página 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 código
m ie n tra s una co n d ic ió n esp ecífica 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 código 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 expresión.
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 más de u n a secció n de la página
»
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 más p arám etro s para
ser p ro cesad o s d entro de la fu n ció n , y estos p arám etro s, a su vez,
p u ed en d e v o lv e r un re su ltad o . Veam os cóm o hacerlo:
Function CalculoD ina m ico C S p aram e tro l, $param etro2)
{
/A/al¡damos re c ib ir núm 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 págin 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 bién 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 página 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 código:
<?
//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 página 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 página si
el a rc h iv o que se desea in c lu ir no existe física m e n te en la ruta
esp ecificad a. Include solo v is u a liz a un e rro r en la lín 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 código PH P que se e n cu e n tra en la página.
La se n te n cia de require es la siguiente:
<? requ ire 'varia bles.ph p' ?>
Base de datos
En la creación de sitios web dinám icos, las bases de datos juegan
un papel fundam ental, alm acenando gran parte del contenido que suele
m ostrarse en estos sitios. A continuación, haremos una breve introducción
a M y S Q L , un sistem a de base de datos relacional que es el fiel compañero
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 más 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 ién 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 tecnología.
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 más 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 página 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 lín 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 gráfica. La m a y o ría 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 bién
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 intervención 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 gráñca 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 tecnologías.
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
r
NOO GX/7 X R e fe re e
Figura 6. En el sitio web de M ySQL (www.mysql.com) podemos encontrar
la información oficial de esta base de datos y un manual para el usuario.
Comandos básicos SQL
El le n g u a je SQL (Structured Query Language) es u tiliz a d o tam bién
en M ySQ L p ara re a liz a r las o p eracio n es básicas 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, etcétera).
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 básica
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 bién, 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 serán 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 través 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.
Creación de una base de datos
desde el panel de administración 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 cóm 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 bién 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 creación 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 .
Creación 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 pestañas d esde d on d e p od rem o s re a liz a r todas las tareas más
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 cóm 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 dirección 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 cómoda, 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 gráfica. 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 botón
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. Definición técnica 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 extensión .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
J
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
tütíU 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
-* >
M
■ KftarflOOl Ial«i1_*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 . ____
? __
■ ■___ «O■»t —
-
tto
ría
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
».
i
rnuiiwW-. ««o**» * r « .
¡" i» «
Indices. _
Figura 10. La vista desde PHPMyADMIN de la tabla Sucursales
creada para los próxim os ejercicios que realizaremos.
Figura 11. Desde el panel SQL de PHPMyADMIN también es posible ejecutar
comandos de creación 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 más 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 código 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 rán : 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.
$serv¡dor = '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 creación de variables, crearem os la conexión a la base de
datos y la lectura de la tabla Sucursales. Este código estará a continuación
de la declaración de variables realizada. Veámoslo:
$conn = m ysql_connect($serv¡dor, $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 conexión a la base de
datos M ySQL, a través de la fu n ció n mysql_connect(), donde pasamos
los parám etros $servidor, $usuario y $passwd. Seguida a esta función,
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 conexión.
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 ién 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 inistración 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 selección
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 parám etro a la función 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á sólo un registro de todos los que existan.
Visualización de datos
Ya cream o s el código 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 código
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
págin 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 página en un b ro w ser y se leccio n a m o s la opción
Ver código fuente, solo ob ten d rem os una página 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 estático 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
página con extensión .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 código:
< !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 v¡ce -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 conexión M yS Q L
?>
< /body>
</html>
En principio, u tilizam o s require para que, ju n to con la página
sucursales.php, se cargue el código desarrollado en la página 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 conexión con el s e rv id o r M ySQL.
N otem os que uno de los p arám 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 página cn.php. Al in c lu ir esta ú ltim a página 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
o
*
wwrw vtcamobile com
a»
c
■ 2242
©
L o c a lid a d e s
:
•
1
■
m
i
m
Ciudad de Sueros Aires
San Carlos d«? Banloch*
Córdoba
Uruguay
F ig u ra 12. El resultado de la visualización
de las localidades representado en una página PHP.
Integrar PHP con
jQuery Mobile
Ya co n los co n ce p to s básicos 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 enseñe 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: librerías
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 ría 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 física , 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 *
4♦
ia ie m é tU *
Bienvenidos a USER BOOK STORE E n nuestras
tiendas p o cra encontrar la m ejor variedad de
libros, fascículos y revistas d ed icad as a la
tecnología
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 sección
program ación, la cual cubre la m ayor variedad de
tecnologías 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
O
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 sección
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 página 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 básicos 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 código 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 lución
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 página 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 rías,
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 más
lo cales. Para ello, agregam os el sig u ien te código 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.mob¡le-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>
</d¡v>
</d¡v>
<div data-role=7/content7/data-theme=/'d/7>
<p al¡gn=/7center7'><strong>Sucursales USER BOOK STORE</strong></
P>
<br>
<P>
<?
//Código 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 código base p ara la págin 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 código 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 código 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 código 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 código del arch ivo sucursales.php. En el apartado
<Header>, ju s to debajo de todas las d eclaracio n es <script>, encontram os
una pequeña 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 conexión 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 página 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 conexión 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 página
el código PHP que nos listará, a través de un w idget ListView, el conjunto
de localidades que tienen una o más librerías. Ubicam os el código PH P
iniciado cuando cream os la página y elim inam os la línea 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 l¡d 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 ría 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
t
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 viciamofciíe coro ar.MobdeW,»h/i:.a|
C IQ
a
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
0
S a n C a rio » d e B a rilo e h e
o
Córdoba
o
U iuyuuy
o
F ig u ra 14. La página
s u c u r s a l e s .p h p ya
visualiza las localidades
1
O
o
imoo
©
radas
Sicuraates
O
^
1
J
que tienen al menos una
sucursal de la cadena
de librerías.
Librerías por localidad
A co n tin u a ció n , cream o s una n u e va página PH P que nos p e rm itirá
o b te n e r el lista d o de lib re ría s de la lo calid a d se leccio n a d a co n el
L is tV ie w creado en la página 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 librerías.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 ¡t¡a l-s c a le = l//>
<l¡nl< 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 ob¡le/L3.2/jquery.m obile-1.3.2.m ¡n.
js"> < /scrip t>
<?
//obtener lib rería s según la localidad seleccionada
www.redusers.com
«
U
S E F tS
6.
LENGUAJES DE PROGRAMACIÓN
?>
</script>
</head>
<body>
< d iv d a ta -ro le = "p a g e " ¡d=//index// d a ta -th e m e = "d ">
<d¡v 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 ¡t¡o 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 página 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 página sucursales.php. En el <Header> de
esta página a b rim o s una llave con código 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';
$ filtrolocal¡d ad = $ _ G E T [ " I " ] ;
if (tr¡m ($ 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 página librerías.php desde la
página sucursales.php, en la U RL pasam os com o p arám 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 arám 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 arám 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 $filtrolocal¡dad
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
SEGÚN EL
d e v u e lv a todas las lib re ría 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 arám 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 ecífica 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 títu lo en el cu erp o de la página. D entro de
las lla v e s de código PH P que p reced en al títu lo Localidad, agregam os
el siguiente código:
echo $ filtrolocal¡dad ;
Esto p e rm itirá co n o ce r si filtram o s una lo c a lid a d e sp e cífica o si
v is u a liz a m o s todas las lo calid ad es.
Por ú ltim o , nos queda agregar el código 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 títu lo y un párrafo.
F ig u ra 15. Al seleccionar una localidad, el sistema cargará
todas las librerías, obteniéndolas a través de la consulta SQL.
Veam os a co n tin u a ció n el código:
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 través de la sentencia e ch o , la estructura
b ásica de un ListView , co m b inánd 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 ervín cu lo
para cada ítem , lo que nos p erm itirá ir al d etalle de la inform ación
de la lib rería. 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 información completa
En el tram o final del ejercicio, nos queda desplegar una últim a
página que nos perm ita acceder al detalle de una librería. En esta
página podrem os ve r el nom bre del local, su dom icilio, un m apa con
la ubicación física, el teléfono y su e m ail. En estos últim os dos cam pos
crearem os los h ip ervín culo s necesarios para in icia r una com unicación
telefón ica desde la W ebApp o e n via r un correo de consulta.
Creación de mapa dinámico utilizando Bing Maps
Para poder v is u a liz a r un m apa estático 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 arám etro en la U RL que genera la im ag en del m ap a estático 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 eríam 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 arám 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 aplicación comercial,
seguramente deberemos pagar un canon mensual. Podem os utilizar, a
m odo de prueba, las opciones Public Website, Education o Prívate 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
1
S£= -
,iw
v¡
wTiÜi*. 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 aplicación.
Crear el detalle de la sucursal
U na vez que la gestión de la API K ey de Bing M aps fue realizad a,
nos queda crear una nueva página 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 página sucursales.php.
La e s tru c tu ra de esta página 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" />
<scr¡pt src= //http://code.jquery.com /jquery-1.9.1.m in.js//></script>
<scr¡pt 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 it¡o 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 it¡o 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 página será lis ta r el d etalle de la lib re ría .
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 código en el a p artad o <header> de
esta página, 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 arám 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 página sucursales.php, para que seleccio n e una su cu rsal válid a.
De esta m anera e vitam o s que el u su a rio cargue d irectam e n te
la página detalle.php sin un v a lo r v á lid o com o p arám 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, sólo se ocupa de invocar
la consulta SQL cargado en la variable $sqlquery, y obtener el registro
especificado com o parámetro. Volvem os al archivo detalle.php. En el
cuerpo del m ism o agregamos el siguiente código:
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 icil¡o 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 párrafo con alineación al centro de la página, donde visualizam os el
nombre del local. Creamos un div, centrado también, donde ubicaremos la
imagen del mapa dinámico 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 ubicación, 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 pequeño, pensado para un
smartphone, pero este puede volverse dinám 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 entación de Bing Maps, ya que, en estos
casos, los mapas estáticos poseen un ancho máximo definido que no
puede superar determ inada cantidad de pixeles. Esta docum entación es
cambiante, por lo tanto, debemos consultarla periódicam ente dependiendo
del tipo de proyecto que abordem os con mapas estáticos o dinám icos.
c o
i
c
O
BOOK
BOOK
l o c ik la d : < iui'jiiI ile lluetwn Arr-
D w m d te
l—
A » H r ra lu v ta tZ X I
u
CAÍA
*-»•
ii» * * » - m i im M r a t
Figura 17. Al seleccionar una librería, se listará el detalle de esta,
visualizando su ubicación desde un mapa estático 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 ría
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 arám 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
librería. Por últim o, cream os dos h ip ervín culo s del tipo button, donde
establecem os: en el prim ero, el discado del núm ero telefónico del local,
y en el segundo, un h ip ervín cu lo que inicie un nuevo m ensaje de correo
electrónico, 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
también poseen la funcionalidad de iniciar un llamado
o enviar un correo electrónico a la sucursal visualizada.
RESUMEN
A lo largo d e e s te capítulo, realizam o s una rápida introducción 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 inám ico q u e a p ro vech e la s c a ra c te rís 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 teléfo 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 isposición.
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?
2
¿Cuál es la form a de iniciar un bloque de código en este lenguaje?
3
¿Cuál es la estructura de una función PHP?
4
¿Las funciones PHP pueden recibir parámetros?
5
¿Las funciones PHP pueden devolver un resultado?
6
¿Cómo 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 más 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 dirección agregada).
2
Liste la sección S u c u rs a le s para validar que la nueva localidad se visualice.
3
Desde la aplicación, ingrese a la localidad y al detalle de esta para visualizar
su correcto funcionamiento.
4
Agregue un cam po más a la tabla M ySQL que sea del tipo booleano
y modifique la aplicación para que solo liste localidades y librerías
que tengan el valor T R U E en este nuevo campo.
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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 información 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 móvil. También 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
t
Aplicaciones offline.................233
» Ejercicio práctico:
» 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 rísticas que HTML5 trajo al m undo web
y a la Web m ó vil in clu ye, tam bién, 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 artía 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 iría para re u tiliz a r
en el sitio web d u ra n te todo el tiem po de navegación de un usuario.
La inform ación de datos alm acenada en cookies podía estar o no atada
a una fecha de ven cim iento específica. Si, p or ejem plo, le preguntam os
al usuario de una página 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 período 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 más co m p leta a las clásicas cookies, desde
la característica de alm acenam iento lo cal (o, en inglés, local storage).
..............
••
o
ñ
>n i M
a w
w
o M -W
M
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 vía
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 página 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 vío 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 )
▼ DESCRIPCIÓN
Getltem(key)
Método
Devuelve una cadena con el valor del elemento clave (key).
Setltem(key, valué)
Método
Almacena un valor (valué), referenciado por una clave (key).
Removeltem(key)
Método
Elimina la clave y el valor especificados.
Length
Atributo
Contiene el número de elementos almacenados como par
(clave/valor).
Key(index)
Atributo
Devuelve una cadena con la clave del elemento que ocupa la
posición indicada en (index), dentro de la colección de datos
almacenados en (key).
Clearf)
Método
Elimina todos los elementos previamente creados.
Tabla 1. Descripción de los elementos que componen
la metodología 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 especificación 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 avegación en el sitio web y cerram os el naveg ad o r o la ven tan a en
cuestión, 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 probación de compatibilidad
de un navegador
Si bien nuestro enfoque está orientad o por co m p leto a la tecnología
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 fácilm en te desde Ja v a S c rip t, y una b uena p ráctica
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 página.
}
}
</script>
C OM PROBAR L A C O M P A TIB ILID A D
A través del sitio web www.w3.org, podemos acceder en detalle a todas las características técnicas del
lenguaje HTML en todas sus variantes. Allí podemos conocer, además, las especificaciones actualmente
vigentes, como también 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 código 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 rística s nacieron ju n ta s d entro de
la esp ecificación 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 pequeña
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
código 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
teléfono m ó vil soporta las características 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 página 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 página w e b n o s lista en
form a autom ática inform ación 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 pequeña página 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 página sim p le un botón que co n tien e la función
Ja v a S c rip t que vim o s anterio rm ente.
A co n tinuació n, el código de la página 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 ¡t¡a 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>
< scr¡pt 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 código JavaScript
//de la función 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>
< d¡v 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 I¡c 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 declaración
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 página 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 también 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 práctico:
almacenamiento local
A co n tinuació n, realizarem os un pequeño 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 carán 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 código HTML:
< !D 0 C T Y P E htm l>
<htm l>
<head>
< t¡tle > 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 v¡ce -w ¡d th , in itia l-s c a le = l//>
<l¡nl< 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 ob¡le/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scr¡p t>
< script typ e = "te xt/ ja v a s c r¡p 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 yíd 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 ">
<d¡v 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 ll¡d 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 l¡g 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 I¡ck= "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
< d¡v 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 it¡o n = "fixe d ">
C o p yrig h t 2014 - Fernando Luna
</d¡v>
</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 información.
Bases de datos Web SQL
O tra de las características 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 CÓDIGO
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 ién 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 rís 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 ación 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
código Ja v a S c rip t, al igual que el resto de las ca ra cte rística 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 más 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 más cóm 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.
Cómo 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 año de 5 m egabytes. Este
es el tam año 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 máximo 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 más 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 ||'Descripción 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 cuáles son las características de la base de
datos que estam os creando. Le asignam os un nom bre, una descrip ció n,
el tam año 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 código
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 función openDatabase podemos acceder a la base de datos
que creamos anteriorm ente. Si la base de datos no existe en el equipo,
se creará, según lo que establecim os en la definición de parámetros
del bloque de código anterior. Por últim o, una vez que tenem os las
sentencias de creación y/ o ap ertu ra de la base de datos, nos queda
ejecu tar la o peración d eclarad a en la fu n ció n Function(). Veam os el
código 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
Cómo 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
código Ja v a S c rip t, podem os co m en z ar a crear tablas y a agregarles
registros. Esto tam bién 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 código 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 código 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 código 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 método 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 través de sim ples
consultas SQL, se puedan visu a liz ar datos en el navegador de usuario más
rápidam ente. Haciendo uso de algunas funcionalidades de control offline
y online de una conexión a internet, estas bases podrán actualizarse de
m anera transparente para el usuario que navega por la página web.
Compatibl idao con el navegado»
VikbUoragr namr/wlue ptun *
Inritnreíliw •>
H4r6 SQl Dotaba*' -
4+ 3.5*
2 3 *
4*
4*
10.5* 8*
10*
8
1S *
—
3 .1 *
1 0 .5 *
—
3.2*
2.1 ♦ —
8
4 .4 *
___
3 .2 *
2 .1 *
—
11.5+
22
H .S *
F ig u ra 8. En este gráfico podemos apreciar el mapa de almacenamiento
local com puesto por Web Storage (local y session), Indexed DB
y Web SQL, según 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 núm ero de aplicacio nes
web crece día a día, 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 versión,
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 conexión 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 páginas 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 seguirán
d escargando aquellos arch ivo s que han sido m od ificado s en la versión
en línea 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.
Cóm 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 aplicación y hasta in clu ir rutinas específicas 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 aplicación que trabaja sin conexión 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 estén a disp osición de los usuarios que eligen
trabajar sin conexión en nuestro sitio.
Como ventaja, podem os destacar que cualquier aplicación que genere
un caché local perm itirá, por ejem plo, que el usuario navegue por este
sitio sin conexión a internet. Tam bién perm itirá que pueda acceder a los
recursos, imágenes o contenido de texto más rápido, dado que estarán
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 sólo 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 cóm 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
página 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 dónde se en cu en tra el arch ivo de configuración de la caché.
El código 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, agregándole 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 raíz, 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 ntinuación:
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 ntraseña,
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 algún 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 aniñesto un apartado que contem p le esto y m uestre
una página 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
Actualización mediante JavaScript
Tam bién 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 alización 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
V
V
¡n o -
v
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 versión 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 línea y tam bién sin conexión 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
¿Cuál fue, durante muchos años, el modo de almacenamiento local de datos
más común en las aplicaciones web?
2
3
¿Qué ventajas supone el uso de Web Storage respecto de una cookie?
¿Cuántos tipos de almacenamiento local encontram os en Web Storage?
4
¿Qué tipo de base de datos local podem os aprovechar al crear una WebApp?
5
¿Qué es Indexed DB?
E JE R C IC IO S P R Á C TIC O S___________________________
1
2
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.
3
Desarrolle una función JavaScript que permita recuperar los datos almacenados
en Web SQL para listarlos en pantalla.
4
Elija un proyecto desarrollado previamente en este libro y cree el archivo
de manifiesto para utilizarlo en modo offline.
5
Investigue qué otras funciones JavaScript se pueden aprovechar con AppCache.
P R O FESO R EN LIN E A
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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 .
▼Diseñar una WebApp
▼Resumen.................... ...............257
para ¡OS............................. .......240
▼Actividades............... ...............258
▼Ejercicio integrador:
Add to home screen........ .......248
7 1 z1
J
240
USEFtS
8. W E B A P P S
P A R A IO S
Diseñar una WebApp
para ¡OS
Com o bien repasam os en el Capítulo 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 ría 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 récord,
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 rís 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 más 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 istía 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 uerían
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 tía 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 página 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 más, 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 arám 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 después
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 ién 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 año de v is u a liz a c ió n
de una página 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 página w eb en este navegador,
recib ie n d o un p arám 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 página
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 página 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 página. 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 página p o d ría 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 ríam 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 ría 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 ién 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 ién 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 cóm 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 ecíficam en te en ¡Phone, d etecta de m anera
a u to m á tica todos los núm 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 arám etro tam b ién 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 t¡o n " con te n t= "te le p h o n e = n o ">
Iconos para nuestra web móvil
T am b ién 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 rácticas
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 ecífico que p erm ita id e n tifica r ráp id am en te la m arca;
por lo tanto, será c o n ve n ie n te tam b ién 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 están 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, etcétera)-, el ico no d eberá tener un
tam año e sp ecífico 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:
m
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. Tamaño de iconos de pantalla según el dispositivo Apple.
Com o pod em os observar, el tam año de cad a ico no v a ría según 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 año s d ife ren te s. El n aveg ad o r Sa fa ri M obile d e c id irá cuál 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 híbridas, 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 frecía 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
Cómo 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
TV«to
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
\ ✓
y
¿?
y
a
wtir.<
✓ a.
□.A
G #
l?. *
t
D
B
&
tolden
y 5?
*
p.
«i k9»
v»*
IODO
OQ.
l
/ o o i¿ o o
lia n .
.
Figura 2. El icono de nuestra WebApp creado en alta resolución, a partir del
cual iremos reduciendo sus dimensiones para los distintos dispositivos iOS.
Para ah o rra r pasos en el próxim 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, según las p o lític 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 rística s ausentes en Google
ESTÁN 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 *
C
m
U
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 políticas 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.
■
K
r
t
•
m i-w"i
G #
G
#
n i*
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 línea
de código 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 código:
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 código 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 ién p or que sea negra o del co lo r
p or d efecto del sistem a o p erativo .
Icono de la aplicación web
Seg u id o al código 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 código:
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 " s¡ze s = "7 2 x7 2 " h re f= "g b -lo g o -7 2 x 7 2 .p n g " />
o
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 ién 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 arán 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 lín e a de código en la págin a index.htm l.
Iconos prediseñados
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 podían
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 diseño 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 stética d en o m in ad a 2 D en el diseño
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 rística 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 ría, 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 código 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 sólo 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.
Q
F ig u ra 5. Hasta la versión 6.x de iOS, los iconos con efecto p re c o m p o s e d
eran válidos para respetar el diseño personalizado de la web y no forzar a
tener la estética de iOS. Desde la versión 7.0 esto ha sido discontinuado.
Splash screen de la aplicación
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 strarán 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 starán v is u a liz a d a s algunos
segu n d os m ien tra s se carga la página 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 ) según 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 año 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 imágenes
splash screen para los d isp o sitivo s iPhone que sí poseen pantalla Retina
tienen exactam ente el doble de resolución: 640 x 920 pixeles. El código
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 resolución 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
resolución, 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 año 20 0 7 .
»
www.redusers.com
t
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 ecífica 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 excepción 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 código para los iPad apaisados, con
pantalla com ún y pantalla Retina, y para aquellos iPad que se encuentran
en p osición vertical, diferenciando tam bién 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-startup¡m a g e -2 0 4 8 xl4 9 6 .p n g ">
F ig u ra 6. Ya
tenemos todas
las variantes
de imágenes
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 cóm 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 serán 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 código 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 código co rre sp o n d ie n te a las
im ágenes splash screen:
< !-- Código 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 ">
< !-- Código 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 //>
< l¡n 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 ríentation: 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 botón C o m p a r t i r del navegador Safari M obile y, desde el menú emergente,
01
seleccione la opción A ñ a d i r a l
i n i c i o . A continuación, deberá verificar que el icono
y el títu lo a m ostrar sean los mismos que configuró a través del H T M L .
02
Una vez agregada la W ebApp a la pantalla de inicio, verá el icono de la aplicación
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
&
9
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 posición 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 aplicación 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 capítulo, 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 bién 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?
2
¿Son propias de Apple las etiquetas viewport?
3
¿Qué beneficio nos brinda incluir en una página web apple-mobile-web-appcapable?
4
¿Qué utilidad representa el atributo content=” black-translucent” ?
5
¿Cómo podem os desactivar el form ateo automático de números telefónicos
de páginas web en iPhone?
6
¿Qué utilidad nos brinda el atributo -precomposed en un icono?
7
¿Sirve utilizar el atributo -precomposed en las im ágenes splash screen?
8
De todo un sitio web, ¿qué archivo debem os modificar para incorporarle
los com andos necesarios que permitan instalarlo en la pantalla de iOS?
9
10
¿Para qué plataforma sirve un icono de 57 x 57 pixeles?
¿En qué plataformas podem os utilizar imágenes splash screen horizontales
y verticales?
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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.
▼Diseñar 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
j
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
Diseñar 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 teléfono s in te lig e n te s y tablets
estaban e sp eran d o del sistem a o p e ra tivo más u tiliz a d o en todo
el m undo. Tam b ién 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 rís 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 erían 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 lía con las ca ra c te rís 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 fín de ca ra c te rís tic a s que JavaScript, HTML5 y CSS3 ponían
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 rís 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 páginas visita d a s
en o tros d isp o sitiv o s.
Si b ien A n d ro id 4.0 seguía 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 terés 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 bién, 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 gráfico de abril de 2014 muestra la fragmentación
de Android, donde se representa la fuerte adopción de los usuarios
finales de dispositivos que poseen Android 4,0 o superior.
Chrome Mobile y las nuevas características
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 rís 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 Capítulo 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 arían 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 lítica s de
seguridad Sandbox que este b ro w se r posee, y tam b ién 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 rís 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 títu 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 ación de la s A P Is y la m eto d o logía 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 ación 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 inglés, 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 cuáles
son nativas y cuáles 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 página 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 cuánd 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 teléfon o m ó vil cu án d o u n a W ebApp carga una
págin 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 *
k
Reía. 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 Capítulo 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 Capítulo 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 años 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 más 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
a
9.
QB
/ /.
• .
e¡z*
n r .n r
BOOKs
r. r o n g
i «
.
_ rs 531
ik.m ■ñ .
ljr.IT :
BOOKs
r.rnr.n.
V«
53 □
oa
•« »• i ■ • la.ia
ibd\
.
F ig u ra 4. Los dos archivos .PNG diagramados que serán
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 cuestión.
Ahora nos resta in c lu ir el código e sp ecífico 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 código 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 código 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 ">
< l¡nk 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 título 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 página. 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 día, cu an d o esta ap licació n
sea instalada en un equipo A n d ro id , quedará con el título de la fecha
en la cual se instaló; por tal m o tivo , d eb eríam 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 código
tam b ién 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 código 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 v¡c 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 página 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 página 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 página principal ( i n d e x . h t m l
o h o m e . p h p ), ya puede in icia r la instalación del proyecto.
BOOK
U U«M 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 tíio 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 continuación, despliegue el menú de G oogle Chrom e, ubicado a la derecha de la
b arra de direcciones, y busque la opción 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 español o un dispositivo con A n d ro id en inglés.
» w * i « U f r o b i a con» m
c
E n niK-stroUwn* ' ,l3,oruJ
--.tdwl
C i c a d a s i «a le Jom partir,
Enir»iavaread
pod«TTKi5d*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 títu lo de la aplicación. Por
defecto, tra e rá lo especificado en el tag < t i t i e > del encabezado de la página
H T M L del sitio web. Una vez aceptado o cam biado dicho títu 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 acción agregará el acceso de nuestra W eb App a la pantalla principal
de A n d ro id . C hrom e de finirá cuál 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 aplicación 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 t«o<utoi.Y w-iUa»
OriHi r l M * ta mmlim u
t i * ‘. »
peceñas c o l K * .o í U ros ufrniiiros tjir
c u t*"i tOíli! ^
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 acción 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 ningún 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 más 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 página web debem os hacerlo -al igual que en
A n d ro id e iOS- a través 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 ién 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 código 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 ién 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 teléfono 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 página que estam os
n aveg an d o en ese m om ento.
E s te capítulo 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. También 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 AUTOEVALUACIÓN____________________
1
¿Permite Android incorporar W ebApps a su pantalla de inicio?
2
¿Qué diferencias existen entre los m e ta ta g s de Android y los de iOS?
3
¿Qué navegador se requiere para agregar una WebApp a la pantalla de inicio
de Android?
4
¿Cuáles son las dimensiones para los iconos que debemos crear para Android?
5
¿Android identifica las imágenes del tipo sp la sh screen?
6
¿Qué diferencia encontram os entre una WebApp instalada en la pantalla de iOS
y una WebApp instalada en la pantalla de Android?
7
¿Dispone de meta ta gs propios el browser de BlackBerry para agregar una
W ebApp a su pantalla de inicio?
8
¿Qué diferencia al navegador web de BlackBerry 10 del resto de los navegado­
res web móviles?
9
¿Permite Windows Phone agregar WebApps a la pantalla de inicio desde su
navegador Internet Explorer?
10
¿Existen meta tags específicos para W indows Phone que permitan realizar
esta última tarea?
Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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 aplicación in stalable en te léfo n o s
in teligentes y ta b le ts. T am bién h a re m o s un re p a so por las
p rin cip ales ca ra c te rístic a s d e e s ta librería 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
t
Cóm o tra n sform a r
una W e b A p p en híb 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
Introducción
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 tecnologías HTML5, CSS y
Ja v a S crip t. La p ropagación de la tecnología 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 rincón donde este clien te se encuentre puede ser com pletam ente
d istin ta a la tendencia m arcada en el país 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 través de una
lib rería creada en Ja v a S c rip t, propone acced er a las características
p rin cip a le s de cada equipo m ó vil, com o ser el GPS, acelcróm etro,
cám 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 información referente a este framework multiplataforma que nos permite
crear una app móvil desde el código 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
récord 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 integración
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
teléfon 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 (más 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 rística 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 pilación, 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 más 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 páginas HTM L
que hayam os creado. Sin embargo, debem os tener cuidado cuando
desarrollam os una app PhoneGap de m últip les páginas con las variables
creadas en Ja va S crip t, ya que estos valores pueden perderse entre la
in vocación de una página y otra. En estos casos, debem os contem plar
la opción de alm acenar los valo res de variab les de form a local, com o
vim o s en el Capítulo 7 de esta obra, para poder, así, m antener la
consistencia de una W ebApp que tiene cierta com plejidad en su función.
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 documentación 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 itía
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
críticas 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 años 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 más
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 bién 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 itirán explotar
las c a ra c te rís 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 versión 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 condición que PhoneGap fuera
de código libre: por esta razón, 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 híbridas,
m anteniendo la filosofía o riginal con que Nitobi creó PhoneG ap.
Cómo transformar una
WebApp en híbrida
A co n tinuació n, repasarem o s los concep tos básicos que necesitam os
conocer para poder adaptar ráp 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
código fuente. Si deseam os que esto últim o no ocurra, debem os elegir
algún 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 más 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 bién 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 sesión
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 dirección
de correo electrónico correspondiente al usuario
que la subió, la ve rsió n de PhoneG ap u tilizada para
co m p ilarla y, a través de una serie de iconos, podrem os ve r tam bién
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 verán las p latafo rm as para
las cu ales no se haya podido re a liz a r esta acción.
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 creación y distribución
de apps para dispositivos móviles 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 bién 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 fís ic o com o en un em ulad or. T o m arem o s el código 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 apítulo 5
de este libro.
Modificación de index.html
Al código de la ap licació n sólo 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 línea de código:
<script src=" Phonegap.js">c/script>
Esto h ab ilitará a PhoneG ap Build , cuando
procese el código 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 aplicación. Esto lo hará la plataform a de
m anera transparente para el desarrollad os evitando así varios dolores de
cabeza, com o también la necesidad de subir una copia de nuestro código
fuente por cada plataform a a la que deseamos com p ilar nuestro proyecto.
Veam os, a co ntinuació n, cóm o queda el código fuente de la página
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"></scr¡pt>
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"></scr¡pt>
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 línea 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 móviles.
Creación del icono de nuestra app
La siguiente tarea que debemos realizar es crear el icono que
com pondrá nuestra aplicación m óvil. El icono debe basarse en el isologo
de nuestra WebApp. Descargando el código fuente que corresponde a este
proyecto desde https://prem ium .redusers.com , encontrarem os un
icono ya creado en la carpeta raíz. Este icono debe m antener una medida
estándar de 57x57 pixeles, exigida por PhoneGap Build.
«»
a
/—
—.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 imágenes favorito podremos
crear rápidamente el icono de nuestra aplicación, para luego subirlo
a PhoneGap Build y empaquetar nuestro proyecto como app.
www.redusers.com
t
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 rán 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 . Cóm 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 página p rin cip al de PhoneG ap Bu ild y p resionar
el botón +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 creación de un nuevo proyecto
PhoneGap Build, podrem os seleccionar desde nuestra computadora
el archivo Zip que agrupe la estructura de nuestra aplicación.
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 opción. Para com enzar, presionam os el
botón Upload Z IP file, y, desde la ventana de diálogo que se abre en nuestro
equipo, ubicam os el archivo Zip, lo seleccionam os y presionam os el botón
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 título 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 botón Seleccionar archivo y d irig ién d o n os hasta la carp eta
que contiene d icho a rch ivo en form ato PNG.
élj
—
l
- 1 ^
I
ü*
--------------------------- “
0
»
3
uTT*
»
«
«
j
___________ d i — \
•
F ig u ra 10. El icono creado para identificar nuestra app también 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
KÚ
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 podrán 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 raíz 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 pañía:
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 versión 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 dígito verificador
para las actualizaciones, o el dígito p rincip al para una nueva versión.
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 botón
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 botón 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 botón r o jo que indica que falta
inform ación para poder com pilar nuestra aplicación para esa plataforma.
v , |M
;::r 3 A »
B<J
**«rv
Deo
fe |
”
S*W>1
-
,
n
Doctor Assistance
D
&
¿
e
%
v*
i
F ig u ra 11. Ya creado nuestro proyecto, al presionar S a v e , PhoneGap Build
comenzará el proceso de compilación hacia las distintas plataformas móviles.
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 físico 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
■■
■■
•
O•■
■
1
▼ SITIO WEB DE SUSCRIPCIÓN
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 móviles de las distintas plataformas.
Cóm 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 opción 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 opción
es aprovechar, desde u n d isp o sitivo físico , con una app que lea códigos
QR, la lectura del código 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 cóm 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
códigos 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 según 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 códigos QR favorito),
deberem os en fo car el co rresp o nd iente código QR visu a liz a d o en
nu estro perfil de PhoneG ap Build hasta que este pueda ser leído por
el program a. A co n tin u ació n , la ap licació n lecto ra de códigos QR abrirá
el naveg ad o r web p or defecto instalado en el teléfono 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 través de cualquier aplicación lectora de
códigos QR podemos iniciar la descarga e instalación 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
botón, 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 .
l
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*
aoc«0
v '5 * » « » < jie a p f c c a c i0 n
««0P9 , li
O
&
F ig u ra 14. Luego de pasar por el proceso de instalación,
nuestra app podrá ser testeada en el dispositivo móvil.
|¿W
1
Q
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 réco 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?
2
¿Qué diferencia hay entre PhoneGap y Apache Cordova?
3
¿Qué diferencia hay entre PhoneGap y PhoneGap Build?
4
¿Podemos utilizar PhoneGap sólo para com pilar WebApps a apps híbridas?
5
Investigue, en el prim er capítulo de este libro, la diferencia entre app nativa
y app híbrida.
6
¿Cómo trabaja una app híbrida?
7
¿Hacia qué plataformas podem os com pilar en PhoneGap Build?
8
¿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 técnica relacionada con el contenido, puede contactarse
con nuestros expertos: [email protected]
»
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
t
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
Programación nativa
para BlackBerry 10
Si bien iPhone es el producto más 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 ensajería 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 había puesto en
el m ercado de la telefonía m ó vil y la co m p utació n p ersonal portátil
desde fines de la década 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 ación p or web y actu alizació n
de las no ticias p resentadas en nuestros sitio s o blogs más reconocidos
m ed iante el sistem a RSS.
BlackBerry tam bién inició, en parte, el terreno de la mensajería
instantánea 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 tuviéram os que darles
nuestro núm ero de teléfono a los interlocutores con los que chateábamos.
El sistem a de m ensajería 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 teléfonos P a lm , junto con el
primer RIM (solo localizador) y la nueva generación 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 generación 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 líd 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 ría 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ó teléfonos inteligen tes que respetan las
características clásicas de los m odelos QWERTY:
Q10 y Q5, y tam b ién otros m odelos táctiles,
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 bién 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 generación de equipos, para la nueva generación
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 bién 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 código 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 código con el lenguaje Q M L y Ja va S crip t, ap ro vechand o estos dos
para la construcción UI de la app y dejando el código 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 código fuente de Eclipse; por lo
tanto, q uienes hayan program ado o program en en esta plataform a,
se en co n trarán en un am b iente fam iliar, dado que m antiene las m ism as
ca ra cte rísticas que Eclipse.
F ig u ra 2. Q N X M o m e n tic s ID E provee, en un entorno fácil 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 tecnología
H TM L5 no es m alo, y que, a su vez, le p erm ite que más 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 (aún conocido
com o PhoneGap) com o la base p rin cip al de d esarro llo de apps híbrid 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
t
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
o
295
\
H T M L 5 WeBW.
BlackBerry WebWorks 2.1
n
SU* e > w
• - * » - v n !h » na» S »
♦
P
F ig u ra 3. Apache Cordova fue integrado com o plugin oficial
a la interfaz WebWorks para desarrollar apps híbridas 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 bién 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 código y testing. BB10 no
es la excepción, 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*
1
i1
Figura 5. VMWare Player con dos máquinas
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 ulación 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 bién 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 más 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 década 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 gráñca, 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 tecnología
SO PO RTE PARA
XAML y, la otra parte, en la tecnología 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 núcleo.
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 traía una serie de
ven tajas para am bas em presas, ya que N okia fue, d urante m uchos
años, 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 seguía 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 más del 90 % de los equipos- necesitaba recuperar rápidam 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 años 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 tecnologías más m odernas. Este
problem a surgió porque Nokia tenía tres sistem as o p erativo s d iferentes
para su línea 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- habían co ncentrado las
fuerzas en ren o var su línea 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 haría re su rg ir de las cenizas a am bas em presas. Pero el tiem po
trajo o tro revés más para am bas firmas: W in d o w s Phone 8 llegó m uy
rápid o al m ercado y v in o o p tim izad o de fáb rica para a p ro ve ch a r las
bondades de los p rocesad ores de dos y cuatro núcleos. Esto h izo que
la p rim e ra línea de teléfonos 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 poseían un p ro cesad or m ononúcleo.
Si bien este tem prano lanzam iento de W indow s Phone 8 no fue
un gran acierto, el afán de la gente por tener lo últim o en m ateria de
teléfonos 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.
instalación 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 bién posee otras fu ncio nes algo más 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 bién 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 (aún 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 ién 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
«
U
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 ría 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
código com o arrastrándolos 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 creación de un nuevo proyecto para WP, podemos
elegir el lenguaje y el tipo de diseño 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
Aplicación de W indow s Phone. O tra opción es crear una Aplicación
de enlace de datos de W indows Phone que nos perm ite generar un
array dinám ico de ítem s a p artir de, por ejem plo, un código JSon o RSS.
Tam bién d isp o nem o s de la creación de una Aplicación 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 través de h ip e rvín cu lo s que conectan cad a sección
o d irectam ente naveg ánd o la a través 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 rápidamente aplicaciones
desde blogs de noticias con la estética 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 bién 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 fácilm en te
W ebApps y así p o d er v e r cóm 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.
p
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 híbridas 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
Utilización 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 después 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 página creada para p latafo rm as m ó viles, lo p rim ero que
debem os h acer es cargar la página en una pestaña 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 página 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 continuación, Ripple E m u la to r le consultará qué tip o de aplicación 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 línea 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 botón 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 configuración 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 año de
p antalla p red eterm inad o . Para v is u a liz a r esta opción, prim ero debem os
cargar en una pestaña la página deseada y luego p re sio n ar CTRL +
S H IF T + M, o ir a Menú principal/Desarrolladores/Vista de diseño adaptado.
Desde el m enú s u p erio r de la v is ta de diseño ad ap tad a, podem os
recargar la página, 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
a
disposición
e m u la d o res
de
su
sistem a
o p era tivo
móvil
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
sólo 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 entación, y hasta cam b iar la p o sició n de
la p antalla a m odo ho rizo ntal. Tam bién, 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 tamaño de página específica.
P a ra
d esarro llar
o
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 pequeño 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
» Distribución
en el ecosistema móvil
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 móvil
La Fundación M ozilla lleva m ás de una d écada desarrolland o
d iversas ap licacio nes bajo la filoso fía 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 electrónico,
re sp ectivam en te. Toda la línea de p ro d ucto s de M ozilla está d isp o nib le
de m anera gratuita, ya que son de código 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 años, el fuerte crecim iento de las plataform as m óviles hizo
que M ozilla lanzara una versión 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 más populares.
Figura 1. En la web oficial de Firefox OS (www.mozilla.org/es-ES/
firefox/os) encontramos toda la información 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, más 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 pañía.
A un así, con la fin an ciació n de otros interesados, pudo seguir
m an ten iendo hasta ho y su línea de productos.
La llegada en 2012 de T elefónica de España
F IR E F O X OS E S UN
com o financiador del p royecto M ozilla ayudó
a esta fundación a d esarro llar más 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 CÓDIGO A B IE R T O
o p erativo propio, de código 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 telefonía m óvil, para que
com petir en las grandes ligas, con equipos de un costo económico, no sea
un im pedim ento. Así fue como, luego de la presentación de un sistema
operativo de código 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 ejecución
de las ap lica cio n es en general.
•
Gaia: o ficia de in terfaz gráfica del sistem a o p erativo . Una vez
que la capa B2G se ejecutó, todo lo referente a la gráfica 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 telefónico, m ensajes
de texto y m enú de ap licacio n es, entre otras fu n cio n alid ad e s más,
form an parte de la capa Gaia.
Las ap licacio nes que corren bajo Firefox O S están im p lem entadas
bajo el estánd 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
Características del S.O.
Firefox OS posee una serie de ca ra cte rística 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. están 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 específico, el S.O.
lee las ca racte rísticas 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 bién
los que guarda el S.O. u tiliz a n SQLite com o base de datos.
•
UI: la interfaz gráfica de las aplicaciones es adaptable a cualquier
tipo de pantalla y resolución, sea o no táctil. Esto es posible gracias
a la capa Gaia. Utiliza la fuente tipográfica por defecto, Fira Sans,
y los iconos del sistem a operativo poseen bordes redondeados.
Igualmente, la creación de estos queda a criterio del autor de cada app.
•
G eolocalización 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 disposición 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 rafías tam bién se pueden lle var a cabo en este sistem a operativo.
Y, dado el m ercado elegido para d esp legar su m asificación, 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» h«o. viajaste bien ?
O
E iw f
L
2
4
5
3o.
6«o
7 ™
8
9 ,™
o.
#
*
b
4*
e
D n a ip ilM
¿
SS
f t r c in n c « p w til» liM w tf» i » M
n
o v in
Figura 3. El simulador de Firefox OS pone a disposición todas las
características 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 inistración 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 teléfono físico, 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 específico
para el desarrollo de ap licaciones, ap ostand o por el estánd ar web,
la Fundación 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 hiciéram o s sobre
un d isp o sitivo físico.
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 fácil
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 botón 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 pestaña,
d irig ién d o n os al m enú Firefox /Desarrollador Web/
Firefox OS Sim ulator. Se cargará el A d d o n en esta
pestaña 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 instalación de Firefox OS y conocer con mayor profundidad
sus características, 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
opción 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, país, ho rario , fecha, etcétera. 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.
P
*
11 o
F ig u ra 4. El panel de administración será el centro de pruebas de
nuestras aplicaciones sobre el simulador o dispositivo físico 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 ría 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 aún 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 diálogo 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 sición,
se in clu ye n actu alm en te dos tem as específicos, a los cu ales accedem os
a travé s de las siguientes líneas de código:
< 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 través de estos archivos, lograr la m ism a sim pleza
que jQ u e ry Mobile o Sencha Touch ponen a disposición del desarrollador.
Diseñar los iconos de nuestra app
Para poder d ise ñ ar iconos que cum plan con la estética req uerid a por
Firefox OS, podem os acced er a la siguiente guía: 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 año,
form a, p ro fu n d id ad y otras características prop ias del gráfico 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 ría 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 cóm 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 ubicación
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 capítulo P h o n e G a p , que nos perm itirá indicarle
al sistem a operativo las principales características 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 títu 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 cuestión, debem os vo lca r el
siguiente contenido, que in clu ye los com andos a través de los cuales
id en tifica rá las ca ra cte rísticas m encio nad as de nuestra app. Antes
crearem os, d entro del d ire cto rio raíz de nuestro p royecto, un archivo
con este nom bre. A co ntinuació n, escribirem o s el siguiente código:
{
"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 código es de m uy fácil 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 bién 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 racterística s en todos los idiom as
que deseem os hacerlo, a través del apartado locales y del ID del idiom a
es, en, etcétera.
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 características 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 ién, 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 aplicación web com o Green&Berries y m a n ife s t .webapp
transformarán 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 botón Añadir
aplicación 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 aplicación ya se encuentra instalada en
Firefox OS y corre de manera independiente al navegador web.
Distribución 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 certificación
y, al cabo de unos días, 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 opción 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
U
S
E
R
S
DESARROLLO WEB PARA DISPOSITIVOS MÓVILES
Este lib ro está d irig id o a q uienes buscan a cercarse a la p rogram ación 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 rís 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 fón 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 ción 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 integración de las apps con el hardware
de los equipos es casi infinita. El único límite
es nuestra imaginación 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 móviles. Diferencias
entre WebApp. App nativa y App híbrida. Tecnologías de la web actual.
H T M L 5 : navegadores, sistem as operativos y motores de renderizado.
Declaraciones y metatags. HTML5 para aplicaciones móviles. Geolocalización.
j Q u e r y M o b ile : definición. Uso local o remoto. Configuración 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 : diseño. Prestaciones de Safari y de Google
Chrome mobile. Visualización 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
Creación 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. Integración con Dreamweaver. Transformación
Es c o la b o ra d o r de la s re v is ta s Power
de una WebApp en híbrida.
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. Emulación 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
i
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 .
9
7
9871 949830