Aprende jQuery Mobile

Una de las formas más completas de hacer aplicaciones web para teléfonos inteligentes. Actualizado a la versión 1.4.5.
4.2 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
355 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 46
  • Length 5 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2013 Spanish

Course Description

 jQuery mobile se ha convertido rápidamente en una herramienta muy demandada por aquello que desean contruir aplicaciones web para dispositivos móviles, como teléfonos celulares o tabletas. Una gran ventaja es que las aplicaciones son ligeras y no "intrusivas" como pueden ser aplicaciones en Flash, y también permiten hacer, de forma muy sencilla, aplicaciones complejas y bien organizadas. en el presente curso veremos los siguentes temas:

SECCIÓN 1 Introducción a jQuery Mobile

  •   Intalación del jQuery Mobile   
  •   Hola, cara de bola   
  •   El atributo data-role
  •   La arquitectura de páginas   
  •   Llamar a una página externa  
  •   Transiciones entre páginas   
  •   Ventanas de diálogo   


SECCIÓN 2 Botones y toolbars

  •   Toolbars   
  •   Barras de navegación   
  •   La posición del encabezado y pie de página   
  •   El pie de página persistente   
  •   Crear botones   


SECCIÓN 3 Listas

  •   Introducción a las listas en jQueryMobile   
  •   Filtrar las listas   
  •   Divisores de lista y bubbles-count   
  •   Íconos en las listas   
  •   Thumbnails en listas   
  •   Botones dobles en listas   
  •   Listas colapsables   
  •   Cambiar la apariencia de las listas   


SECCIÓN 4 Las divisiones colapsables y los acordeones

  •   Divisiones colapsables   
  •   Los atributos mini, icon y position   
  •   Los temas en los acordeones   


SECCIÓN 5 Los formularios en jQuery Mobile

  •   Introducción a los formularios en jQuery Mobile   
  •   Campos de mail, textarea y rangos   
  •   Los checkbox   
  •   Los sliders   
  •   Diferente formas de utilizar los Select   
  •   Radio Buttons   
  •   Crear temas propios   


SECCIÓN 6 Una aplicación con jQuery Mobile

  •   Una aplicación de Marcador de tenis con JQM   
  •   Creación de la primera página   
  •   Controlar los saques: segunda página   
  •   Finalizar los elementos gráficos de la aplicación   
  •   Capturar los datos básicos del juego   
  •   El manejo básico de los eventos en jQuery Mobile   
  •   Control del marcador con javaScript   
  •   El comando refresh para los elementos del formulario   
  •   Cambio de página con changePage()   
  •   Pasar parámetros entre páginas: pageinit   
  •   Determinar al ganador y finalizar

Mail: fj_arce@yahoo.com.mx

Skype: francisco.javier.arce.anguiano

facebook.com/arceanguiano

What are the requirements?

  • Una computadora con editor de texto y un navegador

What am I going to get from this course?

  • El alumno aprenderá a generar una aplicación completa con jQuery Mobile

What is the target audience?

  • Desarrolladores y diseñadores web
  • Desarrolladores de aplicaciones para equipos móbiles

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Bienvenida al curso
Preview
03:44
Section 1: Introducción a jQuey Mobile
07:06
En este video te indicaremos cómo bajar del servidor los archivos del jQuery Mobile y añadirlos a tus páginas web, asi como a conectarte mediante el CDN.
04:02

La versión 1.4.x. tiene un mucho mejor desempeño que su antecesora. Veremos mas detalles, como el cambio de los temas.

13:41
En este video haremos una plantilla genérica y desde su inicio, para manejar los demás ejercicios de jQuery Mobile, leyendo los archivos de nuestro propio disco duro.
05:33
La parte central de la arquitectura de jQueryMobile son las exiquetas con el atributo propio data-role. Asi sabremos donde inicia una página, cuál es su encabezado, su contenido y pie de página.
05:00
Las aplicaciones de jQuery Mobile contienen divisiones que se mostrarán como páginas individuales. Conoceremos la etiqueta “data-role”.
06:09

