SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (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
 

Ähnlich wie 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
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML 200.ppt
HTML 200.pptHTML 200.ppt
HTML 200.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
 
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
 
Ejemplos de WCAG 2.0
Ejemplos de WCAG 2.0Ejemplos de WCAG 2.0
Ejemplos de WCAG 2.0
 
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
 
1-HTML EXPO.pdf
1-HTML EXPO.pdf1-HTML EXPO.pdf
1-HTML EXPO.pdf
 
Introducción a html 5
Introducción a html 5Introducción a html 5
Introducción a html 5
 

Mehr von 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
 
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émicaLluí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 ZoteroLluís Codina
 
MicroStock y Stock Footage
MicroStock y Stock FootageMicroStock y Stock Footage
MicroStock y Stock FootageLluís Codina
 
Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2Busqueda Multimedia 2009 v2
Busqueda Multimedia 2009 v2Lluís Codina
 
Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009Evaluacion Calidad Contenidos 2009
Evaluacion Calidad Contenidos 2009Lluís Codina
 
Posicionamiento Web 2009
Posicionamiento Web 2009Posicionamiento Web 2009
Posicionamiento Web 2009Lluís Codina
 
ciberperiodismo_2009v1
ciberperiodismo_2009v1ciberperiodismo_2009v1
ciberperiodismo_2009v1Lluí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 - 2009Lluís Codina
 
campPosicionamiento2009
campPosicionamiento2009campPosicionamiento2009
campPosicionamiento2009Lluís Codina
 
Buscadores Especializados Web20
Buscadores Especializados Web20Buscadores Especializados Web20
Buscadores Especializados Web20Lluí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 WebLluí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 ProfesionalesLluís Codina
 

Mehr von 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
 

Kürzlich hochgeladen

Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionCarolVigo1
 
explicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptexplicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptjosemanuelcremades
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosAgrela Elvixeo
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativaricardoruizaleman
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkMaximilianoMaldonado17
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Ivie
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCarolVigo1
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdfNELLYKATTY
 
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaLa poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaIGNACIO BALLESTER PARDO
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarCa Ut
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
U2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfU2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfJavier Correa
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAJoaqunSolrzano
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADODJElvitt
 

Kürzlich hochgeladen (20)

Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
 
Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
 
explicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptexplicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.ppt
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES Monelos
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativa
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 link
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacion
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
 
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaLa poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolar
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
U2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfU2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdf
 
VISITA DE ESTUDO À CRUZ VERMELHA _
VISITA DE ESTUDO À CRUZ VERMELHA                   _VISITA DE ESTUDO À CRUZ VERMELHA                   _
VISITA DE ESTUDO À CRUZ VERMELHA _
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 

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