Julio Cesar AvellanedaMicrosoft MVP ASP.NETCoreGroup BDotNethttp://julitogtu.wordpress.com@julitogtu
Introducción a HTML
Qué es HTML5?• Ultima versión de HTML• Agrupa diversas características• Estándares para el diseño Web• Estándares para el ...
Revolución de la Web• HTML -> Contenido• JavaScript -> Comportamiento• CSS -> Presentación• No plugins• Animaciones• Bases...
Y que hay de nuevo?Multime     Aplicacionesdia         offlineSemánti     Acceso aca          dispositivosGráficas,   Cone...
Algunos cambios inicia• <! DOCTYPE html>• <html lang=“es”>• <meta charset=“ytf-8”>• <link rel=stylesheet href=estilos.css>...
Elementos SemánticoPermiten   estructurar      de   una     maneralógica una página Web, cambio de divs porlos nuevos elem...
Elementos Semántico              header               nav   section   article             aside    article              fo...
Api para formulariosNuevos tipos de input para cumplir con loscampos estándar de un formulario.     search      number    ...
Api para formulariosNuevos atributos para evitar el uso decódigo JavaScript.• placeholder• required• autofocus• Autocomple...
Elementos MultimediDos nuevos elementos, audio y video. NoSilverlight, no flash, no plugins.• Características similares• M...
GeolocalizaciónPermite determinar las coordenadas deubicación de un navegante.• Obtenemos un objeto position• Método  geol...
StorageLo que se tenía antes eran las cookies:• Inseguras• Poco espacio• Texto plano• Viajan al servidor en cada petición•...
StorageHTML5 ofrece dos nuevos tipos destorage:• localStorage• sessionStorage Características:• Espacio recomendado 5 Mb• ...
StoragePara almacenar:• window.sessionStorage/localStorage.setItem(key,  value);Para recuperar:• window.sessionStorage/loc...
CanvasEl   Canvas   es   uno   de   los   elementos   másrevolucionarios incluidos en HTML5.• Superficie de dibujo• Simila...
Canvas• Animaciones• Audio y Video• Juegos• Charts• Librerías especificas para su trabajo como  processing.js,   raphael.j...
CanvasPara trabajar con el canvas:• Obtener una referencia al elemento.• Definir el contexto (2d o 3d).• Por el momento so...
Y ahora que esperaspara usar HTML5 ??
Upcoming SlideShare
Loading in …5
×

Introducción a html5

3,739 views

Published on

Published in: Sports
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,739
On SlideShare
0
From Embeds
0
Number of Embeds
1,908
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a html5

  1. 1. Julio Cesar AvellanedaMicrosoft MVP ASP.NETCoreGroup BDotNethttp://julitogtu.wordpress.com@julitogtu
  2. 2. Introducción a HTML
  3. 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. 4. Revolución de la Web• HTML -> Contenido• JavaScript -> Comportamiento• CSS -> Presentación• No plugins• Animaciones• Bases de datos• Dispositivos móviles• En resumen una nueva Web….
  5. 5. Y que hay de nuevo?Multime Aplicacionesdia offlineSemánti Acceso aca dispositivosGráficas, ConectividadefectosCSS3 Rendimiento, integración
  6. 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. 7. Elementos SemánticoPermiten estructurar de una maneralógica una página Web, cambio de divs porlos nuevos elementos semánticos. header hgroup nav section article footer aside
  8. 8. Elementos Semántico header nav section article aside article footer
  9. 9. Api para formulariosNuevos tipos de input para cumplir con loscampos estándar de un formulario. search number range color tel url email date month week time datetime
  10. 10. Api para formulariosNuevos atributos para evitar el uso decódigo JavaScript.• placeholder• required• autofocus• Autocomplete• formnovalidate
  11. 11. Elementos MultimediDos nuevos elementos, audio y video. NoSilverlight, no flash, no plugins.• Características similares• Múltiples formatos• Controles básicos• Manipulación mediante JavaScript• No full screen.
  12. 12. GeolocalizaciónPermite determinar las coordenadas deubicació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. 13. StorageLo que se tenía antes eran las cookies:• Inseguras• Poco espacio• Texto plano• Viajan al servidor en cada petición• En resumen no eran lo mejor…
  14. 14. StorageHTML5 ofrece dos nuevos tipos destorage:• localStorage• sessionStorage Características:• Espacio recomendado 5 Mb• Almacenamiento key/value• Solo en el cliente
  15. 15. StoragePara almacenar:• window.sessionStorage/localStorage.setItem(key, value);Para recuperar:• window.sessionStorage/localStorage.getItem(key);Para eliminar:• window.sessionStorage/localStorage.removeItem(k ey);
  16. 16. CanvasEl Canvas es uno de los elementos másrevolucionarios incluidos en HTML5.• Superficie de dibujo• Similar a un lienzo• Líneas, curvas, figuras geométricas• Texto• Imágenes
  17. 17. Canvas• Animaciones• Audio y Video• Juegos• Charts• Librerías especificas para su trabajo como processing.js, raphael.js, KinecticJS entre otras.
  18. 18. CanvasPara trabajar con el 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. 19. Y ahora que esperaspara usar HTML5 ??

×