Diferencia entre revisiones de «Usuario:Juanda/jqueryMobile/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/phonegap/nav }} {{#widget:Slides}} {{MiTitulo| Curso de jQuery Mobile}} <div class="slides layout-regular template-default"> <div class="slide"> = Introducci…')
 
(→‎Tipos de desarrollo web)
 
(3 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
−
{{Usuario:juanda/phonegap/nav }}
+
{{Usuario:juanda/jquerymobile/nav }}
 
{{#widget:Slides}} {{MiTitulo| Curso de jQuery Mobile}}  
 
{{#widget:Slides}} {{MiTitulo| Curso de jQuery Mobile}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
Línea 9: Línea 9:
  
 
<div class="slide">
 
<div class="slide">
−
=== Situación actual===
+
=== ¿Qué es jQuery Mobile===
−
*Hay muchas plataformas distintas para smartphones en el mercado
+
*Framework para crear intefaces de usuario basadas en HTML5
−
*Android, iPhone, BlackBerry, Nokia, Windows7 Phone, WebOS
+
*Construido a partir de la librería jQuery y de jQueryUI
−
*Han aparecido otras nuevas como Bada y Meego
+
*Orientado especificamente para móviles
−
*La fragmentación es fuerte entre los distintos fabricantes ya que no se sigue ningún tipo de especificación o estándar común
+
*Algunos ejemplos:
 +
:[http://m.ikea.com/es/ Web móvil de Ikea]
 +
:[http://m.disneyworld.disney.go.com/ Disney World]
 +
:[http://www.moulinrouge.fr/ Moulin Rouge]
 +
:[http://m.stanford.edu/ Universidad de Stanford]
 +
:[http://www.jqmgallery.com/ Y muchos más]
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== Ha pasado antes ===
+
=== Diseño responsivo ===
−
*Desarrollos para Linux/Unix, Windows y Mac
+
* Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
−
*Aparece Java
+
* Grid fluido, especificando sus elementos mediante unidades relativas.
−
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
+
* Imágenes y media también en unidades relativas.
−
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
+
−
*Aparecen frameworks como jquery, YUI o Google Web Toolkit
+
−
*Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
  
−
=== Tipos de aplicaciones móviles===
+
=== Diseño responsable===
−
*Aplicaciones aisladas
+
*Se utiliza el criterio "mobile first":
−
:Alarma
+
:Diseños sencillos
−
:Gestor de llamadas
+
:Diseños más complejos mediante media queries y siempre con un min-width
−
:Explorador de archivos
+
: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, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo]
−
*Aplicaciones basadas en web services
+
*Uso de versiones minified y gzip
−
:e-mail
+
−
:calendario
+
−
:cliente de Twitter
+
−
:...
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Tipos de desarrollo web===
+
===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
 
*Aplicaciones Web accesibles via navegador
 +
<source lang="css">
 +
/* 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 }
 +
}
 +
</source>
  
−
*Web Services
 
−
:Se usan métodos http
 
−
:No tiene control de estado
 
−
:Estructura directorios como URI
 
−
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
 
−
:Extensa [http://www.programmableweb.com lista de aplicaciones web] que permiten consumir Web Services
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
=== Tipo de aplicaciones Web con PhoneGap===
 
=== Tipo de aplicaciones Web con PhoneGap===
 
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
 
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>

Última revisión de 08:37 28 feb 2013


Introducción


¿Qué es jQuery Mobile

  • Framework para crear intefaces de usuario basadas en HTML5
  • 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 }
}

Tipo de aplicaciones Web con PhoneGap

  • PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:
Camara, GPS, libreta de teléfonos....
  • La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
  • Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...

Necesidades en desarrollos web para móviles

  • Desarrollo de la aplicación para varias plataformas
  • 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.
Requerimientos para desarrollo de programas para dispositivos móviles

PhoneGap

  • 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
Navegador en dispositivos móviles

Webviews

  • Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
  • Estos navegadores embebidos es lo que se conoce como webview
  • 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.


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jqueryMobile/Introducción&oldid=11636»