Desarrollo web para dispositivos móviles .pdf

DESARROLLO WEB PARA DISPOSITIVOS MÓVILES HERRAMIENTAS PARA DISEÑAR Y PROGRAMAR W EBA PPS

por Fernando Luna

RedUSERS

U

S

E

F

t S

TIT U L O :

Desarrollo w eb para dispositivos m óviles

AUTORES:

Fernando Luna

C O LE C C IÓ N :

Manuales Users

FO RM ATO:

24xl7cm

PÁG INAS:

320

Copyright O MMXIV. E s una publicación de Fox Andina en coedición con DÁLAGA S.A. Hecho el depósito que m arca la ley 11723. Todos los derechos reservados. E s ta publicación no puede ser reproducida ni en todo ni en parte, por ningún medio actual o futuro sin el permiso previo y por escrito de Fox Andina S.A . Su infracción está penada por las leyes 11723 y 25446. La editorial no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamiento y/o utilización de los servicios y productos que se describen y/o analizan. Todas las m arcas mencionadas en este libro son propiedad exclusiva de sus respectivos dueños. Impreso en Argentina. Libro de edición argentina. Primera impresión realizada en Sevagraf, Costa Rica 5226. Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Aires en X, MMXIV.

ISBN 978-987-1949-83-0

L u n a , Fern a n d o D e s a r r o l l o w e b p a r a d is p o s it iv o s m ó v il e s . - l a e d . - C i u d a d A u t ó n o m a d e B u e n o s A i r e s : F o x A n d i n a ; B u e n o s A ir e s : D a la g a , 2 0 1 4 . 3 2 0 p . ; 2 4 x 1 7 cm . - (M a n u a l u se rs; 2 6 9 )

ISB N 978-987-1949-83-0

1 . In f o r m á t ic a . I . T ítu lo

CDD 005.3

4

USEftS

P R E L IM IN A R E S

Fernando Luna Es diplom ado en desarrolllo de aplicaciones para d isp o sitivo s m óviles y actualm ente se desem peña com o ana­ lista funcional de sistem as. Realiza tareas de relevam iento, diseño, prototipado y especificaciones técnicas para brindar soluciones inform áticas. Colabora con las revistas USERS y POWER USERS y en vario s blogs de program ación y tecnología. En el año 2011 lanzó su p rim er libro,

VISUAL BASIC 2010- M anual del programador. E-mail: fernando@ vidam obile.com .ar Twitter: @m obilepadawan Facebook: facebook.com/ferpro

Dedicatoria Esta nueva obra está dedicada a m is hijos Nicolás y Ju lián , que son el com­ bustible que im pulsa mi m otor de aprendizaje y constante mejora. A mi com pañera de vida, Laura, quien me brinda la perfecta arm onía em o­ cional; y a mis viejos, quienes siguen ilum inando desde el éter mi cam ino por este mundo.

Agradecim ientos Sin duda no puedo d ejar de agradecer a la ed ito rial por el constante ap oyo y o rientació n p ara que mi segundo sueño se co n vie rta en realidad. Tam bién a mi fa m ilia, q uienes siguen respetando mis tiem p o s y acom pa­ ñándom e en el sueño de ser autor.

»

www.redusers.com

USERS

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

Prólogo Mi infancia estuvo acom pañada de algún que otro juguete electrónico y tam bién de la pasión de mi padre por la música contem poránea, quien hizo que me criara desde tem prana edad rodeado de tocadiscos, com binados y grabadores m onoaurales. Por suerte (o por desgracia), la profesión de mi progenitor lo obligó a tener soldadores y destornilladores de todo tipo, y fueron estas herram ientas las culpables de incitarm e a saciar mi fanatism o por la electrónica, a conocer más de cerca cada com ponente que conform aba los artefactos. En mi ad olescencia me ocupé de aprender los secretos de la electrónica aplicado s al m undo de la radio, el audio y la co m ­ putación, en el m om ento en que a esta ú ltim a aún se la llam aba "electrónica d ig ital”. Ya con la pedagogía m oldeada, gracias a mi amigo Hernán, del m aravillo so m undo del silicio, las placas conductoras y las m em branas d ieléctricas, realicé un paso fugaz por el mundo de las com unicaciones entre radioaficionados. Luego llegó mi prim era com putadora, una 80286 con 2 MB de m em oria RAM, con la que com encé a dar m is prim eros pasos en el ám bito de la com putación: prim ero, com o operador ofim ático y diseñador gráfico; después llegaron la anim ación y el diseño asistido por com putadora; y, por últim o, la progra­ mación. En mi caso, la últim a fue la vencida. Los últim os protagonistas que generaron interés en mí fueron los BBS, seguidos de internet. Estas inm ensas centrales de inform ación que crecen día a día term inaron de fo rjar mis conocim ientos y mi pasión por este m a ravillo so m undo digital. La evo lu ció n tecnológica siguió avanzando, y hoy encuentro conjugados, en cualq uier d isp o sitivo m óvil, los cuatro elem en­ tos que m arcaron mi pasión por el desarrollo de aplicaciones para este pequeño m undo de bolsillo: la electrónica, la in fo rm á­ tica, las com unicaciones y la program ación. Esta últim a es, sin dudas, la que me perm ite estructu rar y m oldear la m anera en que quiero d isfru tar de las otras tres.

Fernando Ornar Luna

www.redusers.com

6

t/ S E / ?S

P R E L IM IN A R E S

El libro de un vistazo Esta obra está destinad o a d iseñ ad o res web, program adores y e n tu sias­ tas de la tecnología que deseen crear o ad ap tar un sitio w eb a los d isp o s i­ tivo s m ó viles. A lo largo del libro b rin d arem o s co no cim ien to s ú tiles para d iseñar y p rog ram ar W ebApps d inám icas y explotarem os las capacidades del h ard w are de estos d isp o sitivos.

PLATAFORMAS Y TECNOLOGÍAS MÓVILES COMPONENETES DE JQUERY MOBILE C o m o u su a rio s d e e q u ip o s m ó v ile s , s e g u ra m e n te

C o n la s n o c io n e s b á s ic a s d e e s t e fra m e w o rk ,

p e n s a m o s q u e la re vo lu c ió n d e e s t o s e s

e x p lo ta re m o s la s o p c io n e s q u e e s t e n o s brinda

m u y re c ie n te , p e ro e n v e rd a d lleva d é c a d a s

a t r a v é s d e lo s w id g e ts . C o m p o n e n te s q u e

g e s tá n d o s e . C o n o c e r e m o s la h is to ria y e v o lu c ió n

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

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

d ife re n te s p la ta fo rm a s m ó v ile s e n la s q u e se

c o m p e t id o r e s y la s h e rra m ie n ta s n e c e s a r ia s

d e s p le g a r á n u e s tro p r o y e c to w e b .

p a ra in g r e s a r e n e l d e s a r ro llo d e a p lic a c io n e s .

L / l/ l/ HTML5

1

INTERACCIÓN CON EL HARDWARE DE COMUNICACIONES

H T M L 5 e s e l le n g u a je q u e c o n ju g ó la tra n s ic ió n

H a b ie n d o c o n s o lid a d o e l le n g u a je H T M L 5

d e s itio s w e b , d e e s c r it o r io a m ó v ile s .

c o n jQ u e ry M o t )ile y J a v a S c r i p t , e s t e c ap ítu lo

C o n o c e r e m o s su s fu n c io n e s d e s t a c a d a s e

n o s p e rm itirá e x p lo ra r a l m á x im o la s d iv e rs a s

in g r e s a re m o s al m u n d o d e la s c o m u n ic a c io n e s

c a p a c id a d e s di 3 c o m u n ic a c ió n q u e p u e d e

d e la m a n o d e la g e o lo c a liz a c ió n .

d e s a r ro lla r una w e b m ó vil e n los s m a r tp h o n e s y ta b le ts .

