Aprende jQuery Mobile
4.3 (18 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.
366 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende jQuery Mobile to your Wishlist.

Add to Wishlist

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.3 (18 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.
366 students enrolled
Last updated 12/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno aprenderá a generar una aplicación completa con jQuery Mobile
View Curriculum
Requirements
  • Una computadora con editor de texto y un navegador
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

Who is the target audience?
  • Desarrolladores y diseñadores web
  • Desarrolladores de aplicaciones para equipos móbiles
Students Who Viewed This Course Also Viewed
Curriculum For This Course
46 Lectures
05:07:19
+
Bienvenida al curso
1 Lecture 03:44
+
Introducción a jQuey Mobile
8 Lectures 49:02
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.
Preview 07:06

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

Preview 04:02

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.
Hola, cara de bola
13:41

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.
El atributo data-role
05:33

Las aplicaciones de jQuery Mobile contienen divisiones que se mostrarán como páginas individuales. Conoceremos la etiqueta “data-role”.
La arquitectura de páginas
05:00

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).

Llamar a una página externa
06:09

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.
Transiciones entre páginas
05:27

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.
Ventanas de diálogo
02:04

Contesta las siguientes preguntas para probar tus conocimientos:

Introducción a jQuery Mobile
3 questions
+
Botones y toolbars
5 Lectures 33:36
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.
Preview 04:25

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.
Barras de navegación
09:38

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.
La posición del encabezado y pie de página
05:17

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.
El pie de página persistente
03:33

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.
Crear botones
10:43

Responde las siguientes preguntas de opción múltiple para comprobar tus conocimientos:

Botones y tollbars en jQuery
2 questions
+
Listas
8 Lectures 58:14

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

Introducción a las listas en jQueryMobile
05:25

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".

Filtrar las listas en jQuery Mobile
04:01

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">

    Divisores de lista y bubbles-count
    08:10

    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:

    Íconos en las listas
    09:54

    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.

    Thumbnails en listas
    08:22

    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

     

     
  •  

    Botones dobles en listas
    09:57

    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.

      Listas colapsables
      07:05

      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.

      Cambiar la apariencia de las listas
      05:20

      Constesta las siguientes preguntas para comprobar tus conocimientos:

      Listas en jQuery Mobile
      3 questions
      +
      Las divisiones colapsables y los acordeones
      3 Lectures 15:07

      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.

      Divisiones colapsables
      06:15

      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”.

      Los atributos mini, icon y position
      04:42

      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.

      Los temas en los acordeones
      04:10

      Responde las siguientes preguntas para comprobar tus conocimientos:

      Listas colapsables
      2 questions
      +
      Los formularios en jQuery Mobile
      7 Lectures 47:30

      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.

      Introducción a los formularios en jQuery Mobile
      06:28

      jQuery Mobile te permite manejar controles tipo HTML5, como mail o rangos, pero no están limitados para los navegador, incluso para el IE.
      Campos de mail, textarea y rangos
      06:08

      Los controles tipo checkbox son fundamentales para recabar la información del usuario. jQuery nos permite adaptarlos a los dispositivos móviles
      Los checkbox
      05:06

      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. 
      Los sliders
      04:14

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

      Diferente formas de utilizar los Select
      10:08

      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.

      Radio Buttons
      06:07

      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.

      Crear temas propios
      09:19
      +
      Una aplicación con jQuery Mobile
      11 Lectures 01:37:51
      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.
      Una aplicación de Marcador de tenis con JQM
      04:46

      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.
      Creación de la primera página
      08:07

      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.
      Controlar los saques: segunda página
      09:28

      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.
      Finalizar los elementos gráficos de la aplicación
      09:03

      Ahora veremos la manipulación del marcador, y cómo determinar quién gana el game y posteriormente el set.
      Capturar los datos básicos del juego
      09:58

      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.
      El manejo básico de los eventos en jQuery Mobile
      09:37

      Por medio de JavaScript controlaremos la puntuación del juego y tomaremos decisiones sobre el cambio de páginas, entre otras cosas.
      Control del marcador con javaScript
      10:05

      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.
      El comando refresh para los elementos del formulario
      06:08

      Programaremos el segundo saque y determinaremos, si algunos de los saques fue bien ejecutado para cambiar de página por medio del comando changePage().
      Cambio de página con changePage()
      07:38

      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".
      Pasar parámetros entre páginas: pageinit
      08:45

      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.

      Determinar al ganador y finalizar
      14:16

      Responde las siguientes preguntas para comprobar tus conocimientos

      Programar con jQuery Mobile
      2 questions
      +
      Conclusión
      3 Lectures 02:08
      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

      Hasta pronto
      01:59

      Los ejercicios del curso
      00:07

      Ejercicios del curso versión 1.4.x.
      00:02
      About the Instructor
      Francisco Javier Arce Anguiano
      4.4 Average rating
      951 Reviews
      12,885 Students
      35 Courses
      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.