Archivos de etiquetas: html5

Cámara, Phonegap y HTML5

Usar la cámara con Phonegap es muy sencillo, pero hoy vamos a explicar como usarla y manejar la información desde HTML5 y javascript. Esto que vamos a explicar es válido para todas las plataformas móviles como IOS, Android y Windows Phone.

Empezamos con la parte sencilla de todos esto, ¿cómo damos permiso para usar la cámara? Esto viene muy bien explicado en la documentación de Phonegap.

Android: Añadimos al fichero config.xml lo siguiente:

<plugin name="Camera"
  value="org.apache.cordova.CameraLauncher" />

En AndroidManifest.xml

<uses-permission
  android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

IOS: Añadimos al fichero config.xml lo siguiente:

<plugin name="Camera" value="CDVCamera" />

Windows Phone: Añadimos al fichero WPAppManifest.xml lo siguiente:

<Capabilities>
  <Capability Name="ID_CAP_ISV_CAMERA" />
  <Capability Name="ID_HW_FRONTCAMERA" />
</Capabilities>

Leer más →

El teclado en Android hace perder el css media

En algunos dispositivos Android al abrir el teclado sobre nuestra aplicación ocurre que esta desplaza a la aplicación hacia arriba haciendo que esta pierda los estilos si se tiene incluido más de un media por device-width.

Para ello, leyendo por internet he llegado a la conclusión de utilizar dos opciones para evitar este tipo de problemas, especialmente lo he encontrado en algunos dispositivos de la marca SAMSUNG.

Vamos a la solución, en las activities hay que añadir lo siguiente:

android:windowSoftInputMode="adjustPan|adjustResize"

Con esto en algunos dispositivos es suficiente, pero si además añadimos “height=device-height” en el “viewport” de nuestro HTML queda solventado para todos los dispositivos y versiones actuales.

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />

Nota final, si estáis además desarrollando para IOS, no es recomendable usar “height=device-height” ya que esto hace que los dispositivos de la manzana no tengan en cuenta la barra de estado produciendo un pequeño scroll.

Como solucionar que el select nativo no se abra en algunas versiones de Android

select oen

Estilo del select con JqueryMobile

Una vez teníamos la aplicación en funcionamiento y en producción vimos que al convertir la página de Nuevo Usuario en un PopUp el combo o select nativo de HTML dejaba de abrirse en algunas versiones de Android con jQuery Mobile. La versiones afectadas eran las 2.3.X es decir, Android Gingerbread.

Leer más →

Localstorage en Android y cualquier otro sistema

Con la llegada de HTML5 llegó el uso de localstorage para poder almacenar datos en cliente. En los navegadores de escritorio es necesario pedir permiso al usuario para permitir este alojamiento, pero en los dispositivos móviles no es necesario realizarlo.

Vamos a explicar un poco como se usa este localstorage con Javascritp. Para empezar, es necesario para versiones de Android superiores a la 4.0  informarlo en el Activity por defecto.

@Override public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     super.init();

     super.appView.getSettings().setDomStorageEnabled(true);
     ......
     ......
}

Leer más →

A %d blogueros les gusta esto: