Cómo aprovechar Webtop Cómo HTML5 mejora la experiencia del usuario

MOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC. All other trademarks are the property of their respective owners. © 2011 Motorola Mobility, Inc. All rights reserved.

Peter van der Linden Evangelista de la tecnología Android

Desarrollador de Plataformas y Servicios

Motorola Mobility

Cómo aprovechar Webtop Cómo HTML5 mejora la experiencia del usuario

2 Página MOTODEV App Summit

© 2011 Motorola Mobility, Inc.

•  1 DESCRIPCIÓN GENERAL DEL DISPOSITIVO

•  2 PROGRAMACIÓN DE LA CÁMARA FRONTAL

•  3 CREACIÓN DE APLICACIONES QUE SE EJECUTAN A TRAVÉS DE DISPOSITIVOS

•  4 QUÉ HACE LA APLICACIÓN WEBTOP



Página

Descripción general del dispositivo •  Motorola ATRIX 4G MB860 •  “Candy bar” de 11mm de grosor •  Pantalla de 4 pulgadas, qHD (540 x 960), 240 dpi, color de 24 bits •  Procesador NVIDIA Tegra 2 doble núcleo de 1GHz •  Android 2.2.1 (Froyo) •  1930 mAh Batería de polímero de iones de litio



Página

RAM/ROM

•  1 GB RAM

•  2 GB de almacenamiento seguro

•  10,7 GB de almacenamiento compartido no removible

•  Máximo de 32 GB de almacenamiento compartido removible micro SDHC



Página

Funcionamiento en red

•  W-CDMA 850/1900/2100 •  GSM 850/900/1800/1900

•  HSDPA 14Mbps (categoría 10) •  Wi-Fi, Bluetooth…



Página

Cámaras y video

•  Cámaras frontal y posterior o  Posterior: 5 megapíxeles, enfoque automático, flash

LED dual o  Frontal: VGA (640x480) con enfoque fijo

•  Grabación y reproducción de video o  720p HD, 30fps o  Reproducción en pantalla del dispositivo o

mediante puerto HDMI



Página

Sensores de hardware

•  Acelerómetro •  Magnetómetro (brújula) •  Sensor de proximidad •  Sensor de luz ambiente •  Lector biométrico de huellas digitales

o  Desbloquea el teléfono con mayor seguridad o  Ninguna API para acceder al lector en este

momento



Página

Software

•  Navegador Android WebKit

•  Adobe® Flash® Player

•  Aplicación webtop o  Aplicación File Manager

•  Aplicación Entertainment Center



Página

Accesorios: Lapdock

•  Bahía factor de forma para laptop 2,4 lbs •  Pantalla de 11.6" •  Teclado completo, trackpad con clic izquierdo y

derecho •  Dos puertos USB, conectores de bahía para

ATRIX •  Altavoces estéreo •  Batería integrada

o  Carga el ATRIX



Página

Accesorios: HD Bahía multimedios

•  Conectores de bahía micro USB y HDMI •  Conecta el teléfono a un monitor HD o televisor

HD •  Conecta los periféricos

o  Teclado o ratón USB o  Dispositivos USB de almacenamiento masivo

•  Control remoto



Página

Recursos de ATRIX

•  Complemento de SDK o  http://developer.motorola.com/docstools/tools/

•  Artículo sobre descripción general de la aplicación Webtop o  http://developer.motorola.com/docstools/library/

•  Especificaciones del dispositivo o  http://developer.motorola.com/products/atrix-mb860/


Cómo programar la cámara frontal

MOTOROLA y el logotipo estilizado son marcas de fábrica o marcas registradas de Motorola Trademark Holdings, LLC. Todas las demás marcas comerciales son propiedad de sus respectivos dueños. © 2011 Motorola Mobility, Inc. Todos los derechos reservados.



Página

API de cámara frontal

•  Proporciona acceso mediante programación a la cámara frontal

•  API específica de Motorola (porque la cámara frontal es específica de Motorola)

•  Presente en 2.2 (Froyo)

•  Obsoleto, pero todavía presente, en 2.3 (Gingerbread) o  Gingerbread tiene una API Google estándar, Froyo no



Página

.

•  Librería (lib) com.motorola.hardware.frontcamera.FrontCamera

•  Un método: static Camera getFrontCamera();

•  Devuelve un objeto estándar “Camera” Android; tratarlo como cualquier otro

•  ¡Eso es todo lo que hay que hacer!




Página


import com.motorola.hardware.frontcamera.FrontCamera; import android.hardware.Camera;

Camera frontCam = FrontCamera.getFrontCamera(); // frontCam representa la cámara frontal // tratarlo como cualquier otro objeto “Camera” ... frontCam.release(); // siempre libere cuando haya terminado



Página

Archivo Manifest de la cámara frontal

