Diferencia entre revisiones de «Usuario:Juanda/jquerymobile/sintaxis»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/jquerymobile/nav }} {{#widget:Slides}} {{MiTitulo| Curso de jQuery Mobile}} <div class="slides layout-regular template-default"> <div class="slide"> = Sintaxi…')
 
(→‎ThemeRoller)
 
(5 revisiones intermedias por el mismo usuario no mostrado)
Línea 52: Línea 52:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Ejemplo CSS Mobile First===
+
===Ejemplo===
−
* 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.
+
<source lang="html4strict">
−
* Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
+
<!DOCTYPE html>
−
*Aplicaciones Web accesibles via navegador
+
<html>
−
<source lang="css">
+
<head>
−
/* Start with core styles outside of a media query that apply to mobile and up */
+
<title>Page Title</title>
−
/* 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 */
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
.main,
+
−
.sidebar { display:block; width:100%; }
+
  
−
/* First breakpoint at 576px */
+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
−
/* Inherits mobile styles, but floats containers to make columns */
+
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
−
@media all and (min-width: 36em){
+
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
−
.main { float: left; width:60%; }
+
</head>
−
.sidebar { float: left; width:40%; }
+
<body>
−
}
+
<!-- Start of first page -->
 +
<div data-role="page" id="foo">
 +
<div data-role="header">
 +
<h1>Foo</h1>
 +
</div><!-- /header -->
 +
<div data-role="content">
 +
<p>I'm first in the source order so I'm shown as the page.</p>
 +
<p>View internal page called <a href="#bar">bar</a></p>
 +
</div><!-- /content -->
 +
<div data-role="footer">
 +
<h4>Page Footer</h4>
 +
</div><!-- /footer -->
 +
</div><!-- /page -->
  
−
/* Second breakpoint at 800px */
+
<!-- Start of second page -->
−
/* Adjusts column proportions, tweaks base H1 */
+
<div data-role="page" id="bar">
−
@media all and (min-width: 50em){
+
 
−
.main { width:70%; }
+
<div data-role="header">
−
.sidebar { width:30%; }
+
<h1>Bar</h1>
 +
</div><!-- /header -->
 +
 
 +
<div data-role="content">
 +
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
 +
<p><a href="#foo">Back to foo</a></p>
 +
</div><!-- /content -->
 +
 
 +
<div data-role="footer">
 +
<h4>Page Footer</h4>
 +
</div><!-- /footer -->
 +
</div><!-- /page -->
 +
</body>
 +
</html>
  
−
/* You can also tweak any other styles in a breakpoint */
 
−
H1 { color: blue; font-size:1.2em }
 
−
}
 
 
</source>
 
</source>
  
Línea 88: Línea 104:
 
<div class="slide">
 
<div class="slide">
  
−
=== Tipo de aplicaciones Web con PhoneGap===
+
===Consideraciones===
−
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
+
*Cualquier petición a la web mediante un clic en un enlace o un envío de formulario se transforma en una petición ajax para evitar la recarga completa de la página
−
:Camara, GPS, libreta de teléfonos....
+
*Se usa hash para guardar la historia de navegación por la web para todas las páginas ajax. Esto tiene la limitación de que no permite usar enlaces internos del tipo (index.html#foo) porque jQuery MObile buscará un "page" con id #foo.
−
*La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
+
*El atributo id de todos los elementos debe ser único para todas las páginas del sitio web ya que el modelo de navegación de jQuery permite tener varias páginas presentes en el DOM al mismo tiempo.
−
*Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
+
*Se puede hacer un prefetch/caché de los enlaces presentes en la página para una navegación más rápida.  
 +
*Se pueden configurar transiciones entre las cargas.
 +
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
=== Necesidades en desarrollos web para móviles===
+
 
−
*Desarrollo de la aplicación para varias plataformas
+
===Páginas modales===
 +
*Cualquier page con el atributo data-rel="dialog"
 +
*Podemos hacer algún tipo de transición mediante el atributo data-transition="pop" (otros valores: flip, slidedown, turn, flip, fade, none....)
 
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
 
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
 
:Un usuario puede migrar de SO incluso utilizar varios
 
:Un usuario puede migrar de SO incluso utilizar varios
Línea 104: Línea 124:
  
 
<div class="slide">
 
<div class="slide">
−
[[Archivo:Mobile_development_requirements.png|600px|thumb|center|Requerimientos para desarrollo de programas para dispositivos móviles]]
 
−
</div>
 
  
−
<div class="slide">
+
===Widgets===
−
===PhoneGap===
+
*[http://jquerymobile.com/demos/1.3.0/ Demostración de los distintos widgets]
−
*Se basa en la parte común de todos los dispositivos móviles: el navegador
+
 
−
*Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
+
−
*HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
+
−
*CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
+
−
*Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit
+
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
[[Archivo:Mobile_os_browser.png|600px|thumb|center|Navegador en dispositivos móviles]]
 
−
</div>
 
  
−
<div class="slide">
+
===ThemeRoller===
−
===Webviews===
+
*[http://jquerymobile.com/themeroller/ Uso de ThemeRoller] al igual que en jQueryUI para dar el diseño de los elementos.
−
*Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.  
+
*Podemos utilizar hasta 26 swatches o diseños de contenidos, toolbar y botones. Basta con añadir data-theme="e" a un elemento para aplicarle el theme e.
−
*Estos navegadores embebidos es lo que se conoce como '''webview'''
+
*Hay herencia de theme del page a los elementos (el header y el footer no, por defecto el swatch a).
−
*Cada una de las pantallas de nuestra aplicación será un webview.
+
−
*Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
+
−
*Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.
+
 
</div>
 
</div>
−
 
−
 
 
</div>
 
</div>

Última revisión de 12:04 28 feb 2013


Sintaxis y elementos


Estructura página web

<!DOCTYPE html> 
<html>
<head>
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
	...content goes here...
</body>
</html>

Page

  • Es la unidad principal en jQuery Mobile
  • Un documento html puede estar formado por una page y hacer peticiones de otras pages al servidor mediante ajax.
  • Un documento html puede estar formado por varios pages y el framework cambiará de uno a otro sin hacer peticiones al servidor.
  • Las transiciones entre pages pueden estar animadas. 
<div data-role="page">
	...
</div>

Dentro del container page, puede ir cualquier código html pero la estructura típica es: 

<div data-role="page">
	<div data-role="header">...</div>
	<div data-role="content">...</div>
	<div data-role="footer">...</div>
</div>

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
 
	<meta name="viewport" content="width=device-width, initial-scale=1">
 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->
	<div data-role="content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#bar">bar</a></p>
	</div><!-- /content -->
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
 
<!-- Start of second page -->
<div data-role="page" id="bar">
 
	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->
 
	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
	</div><!-- /content -->
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

Consideraciones

  • Cualquier petición a la web mediante un clic en un enlace o un envío de formulario se transforma en una petición ajax para evitar la recarga completa de la página
  • Se usa hash para guardar la historia de navegación por la web para todas las páginas ajax. Esto tiene la limitación de que no permite usar enlaces internos del tipo (index.html#foo) porque jQuery MObile buscará un "page" con id #foo.
  • El atributo id de todos los elementos debe ser único para todas las páginas del sitio web ya que el modelo de navegación de jQuery permite tener varias páginas presentes en el DOM al mismo tiempo.
  • Se puede hacer un prefetch/caché de los enlaces presentes en la página para una navegación más rápida.
  • Se pueden configurar transiciones entre las cargas.

Páginas modales

  • Cualquier page con el atributo data-rel="dialog"
  • Podemos hacer algún tipo de transición mediante el atributo data-transition="pop" (otros valores: flip, slidedown, turn, flip, fade, none....)
  • La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
Un usuario puede migrar de SO incluso utilizar varios
La experiencia de usuario podría variar entre dispositivos en función de las características y capacidades de los dispositivos
  • Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.

Widgets

ThemeRoller

  • Uso de ThemeRoller al igual que en jQueryUI para dar el diseño de los elementos.
  • Podemos utilizar hasta 26 swatches o diseños de contenidos, toolbar y botones. Basta con añadir data-theme="e" a un elemento para aplicarle el theme e.
  • Hay herencia de theme del page a los elementos (el header y el footer no, por defecto el swatch a).
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jquerymobile/sintaxis&oldid=11648»