Las páginas externas también se pueden llamar a una páginas, pero jQuery intentará interpretar esta página como una página jQuery Mobile, lo cual puede deformar la página de carga.

NOTA: con Chrome tiene un candado de seguridad para AJAX, donde se tiene que correr desde un servidor. Si lo ejecutas en tu computadora, te va a enviar un mensaje de error, pero si lo subes a un servidor, o con un servicio como XAMPP, MAMP o WAMP, corre sin problemas (solo pasa en Chrome).

05:27
Con jQuery mobile tendremos completo control para hacer el efecto de transición entre las páginas, ya sean externas o internas. Este efecto se realizará por medio de comandos CSS3 (los cuales nosotros no requerimos saber). El problema aqui es que algunos navegadores no soportan todos los efectos.
02:04
Hacer ventanas de diálogo será muy sencillo. Sólo tendremos que cambiar el atributo data-rel a dialog y nuestra página se abrirá como una ventana emergente, aunque en realidad no lo es, es decir, no la bloqueará el navegador.
Section 2: Botones y toolbars
04:25
Hacer una botonera es muy sencillo en jQuery. Basta con definir los hipervínculos dentro de la cabecera o pie de página, y automáticamente se convierten en botones.
09:38
Cuando utilizamos los toolbars, los botoncitos aparecerán del ancho de sus palabras, lo cual puede representar que tengamos espacios más grandes que otros. Con las barras de navegación, jQuery calculará estos espacios para que nuestra barra luzca bien proporcionada. También podemos hacer que los botones aparezcan como seleccionados y persistentes durante nuestra aplicación.
05:17
Con jQuery mobile podemos controlar la posición del encabezado y del pie de página. Por omisión la posición es "inline", y con "fixed" la podemos mantener fija.
03:33
Una vez que tenemos fijo nuestro pie de página, es importante que éste sea persistente en toda la aplicación, pues esas herramientas nos permitirán mantener la consistencia en nuestra aplicación móvil.
10:43
Uno de los elementos básicos para el desarrollo de aplicaciones en teléfonos móviles, es la creación de botones. En este video vemos los principios de la creación de los mismos en jQuery Mobile.
Section 3: Listas
05:25

Las listas es una de las herramientas más utilizadas en el desarrollo con jQuery Mobile, ya que permiten hacer, y prácticamente sin una sola línea de programación, menús interactivos intuitivos y fácilmente modificables.

Las listas en jQM se pueden desarrollar a partir de las listas ordenadas (ol) o sin orden (ul), sólo hay que escribir como atributo en la etiqueta que tiene un rol de listview:

     

       

  • Hares
  •    

  • Atenea
  •    

  • Poseidón
  •    

  • Zeus
  •    

  • Hermes
  •    

  • Hércules
  •   

  • Apolo

04:01

Una característica muy potente en las listas de jQM es que podemos añadirles un litro a las mismas sin necesidad de una sola línea de programación o alguna cosa complicada (y funcionan). Dentro de la etiqueta de la lista (ul o ol) añadimos el parámetro data-filter="true" y tendremos nuestro filtro. También  podemos añadir un enunciado que ayude al usuario por medio del atributo data-filter-placeholder="Selecciona tu dios favorito". Por último, podemos ocultar la lista y mostrar sólo el campo del filtro con el atributo data-filter-reveal="true".

08:10

