SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
FACULTAD : INGENIERÍA.
CARRERA : INGENIERIA DE SISTEMAS.
NOMBRE :
CENTRO : HUARAZ
TEMA : Los nuevos elementos que incorpora
HTML5 y su compatibilidad con los
navegadores web.
NOMBRE DE LA ASIGNATURA:
TECNOLOGIA WEB I
DOCENTE : ING. GONZALES MORILLO WILMER
SEMESTRE : 2012 - CICLO: II
CENTRO DE ESTDIO: UNIVERSIDAD - ULADECH
AÑO: 2012
UNA EVOLUCIÓN CONSTANTE
La web está en constante evolución. A diario
surgen nuevos proyectos que no dejan de
mejorar lo conocido hasta entonces, cuando
todo parece que está inventado aparecen
nuevos trucos o ideas que dan una vuelta de
hoja más a todo lo existente, impulsando y
ampliando los límites de los recursos
disponibles un poco más lejos de lo que
actualmente están.
Si HTML 4 no estaba preparado ni concebido
para el contenido multimedia, los
desarrolladores nos hemos encargado de buscar la forma de implementar este tipo de
contenido en nuestras webs, hemos por ejemplo utilizado objetos flash embebidos para los
vídeos, hemos utilizado javascript para simular presentaciones powerpoint.
Y es que HTML 5 y la mayoría de sus nuevas características no dejan de ser una evolución
natural y necesaria de lo que actualmente estamos utilizando los desarrolladores.
Necesitamos mayor estandarización en el contenido multimedia, nuevos tipos de etiquetas
para la estructura de nuestros blogs, drag & drop, etc.
A continuación analizaremos algunas de las características y novedades más importantes en
distintos puntos.
NUEVA ESTRUCTURA, ESTANDARIZANDO LO EXISTENTE
Una cabecera, un menú de navegación, una zona para el contenido, una barra lateral y por
último un footer. ¿A cuántos de vosotros no os resulta familiar esta estructura? Como
comentábamos en la reflexión inicial del artículo, HTML 5 es una evolución natural y
necesaria de cómo se están usando utilizando actualmente los distintos elementos HTML,
una imagen vale más que mil palabras:
Con HTML 5 surgen nuevos elementos que dan mayor significado, coherencia y
estandarización a nuestras estructuras web:
■header: cabecera.
■article: artículo publicado.
■section: sección dentro del artículo.
■footer: pie de página.
■nav: menú de navegación.
■aside: barra lateral o sidebar.
Un ejemplo claro y sencillo: los navegadores de distintos dispositivos podrán identificar
perfectamente cuáles son las secciones del menú de navegación de una página web, esté
localizado debajo de la cabecera, en un lateral o donde sea.
De cara a usabilidad y accesibilidad es realmente interesante.
NUEVOS CONTROLES PARA FORMULARIO
Otra de las cosas que se han echado en falta en los últimos años han sido nuevos tipos de
controles, buena muestra de ello es la cantidad abrumadora de plugins para selección de
fechas en calendario, cajas de búsqueda, validación de e-mails y urls… todas estas
carencias han sido cubiertas con estos nuevos controles para nuestros formularios:
■Fechas y horas
■Email
■Url
■Búsqueda
Cabe esperar que además de validación, los navegadores implementen selectores de fechas
por defecto (date pickers) entre otros para facilitar tanto a desarrollador como navegador su
implementación / uso.
TABLA DE COMPATIBILIDAD EN NAVEGADORES CON HTML5 Y CSS3
WEBGRAFIA
Taringa
http://www.taringa.net/posts/info/15216308/Curso-HTML5-_1era-parte_-Definicion-de-
HTML.html
http://www.taringa.net/posts/info/8475532/HTML5-Eamp_-CSS3_-Tabla-de-
compatibilidad-de-navegadores.html
Web.Ontuts
http://web.ontuts.com/general/html5-un-vistazo-a-los-nuevos-elementos-y-funcionalidades/
Blogvencidad
http://blogvecindad.com/tabla-de-compatibilidad-en-navegadores-con-html5-y-css3/
Vitaminaweb
http://vitaminaweb.com/tabla-de-compatibilidad-navegadores-html5_549

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Trabajo practico n 2
Trabajo practico n 2Trabajo practico n 2
Trabajo practico n 2
 
Promicionate en slideshare
Promicionate en slidesharePromicionate en slideshare
Promicionate en slideshare
 
Trabajo practico n 2
Trabajo practico n 2Trabajo practico n 2
Trabajo practico n 2
 
Informe informática
Informe   informáticaInforme   informática
Informe informática
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
PROYECTO PARTE II
PROYECTO PARTE IIPROYECTO PARTE II
PROYECTO PARTE II
 
Guía básica de Publisher 2016
Guía básica de Publisher 2016Guía básica de Publisher 2016
Guía básica de Publisher 2016
 
Herramienta TIC: Google Slide
Herramienta TIC: Google SlideHerramienta TIC: Google Slide
Herramienta TIC: Google Slide
 
Curso html5-v1
Curso html5-v1Curso html5-v1
Curso html5-v1
 
PROYECTO PARTE DOS
PROYECTO PARTE DOSPROYECTO PARTE DOS
PROYECTO PARTE DOS
 

Similar a Html5 (20)

Atix19
Atix19Atix19
Atix19
 
