Hispanopedia Wiki
Articulo de referencia

jQuery Mobile

{{cite web|author=jQuery Foundation - jquerymobile.com |url=https://blog.jquerymobile.com/2010/10/16/jquery-mobile-alpha-1-released/ |title=jQuery Mobile Alpha 1 Released |publi...

Hispanopedia WikiContenido en espanolLectura gratuita

jQuery Mobile es un framework web optimizado para pantallas táctiles (también conocido como framework móvil), específicamente una biblioteca JavaScript , desarrollada por el equipo del proyecto jQuery . El desarrollo se centra en crear un framework compatible con muchos teléfonos inteligentes y tabletas , [ 3 ] lo cual se hizo necesario debido al creciente pero heterogéneo mercado de tabletas y teléfonos inteligentes. [ 4 ] El framework jQuery Mobile es consistente con otros frameworks de aplicaciones móviles [ 5 ] y plataformas como PhoneGap , Worklight, [ 6 ] etc.

Desde el 7 de octubre de 2021, jQuery Mobile ha sido descontinuado. [ 7 ]

Características

  • Compatible con todos los principales navegadores de escritorio, así como con todas las principales plataformas móviles, incluyendo Android , iOS , Windows Phone , Blackberry , WebOS y Symbian .
  • Está construido sobre la base del núcleo de jQuery , por lo que tiene una curva de aprendizaje mínima para las personas que ya están familiarizadas con la sintaxis de jQuery.
  • Marco de trabajo para la creación de temas que permite la creación de temas personalizados.
  • Dependencias limitadas y diseño ligero para optimizar la velocidad.
  • El mismo código base se adaptará automáticamente a cualquier pantalla.
  • Configuración basada en HTML5 para el diseño de páginas con un mínimo de programación.
  • Navegación basada en AJAX con transiciones de página animadas que permite crear URL semánticas mediante pushState.
  • Widgets de interfaz de usuario optimizados para pantallas táctiles y compatibles con cualquier plataforma.

(Fuente: del sitio web de jQuery Mobile) [ 3 ]

Ejemplo de uso

$ ( 'div' ). on ( 'tap' , function ( event ){ alert ( 'elemento pulsado ' ); });
$ ( document ). ready ( function (){ $ ( '.myList li' ). on ( 'click touchstart' , function () { $ ( '.myDiv' ). slideDown ( '500' ); }); });

Un ejemplo básico

A continuación se muestra un proyecto básico de jQuery Mobile que utiliza elementos semánticos HTML5 . Es importante enlazar con las bibliotecas JavaScript de jQuery y jQuery Mobile, así como con la hoja de estilos (los archivos se pueden descargar y alojar localmente, pero se recomienda enlazar con los archivos alojados en la CDN de jQuery ).

Una pantalla del proyecto se define mediante un sectionelemento HTML5 y data-rolede page. Nótese que data-rolees un ejemplo del dataatributo HTML5, en este caso definido por jQuery Mobile. Una página puede tener elementos headery con de y , respectivamente. Entre ellos, puede haber un elemento, con un de y un de . Por último, puede estar presente un elemento, con de .footerdata-roleheaderfooterarticlerolemainclassui-contentnavdata-rolenavbar

Un documento HTML puede contener más de un sectionelemento y, por lo tanto, más de una pantalla de contenido . De esta manera, solo es necesario cargar un archivo que incluye varias páginas de contenido. Una página puede enlazar con otra página dentro del mismo archivo haciendo referencia al atributo id de la página (por ejemplo, href="#second").

En el ejemplo siguiente, se utilizan otros dos atributos de datos. El data-themeatributo le indica al navegador qué tema renderizar. El data-add-back-btnatributo agrega un botón de retroceso a la página si se establece en true.

Por último, se pueden añadir iconos a los elementos mediante el data-iconatributo. jQuery Mobile incluye cincuenta iconos de uso común.

Una breve explicación de los atributos de datos utilizados en este ejemplo:

data-role : especifica la función del elemento, como encabezado, contenido, pie de página, etc.

data-theme : especifica qué tema de diseño se utilizará para los elementos dentro de un contenedor. Se puede configurar como: a o b.

data-position : especifica si el elemento debe ser fijo, en cuyo caso se mostrará en la parte superior (para el encabezado) o en la parte inferior (para el pie de página).

data-transition : especifica una de las diez animaciones integradas que se utilizarán al cargar nuevas páginas.

data-icon : especifica uno de los cincuenta iconos integrados que se pueden agregar a un elemento.

<!doctype html> < html > < head > < meta charset = "utf-8" > < title > Ejemplo de jQuery Mobile </ title > < meta name = "viewport" content = "initial-scale=1, user-scalable=no, width=device-width" > < link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" > </ head ><body> < section data-role = "page" id = "first" data-theme = "a" > < header data-role = " header" data- position = " fixed " > <h1> Encabezado de la página 1 </h1> </header>< article role = " main " class = " ui - content " > <h2> ¡ Hola , mundo ! </h2> <a href="#second" data-role="#button" data-inline="#true" data-transition="#flow" data-icon="#carat-r" data-iconpos="#right"> Ir a la página 2 </a> </article>​​​​​​​​​​​​​​< footer data-role = "footer" data - position = " fixed " > <h4> Página 1 Pie de página </h4> </footer> </section>< section data-role = "page" id = "second" data-theme = "b" > < header data-role = "header" data-position = "fixed" data- add -back-btn = " true" > <h1> Encabezado de la página 2 </h1> </header>< article role = " main" class = " ui -content " > <h2> Página de ejemplo </h2> </article>< footer data - role = "footer" data - position = " fixed " > <h4> Página 2 Pie de página </h4> </footer> </section> < script src = " https://code.jquery.com/jquery-1.11.1.min.js " > </script> < script src = " https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js " > </script> </body> </html>

Tematización

jQuery Mobile proporciona un marco de temas que permite a los desarrolladores personalizar esquemas de color y ciertos aspectos CSS de las características de la interfaz de usuario. Los desarrolladores pueden usar la aplicación jQuery Mobile ThemeRoller [ 8 ] para personalizar estas apariencias y crear experiencias de marca. Después de desarrollar un tema en la aplicación ThemeRoller, los programadores pueden descargar un archivo CSS personalizado e incluirlo en su proyecto para usar su tema personalizado. [ 9 ]

Cada tema puede contener hasta 26 muestras de color únicas, cada una compuesta por una barra de encabezado, un cuerpo de contenido y estados de botón. La combinación de diferentes muestras permite a los desarrolladores crear una gama más amplia de efectos visuales que con una sola muestra por tema. Cambiar entre diferentes muestras dentro de un tema es tan sencillo como añadir el atributo "data-theme" a los elementos HTML.

El tema predeterminado de jQuery Mobile incluye dos paletas de colores diferentes, llamadas "a" y "b". Aquí tienes un ejemplo de cómo crear una barra de herramientas con la paleta "b":

< div data-role = "header" data-theme = "b" > < h1 > Título de la página </ h1 > </ div >

(Fuente: del sitio web de jQuery Mobile) [ 3 ]

Ya existen algunos temas de estilo de código abierto desarrollados y respaldados por organizaciones externas. Uno de ellos es el tema de estilo Metro, desarrollado y publicado por Microsoft Open Technologies, Inc. [ 10 ]. El tema de estilo Metro busca imitar la interfaz de usuario del lenguaje de diseño Metro que Microsoft utiliza en sus sistemas operativos móviles.

Compatibilidad con navegadores móviles

Llave:

  • A - Alta calidad. Un navegador capaz de utilizar, como mínimo, consultas de medios (requisito para jQuery Mobile). Estos navegadores se someterán a pruebas exhaustivas, pero es posible que no cuenten con todas las funcionalidades de jQuery Mobile.
  • B - Calidad media. Un navegador competente, pero con una cuota de mercado insuficiente para justificar pruebas diarias. Se seguirán aplicando correcciones de errores para mejorar su rendimiento.
  • C - Baja calidad. Un navegador que no es compatible con las consultas de medios. No se le proporcionarán scripts de jQuery Mobile ni CSS (se recurrirá a HTML simple y CSS básico).
  • * - Próximo navegador. Este navegador aún no se ha lanzado, pero está en fase de pruebas alfa/beta.

(Fuente: del sitio web de jQuery Mobile) [ 3 ]

Véase también

Referencias

  1. ↑ Fundación jQuery - jquerymobile.com (16 de octubre de 2010). "Lanzamiento de jQuery Mobile Alpha 1" . blog.jquerymobile.com . Consultado el 22 de mayo de 2014 .
  2. ↑ Fundación jQuery - jquery.org (10 de septiembre de 2012). "Cambios en la licencia de jQuery" . Blog.jquery.com . Consultado el 9 de octubre de 2013 .
  3. 1 2 3 4 "Compatibilidad con navegadores móviles graduados" .
  4. ↑ "El auge global del teléfono inteligente" . Archivado del original el 17 de junio de 2018. Consultado el 27 de abril de 2011 .
  5. ↑ "Razones por las que jQuery Mobile es adecuado para el desarrollo de aplicaciones web móviles" .
  6. ↑ "IBM Worklight - Estados Unidos" . Worklight.com . Consultado el 9 de octubre de 2013 .
  7. ↑ "Los responsables del mantenimiento de jQuery continúan la iniciativa de modernización con la descontinuación de jQuery Mobile" . Blog de jQuery. 7 de octubre de 2021. Consultado el 6 de diciembre de 2022 .
  8. ↑ "ThemeRoller" .
  9. ↑ "Descripción general de la personalización de temas de jQuery Mobile" .
  10. ↑ "Más noticias de MS Open Tech: anuncio del tema de estilo Metro de código abierto para jQuery Mobile" . Archivado del original el 16 de agosto de 2014.

Lecturas adicionales

  • Doyle, Matt (18 de marzo de 2014). Domina las aplicaciones web móviles con jQuery Mobile (4.ª  ed.). Elated Books. pág.  567. ISBN 978-0-9873115-3-5.
  • Pelletier, Jeff (25 de abril de 2013). Manual de aplicaciones móviles: El plan maestro (1.ª  ed.). Withinsight Publishing . pág.  96. ISBN 978-0989072106.
  • Mann, Giulio (23 de junio de 2011). jQuery Mobile First Look (1.ª  ed.). Packt Publishing . pág.  216. ISBN 978-1-84951-590-0.
  • Reid, Jon (7 de julio de 2011). jQuery Mobile (1.ª  ed.). O'Reilly Media . pág . 130. ISBN  978-1-4493-0668-7.
  • David, Matthew (21 de septiembre de 2011). Sitios web móviles HTML5: Potenciando HTML5 con jQuery Mobile , Sencha Touch y otros frameworks (1.ª  ed.). Focal Press . pág. 250. ISBN  978-0-240-81813-9.
  • Broulik, Brad (30 de noviembre de 2011). Pro jQuery Mobile (1.ª  ed.). Apress . pág.  350. ISBN 978-1-4302-3966-6.
  • Holzner, Steven E. (2 de enero de 2012). Sams Teach Yourself jQuery Mobile in 10 Minutes (1.ª  ed.). Sams . pág.  240. ISBN 978-0-672-33557-0.
  • Firtman, Maximiliano (31 de enero de 2012). jQuery Mobile: Puesta en marcha (1.ª  ed.). O'Reilly Media . pág.  250. ISBN 978-1-4493-9765-4.
  • Duttson, Phill (13 de julio de 2012). Sams Teach Yourself jQuery Mobile in 24 Hours (1.ª  ed.). Sams . pág.  475. ISBN 978-0-672-33594-5.
  • de Jonge, Adriaan, Dutson, Phillip (2 de noviembre de 2012). jQuery, jQuery UI y jQuery Mobile: Recetas y ejemplos (1.ª  ed.). Addison-Wesley Professional . pág.  400. ISBN 978-0-321-82208-6.{{cite book}}: CS1 maint: varios nombres: lista de autores ( enlace )
  • Sitio web oficial
  • El proyecto jQuery
  • Documentación y demostración de jQuery Mobile
  • Marco de trabajo jQuery Mobile: escribe menos, haz más.
  • jQuery Mobile C# ASP.NET Por Matthew David Elgert Archivado el 5 de julio de 2014 en Wayback Machine
  • PropertyCross, te ayuda a seleccionar un framework móvil multiplataforma: jQuery Mobile
Obtenido de " https://en.wikipedia.org/w/index.php?title=JQuery_Mobile&oldid=1319357434 "