Curso de PhoneGap

De WikiEducator
Saltar a: navegación, buscar
Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas. 		Road Works.svg



Introducción


¿Qué es jQuery Mobile

  • Framework para crear intefaces de usuario basadas en HTML5
-Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores.

-Write less, do more (jQuery) -Diseño atractivo "out of the box": hacen diseñador al programador.

  • Construido a partir de la librería jQuery y de jQueryUI
  • Orientado especificamente para móviles
  • Algunos ejemplos:
Web móvil de Ikea
Disney World
Moulin Rouge
Universidad de Stanford
Y muchos más

Diseño responsivo

  • Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
  • Grid fluido, especificando sus elementos mediante unidades relativas.
  • Imágenes y media también en unidades relativas.

Diseño responsable

  • Se utiliza el criterio "mobile first":
Diseños sencillos
Diseños más complejos mediante media queries y siempre con un min-width
Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
  • Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
  • Uso de versiones minified y gzip

Ejemplo CSS Mobile First

  • Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
  • Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
  • Aplicaciones Web accesibles via navegador 
/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
 
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
 
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
	.main { float: left; width:60%; }
	.sidebar { float: left; width:40%; }
}
 
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
	.main { width:70%; }
	.sidebar { width:30%; }
 
	/* You can also tweak any other styles in a breakpoint */
	H1 { color: blue; font-size:1.2em }
}

Cómo empezar

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Plantilla

<!DOCTYPE HTML>
  <html>
    <head>
      <meta charset='utf-8'> 
      <title></title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
  <body>
    <!-- Página-->
    <div data-role="page">
         <!--Aquí iría nuestra página jQuery Mobile -->
    </div>
    <!-- Fin página -->
  </body>
</html>

Atributo data-role

  • Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web.
  • Mira el siguiente código y analiza su comportamiento: 
<!DOCTYPE HTML>
  <html>
    <head>
      <meta charset='utf-8'> 
      <title>Primera Web con jQuery Mobile</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
  <body>
 
    <!-- Página-->
    <div data-role="page">
 
      <!-- Cabecera -->
      <div data-role="header">
        <h1>Título de la página</h1>
      </div>
 
      <!-- Body -->
      <div data-role="content">
        <p>El contenido de la página va aquí.</p>
      </div>
 
      <!-- Pie página -->
      <div data-role="footer">
        <h4> Contenido en el pie de la página</h4>
      </div>
 
    </div>
    <!-- Fin página -->
 
  </body>
</html>

Estructura aplicación

  • Una aplicación tiene varias páginas y cajas de diálogo.
  • Mediante jQuery Mobile se definirán todas en la misma página html.
  • Cada página se puede abrir mediante un botón, que definirá su comportamiento mediante los atributos data-rel y data-transition: 
<a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery Mobile Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
 
        <!-- Página 1-->
        <div data-role="page" id="main">
            <div data-role="header">
                <h1>
                    Página 1
                </h1>
            </div>
            <div data-role="content">
                <h1>
                    Ejemplo de páginas con jQueryMobile
                </h1>
                <a data-role="button" href="#page2">Ver página 2</a>
                <a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">Ver página 3</a>
            </div>
            <div data-role="footer">
                <h4>
                    Pie de página 1
                </h4>
            </div>
        </div>
        <!-- Fin página 1 -->
 
        <!-- Página 2-->
        <div data-role="page" id="page2" data-add-back-btn=”true”>
            <div data-role="header">
                <h1>
                    Segunda página
                </h1>
            </div>
            <div data-role="content">
                <h1>
                    Contenido de la segunda página
                </h1>
            </div>
            <div data-role="footer">
                <h4>
                    Pie de página 2
                </h4>
            </div>
        </div>
        <!-- Fin página 2 -->
 
 
        <!-- Página 3 -->
        <div data-role="page" id="dialog1">
 
            <div data-role="header">
                <h1>
                    Tercera página
                </h1>
            </div>
            <div data-role="content">
                <h1>
                    Está página se abre como modal debido al atributo data-rel del botón.
                </h1>
            </div>
            <div data-role="footer">
                <h4>
                    Pie de la ventana modal
                </h4>
            </div>
        </div>
        <!-- Fin página 3 -->
    </body>
</html>

Formularios

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
        <!-- Página 1-->
        <div data-role="page" id="main">
            <div data-role="header">
                <a href="index.html" data-icon="delete">Cancelar</a>
                <h1>
                    Editar contacto
                </h1>
                <a href="index.html" data-icon="check">Guardar</a>
            </div>
            <div data-role="content">
                <form action="#" method="get">
                    <h2>
                        Formulario básico
                    </h2>
                    <div data-role="fieldcontain">
                        <label for="name">
                            Nombre:
                        </label>
                        <input type="text" name="name" id="name" value="" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea">
                            Descripción:
                        </label>
                        <textarea cols="40" rows="8" name="textarea" id="textarea">
                        </textarea>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="search">
                            Buscar:
                        </label>
                        <input type="search" name="search" id="search" value="" />
                    </div>
                </form>
            </div>
            <div data-role="footer" class="ui-bar">
                <a href="index.html" data-role="button" data-icon="delete">Quitar</a>
                <a href="index.html" data-role="button" data-icon="plus">Añadir</a>
                <a href="index.html" data-role="button" data-icon="arrow-u">Anterior</a>
                <a href="index.html" data-role="button" data-icon="arrow-d">Siguiente</a>
            </div>
        </div>
        <!-- Fin página 1 -->
    </body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/jquerymobile&oldid=13127»