Este documento describe cómo aprovechar las últimas innovaciones de HTML, CSS3 y JavaScript para el desarrollo de sitios web, incluyendo canvas, almacenamiento web, video, consultas de medios, tipos de entrada, y geolocalización. También recomienda diseños responsivos, contenido claro y velocidad de ejecución.

1. 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
julian@notempo1320.co
http://www.ntweb.co/
@notempo1320 @c6j6g7g7

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

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

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

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

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

7. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

8. Canvas

9. Canvas

10. Canvas

11. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

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

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

14. Local storage

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

16. Web SQL DataBases

17. Web SQL DataBases

18. Web SQL DataBases

19. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

20. Video
● Atributo controls
● <video> No soporta Video </video>
● Etiqueta <source>, MP4, WebM, Ogg.
● Etiqueta <track> Subtitulos.

21. Video

22. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

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

24. Orientacion Pantalla

25. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

26. Input Type (forms)
Nuevos Tipos:
● email
● url
● Manejos de fechas
● Selectores de color
● Deslizadores para números
● Rangos

27. PLACEHOLDER TEXT

28. AUTOFOCUS

29. email

30. URL

31. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

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

33. Geolocation

34. Ejemplos
Canvas
Web Storage
Video
Media Queries
Input Types
Geolocalizacion
Recomendaciones

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

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

37. 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
http://www.html5rocks.com/es/tutorials/indexeddb/todo/ (IndexedDB)
Video
http://www.w3schools.com/html/html5_video.asp
Touch
http://www.html5rocks.com/en/mobile/touch/

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