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

Motorola Mobility
Peter van der Linden
Evangelista de la tecnología Android
Desarrollador de Plataformas y Servicios

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.

MOTODEV App Summit Página 2

•  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

© 2011 Motorola Mobility, Inc.

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 and the Stylized M Logo are trademarks or de fábrica o marcas registradas deTrademark Holdings, LLC.
MOTOROLA y el logotipo estilizado son marcas registered trademarks of Motorola Motorola Trademark Holdings, LLC.
All otherTodas las demás marcas comerciales son propiedad de sus respectivos dueños. ©Inc. All rights reserved. Inc. Todos los
trademarks are the property of their respective owners. © 2011 Motorola Mobility, 2011 Motorola Mobility,
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 SATA USB

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
.

MOTODEV App Summit
Aplicación Webtop Página 28
Página

Vista del móvil HTML, js
© 2011 Motorola Mobility, Inc. Android Aplicaciones
Versión 1.0

web

Página

USB de almacenamiento masivo

© 2011 Motorola Mobility, Inc. Versión 1.0

Página

Navegador móvil vs. navegador de desktop

© 2011 Motorola Mobility, Inc. Versión 1.0

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

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
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/oﬃcehours/???


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.


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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a Cómo aprovechar Webtop Cómo HTML5 mejora la experiencia del usuario (20)

Más de Motorola Mobility - MOTODEV

Más de Motorola Mobility - MOTODEV (20)

Último

Último (20)

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