<uses-library android:name="com.motorola.hardware.frontcamera"/> <uses-feature android:name="android.hardware.camera"/> <uses-permission android:name="android.permission.CAMERA"/>



Página

Consejos acerca de la cámara frontral

•  Este código no funciona en el emulador, pruébelo en el dispositivo

•  El complemento de SDK de ATRIX contiene un archivo jar que se puede utilizar para que sus aplicaciones compilen o  ffc_api_stub.jar

•  Ver el artículo sobre API de cámara frontal de Motorola para obtener instrucciones sobre la forma de agregar este archivo jar a su proyecto o  "Motorola Front-Facing Camera API" - http://developer.motorola.com/

docstools/library/ motorola-front-facing-camera-api/


Cómo crear aplicaciones que se ejecutan a través de dispositivos




Página

Cómo utilizar las API específicas de Motorola

•  El código de la cámara frontal no se ejecuta sin la librería necesaria

•  Usted puede utilizar la reflexión (“reflection”) para detectar y utilizar API solamente en aquellos dispositivos que tengan la librería



Página

Ejemplo de reflexión – cambio en el manifesto

<uses-library android:name="com.motorola.hardware.frontcamera” android:required="false" />



Página

Ejemplo de reflexión – poner todo en una subclase

private static class ConditionalFrontCamera { public static Camera getFrontCamera(){ try { Method fcMethod = Class.forName( "com.motorola.hardware.frontcamera.FrontCamera") .getDeclaredMethod("getFrontCamera", (Class[])null);

return (Camera) fcMethod.invoke( (Object[])null, (Object[])null);

} catch (Exception ex){ return null; } } }



Página

Ejemplo de reflexión – utilizar la subclase

Camera frontCam = ConditionalFrontCamera.getFrontCamera();