l/ l/ l/

FUNDAMENTOS DE JQUERY MOBILE jQ u e ry M o b ile b rin d a a d is e ñ a d o r e s y

LENGUAJE S DE PROGRAMACIÓN

p r o g r a m a d o r e s h e rra m ie n ta s p a ra c r e a r

E l c o n te n id o d in á m ic o de la W e b n o s p e rm ite

una e s tr u c tu r a w e b m ó vil y fu n c io n a l.

c o m p le m e n ta r H T M L 5 , jQ u e ry M o b ile, Ja v a S c r ip t

A p r e n d e r e m o s a u tiliz ar e s t e fra m e w o rk , q u e

y el a c c e s o a l h a rd w a re d el d is p o s itiv o c o n

n o s s o lu c io n a rá fá c ilm e n te la a rd u a ta r e a de

el le n g u a je d e p ro g ra m a c ió n P H P y la b a s e

d is e ñ a r e s t é t ic a m e n t e una w e b h o m o g é n e a

de d a to s M y S Q L , p a ra d e s a rro lla r s o lu c io n e s

y m u ltip la tafo rm a.

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

»

www.redusers.com

7

USERS

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

* 0 7 PHONEGAP

ALMACENAMIENTO LOCAL Y APLICACIONES OFFLINE

E n e s t e c a p ít u lo in t r o d u c ir e m o s el

O tro a v a n c e surgido d e la p la ta fo rm a H T M L 5

f r a m e w o r k P h o n e G a p y e l s e r v ic io

e s la c a p a c id a d d e a lm a c e n a r in fo rm ació n en el

P h o n e G a p B u ild , q u e p e r m it e c o n v e r t ir una

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

W e b A p p p a r a m ó v ile s e n u n a a p p q u e p o d r á

lo s fu n d a m e n to s b á s ic o s d e la utilización d e W e b

d is t r ib u ir s e en la s p r in c ip a le s t ie n d a s d e

S t o r a g e , W e b S Q L , In d ex ed D a ta b a s e y A p p C a c h e

a p lic a c io n e s m ó v ile s .

*na

WEBAPPS PARA iOS

|¿V|/ *Ae»A ■

BB10, WINDOWS PHONE Y EMULADORES WEB

E l s is t e m a o p e ra tiv o m ó vil d e A p p le p re s ta

I |

l/ l/ l/

n o v e d o s a s c a p a c id a d e s p a r a W e b A p p s . Aquí

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

la s a p r o v e c h a r e m o s , m o d ific a n d o d e fo rm a

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

t ra n s p a r e n t e n u e s tra s a p lic a c io n e s w e b

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

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

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

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

p la ta fo rm a s virtuales, en c a s o d e n o p o s e e r los

WEBAPPS PARA ANDROID Y OTROS DISPOSITIVOS

I i

A n d ro id a d o p tó la s c a p a c id a d e s p r e s t a d a s p o r

E s t e a p é n d ic e e n g lo b a lo s fu n d a m e n to s de

e l n a v e g a d o r w e b S a f a r i. C o n o c e r e m o s c ó m o

F ire fo x O S , su s im u la d o r y la a rq u ite c tu ra d e

a g r e g a r u n a a p lic a c ió n w e b al e s c r it o r io de

s u s a p lic a c io n e s . T a m b ié n v e re m o s la s b a s e s

A n d ro id . L u e g o r e p a s a r e m o s la s s o lu c io n e s

p a r a d istrib u ir n u e s t r a s W e b A p p s e n M ozilla

q u e o tr a s p la ta fo rm a s o fre c e n e n e s t e te rre n o .

M a rk e tp la c e .

IN FO R M AC IO N C O M P LE M E N TA R IA A lo largo de este manual, podrá en co ntrar una se rie de recu ad ro s que le brindarán inform ación com plem entaria: curio sid ad es, tru co s, id e a s y con sejo s so b re los te m a s tratad o s. P a ra que pueda distinguirlos en form a m á s sencilla, c a d a recuadro e s tá identificado con diferentes iconos:

0

CURIOSIDADES E IDEAS

ATEN CIO N

DATOS UTILES

SITIO S W EB

Y NOVEDADES

www.redusers.com

«

8

C

E S IS

P R E L IM IN A R E S

Contenido Sobre el a u to r............................................................................ 4 P r ó lo g o

..........................................................

Ven tajas y desventajas entre platafo rm as

34

5

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

E l lib ro de un v is ta zo ...............................................................6

H T M L 5 ........................................................................ 36

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

C S S .................................................. ............................ 37

In tro d u c c ió n ............................................................................12

Ja v a S c r ip t .................................................................... 38 Lib rería s y fram ew orks m óviles................................ 39 Entornos de d e s a rro llo ...............................................41

R e s u m e n .................................................... - .............................43

Plataform as y tecnologías m óviles

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

In tro d u c c ió n a la W eb m ó v il............................. - ..............14 U n nuevo panoram a.................................................... 16 E l mundo w e b ......................................................

18

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

I HTM L5 E l le nguaje H T M L 5 .............................. - ............................. 46

20

Su principal objetivo................................................... 46

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

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

IO S .........................................................................................22

D o ctyp e........................................................................ 50

A n d ro id ........................................................................ 23

C h arset......................................................................... 52

W in d o w s P h o n e ...........................................................24

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

¿C uándo se conjugaron web y mobile w e b ?

B la c k B e r r y ................................................................... 25 Otros sistem as op erativos.......................................... 26

A p lic a cio n e s m ó v ile s ............................................................ 30 W e b A p p s...................................................................... 31

H T M L 5 para aplicaciones m ó vile s

............................. 56

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

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

63

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

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

R e s u m e n ..................................................

71

Apps híbridas............................................................... 32

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

Fundamentos de jQ u e ry Mobile ¿Qué es jQ u e ry M ob ile?........................................................74

hÉOlh

jQ uery M o b ile = jQuery, ¿o n o ? ................................ 75 ¿U tiliz a r jQuery M o b ile de form a local o rem ota?..7 6 In stalar JQ M de form a local......................................77

1 i 01 1 E ■-

»

www.redusers.com

Configuración de una W e b A p p con jQuery M obile ..79

E s tru c tu ra y w id g e ts ............................

80

USEMOS

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

P a g e .............................................................................. 80 H e a d e r......................................................................... 81 C o n te n í......................................................................... 81 F o o t e r ...........................................................................82 Navigation B a r ............................................................ 83 Transitions.................................................................... 84 Dialog P a g e ..................................................................86

E je rc ic io p rá c tic o ..................................................................87 C re a r la estructura H T M L ......................................... 88

R e s u m e n .................................................................................103 A c tiv id a d e s ...................................

104

I Interacción con el hardware de com unicaciones

9 ^FAHMlNG

L a W eb y el hardware A « «li!u «u y > r o n w * ’ lo » * K t i* » o o i|. c a v T t a u i r o i " t o t cU t 10 D'» a «urctooa:

de lo s d ispositivos m ó v ile s ............................................... 144 Hipervínculos en jQ uery M o b ile ..............................146

« • fe s

lo s O rg án ico s

Interacción con e l sm artphone o t a b le t ................ 147

p ió t e * » » » te n c u a , aoíwi. . « I *

P ro d u c to s Hld

n»Brua quMkCoa mr

^ PoaMu

«ru olM . i

Com unicación a través de redes sociales............... 156 M ensajes con U R I scheme d e T w it te r ................... 159

C om p ortam ien tos de los eventos

•o

C2J

i3>

♦ =>

M

según el d is p o s itiv o .............................................................165 Respuesta de eventos en ta b le ts.............................165 Respuesta de eventos en sm artphones.................. 167

I T*

U n a solución v ia b le ..................................................168

Com ponentes de jQ u e ry Mobile

In vo c a r llam ados y m ensajes de t e x t o ........................ 168 Ex ten d er el uso de L is tV ie w ................................... 169

