SlideShare una empresa de Scribd logo
1 de 42
Introducción a HTML 5
                                Alejandro Lagos




LagosRguez           alejandrolagosr.wordpress.com
HTML 5 hace tan
 fácil <video>
 como <img>
//La API de
 geolocalización
 ofrece a tus
 aplicaciones un
 sistema de
 ubicación
//Localmente: bases de
 datos, almacenamiento
 en caché, el user
 data, y los recursos
 de la aplicación
Web poderosa == Aplicaciones poderosas
                Pero..
   Más poder == Más responsabilidad
//Los web workers
 ayudan a ejecutar
 scripts en segundo
 plano.
•   article        •   header
•   aside          •   mark
•   audio          •   meter
•   canvas         •   nav
•   command        •   nest
•   datagrid       •   output
•   datalist       •   progress
•   datatemplate   •   source
•   embed          •   time
•   event-source   •   video
•   figure         •   footer
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/chtml1-strict.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
       <head>
       <meta http-equiv=“Content-Type” content=“text/html:
Charset=utf-8”>
<!doctype html>
<html>
    <head>
    <meta charset = “utf-8”>
• Frames

• acronym, basefont, big, center, font,
  s, strike, tt, u

• atributo language en los scripts

• carga de atributos de presentación:
  cellpading, cellspacing, width &
  height en tablas y celdas, align &
  valign,clear,size en las entradas
• Un set de elementos, atributos y tipos de entrada

• Completo modelo de repetición para formularios con campos recursivos

• Mejores soluciones para Combo-boxes y sugerencias de búsqueda
  autocompletada (atributo list, datalist & select)
Tipo de entrada   Descripción de la entrada
tel               Un número telefónico
search            Una entrada de búsqueda
url               Una dirección
mail              Un e-mail
datetime          Una hora o fecha
range             Un numero dentro de un rango
color             Colores con valor hexadecimal
<input type = “date”> en Opera
• required, placeholder, autofocus,
  autocomplete, inputmode

• Validación con el atributo pattern (usando
  expresiones regulares)

• min, max (número de archivos para subidas multi-
  archivo)
• Set de elementos, atributos y APIs


• Porque ya no estamos en 1998

• La web ya no es una colección de páginas estáticas
• metter, progress, output, time

• m para contenido marcado (como resultado de
  búsquedas)


• embed (finalmente un estándar)

• video y audio
• ping para links (rastreo de redireccionamientos)

• target está de vuelta!


• contenteditable (finalmente un estándar)

• <iframe> tiene ahora seamless y sandbox
• Set de objetos Javascript, métodos y eventos

     +Drag and drop
     +Canvas (estandarizado)
     +Notificaciones
     +Mensajes entre documentos
     +Media (estandarizado)
     +Stream múltiple
     +add(), has(), remove(), hasFocus()
     +Mucho, mucho, mucho más…
*Incluyendo las dos especificaciones y la prueba completa.
3   razones por las que   no debe importarte:
1.- En 2012 se acabará el mundo.

2.- Hay implantaciones interoperables actualmente.


3.- Por que puedes empezar desde HOY
Haz la prueba con tú navegador:
      http://html5test.com
The HTML 5 Test:
   http://html5test.com

        W3 Schools:
http://www.w3schools.com

       HTML 5 Rocks:
http://www.html5rocks.com

           W3:
    http://www.w3.org
Introducción a HTML 5
                             Alejandro Lagos




                 Muchas Gracias!

LagosRguez              alejandrolagosr.wordpress.com

Más contenido relacionado

Similar a Introducción a HTML5

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
Avanet
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
Gonzalo C.
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la web
Joan Fernández
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
aydimdagam
 

Similar a Introducción a HTML5 (20)

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
HTML5-Aplicaciones web
HTML5-Aplicaciones webHTML5-Aplicaciones web
HTML5-Aplicaciones web
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la web
 
HTML5
HTML5HTML5
HTML5
 
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScriptFull-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
 
Tecnologíahtml5
Tecnologíahtml5Tecnologíahtml5
Tecnologíahtml5
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
 
Introducción a html5
Introducción a html5Introducción a html5
Introducción a html5
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOY
 
T2 aplicaciones-web
T2   aplicaciones-webT2   aplicaciones-web
T2 aplicaciones-web
 
Tecnologia Aplicaciones Web
Tecnologia Aplicaciones WebTecnologia Aplicaciones Web
Tecnologia Aplicaciones Web
 
