Este documento describe diferentes tipos de aplicaciones móviles (apps), incluyendo apps nativas, apps web, y apps híbridas. Explica que las apps nativas se desarrollan para sistemas operativos móviles específicos utilizando las herramientas de desarrollo provistas, mientras que las apps web se ejecutan en un navegador y las apps híbridas combinan características de apps nativas y web. También proporciona información sobre nuevas etiquetas y atributos en HTML5 para mejorar el desarrol

1. Diseño de APPs
con
JQuery Mobile
y
HTML5

2. ¿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.

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

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

5. APPs nativas
Su 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

6. APPs web
Aplicaciones 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.

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

8. APPs Web
Existe dos visiones de diseño de apps web:
* Responsivo.
* Optimización del sitio.

9. APPs híbridas
Combinan 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.

10. APPs híbridas
Se ejecutan localmente en el dispositivo,. Tiene alta integración con los servicios
basados en web y a la vez con el sistema de
archivos del dispositivo.
Tienen un proceso de instalación en el dispositivo,.

11. Lo que hay que saber de HTML5
Elementos semántico-estructurales
Prá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/

12. 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

13. Lo que hay que saber de HTML5
Para la versión 5 de HTML se decidió eliminar
las siguientes etiquetas:
» <acronym> » <font>
» <applet> » <frame>
» <basefont> » <frameset>
» <big> » <noframes>
» <center> » <strike>
» <dir> » <tt>
A la vez se han agregado nuevas etiquetas, si bien estas aún no son soportadas por todos los navegadores,

14. Lo que hay que saber de HTML5
Etiquetas nuevas
Elementos semántico/estructurales Media
» <article> » <hgroup> » <audio>
» <aside> » <mark> » <video>
» <source> Novedad
» <bdi> » <meter>
» <big> » <nav> » <embed> » <canvas>
» <command> » <progress> » <track>
» < details> » <ruby>
» <summary> » <rt>
» <figure> » <rp> Formularios
» <figcaption> » <section> » <datalist>
» <footer> » <time> » <keygen>
» <header> » <wbr> » <output>

15. 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"/>

16. 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

17. Lo que hay que saber de HTML5
Simplificando las diferencias estructurales.

18. Lo que hay que saber de HTML5
Elementos semántico-estructurales
Prá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.

19. Lo que hay que saber de HTML5
Como usar la etiqueta video.
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.
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/).

20. Lo que hay que saber de HTML5
Elementos semántico-estructurales
Prá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

21. 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.

22. Lo que hay que saber de HTML5
Elementos semántico-estructurales
Prá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

23. Lo que hay que saber de HTML5
Atributos de datos personalizables
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.