C o m p o n e n te s .......................................................................106

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

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

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

Listas ........................................................................ 109 Listas fo rm atead as...................................................109 B u tto n s ...................................................................... 115 Text In p u ts................................................................ 121 T h e m e s ...................................................................... 127

E je rc ic io in te g ra d o r............................................................ 128 Adaptación a las pantallas de tab lets.....................128

R esum en

............................................................... 141

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

www.redusers.com

«

10

P R E L IM IN A R E S

E je rc ic io p rá c tic o : alm acenam iento lo c a l............... 225 Bases de d atos W eb S Q L ................... - ............................228

Lenguajes de program ación

Sistem as operativos que soportan W e b S Q L

E v o lu c ió n

........................................................................176

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

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

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

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

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

¿Q ué e s P H P ? ........................................................... 178

229

233

Cómo descargar una W e b A p p a undispositivo

234

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

A p p C ach e...................................................................234

M y S Q L ....................................................................... 188

R e s u m e n .................................................. ..............................237

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

A c tiv id a d e s ............................................. - ............................ 238

P H P y M y S Q L .............................................................

195

Funciones mysql connectO y m y q L s e le c L d b ()...1 9 6 .197 .197

.199

/ ---* cu •MIMIMi iin» iftiautft

200

M y S Q L 5.1 R eference Manual Includmg M y S Q L Cluslet N D B 6 X/7 X Reference G u id e

* • tJ,-

i

.216

i

| «

.215

• w llM » lIMtaM

