Documentos de Académico
Documentos de Profesional
Documentos de Cultura
USERS-Desarrollo Web para PDF
USERS-Desarrollo Web para PDF
PARA DISPOSITIVOS
MVILES
HERRAMIENTAS PARA DISEAR 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
PG INAS: 320
Copyright O MMXIV. E s una publicacin de Fox Andina en coedicin con DLAGA S.A. Hecho el depsito que m arca la ley 11723.
Todos los derechos reservados. E s ta publicacin no puede ser reproducida ni en todo ni en parte, por ningn medio actual o
futuro sin el permiso previo y por escrito de Fox Andina S.A . Su infraccin est penada por las leyes 11723 y 25446. La editorial
no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricacin, funcionamiento y/o utilizacin de los
servicios y productos que se describen y/o analizan. Todas las m arcas mencionadas en este libro son propiedad exclusiva de sus
respectivos dueos. Impreso en Argentina. Libro de edicin argentina. Primera impresin realizada en Sevagraf, Costa Rica 5226.
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 pea com o ana
lista funcional de sistem as. Realiza tareas
de relevam iento, diseo, prototipado y
especificaciones tcnicas para brindar
soluciones inform ticas.
Colabora con las revistas USERS
y POWER USERS y en vario s blogs de
program acin y tecnologa.
En el ao 2011 lanz su p rim er libro,
VISUAL BASIC 2010- M anual del programador.
E-mail: fernando@ vidam obile.com .ar
Twitter: @m obilepadawan
Facebook: facebook.com/ferpro
Dedicatoria
Esta nueva obra est dedicada a m is hijos Nicols y Ju lin , que son el com
bustible que im pulsa mi m otor de aprendizaje y constante mejora.
A mi com paera de vida, Laura, quien me brinda la perfecta arm ona em o
cional; y a mis viejos, quienes siguen ilum inando desde el ter mi cam ino por
este mundo.
Agradecim ientos
Sin duda no puedo d ejar de agradecer a la ed ito rial por el constante
ap oyo y o rientaci n p ara que mi segundo sueo se co n vie rta en realidad.
Tam bin a mi fa m ilia, q uienes siguen respetando mis tiem p o s y acom pa
ndom e en el sueo de ser autor.
www.redusers.com
D E S A R R O L 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
Prlogo
Mi infancia estuvo acom paada de algn que otro juguete
electrnico y tam bin de la pasin de mi padre por la msica
contem pornea, quien hizo que me criara desde tem prana edad
rodeado de tocadiscos, com binados y grabadores m onoaurales.
Por suerte (o por desgracia), la profesin de mi progenitor
lo oblig a tener soldadores y destornilladores de todo tipo,
y fueron estas herram ientas las culpables de incitarm e a saciar
mi fanatism o por la electrnica, a conocer ms de cerca cada
com ponente que conform aba los artefactos.
En mi ad olescencia me ocup de aprender los secretos de
la electrnica aplicado s al m undo de la radio, el audio y la co m
putacin, en el m om ento en que a esta ltim a an se la llam aba
"electrnica d ig ital.
Ya con la pedagoga m oldeada, gracias a mi amigo Hernn,
del m aravillo so m undo del silicio, las placas conductoras y las
m em branas d ielctricas, realic un paso fugaz por el mundo
de las com unicaciones entre radioaficionados.
Luego lleg mi prim era com putadora, una 80286 con 2 MB
de m em oria RAM, con la que com enc a dar m is prim eros
pasos en el m bito de la com putacin: prim ero, com o operador
ofim tico y diseador grfico; despus llegaron la anim acin
y el diseo asistido por com putadora; y, por ltim o, la progra
macin. En mi caso, la ltim a fue la vencida.
Los ltim os protagonistas que generaron inters en m
fueron los BBS, seguidos de internet. Estas inm ensas centrales
de inform acin que crecen da a da term inaron de fo rjar mis
conocim ientos y mi pasin por este m a ravillo so m undo digital.
La evo lu ci n tecnolgica sigui avanzando, y hoy encuentro
conjugados, en cualq uier d isp o sitivo m vil, los cuatro elem en
tos que m arcaron mi pasin por el desarrollo de aplicaciones
para este pequeo m undo de bolsillo: la electrnica, la in fo rm
tica, las com unicaciones y la program acin. Esta ltim a es, sin
dudas, la que me perm ite estructu rar y m oldear la m anera en
que quiero d isfru tar de las otras tres.
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 tecnologa que deseen crear o ad ap tar un sitio w eb a los d isp o s i
tivo s m viles. A lo largo del libro b rin d arem o s co no cim ien to s tiles para
d isear y p rog ram ar W ebApps d inm icas y explotarem os las capacidades
del h ard w are de estos d isp o sitivos.
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 PROGRAMACIN
p r o g r a m a d o r e s h e rra m ie n ta s p a ra c r e a r E l c o n te n id o d in m ic o de la W e b n o s p e rm ite
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 utilizacin d e W e b d is t r ib u ir s e en la s p r in c ip a le s t ie n d a s d e
S t o r a g e , W e b S Q L , In d ex ed D a ta b a s e y A p p C a c h e a p lic a c io n e s m v ile s .
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 brindarn inform acin com plem entaria:
curio sid ad es, tru co s, id e a s y con sejo s so b re los te m a s tratad o s. P a ra que pueda distinguirlos en form a m s sencilla,
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
Interaccin 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 segn el d is p o s itiv o .............................................................165
I T* U n a solucin 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 generacin 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
Introduccin
Si segm entam os los notables avances que tuvieron lugar en
las ltim as dos dcadas en m ateria de evolucin tecnolgica,
podem os resum irlos en tres actores im portantes: la com p uta
dora personal, internet y la telefona m vil. Debemos destacar,
adem s, que este ltim o actor tuvo su propio Big Bang dentro de
la evolucin m encionada, dado que no solo p erm iti com unicar
a las personas en cualq u ier punto donde se encuentren, sino que
tam bin supo tom ar lo m ejor de los prim eros dos actores y co n
ju g a rlo en un nico producto.
De este m odo, la te le fo n a m vil logr consolid arse com o el
p u nto de p artid a de todas las a ctivid a d es relacion ad as al uso
co tid ian o de servicio s. A travs de ella, ho y en da podem os
re aliz ar m ltip les y va ria d as tareas, entre las que podem os
m encionar: establecer co ntacto social con nuestro s pares, e n
v ia r y re cib ir m ensajes de correo electrnico, m irar nuestras
series o p elcu las favo ritas, re aliz ar llam ados telefnico s, leer
libros electrnicos, establecer una agenda de activid ad es,
co m p rar p ro d u cto s y servicio s, n aveg ar p or in ternet y hasta
p rep arar una receta de cocina.
Com o d esab o llad o re s de aplicacio nes inform ticas b uscare
mos, a travs de esta obra, explotar estas nuevas tecnologas a
p artir del desarrollo de soluciones que apro vechen los recursos
que nos brinda hoy un telfono inteligente o una tablet.
G racias a la constante actualizacin de la tecnologa basada
en la Web, estas solu ciones pueden llevarse adelante tanto desde
una aplicacin n ativa instalada en un d isp o sitivo com o desde
una pgina web cargada en nuestro navegador m vil favorito.
Los in vitam o s a descubrir, en las prxim as pginas, cmo
podem os explotar cada una de las caractersticas que brindan
los d isp o sitivo s m viles, enfocndonos en la arquitectura de
hardw are y softw are que cada uno de estos pequeos artefactos
pone a disp osicin del usuario.
www.fedusers.com
z o
///////////////
\\\\\\\\\\\\\\\
Plataformas y
tecnologas mviles
En e ste c a p tu lo c o n o c e re m o s la e v o lu c i n d e la te c n o lo g a
m v il y w e b . V e re m o s c m o esta ltim a se a d a p t al p e q u e o
m u n d o de lo s d is p o s itiv o s m v ile s h a c ie n d o q u e un s im p le
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
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 ao ms
tarde, ap areciero n las tablets. As fue com o la tecnologa que haba
su rg id o entre diez y q uince aos antes reapareci en el m ercado
com ercial con otro fo rm ato y de la m ano de nuevos jugad ores. Ju n to
con ellos, llegaro n los app stores o tiendas de ap licacio nes. Estos
facto res p erm itie ro n a b rir el m ercado de ganancias, no solo a las
co rp o racio n es que d esarro llan estos p roductos, sino a cu alq u ier
p a rtic u la r o pequea co rp o raci n . D entro de estos m ercados, los que
m s generan ingresos ho y son los de la telefo n a m vil, con su batera
de apps g ratuitas y pagas, seguidos p or el m ercado de las tablets.
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S USE&S
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 ln e a s a n te rio re s d e sc rib im o s lo que es una
p lataform a mvil, p od ram o s, ahora, d e fin ir el co n cep to: se trata de
todo aquel d is p o s itiv o de f c il traslad o , que d isp o n e de d eterm in ad as
p restacio n es que nos a y u d a n en el d esem peo d iario de nuestras
a c tiv id a d e s la b o ra le s y/ o acadm icas.
Entre las ca ra c te rs tic a s m s im p o rtan te s de u n a p latafo rm a m vil,
podem os destacar:
Siste m a o p e ra tiv o am igable.
C o n e ctiv id a d a internet.
D isp o n ib ilid a d de a p lic a cio n e s p ara m ltip le s p ro p sito s.
M ltip le s o p cion es de co m u n icaci n con n u e stro s pares.
In te g ra ci n de correo e le ctr n ic o y o tros m ed ios de co m u n icaci n .
A lm a ce n a m ie n to de d o cu m en to s vario s.
A cceso a co n te n id o s m u ltim ed ia.
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 inalm 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 mviles
El m ercado m o b ile d isp o n e de un nm ero im p o rta n te (y d ifc il
de c a lc u la r) de p lata fo rm a s m vile s que agrup an tanto a los telfonos
in te lig e n te s com o a las tab lets y d isp o s itiv o s h b rid o s (aq u ello s que
co n ju g an una tab let con una co m p u ta d o ra p o rt til).
D entro de este m ercad o a m p lio y lle n o de m arcas y m odelos,
lo que m s im p o rta a un d e sa rro lla d o r es la p lata fo rm a basad a en
so ftw are, ya que la Web m vil se enfoca siem p re en el softw are,
que es el encargad o de in te rac tu a r con el h a rd w are en s.
Por ello, nos ce n trarem o s en co n o ce r los sistem as o p e ra tivo s
que actu a lm e n te existen, con sus lim ita cio n e s y co in cid e n c ia s
en el m und o m vil.
OS
Este sistem a o p e ra tivo es p ro p io de la firm a A p ple. Fue
d e sa rro lla d o en 2006, para se r in teg rad o al la n z a m ie n to de iPhone
en el ao siguiente. In icia lm e n te este sistem a o p e ra tiv o no ten a un
nom bre d efin id o tal com o lo conocem os ahora; sim p le m e n te , se lo
llam aba iPhone OS.
A p p le afirm aba que iPho ne co rra una ve rsi n a d ap ta d a de OSX.
iOS o b tu vo su nom bre oficial recin a p rin c ip io s de 2008, cuando
A p p le o fic ia liz el la n z a m ie n to del iPhone SDK, que p e rm ita a
c u a lq u ie r d e sa rro lla d o r crear a p lic a cio n e s para este m ercado.
Con el tiem po, iO S se ad ap t a las v e rs io n e s t ctile s de iPod, iPad
y, finalm ente, a A p p le TV, aun q u e este ltim o no puede e je cu ta r las
a p lic a cio n e s iO S cread as para el e co sistem a iPh o n e y iPad.
A l m o m en to de e s c rib ir esta p u b licaci n , iO S a lca n z a la v e rs i n 7.1,
la cual fu n cio n a en d is p o s itiv o s iPho ne 4S, iPad 2 o s u p e rio r y Apple
L A T E C N O L O G IA W A P DIA A DIA
La p rim era lleg ad a d e internet a los telfo n o s m viles fue a tra v s d e la tecn o lo g a W AP, q u e utilizaba la
frecu en cia p o rta d o ra de se a l telef n ica p a ra en viar y re cib ir d a to s. L o s n aveg a d o res w e b m o strab an
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 org 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 inters
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 slida.
As fu e com o G o o gle co m p r la firm a A n d ro id Inc. y co m en z a
a d a p ta r este sis te m a o p e ra tiv o en base a sus n e ce sid ad e s. A n d ro id ,
al m o m en to de e s c rib ir esta p u b lic a c i n , se e n cu e n tra en su v e rs i n
4.4 (Kit Kat). La p rim e ra v e rs i n (1.5) fu e la n z a d a en 2008, y, a
p a rtir de la v e rs i n 2.1, A n d ro id co m e n z a g anar p o p u la rid a d .
Sus v e rs io n e s 2.2 y 2.3 fu e ro n a d a p ta d a s - g ra cia s a que se sigue
m a n te n ie n d o com o c d ig o o p e n s o u r c e - a tab lets y n etb o o ks sin
so p o rte o fic ia l de Google.
Al v e r que el m ercad o p ro m e ta m s que un te l fo n o in te lig en te,
Google d ecid i la n z ar A n d ro id 3.0, esp ecficam en te d ise a d o para
tab lets. Luego de su a c tu a liz a c i n a la ve rsi n 3.1 (Honeycomb),
A n d ro id salt d ire cta m e n te a la ve rsi n 4.0, u n ifican d o su ncleo
p ara sm a rtp h o n e s y tablets, de m anera in te lig en te . Es por ello que,
hoy, c u a lq u ie r a p lic a ci n d e sa rro lla d a p ara esta p lata fo rm a puede
in sta la rse tanto en telfo n o s m vile s com o en tablets.
G racias a su ve rsi n open source, A n d ro id co n sig u i m uchos
clo n es a lte rn a tiv o s , ad ap tad os en su m a y o ra p or em p resas asiticas,
que b rin d an el m ism o se rv icio que la v e rs i n p ro m o v id a p or Google,
www.redusers.com
24 USEftS 1 . P L A T A F O R M A S V T E C N O L O G A S M V IL E S
Windows Phone
M icrosoft tam bin irru m p i , en 2010, en el m ercado de la telefona
m vil con su sistem a o p e ra tivo W indows Phone. Este fue una
re in g en iera co m p leta del v ie jo sistem a o p e ra tivo W indows Mobile,
que no haba logrado inters en la p oblacin y que M icroso ft tam bin
haba dejado ab and o nad o en su m om ento.
A co rralad a p or el creciente uso de d isp o sitivo s m viles, la firm a
de Redm ond d ecid i ingresar en este terreno desde cero, con un nuevo
desarrollo. W in d o w s Phone, al m om ento de e scrib ir esta publicaci n,
se e n cu en tra en su ve rsi n 8.1, aunque en el m ercado se encuentran
m u chos d isp o sitiv o s de ve rsi n 7.x activos.
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S [g s a s a 25
BlackBerry
RIM se reb au tiz en 2013 com o BlackBerry para u n i ca r la
im agen de la co m p aa con la de sus p ro d ucto s estrella. Black Berry
actu alm ente se encuentra en la ve rs i n 10.2.1. A p a rtir de la ve rsi n
10.0, realiz una re ing en iera co m p le ta de su
p latafo rm a m vil, al tom ar el sistem a o p e ra tivo
QNX com o base.
B L A C K B E R R Y P E R D IO
Este s iste m a o p e ra tiv o g a ra n tiz a , d esd e hace
m 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 Fundacin Mozilla, d uea de la p lata fo rm a open source
lid e ra d a p or Firefox B ro w ser y T h u n d e rb ird . entre otras grandes
a p lica cio n e s, d e c id i in c u rs io n a r en 2012 en el terren o de un sistem a
o p e ra tiv o m vil. El im p u lso que lle v a M o z illa a este te rre n o fu e el
cre cie n te in te rs p o r p arte de los u su a rio s en la n ave g aci n web y en
el uso de a p lic a cio n e s que se e je cu ta n d en tro de un brow ser. Teniendo
el re sp ald o de un gran m ercad o de u su ario s y la p o p u la rid a d lograda
por H TM L5, CSS3 y Ja v a S c r ip t com o base fu n d a m en tal de tecn o log a
en el m undo web, M o z illa, co n el ap o yo de T elef n ica de Espaa,
d e c id i crear un s iste m a o p e ra tivo m vil que tom ara com o filoso fa
las a p lic a cio n e s w eb b asad as en los tres p ila re s fu n d a m e n ta le s de la
Web de hoy.
A s n aci Firefox OS, ap un tad o en un p rin c ip io para m ercados
em ergentes. Firefo x OS se in teg ra con telfo n o s in te lig e n te s de baja
y m edia gam a, com o un sm artp ho n e que fu n cio n a basado en IIT M L5 ,
CSS y Ja v a S c rip t. Todas las a p lic a cio n e s n a tiva s que se in sta le n en el
d is p o s itiv o d eb ern ser d e sa rro lla d a s co n las tres tecno log as p ilares
de la Web de hoy, y no b ajo fram e w o rk s p ro p ie ta rio s com o XCode,
A n d ro id Studio, V isual Studio o QNX Mom entics IDE, com o as
lo req u ieren sus co m p e tid o re s p rin cip a le s.
RIM
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S E s s a
Tizen
Este sistem a o p e ra tivo m vil nace de un p ro ye cto en co n ju n to de la
Fundacin Linux, Sam sung e Intel, to m an d o com o base el sistem a
o p e ra tiv o MeeGo. Este ltim o fue im p o rta n te en el e co sistem a Nokia,
que lo d ej ab an d o n ad o p ara p ro m o ve r Symbian y la p latafo rm a S40,
m u ch o antes de que M icro so ft a d q u irie ra la firm a finlandesa.
T iz e n basa su a rq u ite c tu ra p rin c ip a l en H TM L5 y otros estndares
web y fu e p ensado no solo para el m und o de los sm artp h o n es, sino
tam b in para tablets, netbooks, smart T V s y otros sistem as de
e n tre te n im ie n to ve h icu la re s .
A ctu alm en te , T iz e n se en cu e n tra en su ve rs i n 2.2, dando retro-
co m p a tib ilid a d con las a p lic a cio n e s M eeGo a travs de la API basada
en HTM L5.
Figura 8. Bajo un look que los empareja bastante, Firefox OS y Tizen OS buscan
ser los protagonistas en la prxima revolucin de sistemas operativos mviles.
Ubuntu Phone
Canonical, la firm a cread o ra de U bu n tu Linux, el sistem a
o p e ra tiv o Lin u x ms p o p u la r de la ltim a dcada, tam b in d ecid i
www.redusers.com
28 c_/si=*?s 1. P L A T A F O R M A S Y T E C N O L O G A S M V IL E S
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
cdigo 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 aos en la m a y o ra 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 CDIGO F U E N T E
Al estar basado en el cdigo fuente de
D E AN D RO ID A n d ro id , Fire OS p erm ite crear ap lica cio n e s
n a tiva s con las m ism as h e rra m ie n ta s de
d e sa rro llo que se u tiliz a n p ara A n d ro id .
Es ms, de m an era p eri d ica , Fire OS lanza
a ctu a liz a cio n e s que in c lu y e n las n o ved ad es del sistem a o p e ra tivo
A n d ro id que fu e ro n lib e ra d a s para su v e rs i n open source.
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 ln e a de e q u ip o s S40, b asad o s en el
s iste m a o p e ra tiv o h o m n im o , b ajo la ln e a Asha. Sym bian fu e otro
sistem a o p e ra tiv o lan z ad o p or N okia que an m a n ten a su e co sistem a
de a p lic a c io n e s p ro p ie ta ria s . Pero fu e d e te rm in a d a su d isc o n tin u id a d
al m o m en to del a n u n c io o ficia l de la co m p ra de esta firm a p or parte
de M icro so ft.
Casi todos los sistem as m e n cio n ad o s poseen las m ism as
ca ra cte rsticas: in teg ran ap ps p ro p ie ta ria s d escarg ables desde
sus re sp e ctiv as tien d as de a p lic a cio n e s, poseen GPS, acelerm etro ,
n a ve g ad o re s web con soporte para H TM L5, co n e ctivid a d a in te rn e t
m e d ian te 3G y 4G, y u tiliz a c i n de Wi-Fi para el m ism o p ro p sito .
www.redusers.com
30 H SSS 1 . P L A T A F O R M A S Y T E C N O L O G A S M V IL E S
Aplicaciones mviles
Si bien el h ard w are y la v a rie d a d de sistem as o p e ra tivo s son
las e strella s ms im p o rtan tes del m o m en to en el eco sistem a m vil,
no pod em os p asar p or alto que todos estos p io n e ro s no se ra n nada
si no e x istieran las tien d as de ap licacio n e s.
Estas tie n d a s poseen cie n to s de m iles de ap ps pagas o gratuitas
que p erm iten in te rac tu a r de d iv e rs a s m an eras a tra v s del d isp o s itiv o
m vil, u tiliz a n d o las b on d ad es del h ard w are de cada equ ip o , al que
solo usan para in g re sar in fo rm aci n im p o rta n te para el usuario,
o sim p le m e n te para ju g a r los vid e o ju e g o s de
m oda, entre otras a lte rn a tiv a s ms.
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 an 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 tegrnd o se con parte del h ard w are . Podem os m encionar, com o
ejem plo s: una ap p m vil que nos a yu d e a d esp la z arn o s por una
ciu d ad y que u tilice la fu n ci n de g e o lo ca liz a ci n del eq u ip o en
c o n ju n to con los m ap as que posee el d isp o s itiv o ; o una app que
oficie de agenda te le f n ica de p ro fe sio n a le s esp ecfico s para poder
co m u n ica rn o s con ellos, y a sea m ed iante un llam a d o te le f n ico ,
un e-mail o un m ensaje de texto.
O tro uso m u y co m n es el de las a p lic a cio n e s com o Instagram
o las basadas en redes so ciale s (Google Plus, Facebook o Twitter),
que nos fa cilita n la co m u n ica c i n co n n u e stro s co n o cid o s a travs
de p u b licacio n e s, o bien co m p a rtie n d o una foto o v id e o tom ada
desde la m ism a ap p que hace uso de la cm ara de los telfono s.
Com o vem os, la in teg raci n de las ap ps con el h ard w are de los
eq u ip o s es casi in fin ita. El nico lm ite aqui estab lecid o es n u estra
im a g in aci n com o d esa rro lla d o re s.
www.redusers.com
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 ingls W eb
Application (ap licaci n web). Este tipo de a p lica cio n e s son accedidas
m ediante la Web o una red Intran et. Para acced er a ellas, el requisito
esencial es contar con un naveg ad o r web que p erm ita ejecutarlas.
De este m odo, una W ebApp puede categ orizarse com o un program a
in form tico, con la d ife re n cia de que se ejecuta desde un b ro w ser web.
Su e stru ctu ra est co nfo rm ad a m ayorm ente por: H TM L, CSS,
Ja v a S c rip t, y/ o algn otro lenguaje de p ro g ram acin que trabaje
del lado del se rv id o r (PHP, ASP.Net, Pytho n, Ruby, CGI, Perl, etctera).
U N O , DOS 0 MS D E S A R R O LLO S ?
Una 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 versin especfica para
dispositivos mviles, aun teniendo una aplicacin nativa para ellos.
Apps nativas
Una app nativa es a q uella ap licaci n que fue p rogram ad a para
ser in stalad a d entro de un sistem a o p e ra tivo determ inado. Para
el caso de las a p licacio n e s m viles, una ap p n a tiv a es aq uella que
fue program ada b ajo el lenguaje o framevvork recom endado por el
fabricante del sistem a operativo .
Por ejem plo, para el caso de iOS, se u tiliz a Objective C bajo el
framevvork XCODE; p ara W in d o w s Phone es u tiliz a d o el lenguaje C#
o Visual Basic bajo el fram e w o rk Visual Studio; en la plataform a
A n d ro id se u tiliz a el lenguaje JAVA bajo d ive rso s IDEs; y, para la
p latafo rm a B la ck B e rry OS, se u tiliz a QNX Momentics IDE.
Estos fram ew o rks perm iten acced er m ediante las API (Application
Program m ing Interface) a p rcticam ente todas las caractersticas del
h ard w are y del sistem a o p erativo m vil.
Apps hbridas
Podem os d efin ir una ap licaci n hbrid a com o una ap licaci n web
d esarrollad a con los estndares H TM L, CSS y Ja v a S c rip t, entre otros, la
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S [g s a s a 33
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
hbridas de la ve rsi n mvil d e su sitio w e b , optando por d esarro llar d esd e c e ro una a p lica ci n nativa para
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
aos, sig n ifica tivo , y la m a y o r p arte de este se d eb i a HTM L5.
Pero, aun sabiendo esto, cabe que nos preg untem os... q u es,
exactam ente, H TM L5?
Podem os d e fin irlo com o un a c o le cci n de e stn d ares que
in flu ye n en el d ise o y en el d e sarro llo de u n a pgina w eb . A n te rio r
a H TM L5 , el e st n d a r que m arcaba la te n d e n c ia del m und o de los
naveg ad o res era H TM L 4.1. Estos estndares
son su p e rvis a d o s p or el W3C ( World Wide Web
H TM L5 E S UN A Consortium).
En la cre aci n de este n u evo co n ju n to de
C O LEC C I N DE
estndares, H TM L5 d ecid i sa lta r las bases
E ST N D A R ES DE de H T M L 4.1 y a p lic a r un re d ise o p ro p io de
cm 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
pgina web de m anera rp id a, clara y co ncisa.
Poco a poco, los naveg ad o res w eb fu ero n
ad ap tan d o su m o to r de re n d e riz a c i n para in c lu ir el soporte
necesario p ara HTM L5. G oogle Chrom e fue uno de los naveg ad o res
que pudo a p re cia r tem p ranam en te este p o te n cia l y lo in c lu y desde
las p rim eras ve rsio n e s del brow ser.
Hoy, la m a y o ra de los b ro w se rs so po rtan un g ran nm ero
de e tiq u e tas que co n fo rm a n el e st n d a r H TM L5, p ero tam bin
en co n trare m o s d ife re n cia s entre p latafo rm as, com o, p or ejem plo,
el tipo de fo rm ato de re p ro d u cc i n de los tags <audio> y <video>.
d ep e n d ie n d o del m o to r u tiliz a d o p or el n a ve g ad o r web, podr
o no re p ro d u cirs e un cdec d eterm in ad o .
el n a v e g a d o r w e b deb a p a s a r s o s.
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
La estructu ra de una pgina web tam bin fue reem plazad a casi
p or co m p leto con H TM L5. A ctu alm en te, crear una pgina web sim ple
se puede resu m ir en tan solo un par de tags que, gracias a su nom bre,
definen bien, en el cdigo H TM L, cul secci n co rresp o nd e a la pgina.
<head>
T tu lo de la pgina web
</head>
< body>
A q u i n c l u i m o s la d e s c r i p c i n q u e q u e r e m o s q u e t e n g a n u e s t r a p g i n a w e b .
< /body>
< footer>
C o p yrig h t 2012 - Fernando Luna
</footer>
Una sim ple lectura de este cdigo perm ite a cu alq u ier persona,, con
m n im o s co n o cim ien to s en el tema, conocer la m anera sim p le que tiene
HTM L5 de e stru ctu ra r una pgina web.
css
Las siglas CSS p ro vie n e n del ingls Cascade Style Sheets (Hojas
de estilo en cascada). Se u tiliz a para d efin ir la p re se n taci n de un
www.redusers.com
38 USEftS 1 . P L A T A F O R M A S V T E C N O L O G A S M V IL E S
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 acin,
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 libreras
ms utilizadas para realizar WebApps y apps nativas.
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
Entornos de desarrollo
Los entornos de d e s a r r o llo (IDE, p or sus siglas en ingls)
p e rm ite n in co rp o ra r fu n c io n a lid a d e s extra de m an era n a tiva para
e je cu ta r los d e sa rro llo s en un am b ie n te de test, s im u la d o r y hasta
para co m p ila r los p ro ye cto s re a liz ad o s de m an era nativa.
D entro de los e n to rn o s de d e sa rro llo m s co m unes e n co n tram o s a
D ream w eaver, V isu a l Stu d io , QNX Mom entics IDE, Titanium Studio.
entre otros. Los fra m e w o rk s tam b in p e rm ite n re a liz a r co m p ilacio n es
de p ro ye cto s que se d e s a rro lla n de m anera n ativa , pero generalm en te
re q u ie re n de u n p lug in que p erm ita lle v a r a cabo esta acci n.
Dreamweaver
El ID E elegid o para lle v a r a d e la n te los d e s a rro llo s ser A d o b e
D ream w eaver. Este fu e elegid o d eb id o a que, desde el ao 2010,
in teg ra el d e s a rro llo web m o b ile de m anera n ativa . En 2012, la firm a
A d ob e a d q u iri la m e n cio n a d a e m p resa PhoneG ap, que perm ite
c o n v e rtir una web a ap p para las p lata fo rm a s m vile s m s pop ulares,
y con esto integr de m anera tra n sp are n te el uso de Pho neG ap d entro
del ID E D ream w eaver.
J
D re am w eaver C C
wm
El nuevo estndar
en estndares web.
U u a v a u n r w w a , a rra c / i i n * n o a n a a vto
rt^rlpadanartojprocrnwcfctofmcmto
M?
jn - H '- r - conecacas y * tas nne.*i ce *0 c c ^ . v j . i
c*'c *-na-.a rc' D W "**IC t* ca
6c & 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 UHiCCuU3C 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 WI IMMllUUi
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 interacta la n u e va W eb
d esarrollo y libreras que n o s perm itirn llevar a c a b o nuestro cam in o h acia la c re a c i n d e a p licacio n es
www.redusers.com
44 F Z n iH 1 . P L A T A F O R M A S Y T E C N O L O G A S M V IL E S
Actividades
T E S T DE A U TO E V A L U A C I N _____________________
1 Qu es una WebApp?
5 Qu es una librera?
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 mviles............ ....56
_ l
z 17 1z1
46 l/SERSl 2. H TM L5
El lenguaje HTML5
HTML5 fue creado con el propsito de b rindar soporte al contenido
existente en la Web basndose en los estndares im puestos con HTML
4.x, pero unificando la esttica y funcionalidad de los sitios en todos los
navegadores web, lo que se conoce com o com patibilidad cross-browsers.
Su principal objetivo
D el estn d ar propuesto por HTML5 podem os hacer alu sin a
los nuevos elem entos d entro de la sintaxis que difieren en gran
p arte de la ve rsi n a n te rio r de este lenguaje de m arcado. HTM L5 es
u tiliz ad o por los d isead ores que crean sitios web y no h ay ninguna
p ro b lem tica cuand o se requiere co m b in arlo con u n a ve rsi n anterior.
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, grficos, CSS3 y Ja v a S c rip t) y
lo traduce a lenguaje grfico, p intand o en p antalla la esttica del sitio
web o correo electrnico, para que el usuario lo visu a lice o im prim a.
A p esar de que la segm entacin se est reduciend o, an existe una
varied ad im p ortante de m otores de rend erizad o . Entre ellos estn:
Gecko, T rid en t, W ebKit, KH TM L, Presto, Tasm an, gzilla, G tkH TM L, Servo
y Blink. Los tres p rim ero s son los ms u tiliz a d o s p or los brow sers ms
com unes de cada p latafo rm a, m ientras que Blink es el nuevo m otor
d esarrollad o para Google Chrom e que reem p laza a WebKit, y Servo es
el n uevo m otor d esarrollad o p or M ozilla, que reem plazar a Gecko en
las p latafo rm as con arq u ite ctu ra ARM.
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
recpro cam ente. No hay restriccio n es en cuanto al diseo de una
pgina, y todo el cdigo que escribam os en HTM L4 funcio nar sin
p ro b lem as en HTM L5. De igual m anera, si una pgina re a liz ad a en
H TM L4 co n tien e etiquetas especificas de HTM L5, estas fu n cio n arn
sin ningn inco nveniente.
Doctype
Toda pgina web se in icia con la d eclaraci n de las etiquetas <html>
y se cierra con la m ism a etiqueta </html>. D entro de estas, se estructura
el encab ezad o de la pgina, <headx/head>, y el cuerpo de la pgina,
<bodyx/body>.
A n tep uesta a la etiq ueta H T M L que in ic ia la estructu ra de estos
a rch ivo s, debem os agregar la palabra doctype, que significa tipo de
documento. Esto se u tiliz a para que el naveg ad o r id entifiq ue el tip o de
a rch ivo que est p or abrir. Un naveg ad o r web puede a b rir tanto pginas
w eb com o pginas XML, im genes y, en las ltim as versio n es de los
b ro w sers ms populares, tam bin puede a b rir un arch ivo PDF directo,
sin necesidad de un plug in o ap licaci n clien te p reviam en te instalada.
\\\
D E F IN IC IO N E S D E L L E N G U A JE
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 pgina, ments, 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 pgina
web (espaol, ingls, francs, portugus, etctera). 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 cm o se e stru ctu ra un d ocum ento H TM L, tanto en su
encabezado <head> com o el co n ten id o del cuerpo de la pgina < body> .
Nos queda p or delante repasar las secciones creadas para HTML5 que
represen tan el co n ten id o de una pgina web.
Todos los sitio s in co rp o ran en su e stru ctu ra una m etodologa sim ilar
para agrupar las d iferen tes secciones de un sitio. D entro de estas,
podem os destacar las siguientes:
Un encabezado (texto y/o logo).
Una barra de n aveg acin (lateral o superior).
Un rea central donde figura(n) la(s) n o ticia(s) o in fo rm aci n general.
Una barra lateral con in fo rm aci n o lin ks adicionales.
Un pie de pgina.
Encabezado
B a rra d e navegacin
B a rra
(links.
publicidad)
Cue rp o principal
(N o ticias , im g en e s, videos, e tc .)
P ie d e pg 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 bin la de los m otores de indexacin. Veam os, en la siguiente
tabla, el nom bre de cada elem ento y su m anera de im p lem entaci n.
N U E V O S E L E M E N T O S E N H TM L5
- M
ELEMENTO CDIGO DE IMPLEMENTACIN T DESCRIPCIN
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 ms etiquetas que nos perm iten crear una pgina
web m oderna y que, com b inadas con CSS, ayud arn a cu alq u ier
d esa rro llad o r o d ise ad o r web en la esttica y la estructura, pero el
o b je tivo de este lib ro es ab arcar el desarrollo web m obile y cm o se
integra este con los d isp o s itiv o s m viles. Por esta razn, dejarem os
el dise o esttico de cada a p lica ci n en m anos de una lib re ra com o
jQ u e ry M obile.
Si desean co n o cer ms a fondo sobre HTM L5 podrn hacerlo a travs
del manual HTML5 p ublicad o p or esta m ism a editorial.
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 mviles
Los d isp o s itiv o s m vile s m odernos ad op taron HTML5 para explotar
de m anera eficiente el acceso que este lenguaje b rin d a al h ard w are y al
sistem a operativo . Y si pensam os en d isp o sitivo s m viles, sabem os en
que la m ayo ra de estos reina la interfaz de escritura tctil.
Estas interfaces perm iten el ingreso de datos, alfan um rico s o
n u m rico s, a tra v s de un teclado virtu a l, por lo cual este teclado,
a d ife re n cia de los fsico s, puede lim ita r su vis u a liz a ci n de teclas
en base al cam po de texto en el cual se debe ingresar inform acin.
Esto p erm ite fa c ilita r la v id a del d esa rro llad o r o d ise ad o r web, ya que
se e vita valid ar, m ediante algoritm os co m p lejos, los datos ingresados
en cada tipo de cam po.
A co n tinuaci n, repasarem os las p ro p uestas de HTM L5 que facilitan
el trabajo de cargar in fo rm aci n especfica en una pgina web.
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= algn texto . E s to sirve co m o
para a p lica r en p an tallas c o n m u cha inform acin y d e d im en sio nes redu cid as.
www.redusers.com
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
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
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 mnimo
y mximo y, tambin, ingresar el valor de form a manual,
siempre y cuando se respeten los rangos establecidos.
Geolocalizacin
Los navegadores web m odernos in clu ye n una fu n ci n de
geolocalizacin, a travs de la cual podem os o btener las coordenadas
de la p o sici n del equipo m ediante un m apa. Dado que todas las
d ire ccio n es IP de in ternet tienen una d ire cci n fsica asignad a segn
su uso, es posible e stim a r las coord enadas ap ro xim adas de los equipos.
Las co m p utadoras, tablets o telfonos que acceden a la Web a travs
de tecnologas 3G o 4G perm iten tria n g u la r una u b icaci n m ucho ms
p recisa de las coordenadas, lo cual nos d ar un resultad o m s acertado
que el que puede b rin d ar una co m p u tad o ra de e scrito rio co nectad a a
in te rn e t p or cable m dem o ADSL.
A travs de una fu n ci n de Ja v a S c rip t, podem os o btener los valo res
de latitud, longitud y altitu d ap roxim ados del equipo y, u tiliz an d o
un s e rv icio com o Google o Bing Maps, representarlas en un mapa.
Para com prender m ejor los trm inos hasta aqu repasados,
realizarem os un ejercicio prctico que nos p erm itir co m p render la
www.redusers.com
64 USEFtS 2 . H TM L5
estructura de los docum entos HTM L5, cm o integrar en ellos las libreras
Ja va Scrip t, cm o in vo car un m apa desde la API de Google Maps, y cmo
realiz ar la deteccin de nuestra ubicacin m ediante la geolocalizacin.
# w v n v .v i iJ a m o t ile .io ii i .a r T
^borms,.,
C c iv r i|> M tlr u | | k a i
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
d D O C T Y P E h t m l>
< h t m l>
<head>
< title > G eo lo ca lza ci n en H T M L 5 < / title >
<m eta c h a rs e t= "u tf-8 ">
c s c rip t src=/7/ajax.googleapisxom /ajax/libs/jquery/1.11.0/jquery.m inJs//></
script>
</head>
<body>
</body>
</html>
Integracin de libreras JS
Para poder im p lem en tar co rrectam ente nuestro mapa, utilizarem os
la A PI Ja v a S c rip t de Google M aps que nos p e rm itir v is u a liz a r nuestra
p osicin. Sum ada a esta, tam bin declararem o s la lib rera jQ u e ry, que
nos sim p lificar la tarea de e scrib ir el cdigo JS y de re fe re n cia r a cada
objeto creado en la pgina. En el Captulo 3 conocerem os en detalle
esta lib re ra y sus m ltip le s usos.
Dentro del encab ezad o del a rch ivo H TM L, agregam os las siguientes
lneas de cdigo:
<header>
< h l> G e o lo c a liza c i n en H T M L 5 < / h l>
< / h e ad e r>
< s e c t io n >
www.redusers.com
66 USEFtS 2 . H TM L5
</div>
</section>
El tag <header> p erm ite crear un ttu lo del tip o < h l> . A co ntinuacin,
ab rirem o s u n tag <section> d onde declararem o s u n n u evo tag <article>
seguido de un <div> que contiene una etiqueta del tipo canvas. Esta
p erm itir cargar luego el m apa que vis u a liz a r nuestra posicin.
Luego agregam os el siguiente cdigo:
</scrpt>
Este cdigo inicia un nuevo script donde in clu ire m o s las funciones
co rresp o n d ien tes a g eo lo calizaci n. Estas funciones so licitarn perm iso
al u suario para u b ica r su p osici n , v a lid a r n los erro res que puedan
o cu rrir en la acep taci n o rechazo de la u b icaci n y d ib ujarn el
co rresp o nd iente m apa en la etiqueta Canvas para m ostrar nuestro lugar.
In clu yam o s, a co ntinuaci n, el siguiente cdigo d entro del tag script:
<script type=//text/javascript//>
var map;
var latitud;
var longitud;
var precisin;
$(document).ready(function() {
localizameO;
;
Las variables map, latitud, longitud y precisin alm acenarn los datos
de nuestra ubicacin cuando aceptem os que nos localice la pgina.
La siguiente funcin es una invocacin a jQuery, que perm itir ejecutar la
funcin localizameO cuando la pgina HTM L se haya cargado por completo.
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
function localizam eO {
f (navigator.geolocation ) {
navigator.geolocation.getCurrentPositioncoordenadas, e rro re s);
}else{
a le rtO E s te navegador no soporta ge o lo ca liza ci n /);
}
>
function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;
precisin = position.coords.accuracy;
ca rg a rM a p a O ;
}
Esta fu n ci n setea los valo res co rresp o nd ien tes a las va ria b le s
d eclarad as en el in icio del script, de acuerdo a los valo res recibid os del
m todo getCurrentPosition: latitu d , lo ngitud y p recisi n . Por ltim o , ya
cargados los valo res en las variab les, se in vo ca al m todo cargarM apa().
>
f (err.code = = 2 ) {
a le r t ( v'N o se puede obtener la posicin a c tu a l");
)
if (err.code = = 3 ) {
www.redusers.com
68 USEFtS 2 . H TM L5
La sentencia err nos perm ite detectar los erro res que ocurren
en las d ive rsas in vo cacio n es de Ja v a S c rip t. A travs de la prop ied ad
err.code, podem os detectar si hubo o no u n error. Si esta d e v u e lv e 0,
es porque no ha o cu rrid o ningn error. Si d evu elve 1, es porque el
u su ario no acept co m p a rtir su ub icaci n. El erro r 2 se debe a que
no se pudo d eterm in ar la u b icaci n del usuario, y el erro r 3, a que
la fu n ci n getCurrentPosition super el tiem po de espera mxim o
para d e v o lv e r la p osicin del usuario.
function ca rg a rM a p a O {
var latlon = new g o o g le .m a p s.La tLn gd a titu d ,lo n g itu d );
var m isParam etros = {
zoom : 17,
ce n te r: latlon,
m apType ld : g o o g le .m a p s.M a p T yp e ld .R O A D M A P
>;
map = new go o g le .m a p s.M a p ($ (u# m a p _ c a n va s ").g e t(0 ), m isP aram etros);
;
>
Por ltim o, nos queda la fu n ci n p rin cip al: cargarM apa(). Esta funcin
p erm itir estab lecer la in v o ca ci n a Google M aps y pasarle todos los
p arm etros necesario s para d ib u ja r nuestra u b icaci n en el mapa.
Veam os el cdigo com pleto de nuestra pgina HTML:
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
<htm l>
<head>
< title > G e o lo ca liza ci n en H T M L 5 < / title >
< m eta c h a rs e t= "u tf-8 ">
< scrip t src=/7/ajax.googleapis.com /ajax/lbs/jquery/1.11.0/jquery.m n.js//></
scrpt>
</head>
<body>
<header>
< h l> G e o lo c a liza c i n en H T M L 5 < / h l>
</header>
<section>
< a rtcle >
<dv d='m ap_canvas' s ty le = 'w id th :1 0 0 % ; h e ig h t:1 0 0 % ;/></div>
</article>
< d iv id = "re sp u e sta ">
</dv>
</secton>
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 cin /);
}
}
function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;
precisin = position.coords.accuracy;
c a rg a rM a p a O ;
}
function 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
cm o el sistema
solicita permiso al
. tlilffv te
uMcaBOta tu au to o r**
usuario antes de
S t'rm fi*
m ostrar su ubicacin
O o *
en Google Maps.
R ESU M EN
la inclusin d e va ria s fu n cio n es tiles que n o s perm iten d e s a rro lla r m e jo re s sitios w eb. A su ve z, tam bin
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 precisin?
E JE R C IC IO S PR CTIC OS___________________________
3 Visualice las pginas 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 tcnica relacionada con el contenido, puede contactarse
con nuestros expertos: profesor@redusers.com
www.redusers.com
* n
///////////////
\\\\\\\\\\\\\\\
Fundamentos
de jQuery Mobile
La e s t tic a d e una a p lic a c i n w e b m v il es m u y im p o rta n te
en ca d a u n o d e io s p ro y e c to s q u e a b o rd a m o s . Y lo m e jo r para
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
Qu es jQuery Mobile?
jQ u e r y M obile es un co n ju n to de lib re ra s Ja v a S c r ip t y CSS,
c o n stru id o esp ecficam en te para d a r so po rte a m ltip le s p latafo rm as
al m o m ento de d ise a r tanto un s itio w eb com o una a p lica ci n
m vil. Perm ite, de m an era p r c tic a y s in co m p lica cio n e s, m a n ten er la
es tru c tu ra de un sitio p o r igual, al m om ento de v is u a liz a rlo desde
un a co m p u tad o ra de e s c rito rio , tablet, sm artp ho n e o te l fo n o ce lu la r
de baja, m ed ia o alta gam a con soporte para n aveg aci n web.
U no de los pasos m s im p o rta n tes a l m om ento de d ise a r una
W ebApp o app m vil es d efin ir bien la in te rfa z de u su a rio que la
a p lic a ci n ten d r y, p or supuesto, cm o se v e r en cada una de
las p lata fo rm a s donde p o d r ser ejecutada.
Si d e cid im o s h acer u n a a p lic a ci n web que pueda eje cu ta rse tanto
en un n a ve g ad o r de e scrito rio com o en un n a ve g ad o r web m vil,
deb em os ten e r en cu en ta que su in te rfa z sea lo ms s im ila r p osib le
para que los u su ario s co n cu rre n te s no deban tener que ap re n d e r dos
o ms ve ces a d esp la z arse p or n uestro sitio.
U na de las p rim eras in v e s tig a c io n e s que re a liz a n los u suario s
de a p lic a cio n e s m viles, al m o m en to de d e c id ir ca m b ia r h acia otro
sistem a o p e ra tivo m v il, est d estin ad a a saber si las ap ps de uso
co tid ia n o tie n e n su v e rs i n en la p lata fo rm a a la cual p ie n sa n m igrar.
Desde nuestro punto de vista, al m om ento de d e s arro llar ap ps web
m viles, la opcin de cam bio de usuario no nos deb era a fectar en lo
ms m nim o si tenem os las herram ientas necesarias para a fro n ta r un
d esarro llo que fu ncio n e p or igual en todas las p lataform as.
jQ u e ry M obile fue pensado desde sus in icio s para b rin d a r la m ayor
co m p a tib ilid a d posible en casi todas las p latafo rm as existentes, sean
o no m viles. Para estas ltim as, jQ u e r y M obile enfatiz en cu b rir la
m ayor cantid ad de equipos y web b ro w sers que existen en el m ercado,
jQ u e ry M o b ile perm ite e s c rib ir a p lic a c io n e s w e b y m viles d e form a b sic a y sin ningn esfuerzo.
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 rcticam ente- sin cam bios
tanto en un sm artp ho ne de alta gam a com o en uno de baja gama.
jQ u e r v
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<mnidlQ..eivMatMi'
j Q i t t r y M o te te t i a H T M I S - b a s e d u m m t o r f jc i / i t e r r
lo t i 9 'o d t o m o h o r o p o n * M > w o b m il m n a p p a th a t aro
a c c e w ib t e do I I im a itp h o n e to b te t a - d d e i k t o p d o w c a i
D a v a la p a r I M S
S e n o u tly c r o t i- p la lfo r m w lt k H TM LS
unsutetiUftMu
A* rh wtua* uo<ri
iame* ar0(1 (ury mobm >*
iVyri 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
</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 pgina</title>
< m eta n a m e = "v ie w p o rt" content=//w id th = d e vice-w id th / in itia l-s c a le = l//>
</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>
< ttle > E je m p lo s con Jq u e ry M obile< /title>
c m e ta nam e=//v ie w p o rt// content= //w id th = d e vice-w id th / in itia l-s c a le = l">
jQ u e ry M o b ile nos g aran tiza, en c a d a nueva ve rsi n , que to d o s los d esarro llo s q u e usan e s te fram ew o rk
puedan visualizar una interfaz uniform e en cualqu ier platafo rm a mvil, dejando que C S S y J S ajusten
las fun cio n alid ad es n e c e s a ria s para que la interfaz U X se a tra n sp a re n te al usuario, independientem ente
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 especfico para
las d iferentes secciones que com p onen una pgina web. Veamos,
a co ntinuaci n, los d istin to s co m p o nentes que podem os in teg rar en
un diseo ap licad o gracias a este co n ju n to de libreras. Estos
co m p o nentes nos p e rm itir n e stru ctu ra r toda pgina de jQ u e r y Mobile.
Page
Page nos p erm ite d efin ir la e s tru c tu ra e q u iv a le n te a <body> en un
H T M L com n. D entro de page a grup arem os todas las e stru ctu ra s de
en cab ezad o , pie de p gina, co n te n id o , b a rra s de h erram ie n ta s y otras
fu n c io n a lid a d e s que JQ M nos da.
Page no reem p laz a a la etiq ueta <body> d entro de un d ocum ento
H T M L ; p or el co n trario , se deben u tiliz a r los e lem en to s page d entro
de esta etiqueta. Veam os un e je m p lo a co n tin u a ci n :
<htm l>
<head>
</head>
<body>
<div d a ta -ro le = //page,/ id = "in d e x ">
< h l> E s to es jQ u e ry M o b ile < /h l>
< p > M p rim e ra pgina web con JQ M </p>
</div>
</body>
</html>
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S E2 S2 Z 3 81
Header
La e tiq u e ta <header> no es ms que un en cab ezad o que tendr
n u e stra pgina. En e lla p o d em o s in d ic a r el ttu lo , in co rp o ra r un logo
y hasta uno o ms botones con fu n cio n e s de m en.
Veam os un e je m p lo donde solo in clu im o s el ttu lo :
<body>
<div d a ta -ro le = "p a g e " d = "in d e x ">
< d iv d a ta -ro le = "h e a d e r">
< h l> E s to es Jq u e ry M o b ile < /h l>
</div>
< p > M p rim e ra pgina web con JQ M </p>
</div>
</body>
Content
La e tiq u e ta <content> nos p e rm itir in co rp o ra r d ive rso s co n te n id o s
en la pgina creada con jQ u e r y M obile. Eq u ivale al cu erp o p rin cip a l
de un H TM L, y solo se puede u tiliz a r una e tiq u e ta content d entro de
una e tiq u e ta page.
<body>
<div d a ta -ro le = "p a g e " id = "n d e x ">
www.redusers.com
82 USEFtS 3 . F U N D A M E N T O S D E J Q U E R Y M O B IL E
Footer
La etiq ueta <footer> nos p erm ite in co rp o ra r un pie de pgina
al co n ten id o creado con jQ u e r y M obile. Podem os especificar, por
ejem p lo , el c o p y rig h t de la pgina web o a p lic a ci n , in c lu ir alguna
im agen refe ren te o p u b licid a d e s, o bien, sim p le m e n te , e stru ctu ra r
una b arra de h e rram ien tas.
<body>
<div d a ta -ro le = "p a g e " d = "in d e x ">
< d iv d a ta -ro le = "h e a d e r">
< h l> E s to es JQ u e ry M ob ile< /h l>
</div>
< d iv d a ta -ro le = "c o n te n t">
< p>M prim era pgina web con JQ M </p>
</div>
<div d a ta -ro le = "fo o te r">
< p > C o p yrigh t 2013: Fernando Luna</p>
</div>
</div>
< /body>
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 avegacin en n u estra W ebA pp. Esta
e tiq u e ta p erm ite definir, en su in terio r, b oto nes co m b inad o s con
texto, ico no o am bos.
Esta etiq u eta suele u b icarse d entro de las e tiq u e tas header o
fo o te r de la W ebA pp, para p o d er te n er la p a n ta lla co rrectam en te
estru ctu ra d a. Sin im p o rta r su u b icaci n , cu a n d o cream o s una
b arra de h e rra m ie n ta s, esta a g ru p a los b oto nes en una so la lnea,
d is trib u y n d o lo s de m anera e q u ita tiv a a lo largo de la pantalla.
El m xim o de b oto nes p e rm itid o s en una so la lnea es cinco .
De te n e r que su p e ra r esta ca n tid a d , de fo rm a a u to m tica los botones
se d is trib u ir n en dos lneas.
www.redusers.com
U S E F tS 3. FUNDAMENTOS DE JQ UERY MOBILE
Veam os un e je m p lo de navigation:
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 solucin p a ra que la s tra n sicio n es funcionen en to d a s la s p latafo rm as. Dado que se b a sa n en
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 pgina definid a com o page con
jQ u e ry M obile o cu a lq u ie r otra pgina rem ota pueda ser vis u a liz a d a
m ed iante un dilogo. Esto genera una ven tan a tipo m odal, que aparece
su sp en d id a por encim a de la pgina d esde donde la invo cam os.
Para re a liz a r esto, sim p le m e n te debem os agregarle un atrib u to
a los h ip e rv in c u lo s cread o s con JQ M .
Veam os a co n tin u a ci n un ejem plo:
Cise Dialog
Las p ginas v is u a liz a d a s con el atrib u to data-rel= dialog crean,
de m anera p re d e te rm in ad a, un botn s u p e rio r que p erm ite cerrar
la pgina m odal. Este tip o de ve n ta n a s g e n e ra lm e n te se u tiliz a para
v is u a liz a r un fo rm u la rio , una ve n ta n a del e stilo A cerca d e y,
tam b in, cie rto s m en sajes de d ilo g o que in te ra c t a n con el usuario.
Si en nu estra W ebApp in clu im o s fo rm u lario s m odales, lo ms com n
es d arle al usuario la p o sib ilid ad de que interacte a travs de los
b otones de o pciones del cuadro de dilogo, con lo cual el botn cerrar
que genera la etiqueta Dialog Page no nos ser til. Podem os ocultarlo
u tiliz a n d o el siguiente atrib u to d entro de la in vo caci n a Dialog Page:
d a ta -c lo s e -b tn = "n o n e "
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 prctico
Para p o d er co n s o lid a r los ejem p lo s hasta aqu repasados,
re a liz a re m o s a co n tin u a ci n un e je rc ic io integrador. Este e je rc ic io
nos m o strar cm o in te g rar las fu n cio n e s de jQ u e ry M obile de m anera
p tim a y sin n ecesidad de llegar a e la b o ra r un d e sa rro llo co m p lejo.
El o b je tiv o es d e s a rro lla r un s itio w eb co rp o ra tivo . Este p resen tar
una em p resa d eterm in a d a , contar su h isto ria y los p ro d u cto s que
www.redusers.com
88 USEFtS 3 . F U N D A M E N T O S D E J Q U E R Y M O B IL E
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
lneas de productos: Frutos rojos org& aacute;nicos, sembrados y cosechados bajo los
principales estándares de calidad, y Frutos ro jo s hidrop& oacute;nicos, que
cumplen con su etiqueta org& aacu te;n ca, pero con la diferencia que estos son semb
rados y desarrollados & iacute;ntegram ente bajo el sistem a de hidroponia.</p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -th e m e = "c " d a ta -p o s itio n = "fix e d ">
</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>
</dv>
P ti? 23:55
Productos
O rg n ico s
Figura 8. Desde
la pgina p ro d u cto s.
html podemos acceder
O O O a las distintas categoras
H is to ria S h o w ro o m C ontado
que esta web ofrece.
<dv d a ta -ro le = "p a g e " d = "o rg a n ic o s " data-the m e = //c " >
< d iv d a ta -ro le = "h e a d e i'"d a ta -th e m e = "c " a lig n = "c e n te r">
< h4 > Frutos org& aacute;nicos</h4>
</div>
< d iv d a ta -ro le = "c o n te n t" data-them e= ,,d// >
www.redusers.com
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 Orgnicos
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
^suJanobeccaiff/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 ercialzanos Haga d ie sobre U categorta de
ou m t e r o
odLctos Orgnicos
C a lo s p r o d u c io s r a t n U ia p c m b lc a to d o e l
ao, ya q u e so n cesarrollados b a p un
m ic r o c lim a e s p e c ia lm e n t e d is e a d o p a r a
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
Atencin 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>
< ttle > G re e n b e rrie s Fa rm ing</title>
c m e ta nam e=//v ie w p o rt// c o n te n t= "w id th = d e vic e -w id th , in itia l-s c a le = l//>
c lin k re l= "s ty le s h e e t"h re f= "http://code.jquery.com/moble/1.3.2/jquery.
m obile-1.3.2.m in.css/#/>
< script src= //http://code.jquery.com /jquery-1.9.1.m n.js"></script>
<scrpt s rc = '/http://code.jquery.com /m oble/1.3.2/jquery.m obile-1.3.2.m in.
js"> < /scrip t>
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
< d iv d a ta -ro le = "h e a d e r"d a ta -th e m e = "c " a lig n = "c e n te r">
<m g src = "m a g e n e s / L o g o 8 0 0 xl5 0 .g f" s ty le = "w id th :8 0 % ;m a x -
w id th :4 0 0 p x "a lt= "G re e n b e rrie s L o g o " lo n gd e sc= "G re en b errie s Farm ing L o g o ">
</dv>
< d iv d a ta -ro le = //content// d a ta -th e m e = "d ">
</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
on*oUvo J t con a c to
fpioanin*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 ^
tT#oonl(nsinigmu 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 Cmo se com pone generalm ente una pgina 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 pgina. Este fra m e w o rk nos
p ro vee de un set de co m p o n en te s o w id g e ts que pod em os u tiliz a r
p ara d iv e rs a s fu n cio n a lid a d e s en esta p latafo rm a.
E n tre los w id g e ts m s p o p u la re s p o d e m o s d e s ta c a r los
s ig u ie n te s : listas, vietas, c a ja s de texto, etiqu etas, bo to n es,
c o n tro l c a le n d a r io y slid er. T a m b i n e x is te n o tro s c o m p o n e n te s
que nos p e rm ite n d a rle v id a y fu n c io n a lid a d a u n a p g in a y que,
a d em s, h a ce n q ue esta lu z ca p o r ig u a l en to d as las p la ta fo rm a s
d o n d e es v is u a liz a d a .
D ep e n d ien d o de la fu n ci n o e stru c tu ra que debam os a rm a r
en n u e stra web m vil, pod rem os sacar p ro ve ch o de cad a uno de los
co m p o n en tes de JQ M para d e s a rro lla r m ens fu n cio n ale s, estab lecer
filtro s au to m tico s en p a n ta lla s con m uchos datos y a p ro v e c h a r las
d iv e rs a s va ria n te s que un m ism o co m p o n en te nos ofrece.
A co ntinuaci n, listarem os los p rin cip a le s co m p o nentes que
podem os u tiliz a r en jQ u e ry M obile y verem o s un e jem p lo de cada uno.
Navigation Bar
En el Captulo 3, repasam o s el co n ce p to b sico del uso del
co m p o n en te NavBar. V im os cm o cre a r b otones, ag reg arles un icono
o un texto, y c m o e s tru c tu ra r la b arra de h e rra m ie n ta s en el extrem o
s u p e rio r o in fe rio r de la p a n ta lla . Veam os, a co n tin u a ci n , qu otras
o p cion es nos o frece este m a ra villo so com p onente.
Botn activo
En el e je rc ic io re a liz a d o de G reen & B erries Farm ing en el cap tu lo
anterior, estab le cim o s que, cad a vez que ingresam o s a u n a seccin
d el s itio w eb m v il, el b ot n de d ich a secci n quede in h a b ilita d o :
Disabled. Esto p erm ite e v ita r que el usuario pulse n u e vam e n te el botn
y que la pgina se refresque.
En la m a y o ra de las pginas web de hoy, el re fre s c o de pgina no
es un p ro b lem a cuand o naveg am o s p or Wi-Fi o a tra v s de una LAN,
pero, cu an d o el u su a rio u tiliz a su d isp o s itiv o m vil m e d ian te el pack
www.redusers.com
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.MHfcti 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 <tc 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 cfitod <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 iHni .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 ra JQ M , de d arle un form ato
am igable, el cual har que una sim p le lista se ve a com o un listad o de
item s p ro fesio n al.
<ul data-role=//lstview//>
c l i x a h r e f= "# "> V is u a l B a s ic c / a x / l>
< l i x a h r e f= "# "> V is u a l C+ +c/a> c/li>
d i x a h re f= //# //> V isu a l C # c / a x / li>
c l i x a h r e f = " # " > P H P < / a x / l>
c l i x a h r e f= "# "> J a v a S c rp t< / a x / li>
c l i x a h r e f = " # " > H T M L 5 c / a x / li>
c/ul>
c/div>
FO RM ATO
Bordes redondeados
A esta lista le p od em os a p lic a r un borde
redo n dead o para que tenga e stilo y se despegue
del resto del co n te n id o de la p gina, en caso de que agreguem os
ms texto e im genes. Sim p le m e n te , debem os agregar el atrib u to
data-inset= true .
www.redusers.com
110 USEFtS .
4 C O M P O N E N T E S D E J Q U E R Y M O B IL E
Lista numerada
Los tem s que co m p o n en un Listview pueden ser n u m e ra d o s de
fo rm a co n s e cu tiva . Para e llo , d eb em os m o d ificar la a p e rtu ra de una
lista, ca m b ian d o su v a lo r o rig in al <ul data-role...> por col data-role...>.
Too T K n m * T a Ton I f t m * |
IC**
Vrt uaf C I C
Y m tC f
MTMi
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 ecfica que p o d em o s d rse la no so tro s com o p rog ram ad ores.
Para e llo , debem os u tiliz a r <data-role= listd ivid e r > en la creaci n
de la lista y esp e cificar el tip o de ag ru p am ie n to que vam os a darle.
</uI>
www.redusers.com
112 E S 3 Z 3 4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E
Autodividers
Si n ecesitam o s g e n erar un L istV ie w con d iv is i n a u to m tica del
co n te n id o p ara lis ta r un g lo sario tcn ico o rd en ad o a lfa b tica m e n te y
d iv id id o p or letra, por ejem p lo , pod em os u tiliza r, d en tro de ListView ,
el a trib u to <data-autodividers= tru e >.
< 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 Captulo 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 in son parte de jQ u e ry M obile. M od ificado s
s ig n ifica tiva m e n te si los co m p aram o s con un b ot n estn d ar creado
con HTML, s irv e n p ara u n s in fn de situ a cio n e s d en tro de una
W ebApp. El w id g e t Button, d entro de JQ M , se puede u tiliz a r de dos
fo rm as d ife re n te s. La p rim e ra es in vo can d o una U RL d eterm in ad a
o u n a pgina w eb a tra v s de su link:
Deshabilitar botn
M ediante la clase ui-disabled, p o d em o s e s p e cifica r que un w id g et
Bu tto n ap arezca d e sh a b ilita d o p or defecto. Luego pod em os h a b ilita rlo
a tra v s de una fu n ci n o even to creado en Ja v a S c rip t. Veam os un
ejem plo:
< a h r e f = " m u r L h t m l " d a t a - r o l e = " b u t t o n " c la s s = " u i - d s a b l e d " > M lin k < / a >
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 tamao
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 ms
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 BOTN
d a ta -m in i= t r u e ,,f m in im iz a r el tam ao estnd ar
que trae p or d efecto. Veam os cm o hacerlo
en el sig u ien te cdigo:
<a h re f= //m iu rl.h tm r/ d a ta -ro le = "b u tto n " d a ta -m in i= "tru e "> M i link</a>
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
ftnvn m m m u i r f n
Figura 5. Esta
pgina nos muestra
el widget B u tto n
M o b d f W ck en su formato
estndar, 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 sern e n via d o s p or e-mail o gu ard ad o s
en una base de datos. Si co m b in a m o s JQ M con un Form, d eb em os
tener en cu en ta que, al cre a r el input type= button , este asu m ir la
e sttica de los b oto nes de jQ u e r y M obile.
Si deseam os e v ita r esto y v is u a liz a r un o b jeto b u tto n tal com o se
ve o rig in a lm e n te en H TM L, sim p le m e n te d eb em os a g reg ar el atrib u to
d a ta -ro le = n o n e en la creacin.
Agregar un icono
Al igual que el w id g et N avig a tio n Bar, Button so po rta la
v is u a liz a c i n de ico n o s en su interior. Esto se re a liz a agregando
el atrib u to data-icon cu an d o cream o s el botn. Veam os un ejem plo:
www.redusers.com
118 USEFtS 4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E
<a h re f= "fa v o rito s .h tm r d a ta -ro le = "b u tto n " d a ta -ico n = "sta r"> F a vo rito s< /a >
Por d efecto, el icono Star, in teg ran te del set de ico no s que vien e
con la lib re ra JQ M , se agregar en el extrem o iz q u ie rd o del botn.
A su ve z , p o d em o s co m b in a r y d is m in u ir el tam a o del b ot n sin que
este p ierd a su icono, co m b in a n d o am bos a trib u to s en la creaci n .
<a h re f= //favo ritos.htm ly/ d a ta -ro le = "b u tto n " d a ta -ic o n = "s ta r" da ta -
m in i= "tru e "> F a v o rito s < / a >
Botones compactos
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 stticam e n te el botn te n d r un
e stilo in n e ce sa ria m en te exagerado. Esto podem os
CO M PA CTA R E L BOTN
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 aptulo O*
jq u e r r M o M t B a tlo n s
B o lo n f r i a n d j r
Enmr
Boion ccr) ic o
O F a v o n io
B o ta n c on i c o m r u n w a d o
F ig u ra 6. Aqu podemos
observar el botn normal
utilizado en formularios, el
botn con icono y el botn
+zd C2D o 1
con icono com pacto.
< a h re f= "fa v o rito s .h tm l" d a ta -ro le = "b u tto n " d a ta -ic o n = "s ta r" da ta -
co n p o s= "righ t"> Fa vorto s< /a >
<a h r e f= "p rin c ip a l.h tm r d a ta -ro le = "b u tto n " d a ta -c o n = "h o m e " data-
conpos=//le ft//> P rn 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
Agrupacin de botones
Tam b in es p o sib le cre a r un set de b oto nes ag ru p ad o s m ediante
un co n te n e d o r que nos p erm ita, tanto v e rtic a l com o h o riz o n ta lm e n te ,
v is u a liz a r un c o n ju n to de b oto nes que co n fo rm a n un m ism o objeto.
Veam os un ejem plo:
</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 clsicos utilizados en el viejo HTML.
A continuacin, repasarem os algunas variantes ms de este com ponente
y cm o nos ayu d ar en el desarrollo de nuestras soluciones.
www.redusers.com
122 l/SERSl 4 . C O M P O N E N T E S D E J Q U E R Y M O B IL E
Vista clsica
Al text in p u t clsico , que se crea sim p le m e n te con la sen tencia
cin p u t type= te x t >, p od em os o to rg arle un v a lo r agregado, por
ejem p lo , id en tifica n d o con un Label el tip o de dato que deseam os
ingresar. Esto lo hacem os de la s ig u ie n te m anera:
Field Container
Tam bin, si deseam os re su m ir el Label m s el cam po en una sola
ln ea en pantalla, lo podem os re aliz ar u tiliz a n d o un com ponente
field container.
F IE LD C O N T A IN E R
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 bin p o d em o s cre a r cam p o s del tip o c o n t r a s e a , in d ica n d o
en el atrib u to T y p e = p a s s w o rd .
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 ar activa el form ato de teclado para ingresar una
d ireccin de correo electrnico, identificando la tecla @ (arroba) en el
teclado com n del d isp o sitivo m vil. Funciona en tablets y sm artphones.
*4
<> M aM aW *
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'* *
I9M lto Htb
[ K'Krt*Hrtv*n*1,yrWv-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 telfon o en el cam po. Reco rdem os que la a c tiv a c i n del
teclad o n u m rico slo fu n cio n a en sm artp h o n e s en m odo v e rtic a l y, a
d ife re n cia de Number, h ab ilita los caracte re s * y #.
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/ao. Debem os tener en cuenta que este
in p u t typ e se v is u a liz a de form a d istin ta en los d ife re n te s m otores
de naveg ad o res w eb; p or lo tanto, en d e te rm in a d a s o casio n es este
tip o de cam po fu n c io n a r slo com o un TextBox ms.
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 grfica.
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 ihrkbo
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 da, 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 Captulo 3, que
a d ap tare m o s lig eram en te para que pueda v is u a liz a rs e de m anera
d ife re n cia d a en tab lets. D escarguem os, e n to nces, el c d ig o de
e jem p lo de este e je rc ic io desde p re m iu m .re d u se rs.c o m para
p o d er m o d ificar su estru ctu ra .
LA E X P E R IE N C IA DE
Adaptacin a las
NAVEGACIN 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
</dv>
<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
riflurUO*
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>
<dv d a ta -ro le = "p a g e " id = "p ro d u c to s" data-the m e = //d//>
< dv d a ta -ro le = "p a n e l" id = "p a n e lM e n u " d a ta -d is p la y = "re v e a l" data-
positon=,/le f t" d a ta -th e m e = "a ">
<dv id=//titu lo M e n u " a lig n = "c e n te r">
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>
</dv>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
< h4 > Aten ci& oacute;n al pú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>
</dv>
</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 in verifica r c m o n u estra app se c o m p o rta en d ife ren tes platafo rm as m viles
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
///////////////
\\\\\\\\\\\\\\\
Interaccin con
el hardware de
comunicaciones
Este c a p itu lo n o s tra s la d a r al te rre n o de las c o m u n ic a c io n e s
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
c u a n d o el d is p o s itiv o n o p o se e a lg u n a c a ra c te rs tic a .
La Web y el hardware
de los dispositivos mviles
Con el a va n ce te cn o l g ico de las co m u n ica cio n e s y la m asificaci n
a n iv e l m u n d ia l de las co m p u ta d o ra s, in te rne t, los te l fo n o s m vile s
y las tab lets, entre o tros d isp o sitiv o s, h o y co n tam o s con un
s in n m e ro de o p cio n es para co m u n ica rn o s co n n u e stro s pares.
Y lo m e jo r de todo es que, g racias a la in teg raci n de los se rv icio s
de datos en los telfono s m vile s y tablets, pod em os h acer uso de
casi todas estas fo rm as de co m u n ica ci n desde n uestro d is p o s itiv o
m v il. T am p o co pod em os d e ja r de re co n o cer que hubo una fuerte
p en etraci n de la red in te rn e t en los sm artp h o n e s y tablets, lo cual
h iz o e v o lu c io n a r fa vo ra b le m e n te los e st n d are s web, p ara que estos
ltim o s se in te g raran con las d iv e rs a s o p cio n e s de co m u n ica ci n con
las que co n tam o s hoy.
C uand o h ab lam os de sistem as de comunicacin, debem os
s e p a ra r el co n cep to en tres m e to d o lo g as d istin tas:
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
Hipervnculos en jQ u e ry Mobile
En los p rim ero s cap tu lo s de esta obra cono cim o s la etiq ueta lin k ,
la cual nos perm ite estab lecer un h ip e rv n c u lo hacia otra pgina web
o e n v ia r un co rreo electrn ico. En los navegadores web m vile s se
extendi esta fu n cio n alid ad , a l agregar la capacidad de in vo ca r a
eventos de llam ad a telefnica, SMS, Skype, entre otros. El uso de lin k
se rea liz a a travs del tag <a h re f= u r l > . En jQ u e ry M obile podem os
u tiliz a rlo de d iversas form as, com o, p or ejem plo, a travs de un botn:
<a h re f= "w w w .m is itio .c o m "d a ta -ro le = "b u tto n " d = "m B o to n "> Ir al sitio web</a>
Tam bin podem os utilizarlo con un sim ple texto que contenga una URL:
<a h r e f = " w w w .m isitio .co m " id= //m L in k //> lr al sitio web</a>
O a tra v s d e l u so de listas:
U R IS C H E M E S
hipervnculo a una funcin e s p e c ific a dentro d e un siste m a o p era tivo o h acia alguna a p lica ci n en particular.
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'/>Llmame</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
Formato numrico
El nm ero de te l fo n o que agregam os en el h ip e rv n c u lo puede
esta r escrito de m anera estndar, si es que la llam ad a a re a liz a r se
en cu en tra en una pgina que solo v is u a liz a n u su ario s de la m ism a
regin y lo calidad .
Para las pginas que son u tiliz a d a s a n iv e l in te rn a c io n a l, se debe
e sta b le ce r el c d ig o de pas seg u id o del cdigo de rea. Esto p erm itir
re a liz a r la llam a d a d esde un pas o lo ca lid a d d ife re n te de d on d e se
e n cu en tre ub icad o fsicam e n te el usuario.
K . 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 nm ero telef n ico utilizando el n a v e g a d o r w e b Safari
para iPhone form atean auto m tica m en te el n m ero p a ra que p o d a m o s llam ar co n solo presionar
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 duea
de este p ro d ucto instaur , en el m ercad o web, los d en o m in ad o s
S k y p e B u t t o n s . Esto s b oto nes se p o d an in te g ra r en p ginas web
p ara que el u su ario que tu vie se Sk yp e en su co m p u tad o ra p u d iera
co n ta cta r a una em presa que b rin d a a te n ci n a tra v s de esta v a
con solo p re s io n a r este botn.
www.redusers.com
150 USEFtS 5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S
A l p re s io n a r el b ot n donde figure un n o m b r e d e u s u a r io S k y p e
v lid o , se e je cu ta r la p lata fo rm a de m e n sa je ra y se in icia r la
co m u n ica ci n con el d e s tin a ta rio esp ecificad o usuariodeskype.
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 pari
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 Facetme</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>
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>
Limitacin de BBM
B la c k B e rry M essenger p erm ite e stab le ce r un a co m u n ica c i n con
o tro PIN solo cu an d o am bos in te rlo cu to re s se a ce p taro n p re viam e n te
con los u su a rio s. Por ello, cu an d o in vo q u e m o s un chat hacia un PIN
de B la c k B e rry que no figura com o co ntacto, se a b rir d irectam en te
la v e n ta n a de in v ita c i n de BBM.
APIS DE COMUNICACION
de servicio w e b incluirn U RI s c h e m e s dentro de la funcionalidad m obile. E s bueno re c o rre r los b u sca d o res
www.redusers.com
156 l/SERSl 5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S
Comunicacin a travs
de redes sociales
En base al im p a cto de las redes so ciales y al uso co tid ia n o que
todos les dam os, sum ad o a que casi to d as las em p resas co n sig u iero n
nuevos can a le s de co m u n ica ci n d ire cta con sus clie n te s a tra v s de
estas, las p lata fo rm a s m s p o p u la re s lle va ro n su p ro p io U RI schem e
a los naveg ad o res de e s crito rio y m viles.
<a href= "tw itter://u ser?screen _nam e= m oblepadaw an " d a ta -ro le = ,/button//
d = "b tn T w itte r//>@ m oblepadaw an en Tw tter< /a>
T a m b i n co n ta m o s co n la p o s ib ilid a d de in ic ia r un m e n sa je con
un texto p re d e fin id o , de la m ism a m a n e ra qu e lo h acem o s con un
e-m ail o SMS:
<a
Kef=//tw itte r:/ /p o s t? m e s sa g e = G e n ia l% 2 0 e l% 2 0 s tio % 2 0 V id a % 2 0 M o b ile % 2 0
http://w w w .vida m o bile .com .ai7 .% 2 0 P o w e re d% 2 0 by% 2 0 & # 6 4 m ob ilep adaw a n "
d a ta -ro le = "b u tto n " d = //b tn P o stT w itte r//> P o stea r U R L e nTw itte r< /a>
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 tecnologa,
el d is p o s itiv o m vil d e te rm in a r si el eq u ip o tiene o no in stalad o
F a c e b o o k M e s s e n g e r . Si so lo tie n e la app de Facebook, se in ic ia r el
ch at a tra v s de esta; si existe Faceb oo k M essenger en el d isp o sitivo ,
se a b rir y se in ic ia r la co m u n ica ci n p or chat desde esta p lata fo rm a .
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 vce -w id th , n ta l-s c a le = l">
<lnl< re l= "s tyle s h e e t" h re f= //http;//code.jquery.com/mobile/1.3.2/jquery.
js //x / s c r ip t >
</head>
<body>
< dv d a ta -ro le = "p a g e " d=,/lstas,/ d a ta -th e m e = "d ">
<div d a ta -ro le = /,header// d a ta -th e m e = "c ">
< h4 > C ap& acute;tulo 05</h4>
</dv>
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
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-VoMcv'j| ^ ^
C c m * n t a i o i * n 140
On*'K>fr<js(on<e<iiiupo<i <*!**
o*comconensepodwwsretlalr un
>o t i* c n m n m x f c h a i ' o 9 App
t W M i t a en fcsF o silivo fnvil
S o o n o s * s ! 3 i x b i - c a r f m e n s i j e . p re i(C *n *>
*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 ro s.re p la c e (" " , " % 2 0 " ) ;
lo caton .href= "tw tter://post?m essage= " + msj;
return;
}
}
www.redusers.com
164 USEFtS 5 . IN T E R A C C I N C O N E L H A R D W A R E D E C O M U N IC A C IO N E S
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S
F ig u ra 11. Una vez escrito el mensaje, solo nos resta presionar el botn
E n v i a r para finalizar su publicacin desde la app nativa de Twitter.
Comportamientos de los
eventos segn el dispositivo
Com o hem os v is to hasta aho ra, el uso de U RI schem es nos p erm ite
e je cu ta r d ive rsa s m aneras de co m u n ica c i n desde los d isp o s itiv o s
m vile s. Pero vale a cla ra r n u e vam en te que, d ep e n d ie n d o del
d is p o s itiv o m v il, algunas de estas tareas no se podrn lle v a r
a cabo de la m anera habitual.
Veam os, a co n tin u a ci n , cm o responde cada uno de los
d isp o s itiv o s m vile s a los even to s a tra v s de U RI schem es.
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 nmero,
guardarlo com o contacto
o enviar un mensaje
va 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 pginas 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
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 rm 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 ndocrinologa< /title>
<m eta n a m e = "v ie w p o rt" content= /,w id th = d e vice-w id th / in itia l-s c a le = l">
<lnl< re l= "s ty le s h e e t" h re f= //http://code.jquery.com/m obile/1.3.2/jquery.
m o b ile -l.3 -2 .m in .c s s " />
< script src= /,h ttp ://co d e .jq u e ry.co m /jq u e ry-1 .9 .1 .m in .js"x/scrip t>
< script s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js " x / s c r ip t >
</head>
<body>
dv>
<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 mvil</a>
<a h ref= "sm s:+ 5 4 9 1 1 8 7 6 5 4 3 2 1 " d a ta -ro le = "b u tto n " 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 mvil</a>
</div>
</div>
</body>
</html>
www.redusers.com
U S E R S 5. INTERACCIN 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 ndocrinologa< /title>
c m e ta nam e=//v ie w p o rt// content=//w id th = d e vice -w id th / in itia l-s c a le = l//>
c lin k re l= "style s h e e ty' h re f= //http://code.jquery.com/m oble/1.3.2/jquery.
m obile -1 .3 .2 .m in.css" />
< script src= /' http://code.jquery.com /jquery-1.9.1.m n.js/'>< /script>
< script src= //http://code.jquery.com /m oble/1.3.2/jquery.m oble-1.3.2.m n.
js"> < /scnpt>
</head>
<body>
<div d a ta -ro le = "p a g e " id = "c o n te n d o " d a ta -th e m e = "c ">
< d iv d a ta -ro le = //header// >
<p a lig n = //center/y>
< strong> D r. Ju l& a a cu te ;n Conte - E ndocrn & oacu te;logo nfantil</
strong>
</p>
</div>
<div d ata-ro le rr^co nten t77id = /ycontenido/7>
< d iv id= //im agen// a lign = /yce n te r/,x i m g src= y/im agenes/drjuly.png/y/></
www.redusers.com
D E S A R R O L 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>
</dv>
</body>
</html>
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
programacin
A lo la rg o de este c a p tu lo re p a sa re m o s el p ro c e s o
d e c re a c i n d e W e b A p p s d in m ic a s a p ro v e c h a n d o
el p o te n c ia l q u e n os b rin d a n los le n g u a je s de p ro g ra m a c i n
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
Evolucin
A lo largo de la h isto ria de la inform tica, los lenguajes de
p rog ram acin ju g aro n un papel im p ortante y fueron adaptndose,
d u rante las n u evas generaciones, a los avances en esttica,
al fu n cio n am ien to de los sistem as o p erativo s y a la integracin
de nuevos servicio s, com o lo fue el n acim ien to de la WWW.
Los p rim ero s lenguajes de p rog ram acin u tiliz ab a n ed ito res bsicos
(generalm ente, los m ism os ed ito res de texto), y luego para desplegar
un p rogram a se re cu rra a co m p ilad o res especficos para cada sistem a
o perativo . El m und o evo lu cio n , y con la llegada de W in d o w s se
integraron d iversas p latafo rm as que brind aban un ID E com pleto
que reco noca errores en la escritu ra de sentencias, fu n cio n es y
d eclaraci n de variab les. Estos IDE, adem s, p erm itan el desarrollo
de las in terfaces visu a le s de u n a m anera m ucho ms am igable.
Luego, con la lleg ad a de la Web, los ID E ms p o p u lare s debieron
read ap tarse para so p o rta r m ltip le s len g u ajes de p ro g ram acin y, a
su vez, poder in te g ra rlo s en una n ica so lu ci n . Esto es lo que o cu rri
con los e d ito re s de cdigo com o Eclipse, Netbeans, D ream w eaver,
que daban so po rte para d e sa rro llo de so lu cio n e s b asad as en Web.
Estos e d ito re s d eb ieron ad ap tarse, de fo rm a n a tiv a o a tra v s de
p lu g in s, p ara d e te c ta r y so p o rta r cdigo HTML, CSS, JavaScript,
PHP, C#, V isual Basic, VBScript, Ajax, CGI y otros tantos lenguajes
m s que ho y se u tiliz a n a d ia rio en el d e sa rro llo web.
La importancia de lo dinmico
En m u ch o s caso s, la Web p ro m e d io fue o rie n ta d a a lo c o rp o ra tiv o ;
p o r lo ta n to , los ca m b io s q ue en esta o c u rrie ro n fu e ro n m n im o s
y, h asta en m u c h o s caso s, n u lo s. Pero co n el n a c im ie n to , hace
casi una d cad a, de la lla m a d a W e b 2.0, de los b lo g s y de la
in te g ra c i n de c o n te n id o m u ltim e d ia en los s itio s , m u ch as p g in as
w eb, h a s ta in c lu s o las m s s e n c illa s , d e b ie ro n m u d a r su co m o d id a d
e s t tic a h a cia la g e n e ra ci n de c o n te n id o d in m ic o , lo que p erm ite
a s e g u ra r que los u s u a rio s v o lv e r n re ite ra d a s ve ce s en b u sc a de
n u e v o s co n te n id o s .
T am b in las redes so ciale s se in te g ra ro n a las w eb s p a rticu la re s.
De esta m anera, se generan co n te n id o s co m p a rtid o s, tanto en una
www.redusers.com
D E S A R R O L 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 acin de uso general que
p ro p o rcio n a la co d ificaci n de so lu cio n e s del lado del servid o r.
Fue cread o en 1995 p or Rasmus L e r d o r f p ara uso p ersonal. Se
d ise co n el fin de p ro v e e r co n te n id o web d in m ico , y fue p ensado
desde sus in icio s para p o d er v is u a liz a r la in fo rm a c i n s o lic ita d a al
s e rv id o r d entro del co n te n id o H T M L sin n ecesidad de te n e r que llam ar
a un a rc h iv o o lib re ra externo que procese los datos so licitad o s.
PR IM ER AS V E R S IO N E S DE PHP
Dado que P H P n aci de un d esarro llo p ersonalizado, las p rim eras ve rs io n e s de e s te len guaje ace p ta b a n
tanto las ex ten sio n e s de archivo term in a d a s en .P H P c o m o las ex ten sio n es d e archivo .P H P 2 o .PHP3,
donde originalm ente se indicaba co n qu versi n del lenguaje h ab a sid o desarro llad a. A partir de la
ve rsi n 4 .0 , e s to q u ed o bsoleto.
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
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|WHTflvru|| I n lM lug l a f tin a y a a m
T H I S I i A D E V I I O W U N T W f / I I W O O N O T U S f I T !N M O O U C T I O T
I o m o ro I n t a n w t io a a b o u i tito n c * lo a lu i- r y o n i a n c h w k o u l Ih o v w r p c t g i e O x ir n ie n ia t t o n o r y o u t a n
i a d i r * f u l l U n o l t u n g o s n n w h W S fil c o n u i i w r i i n r i m l a rc h iv e .
U s c i G ro u p E v n t s
PHP5.6.0beta2 Released U M a v lO U
T h * M P c jiv t o p m o n t t e a m a n n r i u K V a u ii m m H l a t e d w iila W ly o l P HP S A 0 lM la 2 . A s w v e r t v r e d (h e le a m e
S p o d a l Ih a n b
( i c e r e w U l i b r l a l , I I m U m w l i A l f l H n t u i U a h f e l / a m ijjO .m ly M I u s m u l O l P a i e r n c o u id e il l o u - j
11*,Hull*_IKli,>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 cdigo H T M L que co m p o n e una pgina.
A su ve z , el m ism o lenguaje puede generar cdigo H TM L d in m ico ,
d efin i n d o lo entre sus sen tencias, para v is u a liz a r los resu ltad o s
so lic ita d o s con la m en o r co m p le jid a d posible.
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 ra d e los ed ito res de c d ig o gratuitos, c o m o N o te p a d + + , E c lip s e o N e tB e a n s , p o see n re co
nocim iento d e sintaxis P H P d e m a n era nativa o a tra v s d e un plugin de f cil instalacin en la plataform a.
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>
Declaracin de variables
A d ife re n c ia de o tro s len g u ajes, P H P p erm ite la d eclara ci n
de va ria b le s de m anera lib re, s in un tipo esp ecfico . Por lo tanto,
es p osib le que u n a m ism a va ria b le pueda co n te n e r tanto nm ero s
com o letras o valo res booleanos. Al d e fin ir una va ria b le , se debe
a n te p o n e r el sm b o lo ($) en su nom bre.
Veam os un e je m p lo de esto:
<?
$intN um ero = 3;
$ strA lfa = " E s to es un te x to ";
echo SintN um ero;
echo "< b r/ > ";
echo $ strA lfa ;
?>
www.redusers.com
182 USEFtS 6. L E N G U A J E S D E P R O G R A M A C I N
Sentencia If
La se n te n c ia if p e rm ite d e fin ir que una c o n d ic i n se c u m p la y,
de se r a s, se e je cu te d e te rm in a d a p o rc i n de c d igo . V eam o s un
e je m p lo de ello:
<?
If ($ ntN um e ro = 3 ) {
Echo " E s te es el nm ero tre s/';
}
?>
If - Else
La s e n te n c ia If Else p e rm ite d efin ir, a tra v s de if, la e je c u c i n
de u n a p o rc i n de c d ig o ante u n a d e te rm in a d a c o n d ic i n y, a
tra v s de else, o tra p o rc i n de c d ig o , si la c o n d ic i n d e fin id a en if
no se cu m p le .
<?
if ($ ntN um e ro = = 3 ) {
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S
Do - While
La sen tencia do p erm ite e je cu ta r una d e term in ad a acci n hasta
que w h ile cu m p la co n una co n d ic i n d eterm in ad a. M ientras w h ile
no cu m p la la co n d ic i n , do seguir e je cu tan d o la p o rci n de cdigo
que tien e d efin id a. En esta exp resi n, la v a lid a c i n que fin a liz a la
e je cu ci n de do se rea liza al final.
<?
$j = 0;
Do {
$j ++;
echo " E l va lor de la variable $j es m enor a m il/ ';
echo " < b r > " ;
} W h ile ($ j < 9 9 9 );
?>
'. I W V
F ig u ra 4 . El bucle Do - W h il e en accin,
escribiendo cada recorrido realizado en la pgina HTML.
www.redusers.com
184 USEFtS 6. L E N G U A J E S D E P R O G R A M A C I N
While
Esta sen tencia genera un b ucle que e jecu ta d eterm in a d o cdigo
m ie n tra s una co n d ic i n esp ecfica no se cu m p la. Al m om ento en
que se cum ple, el b ucle finaliza.
<?
$f = 0;
While ($f <= 100) {
Echo $f++;
}
echo "L a variable $j alcanz el valor Cien.";
?>
For
La sen ten cia fo r trabaja, igual que en el lenguaje C, e va lu a n d o tres
c o n d icio n e s. La p rim e ra co n d ic i n se e je c u ta al in ic io del b ucle de
m an era in c o n d ic io n a l. C u an d o v u e lv e a e m p e zar el ciclo , se eval a
la segun d a co n d ici n , la cu a l d e v u e lv e un v a lo r T R U E para que el ciclo
co n tin e , o, de lo co n tra rio , el b ucle finalizar.
La te rce ra co n d ic i n es e va lu a d a cada v e z que fin a liz a la eje cu ci n
de cad a b ucle co n te n id o en for. Veam os un e jem p lo de esta sentencia:
<?
For ($f = 0; Sf <= 100; $f++) <
Echo $f;
)
?>
Funciones en PHP
A l igual que en otros lenguajes, PH P p erm ite e sta b le ce r fu ncio nes
p ara que p ued an ser u tiliz a d a s en ms de u n a secci n de la pgina
www.redusers.com
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 pgin a web actual para, de esta m anera, u tiliz a r d icho
co n te n id o y as p o d e r re a liz a r d eterm in ad as operacio nes.
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 pgina si
el a rc h iv o que se desea in c lu ir no existe fsica m e n te en la ruta
esp ecificad a. Include solo v is u a liz a un e rro r en la ln e a que procesa
la in c lu s i n del a rch ivo , pero p erm ite seguir e je cu ta n d o el resto
del cdigo PH P que se e n cu e n tra en la pgina.
La se n te n cia de require es la siguiente:
Base de datos
En la creacin de sitios web dinm icos, las bases de datos juegan
un papel fundam ental, alm acenando gran parte del contenido que suele
m ostrarse en estos sitios. A continuacin, haremos una breve introduccin
a M y S Q L , un sistem a de base de datos relacional que es el fiel compaero
de PHP en casi todos los sitios donde este lenguaje es protagonista.
www.redusers.com
188 l/SERSl 6. L E N G U A J E S D E P R O G R A M A C I N
M ySQL
M ySQ L es un sistem a de g esti n de bases de datos re lacio n a l
d e sa rro lla d o p or la em p resa MySQL AB, que d esde en ero de 2008
es una s u b s id ia ria de Sun Microsystem s, la cual pertenece,
a su ve z , a O racle C orporation desde p rin c ip io s de 2010.
El d e sa rro llo de M ySQ L est b asado en u n a lic e n c ia GNU GPL,
excepto para las em p resas que re q u ie ra n in c o rp o ra r esta base
de datos para d is trib u irla co n p ro d u cto s cerrad o s o lice n ciad o s,
para las cu ales s se re q u iere el pago de una lice n cia p or su uso.
Entre los sitio s w eb ms p o p u la re s que
u tiliz a n este m o to r de base de datos d estacam os
M YSQL P O S E E SO P O R T E Google, Facebook, Wikipedia. Twitter y
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 in u tiliz a com o m o to r de datos la base
S IS T E M A S OPERATIVO S M ySQ L para el a lm a ce n a m ie n to del co n ten id o
de cada blog que se genere con esta tecnologa.
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 ms p o p u lares, entre los
cu ales pod em os e n co n tra r a Linux, BSD, OS-X,
y W in dow s (desd e su v e rs i n 95 en adelante).
Po r lo tanto, cu a lq u iera sea el sistem a o p e ra tivo
que u tilice m o s en el se rv id o r de n u e stra pgina web, este d isp o n d r
de u n a in sta laci n de este sistem a de base de datos.
Com o b ien d ijim o s, M ySQ L se co m p le m e n ta con PH P casi de
m anera tra n sp a re n te, aun q u e la base de datos se in icia a trav s de un
s e rv icio p or ln e a de co m an d o s. Ig u alm en te, existen so lu c io n e s com o
PHPMyADMIN, que nos p erm ite m a n ip u la r todas las tareas hab itu ales
en una base de datos, de m anera grfica. La m a y o ra de los se rv id o re s
w eb que p restan so po rte p ara PH P y M ySQ L tie n e n in stala d o , por
d efecto , el gestor de base de datos PH PM yA D M IN .
P H P perm ite no so lo crea r, m e d ian te la sen ten cia echo, sintaxis propia de H TM L, sino que tam bin
de la intervencin d e C S S .
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S
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
ttU 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 ms tablas, p rim e ro se debe in vo ca r la
ap ertu ra de la base de datos y luego se re a liz a la le ctu ra de las tab las
co rresp o n d ie n tes.
Para p o d er a v a n z a r con los e je rc ic io s co rres p o n d ie n te s a
este ca p tu lo , d e sarro lla re m o s a co n tin u a ci n un a rc h iv o .P H P que
d isp o n d r de las fu n cio n es que p re cisem o s p ara co n e cta rn o s a la base
de datos y re a liz a r las o p e ra cio n e s n ecesarias sobre sus tablas.
Lo que harem os ah o ra es cre a r un a rch ivo n u evo al que llam arem o s
c n .p h p . N otem os que, a d ife re n cia de lo v is to en ca p tu lo s anterio res,
el tip o de a rc h iv o que crearem o s a co n tin u a ci n no es un H TM L, sino
un a rc h iv o PH P puro, que co n te n d r todas las fu n cio n es y v a ria b le s
que necesitem os.
Ya creado el a rc h iv o , lo p rim ero que debem os h a ce r es definir,
en l, la e s tru c tu ra que nos p erm ite e scrib ir cdigo PHP. Por ello,
e scrib im o s la sig u ien te sentencia:
<?
?>
www.redusers.com
196 USEF*S\ 6. L E N G U A J E S D E P R O G R A M A C I N
Funciones mysql_connect()
y myql_select_db()
Por el m o m ento , u tiliz a re m o s estas v a ria b le s . La p rim e ra de
e lla s c o n tie n e el n o m b re del s e rv id o r d o n d e est a lo ja d a la base
de d ato s M ySQ L. C o m o PH P es un c d ig o que se e je c u ta en el
se rv id o r, d eb em o s d e fin ir localhost com o v a lo r p o r d e fe cto . La
se g u n d a v a ria b le c o n tie n e el n o m b re de u su a rio ; la te rce ra , la
c o n tra s e a u tiliz a d a para M ySQ L; la cu a rta , el n o m b re de la tab la
a la cu a l q u ere m o s acced er; la q u in ta , el n o m b re de la base de
d ato s a la que d e se a m o s co n e c ta rn o s ; y la ltim a est v a c a , pero
ser la que c o n te n d r la c o n s u lta SQ L que re c u p e ra r los d ato s que
d ese e m o s v is u a liz a r.
Seguido a la creacin de variables, crearem os la conexin a la base de
datos y la lectura de la tabla Sucursales. Este cdigo estar a continuacin
de la declaracin de variables realizada. Vemoslo:
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 in 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
Visualizacin de datos
Ya cream o s el cdigo del lado d e l s e rv id o r que nos p erm ite acced er
a la base de datos y c o n s u lta r su co n te n id o . Com o este lo realiz am o s
sobre un a rch ivo co n ex tensi n PHP, al ser un lenguaje de servid o r,
si a lg u ie n conoce este a rc h iv o y lo llam a de m an era in d e p e n d ie n te a
tra v s de la U R L de un n a ve g ad o r w eb, no podr v is u a liz a r el cdigo
u tiliz a d o , dado que este se e je cu ta en el s e rv id o r y d e v u e lv e una
pgin a en fo rm ato H TM L, que es lo que recibe el n a ve g ad o r web.
LIM ITA R LO S R EG IS TR O S O B TE N ID O S
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 vce -w d th , in itia l-s c a le = l//>
</head>
<body>
<?
//V isu a liza r resultados en H T M L
requ ire 'en.php';
echo "< ta b le > \ n ";
w h ile ($ lin e = m ys q L fe tc h .a rra y S re s u lt, M Y S Q L _ A S S O C )) {
echo "\ t< tr> \ n ";
foreach ($ lin e as $ col_value) {
echo "\t\t<td>$col_value</td>\n/;;
}
echo "\t< /tr> \n";
}
echo "< /table> \n ";
rn ysq l_fre e _re su lt($ re su lt); //Liberar la tabla
m ysq l_ close($ lin k); // C e rra r la conexin M yS Q L
?>
< /body>
</html>
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*
Crdoba
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: libreras
A co n tin u a ci n , d e sa rro lla re m o s u n n u e vo e je rc ic io que co n sis tir
en re p re sen ta r la web m vil de una cad en a de lib re ra s. La a p lica ci n
p e rm itir v is u a liz a r un lista d o de su cu rs a le s ag ru p ad as por localidad ,
donde, al se le c cio n a r u n a lo ca lid a d , p od rem o s e n tra r a v e r todas
las su cu rs a le s que existen en ella. Luego, p odrem os seleccio n ar
una su cu rsa l y v e r en d etalle la in fo rm aci n , ju n to co n u n m apa de
su u b ica ci n fsica , el cual se crear de fo rm a d in m ica u tiliz a n d o
las co o rd e n ad as (la titu d y lo n g itu d ) del local.
Para p o d er lle v a r a cabo este eje rcicio , debem os haber realizad o
el e je rc ic io anterior, ya que u tiliz a re m o s M ySQ L com o base de datos
de las su cu rsale s y PH P para acce d e r a esta in fo rm aci n d in m ica y
v is u a liz a rla en pantalla.
23:23
BOOK
T IU * 4 * 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 seccin
Redusers Premium el m ate ria l co rre sp o n d ie n te a este ca p tu lo , ubicado
d en tro del a rc h iv o Cap06.userbookstore.rar. A q u e n co n trare m o s una
carp eta que co n tien e la e stru c tu ra b sica del sitio , la pgina p rin cip a l
(hom e.php), una carp eta (images) con las im genes que u tiliz a re m o s en
el e je rc ic io y los a rc h iv o s bsicos de PH P p ara co n e cta rn o s a M ySQ L
y p o d e r acce d e r al co n te n id o de la tabla Su cursales.
El cdigo a m o d ifica r del a rc h iv o cn.php es el siguiente:
www.redusers.com
USEFtS 6. L E N G U A J E S D E P R O G R A M A C I N
<script src=77http://code.jquery.com/mobile/1.3.2/jquery.moble-1.3.2.min.
js77x/ s c rip t>
<?
//Llamar los archivos Require
?>
</script>
</head>
<body>
<div data-role=77page77id=//index// data-theme=//d//>
<div data-role=77header77data-theme=7'c77data-position=/7fixed77>
<div id="im agenLogo" align=77center">
<mg src="mages/Logo250x42.png" style=//max-width:250px;min-
width:250px//alt=', USER Book Store77longdesc=77USER Book Store77>
</dv>
</dv>
<div data-role=7/content7/data-theme=/'d/7>
<p algn=/7center7'><strong>Sucursales USER BOOK STORE</strong></
P>
<br>
<P>
<?
//Cdigo PHP
?>
</p>
</div>
<div data-role=77footer77data-position=77fixed77data-theme=7/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 cdigo base p ara la pgin a que lis ta r
las lo ca lid a d e s. D entro de la se cci n content de jQ u e r y M obile,
re se rva m o s el espacio co rre sp o n d ie n te para e scrib ir el cdigo PH P
que crear, de m anera d in m ica , el L is tV ie w que nos m o strar todas
las lo ca lid a d e s existen tes en la tab la, to m n d o las del cam p o localidad
de la tab la Su cursales.
A n te s de e s c rib ir el cdigo co rresp o n d ie n te , cre arem o s un nuevo
a rc h iv o lla m a d o selectsuc.php, d onde in clu ire m o s la co n su lta SQL
co rre sp o n d ie n te que nos p e rm itir filtra r las lo ca lid a d e s de form a
in d iv id u a l cargad as en cada reg istro de la tabla Sucursales.
El cdigo de este a rc h iv o es el siguiente:
<?
$ q u e rylib re ria s = 'S E L E C T D IS T IN C T R O W (lo ca lid a d ) A S localidad
F R O M sucursales L I M I T O ,3 0 ';
$ result = m ysq l_ q u e ry($ q u e rylib re ria s) o r d ie ('F a ll la c o n s u lt a :'. m ys q L
e rro rO );
?>
require 'en.php';
require 'selectsuc.php';
www.redusers.com
204 l/SERSl 6. L E N G U A JE S D E P R O G R A M A C I N
Ahora solo nos resta escrib ir d entro del cuerpo p rincip al de la pgina
el cdigo PHP que nos listar, a travs de un w idget ListView, el conjunto
de localidades que tienen una o ms libreras. Ubicam os el cdigo PH P
iniciado cuando cream os la pgina y elim inam os la lnea correspondiente
al com entario. En su lugar, agregam os la siguiente sentencia:
<?
echo " < u l d a ta -ro le = /listvie w / d a ta -in s e t= 'tru e '> ";
w h ile ($ ro w = m ysql_fetch_assoc($ result))(
$ filtrolocalid ad = $ ro w ['lo c a lid a d '];
S filtro lib re ria s = "lib re ria s .p h p ? l= /'.$ filtro lo ca ld a d ;
echo " c l i x a h ref= //L $ filt r o lib r e n a s " V L $ r o w ['lo c a lid a d /].//< / a x / li> ,/;
}
echo "< / u l> ";
?>
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 viciamofcie 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
Crdoba o
U iuyuuy o
F ig u ra 14. La pgina
s u c u r s a l e s .p h p ya
visualiza las localidades
o
imoo Sicuraates radas
que tienen al menos una
sucursal de la cadena
1 ^
O 1
J de libreras.
d D O C T Y P E h t m l>
www.redusers.com
U S E F tS 6. LENGUAJES DE PROGRAMACIN
?>
</script>
</head>
<body>
< d iv d a ta -ro le = "p a g e " d=//index// d a ta -th e m e = "d ">
<dv d a ta -ro le = "h e a d e r" d a ta -th e m e = "c " d a ta -p o s to n = "fixe d ">
<div id = "im a g e n L o g o " a lig n = //ce n te r//>
< m g src= "im a ges/Logo2 5 0 x4 2 .p n g" style = "m a x-w id th :2 5 0 p x ;m in -
w id th :2 5 0 p x" a lt = " U S E R Book S to r e " lo n g d e s c = "U S E R Book S to re ">
</div>
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
<p a lig n = "c e n te r"xs tro n g > L o c a lid a d : <? //filtro aplicado ?> < /strongx/p>
<br>
<P>
<?
//Listar las sucursales obtenidas
?>
</p>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fixe d " d a ta -th e m e = "c " d a ta -
p o s itio n = "fix e d ">
< d iv d a ta -ro le = "n a v b a r">
<ul>
< l i x a h re f= "h o m e .p h p " data-icon = //h o m e"> In icio< /a> < /li>
< l i x a h r e f = " # " d ata-icon = "search"> S ucu rsales< /a> < /li>
< l i x a h ref= //# // data-icon = //plus"> Profesionales</a> </li>
</ul>
</div>
</div>
</div>
<^body>
</html>
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 $ filtrolocaldad ;
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
wTii*. 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 CAA
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 _________________
1 Qu significa PHP?
E JE R C IC IO S P R C TIC O S
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 rsticas que HTML5 trajo al m undo web
y a la Web m vil in clu ye, tam bin, cam bios im p o rtantes en cuanto
a alm acenam ien to local del lado del cliente. Desde los in icio s de la
Web -tal com o la conocem os hoy-, todo tip o de alm acenam iento de
in fo rm aci n en las com p utadoras del clien te se llev a cabo u tiliza n d o
el m todo de cookies. Este im p arta la creaci n de una especie de
a rch ivo que oficiaba de va ria b le en el equipo cliente, en el que se
alm acenab a in fo rm aci n im p o rtante que s e rv ira para re u tiliz a r
en el sitio web d u ra n te todo el tiem po de navegacin de un usuario.
La inform acin de datos alm acenada en cookies poda estar o no atada
a una fecha de ven cim iento especfica. Si, p or ejem plo, le preguntam os
al usuario de una pgina web su nom bre cuando ingresa por prim era
vez, el valo r ingresado por el usuario puede alm acenarse en u n a cookie
y reutilizarse todas las veces que este vu e lva a ingresar a al sitio web,
o bien elim inarse luego de un perodo de tiem po determ inado.
Sin em bargo, con la e vo lu ci n del lenguaje H TM L, desde el
m odelo im p uesto p or HTM L5, se p lan te una m ejora en cuanto a
a lm acenam iento de la in fo rm aci n en los equipos del usuario, que
b rin d a una alte rn a tiv a ms co m p leta a las clsicas cookies, desde
la caracterstica de alm acenam iento lo cal (o, en ingls, local storage).
..............
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 va 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 pgina 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 vo co n stan te de
in fo rm a c i n entre el eq u ip o clie n te y el s e rv id o r genera ra le n tiz a c i n
de la co m u n ica c i n entre los extrem os y hasta puede p re se n tar
p ro b lem as de seguridad in fo rm tic a si la in fo rm a c i n alm acenad a
es sen sib le y no est cifrada.
A s es com o H TM L5, en la cre aci n de la e s p e cifica c i n de
alm a ce n am ie n to de d ato s locales, d ecid i b rin d a r una a lte rn a tiv a
a las cl sica s cookies, p rese n ta n d o la so lu c i n a tra v s de la
im p le m e n ta ci n de lo ca l storage y sessio n storage, p ara alm acen ar
datos lo cales v a rio s o in fo rm ac i n segura sobre la sesi n de un
u su ario m ed ian te login.
i/ i/ i/
W EB S TO R A G E EN H TM L5
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) Mtodo Devuelve una cadena con el valor del elemento clave (key).
Setltem(key, valu) Mtodo Almacena un valor (valu), referenciado por una clave (key).
Key(index) Atributo Devuelve una cadena con la clave del elemento que ocupa la
posicin indicada en (index), dentro de la coleccin de datos
almacenados en (key).
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 travs del sitio web www.w3.org, podemos acceder en detalle a todas las caractersticas tcnicas del
lenguaje HTML en todas sus variantes. All podemos conocer, adems, las especificaciones actualmente
vigentes, como tambin aquellas que ya no son soportadas por lo navegadores modernos.
www.redusers.com
222 R H I5 3 7 . A L M A C E N A M IE N T O L O C A L Y A P L IC A C IO N E S O F F L IN E
form a autom tica inform acin de aquellas se n ten cias que n o co n o c e m o s en detalle del lenguaje HTM L5.
www.redusers.com
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 ta l-s c a le = l//>
c lin k re l= "s ty le s h e e t" href='M ittp://code.jquery.com /m obile/1.3.2/jquery.
m ob ile -1 .3 .2 .m in .css" />
< script src= //http://code.jquery.com /jqiiery-L9 .1 .m n.js//></script>
< scrpt src= //http://codeJquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js"> < /scrip t>
< script typ e = "te x t/ ja v a s c rip t">
</scnpt>
www.redusers.com
224 USEFtS 7 . A L M A C E N A M IE N T O L O C A L V A P L IC A C IO N E S O F F L IN E
</head>
<body>
< dv d a ta -ro le = "p a g e " d = "n d e x// d a ta -th e m e = "d ">
<div d a ta -ro le = "h e a d e r" d a ta -th e m e = "c ">
< h4 > Alm acenam iento lo ca k/h 4 >
</div>
< d iv d a ta -ro le = "c o n te n t" d a ta -th e m e = "d ">
V e rific a r si el equipo tien e com patibilidad.
< br>
< d iv d a ta -ro le = "b u tto n " o n C Ic l< = "ja va sc rip t:co m p ro b a r$ o p o rte W S ();">
Verificar</div>
</div>
< d iv d a ta -ro le = //footer// d a ta -p o s itio n = "fixe d " d a ta -th e m e = "c " d a ta -
p o s itio n = "fix e d ">
C o p yrig h t 2014 - Fernando Luna
</div>
</div>
</body>
</html>
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 prctico:
almacenamiento local
A co n tinuaci n, realizarem os un pequeo fo rm u la rio que har uso
del alm acenam iento local de los datos cargados en los resp ectivo s
cam pos. Para ello, agregarem os cuatro cam pos y dos botones. En los
cam pos guard arem os datos de tipo texto, y los botones in vo carn dos
funciones. Una de ellas alm acenar en el naveg ad o r web del cliente
los datos cargados p reviam en te en los cam pos, y la otra p erm itir
recu p e ra r los datos alm acenados m ediante local storage.
Veam os el cdigo HTML:
function g u a rd a rO {
v a r clave = "n o m b re ";
var v a lo r = d ocu m e n t.ge tE le m e n tB yd t'n o m b re 7).valu;
storage.setItem (clave, v a lo r);
var clave = "a p e llid o ";
v a r v a lo r = d o c u m e n t.g e tE le m e n tB yId ('a p e llid o ').va lu e ;
storage .setlte m clave , v a lo r);
var clave = "c o r r e o " ;
var v a lo r = docu m e n t.ge tE le m e n tB yld O co rre o O .va lu e ;
storage.setltem CcIave, v a lo r);
var clave = "te le fo n o ";
www.redusers.com
USEFtS 7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E
function re c u p e ra r) (
v a r v a lo r = sto ra g e .g e tlte m ('n o m b re ');
d o c u m e n t.g e tE le m e n tB yld ('n o m b re ').va lu = valor;
v a r v a lo r = sto ra g e .g e tlte m ('a p e llid o ');
d o c u m e n t.g e tE le m e n tB yld C a p e llid o 'L va lu e = va lo r;
v a r v a lo r = s to ra g e .g e tlte m ('c o rre o ');
d o c u m e n t.g e tE le m e n tB yld O co rre o 'L va lu e = va lo r;
v a r v a lo r = sto ra g e .g e tlte m ('te le fo n o ');
d o c u m e n t.ge tE le m e n tB yld O te le fo n o 'Lva lu e = va lo r;
)
</script>
</head>
<body>
< d iv d a ta -ro le = //page// d = "in d e x " d a ta -th e m e = "d ">
<dv d a ta -ro le = "h e a d e r" d a ta -th e m e = "c ">
< h4 > Alm acenam iento locak/h4 >
</div>
< d iv d a ta -ro le = //content// d a ta -th e m e = "d ">
<form d = " e m a r m e th o d = "p u t" a c tio n = "e n v ia r" >
<nput typ e = //te x t// d=//nom bre// nam e=//nom bre//
p la c e h o ld e r= "N o m b re " />
<nput ty p e = " te x t" d = "a p e llid o " n a m e = "a p e lld o "
p la ce h o ld e r= " A p e llid o " />
c in p u t ty p e = "e in a il" id=//co rre o //placeho lde r= //su correo
e le c tr& o a c u te ;n ic o " />
< input ty p e = " te x t" id= //te le fo n o // n a m e = "te le fo n o "
placeholder= //Telefono// />
< d iv a lg n = "c e n te r">
< br>
< d iv d a ta -ro le = "b u tto n " d a ta -th e m e = "b " o n C Ick= "ja va scrip t:g u a rd
a r ( ) ;//>Guardar</div>
< br>
www.redusers.com
D E S A R R O L 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
< dv d a ta -ro le = "b u tto n " o n C lic k = "ja v a $ crip t:re c u p e ra r();"> R e c u p
erar</div>
</div>
</form>
</div>
< d iv d a ta -ro le = "fo o te r" d a ta -p o s itio n = "fix e d " d a ta -th e m e = "c " da ta -
p o s ito n = "fixe d ">
C o p yrig h t 2014 - Fernando Luna
</dv>
</div>
</body>
</html>
Este fo rm u lario sim ple posee dos funcio nes. La p rim era, llam ada
guardar(), se ocup a de guardar, en la variab le valor, los datos ingresados
en cada uno de los cam pos. Luego u tiliz a la fu n ci n setltem (clave, valor),
donde alm acenar, bajo el m ism o nom bre del cam po, el valo r que ha
sido ingresado en este.
La segunda fu n ci n se llam a recuperarQ y se ocupa de v o lv e r a
cargar, en cada uno de los cam pos, el v a lo r alm acenado m ediante local
storage, u tiliz a n d o la fu n ci n getltem (valor).
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 rs tic a son A n d ro id , iOS y W in d o w s 8.x.
La m en tab lem en te, al m om ento de e s c rib ir esta obra, los
n aveg ad o res web In te rn e t Explorer, In te rn e t E x p lo re r m ob ile, M o z illa
Firefox, M o z illa Fire fo x m o b ile, M o z illa Firefo x p ara A n d ro id y
B la c k B e rry B ro w ser no so p o rtan la im p le m e n taci n de Web SQL.
B LA C K B E R R Y BR OW SER Y W EB S Q L
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 ||'Descripcin 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 mtodo de alm acenam iento de datos en
HTML5. Las bases de datos web, al igual que en Web SQL, son alm acenadas
y actualizadas en el navegador web del usuario. Esto perm ite que los
desarrollaclores creen aplicaciones en las que, a travs de sim ples
consultas SQL, se puedan visu a liz ar datos en el navegador de usuario ms
rpidam ente. Haciendo uso de algunas funcionalidades de control offline
y online de una conexin a internet, estas bases podrn actualizarse de
m anera transparente para el usuario que navega por la pgina web.
Aplicaciones offline
Otro de los grandes cam bios in clu id o s en H T M L 5 es que se puede
trab ajar con ap licacio nes offline. Dado que el nm ero de aplicacio nes
web crece da a da, y teniendo en cuenta todas las cap acid ades que
este lenguaje de m arcado d esarro ll a lo largo de su ltim a versin,
solo faltaba in c lu ir un soporte que le p erm itie ra al usuario de una
W ebApp p o d er segu ir trab ajan d o desconectado, ya sea cuando pierde
la conexin a internet, o sim p lem ente para a p ro ve ch ar el aho rro de
datos en los equipos m viles.
www.redusers.com
234 USEFtS 7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E
AppCache
El cach de ap licaci n o AppCache que se genera cuando
desarrollam os una aplicacin que trabaja sin conexin perm ite que
el desarrollad or especifique si todos los archivo s que com ponen una
W ebApp o solo una parte de ellos deben alm acenarse en el cach del
navegador web, para que estn a disp osicin de los usuarios que eligen
trabajar sin conexin en nuestro sitio.
Como ventaja, podem os destacar que cualquier aplicacin que genere
un cach local perm itir, por ejem plo, que el usuario navegue por este
sitio sin conexin a internet. Tam bin perm itir que pueda acceder a los
recursos, imgenes o contenido de texto ms rpido, dado que estarn
alm acenados en su equipo y no en la red. Otra ventaja es que se generar
una m enor carga en el servidor, por lo que el navegador web slo se
ocupar de descargar del servidor aquellos recursos que hayan cambiado.
www.redusers.com
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 cm o debem os co n fo rm ar
el a rch ivo de m anifiesto que perm ita descargar el co ntenido de una
web al cach del naveg ad o r local del usuario.
El p rim er cam bio que debem os in co rp o ra r es en el tag <html> de la
pgina web p rin cip a l del sitio w eb o W ebApp, p ara que el naveg ad o r
id en tifiq ue dnde se en cu en tra el arch ivo de configuracin de la cach.
El cdigo a u tiliz a r es el siguiente:
c h tm l m a n ife s t= "h ttp://w w w .m isitiow eb .com .arM ebA pp/exam ple.m f" >
</html>
C A C H E M A N IF E S T
CACHE:
index.htm l
stylesheet.css
www.redusers.com
236 USEFtS 7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E
mages/logo.png
m a g e s / im g t o o lb a r l.p n g
im ages/im gtoolbar2.png
m ages/im gtoolbar3.png
scripts/funcionesJS.js
scnpts/variablesJS.js
Archivos online
Si n e ce sita m o s que la W ebApp est co n ectad a para, p or ejem plo,
id en tifica rn o s en una red con un nom bre de u su ario y co ntrasea,
p o d em o s d esta ca r esto d entro del a rch ivo de m anifiesto de la
sig u ie n te m anera:
N ETW O RK :
login.php
/myapi
http://api.facebook.com
En caso de falla
Si necesitam os que algn contenido se co n su lte de m anera online,
y la red donde corre nuestra W ebApp no lo perm ite, podem os in clu ir
en el a rc h iv o de m aniesto un apartado que contem p le esto y m uestre
una pgina o sen tencia Ja v a S c rip t alternativa:
FALLBACK:
/login.php /staticE iror.h tm l
m ages/large/online.jpg im ages/offline.jpg
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 lnea y tam bin sin conexin a internet. C on algu n o s a ju stes b sic o s a n uestras ap lica cio n es
y el a p ro vech am ie n to del alm a ce n a m ien to local, p o d rem o s con tro lar en d etalle el com p o rta m ien to d e
n uestras W e b A p p s, para q u e nunca dejen al usuario d esorientad o a n te un e rro r o im p revisto no con tro lad o
durante la n av eg a ci n w eb.
www.redusers.com
238 USEFtS 7 . A L M A C E N A M IE N T O L O C A L V A P L I C A C I O N E S O F F L IN E
Actividades
T E S T DE A U TO E V A L U A C I N ________________________
3
Cuntos tipos de almacenamiento local encontram os en Web Storage?
5 Qu es Indexed DB?
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 funcin 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 ao de v is u a liz a c i n
de una pgina web cu an d o esta se carga en el n aveg ad o r web Safari
para iOS. Este meta tag nos fa c ilita esta b le ce r el ancho y la escala
in ic ia l co n la cual se v is u a liz a una pgina w eb en este navegador,
recib ie n d o un p arm etro in ic ia l y uno final, que p ued en d ife r ir o ser
iguales. As, pod em os e sta b le ce r el aju ste del ancho de una pgina
web para v is u a liz a rs e en el b ro w se r y e sta b le ce r una esca la de zoom
o no. Veam os un ejem p lo :
cm eta ame = "v ie w p o rt" content = "w idth = 320, nitial-scale = 2.3, user-scalable = no">
La etiq ueta view port d eclara d a e stab lece un ancho de 320 pixeles.
La pgina se cargar a p lic a n d o un zoom in ic ia l de 2.3 veces
lo e sta b le cid o p or d efecto . Po r ltim o , el atrib u to user-scalable=no
im p id e re a liz a r un zoom sobre d icha pgina. Si d icho atrib u to
e s tu vie ra e stab le cid o en yes, el v is ita n te de la pgina p o d ra re alizar
zoom sobre el co n te n id o web visu a liz a d o .
L E N G U A JE DE PR O G R AM A C I N P A R A MAC
El d esarro llo d e ap lica cio n es nativas para OS-X y iO S se realiza s lo d esd e la plataform a OS-X a tra v s de
la a p lica ci n X C O D E , siendo e s te e l entorno de d esarro llo oficial q u e p ro ve e Apple. El len guaje a utilizar
en la co d ifica ci n e s O b je c tiv e - C .
www.redusers.com
D E S A R R O L 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 ecficam en te en Phone, d etecta de m anera
a u to m tica todos los nm ero s de te l fo n o v is u a liz a d o s en una
p gina web. Lo s tra n sfo rm a al h ip e rv n c u lo tel:5 4 9 1 1 4 2 3 4 4 5 6 7 , que
p erm ite, con un sim p le toque en la pantalla, in ic ia r la llam ad a a ese
n m e ro de tel fo n o . Este p arm etro tam b in puede se r co n tro lad o
de m anera a u to m tica p or n u estra a p licaci n , d e sh a b ilitan d o d icha
fu n c io n a lid a d e sta b le cid a p or defecto en Safari M obile. Esto se rea liza
de la sig u ien te m anera:
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.
El navegador Chrome en OS
El n ave g ad o r G oogle C hrom e tiene su p ro p ia ve rs i n para el
sistem a o p e ra tiv o iOS. Pero, segn las p o ltic a s de A p ple, puede
www.redusers.com
D E S A R R O L 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 cdigo ya nos p erm ite d efin ir que nu estra W ebA pp es un sitio
web ap to para in sta la rse d en tro de la p a n ta lla p rin cip a l del sistem a
o p e ra tivo iOS. Luego d efin im o s que la b arra de tareas s u p e rio r de iOS
sea tra n sl cid a. Po dem os o p tar tam b in p or que sea negra o del co lo r
p or d efecto del sistem a o p erativo .
c lin k re l= "a p p le -to u c h -ic o n " s iz e s = "5 7 x 5 7 " h ref= //gb -lo go -5 7 x5 7 .p n g// />
c lin k re l= "a p p le -to u c h -c o n " sze s = "7 2 x7 2 " h re f= "g b -lo g o -7 2 x 7 2 .p n g " />
N A V E G A D O R E S W E B P A R A IOS
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 prediseados
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 podan
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 ao 20 0 7 .
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S t 253
F ig u ra 6. Ya
tenemos todas
las variantes
de imgenes
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 aplicacin instalada
localm ente en OS, sin necesidad de visu a liza r la b arra de herram ientas o barra
de direcciones del navegador web S a fa ri M obile.
com p leta y d e la s herram ientas que o to rg a un n a v e g a d o r w e b c o m o Sa fari. Tam bin ap ren d im o s a cre a r
los d ife ren tes ico n o s y p an tallas d e inicio, dep en d ien d o d el tipo d e d ispositivo iO S donde n u estra W ebA pp
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 aran al eje cu ta rse d en tro
del n a ve g ad o r web C hro m e M obile. AI u tiliz a r el m o to r de re n d e rizad o
WebKit de C h ro m e M obile, se im p la n ta n las m ism as p o ltica s de
seguridad Sandbox que este b ro w se r posee, y tam b in se acced er
a las m ism as APIs que este n aveg ad o r m vil b rin d a.
Por o tra parte, en Google C hro m e M obile existe una d ife re n cia
vis ib le con la m ism a ca ra c te rs tic a que p resta iOS: la W ebA pp que
eje cu te m o s a p an talla co m p le ta en A n d ro id se v is u a liz a r en el listado
de a p lic a cio n e s a ctiv as , Task Switcher, aunq ue no con su propio
ico n o sin o co n el de Google C h ro m e. A sim is m o , com o n o m b re no
figu rar el ttu lo de la W ebA pp, sin o que se podr leer la leyenda
N O V E D A D E S D E LO S N A V E G A D O R E S M OVILES
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 cules
son nativas y cules 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 cund o una W ebApp
nos lle v a a un sitio w eb externo: pod em os v is u a liz a r, en el extrem o
s u p e rio r de la p antalla, la U R L hacia la cual n u estra W ebA pp a p antalla
co m p le ta re d irig i el n ave g ad o r del usuario. Esto se im p le m e n to para
n o tifica r al u su ario del telfon o m vil cu n d o u n a W ebApp carga una
pgin a w eb a jena a la U RL o rig in a l desde donde se in sta l el acceso
d ire cto en la p a n ta lla de A n d ro id .
www.redusers.com
264 USEFtS 9 . W E B A P P S P A R A A N D R O ID Y O T R O S D IS P O S IT IV O S
[ u p a
m tacebook co m
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
Rea. 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.
.
ez*
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 pgina home.php de nuestro proyecto,
subirla al se rvid o r web donde la ejecutam os y probar que todo funcione
de la m ism a m anera que antes. Dentro de este p royecto no debem os
en co n trar ninguna diferencia funcional con lo realizado hasta aqu.
BOOK
U UM 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 ttu lo de la aplicacin. Por
defecto, tra e r lo especificado en el tag < t i t i e > del encabezado de la pgina
H T M L del sitio web. Una vez aceptado o cam biado dicho ttu lo, presione A g r e g a r
www.redusers.com
D E S A R R O L 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 AUTOEVALUACIN____________________
4 Cules son las dimensiones para los iconos que debemos crear para Android?
10 Existen meta tags especficos para W indows Phone que permitan realizar
esta ltima tarea?
www.redusers.com
*
\\\\\\\\\\\\\\\
///////////////
PhoneGap
En e s te capitu lo , nos a c e r c a r e m o s a Ph on eG ap , c o n o c id o
ta m b i n c o m o A p a c h e C o rd o v a , un fr a m e w o r k m obile
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
Introduccin
P h o n e G a p naci con la p rem isa de p erm itir el d esarro llo de
a p licacio nes m vile s para m ltip le s p latafo rm as partiend o desde
un nico d esarro llo englobado p or las tecnologas HTML5, CSS y
Ja v a S crip t. La p ropagacin de la tecnologa en m ateria m vil hizo
que un p ro g ram ad o r o e m p resa deba ad ap tarse a las necesidades
de su cliente, que -g lo b aliz aci n m ed iante- puede estar situado
en cu alq u ier rinc n del m undo.
Sum ada a esta variab le , la tendencia de uso de d isp o sitiv o s m viles
en el rincn donde este clien te se encuentre puede ser com pletam ente
d istin ta a la tendencia m arcada en el pas donde reside el program ador;
p or lo tanto, este ltim o tendr que co n tar con los co no cim iento s
n ecesarios que lo h ab iliten para poder d esarro llar un a a p lica ci n m vil,
y a sea para A n d ro id , com o para iOS, W in d o w s Phone o Black Berry, entre
otras p latafo rm as populares.
PhoneG ap busca, desde las bases del d esarro llo web, aco rtar lo
m s posible las d iferen cias que existen entre las d istin tas plataform as
d isem inad as p or los m ercados de todo el m undo. A travs de una
lib rera creada en Ja v a S c rip t, propone acced er a las caractersticas
p rin cip a le s de cada equipo m vil, com o ser el GPS, acelcrm etro,
cm ara o alm acenam iento local, entre otras funcionalid ades.
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
Arquitectura
PhoneG ap a p ro vech a la arq u ite ctu ra PH O N EG A PC REA
im p lem en tad a en el naveg ad o r web de los
U N A A PL IC A C I N
telfon o s m viles para crear una ap licaci n que
se v is u a liz a en un co n ten ed o r w eb (ms conocido Q U E E X P L O T A LA S
com o el m otor del b ro w se r), se ejecuta a p antalla
C A R A C T E R S T IC A S
co m p leta y explota las ca ra cte rstica s lo cales del
sistem a o p e rativo desde su API JavaScript. L O C A L E S D E L S.O.
La interfaz de nu estra ap licaci n m vil es
creada p or co m p leto en HTML, CSS y fram ew o rks
com o jQ u e ry M obile y Ja v a S c rip t, y u tiliz a el co n ten ed o r PhoneGap
para p o d er hacer co rrectam ente el d esp liegu e de nuestra ap licaci n
en los d iferen tes sistem as operativo s.
Cuando cream os una ap licaci n PhoneG ap, com nm ente llam ada
com pilacin, esta se tran sfo rm a en un a rc h iv o b in ario que podr ser
d istrib u id o en las tiendas de ap licacio nes ms conocidas (G oogle Play,
Tunes, A m azon M arket y W indow s Phone M arketplace, entre
otros), respetando, por supuesto, los req u isito s que cada tienda dicta.
Internam ente, los archivo s web que com ponen nuestra app de
PhoneGap se encuentran alm acenados de m anera local y se cargan en
el contenedor web. As, PhoneGap nos perm ite d esarro llar una app desde
los arch ivo s base de una WebApp, u tilizan d o las m ltip les pginas HTM L
que hayam os creado. Sin embargo, debem os tener cuidado cuando
desarrollam os una app PhoneGap de m ltip les pginas con las variables
creadas en Ja va S crip t, ya que estos valores pueden perderse entre la
in vocacin de una pgina y otra. En estos casos, debem os contem plar
la opcin de alm acenar los valo res de variab les de form a local, com o
vim o s en el Captulo 7 de esta obra, para poder, as, m antener la
consistencia de una W ebApp que tiene cierta com plejidad en su funcin.
www.redusers.com
276 EEH 3 1 0 . PH O N EG A P
rn
E L FR A M EW O R K P H O N E G A P
P h o n eG ap n o solo n o s perm ite com p ilar una W e b A p p hacia la s platafo rm as m viles; tam bin nos
brinda una s e rie de h erram ientas, m ed iante la A P I, q u e utilizando Ja v a S c r ip t n o s perm itirn explotar
las c a ra c te rs tic a s p rin cip a les d el h ardw are d e los dispositivos m viles.
www.redusers.com
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 versin 5.5 de esta herram ienta, D ream w eaver
com enz a d ar soporte para PhoneGap. Aun as, Nitobi, el creador de
este m aravillo so fram ework, puso com o condicin que PhoneGap fuera
de cdigo libre: por esta razn, se desprendi una ve rsi n libre bajo
licen cia Apache, com nm ente conocida com o Apache Cordova.
Adobe se qued con el derecho de PhoneG ap y PhoneG ap Build;
A pache C ordova, p or o tro lado, es d istrib u id o de form a gratuita
entre quienes q u ieren d esarro llar ap licacio n e s m vile s hbridas,
m anteniendo la filosofa o riginal con que Nitobi cre PhoneG ap.
) 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
Modificacin de index.html
Al cdigo de la ap licaci n slo debem os re aliz arle una sim ple
m o d ificaci n en su a rch ivo p rin cip a l, index.htm l. Para esto, lo editam os
www.redusers.com
D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M V IL E S E2 S2 Z 3 281
d D O C T Y P E htm l>
<htm l>
<head>
c title > D o c to r Assistance</title>
cmeta name="viewport" content="width=device-width, initial-scale=l//>
clink rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.
mobile-l.3-2.min.css'' />
cscript src="http://code.jquery.com/jqiiery-1.9.1.min.js"></scrpt>
c s c rip t s r c = " http://code.jquery.com /m obile/1.3.2/jquery.m obile-1.3.2.m n.
js"></scrpt>
cscript src="Phonegap.js" ></script>
c/script>
c/head>
www.redusers.com
USEFtS 10. PH O N EG A P
- - -
/ .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
* ---------------------------
3 ___________ d i \
uTT*
F ig u ra 10. El icono creado para identificar nuestra app tambin puede ser
subido desde el portal PhoneGap Build en el momento de crear el proyecto.
C O N F IG U R A C IO N D E T A L L A D A D E L P R O Y E C T
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 podrn configurar, d e m a n era deta
llada, la s pantallas d e inicio, ico n o s y s e rvicio s del m vil que nuestra a p p utilizar. El archivo p u ed e su m arse
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 segn la p latafo rm a. En N o kia e iO S , por ejem plo, d e b e m o s g estio n a r un ID nico p ara
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 aoc0
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 rco rd , portar cualquier W e b A p p h acia el m undo de la s ap lica cio n es in stalab les en Android,
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 slo para com pilar WebApps a apps hbridas?
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
P rog ra m a ci n nativa E m u la r W e b A p p s
para B la c k B e rry 1 0 ............ ......292 en la c o m p u ta d o ra ....................302
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
Programacin nativa
para BlackBerry 10
Si bien iPhone es el producto ms d estacado en el terren o m obile
y fu e el que cam bi rotund am ente la m anera de u tiliz a r u n celular,
debem os reco nocer que gran parte del m rito en los avances de
n aveg ad ores y sistem as de m ensajera avanzad os, d entro del terreno
m vil, lo tiene, desde m ucho tiem po antes, la p latafo rm a BlackBerry.
Esta p latafo rm a realiz cam bios sig n ificativo s en el terreno m vil,
dado que ad op t las bondades que la em presa P a lm haba puesto en
el m ercado de la telefona m vil y la co m p utaci n p ersonal porttil
desde fines de la dcada del 90. As fu e com o B lack B e rry condecor
esta p latafo rm a con un sistem a de n aveg acin p or web y actu alizaci n
de las no ticias p resentadas en nuestros sitio s o blogs ms reconocidos
m ed iante el sistem a RSS.
BlackBerry tam bin inici, en parte, el terreno de la mensajera
instantnea m vil desde su plataform a BBM ( B la c k B e r r y M e ss e n g e r).
Incorpor un sistem a de chat sim ilar al que nos present IC Q e n los
inicios de la Web de escritorio, que evitaba que tuviram os que darles
nuestro nm ero de telfono a los interlocutores con los que chatebamos.
El sistem a de m ensajera BBM es, hasta hoy, m uy querido y deseado
p or m iles de u su ario s en todo el m undo. Por esto, B la ck B e rry decidi,
a p a rtir de 2014, lle v a r su sistem a BBM a las p latafo rm as iOS y A ndroid,
a pesar de que los laureles en el terreno los tenga ahora W h a ts A p p .
www.redusers.com
D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M V IL E S USERS 293
La generacin BB10
La llegada de B la ck B e rry 10 al m ercado m undial CON B L A C K B E R R Y 10,
le d io un nuevo resp iro a una p latafo rm a que pas
B B P R O P U S O UN
de ser ld e r e x clu sivo en el terreno m vil a casi
d esap arecer p or co m p leto de este. BlackBerry 10 N U EV O S.O. CON
retorn con a rtille ra pesada. Propuso u n nuevo M U L T IT A R E A EN
sistem a o p e rativo con m u ltita re a en tiem po real
y lanz telfonos inteligen tes que respetan las T IE M P O R E A L
caractersticas clsicas de los m odelos QWERTY:
Q10 y Q5, y tam b in otros m odelos tctiles,
Z10 y Z30, que pelean palm o a palm o con iOS y A n d ro id , entre otros
com p etidores. Y, a la par de estos nuevos m odelos en el m ercado,
B la ck B e rry lanz tam bin un nuevo co n ju n to de h erram ien tas para
d esarro llad o res de esta p lataform a.
Desarrollo nativo
Las herram ientas de desarrollo nativo perm iten crear apps para BB10
de dos m aneras: directam ente, u tilizand o cdigo C++, o com binando
D E S A R R O LLO P A R A B LA C K B E R R Y
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
La interfaz BB en HTML5
Para p o d er d esarro llar ap licacio nes h b rid as que lu z ca n igual que la
in te rfa z n ativa de BB10, tam bin contam os con una ve rsi n a lte rn a tiv a
para integrarse con j Q u e r y M o b ile y asi f cilm e n te crear la in terfaz de
BB desde CSS y Ja v a S c rip t: B B U I.js .
www.redusers.com
2% A P N D IC E A . BB1 O, W IN D O W S P H O N E Y E M U L A D O R E S W E B
El gran simulador
Todo gran ento rno de desarrollo debe tener un gran sim u lad or
para co m p letar el am b iente p erfecto de cdigo y testing. BB10 no
es la excepcin, ya que desde sus in icio s el am b iente de desarrollo de
esta p latafo rm a puso a d isp o sici n de los p ro g ram ad o res un excelente
am biente de testing. Este est com puesto por VM W are Player
(w w w .vm w are.com /products/player), el cliente que p erm ite correr
m quinas v irtu a le s de d iferen tes sistem as o p e rativo s y las m quinas
v irtu a le s en s de cada p latafo rm a de BB. Estas se descargan desde el
sitio web oficial de d e s a b o lla d o re s BB: h ttp://developer.blackberry.
com /devzon e/develop/sim ulator/bb 10 allsim versions.htm l
' * A
11 10 D r n i m a t e
M u j> _ tn u m
'
* 11*
i1
operativos d e B la c k B e rry , sino que tam bin p erm ite c re a r m q u in as virtuales p a ra instalar, por ejem plo,
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 traa una serie de
ven tajas para am bas em presas, ya que N okia fue, d urante m uchos
aos, p ionera en m ateria de equipos celu lares por su gran calidad
de hardw are y softw are, y M icroso ft -si bien segua gozando de la
p op u larid ad m und ial del sistem a o p erativo W in d o w s en los e scrito rio s
de ms del 90 % de los equipos- necesitaba recuperar rpidam ente
el terren o m vil ced id o a sus p rin cip a le s com petidores.
www.redusers.com
298 l/SERSl A P N D IC E A . B B 1 0 , W IN D O W S P H O N E Y E M U L A D O R E S W E B
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
cdigo com o arrastrndolos 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
Aplicacin de W indow s Phone. O tra opcin es crear una Aplicacin
de enlace de datos de W indows Phone que nos perm ite generar un
array dinm ico de tem s a p artir de, por ejem plo, un cdigo JSon o RSS.
Tam bin d isp o nem o s de la creacin de una Aplicacin Panoram a,
la cual extiende su p antalla hacia los laterales del equipo, p erm itiend o
su vis u a liz a ci n a travs de h ip e rvn cu lo s que conectan cad a seccin
o d irectam ente naveg nd o la a travs del d eslizam ien to h o rizo n ta l de
la p antalla hacia la izq u ierd a o derecha.
www.redusers.com
302 USEFtS A P N D IC E A . B B I O, W IN D O W S P H O N E Y E M U L A D O R E S W E B
Emular WebApps
en la computadora
Existen tam bin co m p lem en to s para naveg ad o res web que sirven
para e m u la r ap licacio nes web d entro de un b ro w ser instalado en
n u estra com putadora. Desde hace un tiem po, Google in clu ye en su
p ortal de ap licacio nes y extensiones para Chrom e un com plem ento
llam ad o R ipple Emulator, el cual nos ayuda a em ular fcilm en te
W ebApps y as p o d er v e r cm o lucen estas en las p antallas de
d isp o sitiv o s m viles, ya sea tablets
o sm artphones.
E L E M U L A D O R DE Desde nuestro naveg ad o r Chrom e o desde
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 ao de
p antalla p red eterm inad o . Para v is u a liz a r esta opcin, prim ero debem os
cargar en una pestaa la pgina deseada y luego p re sio n ar CTRL +
S H IF T + M, o ir a Men principal/Desarrolladores/Vista de diseo adaptado.
Desde el m en s u p erio r de la v is ta de diseo ad ap tad a, podem os
recargar la pgina, em u la r los toques de p antalla com o si fuera un
d isp o s itiv o m vil, ca p tu rar la p antalla y guard arla com o imagen
EM U LA D O R E S IOS
Lam en tab lem en te, Apple nunca puso a disposicin e m u la d o res de su sistem a o p era tivo mvil
para la platafo rm a W in d o w s o Linux, y a q u e la s h erram ie n tas que ellos exigen utilizar para d esarrollo
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 mvil
La Fundacin M ozilla lleva m s de una d cada desarrolland o
d iversas ap licacio nes bajo la filoso fa open source. Su p rin cip al
m isi n es m antener una selecci n de p ro d ucto s que ponen
a d isp o sici n del usuario una n u e va a lte rn a tiv a en el ecosistem a
de ap licacio nes de e scrito rio y -ahora- m viles.
D entro de sus p rin cip ales estrellas, podem os destacar a Firefox
y T h u n d erbird , naveg ad o r w eb y clien te de correo electrnico,
re sp ectivam en te. Toda la lnea de p ro d ucto s de M ozilla est d isp o nib le
de m anera gratuita, ya que son de cdigo ab ierto y m ultip latafo rm a,
lo que nos perm ite u tiliz a r el m ism o producto en W indow s, Linux,
BSD y OSX, sin existir d iferen cias entre estas plataform as.
Con los aos, el fuerte crecim iento de las plataform as m viles hizo
que M ozilla lanzara una versin m vil de su navegador web para casi
todas las plataform as existentes. H oy podem os usar Firefox tanto en las
com putadoras de escritorio com o en las tablets y celulares ms populares.
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, ms tarde, Chrom e
com o naveg ad o r web, M o z illa d ej de re c ib ir apoyo de esta com paa.
A un as, con la fin an ciaci n de otros interesados, pudo seguir
m an ten iendo hasta ho y su lnea de productos.
La llegada en 2012 de T elefnica de Espaa
com o financiador del p royecto M ozilla ayud F IR E F O X OS E S UN
a esta fundacin a d esarro llar ms sistem as
S IS T E M A O PER A T IV O
y aplicaciones para el m undo m vil. A s fue
com o se potenci la idea de crear un sistem a DE CDIGO A B IE R T O
o p erativo propio, de cdigo abierto y con un
D E LA FU N D A C I N
costo casi nulo para los fabricantes de hardw are
m 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 telefona m vil, para que
com petir en las grandes ligas, con equipos de un costo econmico, no sea
un im pedim ento. As fue como, luego de la presentacin de un sistema
operativo de cdigo abierto -bautizado originalm ente Seabird e inspirado
en Android-, M ozilla pudo llevar a cabo su desarrollo completo.
Arquitectura de Firefox OS
Firefox OS d iv id e su arq u ite ctu ra en tres com ponentes:
Gonk: oficia de capa de bajo nivel de B2G con su kernel
basado en Linux y une este a una segunda capa que se ocup a
de la in te ra cci n con el hardw are.
Gecko: cum ple la fu n ci n de entorno de ejecucin
de las ap lica cio n es en general.
Gaia: o ficia de in terfaz grfica del sistem a o p erativo . Una vez
que la capa B2G se ejecut, todo lo referente a la grfica que
aparece en la p antalla de Firefox OS es resp o nsab ilidad de esta
capa. Las ap licacio nes de bloqueo, m arcad o r telefnico, m ensajes
de texto y m en de ap licacio n es, entre otras fu n cio n alid ad e s ms,
form an parte de la capa Gaia.
Las ap licacio nes que corren bajo Firefox O S estn im p lem entadas
bajo el estnd ar HTM L5, CSS3 y Ja v a S c rip t. Estas alcanzan, as, una
in terfaz que se e jecu ta co rrectam en te en este sistem a operativo.
www.redusers.com
USERS A P N D IC E B. F IR E F O X O S
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
rWmOS(n4M ,- If7 51
- 2 2 48
54911331+8854 3
P a a f S4B1133IQ68&4~| O
L 2 b 3o.
Mol ho. viajaste bien ? E iw f
4 5 6o
7 8 9 ,
* o. #
4* D n a ip ilM
SS f t r c in n c p w til liM w tf i M n o v in
Codificando apps
Com o b ie n d ijim o s en el in ic io de este a p n d ice , F ire fo x OS
p ro m u e v e el d e s a rro llo de a p lic a c io n e s n te g ra m e n te basadas
en te cn o lo g a s w eb, lo que p e rm ite que c u a lq u ie r p erso n a con
c o n o c im ie n to s b sico s en e sta s te cn o lo g a s p u ed a r p id a m e n te cre a r
u n a app c o m p a tib le p ara este siste m a o p e ra tiv o . Esto nos p e rm ite
| P A N E L DE A D M IN IS TR A C IO N
__________________________________________
Firefox b ro w se r nos pone a dispo sici n A p p M a n a g e r , el panei de adm inistracin principal de Firefox O S ,
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 fcil
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 botn 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 pestaa,
d irig in d o n os al m en Firefox /Desarrollador Web/
Firefox OS Sim ulator. Se cargar el A d d o n en esta
pestaa y, sobre el lateral iz q u ierd o , verem o s la
FIR E F O X O S K N O W L E D G E D A TA B A S E
Para seguir al pie de la letra la correcta instalacin de Firefox OS y conocer con mayor profundidad
sus caractersticas, podemos ingresar al link: www.developer.mozilla.org/es/docs/Mozilla/
Firefox OS/Using the App Manager, donde encontraremos un instructivo completo y detallado.
www.redusers.com
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, pas, ho rario , fecha, etctera. Una v e z co nfiguradas
las o p cio n e s p or d efecto de n u e stro sim ulad or, p od rem o s acced er
a la d escarga de a p lic a cio n e s d esd e F irefox M arketplace o co m en z ar
a a d ap ta r n uestras W ebA pps p ara d is trib u irla s en esta p lataform a.
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 an estos se encuentran en modo
b orrado r y no se recom ienda u tiliz arlo s.
Los a rch ivo s CSS poseen clases definidas para esta interfaz, sim ilares
a las de jQ u e ry M obile, con lo cual al e scrib ir un a rch ivo HTML,
p odrem os in vo ca r tags com o < d a ta -ro le = d ia lo g d a ta -ty p e = c o n firm >,
y as obtend rem os una ve n ta n a de dilogo que vis u a liz a r los botones
de co n firm aci n para ejecu tar otras accio nes y/ o cerrarse.
D entro de los sk in s o tem as que Firefox OS nos pone a disp o sicin,
se in clu ye n actu alm en te dos tem as especficos, a los cu ales accedem os
a trav s de las siguientes lneas de cdigo:
Ul alternativo
Igualm ente, si no q uerem os in vo lu crarn o s de lleno con el desarrollo
de ap licacio nes que u tilice n el estilo n ativo de Firefox OS, podem os
re c u rrir a la lib re ra de jQ u e ry M obile, sin que esto sea un im p edim ento
para d is trib u ir apps en M ozilla M arketplace.
www.redusers.com
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 cm o podem os ad ap tar nuestra app
G r e e n & B e r r ie s F a r m in g para que co rra de m anera n a tiva en Firefox
OS. Para ello, co p iem os la carpeta del p ro yecto a una nueva ubicacin
y, una vez realizad o esto, renom brem os la carp eta raiz del proyecto
com o FFOS - G R E E N & B E R R IE S FARM IN G .
Realizado esto, el siguiente paso ser crear un archivo Manifiesto, al igual
que el desarrollado en el captulo P h o n e G a p , que nos perm itir indicarle
al sistem a operativo las principales caractersticas de nuestra app.
Manifest.webapp
El a rch ivo Manifest.webapp es el p rin cip al objeto al que Firefox OS
apunta cuando e jecu ta una aplicaci n. En este, el sistem a o p erativo
m vil e n co n trar toda la in fo rm aci n referente a la aplicaci n, para
poder in stalarla en el sistem a o p erativo , m o strar su co rresp o nd iente
icono e identificar, entre otras cosas, el ttu lo y qu fu n cio n alid ad es
del so ftw are o h ard w are u tiliz a r al m om ento de ejecutarse.
Para ello, d entro del a rch ivo en cuestin, debem os vo lca r el
siguiente contenido, que in clu ye los com andos a travs de los cuales
id en tifica r las ca ra cte rsticas m encio nad as de nuestra app. Antes
crearem os, d entro del d ire cto rio raz de nuestro p royecto, un archivo
con este nom bre. A co ntinuaci n, escribirem o s el siguiente cdigo:
{
"v e rs i n ": " 1 .0 " ,
" a m e " : "G re e n & B e rrie s F a rm in g ",
"d e s c rip tio n ": "E je m p lo funcional de A p p para Fire fox OS - by Fem ando L u n a ",
"la u n c h _ p a th ": "/ n d e x.h tm l",
" ic o n s ": {
" 4 8 " : "/im agenes/gb-48.png",
" 6 0 " : "/im agenes/gb-O.png",
" 1 2 8 " : "/im agenes/gb-128.png"
"d e v e lo p e r": {
" a m e " : "F e rn a n d o L u n a ",
" u r l " : " http://w w w .vidam obile.com .ar"
www.redusers.com
316 l/SERSl A P N D IC E B. F IR E F O X O S
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 in, a tra v s de una U R L, validarla, ed itar el archivo m anifestw ebapp, y actu alizar e l p a c k a g e del
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
Distribucin de aplicaciones
Por ltim o, para d is trib u ir nuestras ap licacio nes en M ozilla
M arketplace, debem os in scrib irn o s com o d e s a b o lla d o re s de la
p lataform a. Y para subir nuestras ap ps debem os crear, p reviam ente,
un a rch ivo Zip con la carp eta que co n tien e todo el proyecto.
M ozilla e n via r nuestra app para su co rresp o nd ien te certificacin
y, al cabo de unos das, recibirem o s el OK de la im p lem en taci n
de esta d entro del M arketplace, o el co rresp o nd ien te KO con los
co m entario s que in d ica n por qu fue rechazada nuestra app.
Si q uerem os d is trib u ir ap licacio nes por p rim era vez, M ozilla
M arketplace es la m ejor opcin para in d u cirn o s en el fascinante
m undo del d esarro llo de las ap licacio nes m viles, tanto por su
sim p leza y costo cero, com o por otras tantas bondades prop ias
de la p lataform a.
www.redusers.com
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