SlideShare una empresa de Scribd logo
HTML5
Lluís Codina
UPF. Seminario DigiDoc
Nov. 2010
HTML v XHTML
• HTML5: futuro estándar que unifica HTML y XHTML, pero…
• Aún en desarrollo
• Dos versiones: W3C y WHATWG
• XHTML 1: estándar actual, pero sin continuidad
• Dos formas de codificar HTML5:
• html
• xml
2
Objetivos
• Evitar código innecesariamente complicado
• Frenar la versión 2 de xhtml que rompía con la compatibilidad
descendente
• Proporcionar flexibilidad a la codificación
• Poner las cosas más fáciles a:
• Los fabricantes de navegadores
• Los fabricantes de editores de páginas
• Los autores de páginas
3
Filosofía
• Racionalizar y flexibilizar
• Aportar una nueva estructura de página con mayor valor
semántico
• Evitar la dependencia de aplicaciones y plug-ins externos
(video, sonido)
• Facilitar el desarrollo de la Web 2.0 y la Web 3.0 (cloud
computing)
• En resumen: frenar un poco el amor del W3C por
complicarnos la vida
4
Ejemplos 1
• Actual declaración DOCTYPE, con metadatos de codificación
de caracteres:
5
Ejemplos 2
• Nueva declaración DOCTYPE, con metadatos de codificación
de caracteres:
6
Cambios
Cambios en:
1. Estructura de página
2. Atributos universales
3. Multimedialidad
Balance. Elementos y atributos:
1. Añadidos
2. Eliminados
3. Reinterpretados
7
Elementos de estructura
<header>
• Puede contener otros elementos y, en especial:
• Elemento <hgroup>
• Elemento <nav>
• Elementos <hn>
<nav>
• Navegación del sitio
<article>
• Componentes independientes de la página
<section>
• Organización de contenidos
<aside>
• Componentes complementarios
<footer>
• Pie de página 8
Ejemplo de estructura de página
(X)HTML
9
Ejemplo de estructura de página
HTML5
10
Elementos eliminados
• Todos los elementos y atributos de presentación > Alternativas
en CSS
• Elementos o atributos que nunca tuvieron mucho éxito:
• <frameset>
• <acronym>
• <applet>
• <dir>
• longdesc
• scheme
• rev
11
Elementos y atributos añadidos
• Elementos. En especial para:
• Estructuración de la página
• Multimedia
• Atributos. En especial para:
• Enlaces
• Listas
• En general: atributos universales
12
Elementos reinterpretados
• <dl>
• <cite>
• <address>
• <em>
• <strong>
• <small>
• <i>
• <b>
• <br>
• <hr>
13
Atributos universales
• class
• dir
• id
• lang
• style
• tabindex
• title
14
Enlaces
• media
• hreflang
• rel
15
Elementos para estructurar la página
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <hgroup>
• <dialog>
• <time>
• <figure>
• <figcaption>
• <details>
• <meter>
16
Estructura de índices
• HTML5 outlines
• Una base para crear índices de forma automática
• La base: sectioning content
17
Multimedia
• <embed>
• <svg>
• <canvas>
• <audio>
• <video>
18
Formularios
• search
• tel
• url
• email
• ...
19
Soporte
• Navegadores
• Incompleto, pero avanza muy rápido
• La razón: es la apuesta de los fabricantes de navegadores
• Editores
• Dreamweaver
• Extensión para CS3 i CS4
• Soporte específico para CS5
• Código fuente
• TopStyle
• CoffeeCup
• Editores online
• Rendera
20
Conclusiones
• Una nueva gramática más lógica y consistente para el código
fuente
• Mayores opciones para la estructuración inteligente de
páginas
• Un nuevo concepto de calidad en código fuente
• Una nueva oportunidad para la Web Semántica
21
Fuentes
• HTML5 Doctor
html5doctor.com
• W3C HTML
w3.org/TR/html-markup
• W3C HTML5
dev.w3.org/html5/spec/Overview.html
• W3C differences from HTML4
w3.org/TR/html5-diff
• WHATWG
www.whatwg.org/html5
• Wikipedia
es.wikipedia.org/wiki/HTML_5
• W3 Schools
www.w3schools.com/html5/html5_reference.asp
• ThinkEPI > J. Franganillo
http://www.thinkepi.net/html5-nuevo-estandar-basico-del-web
Sitio del autor:
www.lluiscodina.com
22

