Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Semana 6A - Jquery Mobile 1

    Cargado por

    Steven Rios
    4 vistas31 páginas

    Título original

    Semana 6A_jQuery Mobile 1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas31 páginas

    Semana 6A - Jquery Mobile 1

    Cargado por

    Steven Rios

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 31

    jQuery Mobile

    Por: Mónica Arias Crisóstomo


    JQuery Mobile es un Framework optimizado para dispositivos táctiles
    (también conocido como Framework móvil) compatible con la gran variedad
    de smartphones y tablets. El Framework de jQuery Mobile también es
    compatible con otros frameworks móviles y plataformas como PhoneGap y
    Worklight entre otros.

    Framework: En el desarrollo de software,


    un framework o infraestructura digital, es
    una estructura conceptual y tecnológica de
    soporte definido, con módulos concretos de
    software, que puede servir de base para la
    organización y desarrollo de software.
    Típicamente, puede incluir soporte de
    programas, bibliotecas, y un lenguaje
    interpretado, entre otras herramientas, para
    así ayudar a desarrollar y unir los diferentes
    componentes de un proyecto.
    Introducción

    Jquery mobile nos permite crear de manera sencilla aplicaciones web usando
    HTML5 básico, por lo tanto, como herramienta de desarrollo podemos usar
    Adobe Dreamweaver, ya que esta aplicación nos facilita la edición de código,
    con su sistema Smart text predictivo, que se anticipa a la línea de código que
    queremos escribir, además tiene incorporado módulos de jQuery Mobile fáciles
    de integrar. Pero en esta sección solo usaremos las líneas de código para
    acostumbrarnos a su fácil edición.
    Jquery mobile utiliza la estructura semántica
    de HTML5 basada en las siguientes
    características:

    • Arquitectura data role: Estructura


    semántica de HTML5 con la que se dividen
    las diferentes secciones de la aplicación
    además provee funciones especializadas a
    la aplicación.
    • Transiciones: Efectos de navegación por
    la aplicación
    • Botones: Creación de botones
    • Listas: Listados de hipertexto o links
    ordenados
    • Formularios interactivos: Interactuar
    con el usuario
    Primeros 3 Pasos

    Es importante enlazar las librerías JavaScript de jQuery y jQuery Mobile, así


    como sus hojas de estilo CSS. Estos archivos pueden descargarse y utilizarse
    localmente, pero se recomienda enlazarlos desde el CDN (Content Delivery
    Network) de jQuery).

    1. Ingresar a jquerymobile.com:

    Descargar la última
    versión estable. Un zip
    para descomprimir. Los
    archivos se dejan en la
    carpeta de la aplicación
    También se pueden vincular los
    archivos directamente desde la
    página. Clic aquí para copiar y pegar
    estás líneas en el Head de los
    documentos HTML. De esta manera
    no se necesita descargar nada

    Aquí están referenciados los archivos CSS y Javascript necesarios para


    crear las aplicaciones desde el HTML. Tienen que aparecer en todas las
    páginas secundarias también.
    2. Ingresar a jquery.com: Aquí hay que descargar las librerías del núcleo de
    Jquery, por decirlo así, que son las librerías principales de este lenguaje de
    programación.

    Descargar la última
    versión. Este archivo .js
    también debe alojarse en
    la carpeta de la aplicación.
    Este archivo también debe
    referenciarse en los archivos
    HTML de toda la aplicación,
    como veremos más adelante.
    En resumen…
    Para cargar la librería jQuery hay dos
    opciones:
    Opción A:
    • descargar la librería de jquery.com
    • Incorporarla al proyecto y referenciarla al
    documento HTML así:
    <script src= “jquery-
    1.1.9.min.js></script>

    Opción B:
    Directamente desde la página:
    code.jquery.com/jquery-1.1.9.min.js

    Existen dos versiones:


    Normal: .js
    Compacta: min.js

    Se recomienda la versión normal para la fase


    de desarrollo y la versión compacta para su
    uso en producción.
    3. Crear archivo nuevo HTML y referenciar las librerías jQuery
    Dentro de la sección head se deben referenciar las librerías como se ve en
    el ejemplo. Se debe colocar el nombre exacto de los archivos y las
    versiones que se descargaron. Si se dejan dentro de otra carpeta se debe
    colocar un (/) después del nombre de la carpeta y luego el archivo como
    este ejemplo de jqm/jquery…
    Este es otro ejemplo de como se pueden referenciar los archivos de jQuery
    dentro de los documentos HTML5:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-
    1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-
    rc.1.min.js"></script>
    </head>
    <body>
    Data Role:
    Una vez que hemos terminado de referenciar las librerías necesarias,
    creamos la estructura de la plantilla principal de la página utilizando
    HTML5, y luego definimos las areas de contenido (content region) que
    proporciona jQueryMobile. El atributo data-role nos permitirá
    maquetar con comodidad y estructurar la página también para
    darle comportamientos a los diferentes roles o secciones.
    Data Role: Este es el ejemplo de la estructura que debemos darle a la
    aplicación en el HTML. Los data role están dentro de divs (divisiones) para
    que sea mas ordenada la maquetación y se puedan controlar mejor.
    data-role=“page”

    El cuerpo del documento contiene los


    divs con atributos “data-role”. Un div
    con el data-role “page”, por ejemplo,
    representa un contenido de pantalla
    completa en el proyecto web.

    Un documento HTML puede contener


    más de un elemento “page”, y por
    tanto más de un elemento de
    pantalla completa. De esta forma
    solo es necesario cargar un único
    documento que contiene las
    múltiples páginas de la aplicación.
    A continuación vamos a mostrar una pequeña explicación
    de los atributos más comunes de jQuery Mobile:

    data-role – Especifica el rol de cada elemento, como


    “header”, “content”, “footer”, etc.

    data-theme – Especifica que tema de diseño se va a


    utilizar con los elementos dentro del contenedor. Puede
    ser “a” o “b”.

    data-position – Especifica si la posición de un elemento


    debería de ser fija, en cuyo caso se renderizará en la
    parte superior (en el header) o en la parte inferior (en el
    footer) por defecto, independientemente del tamaño del
    contenido mostrado.

    data-transition – Especifica una de las 10 posibles


    animaciones que se pueden emplear al pasar entre
    “pages”.

    data-icon – Especifica uno de los 50 posibles iconos que


    pueden ser añadidos a un elemento. Estos iconos se
    mostrarán siendo parte del elemento en el que se
    muestran.
    Este es el resultado de este código al verlo desde el navegador web
    Si quieres ver como esta saliendo la aplicación hay que instalar un
    emulador de dispositivos móviles en Chrome como es el caso de la
    extensión Ripple que se descarga de la tienda Chrome y se instala como
    una extensión del navegador.
    Si ya tienes hosting y dominio puedes ingresar el dominio de la página en
    responsinator.com y ver la salida en diferentes dispositivos como esta
    muestra.
    Data-theme: Son los temas o diferentes colores y degradados que ya
    están pre-establecidos para decorar o personalizar los diferentes
    componentes de la aplicación. Los themes son diferenciados por una letra
    identificativa, gracias a la cual podemos identificar el theme y aplicarlo a
    cualquier componente que queramos, usando el atributo data-theme.
    Tienes información sobre los distintos themes en la página de
    jQueryMobile. El theme además puede ser modificado con facilidad
    tocando los archivos css.
    También tenemos la opción de crearlo fácilmente con el ThemeRoller que hay en
    la web de jQueryMobile, con multitud de themes que podemos crear y asignar a
    cada componente que usemos en nuestra aplicación.
    Aquí se ven las dos pantallas: el código donde elegimos el tema “a” y como se
    vería en el emulador
    Veamos el cambio con el tema “b”, guardamos cambios, abrimos el archivo
    nuevamente o recargamos y notamos el cambio del color. Asi es como funcionan
    los themes, los predefinidos están desde la a hasta la f.
    Aquí colocamos diferentes temas a las secciones o roles.
    Crear botones: Un botón es un link que nos dirige bien sea a una página
    interna o externa, al que le hemos dado el rol de botón, (data-
    role=“buttom”) además podemos asignarle un tema especifico como lo
    muestra el siguiente ejemplo:
    Asi sucesivamente se pueden agregar todos los botones necesarios con
    copiar y pegar el código, y si queremos modificamos el tema para cada uno.
    El rol data-inline=“true” hace que los botones se alineen según se
    muestra:
    Vinculación de páginas: para crear una página interna sencillamente hay
    que copiar todos los data-role desde <div data-role=“page”> y pegarlo
    abajo. Todo lo que se encuentre dentro de un data-role=“page” es una
    página interna separada.

    Pagina 1

    Pagina 2
    Ahora hay que vincularlas. A la página creada en la parte de abajo podemos
    agregarle la etiqueta id=pagina2. Después en la etiqueta a href de la
    página 1 le vinculamos la página 2 (<a href=“pagina2”…) como se
    muestra.

    En la página 2 En la página 1

    Esto quiere decir que al darle clic al botón “ir a página 2” va a dirigirlo a lo
    que tengamos en la parte de abajo que nombramos como id=pagina2
    Aquí se le da clic al botón “ir a página 2” este nos llevo a la página donde le
    escribimos en la sección del content el texto “estas en la página”
    Ahora creamos un botón en la página 2 que nos regrese a la página 1.
    creamos una id a la página 1 como id=“pagina1”. Solo copiamos el botón
    y en la etiqueta a href le vinculamos la id de la página 1

    También podría gustarte