Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Desarrollo Web para Dispositivos Móviles PDF
Desarrollo Web para Dispositivos Móviles PDF
PARA DISPOSITIVOS
MÓVILES
HERRAMIENTAS PARA DISEÑAR Y PROGRAMAR W EBA PPS
RedUSERS
U S E F t S
C O LE C C IÓ N : Manuales Users
FO RM ATO: 24xl7cm
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.
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
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 USERS
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.
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.
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
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 .
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
y ta b le ts .
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
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
» 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 USERS 7
* 0 7
ALMACENAMIENTO LOCAL PHONEGAP
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
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 .
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
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,
0 CURIOSIDADES
E IDEAS
ATEN CIO N DATOS UTILES
Y NOVEDADES
SITIO S W EB
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 Ven tajas y desventajas entre platafo rm as 34
R e s u m e n .................................................... - .............................43
m óviles
In tro d u c c ió n a la W eb m ó v il............................. - ..............14
A n d ro id ........................................................................ 23 C h arset......................................................................... 52
Fundamentos de jQ u e ry Mobile
¿Qué es jQ u e ry M ob ile?........................................................74
» 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 USEMOS
P a g e .............................................................................. 80
H e a d e r......................................................................... 81
C o n te n í......................................................................... 81
F o o t e r ...........................................................................82
Navigation B a r ............................................................ 83
Transitions.................................................................... 84
Dialog P a g e ..................................................................86
E je rc ic io p rá c tic o ..................................................................87
C re a r la estructura H T M L ......................................... 88
R e s u m e n .................................................................................103
I
Interacción con el hardware
9 ^FAHMlNG de com unicaciones
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
•o C2J i3> ♦
=> M según el d is p o s itiv o .............................................................165
I T* U n a solución v ia b le ..................................................168
T h e m e s ...................................................................... 127
E je rc ic io in te g ra d o r............................................................ 128
www.redusers.com «
10 P R E L IM IN A R E S
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
/ ----
* cu
Funciones mysql connectO y m y q L s e le c L d b ()...1 9 6
.197 •MIMIMi
iin»
.197
.199 iftiautft
200
| «
i * • tJ,-
.215 • w **
llM » """
lIMtaM — —
....
.216
R e s u m e n .................................................. 257
I A c tiv id a d e s .............................................. - ............................258
» 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 USERS 11
L a generación B B 1 0 ................................................293
W in d o w s Phone 7 y 8 ...............................................297
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
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
R e s u m e n ................................................................................. 289
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
» 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 E S S 3 15
\¿\¿)¿
R ED U S ER S PREM IUM
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
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
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
Android
IOS
Se rie s 40
Sa m su n g
Blackberry OS
W ind ow s Phone
www.redusers.com
18 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
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.
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 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
» 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
-i
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
E L IP A D EN L A U N IV E R S ID A 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
C23
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
» 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
Android
El s iste m a o p e ra tivo A n d ro id , actu a lm e n te
CUAN D O G O O G LE
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, C O M PR Ó A N D RO ID ,
p ro p ied ad de A n d ro id Inc.. En base al interés
CO M EN ZÓ A A D A P T A R
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 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
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 ás de una d écad a, un c o rre c to fu n c io n a m ie n to M ER C A D O PO R NO
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
p o r el p oco in te ré s en a c tu a liz a r a tie m p o su A T IE M P O SU S IS T E M A
s iste m a o p e ra tivo .
O PER A T IV O
A ún en el m ercado se pueden enco ntrar
equipos B lack B e rry co rriend o la ve rsió n 7.x de
su sistem a operativo . BlackBerry, al igual que
A p ple, es d esarro llad o ra del h ard w are y sistem a
o p e ra tivo de todas sus p latafo rm as m óviles.
09:00 f
-V
ÉÜ ®
ir b a n |j MmL
& ■W
~— ir *
Z //
<•***
r
m tx O •
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
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
» 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 retro-
co 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
Fire os
F IR E O S C O R R E E N 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
D IS P O S IT IV O S K IN D L E
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 - re a d e rs y tablets A m azon Kindle Fire.
E L CÓDIGO F U E N T E
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.
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
» 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
H om e m
r K«#B*o<Jy
•J
Mulle
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.
Pero el m ercad o de a p lic a cio n e s m ó vile s no
E L M ERC A D O DE
se lim ita solo a a p lic a cio n e s in s ta la b le s. M uchas
L A S A P L IC A C IO N E S 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,
NO S E L IM IT A SOLO
y con el tie m p o se tran sfo rm a ro n en a p lic a cio n e s
A A P L IC A C IO 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
IN S T A L A B L E S
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
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 E S 3 31
g to* 4 & »
Co*
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).
Una 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 m ó viles se da de la m ano
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= :
I ------- p y —* 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
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
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
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
» 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
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 Consortium).
En la cre ació n de este n u evo co n ju n to de
C O LEC C IÓ N 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
cóm o se debe e s tru c tu ra r u n sitio web. Esta
D ISEÑ O Y D E S A R R O L L O
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 .
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.
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
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
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 E S S 3 39
uj3schools :om
■cus *’*C CU — 1 ,n — W mQH n rtw n ttM
WTKCIKXHS IU M C
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 lo a * á
■ • M a l# fo n n a . com m um cat* willt 0>« »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 i* T»> * w a r
W T M r v ir t -CMC»" *»» Iiv ilo w i x** erme « r i t r t •» i
D G * CSS
DOMEv*m
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.»
O bJ#ct»
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,
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
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 - conecacas y * tas nne.*i ce *0 c c ^ . v j . i
c*'c«— *•-naí-.a rc'¡ D W "«•••**IC t* ca
6«c & w 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 » » m a<a a te *« u
a c e m e a ta i íif * c s n * t a i a l « • c '-a m c o j* *
tuTundeC'MV'C*0 UHiCC¡uU»3©C ÚMVtCICuC
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 W■I IMM«llUUi
Q
— y
J r« :■ - ó
í
E1a , +
>
« uaD - «
_ rt M
9 FARMWG W
Í
■alai * M . . * <M » < M ■ «M . Ii i m h i
«■■..MI— M « It .u w . — . . I M la . M u t _ .ll . «mu ...
» 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 43
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
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
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 _____________________
6 ¿Adobe Flash consume m enos recursos que los que HTML5 y C S S exigen
en un browser?
9 ¿Qué es JavaScript?
P R O FESO R EN L IN E A
» 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
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
▼Resumen........................
n
▼HTML5 para ▼Actividades....................
aplicaciones móviles............ ....56 ■
_ l
z 17 1z1
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.
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
» 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 47
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
E L P ASA D O DE Y O U T U B E
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
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
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.
» 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 rt -TKo<*'KT<Vi*a
M O B ILE H T M L
www.redusers.com
50 l/SERSl 2. H TM L5
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
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
>
</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>
www.redusers.com
52 2 . H TM L5
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.
E D ITO R E S H TM L
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
» 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 53
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 d e navegación
B a rra
(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
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 •••
- ••• M
▼ ELEMENTO ▼CÓDIGO DE IMPLEMENTACIÓN T DESCRIPCIÓN
E L EC O S IS TE M A C H A R S E T
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
» 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 55
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.
N U E V O S Y V IE JO S E L E M E N T O S HTM L5
KD
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
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 — « « ■ » " - r. *- C A 1 * . A a B Í 1 C =
T IM E
a t im e ' ’ f ” O
S F C T B N ft » Q
» 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 E S3 57
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 x
C rt <
ilr'///CA)«,»V^liirwvr)^lftop/Mo!nlr'%?OR(V!*^.?OPrnjfVT/Drs.irrollo^,?OMnhilrV, '' 41 |
Bienvenido a nm veb(punto)coin
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
www.redusers.com «
U S E F tS 2. H TM L5
<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 x ‘
O H 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
. hoy Dorrai
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 ">
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 59
B ic a v e n id o a m lvu-b(punto> coni
Q I W | E R T Y U I 1 0 P | <3
1 A | S | 0
L l g l « i j 1 k 1 l 1 a i -
<>1z l * I I i l l 1 1 -
.7123
i r t í
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 y o y p 1 <3
U
1 1 L I 111
°
1 intro
¡ G J s
i ,i i
°
s i
C V B N O
♦ ' ‘
.7123 :
1 / - - COm ■ 7123
<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>
) 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
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
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 C E2 Z3 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
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 ">
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
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 h n m u * b < p u n t o k *o i i »
q •*
Bienvenido a miucbtpuntoH*»m
•• • M
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 //>
» 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
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.
# 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 »
» 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>
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 >
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:
</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
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 /);
}
>
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().
>
¡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
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);
»;
>
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:
» 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>
»;
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 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
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 71
»;
}
</script>
</body>
</html>
«dametittr na* m c O c O i
Figura 16. El
resultado de nuestro
ejercicio muestra
cóm o el sistema
solicita permiso al
. « tliláffv te
uMcaBOta » tu au to o ír**
usuario antes de
S t'rm fi*
m ostrar su ubicación
O o *
en Google Maps.
R ESU M EN
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
www.redusers.com «
72 USEFtS 2 . H TM L5
Actividades
T E S T DE A U TO EVA LU A C IÓ 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___________________________
3 Visualice las páginas HTML con los input types en cada uno de los navegadores.
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: profesor@redusers.com
» www.redusers.com
* n
///////////////
\\\\\\\\\\\\\\\
Fundamentos
de jQuery Mobile
La e s té tic a d e una a p lic a c ió n w e b m ó v il es m u y im p o rta n te
en ca d a u n o d e io s p ro y e c to s q u e a b o rd a m o s . Y lo m e jo r para
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
q u e c u m p le co n creces esta fu n c ió n .
J
▼E s tru c tu ra y w id g e ts .......... ..... 80 ▼A c tiv id a d e s ................ ................ 104
71z 1
74 l/SERSl 3 . F U N D A M E N T O S D E J Q U E R Y M O B IL E
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.
» 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 75
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.
jQ u e r v
¡i
+ sb jQ u erv 1
C N I C A C O . 11 « r t i» u j o m
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 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
«üunsutetiUftMu
■ A* r±h í»wtua* uo<«ri
iame* ar0(1 — (Üury mobm «£>*••
iV»yri wvj» ogONOratKM
»K » «1>» Ufl
»— rori a m vomIo
» * v « " H *»1
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
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>
» 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 77
_
{Z /Q u erv
*
i ■ €
S ° A
0rwt. IW rt,
1
UKHM W f U M N H tar
i
i
R a a d o ^ M IM n R a * J <j « , M ittvn «natKiM rlMUffn
iw m a » t BM » 0 L H M I » Mam O . m í a d i l M lia n
O H h» O Mm S o o
a c i» « * do. O Cm o m i □ Clir-HD o.
0*
□
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
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//>
</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 USEKS 79
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">
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
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
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
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
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>
» 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
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 S E F tS 3. FUNDAMENTOS DE JQ UERY MOBILE
Veam os un e je m p lo de navigation:
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.
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
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 85
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
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
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
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:
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 "
» 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
Vé ^ 20 32 I I*. P X 3 + d 2 2033
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
Revistas
O Buscador
Publicidad Online
Olroa medio*
Abrir
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
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 > 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 ">
</div>
www.redusers.com
U S E F tS 3. FUNDAMENTOS DE JQ UERY MOBILE
• H isto ria
• Pro d u cto s
• Sho w ro o m
• Contacto
</div>
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 91
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
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.
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
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>
P ti? • 23:55
Productos
O rg án ico s
Figura 8. Desde
la página p ro d u cto s.
html podemos acceder
O O O a las distintas categorías
H is to ria S h o w ro o m C ontado
que esta web ofrece.
<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 S E F tS 3. FUNDAMENTOS DE JQ UERY MOBILE
W-eWC* C C) Í
4 B ÍR R IES #
FARM NG w F r u t o * ocqarac<o«
Producto!
* ' «
jetos Orgánicos
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
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
3 ▼ .2 3 :5 5 «. 0 T .2 3 :5 6
^••suJanobáeccaiff/Mob*eWetyCaj 0 Q
~ G F E - N S E R R IE S «
9 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
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 O este proposto
G
www.redusers.com
U S E F tS 3. FUNDAMENTOS DE JQ UERY MOBILE
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 97
c c
Atención a l publico
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
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>
» 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 ">
</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¡>
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
» 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»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
■ m n
Z I c v b ■ m «■ O z x c y b n m «■
0
"iMirwt
o
suwm
na ¡g) •r r ía (g . u
C2 ) o 1 — C2 D 23
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>
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
«u tev o cir c o m * C O Í
G R E E .N B z R R E S «
9¡ FAFtWlNG ^
t«T#oonl(nsinigm«u com
H o la , c v a o t o « « sto o > f u m i n o q u e deb*
c o r »u «« a» praoueio» io m p r a fiu io o n u t « m i c o '
0 0 O *ia 4 . 4-*
Hmmim Pn-lurto.
» 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 103
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?
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?
E JE R C IC IO S P R Á C TIC O S_________________________
2 Cree un formulario con los tipos de campo text, email, password. textarea.
» 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
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 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
7 1Z1
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
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 107
N A V IG A T IO N BAR Y P A N E L
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
_^c O í ~GF£ * G R K N B : * n iE S 4
h « ;' • • F A flV lN G ^
a M A QHfcfcNBt.MHífcti M
W F A F M IN G • F A H M IN G W
lo .m iJ .m d » cantar»
s l « " i í l U n » i f nr-imj
t -M <t»c o n W m u |i
( • ! » * Ileo U W B di C < M £ W <IUlC
M«* lOiiilx-»- ( nuMaftafcM>*1*w*
pene c a n n u r M m :k cf»itod <c u o c ^ ic to s O rg á n ico s
lu iU B O iilia qui cuin|iun con tu a tú n *
niijOiic^
p w i < «• la CiNraiiiB iiuaaalnsu n om biadM f
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 »»» M iHn»i .na i
01J ? l f l
O O
</div>
</div>
» 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 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.
<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>
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
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
» 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
</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.
</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 ” >.
< li>else</l¡>
<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
» 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 í © l i ■2326| t? * a m 23 18
Capitulo 04 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 :
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
</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
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:
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 >
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
<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 i-
d is a b le d "> M i lin l« / a >
Minimizar el tamaño
En m uchos casos, la p a n ta lla de un
M E D IA N T E UN
d is p o s itiv o m ó vil requiere v is u a liz a r un
A T R IB U T O , P O D E M O S 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
M IN IM IZ A R E L
p eq u eñ as que las de los m o n ito res, debem os
TA M A Ñ O E S T Á N D A R 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
DE UN BOTÓN
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>
U TILIZ A C IÓ N DE B O TO N E S E N FO R M U LA R IO S
data-role=” controlgroup” en las pantallas que son am plias, com o las d e una tablet. En las pantallas
» 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 E2 Z 3 117
c ©
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
M o b d f W ck en su formato
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.
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
El w id g et B utton se cre a o cu p an d o casi todo
SI N UESTRA W E B A P P
el an ch o de la p antalla. A sí, la v is u a liz a c ió n
D E B E V IS U A L IZ A R S E 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
EN PO SIC IÓ N
n u e stra W ebA pp debe v is u a liz a rs e en p o sició n
H O RIZONTAL, PO D EM O S 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
CO M PA CTA R E L BOTÓN
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 " data-
th 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>
» 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
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.
< 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 re f= "c o n ta c to .h tm l" d a ta -ro le = "b u tto n " data-¡con = "che cl< " data-
iconpos=//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
O Pmcvd
B o ló n c c n afcreac*cn d e co n o superior
O
Produ cto*
Bo tó n co n a lire a o c n d e co n o n fe ro r
C o n ta d o
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:
</div>
» 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
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
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:
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
» 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
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 ” .
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
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 *
Q w E R T y u 1 o P q w e r , , u , o p
a s d f g h , k 1 ñ |
A s D F 0 H J K Ñ **o
0 X t c v b n m «*
2 X C V D N M
m n 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
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 /.
«ro M o m * c (J Q -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 E R T Y U 1 0 P q w e r t y i l l o
A S D F G H J K L Ñ m f t o
. . d f , h ¡ k .
O z x c v b n m *
7 X C V R N M . 1 •
rm / , i
MJ3 / cam Ít23 SBS
^ O o 1
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 #.
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 MMO . 1
7 ron 8 ru v 9 /X V Z « 1
* # 0 +
O oí «
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.
» 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 127
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
que en la ú ltim a v e rs ió n estable al m om ento IN C O R P O R A B A
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.
Ig u alm en te, esto no es un im p e d im en to para D IF E R E N T E S
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 ,
Im k r d H ll « r o í O lln k r d fc * ! II m i o
O IU<ku O R-»
Q ( h c ik b a i □ ihríkbo»
p j | 0 11
O OVIMMI1 O
IN P U T T Y P E D A TE
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
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
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
Adaptación a las
NAVEGACIÓN C A M BIA
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
» 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
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//>
e ^ G R E E N B E R R IE S
Menú
Wc F A R M IN G
H is to ria
» 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
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”
index.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
</d¡v>
<ul d a ta -ro le = yylistvie w /y data-the m e = yyayy>
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>
< n *o * «w * * c
w> •«r—
•MMWII
ríiflurUO»»*
•t*M MH
rMgiwnmu
Copy
t e n ^ ia u é t lum
productos.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>
<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" data-
posit¡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">
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
< 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
</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
s h o w ro o m .h tm l
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>
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
}
</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" data-
p 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
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 141
R ESU M EN
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
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 ______________________
E JE R C IC IO S P R Á C TIC O S_________________________
» 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
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
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:
» 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 145
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
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:
U R IS C H E M E S
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.
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
<a href=//tel:54911-1234-5678'/>Llámame</a>
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.
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 . te . Y -
r 1 USO
WV V DE
v U 1N
1 U
V M
l ' I tER
l l V OS
W LDE
S I— T
1EU L
L iE
U F
I O
V N
i l O
V EN
b l l IIP
I HI O
1 V INl UE
• L" a 1
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
» 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 Ó 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
<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>
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
» 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
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
<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>
J U an» par»i
» 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 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 " data-
ic 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>
<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>
< 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 " data-
ic 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>
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 0 P
a 8 d f g h j k 1 ñ
O z x c v b n m a
9 ,m * - ©
«-=> C2D S I ^ Ü 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.
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
» 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 It e d & i 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 essen-
ger</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.
APIS DE COMUNICACION
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
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.
<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>
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
» 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 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>
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
» 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 It e d & i 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 .
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
<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.
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>
» 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 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
>
else {
strR e sto .style.co lo r = 'ftOOOOOO';
}
}
LLA M A D O S M E D IA N TE W TA I
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
» 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
«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 9 App
í t W M i t a en «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 *>
*0 z x c , b „ m ca O- z x c v b n m «■
*-* nn 4 . « -
Q t3 1 ^ CU dT
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
» 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.
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
» 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 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.
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
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.
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
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
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
<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 ">
» 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 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¡v>
<a h re f= "te l:+ 5 4 9 1 187654321" d a ta -ro le = "b u tto n " data-
c 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 " data-
corners=//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
< !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
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 E2 Z3 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>
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
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
E JE R C IC IO S P R Á C TIC O S
» 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
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
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 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 E2 Z 3 177
£ . o - o - v i- • .> b ie s
3 I* »»* * * » » . l
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
¿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
p h p
PHP5.6.0beta3 Released » ib M a y 2 0 K U w ia d k iB t o P M P ü »
T h t PHP d w o la p m e * ! le n t » o l W iP VC -Q »oti5. * * 1M I i í j U i »
C d n íe im íe * Q A n g (ot
trewvwilti Octal, ita ib * aO ugfu-«aiv role**. M irtwniof PHPaa* «w ouf*g*4 lo lo a thh vMtiton ctttt& U and
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 .
U s c i G ro u p E v ín t s
PHP5.6.0beta2 Released » U M a v lO U
11*,Hull*_¿IKli,>lT_ar*tm
0> l-fuit|nf *VV*ni.
iPn T>
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.
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
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.
» 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
<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
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
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;
)
?>
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
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 185
Function C a lc u la rO
{
$f = i;
$j = 2;
$n = $f + $j;
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.
C R EA R P A G IN A S W E B E N P H P D ES D E CERO
KD
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
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
<?
//Archivo variables.php
$ fruta = "A rá n d a n o s '';
$ color = " A z u l" ;
?>
<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
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:
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
YouTube. A su vez, la p lata fo rm a W o rd p ress
P A R A CASI TODOS LO S
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
de cada blog que se genere con esta tecnología.
M Á S P O P U L A R E S , COMO
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 .
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
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
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
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
\¿\¿\¿
A D M IN IS TR A D O R E S M YSQL
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
■&
Bi
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 h p U y A d m ln EESH
» 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
create D A T A B A S E usershop;
SUCURSALES
▼ COLUM N A ▼ T IP O ▼ L O N G IT U D / ▼ IN D IC E ▼ A U T O IN C R E M E N T O
VALO RES
Id B ig in t P rim a r y T ru e
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
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
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
p b p M u A d m ln
H E nroca» J WX < *>' biMOa. — E a|«noi y * O p . .» r l. - . ..
5ELKT
tütíU w n K s
IM IT O »
|E* » . a | | e i l « H
; '« u i ó i «R h«|1D D i No ■-
t _ M k jim m 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
T 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. _
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:
<?
?>
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:
P A C K A G E S 0 S P E N M YSQL
Los S to re d 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
» 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 197
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
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
< !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>
» 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 u o * ■ 2242 1
L o c a lid a d e s
m
Ciudad de Sueros Aires
San Carlos d«? Banloch*
Córdoba
Uruguay
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
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 *
^ S t d 's S s S / ! S l
» 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:
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;min-
width: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/c77data-
position=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
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 ES2 Z 3 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 );
?>
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> ";
?>
» 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 t 205
fp r - . . , 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
o
©
imoo Sicuraates radas
que tienen al menos una
sucursal de la cadena
1 ^
O 1
J de librerías.
d D O C T Y P E h t m l>
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>
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
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
echo $ filtrolocal¡dad ;
» 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 209
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
Ifc in g 1
b5 S£= -
,iw v¡
wTiÜi*. M
.I
•twrlh.W i " *— M
•MI»«».H1.»* .1»
» 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
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>
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 = '".$fil-
trodetalle/" L IM IT O , 1";
}
requ ire 'se le ctd e talle .ph 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 B S S 3 213
<?
$ 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);
?>
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
c o i c O
BOOK BOOK
D w m d te A » H r ra lu v ta tZ X I CAÍA
l— u *-»•
ii» * * » - m i im M r a t
» 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 E2 Z3 215
RESUMEN
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
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 _________________
E JE R C IC IO S P R Á C TIC O S
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.
» 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
-rlndexed Database.....................233
7 1 Z1
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 - ■
» 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 L O C A L S T O R A G E NOS
los datos de esta p or cada p etició n clie n te / 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 M Á S DATOS Q U E U N A
se crea una cookie de sesió n de u su ario , que
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
de in fo rm a c ió n en una página web. D E L C L IE N T E
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
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
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 ( J )
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).
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).
A L M A C E N A D O S DE
» 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 221
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
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
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 223
«S^ihut « i M rn tc n Uaro
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">
</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>
» 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 H Eg g al 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:
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
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
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 227
< 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).
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
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,
» 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 229
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
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
» 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
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;
>
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
>,
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 );
»;
>,
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
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 233
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.
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
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
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 S2 Z 3 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>
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
» 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 E2 Z3 237
c *
m m lii
neoo
j A u d io tract* «TIO- V
V id e o tracks V
| » Blob ¡n o - v
| O C anvas
R ESU M EN
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
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 ________________________
3
¿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?
E JE R C IC IO S P R Á C TIC O S___________________________
2 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.
P R O FESO R EN LIN E A
» 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
en el s iste m a o p e ra tiv o d e A p p le .
» 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 241
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 .
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
» 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 243
www.redusers.com «
244 USEFtS 8. W E B A P P S 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:
» 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
T A M A Ñ O S IN D IC A D O S P A R A ICO N O S
m
▼ DISPOSITIVO APPLE ▼ANCHO Y ALTO DE LA IMAGEN
\¿\¿\¿
N A C IM IE N TO D E P H O N E G A P
S a fa ri M obile.
www.redusers.com «
246 USERS 8. W E B A P P S P A R A IO S
i» i b * * * * . ! ! » » 1 :- IM U n y s l
% «i
1 B v k u p i * vw 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?. *
D &
t B
tolden
y 5?
* p.
«i k9»
v»*
IODO l / o o i¿ o o lia n . .
OQ.
» 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 247
IfcwJUÉ BH * m
C 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
www.redusers.com «
248 USEFtS 8. W E B A P P S 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#
¿M mn
n *•»-«
J fertud.
■
t B K
r •
m i-w"i
G #
G #
n i*
» 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
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 .
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 " />
N A V E G A D O R E S W E B P A R A IOS
o
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
www.redusers.com «
250 USEFtS 8. W E B A P P S 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 "/ >
Iconos prediseñados
H ASTA LA V E R S IÓ N 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
6.X DE IOS, A P P L E
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
» 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
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 "/ >
www.redusers.com
252 l/SERSl 8. W E B A P P S P A R A IO S
M O B IL E -W E B -C A P A B L E
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
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 t 253
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 USEFtS 8. W E B A P P S P A R A IO 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 255
www.redusers.com «
256 USEFtS 8. W E B A P P S P A R A IO S
G R E E N B E R R IE S
#
&
9 FARMING
» 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 257
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.
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
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 ______________________
» www.redusers.com
///////////////
j
z 17 1z1
260 USEFtS 9 . W E B A P P S P A R A A N D R O ID Y O T R O S D IS P O S IT IV O S
» 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 261
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]
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
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
» 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 263
F ig u ra 2. En el cambiador
de aplicaciones de Android
podemos distinguir cuáles
son nativas y cuáles son
WebApps.
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
Historia >
A f W « n » i d o r * o « n a h o ra
Productos >
:>!>owTOom
Contacto >
Cn
cu rCtKPuooK
jro K / v l \
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
» 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 265
mm
taam 3ri.it.— loo Co—
y v
'n
•n*
QP
n r .n r
BOOKs
%/
y y
4<f.
y 4.
r. r o n g . _ rs 531
/ i.
QA
A i « ik.m ■ñ .
a
QB
9. ljr.IT :
BOOKs
/ /. r.rnr.n.
• .
e¡z*
V«
53 □
oa •« »• i ■ • la.ia ibd\ .
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
<HEAD>
» 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 267
Com o podem os ver, el meta tag es sim ilar al que escribim os para
iOS, con la diferencia de que no incluye la sigla a p p le - al inicio. Ya con
esto definido, podem os guardar la 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í.
BOOK
U U«M o 4* life*/ Ufenufttto*
www.redusers.com «
268 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
» w * i « U f r o b i a con» m c
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
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 269
BOOK
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
» 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 271
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
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____________________
4 ¿Cuáles son las dimensiones para los iconos que debemos crear para Android?
10 ¿Existen meta tags específicos para W indows Phone que permitan realizar
esta última tarea?
» www.redusers.com
*
\\\\\\\\\\\\\\\
///////////////
PhoneGap
En e s te capitu lo , nos a c e r c a r e m o s a Ph on eG ap , c o n o c id o
ta m b ié n c o m o A p a c h e C o rd o v a , un fr a m e w o r k m obile
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
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.
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
» 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
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
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 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.
) A P A C H E COR DOVA
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
www.redusers.com «
278 USEFtS 10. PH O N EG A 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 279
www.redusers.com «
280 USEFtS 10. PH O N EG A P
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
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
- - ■- — — —
«» /— —.3.— S'~
a
\/
ISIoctor
C p E s s is ta n c e
f
JA
i...................................................... ............ .........j i
9
ow
#
■O"
«a
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 t 283
www.redusers.com «
284 G 2H S 1 0 . PH O N EG A P
élj — l - 1 ^ I
ü* --------------------------- “
» » « « j
3 ___________ d i — \
uTT* •
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
» 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 285
v , |M ;::r 3 A » ”
Doctor Assistance
&
D
¿ e v*
% i
www.redusers.com «
286 USEFtS 10. PH O N EG A P
««re
» 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 287
■■
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 ■■■
• 1
O•■
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
C E R TIF IC A D O S DE D ES A R R 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
www.redusers.com «
288 USEFtS 10. PH O N EG A P
» 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 289
D o c to r A s t is t a n c e D o c to r A t s r « t a n c «
l D o c tc * A T O » s tn n c * -o * ) u g apfc
¿ D «M M m u l a r la • p l c ^ . o o - ínr» aoc«0
a to M o v w n t* v '5 * » « » < jie a p f c c a c i0 n
««0P9 , li
O &
|¿W
1 Q R ESU M EN
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,
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?
4 ¿Podemos utilizar PhoneGap sólo para com pilar WebApps a apps híbridas?
o
¿De qué forma podem os instalar una app compilada en PhoneGap Build?
» www.redusers.com
///////////////
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
7 1 z1
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 .
» 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
y lanzó teléfonos inteligen tes que respetan las T IE M P O R E A L
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.
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
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
» 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 t 295
o H T M L 5 WeBW.
\
BlackBerry WebWorks 2.1
n
SU* e > w • - * » - v n !h » na» S »
♦
P
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 .
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*
i1
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,
» 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 297
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
SD K P A R A W IN D O W S P H O N E 8
» 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 299
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
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.
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
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.
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
p R ip p le E m u la to r (B e ta )
n v w iiM t
» 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 303
c o m e to
www.redusers.com «
304 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 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 « to . 1 (to M O ii 11o 01
r -i u . « 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 *M 0 M q a m
» 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 Ite d & i 305
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
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
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
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
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 .
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 .
El simulador 312
71Z1
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.
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
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 npggz a 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
com o financiador del p royecto M ozilla ayudó F IR E F O X OS E S UN
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 óvil que eligieran integrar en sus productos este M O Z ILLA
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
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 E2 Z3 311
- 2 2 48
54911331+8854 «3
P a a f S4B1133IQ68&4~| O
L 2 b 3o.
Mol» h«o. viajaste bien ? E iw f
4 5 6«o
7 ™ 8 9 ,™
* o. #
4* D n a ip ilM
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 ,
www.redusers.com «
312 USEF*S\ A P É N D IC E B. F IR E F O X O S
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
sig u ien te lin k desde Firefo x b ro w ser: www.
PAR A IN STALAR EL
addon s.m ozilla.org/es/firefox/adclon /
SIMULADOR FIREFOX firefox-os-sim ulator. Luego, debem os
p re sio n a r el botón A gre g a r a Firefox y
OS SOLO NECESITAMOS
e sp erar que fin alice el p ro ceso de in stala ció n .
EL NAVEGADOR WEB 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
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 313
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
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:
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
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 315
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
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 "
}
D A S H B O A R D DE FIR E F O X OS
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
» 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 317
www.redusers.com «
318 USEFtS A P É N D IC E B. F IR E F O X O S
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
» 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 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