mini curse
TRANSCRIPT
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