HTML5 + CSS3 + Javascript Como tomar ventaja de las mas reciente innovaciones de HTML y CSS3 en el desarrollo de websites

Julian Giraldo - Web developer notempo1320 [email protected] http://www.ntweb.co/ @notempo1320 @c6j6g7g7

Breve Introducción ●

Crecimiento del Uso de los dispositivos Móviles (Celulares, Tablets, Televisores smart tv)

●

Masificación del uso de Internet

●

Canal de comunicación con clientes.

Panorama movil ●

● ●

●

●

Actualmente hay 6 Mil Millones de móviles en todo el mundo. Esto equivale al 86% de la población mundial. Hay más de 1,2 Mil Millones de personas que acceden a la web desde sus móviles. Más de 300.000 aplicaciones han sido desarrolladas en los últimos 3 años Google gana 2,5 millones en los ingresos por publicidad móvil anualmente

Panorama movil Que tienen en común los dispositivos móviles y tabletas?

Habilidades únicas de los móviles ● móviles son personales ● Las personas siempre portan uno ● Traen mecanismo de pago integrado ● Punto de inspiración creativa ● Acceso a la realidad aumentada.

Qué podemos hacer con el HTML5 ● Web bien construida ● Manejo de canvas ● Geo Localización ● Almacenamiento Local ● Input Types

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Canvas

Canvas

Canvas

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Storage ● Antes cookies ● Mayor almacenamiento ● Seguridad en datos ● offline

Local storage ● Almacenamiento en par (Llave / Valor) ● Utilizar getItem() y el setItem() ● localStorage["llave"] ● removeItem("llave"); ● clear()

Local storage

Web SQL DataBases ● openDatabase: Crea Objeto Base de datos. ● transaction: Atomicidad. ● executeSql: Ejecuta sentencias SQL. (SELECT , UPDATE, INSERT, DELETE)

Web SQL DataBases

Web SQL DataBases

Web SQL DataBases

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Video ● Atributo controls ● No soporta Video ● Etiqueta , MP4, WebM, Ogg. ● Etiqueta Subtitulos.

Video

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Media Queries ● Ancho y altura del browser ● Ancho y altura del dispositivo ● Orientación del dispositivo ● Resolución de la pantalla.

Orientacion Pantalla

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Input Type (forms) Nuevos Tipos: ● ● ● ● ● ●

email url Manejos de fechas Selectores de color Deslizadores para números Rangos

PLACEHOLDER TEXT

AUTOFOCUS

email

URL

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Geolocation ● Ubicación del dispositivo. ● Usuario decide si compartir su ubicación. ● getCurrentPosition() retorna objeto (fecha captura y coordenadas). ● watchPosition() localización continua.

Geolocation

Ejemplos Canvas Web Storage Video Media Queries Input Types Geolocalizacion Recomendaciones

Recomendaciones ● Simplicidad: No complicar al usuario con acciones complejas.

● Responsive Design: Interfaces multiplataforma. ● Producto Mínimo Viable. ● Contenido: Debe ser claro. ● Velocidad de ejecución: No imagenes grandes, JS extensos, ni mucho CSS3.

Referencias Elementos soportados por browser http://mobilehtml5.org/ Canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ Geolocalizacion http://diveintohtml5.info/geolocation.html Input Type http://diveintohtml5.info/forms.html

Referencias Media Queries http://www.w3.org/TR/css3-mediaqueries/ http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Web Offline http://diveintohtml5.info/storage.html

Video http://www.w3schools.com/html/html5_video.asp

Ejemplos gitHub https://github.com/c6j6g7g7/html5Css3JS