Scribd Logo
Carica

Benvenuto in Scribd!

  • Desarrollo Web

    Caricato da

    a2217729
    20 visualizzazioni50 pagine
    ELABORACION DE APLICACIONES PARA DISPOSITIVOS MOVILES

    Titolo originale

    DESARROLLO WEB

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    ELABORACION DE APLICACIONES PARA DISPOSITIVOS MOVILES

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF o leggi online su Scribd
    Segnala contenuti inappropriati
    20 visualizzazioni50 pagine

    Desarrollo Web

    Caricato da

    a2217729
    ELABORACION DE APLICACIONES PARA DISPOSITIVOS MOVILES

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF o leggi online su Scribd
    Segnala contenuti inappropriati
    di 50
    ed = wd , oe Pe mel tll DESARROLLO WEBpara GEOLOCALIZACION Y MAPAS WEB + HTML5 PARA MOVILES + JQUERY MOBILE PARA SITIOS MULTIPLATAFORMA + INTEGRACION DE WEBAPPS CON REDES SOCIALES WEBAPPS COMO APLICACIONES NATIVAS + ACCESO A DATOS LOCALES Y REMOTOS USO DE SISTEMAS DE MENSAJERIA + PHONEGAP Y APLICACIONES HIBRIDAS dS PROGRAMACION WEB PARA SMARTPHONES Y TABLETS R Gaara TITULO: Desarrollo web para dispositivos méviles AUTORES: Fernando Luna COLECCION: — Manuales Users FORMATO: 24x17 om PAGINAS: 320 ‘Copyright © MMXIV. Es una publicacion de Fox Andina en coedicién con DALAGA S.A. Hecho el depdsito que marca la ley 11723. Todos los derecios reservados. Esta publicacion no puede ser repraducida ni en toda ni en parte, por ningin medio actual 0 {tuo sin el perso previo y por escrito de Fox Andina S.A, Suiniraccidn estd penada por las leyes 11723 y 25446. La edtorial no asumne responsabilidad alguna por cualquier consecuencia derivada de la fabricacin, funcionamienta y/o utlizacién de los servicios y productos que se descriven y/o analizan, Todas las marcas mencionadas en este libra son propiedad exclusiva de sus respectivos dueios. Impreso en Argentina, Libro de edicién argentina. Primera impresinreaizada en Sevagraf, Costa Rica 5226, Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Ares en X, MMR. ISBN $78-987-1949-83-0 Luna, Fernando Desarrollo web para dispositivos méviles. - 1a ed. - Ciudad Auténoma de Buenos Aires : Fox Andina; Buenos Aires: Dalaga, 2014. 320 p. ; 24x17 cm. - (Manual users; 269) ISBN 978-987-1949-83-0 1. Informatica. 1. Titulo DD 005.3 6 eS PRELIMINARES, El libro de un vistazo Esta obra esta destinado a disefiadores web, programadores y entusias- tas de la tecnologia que deseen crear o adaptar un sitio web a los disposi- tivos méviles. A lo largo del libro brindaremos conocimientos utiles para disehar y programar WebApps dinamicas y explotaremos las capacidades del hardware de estos dispositivos. *O “uve *H4 “ve eae Me eee ad COMPONENTES DE JQUERY MOBILE Como usuarios de equipos moviles, seguramente pensamos que la revolucién de estos es muy reciente, pero en verdad lleva décadas sgesténdose. Conoceremos la historia y evolucién de los dispositivos moviles, los principales competidores y las herramientas necesarias para ingresar en el desarrollo de aplicaciones. *no fic wee HINLS es el lenguaje que coniugé la transicién de sitios web, de escritorio a méviles. Conoceremos sus funciones destacadas ingresaremos al mundo de las comunicaciones de la mano de la geolocalizacién. *n wee FUNDAMENTOS DE JQUERY MOBILE iQuery Mobile brinda a disefiadores y programadores herramientas para crear tuna estructura web méuil y funcional. Aprenderemos a utilizar este framework, que nos solucionara facilmente la ardua tarea de isefiar estéticamente una web homogénea ¥y multiplataforma, >> wwieredusers.com Con las nociones bésicas de este framework, explotaremos las opciones que este nos brinda a través de los widgets. Componentes que ‘os permitiran desarrollar soluciones para las diferentes plataformas méviles en las que se desplegard nuestro proyecto web. *O “wv Mien m cas Prat oe er a9 Habiendo consolidado el lenguaje HTMLS con jQuery Mobile y JavaScript, este capitulo hos permitira explorar al maximo las diversas capacidades de comunicacién que puede desatrollar una web mévil en los smartphones y tablets *nE “ee Uwe El contenido dindmico de la Web nos permite complementar HTML5, jQuery Mobile, JavaScript y-el acceso al hardviate del dispositivo con el lenguaje de programacién PHP y la base de datos MySQL, para desarrollar soluciones movies desentendidas del contenido estatico. DESARROLLO WEB PARA DISPOSITIVOS MOVILES *O Lev ALMACENAMIENTO LOCAL Semen ee aata tra vance surgido de la plataforma HTMILS €s la capacidad de almacenar informacién en el navegador del cliente. Aqui nos introduciremos en los fundamentos basicos de la utilizacién de Web ‘Storage, Web SQL, Indexed Database y AppCache. eee Cw PARA iS El sistema operativo méuil de Apple presta novedosas capacidades para WebApps. Aqui las aprovecharemos, modificando de forma transparente nuestras aplicaciones web ‘méviles para que formen parte del eseritorio de i0S como una aplicacién nativa. wee ee eure nace PRS ud Android adopts las capacidades prestadas por el navegador web Safari. Conoceremos como ‘agregar una aplicacién web al escritorio de Android. Luego repasaremos las soluciones ‘que otras plataformas ofrecen en este terreno, wee En este capitulo introduciremos el framework PhoneGap y el servicio PhoneGap Build, que permite convert una WebApp para méviles en una app que podré distribuirse en las principales tiendas de aplicaciones moviles. ECR SF eens) ‘Agrupamos aqui las bases para utilizar las herramientas de testing que ofrecen los diferentes fabricantes de dispositivos movies, Esto nos permitira probar los desarrolos en las distintas Dlataformas virtuales, en caso de no poseer los dispositive fisicos. wee Gees Este apéndice engloba los fundamentos de Firefox 0S, su simulador y la arquitectura de sus apl para distrbuir nuestras WebApps en Mozilla Marketplace. es. También veremos las bases wee INFORMACION COMPLEMENTARIA ‘Alo largo de este manual, podré encontrar una serie de recuadros que le brindaran informacion complementaria curiosidades, trucos, ideas y consejos sobre los temas tratados. Para que pueda dstinguirlas en forma mas sencilla, cala recuadro esta identificado con diferentes iconas: G=- ATENCION patos UTiLes ‘YNOVEDADES C= www.redusers.com <¢ 8 Ces Contenido ‘Sobre el autor. Prélogo . El libro de un vistazo. Informacién complementaria, Introduccién., Plataformas y tecnologias moviles Tntroducei6n a laWeb mévil Un nuevo panoram: El mundo wet El mundo mobile web. {Cuando se conjugaron web y mobile Web? .n.u.20 Plataformas moviles.. 10s Android 23 Windows Phone. a BlackBerey 25 (tro sstomas operatives. 26 Aplicaciones méviles WebApps. 3 ‘Apps nativas. 32 ‘Apps hibedas. 32 BO Ei 4 >> wwieredusers.com PRELIMINARES Veatajas y desventajas entre plataformas. A Tecnologias de la Web actual... HTML. OSSiasma " JavaScript Librerias y frameworks méviles, 38 Entornos de desarrollo a Risin iecetoroeateceacacrn ance Actividades sonenonnnnnsnennn HTMLS El enguaje HTMLS onan Su principal objetivo. Declaraciones y metatags.... Doctype. Charset. 52 Estructura de un documento HTMLS. 53 HTMLS para aplicaciones méviles.. Componentes «Input Type>.. Geolocalizacién... Elementos para el ejercicio. Rosume Actividades nn Fundamentos de jQuery Mobile {UE eS jOUEFY MObIE? enn JQuery Mobile = jQuery, z0 no? ... ™ Utilizar jQuery Mobile de forma local o remota?..76 Instalar JQM de forma local... 7 Configuracién de una WebApp con jQuery Mobile ..79 Estructura y widgets. 80 DESARROLLO WEB PARA DISPOSITIVOS MOVILES 9 Page. Header.. Content Footer Navigation Bar one Transitions FEE Dialog Page. Ejercicio practic wim mamn 7 ° EREU BRR @/i7 Bion iciiy) ler) Crear Ia estructura HTML, Resumen Actividades: ——s Interacci6n con el hardware de comunica LaWeb y el hardware ee e los ispositives méviles. <——_ Hipervinculos en jQuery Mobil. Ee Organleos. Interaccion con el smartphone o tablet. Prowctos neg [eee CComunicacion a través de redes sociales. ‘Mensajes con URI scheme de Twitter. Comportamientos de los eventos nes aar 156 159 segin el dispositivo... 165 167 Respuesta de eventos en tablets... Respuesta de eventos en smartphones, ‘Una solucién viable 166 Componentes de ‘Invocar llamados y mensajes de texto. jQuery Mobile Extender el uso de ListView. 169 Componentes Resume Novigation Bar. Actividades . Ui895 a Listas formateadas.. oS Buttons. ‘Text Inputs... lL THEMES ocrnennnnsnnnsnnnsnninnnnannened Ejercicio integrador. 128 sn]28 aa. az ‘Adaptacién a las pantallas de tablets. Resumen Actividades: www.redusers.com <¢ 10 CaS PRELIMINARES ne. Ejercicio practico:almacenamiento local. Bases dle datos Web SQL. Lenguajes de programacién ‘Sistemas operativos que soportan Web SQL.....229 Evolucign Manejo de sentencias Web SQL. 230 La importancia de lo dinamico. 176 Indexed Database secs Las plataformas més comunes. a7 Ap Qué es PHP?, Como descargar una WebApp a un dispostivo...254 Base de datos. ADP Cath nm Mysau. 188 ——_-Resumen.. Crear nuestra primera base de datos. 190 Actividades... PHP y MySQL... Funciones mysql_connect() y myql_select_db0) Consulta SELECT DISTINCTROW Visualizaci6n de datos Integrar PHP con jQuery Mobile. Proyecto: lbveris.. MySQL 5.1 Reference Manual Sowocccrcoacag WebAppsipara los Sse Disofar una WebApp para i0 El navegador Safari y sus prestaciones. 241 Ejercicia integrador: Add to home screen.. ‘Mostrar la WebApp como nativa en iOS. 249 Splash sereen dela aplicacion.. Agregar splash screen a nuestro proyect Almacenamiento local feteetien 2: Almacenamiento local. wi a Local storage. WebApps para Android ‘Comprobacién de compatibilidad y otros dispositivos de un navegador Disefiar una WebApp para Android... >> wwieredusers.com DESARROLLO WEB PARA DISPOSITIVOS MOVILES CeS5 1 La generacion BB10 298 owen Herramientas de desarrollo para B10 os. 293 Desarrollo mobile para Windaws Phone.. Windows Phone 7 y 8 297 Instalacién de hereamientas Microsot 298 Emular WebApps en la computadors Utilzacién de Ripple Emulator. El aporte de Firefox.. Google Chrome para Android: Firefox OS laestrella esperada Un nuevo jugador en el ecosistema mévil, 308 Visualzar una WebApp como nativa en Android Aroutectura de Firefox 0 309 Crear los iconos para nuestra WebApp Caracteristicas del $.0. 310 Definir el meta tag ...266 EI simulador.. 312 Instalar la WebApp en Android, ‘Manos a la obra. 315 Agregar WebApps en BlackBerry. Testear nuestro desarrollo. 317 Resumen Distribucion de aplicaciones 318 PhoneGap Introduccién Arquitectura Dreamueaver y PhoneGap ‘Gémo transformar una WebApp en hibrida, Modificacién de index. him. Como testear nuestra app compilada. Resumen Actividades: .\y: BB10, Windows Phone y emuladores web Programacion nativa para BlackBerry 20. www.redusers.com <¢ 2 CESS PRELIMINARES Introduccion » Si segmentamos los notables avances que tuvieron lugar en las tiltimas dos décadas en materia de evoluci6n tecnolégica, podemos resumirlos en tres actores importantes: la computa- dora personal, internet y la telefonia movil. Debemos destacar, ademas, que este Ultimo actor tuvo su propio Big Bang dentro de la evolucién mencionada, dado que no solo permitié comunicar a las personas en cualquier punto donde se encuentren, sino que también supo tomar lo mejor de los primeros dos actores y con jugarlo en un unico producto. De este modp, la telefonia movil logra consolidarse como el punto de partida de todas las actividades relacionadas al uso cotidiano de servicios. A través de ella, hoy en dia podemos realizar multiples y variadas tareas, entre las que podemos mencionar: establecer contacto social con nuestros pares, en- viar y recibir mensajes de correo electrénico, mirar nuestras series o peliculas favoritas, realizar llamados telefénicos, leer libros electronicos, establecer una agenda de actividades, comprar productos y servicios, navegar por internet y hasta preparar una receta de cocina. Como desarrolladores de aplicaciones informaticas buscare- mos, a través de esta obra, explotar estas nuevas tecnologias a partir del desarrollo de soluciones que aprovechen los recursos que nos brinda hoy un teléfono inteligente o una tablet. Gracias a la constante actualizacién de la tecnologia basada en la Web, estas soluciones pueden levarse adelante tanto desde una aplicacién nativa instalada en un dispositivo como desde una pagina web cargada en nuestro navegador movil favorito. Los invitamos a descubrir, en las proximas paginas, como podemos explotar cada una de las caracteristicas que brindan los dispositivos méviles, enfocdndonos en la arquitectura de hardware y software que cada uno de estos pequefios artefactos pone a disposicién del usuario. >> wwieredusers.com NG w k nee Plataformas y tecnologias moviles En este capitulo conoceremos la evolucién de la tecnologia mévil y web. Veremos cémo esta tiltima se adapto al pequefio mundo de los dispositivos méviles haciendo que un simple teléfono se convirtiera, en corto tiempo, en un smartphone. También conoceremos los principales sistemas operativos méviles, las diferencias entre WebApp, app nativa y app hibrida, y cudles son los frameworks mas populares. + Introduccién ala Web mévil....14 _» Tecnologias de la Web actual ..35, ae + Plataformas méviles 2» Resume 30» Actividades... Aplicaciones méviles AAA 4 eS 1. PLATAFORMAS Y TECNOLOGIAS MOVILES S) Introduccion a la Web movil Para quienes somos fanaticos de la tecnologia movil, “mobile” es la palabra que mas suena en nuestras mentes desde, aproximadamente, el ao 2007. Si bien los dispositives méviles se integraron en nuestra vida dos décadas antes, podemos tomar como quiebre, en el segmento de las tecnologias de bolsillo, la presentacin de iPhone dentro de este mercado, en aquel afio. El mundo IT ya venia trabajando, desde algunos afos antes, en la reinvencidn del terreno de dispositivos méviles, para que estos ganaran un papel mucho mas importante en nuestras vidas. Dentro de los dispositivos que mas se vendieron en esta ultima década, podemos destacar netbooks, tablets, handhelds y smartphones. Algunos de estos dispositivos lograron aceptacién, mientras que otros tuvieron que esperar un poco la evolucion del mercado y encontrar alternativas que permitiesen involucrar mas la atencién del usuario final. Dentro de aquellos que llegaron a destiempo, podemos destacar las tablets, dado que Apple habia lanzado una primera version de estas en los inicios de la década del 90, con un equipo bautizado como Apple Newton. Si bien la iniciativa no tuvo, en general, mucha aceptacion, comparada con el auge de iPad o Android actualmente en este segmento, al menos podemos reconocer que dio pie al surgimiento de otras ideas que, con el tiempo, tomaron vuelo y ganaron mas interés por parte de los usuarios finales, como la PDA Palm Pilot. LA PRIMERA VERSION Los equipos ultra portatiles o netbooks DE UNA TABLET FUE hicieron su primera aparicién de la mano de los handhelds presentados por Casio y LAAPPLE NEWTON, COMPAQ, a fines de la década del 90, Casiopeia LANZADA EN LA A-11 y COMPAQ C-2010 fueron los primeros dispositivos méviles que buscaron acaparar el lugar que las netbooks alcanzaron entre 2006 y 2011 en el mercado de computadoras Este tipo de dispositivos, junto con los escaneres de mano Psion, rescataron el sistema operativo Windows CE pensado originalmente para los handhelds de Casio y COMPAQ. Hoy, Windows CE sigue vigente y presta servicios a equipos Psion, entre otros. DECADA DE 1990 >> www.redusers.com DESARROLLO WEB PARA DISPOSITIVOS MOVILES Gas 15 Figura 1. COMPAQ C2010 y Casiopeia A-11 (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 smartphones, podemos destacar que la llegada temprana de estos dispositivos al mercado de telefonia mévil fue de la mano de Nokia. Algunos afios mas tarde se sumé la firma Sony Ericsson. Nokia lanz6, en marzo de 1996, el teléfono computadora Nol 9000 Communicator, dispositive que tuvo algunas evoluciones y finaliz6 su existencia en el 2004 con el modelo Nokia 9500 Communicator. Su itltima version tenia Bluetooth, Wi-Fi, teclado fisico QWERTY y un sistema operativo grafico cuyo navegador soportaba paginas en Flash. £1 Nokia 9000, el primero de la serie, pudo conocerse en la pelicula El Santo, en la que el personaje principal utilizaba el servicio de milltiples cuentas de e-mail y hasta recibia faxes a través de este teléfono, wee ie) data el Para obtener material adicional gratuito, ingrese a la seccién Publicaciones/Libros dentro de http://premium.redusers.com. Ali podré ver todos nuestros titulos y acceder 2 contenido extra de cada uno, como los ejemplos utiizados por e! autor, apéndices y archivos editables 0 de codigo fuente. Entre los complementos de este libro encontraré, ademés, tutoriales en video para mejorar la comprensién de los conceptos desarrollados en la obra. www.redusers.com — «€ 16 CaS 1. PLATAFORMAS Y TECNOLOGIAS MOVILES Algunos afios después, Sony Ericsson llegé al mercado con su modelo P990, un teléfono tactil con pantalla grafica de 256 colores y stylus pen para el manejo de las aplicaciones en pantalla. ura 2. De izquierda a derecha: Sony Ericsson p990, Palm Pilot y Nokia Communicator 9500, equipos considerados como los primeros smartphones. Hoy podemos decir que gran parte de los fracasos de esa época pudo deberse a la ausencia de aplicaciones que dieran valor agregado a estos dispositivos. Algunos de estos terminales tuvieron una tienda de aplicaciones propia, pero estaba limitada a los desarrollos de las. respectivas empresas o de algunos socios muy cercanos a estas. Un nuevo panorama En 2007, el panorama mobile cambié por completo. Apple presento el iPhone, las netbooks explotaron en ventas y, un ahlo mas tarde, aparecieron las tablets. Asi fue como la tecnologia que habia surgido entre diez y quince afos antes reaparecié en el mercado comercial con otro formato y de la mano de nuevos jugadores. Junto con ellos, llegaron los app stores o tiendas de aplicaciones. Estos factores permitieron abrir el mercado de ganancias, no solo a las corporaciones que desarrollan estos productos, sino a cualquier particular o pequefia corporacion. Dentro de estos mercados, los que mas generan ingresos hoy son los de la telefonia movil, con su bateria de apps gratuitas y pagas, seguidos por el mercado de las tablets. >> www.redusers.com b HTMLS HTMLS es el lenguaje de marcado que domina la Web de hoy y que simplificé las funciones utilizadas en los navegadores, tanto de escritorio como de los dispositivos méviles. En este capitulo, haremos un repaso por algunos conceptos importantes de la base principal de HTMLS que nos seran de suma utilidad para el resto del libro. y Ellenguaje HTML5: 46» Geolocalizacién... yDeclaraciones y metatags.......50 _y Resumen, + HTMLS para +» Actividades. aplicaciones méviles... AAA % CES 2. HTMLS S) El lenguaje HTML5 HTMLS fue creado con el propésito de brindar soporte al contenido existente en la Web baséndose en los estandares impuestos con HTML. 4.x, pero unificando la estética y funcionalidad de los sitios en todos los navegadores web, lo que se conoce como compatibilidad cross-browsers. Su principal objetivo Del estandar propuesto por HTMLS podemos hacer alusién a los nuevos elementos dentro de la sintaxis que difieren en gran parte de la version anterior de este lenguaje de marcado. HTMLS es utilizado por los disenadores que crean sitios web y no hay ninguna problematica cuando se requiere combinarlo con una versién anterior. Navegadores y sistemas operativos HTMLS propone herramientas avanzadas y mejores experiencias para el usuario final garantizando el correcto funcionamiento de casi todas sus etiquetas en la mayor cantidad de navegadores web. sStatGourter Global Stat Top Snavagadats at Ge Eero ie Fevero ge 2013y Febrara de 2038 oe Fs a cy 1 3H Figura 1. Hasta febrero de 2014, Google Chrome es el browser mas utilizado, seguido por Internet Explorer, Firefox y, mas lejos, Opera. Hablar de navegadores implica pensar en Chrome, Firefox, Internet Explorer, Opera, Camino, Safari, Android Browser, Galeon, SlimBoat, Apollo, Dolphin, iCab, OmniWeb, Voyager, SpaceTime, QupZilla, >> www.redusers.com DESARROLLO WEB PARA DISPOSITIVOS MOVILES Gass 47 NetSurf, Incognito, Epiphany, myBrowser, RockMelt, y otros tantos mas que harian la lista casi interminable. ‘Tenemos una opcidn inmensa de navegadores web circulando por internet, y esto se debe a la variedad de plataformas como Windows, Linux, OS-X, iOS, Android, Windows Phone, Nokia, BlackBerry, entre otras tantas. Por suerte, desde hace un tiempo, los desarrolladores comprendieron que lo mas importante de un navegador pasa por el motor de render, y asi fue como decidieron adaptar sus nuevas versiones con los motores de renderizado mas populares de la Web. StatCounter Global stats Top 30 navogadores wad a marianne anita Febofd Je 2013 y Fbre0 ge 2024 nati opera eBromer ai home| saxisen| Natron Poa Tove] eve Figura 2. Por la segmentacién de Android (versién 2.1 a 4.4), Android browser es el navegador més utlizado, dejando a Chrome relegado al sexto puesto. Hasta el momento de escribir esta publicacién, Android seguia reinando en el mercado de smartphones a nivel mundial, con una porcién de més del 80 %. Sin embargo, a pesar de los grandes esfuerzos realizados por Google y de la cantidad de firmas que integran el sistema operativo Android en sus tablets, este sucumbe en un terreno que esta siendo ampliamente liderado por iPad. (1) wey cena 13 YouTube dependié por afios, en la reproduccién de sus videos, del plugin Flash Player. Todas las peliculas eran converlidas, en el proceso de upload, al formato de video -FLV. HTMLS trajo vientos de cambio aeste portal, ya que ahora no es necesario depender mas de este plugin. www.redusers.com — «€ 48 CaS 2. HTMLS ‘StatCounterGloba State Top S navegacores web entatiets ere Febrero de 2015 y Febrero de 2004 ‘satan Figura 3. Si bien Android ha conquistado el mercado de los smartphones, alin no se ha podido quedar con el de las tablets. Motores de renderizado Entendemos por motor de renderizado al software que interpreta el contenido web (basado en HTML, XML, graficos, CSS3 y JavaScript) y lo traduce a lenguaje grafico, pintando en pantalla la estética del sitio web o correo electrénico, para que el usuario lo visualice o imprima. ‘A pesar de que la segmentacién se esta reduciendo, atin existe una variedad importante de motores de renderizado. Entre ellos estan: Gecko, Trident, WebKit, KHTML, Presto, Tasman, gzilla, GtkKHTML, Servo y Blink. Los tres primeros son los mas utilizados por los browsers mas comunes de cada plataforma, mientras que Blink es el nuevo motor desarrollado para Google Chrome que reemplaza a WebKit, y Servo es el nuevo motor desarrollado por Mozilla, que reemplazaraé a Gecko en las plataformas con arquitectura ARM. Un HTML para dominarlos a todos Hasta ahora sabemos que los sistemas de escritorio estan dominados por Windows; los smartphones, por Android; y las tablets, por iPad, aunque en estos dos ultimos casos los competidores y ofertas de sistemas operativos abundan. Por el lado de los browsers, debemos hablar de motores de render, ya que estos son los que interpretan al lenguaje de marcado, procesando correctamente las nuevas etiquetas. >> www.redusers.com sel 0 ee Se Fundamentos de jQuery Mobile La estética de una aplicacién web movil es muy importante en cada uno de los proyectos que abordamos. Y lo mejor para reducir los tiempos de desarrollo es recurrir a herramientas que nos ayuden a enfocar nuestro esfuerzo en la funcionalidad del sitio sin dejar de lado la estética. En los proximos capitulos nos centraremos en jQuery Mobile, una de las herramientas que cumple con creces esta funcion. + 2Qué es jQuery Mobile?.. y Resumen. y Actividades. y Estructura y widgets .. y Ejercicio practico AAA 4 Ges 3. FUNDAMENTOS DE JQUERY MOBILE A | Que es jQuery Mobile? jQuery Mobile es un conjunto de librerias JavaScript y CSS, construido especificamente para dar soporte a milltiples plataformas al momento de disefar tanto un sitio web como una aplicacion mévil. Permite, de manera practica y sin complicaciones, mantener la estructura de un sitio por igual, al momento de visualizarlo desde una computadora de escritorio, tablet, smartphone o teléfono celular de baja, media o alta gama con soporte para navegacién web. Uno de los pasos mas importantes al momento de disenar una WebApp o app movil es definir bien la interfaz de usuario que la aplicacién tendra y, por supuesto, como se vera en cada una de las plataformas donde podra ser ejecutada. Si decidimos hacer una aplicacién web que pueda ejecutarse tanto en un navegador de escritorio como en un navegador web mévil, debemos tener en cuenta que su interfaz sea lo mas similar posible para que los usuarios concurrentes no deban tener que aprender dos o mas veces a desplazarse por nuestro sitio. Una de las primeras investigaciones que realizan los usuarios de aplicaciones méviles, al momento de decidir cambiar hacia otro sistema operativo mévil, est destinada a saber si las apps de uso cotidiano tienen su versién en la plataforma a la cual piensan migrar. Desde nuestro punto de vista, al momento de desarrollar apps web méviles, la opcién de cambio de usuario no nos deberia afectar en lo mas minimo si tenemos las herramientas necesarias para afrontar un desarrollo que funcione por igual en todas las plataformas. jQuery Mobile fue pensado desde sus inicios para brindar la mayor compatibilidad posible en casi todas las plataformas existentes, sean © no moviles. Para estas Ultimas, jQuery Mobile enfatiz6 en cubrir la mayor cantidad de equipos y web browsers que existen en el mercado, whe f ora eo ie ed thy jQuery Mobile permite escribir aplicaciones web y movies de forma basica y sin ningin esfuerzo. EI desarrollo de este framework fue pensado para una integracidn amigable para disefiadores y programadores, sea cual fuere el nivel de sus conacimientos. >> www.redusers.com DESARROLLO WEB PARA DISPOSITIVOS MOVILES CaS 5 lo que garantiza que nuestro sitio se vera -practicamente- sin cambios tanto en un smartphone de alta gama como en uno de baja gama. ‘Sariusly cess platform with MIMLS Figura 1. wwnw.jquerymobile.com es el punto de partida inicial para trabajar con este complemento pensado integramente para aplicaciones méviles. jQuery Mobile = jQuery, jo no? La respuesta a esta pregunta es si: jQuery y jQuery Mobile son diferentes. jQuery es una libreria que complementa las webs y hace mas ameno el desarrollo de un sitio, resumiendo varias funciones kilométricas -en cuanto a lineas de cédigo refiere- en funciones mas amigables. jQuery Mobile, por su parte, esta basado en jQuery: debemos utilizar ambas librerias JQUERY MOBILE'SE: juntas, pero la primera facilita de forma general BASA EN JQUERY fae Programadores la Invocacion de cada Y DEBEN USARSE ‘uncién, que aparece resumida en forma de estilos aplicables a los elementos que componen JUNTAS, AUNQUE SON una pagina web. jQuery Mobile busca, de esta LIBRERIAS DISTINTAS manera, agilizar el desarrollo de una pagina web, cumplir con el requisito de Responsive Web Design y evitar que los disefiadores deban y 5 escribir cédigo complejo. www.redusers.com — «€ 7% CaS 3. FUNDAMENTOS DE JQUERY MOBILE gUtilizar jQuery Mobile de forma local o remota? Para implementar jQuery Mobile en un sitio web, webApp 0 aplicacién hibrida se requiere incluir, en los archivos HTML que compondran el sitio, una referencia a este conjunto de librerias Veamos, a continuaci6n, un ejemplo de cédigo, donde invocamos a las librerias de jQuery Mobile dentro de una pagina web llamada index.html: shead> Dentro de la etiqueta y debemos incluir las referencias a las librerias de jQuery Mobile. Estas se componen por: * El archivo Jquery.mobile???.css, que es la hoja de estilos. «El archivo Jquery???.min.js, que es el archivo JavaScript correspondiente a jQuery. © Elarchivo Jquery.mobile???.js, que corresponde al archivo JavaScript propio de jQuery. La denominacién “72?” utilizada equivale al numero de version correspondiente de las librerias. jQuery Mobile esta en constante desarrollo, por lo que la versién utilizada al momento de escribir este capitulo variara significativamente a la versién existente cuando el libro legue al mercado. Aun asi, podemos optar por utilizar una libreria antigua de jQuery Mobile sin problema alguno. En las tiltimas versiones lanzadas al mercado, se simplificé la cantidad de temas estéticos que permiten variar la gama de colores de una WebApp entre cinco diferentes >> www.redusers.com nel 0 A Rea Componentes de jQuery Mobile En el capitulo anterior conocimos las bases necesarias para implementar jQuery Mobile en nuestro desarrollo mobile web. Ahora nos introduciremos atin mas en este popular framework para poder sacar provecho al maximo de los componentes predisefiados que JQM nos ofrece, denominados widgets, y asi poder explotar su funcionalidad al maximo, estructurando una web movil de manera tal que nuestros proyectos balanceen armoniosamente su estética y funcionalidad. 106 Resume! y Componentes 128» Actividades. + Ejercicio integrador.. AAA 106 CaS 4. COMPONENTES DE JQUERY MOBILE S) Componentes En jQuery Mobile definimos como componentes a aquellos objetos que conforman el contenido de una pagina. Este framework nos provee de un set de componentes o widgets que podemos utilizar para diversas funcionalidades en esta plataforma Entre los widgets mas populares podemos destacar los siguientes: listas, vifietas, cajas de texto, etiquetas, botones, control calendario y slider. También existen otros componentes que nos permiten darle vida y funcionalidad a una pagina y que, ademas, hacen que esta luzca por igual en todas las plataformas donde es visualizada. Dependiendo de la funcién o estructura que debamos armar en nuestra web movil, podremos sacar provecho de cada uno de los componentes de JOM para desarrollar mentis funcionales, establecer filtros automaticos en pantallas con muchos datos y aprovechar las diversas variantes que un mismo componente nos ofrece. A continuacién, listaremos los principales componentes que podemos utilizar en jQuery Mobile y veremos un ejemplo de cada uno. Navigation Bar Enel aio 3, repasamos el concepto basico del uso del componente NavBar. Vimos como crear botones, agregarles un icono oun texto, y como estructurar la barra de herramientas en el extremo superior o inferior de la pantalla. Veamos, a continuacién, qué otras opciones nos ofrece este maravilloso componente. Boton activo En el ejercicio realizado de Green&Berries Farming en el capitulo anterior, establecimos que, cada vez que ingresamos a una seccién del sitio web movil, el botén de dicha seccién quede inhabilitado: Disabled. Esto permite evitar que el usuario pulse nuevamente el boton y que la pagina se refresque. En la mayoria de las paginas web de hoy, el refresco de pagina no es un problema cuando navegamos por Wi-Fi o a través de una LAN, pero, cuando el usuario utiliza su dispositive movil mediante el pack >> www.redusers.com DESARROLLO WEB PARA DISPOSITIVOS MOVILES Pa35 107 de datos 3G 0 similar, estos datos generalmente tienen un consumo mensual limitado y, por lo EVITAR EL REFRESCO tanto, el exceso se le factura aparte al cliente INNECESARIO DE UN Por tal motivo, si podemos evitar el refresco innecesario de una pagina, no solo ejercemos una SITIO WEB PREVIENE buena practica como programadores, sino que LAPERDIDA DE LOS también evitamos la pérdida de datos ingresados en un formulario ¢ impedimos que el usuario DATOS INGRESADOS consuma innecesariamente de su pack de datos. Otra variante que podemos aplicar en la practica de navegacién mediante un componente NavBar es la de marcar el botén correspondiente a la seccién en la cual nos encontramos como botén activo. Esto se realiza de la siguiente manera: