Introducción. HTML5 para móviles

Texto
Tema 6
Desarrollo de
aplicaciones web
para móviles
Texto
Parte I: Introducción. HTML
y CSS para webs móviles
1
1
¿Qué tienen de
especial los
dispositivos
móviles...
...con respecto a los
equipos “de escritorio”?
Desarrollo de
aplicaciones web para
móviles
2
Dispositivos móviles
Mercado muy heterogéneo
Móviles “convencionales” (gama baja-media-alta)
Smartphones: iPhone, Android, algunos Nokia
Otros dispositivos: tablets, ebooks
Nos vamos a centrar en smartphones, por
cuestiones de tiempo y espacio
Sobre todo Android e iOS, aunque también
haya Windows Phone
Esto no quiere decir que los demás dispositivos
no sean importantes en el mundo real
HTML y CSS para webs móviles
3
La pantalla
Lo más inmediato, la pantalla
La resolución varía de 240x320 (gama baja)
a 1080x1920 (Samsung Galaxy S4), siendo
la media de 320x480 (HVGA o Half-VGA) o
más
Además hay que tener en cuenta los DPI
Aunque la resolución sea alta no podemos
colocar demasiada información ya que la
pantalla es físicamente muy pequeña
Y más alta que ancha, al contrario que en
el escritorio.
Es incómodo hacer scroll horizontal, por lo que
la información tiende a colocarse en una
columna
HTML y CSS para webs móviles
4
La pantalla
http://developer.android.com/about/dashboards/index.html
HTML y CSS para webs móviles
5
Dispositivos de entrada
Introducir datos en un móvil es
incómodo y tedioso. La aplicación debe reducir esta necesidad al
mínimo imprescindible
Hay que tener en cuenta las
características del dispositivo de entrada
Los controles táctiles tienen que ser grandes,
para poder ser pulsados con el dedo. No así si
se usa un stylus
HTML y CSS para webs móviles
6
Otros elementos
Capacidad de procesamiento
Ciertos APIs no tienen todavía suficiente
rendimiento para los móviles (WebGL,
canvas,...)
Batería
Javascript gasta batería, motivo por el que la
mayoría de navegadores móviles paran su
ejecución en las pestañas en segundo plano
También ciertos APIs gastan mucha batería
por el hardware que usan “por debajo” (ej.
geolocalización)
HTML y CSS para webs móviles
7
Recomendaciones para la interfaz de usuario
Apple Human Interface Guidelines for Web
Applications
Android Guidelines for Web Apps
http://developer.android.com/guide/
webapps/index.html
Recomendaciones del W3C para la web
móvil
Versión resumida en castellano en http://
www.w3c.es/Divulgacion/Tarjetas/MWBP/
Windows Phone design library (no es para
apps. web, pero da una idea del estilo)
http://dev.windowsphone.com/en-us/design/
library
HTML y CSS para webs móviles
8
2
Plataformas de
programación de
aplicaciones para
móviles
Aplicaciones nativas vs.
web vs. “híbridas”
Desarrollo de
aplicaciones web móviles
9
Programar aplicaciones para móviles
HTML y CSS para webs móviles
Opción 1: Aplicaciones “nativas”
Aplicaciones del SO del móvil. Por ejemplo
Android: desarrollo en Java, con APIs propios del sistema
iOS: Objective-C, librerías Cocoa Touch
Windows Phone: .NET (p.ej. C#/XAML)
Runtimes: capas por encima del SO, permiten una mayor portabilidad
JavaME: el runtime más difundido del mundo...pero con futuro nulo. Carente de
soporte táctil estándar y de actualizaciones
Opción 2: Aplicaciones web
Sitios web convencionales usando Javascript+HTML+CSS.
Hay una serie de “trucos” para que parezcan apps. nativas
Pueden funcionar offline (gracias a la cache de HTML5)
Pueden ir a pantalla completa, sin la barra de direcciones
Pueden tener un icono en el escritorio
10
Ventajas aplicaciones web
HTML y CSS para webs móviles
No es necesario aprender APIs propios del dispositivo, ni
nuevos lenguajes de programación
La aplicación es fácil de distribuir y actualizar a la nueva
versión
La instalación solo requiere una visita al sitio web. La actualización es
automática usando cache de HTML5
No hay barreras artificiales a la distribución (ej. App Store de Apple)
Es portable entre todos los dispositivos independiendemente
del SO
11
Problemas aplicaciones web
HTML y CSS para webs móviles
Por cuestiones de rendimiento, no son apropiadas para
algunos tipos de aplicaciones (juegos con gráficos intensivos,
multimedia, …)
Es difícil darle a la interfaz el “look” propio de la plataforma
Aunque hay frameworks que solventan en parte el problema
No son accesibles todas las capacidades del dispositivo
Algunos APIs todavía no están estandarizados (radio FM), o bien no
están implementados en móviles (por ejemplo el Media Capture API que
vimos en escritorio)
Es más complicado obtener un provecho económico
Las aplicaciones web no se pueden distribuir directamente en la App
Store o en el Android Market, por ejemplo.
12
Aplicaciones “híbridas”
HTML y CSS para webs móviles
Últimamente han surgido herramientas que permiten
desarrollar aplicaciones web con ciertas ventajas de las
nativas
Por ejemplo acceso a ciertos APIs con Javascript: sonido, vibración,
acelerómetro, …
El “truco” consiste en que se genera una aplicación nativa pero que es
una ventana del navegador
Ejemplo: http://www.phonegap.com
13
Frameworks para móviles
HTML y CSS para webs móviles
Estilos CSS + librerías Javascript que implementan:
Widgets adaptados a móviles (algunos incluso imitando el “look&feel”
de alguna plataforma)
Navegación entre “pantallas”
Eventos de tipo táctil (swipe, tap, ...)
jQuery Mobile
jquerymobile.com
jQT
jqtjs.com
lungojs
lungo.tapquo.com
14
Otras ayudas
HTML y CSS para webs móviles
Librerías Javascript adaptadas a móviles
zepto.js es una librería con un API compatible con el de jQuery pero
mucho más ligera
Plantillas HTML+CSS
mobile boilerplate incluye estilos por defecto (CSS reset), scripts de
ayuda (eliminar barra de navegación, ...), librerías útiles (zepto.js) y un
esqueleto HTML5 básico adaptado a móviles
15
El “caso Facebook”
HTML y CSS para webs móviles
Facebook “apostó” por aplicaciones móviles basadas en
HTML5...
Pero el rendimiento no fue el esperado...y tuvieron que pasarse a
apps nativas (http://es.engadget.com/2012/09/11/facebook-aplicacionhtml5-error/)
No obstante, los desarrolladores de Sencha Touch (un framework
javascript) consiguieron implementar una versión HTML5 mucho más
eficiente que la original (http://www.sencha.com/blog/the-making-offastbook-an-html5-love-story)
16
3
Navegadores en
dispositivos
móviles
Desarrollo de
aplicaciones web móviles
17
Navegadores “del sistema”
iOS: Safari on iOS (antes Mobile Safari)
Durante mucho tiempo fue el navegador móvil
más avanzado en términos de compatibilidad
con HTML5
Introdujo muchas características no
estándares luego copiadas por otros
navegadores móviles
Android
“navegador por defecto”
Chrome para Android, muy similar al de
escritorio, mucho mejor soporte de HTML5
HTML y CSS para webs móviles
18
Otros navegadores
HTML y CSS para webs móviles
Explorer (IE10 en WP8, IE9 en WP7.5) Opera Mobile, Firefox,
Dolphin, Amazon Silk (Kindle Fire)...
Recursos para comprobar la compatibilidad
caniuse.com
mobilehtml5.org
Tests de compatibilidad
RingMark: www.rng.io, énfasis en móviles
acid3.acidtests.org
html5test.com
19
4
HTML5 para
móviles
Desarrollo de
aplicaciones web móviles
20
Estándares de marcado en móviles
HTML y CSS para webs móviles
Existen diferentes variantes de HTML y CSS apropiadas para móviles
XHTML Basic (subconjunto de XHTML) y CSS MP (del W3C)
XHTML MP (Mobile Profile, ampliación de XHTML Basic) y WAP CSS (de la
OMA-Open Mobile Alliance)
Nosotros usaremos aquí HTML5
https://en.wikipedia.org/wiki/XHTML_Mobile_Profile
21
El viewport
HTML y CSS para webs móviles
22
Aunque la resolución real de la pantalla sea
baja, el dispositivo va a “simular” que tiene
una distinta
Por ejemplo el iPhone original tiene 320px de
ancho, pero “simula” que tiene 980px
Esto se hace para que las webs no diseñadas
para móviles aparezcan como en el escritorio (y
no “cortadas” en vertical)
Terminología:
Initial viewport o device viewport: la resolución
real
Current viewport o layout viewport: el “imaginario”
o “simulado” (pero en cierto modo el real desde el
punto de vista p.ej. de medidas en CSS)
http://developer.apple.com/library/ios/#documentation/
AppleApplications/Reference/SafariWebContent/
UsingtheViewport/UsingtheViewport.html
Controlar el viewport
HTML y CSS para webs móviles
Etiqueta <meta> en la cabecera
<meta name=”viewport” content=”{propiedades}”>
!
!
!
<!-- ‘user-scalable=no’ significa que no se puede hacer zoom. Esto
es raro en la web, pero habitual en una app nativa -->
<meta name="viewport" content="width=320,user-scalable=no">
!
<!-- teóricamente ‘device-width’ es la resolución horizontal del dispositivo -->
<meta name=”viewport” content=”width=device-width”>
!
En realidad, muchos dispositivos con resolución mayor de 320px
aún así dan 320 como device-width
Esto se hace para simplificar la vida del desarrollador, y que solo tenga
en cuenta un tamaño de pantalla
23
Formularios en HTML5
HTML y CSS para webs móviles
Recordar que en HTML5 se pueden usar
type="email", type="number", type="url",
type="tel", type=”range”, type=”date”,.... Se mostrará un teclado virtual adaptado
En campos tipo fecha, se usará el selector de
fechas “nativo”
Teclado virtual para type=”url” en iOS
Atributo placeholder para poner un texto
de ejemplo dentro del campo
Útil aquí por ahorrar espacio
<input type="text" name="login" placeholder="usuario..."> <br>
<input type="text" name="password" placeholder="contraseña...">
Selector de fechas en iOS
24
Validación HTML5
HTML y CSS para webs móviles
Aunque las versiones modernas de Android e iOS
admiten atributos como required, min, max,... en general
estos no impedirán automáticamente el envío del
formulario
!<form
action="prueba.php">
<!-- aunque no rellenemos este campo, se enviará el formulario igualmente -->
! <input type="text" id="nombre" required><br>
<input type="submit">
!</form>
No obstante, hay métodos javascript que nos facilitan la validación
(HTML5 constraint validation API)
<form action="prueba.php" onsubmit=”return this.checkValidity()”>
...
</form>
if (document.getElementById("nombre").validity.valueMissing)
alert("Valor requerido!!")
25
Subir archivos
HTML y CSS para webs móviles
Como sabemos, para subir un archivo al servidor hay que usar
un <input type=”file”>
Hasta iOS 6/Android 2.2 este tipo de campo no funcionaba
En iOS sigue siendo imposible subir algo que no sea audio/video
Se puede especificar el tipo MIME aceptable con accept
!
!
<input type="file" accept="application/pdf">
<input type="file" accept="image/jpeg">
<!-- cualquier tipo de imagen -->
<input type="file" accept="image/*">
<!-- cualquier tipo de video -->
<input type="file" accept="video/*">
HTML Media Capture: el atributo capture especifica que
queremos tomar los datos de cámara/micrófono
!
<input type="file" accept="image/*" capture>
<input type="file" accept="video/*" capture>
<input type="file" accept="audio/*" capture>
!
iOS ignora este atributo pero “a cambio” cuando se usa accept da la
opción de usar cámara/micro además de subir un archivo
26
Formularios: usabilidad
HTML y CSS para webs móviles
Usar <label>
Evitamos que p.ej. haya que tocar directamente sobre un
checkbox para seleccionarlo
!
!
<input type="checkbox" name="ok" id="aceptar" >
<br>
<label for="aceptar"> Acepto las condiciones de
uso y términos del servicio </label>
!
Se recomienda poner el <label> encima/debajo del campo (para
mantener diseño en 1 columna)
En campos de texto, en lugar de <label>, usar atributo
placeholder
¿Es necesario el type=”password”?
27
“Trucos” para que la app parezca algo más nativa
HTML y CSS para webs móviles
Icono en el escritorio
!
!
<!-- solo iOS, el sistema le añade ciertos efectos visuales (brillo, ...)-->
<link rel="apple-touch-icon" href="icono.png" />
<!-- iOS y Android -->
<link rel="apple-touch-icon-precomposed" href="icono.png" />
!
Problema: el usuario debe añadir manualmente el “favorito” (p.ej
en Android: tecla menú > Más > Añadir acceso directo)
Eliminar barra de URL
Truco: hacer scroll a y=1 pixel para forzar que la barra se oculte
(window.scrollTo(0,1) en javascript al cargar la página)
En iOS hay etiquetas meta para esto y para controlar el aspecto
de la barra de status (donde se muestra hora, batería, señal, ...)
28
5
CSS para
móviles
Desarrollo de
aplicaciones web móviles
29
CSS media queries
HTML y CSS para webs móviles
Parte del estándar CSS3, nos permite aplicar un CSS si
se cumplen ciertas condiciones
<!-- vincular con una u otra hoja de estilo dependiendo de la resolución horizontal -->
<link type="text/css" rel="stylesheet" media="screen and (max-device-width:480px)"
href="smartphone.css" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:481px)"
href="desktop.css" />
!
<!-- también se puede poner en el CSS “empotrado” en el HTML -->
<style>
@media screen and (max-device-width:480px) {
body {
background-color: red;
}
}
</style>
30
Sintaxis de media queries
HTML y CSS para webs móviles
Expresiones:
min- (>=). p.ej. min-device-width:640px
max- (<=). p.ej. max-device-width:640px
: (==). p.ej. device-width:640px
Operadores: not, and, or, only (only screen serían
dispositivos que solo soportan media=”screen”, típicamente
móviles)
Algunas características comprobables
device-width, device-height: medidas del dispositivo
width, height: medidas del viewport
orientation (puede ser landscape o portrait)
resolution (típicamente en dpi)
aspect-ratio, device-aspect-ratio
31
“Retina” Web
HTML y CSS para webs móviles
“Tipos” de pixels:
Device pixels: los del hardware
CSS pixels: los que se usan en las reglas CSS
Como hemos visto, un dispositivo puede reportar que
tiene 320 px de ancho (CSS pixels) cuando en realidad
podría tener 640
window.devicePixelRatio: ¿Cuántos píxeles reales
es 1 pixel CSS?
Podemos usar esta información para servir imágenes de
“alta resolución” vs. “resolución estándar”
32
“Retina” Web
HTML y CSS para webs móviles
Usamos una imagen u otra dependiendo del “device pixel
ratio”, pero ambas escaladas al mismo tamaño en píxeles
CSS
http://www.smashingmagazine.com/2012/08/20/towards-retinaweb/
.icon {
background-image: url(example.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}
!
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icon {
background-image: url([email protected]);
}
}
33
Referencias
Los “fabricantes” suelen tener sitios web para
desarrolladores con documentación, ejemplos,
simuladores, etc.
En general developer.xxx.com, por ejemplo http://
developer.nokia.com , http://developer.samsung.com http://
developer.android.com
http://proquestcombo.safaribooksonline.com/ (solo desde la UA)
!
Programming the mobile web, 2nd ed, O’Reilly 2013
!
!
Build Mobile Websites and Apps for Smart Devices, Ed. SitePoint, 2011
!
Building iPhone Apps with HTML, CSS and Javascript y Building
Android Apps with HTML, CSS and Javascript
HTML y CSS para webs móviles
34