HTML5
HTML5HTML5
HTML5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
guia html 5
guia html 5guia html 5
guia html 5
 
Html5
Html5Html5
Html5
 
Guía html5
Guía html5Guía html5
Guía html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
<guía> HTML 5 - El Presente de la Web
<guía> HTML 5 - El Presente de la Web<guía> HTML 5 - El Presente de la Web
<guía> HTML 5 - El Presente de la Web
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Guía HTML5
Guía HTML5Guía HTML5
Guía HTML5
 
Yinller22014
Yinller22014Yinller22014
Yinller22014
 
TEORIA LENGUAJE HTLM
TEORIA LENGUAJE HTLMTEORIA LENGUAJE HTLM
TEORIA LENGUAJE HTLM
 
mejorando la web guia de html 5
mejorando la web guia de html 5mejorando la web guia de html 5
mejorando la web guia de html 5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 

Último

tabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdftabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdfssuser58a6321
 
Corte de luz 2024 Guayaquil Guayas ecuad
Corte de luz 2024 Guayaquil Guayas ecuadCorte de luz 2024 Guayaquil Guayas ecuad
Corte de luz 2024 Guayaquil Guayas ecuadJonathanHctorSilvaRo
 
Presentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la WebPresentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la Webfernandalunag19
 
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...danielpoza1
 
Emprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC MexicoEmprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC MexicoCENECOnline
 
Mapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptxMapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptxjose880240
 
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...CENECOnline
 
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdfAntenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdfperezreyesalberto10
 

Último (8)

tabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdftabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdf
 
Corte de luz 2024 Guayaquil Guayas ecuad
Corte de luz 2024 Guayaquil Guayas ecuadCorte de luz 2024 Guayaquil Guayas ecuad
Corte de luz 2024 Guayaquil Guayas ecuad
 
Presentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la WebPresentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la Web
 
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
 
Emprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC MexicoEmprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC Mexico
 
Mapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptxMapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptx
 
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
 
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdfAntenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
 

Html5

  • 1. FACULTAD : INGENIERÍA. CARRERA : INGENIERIA DE SISTEMAS. NOMBRE : CENTRO : HUARAZ TEMA : Los nuevos elementos que incorpora HTML5 y su compatibilidad con los navegadores web. NOMBRE DE LA ASIGNATURA: TECNOLOGIA WEB I DOCENTE : ING. GONZALES MORILLO WILMER SEMESTRE : 2012 - CICLO: II CENTRO DE ESTDIO: UNIVERSIDAD - ULADECH AÑO: 2012
  • 2. UNA EVOLUCIÓN CONSTANTE La web está en constante evolución. A diario surgen nuevos proyectos que no dejan de mejorar lo conocido hasta entonces, cuando todo parece que está inventado aparecen nuevos trucos o ideas que dan una vuelta de hoja más a todo lo existente, impulsando y ampliando los límites de los recursos disponibles un poco más lejos de lo que actualmente están. Si HTML 4 no estaba preparado ni concebido para el contenido multimedia, los desarrolladores nos hemos encargado de buscar la forma de implementar este tipo de contenido en nuestras webs, hemos por ejemplo utilizado objetos flash embebidos para los vídeos, hemos utilizado javascript para simular presentaciones powerpoint. Y es que HTML 5 y la mayoría de sus nuevas características no dejan de ser una evolución natural y necesaria de lo que actualmente estamos utilizando los desarrolladores. Necesitamos mayor estandarización en el contenido multimedia, nuevos tipos de etiquetas para la estructura de nuestros blogs, drag & drop, etc. A continuación analizaremos algunas de las características y novedades más importantes en distintos puntos. NUEVA ESTRUCTURA, ESTANDARIZANDO LO EXISTENTE Una cabecera, un menú de navegación, una zona para el contenido, una barra lateral y por último un footer. ¿A cuántos de vosotros no os resulta familiar esta estructura? Como comentábamos en la reflexión inicial del artículo, HTML 5 es una evolución natural y necesaria de cómo se están usando utilizando actualmente los distintos elementos HTML, una imagen vale más que mil palabras:
  • 3. Con HTML 5 surgen nuevos elementos que dan mayor significado, coherencia y estandarización a nuestras estructuras web: ■header: cabecera. ■article: artículo publicado. ■section: sección dentro del artículo. ■footer: pie de página. ■nav: menú de navegación. ■aside: barra lateral o sidebar.
  • 4. Un ejemplo claro y sencillo: los navegadores de distintos dispositivos podrán identificar perfectamente cuáles son las secciones del menú de navegación de una página web, esté localizado debajo de la cabecera, en un lateral o donde sea. De cara a usabilidad y accesibilidad es realmente interesante. NUEVOS CONTROLES PARA FORMULARIO Otra de las cosas que se han echado en falta en los últimos años han sido nuevos tipos de controles, buena muestra de ello es la cantidad abrumadora de plugins para selección de fechas en calendario, cajas de búsqueda, validación de e-mails y urls… todas estas carencias han sido cubiertas con estos nuevos controles para nuestros formularios: ■Fechas y horas ■Email ■Url ■Búsqueda Cabe esperar que además de validación, los navegadores implementen selectores de fechas por defecto (date pickers) entre otros para facilitar tanto a desarrollador como navegador su implementación / uso. TABLA DE COMPATIBILIDAD EN NAVEGADORES CON HTML5 Y CSS3
  • 5.