Más contenido relacionado

La actualidad más candente

Html5 Básico
Html5 BásicoHtml5 Básico
Html5 BásicoFEDIMON
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
drarock
 
Shadows of the browser
Shadows of the browserShadows of the browser
Shadows of the browser
Ana Isabel Encinar Sáez
 
Conceptos de dream weaver
Conceptos de dream weaverConceptos de dream weaver
Conceptos de dream weaver
IdaliaXimenaFloresMa
 
HTML5
HTML5HTML5
HTML5
vivispato
 
Presentacion Taller Desarrollo de Blogs
Presentacion Taller Desarrollo de BlogsPresentacion Taller Desarrollo de Blogs
Presentacion Taller Desarrollo de Blogs
Luis Sandoval
 
Programacion web
Programacion webProgramacion web
Programacion web
Carlos Alonso Pérez
 
Competencias Digitales - Búsqueda y selección de REA
Competencias Digitales - Búsqueda y selección de REACompetencias Digitales - Búsqueda y selección de REA
Competencias Digitales - Búsqueda y selección de REA
Marco Damian Cortes Gonzalez
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
Hernan Beati
 
Clase 3 HTML
Clase 3 HTMLClase 3 HTML
Clase 3 HTML
Josué Fortis
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Efraim Martinez
 
Html y html5
Html y html5Html y html5
Html y html5
Daniela Suarez
 
Diseño web moderno desde cero
Diseño web moderno desde ceroDiseño web moderno desde cero
Diseño web moderno desde cero
Adrián Arroyo Calle
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
Juan Eladio Sánchez Rosas
 
Curso HTML5
Curso HTML5Curso HTML5
Curso HTML5
Jhonathan Rodriguez
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
Juan Eladio Sánchez Rosas
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
IMAGINA EDUCATION SLU
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garciaDreamweaver- mercedes garcia
Dreamweaver- mercedes garciaMercedes Garcia
 

La actualidad más candente (20)

HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Html5 Básico
Html5 BásicoHtml5 Básico
Html5 Básico
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
 
Shadows of the browser
Shadows of the browserShadows of the browser
Shadows of the browser
 
Conceptos de dream weaver
Conceptos de dream weaverConceptos de dream weaver
Conceptos de dream weaver
 
HTML5
HTML5HTML5
HTML5
 
Presentacion Taller Desarrollo de Blogs
Presentacion Taller Desarrollo de BlogsPresentacion Taller Desarrollo de Blogs
Presentacion Taller Desarrollo de Blogs
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Competencias Digitales - Búsqueda y selección de REA
Competencias Digitales - Búsqueda y selección de REACompetencias Digitales - Búsqueda y selección de REA
Competencias Digitales - Búsqueda y selección de REA
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Clase 3 HTML
Clase 3 HTMLClase 3 HTML
Clase 3 HTML
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
 
Html y html5
Html y html5Html y html5
Html y html5
 
Chivas332
Chivas332Chivas332
Chivas332
 
Diseño web moderno desde cero
Diseño web moderno desde ceroDiseño web moderno desde cero
Diseño web moderno desde cero
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
 
Curso HTML5
Curso HTML5Curso HTML5
Curso HTML5
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garciaDreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
 

Similar a Html5 2010

Internet Navegadores
Internet NavegadoresInternet Navegadores
Internet Navegadores
Isis Jeronimo Angeles
 
