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

De WikiEducator
Saltar a: navegación, buscar
Línea 1: Línea 1:
−
{{Usuario:juanda/phonegap/nav }}
+
{{Usuario:juanda/jquerymobile/nav }}
−
{{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de jQuery Mobile}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
−
= Proyecto Android con PhoneGap =
+
 
 +
= Introducción =
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
−
=== Arquitectura===
+
=== ¿Qué es jQuery Mobile===
−
[[Archivo:arquitectura_phonegap.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
+
*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:
 +
:[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">
−
===Arquitectura javascript===
+
=== Diseño responsivo ===
−
*Una aplicación mediante PhoneGap tendrá dos partes bien definidas:
+
* Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
−
*JavaScript para la parte de negocio: Interfaz de usuario y funcionalidad
+
* Grid fluido, especificando sus elementos mediante unidades relativas.
−
*Javascript para acceder y controlar el dispositivo
+
* Imágenes y media también en unidades relativas.
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Librerías PhoneGap===
+
 
−
:PhoneGap viene con 3 componentes principales:
+
=== Diseño responsable===
−
*'''Código nativo'''
+
*Se utiliza el criterio "mobile first":
−
:Debemos copiar el jar correspondiente a la carpeta de lib
+
:Diseños sencillos
−
:Añadir el jar al class path (botón derecho  Build Path->Add to build Path)
+
:Diseños más complejos mediante media queries y siempre con un min-width
−
*'''Fichero de configuración en XML'''
+
:Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
−
:Copiar el directorio XML del directorio Android de PhoneGap a la carpeta res
+
*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]
−
*'''Fichero con el JavaScript de PhoneGap'''
+
*Uso de versiones minified y gzip
−
:Creamos una carpeta www dentro del directorio assets
+
−
:Ahí colocaremos tanto el javascript como nuestro index.html
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Proyecto Hola Mundo===
+
===Ejemplo CSS Mobile First===
−
*Creamos un nuevo proyecto en el que situaremos los ficheros anteriores
+
* 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.
−
*En Android una clase llamada actividad representa una pantalla de la aplicación, para usar PhoneGap, cambiaremos la pantalla de Actividad a DroidGap.
+
* Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
−
*DroidGap es una actividad especial, que nos permite mostrar páginas html.
+
*Aplicaciones Web accesibles via navegador
−
*Nuestro fichero HolaMundo.java deberá quedar así:
+
<source lang="css">
−
<source lang="java">
+
/* Start with core styles outside of a media query that apply to mobile and up */
−
package com.example.holamundophonegap;
+
/* Global typography and design elements, stacked containers */
−
import org.apache.cordova.DroidGap;
+
body { font-family: Helvetica, san-serif; }
−
import android.os.Bundle;
+
H1 { color: green; }
−
public class HolaMundo extends DroidGap {
+
a:link { color:purple; }
−
@Override
+
 
−
public void onCreate(Bundle savedInstanceState) {
+
/* Stack the two content containers */
−
super.onCreate(savedInstanceState);
+
.main,
−
super.loadUrl("file:///android_asset/www/index.html");  
+
.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>
 
</source>
 +
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nuestro fichero html con el Hola Mundo (cambiando el parámetro src del script por la versión correspondiente):
+
 
−
<source lang="html4strict">
+
=== Tipo de aplicaciones Web con PhoneGap===
−
<!DOCTYPE html>
+
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
−
<html>
+
:Camara, GPS, libreta de teléfonos....
−
  <head>
+
*La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
−
    <title>Device Properties Example</title>
+
*Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
−
    <meta charset='utf-8'>
+
−
    <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
+
−
    <script type="text/javascript" charset="utf-8">
+
−
    // Wait for Cordova to load
+
−
    //
+
−
    document.addEventListener("deviceready", onDeviceReady, false);
+
−
    // Cordova is ready
+
−
    //
+
−
    function onDeviceReady() {
+
−
        var elemento = document.getElementById('dispositivo');
+
−
        elemento.innerHTML="¡Hola Mundo!<br/> ¡Se ha cargado el framework de PhoneGap!";
+
−
    }
+
−
    </script>
+
−
  </head>
+
−
  <body>
+
−
    <p id="dispositivo">Cargando primera aplicación de PhoneGap...</p>
+
−
  </body>
+
−
</html>
+
−
</source>
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*En el fichero AndroidManifest.xml he tenido que modificar la clase que se ejecuta al arrancar la aplicación:
+
=== Necesidades en desarrollos web para móviles===
−
android:name="com.example.holamundophonegap.HolaMundo"
+
*Desarrollo de la aplicación para varias plataformas
−
*También he tenido que añadir un permiso (no se la razón)
+
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
−
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+
:Un usuario puede migrar de SO incluso utilizar varios
−
*El fichero entero:
+
:La experiencia de usuario podría variar entre dispositivos en función de las [http://phonegap.com/about/feature/ características y capacidades de los dispositivos]
−
<source lang="xml">
+
*Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
−
<?xml version="1.0" encoding="utf-8"?>
+
−
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+
−
    package="com.example.holamundophonegap"
+
−
    android:versionCode="1"
+
−
    android:versionName="1.0" >
+
−
    <uses-sdk
+
−
        android:minSdkVersion="8"
+
−
        android:targetSdkVersion="17" />
+
−
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+
−
    <application
+
−
        android:allowBackup="true"
+
−
        android:icon="@drawable/ic_launcher"
+
−
        android:label="@string/app_name"
+
−
        android:theme="@style/AppTheme" >
+
−
        <activity
+
−
            android:name="com.example.holamundophonegap.HolaMundo"
+
−
            android:label="@string/app_name" >
+
−
            <intent-filter>
+
−
                <action android:name="android.intent.action.MAIN" />
+
−
                <category android:name="android.intent.category.LAUNCHER" />
+
−
            </intent-filter>
+
−
        </activity>
+
−
    </application>
+
−
</manifest>
+
−
</source>
+
 
</div>
 
</div>
 +
 +
<div class="slide">
 +
[[Archivo:Mobile_development_requirements.png|600px|thumb|center|Requerimientos para desarrollo de programas para dispositivos móviles]]
 +
</div>
 +
 +
<div class="slide">
 +
===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
 +
</div>
 +
 +
<div class="slide">
 +
[[Archivo:Mobile_os_browser.png|600px|thumb|center|Navegador en dispositivos móviles]]
 +
</div>
 +
 +
<div class="slide">
 +
===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.
 +
</div>
 +
 +
 
</div>
 
</div>

Revisión de 03:13 29 may 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/phonegap/jquerymobile&oldid=13094»