Html5
Html5Html5
Html5
 
Fundamentos de Microsoft .NET y C#
Fundamentos de Microsoft .NET y C#Fundamentos de Microsoft .NET y C#
Fundamentos de Microsoft .NET y C#
 
02. Interactuando con controles de UI
02. Interactuando con controles de UI02. Interactuando con controles de UI
02. Interactuando con controles de UI
 
Flujo de desarrollo para drupal (PFC)
Flujo de desarrollo para drupal (PFC)Flujo de desarrollo para drupal (PFC)
Flujo de desarrollo para drupal (PFC)
 
Web20
Web20Web20
Web20
 
HTML5
HTML5HTML5
HTML5
 
Explorando html5 - Inicio
Explorando html5 - InicioExplorando html5 - Inicio
Explorando html5 - Inicio
 
Conceptos Básicos HTML
Conceptos Básicos HTMLConceptos Básicos HTML
Conceptos Básicos HTML
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 

Introducción a HTML5

  • 1. Introducción a HTML 5 Alejandro Lagos LagosRguez alejandrolagosr.wordpress.com
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. HTML 5 hace tan fácil <video> como <img>
  • 14.
  • 15.
  • 16. //La API de geolocalización ofrece a tus aplicaciones un sistema de ubicación
  • 17.
  • 18. //Localmente: bases de datos, almacenamiento en caché, el user data, y los recursos de la aplicación
  • 19. Web poderosa == Aplicaciones poderosas Pero.. Más poder == Más responsabilidad
  • 20. //Los web workers ayudan a ejecutar scripts en segundo plano.
  • 21.
  • 22. article • header • aside • mark • audio • meter • canvas • nav • command • nest • datagrid • output • datalist • progress • datatemplate • source • embed • time • event-source • video • figure • footer
  • 23.
  • 24. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/chtml1-strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=“Content-Type” content=“text/html: Charset=utf-8”>
  • 25. <!doctype html> <html> <head> <meta charset = “utf-8”>
  • 26. • Frames • acronym, basefont, big, center, font, s, strike, tt, u • atributo language en los scripts • carga de atributos de presentación: cellpading, cellspacing, width & height en tablas y celdas, align & valign,clear,size en las entradas
  • 27. • Un set de elementos, atributos y tipos de entrada • Completo modelo de repetición para formularios con campos recursivos • Mejores soluciones para Combo-boxes y sugerencias de búsqueda autocompletada (atributo list, datalist & select)
  • 28. Tipo de entrada Descripción de la entrada tel Un número telefónico search Una entrada de búsqueda url Una dirección mail Un e-mail datetime Una hora o fecha range Un numero dentro de un rango color Colores con valor hexadecimal
  • 29. <input type = “date”> en Opera
  • 30. • required, placeholder, autofocus, autocomplete, inputmode • Validación con el atributo pattern (usando expresiones regulares) • min, max (número de archivos para subidas multi- archivo)
  • 31. • Set de elementos, atributos y APIs • Porque ya no estamos en 1998 • La web ya no es una colección de páginas estáticas
  • 32.
  • 33.
  • 34. • metter, progress, output, time • m para contenido marcado (como resultado de búsquedas) • embed (finalmente un estándar) • video y audio
  • 35. • ping para links (rastreo de redireccionamientos) • target está de vuelta! • contenteditable (finalmente un estándar) • <iframe> tiene ahora seamless y sandbox
  • 36. • Set de objetos Javascript, métodos y eventos +Drag and drop +Canvas (estandarizado) +Notificaciones +Mensajes entre documentos +Media (estandarizado) +Stream múltiple +add(), has(), remove(), hasFocus() +Mucho, mucho, mucho más…
  • 37. *Incluyendo las dos especificaciones y la prueba completa.
  • 38.
  • 39. 3 razones por las que no debe importarte: 1.- En 2012 se acabará el mundo. 2.- Hay implantaciones interoperables actualmente. 3.- Por que puedes empezar desde HOY
  • 40. Haz la prueba con tú navegador: http://html5test.com
  • 41. The HTML 5 Test: http://html5test.com W3 Schools: http://www.w3schools.com HTML 5 Rocks: http://www.html5rocks.com W3: http://www.w3.org
  • 42. Introducción a HTML 5 Alejandro Lagos Muchas Gracias! LagosRguez alejandrolagosr.wordpress.com