if(frontCam != null) { // Tengo la cámara frontal. Proceder } else { // No hay cámara frontal }


Tegra 2 Chipset




Página

Arquitectura de PC clásica

CPU

Northbridge

GPU RAM

Southbridge

PCI USB SATA



Página

Tegra 2 – de alta velocidad

•  es un verdadero sistema en un solo microprocesador (“System-on-a-Chip”) o  Northbridge, Southbridge, CPUs y GPU

•  CPU ARM de doble núcleo, arquitectura de ver 7 o  Cada uno funciona a 1 GHz o  Fabs pasó a núcleo múltiple porque no podían

añadir velocidad (debido al calor), pero tenían “die room” (debido a la Ley de Moore)

o  las unidades cuádruples llegarán pronto …


¿Qué hace la aplicación Webtop?




Página

.

Motorola Lapdock

Es un entorno que utiliza la energía de la CPU del teléfono para respaldar un navegador de desktop completamente independiente



Página

Versión 1.0

Aplicación Webtop

Vista del móvil HTML, js Aplicaciones web

Android



Página

Versión 1.0 © 2011 Motorola Mobility, Inc.

USB de almacenamiento masivo



Página

Versión 1.0 © 2011 Motorola Mobility, Inc.

Navegador móvil vs. navegador de desktop



Página

.

¿Qué hace la aplicación Webtop?

•  Se inicia automáticamente cuando la bahía está conectada a la pantalla

•  Lapdock de Motorola para Motorola ATRIX 4G proporciona pantalla y teclado/puntero en una unidad

•  Le brinda un Firefox 3.6.13 Desktop de tamaño completo en una pantalla de 11,5 pulgadas

•  Interfaz de acceso a la nube (“cloud”)


Soporte HTML5




Página

HTML 5

•  revisión más reciente de la norma HTML por W3C •  trabajo en progreso, metas:

•  soportar aplicaciones Web •  reducir la necesidad de plugins •  mejor manejo de los errores •  independencia de dispositivo •  lenguaje de marcado (“markup”) para reemplazar

secuencias de comandos



Página

HTML 5

•  muchos elementos y atributos nuevos

section, article, aside, hgroup, header, footer, nav, figure, video, audio, canvas, datalist, embed, mark, etc.



Página

Firefox 3.6 soporta

•  Arrastrar y soltar (“drag & drop”) nativo

•  Caché de archivos de aplicación, especificado por el desarrollador

•  Reproducción de audio WAV y OGG en <audio>

•  Ver http://developer.motorola.com/docstools/library/webtop-application-overview/



Página

Firefox 3.6 también soporta

•  Vista 2D de Javascript a <canvas>

•  Web Storage para almacenar los datos en el disco duro del usuario, para que la aplicación web esté disponible fuera de línea (pares de clave / valor)

•  Acceso a geolocalización por Javascript

•  Más información en http://www.html5rocks.com



2D rendering onto a canvas

•  test for feature support. If present, use it. <canvas id="myc" width="500" height="300"></canvas>!<script>! function supportsCanvas() {! return !!document.createElement('canvas').getContext;! }!

var head = new Image(); head.src="head.jpg”;!

var myc = document.getElementById("myc");!var cxt = myc.getContext("2d");!

head.onload = function () {! cxt.drawImage(head, 0, 0);!}!



Local Storage

•  test for feature support. If present, use it.

function supportsLocalStorage() {! return ('localStorage' in window) ! && window['localStorage']!==null;! }!

try {! var msg = "localStorage is working OK <br>";! localStorage.setItem("key", msg );! } catch (e) {! document.write("Excpn in local storage");! }! document.write( localStorage.getItem("key") );!



Geolocation •  test for feature support. If present, use it. function supportsGeolocation() {! return !!navigator.geolocation;! }!function savePos(pos) {! var lat = pos.coords.latitude;! var lon = pos.coords.longitude;!}! try {! navigator.geolocation.getCurrentPosition(savePos);! } catch (e) {!



Página

Preguntas y respuestas



¿Desea formular alguna pregunta?

Brasil - #appsum11br Argentina - #appsum11ar México - #appsum11mx

community-developer.motorola.com



gracias

horario comercial junio ?, ??horario a.m. de la2noamérica

moto.ly/officehours/???



Página

Licencias

Los ejemplos de código fuente que aparecen en esta presentación pueden estar bajo licencia de Apache License, versión 2 de la siguiente manera: Copyright © 2010, Proyecto Código Abierto Android. Todos los derechos reservados, salvo indicación expresa en contrario.

Con licencia de Apache, Versión 2.0 (la "Licencia"); no podrá usar este archivo, salvo que cumpla con lo que establece la licencia. Puede obtener una copia de la licencia en http://www.apache.org/licenses/LICENSE-2.0.

Salvo que lo exija la legislación vigente o se preste conformidad por escrito, el software distribuido bajo licencia, se distribuye "EN EL ESTADO EN QUE SE ENCUENTRA" SIN GARANTÍAS DE NINGÚN TIPO, explícitas o implícitas. Consulte la Licencia para ver los permisos y las limitaciones que rigen para la Licencia según el idioma específico.



Página

Licencias Los ejemplos de código fuente que aparecen en esta presentación pueden estar bajo licencia de BSD, de la manera siguiente: Copyright © 2010-2011, Motorola, Inc. Todos los derechos reservados, salvo que se indique explícitamente lo contrario Se permite la redistribución y el uso en forma de fuente o binaria, con o sin modificación, siempre y cuando se cumplan las siguientes condiciones: Las redistribuciones del código fuente deben conservar el aviso de derechos de autor arriba mencionado, la presenta lista de condiciones y el siguiente descargo de responsabilidad. Las redistribuciones en forma binaria deben reproducir el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de responsabilidad en la documentación y/u otros materiales suministrados con la distribución. Ni el nombre de Motorola, Inc. ni los nombres de sus distribuidores pueden usarse para avalar o promover productos que deriven de este software sin previa autorización específica por escrito.

EL PRESENTE SOFTWARE SE SUMINISTRA POR LOS TITULARES Y CONTRIBUYENTES DE LOS DERECHOS DE AUTOR EN EL ESTADO EN QUE SE ENCUENTRA Y NO SE RENUNCIA A NINGUNA EXPRESIÓN NI GARANTÍA IMPLÍCITA, A TÍTULO ENUNCIATIVO, LAS GARANTÍAS DE COMERCIALIZACIÓN IMPLÍCITAS Y APTITUD PARA UN OBJETIVO PARTICULAR. EN NINGÚN CASO PODRÁ EL TITULAR DE LOS DERECHOS DE AUTOR O LOS CONTRIBUYENTES SER RESPONSABLE POR NINGÚN DAÑO Y PERJUICIO DIRECTO, INDIRECTO, INCIDENTAL, ESPECIAL, PUNITIVO, O CONSECUENCIAL (A TÍTULO ENUNCIATIVO DE ABASTECIMIENTO DE BIENES O SERVICIOS DE SUSTITUCIÓN; PÉRDIDA DE USO, DATOS O GANANCIAS O INTERRUPCIÓN DE ACTIVIDADES) INDEPENDIENTEMENTE DE SU ORIGEN Y DE TODA TEORÍA DE RESPONSABILIDAD, YA SEA EN EL CONTRATO, LA RESPONSABILIDAD ESTRICTA O POR LESIÓN JURÍDICA (INCLUSO NEGLIGENCIA O DE OTRO MODO) QUE SURJA DE ALGUNA MANERA DEL USO DE ESTE SOFTWARE, INCLUSO SI SE ADVIRTIÓ DE LA POSIBILIDAD DE DICHO DAÑO.



Technology

Cómo aprovechar Webtop Cómo HTML5 mejora la experiencia del usuario