Diseño de APPs con

JQuery Mobile y

HTML5

¿Qué es una APP?Originalmente el acrónimo App hacía referencia cualquier programa de computadora orientado a una tarea específica:

•Word

• Power Point

• Photo Shop

Actualmente el término hace referencia a las aplicaciones (applications) especialmente

diseñadas para dispositivos móviles.

APPs nativas

Una APP nativa es una aplicación especialmente diseñada, programada y compilada para un mobile SO específico.

APPs nativas

Se desarrolla con la suite de herramientas (SDK) distribuida por la plataforma que da soporte al mobile SO.

APPs nativasSu mayor ventaja es que cuentan con herramientas especiales (interfaces) que permiten una interacción rápida y fácil con el hardware del dispositivo: cámara, acelerómetro, bocinas, micrófono y una variada gama de sensores

APPs webAplicaciones disponibles a través de los navegadores web.

Están limitadas al ámbito del navegador y por tanto no pueden acceder a los recursos de hardware del dispositivo.

APPs Web

Se utiliza los recursos de desarrollo web para su programación : html, css y javascript.

APPs WebExiste dos visiones de diseño de apps web:

* Responsivo.

* Optimización del sitio.

APPs híbridasCombinan aplicaciones desarrolladas con tecnología web que utilizan un framework especial que lles permite hacer uso de los recursos de hardware del dispositivo,.

Se utilizan suites de desarrollo especiales que generan el entorno donde se embebe la aplicación web.

APPs híbridasSe ejecutan localmente en el dispositivo,.

Tienen un proceso de instalación en el dispositivo,.

Tiene alta integración con los servicios basados en web y a la vez con el sistema de archivos del dispositivo.

Lo que hay que saber de HTML5

Elementos semántico-estructuralesPráctica: Probando apps y

simuladores > Buscar algún simulador web de dispositivos móviles

> Instalar el emulador de dispositivos móviles de Opera.

• http://www.iocreed.com/download-opera-mobile-emulator-for-pc/

> Probar las siguientes web apps:

• http://itrailers.info/• http://m.mathslice.com/

Lo que hay que saber de HTML5

Es la quinta revisión mayor al Lenguaje de Marcado de HíperTexto o HTML.

NO es un estándar (al menos según la última versión del la documentación emitida por la W3C)

* W3C : The World Wide Werb Consortium

Lo que hay que saber de HTML5

» <acronym>» <applet>» <basefont>» <big>» <center>» <dir>

» <font>» <frame>» <frameset>» <noframes>» <strike>» <tt>A la vez se han agregado nuevas etiquetas, si bien estas aún no

son soportadas por todos los navegadores,

Para la versión 5 de HTML se decidió eliminar las siguientes etiquetas:

Lo que hay que saber de HTML5

Etiquetas nuevas» <article>» <aside>» <bdi>» <big>» <command>» < details>» <summary>» <figure>» <figcaption>»

<footer>» <header>» <hgroup>» <mark>» <meter>» <nav>» <progress>» <ruby>» <rt>» <rp>» <section>» <time>» <wbr>

Elementos semántico/estructurales

Media

» <audio>» <video>» <source>» <embed>» <track>

Formularios» <datalist>» <keygen>» <output>

Novedad» <canvas>

Lo que hay que saber de HTML5

Meta-etiquetas especiales para dispositivos móviles.» <link rel="apple-touch-icon/>

» <meta name="format-detection"/>

» <meta name="HandheldFriendly"/>

Lo que hay que saber de HTML5

» <meta name="viewport"/> Width = - device-width - nnn; número de pixeles, con un rago de 200 a 10000 , default : 980 .

Height = - device-height - nnn ; número de pixeles , con un rago de 223 a 10000.

Minimum-scale = f.ff ; valor entre 0.0 and 10.0, default: 0.25 .

Maximum-scale = f.ff ; valor entre 0.0 and 10.0, default: 1.6.

Initial-scale = f.ff ; valor entre minimum-scale y maximum-scale

User-scalable = -yes (default) - no

Lo que hay que saber de HTML5

Simplificando las diferencias estructurales.

Lo que hay que saber de HTML5

Elementos semántico-estructuralesPráctica: Programación de una página

web básica con html5.> Abrir el tutorial en línea de html5 del sitio w3schools.com

>Crear una página web con la estructura básica en html5.

Utilizar como parámetros en la meta-etiqueta viewport width=device-width, height=device-height , initial-scale =1 y user-scalable=no.

>Elegir 4 nuevas etiquetas para probar dentro de la página hecha.

Lo que hay que saber de HTML5

Como usar la etiqueta video.

Los videos deben estar en formato .mp4 y .ogg al menos, para evitar problemas de compatibilidad con los navegadores, si bien lo recomendado es el uso de los tres formatos comunes: MP4, WebM y Ogg.El servidor que aloje los videos debe estar configurado para permitir su reproducción. Un ejemplo de servidor de videos que está actualmente orientado a las pruebas con esta nueva etiqueta es tinyvid.tv (http://tinyvid.tv/).

Esta etiqueta utiliza funcionalidades proporcionadas por javaScript. La etiqueta permite agregar un mensaje de advertencia en caso de que el usuario no pueda visualizar el video, por falta de soporte o porque javaScript está deshabilitado.

Lo que hay que saber de HTML5

Elementos semántico-estructuralesPráctica: Video en HTML5.

> Crear una página que permita la reproducción de un video en cualquiera de los navegadores más comunes:

• Elegir un video en formato .mp4• Convertir el video en formato .ogg• Colocar una etiqueta que alerte al usuario cuando

el video no se pueda reproducir por que javaScript este deshabilitado.

• Deshabilitar javaScript del navegador usado , comprobar el funcionamiento de la etiqueta.

> Revisar la variante de reproductor en el curso w3school.com

Lo que hay que saber de HTML5

Etiqueta Canvas

Se usa para dibujar gráficos “al vuelo“ en una página web por medio de scripts, en general con javaScript.

Es posible dibujar formas geométricas como rectángulos y círculos o trazos libres, retocar imágenes, colocar texto e incluso hacer animaciones.Es posible dibujar formas geométricas como rectángulos y círculos o trazos libres; modificar el color, la transparencia y hacer efecto gradiente ; retocar imágenes; colocar texto e incluso hacer animaciones.

Lo que hay que saber de HTML5

Elementos semántico-estructuralesPráctica: Introducción a la etiqueta

canvas.> Crear una página con la estructura básica de html5> • Elegir un video en formato .mp4• Convertir el video en formato .ogg• Colocar una etiqueta que alerte al usuario cuando

el video no se pueda reproducir por que javaScript este deshabilitado.

• Deshabilitar javaScript del navegador usado , comprobar el funcionamiento de la etiqueta.

> Revisar la variante de reproductor en el curso w3school.com

Lo que hay que saber de HTML5

Permiten almacenar datos privados personalizados en las páginas o aplicaciones web. Los nuevos atributos de datos consisten en dos partes:* Nombre del atributo. Este se define siempre con el prefijo data- y no

admite mayúsculas. * Valor del atributo. Una cualquier cadena

entre comillas dobles.

Atributos de datos personalizables