Descargado 33 veces
![Geolocalización
Permite determinar las coordenadas de
ubicación de un navegante.
• Obtenemos un objeto position
• Método
geolocation.getCurrentPosition(ok,[erro
r],[options])
• Objeto coors ofrece la latitud y la
longitud.](https://image.slidesharecdn.com/introduccinahtml5-120624183544-phpapp02/75/Introduccion-a-html5-12-2048.jpg)
Subido porJulito Avellaneda
Introducción a html5
HTML5 es la última versión de HTML que introduce nuevas características como elementos semánticos, formularios mejorados, almacenamiento web, geolocalización, gráficos y multimedia mediante el canvas, y aplicaciones web sin plugins. HTML5 define nuevos estándares para el contenido, comportamiento, presentación, dispositivos móviles y rendimiento de las páginas web.
Introducción a html5
- 1. Julio Cesar Avellaneda MicrosoftMVP ASP.NET CoreGroup BDotNet http://julitogtu.wordpress.com @julitogtu
- 2.
- 3. Qué es HTML5? •Ultima versión de HTML • Agrupa diversas características • Estándares para el diseño Web • Estándares para el desarrollo Web • Nueva forma para ver la Web • HTML5 = HTML + JavaScript + CSS3
- 4. Revolución de laWeb • HTML -> Contenido • JavaScript -> Comportamiento • CSS -> Presentación • No plugins • Animaciones • Bases de datos • Dispositivos móviles • En resumen una nueva Web….
- 5. Y que hayde nuevo? Multime Aplicaciones dia offline Semánti Acceso a ca dispositivos Gráficas, Conectividad efectos CSS3 Rendimiento, integración
- 6. Algunos cambios inicia •<! DOCTYPE html> • <html lang=“es”> • <meta charset=“ytf-8”> • <link rel=stylesheet href=estilos.css> • <script src=jquery.js></script>
- 7. Elementos Semántico Permiten estructurar de una manera lógica una página Web, cambio de divs por los nuevos elementos semánticos. header hgroup nav section article footer aside
- 8. Elementos Semántico header nav section article aside article footer
- 9. Api para formularios Nuevostipos de input para cumplir con los campos estándar de un formulario. search number range color tel url email date month week time datetime
- 10. Api para formularios Nuevosatributos para evitar el uso de código JavaScript. • placeholder • required • autofocus • Autocomplete • formnovalidate
- 11. Elementos Multimedi Dos nuevoselementos, audio y video. No Silverlight, no flash, no plugins. • Características similares • Múltiples formatos • Controles básicos • Manipulación mediante JavaScript • No full screen.
- 12. Geolocalización Permite determinar lascoordenadas de ubicación de un navegante. • Obtenemos un objeto position • Método geolocation.getCurrentPosition(ok,[erro r],[options]) • Objeto coors ofrece la latitud y la longitud.
- 13. Storage Lo que setenía antes eran las cookies: • Inseguras • Poco espacio • Texto plano • Viajan al servidor en cada petición • En resumen no eran lo mejor…
- 14. Storage HTML5 ofrece dosnuevos tipos de storage: • localStorage • sessionStorage Características: • Espacio recomendado 5 Mb • Almacenamiento key/value • Solo en el cliente
- 15. Storage Para almacenar: • window.sessionStorage/localStorage.setItem(key, value); Para recuperar: • window.sessionStorage/localStorage.getItem(key); Para eliminar: • window.sessionStorage/localStorage.removeItem(k ey);
- 16. Canvas El Canvas es uno de los elementos más revolucionarios incluidos en HTML5. • Superficie de dibujo • Similar a un lienzo • Líneas, curvas, figuras geométricas • Texto • Imágenes
- 17. Canvas • Animaciones • Audioy Video • Juegos • Charts • Librerías especificas para su trabajo como processing.js, raphael.js, KinecticJS entre otras.
- 18. Canvas Para trabajar conel canvas: • Obtener una referencia al elemento. • Definir el contexto (2d o 3d). • Por el momento solo se soporta 2d. • Soportado en todos los browsers actuales. • El límite la imaginación….
- 19. Y ahora queesperas para usar HTML5 ??