HTML.ppt
HTML.pptHTML.ppt
HTML5resumen.ppt
HTML5resumen.pptHTML5resumen.ppt
HTML5resumen.ppt
GerardoPerez624202
 
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTESCONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
orcel97pa
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
warariasreyes
 
HTML CSS tutorial y bootstramp guia para programacion.ppt
HTML CSS tutorial y bootstramp guia para programacion.pptHTML CSS tutorial y bootstramp guia para programacion.ppt
HTML CSS tutorial y bootstramp guia para programacion.ppt
Jaime Sayago Heredia
 
HTML 200.ppt
HTML 200.pptHTML 200.ppt
HTML 200.ppt
APOLINARPAULINOSEBAS
 
HTML ppt ejercicios propuestos y teoria y ejecucion
HTML ppt ejercicios propuestos y teoria y ejecucionHTML ppt ejercicios propuestos y teoria y ejecucion
HTML ppt ejercicios propuestos y teoria y ejecucion
Yeismir Rios
 
HTML.ppt
HTML.pptHTML.ppt
HTML_.ppt
HTML_.pptHTML_.ppt
HTML_.ppt
JOSECASHUUG
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Gonzalo C.
 
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Peter Concha
 
Actividad 3 Material de apoyo en el seguimiento de
Actividad 3 Material de apoyo en el seguimiento deActividad 3 Material de apoyo en el seguimiento de
Actividad 3 Material de apoyo en el seguimiento de
Yeismir Rios
 
HTML5
HTML5HTML5
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
Diego López-de-Ipiña González-de-Artaza
 
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y BoostrapHTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
Alex Vogager
 