** """ ....

—

—

W ebApps para iOS D iseñar una W e b A p p para iO S

...........................240

E l navegador S a fa ri y sus prestaciones..................241

E je rc ic io in te g ra d o r: A d d to hom e screen .................248 M o strar la W e b A p p com o n ativa en i O S ............... 249 Splash screen de la a p lica c ió n ................................ 251 A g reg ar splash screen a nuestro proyecto............. 254

R e s u m e n ..................................................

I

257

A c tiv id a d e s .............................................. - ............................258

Alm acenam iento local y aplicaciones offline A lm a cen a m ien to lo c a l..........................................

218

Comprobación de compatibilidad

W ebApps para Android y otros dispositivos

de un n aveg a d o r....................................................... 221

D iseñar una W e b A p p para A n d r o id ...........

Lo cal storage............................................................. 219

»

www.redusers.com

.260

11

USERS

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

L a generación B B 1 0 ................................................293 H erram ientas de desarrollo p ara B B 1 0 ................ 293

D esarrollo m ob ile para W in d o w s P h o n e .................... 297 W in d o w s Phone 7 y 8 ...............................................297 Instalación de herram ientas M icro so ft................. 298

E m u la r W e b A p p s en la com p u ta d ora .......................... 302 Utilización de Rip ple E m u la to r............................. 30 3 E l aporte de F ire fo x ................................................ 30 5

B

1 1 1

Google Chrom e p a ra Android:

Firefox OS

la estrella esp era d a ..................................................260

Un nuevo ju g a d o r en el ecosistem a m ó v il....... .........308

V is u a liza r una W e b A p p com o nativa en A n d ro id ....264

A rq uitectu ra de Firefo x O S ............................ ........3 0 9

C re a r los iconos p a ra nuestra W e b A p p ................. 264

C aracterísticas del S .O .................................... ........3 1 0

D efinir el m eta tag ...266

E l sim u la d or.................................................................

In sta la r la W e b A p p en A ndroid............................... 267

M ano s a la o b ra............................................... ........3 1 5

A g reg ar W ebA p p s en B la c k B e r r y .......................... 269

Testear nuestro d esarro llo ..............................

R esum en

............................................................. 271

A c tiv id a d e s

............................................................. 272

D istrib ución de a p lic a cio n e s ................................. .........318

PhoneGap In tr o d u c c ió n .........................................................................274 A r q u it e c tu r a ............................................................. 275 D re a m w e a v e ry P h o n e G a p ..................................... 276

C óm o tra n sform a r una W e b A p p en h íb rid a

277

M odificación de index.htm l..................................... 280 Cóm o testea r nuestra app com p ila d a .....................287

R e s u m e n ................................................................................. 289 A c tiv id a d e s ............................................................................ 290

BB10, Windows Phone y em uladores web P ro g ra m a ció n nativa para B la c k B e rry 1 0 .................292

www.redusers.com

«

12

USEFtS

P R E L IM IN A R E S

Introducción Si segm entam os los notables avances que tuvieron lugar en las últim as dos décadas en m ateria de evolución tecnológica, podem os resum irlos en tres actores im portantes: la com p uta­ dora personal, internet y la telefonía m óvil. Debemos destacar, adem ás, que este últim o actor tuvo su propio Big Bang dentro de la evolución m encionada, dado que no solo p erm itió com unicar a las personas en cualq u ier punto donde se encuentren, sino que tam bién supo tom ar lo m ejor de los prim eros dos actores y co n ­ ju g a rlo en un único producto. De este m odo, la te le fo n ía m ó vil logró consolid arse com o el p u nto de p artid a de todas las a ctivid a d es relacion ad as al uso co tid ian o de servicio s. A través de ella, ho y en día podem os re aliz ar m ú ltip les y va ria d as tareas, entre las que podem os m encionar: establecer co ntacto social con nuestro s pares, e n ­ v ia r y re cib ir m ensajes de correo electrónico, m irar nuestras series o p elícu las favo ritas, re aliz ar llam ados telefónico s, leer libros electrónicos, establecer una agenda de activid ad es, co m p rar p ro d u cto s y servicio s, n aveg ar p or in ternet y hasta p rep arar una receta de cocina. Com o d esab o llad o re s de aplicacio nes inform áticas b uscare­ mos, a través de esta obra, explotar estas nuevas tecnologías a p artir del desarrollo de soluciones que apro vechen los recursos que nos brinda hoy un teléfono inteligente o una tablet. G racias a la constante actualización de la tecnología basada en la Web, estas solu ciones pueden llevarse adelante tanto desde una aplicación n ativa instalada en un d isp o sitivo com o desde una página web cargada en nuestro navegador m óvil favorito. Los in vitam o s a descubrir, en las próxim as páginas, cómo podem os explotar cada una de las características que brindan los d isp o sitivo s m óviles, enfocándonos en la arquitectura de hardw are y softw are que cada uno de estos pequeños artefactos pone a disp osición del usuario.

»

www.fedusers.com

z o

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

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

Plataformas y tecnologías móviles En e ste c a p ítu lo c o n o c e re m o s la e v o lu c ió n d e la te c n o lo g ía m ó v il y w e b . V e re m o s c ó m o esta ú ltim a se a d a p tó al p e q u e ñ o m u n d o de lo s d is p o s itiv o s m ó v ile s h a c ie n d o q u e un s im p le te lé fo n o se c o n v irtie ra , en c o rto tie m p o , en un s m a rtp h o n e . T a m b ié n c o n o c e re m o s lo s p rin c ip a le s sis te m a s o p e ra tiv o s m ó v ile s , las d ife re n c ia s e n tre W e b A p p , a p p n a tiv a y a p p h íb rid a , y cu á les so n los fra m e w o rk s m ás p o p u la re s .

Introducción a la Web m óvil....14

▼Tecnologías de la Web actual ..35

Plataformas móviles................. 22

▼Resumen......................................43

Aplicaciones m óviles................ 30

▼Actividades................................. 44

14

F Z n iH

1 . P L A T A F O R M A S Y T E C N O L O G ÍA S M Ó V IL E S

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

LA P R IM E R A V E R S IÓ N D E U N A T A B L E T FUE

Los eq u ip o s u ltra p o rtá tile s o netbooks h icie ro n su p rim era a p arició n de la m ano de los h a n d h e ld s p resen tad o s p or Casio y

LA A P P L E N EW T O N ,

COMPAQ, a fines de la d écad a del 90. Casiopeia

LA N Z A D A EN LA

A - l l y COMPAQ C-2010 fu ero n los p rim ero s d isp o s itiv o s m ó vile s que b uscaro n a ca p a ra r el

D ÉC A D A D E 1990

lu g ar que las netbooks a lca n z a ro n entre 2006 y 2011 en el m ercado de co m p u tad o ras. Este tipo de d isp o sitivos, ju n to con los

escáneres de m ano Psion, rescataron el sistem a o p erativo Windows CE pensado originalm ente para los handhelds de Casio y COMPAQ. Hoy, W indow s CE sigue vigente y presta servicios a equipos Psion, entre otros.

»

www.redusers.com

E S S 3

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

15

Figura 1. COMPAQ C2010 y Casiopeia A - ll (1998) fueron las primeras netbooks, mientras que Apple Newton (1993) fue la primera tablet que inspiró el lanzamiento de los PDA. En el segmento de los sm artphones, podem os destacar que la llegada tem prana de estos dispositivos al m ercado de telefonía m óvil fue de la m ano de Nokia. Algunos años más tarde se sumó la firma Sony Ericsson. N o k ia lanzó, en m arzo de 1996, el te lé fo n o co m p u tad o ra Nokia

9000 Communicator, d is p o s itiv o que tu vo algunas e vo lu cio n e s y fin a liz ó su e x iste n cia en el 2004 co n el m od elo Nokia 9500

Communicator. Su ú ltim a v e rs ió n ten ía Bluetooth, Wi-Fi, teclad o fís ico QWERTY y un sistem a o p e ra tivo gráfico c u y o naveg ad o r so p o rtab a páginas en Flash. El N okia 9000, el p rim ero de la serie, p u d o co n o ce rse en la p e líc u la El Santo , en la que el personaje p rin c ip a l u tiliz a b a el s e rv ic io de m ú ltip le s cu en tas de e-mail y hasta re cib ía faxes a tra vé s de este teléfono.

\¿\¿)¿

R ED U S ER S PREM IUM P a ra

o b tener m aterial ad icional gratuito,

ingrese

a la

s e cc ió n

P u b lic a c io n e s / L ib ro s dentro d e

h ttp :/ / p r e m iu m .r e d u s e r s .c o m . Alli p o d rá ve r to d o s n u e stro s títulos y a c c e d e r a con ten id o extra de c a d a uno, c o m o los ejem p lo s utilizados por el autor, a p é n d ic e s y a rc h ivo s ed itab les o d e cód ig o fuente. E n tre los co m p le m en to s d e e s te libro en co n tra rá , a d em á s, tutoriales en vid eo para m ejorar la co m p ren sió n de lo s c o n c e p to s d esarro llad o s en la obra.

www.redusers.com

«

16

USEftS

1 . P L A T A F O R M A S V T E C N O L O G ÍA S M Ó V IL E S

A lg u n o s años d esp ués, So n y Ericss o n llegó al m ercad o con su m o d elo P990, un teléfo n o tá ctil con p a n ta lla gráfica de 2S6 co lo res y Stylus pen para el m an ejo de las a p lic a cio n e s en pantalla.

Figura 2. De izquierda a derecha: Sony Ericsson p990, Palm Pilot y Nokia Communicator 9500, equipos considerados como los primeros smartphones. H oy podem os d ecir que gran p arte de los fracasos de esa época pudo deberse a la ausencia de ap licacio nes que d ieran v a lo r agregado a estos d isp o sitivo s. A lguno s de estos term in ales tu vie ro n una tienda de ap licacio nes propia, pero estaba lim itad a a los d esarro llo s de las resp ectivas em p resas o de algunos socios m uy cercanos a estas.

Un nuevo panorama En 2007, el panoram a mobile cam bió por com pleto. Apple presentó el iPhone, las netbooks explotaron en ven tas y, un año más tarde, ap areciero n las tablets. Así fue com o la tecnología que había su rg id o entre diez y q uince años antes reapareció en el m ercado com ercial con otro fo rm ato y de la m ano de nuevos jugad ores. Ju n to con ellos, llegaro n los app stores o tiendas de ap licacio nes. Estos facto res p erm itie ro n a b rir el m ercado de ganancias, no solo a las co rp o racio n es que d esarro llan estos p roductos, sino a cu alq u ier p a rtic u la r o pequeña co rp o ració n . D entro de estos m ercados, los que m ás generan ingresos ho y son los de la telefo n ía m ó vil, con su batería de apps g ratuitas y pagas, seguidos p or el m ercado de las tablets.

»

www.redusers.com

D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M Ó V IL E S

USE&S

En algunos países com o A rg en tin a, la telefonía ce lu la r acaparó el m ercado de m anera im pensada, su p eran d o en núm ero a la telefonía fija e in clu so a la p oblación de toda una nación. En un estu d io lle vad o ad elante en 2013, la p oblación argentina se estim ó en 45 m illo nes de habitantes. La te le fo n ía fija se calculó en 12.5 m illo nes, m ien tras que la telefonía m ó vil era de 52.3 m illones de celulares en uso. En el ú ltim o lustro, la telefo n ía m ó vil superó con creces a la cantid ad de líneas telefón icas de hogares y, en m uchos casos, el teléfono ce lu la r reem plazó p or com pleto a las líneas fijas. Con la p ro life ra ció n de líneas telefó n icas m ó vile s y abonos para las conexiones de datos com o 2G, 3G y 4G, algunas netbooks y tablets in co rp o raro n en sus m odelos la opción de in stala r un ch ip GSM para re a liz a r llam adas, e n via r SM S o n aveg ar por la Web.

Top 5 d e plataform as m óviles entre Ju lio d e 2 0 1 3 y Sep tiem b re d e 2014

Android

IOS

Se rie s 40

Sa m su n g

Blackberry OS

W ind ow s Phone

Figura 3. Con una clara ventaja por sobre la competencia, Android dominaba, a fines de 2013, el mercado de los smartphones, donde lleva más de 250 millones de equipos vendidos. En 2009, p re v io a l la n z a m ie n to del iPad, m u ch as em presas q u is ie ro n ad elan tarse al ru m o r de la tab le t de A p p le y p resen taron su a lte rn a tiv a : h icie ro n funcio nar, en m odo tá ctil, sistem as o p erativo s com o W in dow s Vista y Seven, y algunos, A n d ro id . Tam b ién llegaron los h íb rid o s: netbooks que p erm itía n to rce r su p an talla para c o n v e rtirla en un d is p o s itiv o táctil.

www.redusers.com

c_/si=*?s

18

1. P L A T A F O R M A S Y T E C N O L O G Í A S M Ó V IL E S

Pese a los esfuerzos realizados p or las firm as IT, iPad rom pió todas las reglas y no consiguió tener un com petidor decente que le hiciera frente.

El mundo web Si b ien en las lín e a s a n te rio re s d e sc rib im o s lo que es una

p lataform a móvil, p od ríam o s, ahora, d e fin ir el co n cep to: se trata de todo aquel d is p o s itiv o de fá c il traslad o , que d isp o n e de d eterm in ad as p restacio n es que nos a y u d a n en el d esem peño d iario de nuestras a c tiv id a d e s la b o ra le s y/ o académ icas. Entre las ca ra c te rís tic a s m ás im p o rtan te s de u n a p latafo rm a m óvil, podem os destacar: •

Siste m a o p e ra tiv o am igable.

•

C o n e ctiv id a d a internet.

•

D isp o n ib ilid a d de a p lic a cio n e s p ara m ú ltip le s p ro p ósito s.

•

M ú ltip le s o p cion es de co m u n icació n con n u e stro s pares.

•

In te g ra ció n de correo e le ctró n ic o y o tros m ed ios de co m u n icació n .

•

A lm a ce n a m ie n to de d o cu m en to s vario s.

•

A cceso a co n te n id o s m u ltim ed ia.

D e p e n d ie n d o de la e m p resa fa b rica n te p or la que optem os, p odrem os tener m ás o m enos s e rv ic io s in teg rad o s en el d isp o s itiv o . Sin em bargo, en las p lata fo rm a s m ó vile s co n sid e ra d as de “gama m e d ia ” en ad ela n te , co n tam o s con todas las ca ra cte rís tica s listadas. H o y el m ayo r uso de p la ta fo rm a s m ó vile s pasa por los sm artp ho n es o te lé fo n o s in telig en tes; luego, p or las tab lets; y, p or ú ltim o , las n etb o o ks o u ltra b o o k s (una categ o ría que se in teg ró en 2012). Las ta b le ts v ie n e n cre cie n d o fu ertem ente en el cam p o de im p le m e n ta ció n acad ém ico , lab o ral y, p or ú ltim o , p ersonal, y desde el

IN IC IO S DE LA T E C N O L O G ÍA W A P W ire le s s A p p lic a tio n P r o to c o l n ació c o m o un e s tá n d a r a b ierto p ara a p lica c io n e s que se com unican d e m a n era

inalám brica. Asi, se

e s ta b le c ió un conjunto

de p ro to co lo s que

norm alizó la

m anera

d e e n te n d e rs e entre dispositivos inalám b rico s, co n el objetivo de a c c e d e r a los princip ales se rvicio s web (e-mail, new sletter, w eb).

»

www.redusers.com

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

año 2012 su ve n ta su p era al co m e rcio de co m p u tad o ras de e scrito rio y p o rtátiles. Entre todas las prestaciones que los sm artphones nos brindan, vale destacar que la m ayoría de estas pasan ho y p or un m ism o canal: la Web. El m u nd o web se in ic ió en 1994 de form a m a siva y, en 1995, ya se h ab ía ex p an d id o h acia n u m e ro so s nichos, tan to c o rp o ra tiv o s com o acad ém ico s y p a rticu la re s. El d e s a rro llo de la Web, tal com o la co no cem o s, p a rtió de la m a sifica ció n de sitio s c o rp o ra tiv o s, del uso c o tid ia n o del correo e le ctró n ico , de la in te g ra ció n de salas de chat y sistem as de m e n s a je ría in stan tán ea, d en tro de los cu ales d estacam o s a ICQ com o el p io n e ro en este cam po. Con el tiem po, tam bién se in tro d u je ro n m ejoras, com o ser: la m úsica digital, la v is u a liz a c ió n de vid eo s, la integración de p latafo rm as de d esarro llo de w eb s d inám icas de m anera más am igable y, p or supuesto, la p oten ciación de la estética de los sitio s web de la m ano de la casi extinta tecnología Flash.

-i

Figura 4. ICQ, la Web estática, Internet Explorer y Macromedia Shockwave Player son algunas de las primeras tecnologías web en el nacimiento de internet.

El mundo mobile web Si bien iPhone replanteó el concep to de la Web en los d isp o sitivo s m ó vile s al m o d ificar su naveg ad o r web, Safari, con d eterm inad as ca ra cte rísticas H T M L y CSS p rop ias de una p antalla de m enos de 4 pulgadas, la Web m ó vil ya existía en la telefonía ce lu la r desde inicios de la década de 2000.

www.redusers.com

20

c_/si=*?s

1. P L A T A F O R M A S Y T E C N O L O G Í A S M Ó V IL E S

M uchos teléfonos -com o el Nokia C om m unicator o So n y Ericsson p990- ya incorporaban un navegador web en sus equipos m óviles. Y los handheld CO M PAQ y Casio de fines de la década del 90 tam bién poseían una versión reducida de IE, bautizada com o Pocket Internet Explorer. Hacia fines de los 90, los handheld p oseían una p antalla de 7 pulgadas que p erm itía co n tar con reso lu cio n es de 800x480 u 800x600

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

¿Cuándo se conjugaron web y mobile web? Las tecn o lo g ías 2G y 3G, ju n to a la c o n e c tiv id a d Wi-Fi p ortada a los m ó vile s, h iciero n p o sib le que la te le fo n ía m ó vil e x p lo tara en todo su esplendor.

iPhone 1 im p lem en to una serie de ctags HTML> a la ve rsió n m ó vil del navegador web Safari. Este fue el in ic io de las in vestig acio n es de nuevas o p cion es que p e rm itiría n d istin g u ir una conexión de com p utadora norm al de una conexión m óvil.

E L IP A D EN L A U N IV E R S ID A D D e sd e el lanzam iento d e iPa d en 2 0 1 0 , m u ch a s u niversid ad es em p ezaron a tom ar en serio e s te d ispositivo c o m o herram ienta d e aprendizaje. U n a de la s p rim e ra s fue Se to n Hill University (w w w .s e to n h ill.e d u ), que d esd e abril de e s e año co m en zó a utilizar e s te dispositivo c o m o h erram ienta p a ra to d o s su s alumnos.

»

www.redusers.com

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

Con la im p le m en ta ció n de tags p ro p ietario s para m obile, sum ada al hecho de que JavaScript siem p re estu vo presente en este tip o de d isp o sitivo s, co m en zaron a crearse alte rn ativa s que com b inaban las tecnologías H TM L, CSS y Ja v a S c rip t para m ejorar el terreno m ó vil y lograr, así, m ejores p ro d ucto s basados en la Web.

C23

Figura 5. La evolución de la Web móvil desde la era WAP a inicios de 2000, escalando en la evolución iPhone y finalizando en las actuales aplicaciones web. La tecnología Flash no se vio p ro m o vid a sobre la p latafo rm a web porque, para la carga de un sitio Flash en una com p utadora de escritorio , se requería de un tiem po que iba de unos segundos hasta al m enos un m inuto. Esto se trad u cía en una im p o rtante cantid ad de m in u to s de dem ora, sum ados a la baja m em oria RAM y los escasos

M egahertz de los p rocesadores de aquella época. Luego, p ara te rm in ar de p ro m o ve r las tecnologías m ó vile s y co n ju garlas con el m enor im pacto posible con las tecnologías de la Web básica, se in ició un plan que perm itiera, m ediante H TM L y CSS, unificar el d e sa rro llo web para más de una plataform a. Esto es lo que se conoce ho y com o HTML5. No solo es el p rincip al responsable de la unificación web (desktop y m obile), sino que se integra con CSS y Ja v a S c rip t de m anera tal que las tres tecnologías b rin d an las h erram ien tas necesarias para lograr una ú n ica web, con el m enor esfuerzo p osib le, p ara todas las p lataform as.

www.redusers.com

22

c_/si=*?s

1 . P L A T A F O R M A S V T E C N O L O G Í A S M Ó V IL E S

Plataformas móviles El m ercado m o b ile d isp o n e de un núm ero im p o rta n te (y d ifíc il de c a lc u la r) de p lata fo rm a s m ó vile s que agrup an tanto a los teléfonos in te lig e n te s com o a las tab lets y d isp o s itiv o s h íb rid o s (aq u ello s que co n ju g an una tab let con una co m p u ta d o ra p o rtá til). D entro de este m ercad o a m p lio y lle n o de m arcas y m odelos, lo que m ás im p o rta a un d e sa rro lla d o r es la p lata fo rm a basad a en so ftw are, ya que la Web m ó vil se enfoca siem p re en el softw are, que es el encargad o de in te rac tu a r con el h a rd w are en sí. Por ello, nos ce n trarem o s en co n o ce r los sistem as o p e ra tivo s que actu a lm e n te existen, con sus lim ita cio n e s y co in cid e n c ia s en el m und o m ó vil.

¡OS Este sistem a o p e ra tivo es p ro p io de la firm a A p ple. Fue d e sa rro lla d o en 2006, para se r in teg rad o al la n z a m ie n to de iPhone en el año siguiente. In icia lm e n te este sistem a o p e ra tiv o no ten ía un nom bre d efin id o tal com o lo conocem os ahora; sim p le m e n te , se lo llam aba iPhone OS. A p p le afirm aba que iPho ne co rría una ve rsió n a d ap ta d a de OSX.

iOS o b tu vo su nom bre oficial recién a p rin c ip io s de 2008, cuando A p p le o fic ia liz ó el la n z a m ie n to del iPhone SDK, que p e rm itía a c u a lq u ie r d e sa rro lla d o r crear a p lic a cio n e s para este m ercado. Con el tiem po, iO S se ad ap tó a las v e rs io n e s tá ctile s de iPod, iPad y, finalm ente, a A p p le TV, aun q u e este ú ltim o no puede e je cu ta r las a p lic a cio n e s iO S cread as para el e co sistem a iPh o n e y iPad. A l m o m en to de e s c rib ir esta p u b licació n , iO S a lca n z a la v e rs ió n 7.1, la cual fu n cio n a en d is p o s itiv o s iPho ne 4S, iPad 2 o s u p e rio r y Apple

L A T E C N O L O G IA W A P DIA A DIA La p rim era lleg ad a d e internet a los teléfo n o s m ó viles fue a tra vé s d e la tecn o lo g ía W AP, q u e utilizaba la frecu en cia p o rta d o ra de se ñ a l telefó n ica p a ra en viar y re cib ir d a to s. L o s n aveg a d o res w e b m o strab an p á g in as sim ilares (texto e im á g en es) a ia s utilizadas en la d é c a d a del 90.

»

www.redusers.com

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

B s s a

23

T V 2.0 o superior. La firm a de C u p e rtin o ha d ejad o de d ar soporte p ara el sistem a o p e ra tiv o iO S 4.0 o a n te rio r y p ro m u e ve en su sitio web la a d ap tació n de ap p s para iPad, iPod To u ch y iPho ne a la ú ltim a ve rs ió n d isp o n ib le . A p p le es d e sa rro lla d o ra tan to del h ard w are com o del sistem a o p e ra tiv o de to d o s sus d isp o s itiv o s m ó viles.

Android El s iste m a o p e ra tivo A n d ro id , actu a lm e n te p ro p ied ad de G oogle Inc., tu v o sus oríg enes com o un sistem a o p e ra tiv o m ó vil in d ep en d ien te, p ro p ied ad de A n d ro id Inc.. En base al interés de Google p or el m ercad o de d isp o s itiv o s m ó vile s, la firm a v io que el m und o su cu m b ió a

CUAN D O G O O G LE C O M PR Ó A N D RO ID , CO M EN ZÓ A A D A P T A R E L S IS T E M A A S U S

la p ro p u esta de A p p le cu an d o se rum oreab a, en

N E C E S ID A D E S

2006, sobre el p o sib le lan z am ien to de iPho ne, y d e c id ió a d q u irir u n sistem a o p e ra tivo a van z ad o en cu an to a p re stacio n e s, p ara p o d e r e n tra r de lle n o al m ercad o m o b ile, con u n a h e rra m ie n ta sólida.

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

www.redusers.com

«

24

USEftS

1 . P L A T A F O R M A S V T E C N O L O G ÍA S M Ó V IL E S

au n q ue sin el so po rte oficial de esta em p resa (m o tivo por el cual deben te n e r su m ercad o in d e p e n d ie n te de ap lica cio n e s). D en tro de las ve rsio n e s a lte rn a tiv a s de A n d ro id , pod em os destacar la u tiliz a d a p o r la firm a XIAOMI, m uy p o p u la r en C hina, co n un m ercad o de más de 40 m illo n e s de d isp o s itiv o s ve n d id o s, y la a d ap ta ció n Fire OS, b au tiz a d a así p or Am azon, q u ie n tom ó el código fu ente de A n d ro id y creó sus p ro p ia s tab lets e e-readers, com o así ta m b ié n su p ro p io eco sistem a de ap lica cio n e s.

Figura 6. ¡OS 7.1 y Android 4.4, los actuales sistemas operativos móviles que reinan el mercado de smartphones y tablets.

Windows Phone M icrosoft tam bién irru m p ió , en 2010, en el m ercado de la telefonía m ó vil con su sistem a o p e ra tivo W indows Phone. Este fue una re in g en iería co m p leta del v ie jo sistem a o p e ra tivo W indows Mobile, que no había logrado interés en la p oblación y que M icroso ft tam bién había dejado ab and o nad o en su m om ento. A co rralad a p or el creciente uso de d isp o sitivo s m ó viles, la firm a de Redm ond d ecid ió ingresar en este terreno desde cero, con un nuevo desarrollo. W in d o w s Phone, al m om ento de e scrib ir esta publicació n, se e n cu en tra en su ve rsió n 8.1, aunque en el m ercado se encuentran m u chos d isp o sitiv o s de ve rsió n 7.x activos.

»

www.redusers.com

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

[g s a s a

25

BlackBerry RIM se reb au tiz ó en 2013 com o BlackBerry para u n iñ ca r la im agen de la co m p añía con la de sus p ro d ucto s estrella. Black Berry actu alm ente se encuentra en la ve rs ió n 10.2.1. A p a rtir de la ve rsió n 10.0, realiz ó una re ing en iería co m p le ta de su p latafo rm a m ó vil, al tom ar el sistem a o p e ra tivo

QNX com o base.

B L A C K B E R R Y P E R D IO

Este s iste m a o p e ra tiv o g a ra n tiz a , d esd e hace

M ER C A D O PO R NO

m ás de una d écad a, un c o rre c to fu n c io n a m ie n to m u ltita re a en tiem p o real. A n iv e l m u n d ial,

H A B E R A C TU A LIZA D O

B la c k B e rr y p e rd ió gran p arte de su m ercado

A T IE M P O SU S IS T E M A

p o r el p oco in te ré s en a c tu a liz a r a tie m p o su s iste m a o p e ra tivo .

O PER A T IV O

A ún en el m ercado se pueden enco ntrar equipos B lack B e rry co rriend o la ve rsió n 7.x de su sistem a operativo . BlackBerry, al igual que A p ple, es d esarro llad o ra del h ard w are y sistem a o p e ra tivo de todas sus p latafo rm as m óviles.

f

09:00

-V

ÉÜ ® ir & «

lo a * á »n d mucH rrwit»

t t * • • * t o M i m . V o n w » « n jo y it.

T r y lt Y o j r s e l f E x a m p ie s in E a ch C h a p te r •M* tuuiut

W T M r v ir t

D G * CSS DOMEv*m O bJ#ct»

i* T»> * w a r

-CMC»" *»» Iiv ilo w i x** erme « r i t r t •» i

M y F ir s t J a v a S c r ip t E x a m p lt »*WH 8 p*>*7ip

• n m il.»

Figura 16. www.w3schools.com es un buen punto de partida para aprender JavaScript desde cero.

Librerías y fram eworks móviles Para co m p re n d e r m ejor los térm inos del d esarro llo web, debem os separar los térm ino s libre ría y fram ework. Una lib re ría es un

I I

CSS3: E L VE R D U G O

1

La última versió n c o n o c id a d e C S S e s la versió n 3 , en la q u e se inco rp o raro n ve n ta ja s co m o anim ación, d is e ñ o g rá fic o y estilo s e s p e c ífic o s para la e s té tic a w eb, q u e hicieron q u e C S S , junto c o n Ja v a S c rip t, se tra n s fo rm a ra en e l verd ugo del c a s i olvidado A d o b e Fla sh , pionero de la d é c a d a del 2 0 0 0 en el diseño w e b d e sitios anim ados.

www.redusers.com

«

40

USEftS

1 . P L A T A F O R M A S V T E C N O L O G ÍA S M Ó V IL E S

co n ju n to de tecnologías que puede englobar

L A S L IB R E R ÍA S M Á S

características de CSS y Ja v a S c rip t y que nos

CO N O CID A S SON

facilita, de alguna m anera, el desarrollo de una solución web para am bas p lataform as. D entro de

JQ U E R Y M O B IL E ,

las lib rerías más co no cidas, podem os m encio n ar

SEN C H A TO U C H

a jQ u e r y Mobile, Sencha Touch y jQ u e r y UI, entre otras.

Y JQ U E R Y U I

Estas se ocupan de co m p a cta r fu n cio n alid ad es que requieren m ucho tiem po de elab o ració n por parte de un d esa rro llad o r en funcio nes específicas

que nos ap ortan agilid ad al m om ento de d e sa rro lla r y nos perm iten d esp reo cup arn o s p or la estética o solución cu an d o el p ro yecto se deba ejecu tar en d iferentes p lataform as. Por otro lado, el fram ew o rk nos p erm ite englobar, en u n único entorno, todo el co n ju n to de a rch ivo s y A PIs que nos perm iten d e sarro llar una solución, estructu rad o s de una m anera jerárq u ica . D entro de los fra m e w o rk s más co n o cid o s, pod em os m e n cio n ar a Eclipse y N etbean s com o los m ás p o p u lare s y g ratu ito s, y a

D re a m w e a v e r d en tro de los fram ew o rks pagos. Todos estos p restan ca ra cte rís tica s sim ila re s, aunque con alg u n o s to q ues p erso n ales, y p e rm ite n in c o rp o ra r las lib re ría s m e n cio n ad as a n te rio rm e n te sin m a yo re s p rob lem as.

Figura 17. jQuery Mobile y Sencha Touch son las dos librerías más utilizadas para realizar WebApps y apps nativas.

»

www.redusers.com

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

Entornos de desarrollo Los entornos de d e s a r r o llo (IDE, p or sus siglas en inglés) p e rm ite n in co rp o ra r fu n c io n a lid a d e s extra de m an era n a tiva para e je cu ta r los d e sa rro llo s en un am b ie n te de test, s im u la d o r y hasta para co m p ila r los p ro ye cto s re a liz ad o s de m an era nativa. D entro de los e n to rn o s de d e sa rro llo m ás co m unes e n co n tram o s a D ream w eaver, V isu a l Stu d io , QNX Mom entics IDE, Titanium Studio. entre otros. Los fra m e w o rk s tam b ién p e rm ite n re a liz a r co m p ilacio n es de p ro ye cto s que se d e s a rro lla n de m anera n ativa , pero generalm en te re q u ie re n de u n p lug in que p erm ita lle v a r a cabo esta acció n.

Dreamweaver El ID E elegid o para lle v a r a d e la n te los d e s a rro llo s será A d o b e

D ream w eaver. Este fu e elegid o d eb id o a que, desde el año 2010, in teg ra el d e s a rro llo web m o b ile de m anera n ativa . En 2012, la firm a A d ob e a d q u irió la m e n cio n a d a e m p resa PhoneG ap, que perm ite c o n v e rtir una web a ap p para las p lata fo rm a s m ó vile s m ás pop ulares, y con esto integró de m anera tra n sp are n te el uso de Pho neG ap d entro del ID E D ream w eaver.

J D re am w eaver C C

wm El nuevo estándar en estándares web. U u a v a « u n r w w a , a rra c / i » « i« n * á n » o a n a a vto

rt^rlpadanartojíprocrnwcfctofmcmto

Mí? jn - H '- r -

c*'c«— 6«c & w

conecacas y * tas nne.*i

*•-naí-.a

ce *0 c c ^ . v j . i

rc'¡ D W "«•••**IC t*

w t l c a i c a la i o - o c C - i , • * a . j c a a m a r r a n a » » a c e m e a ta i

m

a E s to es una página w eb < S cript> Function SaludoO { A le rtO H o la m undo'); >

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"> < ! - E structu ra de la página, mentís, textos, im ágenes, videos, etc -->

En el cuerpo de página se inco rp o ra todo el contenido que n o rm alm ente visu a liz am o s en las páginas web de los sitios que v isita m o s. Entre ellos: •

El logo de la empresa.

•

La b arra de navegación o m enús.

•

Fragm entos de textos e im ágenes.

• Video, audio, Iin ks hacia otros tip os de archivo. • G ale ría de im ágenes.

Si aún no hemos instalado ningún ed ito r de H T M L (como, por ejem plo, Dream w eaver), podem os ab rir Notepad o Notepad++ y copiar el código de estos ejem plos en el orden en que fueron expuestos. Luego guardam os el a rch ivo en form ato H TM L bajo el nom bre index.html, y hacem os doble clic sobre él para verlo en el navegador.

www.redusers.com

52

2 . H TM L5

Figura 5. Dreamweaver permite identificar la estructura HTML, indicando con diferentes colores cada sección y notificando si hay un error de tipeo.

Charset D entro del doctype co rresp o nd ien te a HTM L4, se d eclara charset, que es u tiliz a d o para d efin ir el id io m a en el cual se realizará la página web (español, inglés, francés, portugués, etcétera). Esto afecta la vis u a liz a ció n de los caracteres.

... S tr¡c t/ / E I\ T ...

En HTML5 se sim plificó esto, generando un charset internacional, que perm ite la correcta visu a liz a ció n de todos los caracteres existentes.

c m e ta c h a rs e t= "u tf-8 ">

E D ITO R E S H TM L P a r a el o b je tivo d e e s te libro, u tiliz a re m o s D r e a m w e a v e r c o m o e d ito r H T M L p re d e te rm in a d o . D e s d e w w w .a d o b e .c o m p o d e m o s d e s c a rg a r la v e rs ió n d e p ru e b a q u e d u ra 3 0 d ía s. S i no, tam b ié n p o d e m o s re c u rrir a a lte rn a tiv a s c o m o N o te p a d + + , E c lip s e o N e tb e a n s . q u e ta m b ié n re sa lta n la sin ta x is d el len g u aje.

»

www.redusers.com

USEKS

D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M Ó V IL E S

53

Si deseam os d ecla rar un ch arset específico para

P A R A D E C L A R A R UN

que la página se ve a co rrectam ente en inglés, español, o en el idiom a que fuere, debem os

C H A R S E T E S P E C ÍF IC O

buscar la referen cia ISO específica al charset del

D E B E M O S B U S C A R LA

id io m a necesario. Por ejem p lo , en español se u tiliz a Charset=ISO 8859 1.

R E F E R E N C IA ISO D E L ID IO M A N E C E S A R IO

Estructura de un documento HTML5 Ya conocem os cóm o se e stru ctu ra un d ocum ento H TM L, tanto en su encabezado



com o el co n ten id o del cuerpo de la página

< body> .

Nos queda p or delante repasar las secciones creadas para HTML5 que represen tan el co n ten id o de una página web. Todos los sitio s in co rp o ran en su e stru ctu ra una m etodología sim ilar para agrupar las d iferen tes secciones de un sitio. D entro de estas, podem os destacar las siguientes: • Un encabezado (texto y/o logo). •

Una barra de n aveg ación (lateral o superior).

• Un área central donde figura(n) la(s) n o ticia(s) o in fo rm ació n general. •

Una barra lateral con in fo rm ació n o lin ks adicionales.

• Un pie de página.

Encabezado

B a rra

B a rra d e navegación

(links. publicidad)

Cue rp o principal (N o ticias , im á g en e s, videos, e tc .)

P ie d e pág in a

1

Figura 6. Representación gráfica de las secciones de un sitio promedio. HTML5 buscó nombrar cada sección de una manera mucho más amigable.

www.redusers.com

«

54

l/SERSl

2. H TM L5

HTM L5 etiquetó cada secció n con un nom bre que la referen cia am igablem ente, para m ejorar la tarea del d ise ñ ad o r web, com o tam bién la de los m otores de indexación. Veam os, en la siguiente tabla, el nom bre de cada elem ento y su m anera de im p lem entació n.

N U E V O S E L E M E N T O S E N H TM L5 ▼ ELEMENTO ▼CÓDIGO DE IMPLEMENTACIÓN

-

••• ••• M

T DESCRIPCIÓN

H eader



Cabecera de la página.

Hgroup



P e rm ite agrup ar tags

< h l> T ítu lo l< / h l>

del tipo títu lo dentro de

< h2 > S u b título 2

Header.

Nav



P e rm ite cre ar una barra

< a h r e f= " lin k l.h t m r > lin k l< /a >

de navegación principal

l¡n k 2

que contiene diversas etiquetas.

Section



P e rm ite d e finir un área

< h 2 > Títu lo 2

de contenido dentro de



un sitio w eb. Se u tiliza

< p> Texto de la sección

habitualm ente en los



blogs, para agrupar cada noticia o post.

Footer

< fo o te r>

Representa el pie de

< p > C op yrigh t 2014 - Redusers -

página de un sitio web.

Fernando Luna

E L EC O S IS TE M A C H A R S E T D ad a la diversid ad de lenguas ex isten tes en e l mundo, e s co m p lica d o ab ord ar en profundidad to d o lo referen te al c h a rs e t. Y no p o d e m o s dejarlo d e lado porque en el futuro n o s p ued en requ erir el d esarrollo de a p lica c io n e s en cualquier idiom a. P o r ello, d e b e m o s ap un tar e l siguiente link de referen cia para s a c a rn o s cualqu ier duda: w w w .d e s a r r o llo w e b .c o m / a r tic u lo s / ju e g o -c a r a c te r e s -c h a r s e t-h t m l.h tm l

»

www.redusers.com

►

USEKS

D E S A R R O L L O W E B P A R A D IS P O S IT IV O S M Ó V IL E S

▼ELEMENTO ▼CÓDIGO DE IMPLEMENTACIÓN A rtic le

55

▼DESCRIPCIÓN

< art¡cle >

Define diversas zonas

< h l> V is u a l Basic 201 0< /hl>

con determ inado

< p > E I libro Manual V isu al Basic 2010

contenido dentro de

perm ite conocer a fondo la herram ienta

otro elem ento. Estos

com plem entaria de V isu al Studio...< /p >

contenidos pueden



anidarse para luego ser extraídos fácilm ente y distribuidos a través de servicios R SS.

Aside



P erm ite estructurar

Escapadas

en un sitio web todo

< p>B ahía M anzano - V . la Angostura

contenido que no

Cabañas Huapi - Bariloche

tenga relación con los

...

elem entos p rim a rio s de



este, com o ser una barra la te ra l de inform ación.

Tabla 1. Nuevos elementos de estructura/semánticos en HTML5. Existen m uchas más etiquetas que nos perm iten crear una página web m oderna y que, com b inadas con CSS, ayud arán a cu alq u ier d esa rro llad o r o d ise ñ ad o r web en la estética y la estructura, pero el o b je tivo de este lib ro es ab arcar el desarrollo web m obile y cóm o se integra este con los d isp o s itiv o s m ó viles. Por esta razón, dejarem os el diseñ o estético de cada a p lica ció n en m anos de una lib re ría com o jQ u e ry M obile. Si desean co n o cer más a fondo sobre HTM L5 podrán hacerlo a través del manual HTML5 p ublicad o p or esta m ism a editorial.

KD

N U E V O S Y V IE JO S E L E M E N T O S HTM L5

D e b em o s te n e r en cuenta que H T M L5 e s tá en co n stan te d esarro llo , p o r lo que lo s e le m e n to s que existen actu alm en te pu ed en va ria r o h asta n o s e r tenidos en cuenta al m om en to d e d ictam in ar la s e s p e c ific a cio n e s finales. En el p o rtal w 3 c .o r g p o d e m o s co n su lta r la inform ación p re c is a y actualizada.

www.redusers.com

«

56

.

USEFtS

2 H TM L5

HTML5 para aplicaciones móviles Los d isp o s itiv o s m ó vile s m odernos ad op taron HTML5 para explotar de m anera eficiente el acceso que este lenguaje b rin d a al h ard w are y al sistem a operativo . Y si pensam os en d isp o sitivo s m ó viles, sabem os en que la m ayo ría de estos reina la interfaz de escritura táctil. Estas interfaces perm iten el ingreso de datos, alfan um érico s o n u m érico s, a tra vé s de un teclado virtu a l, por lo cual este teclado, a d ife re n cia de los físico s, puede lim ita r su vis u a liz a ció n de teclas en base al cam po de texto en el cual se debe ingresar inform ación. Esto p erm ite fa c ilita r la v id a del d esa rro llad o r o d ise ñ ad o r web, ya que se e vita valid ar, m ediante algoritm os co m p lejos, los datos ingresados en cada tipo de cam po. A co n tinuació n, repasarem os las p ro p uestas de HTM L5 que facilitan el trabajo de cargar in fo rm ació n específica en una página web.

c

a

—

« « ■ » "

a

-

t im e

r.

' ’ f ”

*-

C

A

1 * .

A

a

B Í 1 C

T IM E O

Q

S F C T B N ft »

Fiscal Cliff Averted. But Further Deadlines Loom

Figura 7. Desde la proliferación de los dispositivos móviles, el diseño responsivo tom ó un papel muy importante en el terreno web.

Componentes Las etiquetas < In putType> p erm iten estab lecer el tip o de cam po que se vis u a liz a en un fo rm u lario web. HTML5 pro p uso cam bios a estas

»

www.redusers.com

=

C E S3

D E S A R R O L L O W E B P A R A D I S P O S IT IV O S M Ó V IL E S

57

etiquetas para facilitar, en los navegadores de escritorio , la valid ació n de datos ingresados y, en los d isp o s itiv o s m ó viles táctiles, el ingreso de in fo rm ació n a través del teclad o correcto. Veam os, a co ntinuació n, cóm o im p le m e n ta r favo rablem ente la etiq u eta en el diseño de ap licacio n e s m óviles.

Input Type Color Este in p u t typ e p erm ite v is u a liz a r la p aleta de co lo re s p ara que se leccio n e m o s uno de ello s. So lam en te fu n cio n a en los naveg ad o res C h ro m e y Opera.

Por favor, seleccione su color favorito: c in p u t typ e = //c o lo r// nam e=//c o lo rfa vo rito ,/>

□

M a n q a a e t o lo m c n H l

C rt

x

< ilr'///CA)«,»V^liirwvr)^lftop/Mo!nlr'%?OR(V!*^.?OPrnjfVT/Drs.irrollo^,?OMnhilrV, ''

41 |

Bienvenido a nm veb(punto)coin Pot

la v a ,

id e c á o a e

m

cok* fe v x tto .

Figura 8. Selección de un color dentro de la paleta de colores disponibles en el sistema operativo.

IN P U T T Y P E S Y M O TO R ES D E R EN D ER IZA C IO N D eb id o a la fra g m e n ta ció n de m o to re s de rend erización, m u ch a s v e c e s e n c o n tra re m o s q u e las etiqu etas

no s e c o m p o rta n p o r igual en to d a s la s p la tafo rm as. M a yo rm e n te e s to o cu rre en aquellas del tip o C o lo r , D a te y R a n g e , entre otras.

www.redusers.com

«

U

2.

S E F tS

H TM L5

Input Type Date Perm ite m anip ular cam pos que requieran el ingreso de una fecha. Es soportado, por el m om ento, por los navegadores Chrom e, Safari y Opera. 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 '^



] M a n q o d e fe c h a s e n H T f

O

H

x

‘

0 filey//C^User5/fcluna/DGSlctop/Mobile%20Bpok%¿OProject/Desarrc