Html5+ccs3+js

3,303 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,303
On SlideShare
0
From Embeds
0
Number of Embeds
665
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5+ccs3+js

  1. 1. HTML5 + CSS3 + JavascriptComo tomar ventaja de las mas reciente innovacionesde HTML y CSS3 en el desarrollo de websitesJulian Giraldo - Web developer notempo1320julian@notempo1320.cohttp://www.ntweb.co/@notempo1320 @c6j6g7g7
  2. 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. 3. Panorama movil● Actualmente hay 6 Mil Millones de móviles en todo elmundo.● Esto equivale al 86% de la población mundial.● Hay más de 1,2 Mil Millones de personas que accedena la web desde sus móviles.● Más de 300.000 aplicaciones han sido desarrolladas enlos últimos 3 años● Google gana 2,5 millones en los ingresos porpublicidad móvil anualmente
  4. 4. Panorama movilQue tienen en común los dispositivos móviles y tabletas?
  5. 5. Habilidades únicas de losmó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. 6. Qué podemos hacer con elHTML5● Web bien construida● Manejo de canvas● Geo Localización● Almacenamiento Local● Input Types
  7. 7. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  8. 8. Canvas
  9. 9. Canvas
  10. 10. Canvas
  11. 11. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  12. 12. Storage● Antes cookies● Mayor almacenamiento● Seguridad en datos● offline
  13. 13. ● Almacenamiento en par (Llave / Valor)● Utilizar getItem() y el setItem()● localStorage["llave"]● removeItem("llave");● clear()Local storage
  14. 14. Local storage
  15. 15. ● openDatabase: Crea Objeto Base de datos.● transaction: Atomicidad.● executeSql: Ejecuta sentencias SQL.(SELECT , UPDATE, INSERT, DELETE)Web SQL DataBases
  16. 16. Web SQL DataBases
  17. 17. Web SQL DataBases
  18. 18. Web SQL DataBases
  19. 19. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  20. 20. Video● Atributo controls● <video> No soporta Video </video>● Etiqueta <source>, MP4, WebM, Ogg.● Etiqueta <track> Subtitulos.
  21. 21. Video
  22. 22. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  23. 23. Media Queries● Ancho y altura del browser● Ancho y altura del dispositivo● Orientación del dispositivo● Resolución de la pantalla.
  24. 24. Orientacion Pantalla
  25. 25. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  26. 26. Input Type (forms)Nuevos Tipos:● email● url● Manejos de fechas● Selectores de color● Deslizadores para números● Rangos
  27. 27. PLACEHOLDER TEXT
  28. 28. AUTOFOCUS
  29. 29. email
  30. 30. URL
  31. 31. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  32. 32. Geolocation● Ubicación del dispositivo.● Usuario decide si compartir su ubicación.● getCurrentPosition() retorna objeto (fechacaptura y coordenadas).● watchPosition() localización continua.
  33. 33. Geolocation
  34. 34. EjemplosCanvasWeb StorageVideoMedia QueriesInput TypesGeolocalizacionRecomendaciones
  35. 35. Recomendaciones● Simplicidad: No complicar al usuario con accionescomplejas.● Responsive Design: Interfaces multiplataforma.● Producto Mínimo Viable.● Contenido: Debe ser claro.● Velocidad de ejecución: No imagenes grandes, JSextensos, ni mucho CSS3.
  36. 36. ReferenciasElementos soportados por browserhttp://mobilehtml5.org/Canvashttp://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/Geolocalizacionhttp://diveintohtml5.info/geolocation.htmlInput Typehttp://diveintohtml5.info/forms.html
  37. 37. ReferenciasMedia Querieshttp://www.w3.org/TR/css3-mediaqueries/http://css-tricks.com/snippets/css/media-queries-for-standard-devices/Web Offlinehttp://diveintohtml5.info/storage.htmlhttp://www.html5rocks.com/es/tutorials/indexeddb/todo/ (IndexedDB)Videohttp://www.w3schools.com/html/html5_video.aspTouchhttp://www.html5rocks.com/en/mobile/touch/
  38. 38. EjemplosgitHubhttps://github.com/c6j6g7g7/html5Css3JS

×