Similar a Html5 2010 (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Internet Navegadores
Internet NavegadoresInternet Navegadores
Internet Navegadores
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML5resumen.ppt
HTML5resumen.pptHTML5resumen.ppt
HTML5resumen.ppt
 
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTESCONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
CONOCIENDO MAS SOBRE HMTL5 Y SUS COMPONENTES
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML CSS tutorial y bootstramp guia para programacion.ppt
HTML CSS tutorial y bootstramp guia para programacion.pptHTML CSS tutorial y bootstramp guia para programacion.ppt
HTML CSS tutorial y bootstramp guia para programacion.ppt
 
HTML 200.ppt
HTML 200.pptHTML 200.ppt
HTML 200.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML ppt ejercicios propuestos y teoria y ejecucion
HTML ppt ejercicios propuestos y teoria y ejecucionHTML ppt ejercicios propuestos y teoria y ejecucion
HTML ppt ejercicios propuestos y teoria y ejecucion
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML_.ppt
HTML_.pptHTML_.ppt
HTML_.ppt
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
 
Actividad 3 Material de apoyo en el seguimiento de
Actividad 3 Material de apoyo en el seguimiento deActividad 3 Material de apoyo en el seguimiento de
Actividad 3 Material de apoyo en el seguimiento de
 
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
 
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y BoostrapHTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
 

Más de Lluís Codina

Recursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación AudiovisualRecursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación Audiovisual
Lluís Codina
 
Recursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación AudiovisualRecursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación AudiovisualLluís Codina
 
Mapas conceptuales (v1)
Mapas conceptuales (v1)Mapas conceptuales (v1)
Mapas conceptuales (v1)
Lluís Codina
 
Anatomia de una base de datos académica
Anatomia de una base de datos académicaAnatomia de una base de datos académica
Anatomia de una base de datos académica
Lluís Codina
 
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Lluís Codina
 
Aplicaciones Online: RefWork vs Zotero
Aplicaciones Online: RefWork vs ZoteroAplicaciones Online: RefWork vs Zotero
Aplicaciones Online: RefWork vs Zotero
Lluís Codina
 
MicroStock y Stock Footage
MicroStock y Stock FootageMicroStock y Stock Footage
MicroStock y Stock Footage
Lluís Codina
 
tallerAQU2010
tallerAQU2010tallerAQU2010
tallerAQU2010
Lluís Codina
 
Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2
Lluís Codina
 
Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009
Lluís Codina
 
Posicionamiento Web 2009
Posicionamiento Web 2009Posicionamiento Web 2009
Posicionamiento Web 2009
Lluís Codina
 
ciberperiodismo_2009v1
ciberperiodismo_2009v1ciberperiodismo_2009v1
ciberperiodismo_2009v1
Lluís Codina
 
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
Lluís Codina
 
Ciencia 20 2009
Ciencia 20 2009Ciencia 20 2009
Ciencia 20 2009
Lluís Codina
 
campPosicionamiento2009
campPosicionamiento2009campPosicionamiento2009
campPosicionamiento2009
Lluís Codina
 
Buscadores Especializados Web20
Buscadores Especializados Web20Buscadores Especializados Web20
Buscadores Especializados Web20
Lluís Codina
 
Sitemas Especializados de Información y el Futuro de la Web
Sitemas Especializados de Información y el Futuro de la WebSitemas Especializados de Información y el Futuro de la Web
Sitemas Especializados de Información y el Futuro de la Web
Lluís Codina
 
scaterm2009: Web Semàntica o Web Social?
scaterm2009: Web Semàntica o Web Social?scaterm2009: Web Semàntica o Web Social?
scaterm2009: Web Semàntica o Web Social?
Lluís Codina
 
Sistemas de Informaciión Profesionales
Sistemas de Informaciión ProfesionalesSistemas de Informaciión Profesionales
Sistemas de Informaciión Profesionales
Lluís Codina
 
Ciencia 2.0
Ciencia 2.0Ciencia 2.0
Ciencia 2.0
Lluís Codina
 

Más de Lluís Codina (20)

Recursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación AudiovisualRecursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación Audiovisual
 
Recursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación AudiovisualRecursos Multimedia para la Comunicación Audiovisual
Recursos Multimedia para la Comunicación Audiovisual
 
Mapas conceptuales (v1)
Mapas conceptuales (v1)Mapas conceptuales (v1)
Mapas conceptuales (v1)
 
Anatomia de una base de datos académica
Anatomia de una base de datos académicaAnatomia de una base de datos académica
Anatomia de una base de datos académica
 
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
 
Aplicaciones Online: RefWork vs Zotero
Aplicaciones Online: RefWork vs ZoteroAplicaciones Online: RefWork vs Zotero
Aplicaciones Online: RefWork vs Zotero
 
MicroStock y Stock Footage
MicroStock y Stock FootageMicroStock y Stock Footage
MicroStock y Stock Footage
 
tallerAQU2010
tallerAQU2010tallerAQU2010
tallerAQU2010
 
Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2
 
Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009
 
Posicionamiento Web 2009
Posicionamiento Web 2009Posicionamiento Web 2009
Posicionamiento Web 2009
 
ciberperiodismo_2009v1
ciberperiodismo_2009v1ciberperiodismo_2009v1
ciberperiodismo_2009v1
 
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
Buscadores Academicos, Web 2.0 y Ciencia 2.0 - 2009
 
Ciencia 20 2009
Ciencia 20 2009Ciencia 20 2009
Ciencia 20 2009
 
campPosicionamiento2009
campPosicionamiento2009campPosicionamiento2009
campPosicionamiento2009
 
Buscadores Especializados Web20
Buscadores Especializados Web20Buscadores Especializados Web20
Buscadores Especializados Web20
 
Sitemas Especializados de Información y el Futuro de la Web
Sitemas Especializados de Información y el Futuro de la WebSitemas Especializados de Información y el Futuro de la Web
Sitemas Especializados de Información y el Futuro de la Web
 
scaterm2009: Web Semàntica o Web Social?
scaterm2009: Web Semàntica o Web Social?scaterm2009: Web Semàntica o Web Social?
scaterm2009: Web Semàntica o Web Social?
 
Sistemas de Informaciión Profesionales
Sistemas de Informaciión ProfesionalesSistemas de Informaciión Profesionales
Sistemas de Informaciión Profesionales
 
Ciencia 2.0
Ciencia 2.0Ciencia 2.0
Ciencia 2.0
 

Último

CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIACONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
BetzabePecheSalcedo1
 
corpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdfcorpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdf
YolandaRodriguezChin
 
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
JAVIER SOLIS NOYOLA
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
rosannatasaycoyactay
 
El fundamento del gobierno de Dios. El amor
El fundamento del gobierno de Dios. El amorEl fundamento del gobierno de Dios. El amor
El fundamento del gobierno de Dios. El amor
Alejandrino Halire Ccahuana
 
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCIONCAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
MasielPMP
 
El Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundoEl Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundo
SandraBenitez52
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
pablomarin116
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
ClaudiaAlcondeViadez
 
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
20minutos
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
arleyo2006
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
LorenaCovarrubias12
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
CESAR MIJAEL ESPINOZA SALAZAR
 
Presentación Revistas y Periódicos Digitales
Presentación Revistas y Periódicos DigitalesPresentación Revistas y Periódicos Digitales
Presentación Revistas y Periódicos Digitales
nievesjiesc03
 
Sesión: El fundamento del gobierno de Dios.pdf
Sesión: El fundamento del gobierno de Dios.pdfSesión: El fundamento del gobierno de Dios.pdf
Sesión: El fundamento del gobierno de Dios.pdf
https://gramadal.wordpress.com/
 
Proceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de PamplonaProceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de Pamplona
Edurne Navarro Bueno
 
True Mother's Speech at THE PENTECOST SERVICE..pdf
True Mother's Speech at THE PENTECOST SERVICE..pdfTrue Mother's Speech at THE PENTECOST SERVICE..pdf
True Mother's Speech at THE PENTECOST SERVICE..pdf
Mercedes Gonzalez
 
Conocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del ArrabalConocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del Arrabal
Profes de Relideleón Apellidos
 
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
auxsoporte
 
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLAACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
JAVIER SOLIS NOYOLA
 

Último (20)

CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIACONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
CONCLUSIONES-DESCRIPTIVAS NIVEL PRIMARIA
 
corpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdfcorpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdf
 
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
 
El fundamento del gobierno de Dios. El amor
El fundamento del gobierno de Dios. El amorEl fundamento del gobierno de Dios. El amor
El fundamento del gobierno de Dios. El amor
 
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCIONCAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
CAPACIDADES SOCIOMOTRICES LENGUAJE, INTROYECCIÓN, INTROSPECCION
 
El Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundoEl Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundo
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
 
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
 
Presentación Revistas y Periódicos Digitales
Presentación Revistas y Periódicos DigitalesPresentación Revistas y Periódicos Digitales
Presentación Revistas y Periódicos Digitales
 
Sesión: El fundamento del gobierno de Dios.pdf
Sesión: El fundamento del gobierno de Dios.pdfSesión: El fundamento del gobierno de Dios.pdf
Sesión: El fundamento del gobierno de Dios.pdf
 
Proceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de PamplonaProceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de Pamplona
 
True Mother's Speech at THE PENTECOST SERVICE..pdf
True Mother's Speech at THE PENTECOST SERVICE..pdfTrue Mother's Speech at THE PENTECOST SERVICE..pdf
True Mother's Speech at THE PENTECOST SERVICE..pdf
 
Conocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del ArrabalConocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del Arrabal
 
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
 
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLAACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
 

Html5 2010

  • 2. HTML v XHTML • HTML5: futuro estándar que unifica HTML y XHTML, pero… • Aún en desarrollo • Dos versiones: W3C y WHATWG • XHTML 1: estándar actual, pero sin continuidad • Dos formas de codificar HTML5: • html • xml 2
  • 3. Objetivos • Evitar código innecesariamente complicado • Frenar la versión 2 de xhtml que rompía con la compatibilidad descendente • Proporcionar flexibilidad a la codificación • Poner las cosas más fáciles a: • Los fabricantes de navegadores • Los fabricantes de editores de páginas • Los autores de páginas 3
  • 4. Filosofía • Racionalizar y flexibilizar • Aportar una nueva estructura de página con mayor valor semántico • Evitar la dependencia de aplicaciones y plug-ins externos (video, sonido) • Facilitar el desarrollo de la Web 2.0 y la Web 3.0 (cloud computing) • En resumen: frenar un poco el amor del W3C por complicarnos la vida 4
  • 5. Ejemplos 1 • Actual declaración DOCTYPE, con metadatos de codificación de caracteres: 5
  • 6. Ejemplos 2 • Nueva declaración DOCTYPE, con metadatos de codificación de caracteres: 6
  • 7. Cambios Cambios en: 1. Estructura de página 2. Atributos universales 3. Multimedialidad Balance. Elementos y atributos: 1. Añadidos 2. Eliminados 3. Reinterpretados 7
  • 8. Elementos de estructura <header> • Puede contener otros elementos y, en especial: • Elemento <hgroup> • Elemento <nav> • Elementos <hn> <nav> • Navegación del sitio <article> • Componentes independientes de la página <section> • Organización de contenidos <aside> • Componentes complementarios <footer> • Pie de página 8
  • 9. Ejemplo de estructura de página (X)HTML 9
  • 10. Ejemplo de estructura de página HTML5 10
  • 11. Elementos eliminados • Todos los elementos y atributos de presentación > Alternativas en CSS • Elementos o atributos que nunca tuvieron mucho éxito: • <frameset> • <acronym> • <applet> • <dir> • longdesc • scheme • rev 11
  • 12. Elementos y atributos añadidos • Elementos. En especial para: • Estructuración de la página • Multimedia • Atributos. En especial para: • Enlaces • Listas • En general: atributos universales 12
  • 13. Elementos reinterpretados • <dl> • <cite> • <address> • <em> • <strong> • <small> • <i> • <b> • <br> • <hr> 13
  • 14. Atributos universales • class • dir • id • lang • style • tabindex • title 14
  • 16. Elementos para estructurar la página • <header> • <nav> • <section> • <article> • <aside> • <footer> • <hgroup> • <dialog> • <time> • <figure> • <figcaption> • <details> • <meter> 16
  • 17. Estructura de índices • HTML5 outlines • Una base para crear índices de forma automática • La base: sectioning content 17
  • 18. Multimedia • <embed> • <svg> • <canvas> • <audio> • <video> 18
  • 19. Formularios • search • tel • url • email • ... 19
  • 20. Soporte • Navegadores • Incompleto, pero avanza muy rápido • La razón: es la apuesta de los fabricantes de navegadores • Editores • Dreamweaver • Extensión para CS3 i CS4 • Soporte específico para CS5 • Código fuente • TopStyle • CoffeeCup • Editores online • Rendera 20
  • 21. Conclusiones • Una nueva gramática más lógica y consistente para el código fuente • Mayores opciones para la estructuración inteligente de páginas • Un nuevo concepto de calidad en código fuente • Una nueva oportunidad para la Web Semántica 21
  • 22. Fuentes • HTML5 Doctor html5doctor.com • W3C HTML w3.org/TR/html-markup • W3C HTML5 dev.w3.org/html5/spec/Overview.html • W3C differences from HTML4 w3.org/TR/html5-diff • WHATWG www.whatwg.org/html5 • Wikipedia es.wikipedia.org/wiki/HTML_5 • W3 Schools www.w3schools.com/html5/html5_reference.asp • ThinkEPI > J. Franganillo http://www.thinkepi.net/html5-nuevo-estandar-basico-del-web Sitio del autor: www.lluiscodina.com 22