jQuery Mobile tiene muchas herramientas para dividir nuestras listas. En forma manual podemos agregar el elemento de lista:

  • Algo que divida
  • También podremos añadir divisores automáticos, es decir,  jQM tomará la primera letra que encuentre y las agrupará. La lista tiene que estar ordenada alfabéticamente para que funcionen los divisores automáticos:

      data-autodividers="true"

      data-count-theme="e">

    09:54

    También podemos utilizar íconos, tanto a la derecha para sustituir al ícono clásico de la flecha a la derecha, como íconos de lado izquierdo, que nos podría ayudar a identificar al ítem de la lista. Para incorporar un ícono, debemos de escribir el atributo dentro de la etiqueta

  • :

  • Atenea
  • Con ello se modificará el ícono que tenemos por omisión del lado derecho.

    Para colocar una imagen a la izquierda, necesitamos una etiqueta como se muestra a continuación:

    08:22

    Otra funcionalidad para ayudarnos a darle estilo a las listas es que podemos incluir una viñeta a los elementos de las listas. Para ello necesitaremos incluir una etiqueta dentro de la etiqueta , pero esta no deberá tener ninguna clase, como en el ejemplo anterior de los íconos. Con ello la celda crecerá de altura, y podremos incluir más texto a los ítems de la lista, como se muestra a continuación:

  •  

      afrodita

     

    Afrodita

     

    Diosa del amor y la sexualidad

      12

     

  • Observe que incluimos un título con una etiqueta

    , una descripción con un párrafo y la imagen que formará la viñeta o thumbnail.

    09:57

    Los botones dobles son muy utilizados en la plataforma iOS como iPhones y iPads. De lado derecho hará un botón generalmente representado por un ícono, y del lado izquierdo la mayoría de la celda, con todas las características que hemos visto hasta el momento. Para realizar esta operación, necesitamos añadir una nueva etiqueta después del cierre de la primera. Con esto el primer link agrupará al elemento de la izquierda y la segunda etiqueta al botón de la derecha.

  •  

      afrodita

     

    Afrodita

     

    Diosa del amor y la sexualidad

     

    6:30

     

     

      data-position-to="window"

      data-transition="pop">wiki

     

     
  •  

    07:05

    Las listas también las podemos hacer colapsables, e incluso agrupar varias listas colapsables. Para ello necesitamos incluir divisiones para cada sección colapsable, y hacer una visión general con el rol collapsible-set.

    Cada una de las divisiones deberá contener su propia lista, es decir, etiquetas

      y un encabezado con el título que llevará cada sección agrupada.

      05:20

      Las listas tienen muchos parámetros con los cuales podremos cambiar la apariencia de las listas. El atributo más general es el de data-theme, que abarca a toda la lista si esta va escrita en la etiqueta de la lista

        o
          . También podremos cambiar el tema de los divisores con el atributo data-divider-theme, asignándole una letra diferente. Otro atributo es el de las burbujas, data-count-theme. También podremos modificar el tema del botón cuando hacemos botones dobles con data-split-theme. Todos estos parámetros pueden tener valores diferentes.

      Section 4: Las divisiones colapsables y los acordeones
      06:15

      Las divisiones colapsables y los acordeones son una de las herramientas fundamentales en el desarrollo de aplicaciones para teléfonos inteligentes y tabletas. Hacerlos es muy sencillo y no necesitaremos una sola línea de código. Simplemente debemos de tener una división con el data-role=”collapsible” y un encabezado con una etiqueta “h”, como puede ser

      .

      Para juntar estas divisiones y hacer un acordeón, necesitamos hacer una división que agrupe a las anteriores y darle el rol de “collapsible-set”. Con tan solo etiquetas HTML tendremos un acordeón en nuestras páginas web.

      04:42

      Contaremos con algunos parámetros que nos permitirán modificar el ancho de las celdas de un acordeón, como “data-mini”, lo cual salva algún espacio que puede ser importante dentro de su desarrollo. También podremos cambiar el icono de las divisiones cuando están abiertas (data-expanded-icon y cuando la división se encuentra cerrada “data-collapsed-icon”. También podremos cambiar la posición del ícono a cualquier parte de la barra del título de la sección, aunque por lo general, este ícono va a la derecha o a la izquierda con data-iconpos=”right”.

      04:10

      Al igual que los otros elementos de jQuery, los acordeones son completamente modificables de aspecto por medio de los temas. Los atributos principales para ello son:

      data-theme: determina todo eltema para el arcordeón.

      data-content-theme: es el tema para el contenido.

      Los atributos pueden escribirse en la división que agrupa a todas las demás divisiones colapsables o en cada una de las mismas, y todos pueden tener diferente tema.

      Section 5: Los formularios en jQuery Mobile
      06:28

      Todos sabemos que llenar un formulario en un teléfono inteligente es un suplicio. jQuery nos ayudará a aligerar esta carga, optimizando los controles ya conocidos para que sea fácil llenarlos en dispositivos móviles. Estos controles serán casi los mismos que en una forma tradicional de HTML5. Iniciaremos con la etiqueta

      , y utilizaremos la caja de entrada tradicional para observar su apariencia en el dispositivo móvil.

      06:08
      jQuery Mobile te permite manejar controles tipo HTML5, como mail o rangos, pero no están limitados para los navegador, incluso para el IE.
      05:06
      Los controles tipo checkbox son fundamentales para recabar la información del usuario. jQuery nos permite adaptarlos a los dispositivos móviles
      04:14
      jQuery Mobile nos permite hacer deslizadores muy practicos para los dispositivos móviles, ya que tienen áreas grandes para ser manipulados con los dedos en zonas sensibles. 
      10:08

      Dentro de una lista podemos hacer que se puedan seleccionar varias opciones, transformando su apariencia en forma homogénea a nuestra aplicación.

      06:07

      Los botones de tipo de radio nos permiten seleccionar una opción dentro de muchas. Asimismo, mostraremos las herramientas de Dreamweaver CS6 para hacer formas con jQuery Mobile.

      09:19

      Dentro del desarrollo de aplicaciones y webapps en general, es fundamental tener una buena apariencia. Una herramienta fundamental serán los temas. En este video conoceremos la poderosa herramienta que nos brinda el grupo de trabajo de jQuery para hacer un tema a nuestro gusto.

      Section 6: Una aplicación con jQuery Mobile
      04:46
      En esta unidad armaremos una aplicación sencilla que llevará el conteo de un juego de tenis. Esta pequeña aplicación podrá ser modificada y acoplada a las necesidades del usuario.
      08:07
      La primera página de nuestra aplicación web nos servirá para recabar los nombres de los jugadores, pero también revisaremos el manejo de eventos y la programación con jQuery.
      09:28
      Nuestra segunda página nos servirá para registrar los posibles resultados del saque del jugador. En este video manejaremos más eventos y los procesaremos con jQuery.
      09:03
      Finalizaremos de crear la página tres, que manejará el resultado del tanto, así cómo la página cuatro, donde nos darán el resultado del juego. Los conceptos nuevos será el manejo de eventos para pasar a una nueva página por medio de JavaScript.
      09:58
      Ahora veremos la manipulación del marcador, y cómo determinar quién gana el game y posteriormente el set.
      09:37
      Para manejar los resultados de un juego de tenis de singles, utilizaremos un pequeño arreglo para los puntos del partido, los juegos o games ganados y finalmente los sets. Con estos arreglos determinaremos al ganador del juego.
      10:05
      Por medio de JavaScript controlaremos la puntuación del juego y tomaremos decisiones sobre el cambio de páginas, entre otras cosas.
      06:08
      Por medio de JavaScript controlaremos los resultados del juego, para activar y desactivar los controles. Sin embargo, observaremos que para que los resultados se visualicen, será necesario refrescarlos.
      07:38
      Programaremos el segundo saque y determinaremos, si algunos de los saques fue bien ejecutado para cambiar de página por medio del comando changePage().
      08:45
      Una vez que la pelota se pone en juego, necesitamos determinar si es un error no forzado o un tiro ganador o "winner". El punto importante, dede el  punto de vista de jQuery, será pasar la información de los componentes de una página, para ser utilizada en la siguiente, lo cual veremos el evento "pageinit".
      14:16

      Para terminar nuestra pequeña aplicación, determinaremos al ganador, y por lo tanto el fin del juego por medio de estructuras condicionales por medio de JavaScript.

      Section 7: Conclusión
      01:59
      Le agradezco su atención al presente curso, esperando que haya sido de utilidad. Quedo a sus órdenes en:

      correo: fj_arce@yahoo.com.mx

      skype: francisco.javier.arce.anguiano

      tt: @fjarce2000

      facebook: https://www.facebook.com/arceanguiano

      Los ejercicios del curso
      Article
      Ejercicios del curso versión 1.4.x.
      Article

      Students Who Viewed This Course Also Viewed

      • Loading
      • Loading
      • Loading

      Instructor Biography

      Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

      Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

      Ready to start learning?
      Take This Course