2. AGENDA
• Pre examen.
• Historia HTML
• Historia HTML5
• Semántica HTML5
• Ejemplo HTML5, hoja de estilo
• Post examen.
3.
4. HISTORIA HTML
• 1989 – 1991
HTML 1.0 - 2.0
• 1995
HTML 3
• 1998
HTML4
• 1999
HTML 4.01
• 2000
XHTML 1.0
5.
6. HISTORIA HTML5
• 2004 WHATWG y estándares
• 2006 WHATWG y W3C
• 2008 Compatibilidad con navegadores.
7.
8. SEMÁNTICA HTML5
La semántica es lo que diferencia la plataforma web de otras
plataformas de aplicaciones.
Aquellas etiquetas que dan
significado al HTML.
Header.
Nav.
Section.
Article.
Aside.
Footer.
1989 – 1991 HTML 1.0 - 2.0Estos son los primeros pasos del HTML, las páginas no eran muy bonitas que digamos pero por lo menos tenían hipertexto.1995 HTML 3Estos son los días de la larga guerra de los navegadores (Browser wars), Netscape y Microsoft competían por tener un navegador con más funciones (y así ganar mercado), hasta inventaban sus propias etiquetas HTML! En el medio de esta guerra estaba el pobre desarrollador web, que tenía que estar al tanto de ambos navegadores.Por ejemplo Internet Explorer tenía la etiqueta <marquee> y Netscape la etiqueta<blink>.Esa era la época en que veías el típico "bestseenon Internet Explorer". En esos días hubieras tenido que escribir 2 páginas diferentes, una para Netscape y otra para Internet Explorer.1998 HTML 4Por fin terminó la guerra de los navegadores y llegó al rescate el Wold Wide Web Consortium (W3C para los amigos) creando una sola versión de HTML.¿Cual era su idea?Separar la estructura y presentación de las páginas web en 2 lenguajes. HTML 4 para estructura y CSS para presentación, y convencer a las compañías que creaban navegadores que era necesario adoptar esos estándares.¿Funcionó esa idea?Casi, con un par de cambios...1999 HTML 4.01El buen HTML 4.01, es la versión más actual de HTML y seguramente la más usada, por fin se podía escribir tranquilamente un sólo código estando seguro que la mayoría de navegadores lo interpretaría bien.Por supuesto que esta versión tampoco es perfecta, pero está muy cerca de serlo, nada de que preocuparse. Con HTML 4.01 puedes estar seguro que la gran mayoría de navegadores mostrarán tu contenido de la forma correcta.Pero por supuesto, la tecnología avanza y...2000 XHTML 1.0Las cosas cambiaron. HTML y otro lenguaje de marcado conocido como XML se juntaron y nació el XHTML 1.0.Es un lenguaje genial, que combina la popularidad y la capacidad de verse correctamente en todos los navegadores del HTML con la capacidad de extensión del XML.Simplemente es un mejor lenguaje de marcado, y lo mejor de todo es que el código es casi igual al HTML!
2004 Nace WHATWG (Web HypertextApplicationsTechnologyWorkingGroup) de la mano de IanHickson que propuso trabajar en estándar paralelo para crear Web Apps. En el 2004 su propuesta fue rechazada y decidió hacerlo todo por su cuenta, con sus amigos. Así, la WHATWG empieza a trabajar en el estandar de HTML5 en un modelo dictatorial donde IanHickson tiene la última palabra de esperar a que un comité burocrático se ponga de acuerdo.2006 Dos años más tarde consiguieron su principal apoyo cuando el W3C (World Wide Web Consortium) decidió abandonar XHTML y comenzó a trabajar con WHAT. 2008Luego, en el 2008, se finaliza la primera versión permitiendo que Firefox 3 sea compatible con HTML5. Más adelante se sumarían Internet Explorer, Google Chrome y Safari.Con el pasar del tiempo se fueron sumando compañías y se fue abandonando el uso de tecnologías como Flash hasta que en septiembre del 2011, 34 de las 100 páginas con más tráfico utilizaban ya este lenguaje.
La semántica es una de las funciones en las que más se diferencia la plataforma web de otras plataformas de aplicaciones. Los desarrolladores suelen ignorar esta función o restarle importancia, pero su dominio puede reportar muchos beneficios para los proyectos.Semántica: Perteneciente o relativo a la significación de las palabras. Esa es la definición de la Real Academia de la Lengua Española y es así de sencillo es entender este tipo de etiquetas del lenguaje HTML: Aquellas que dan un significado a las partes del documento.Existe pues una forma lógica de colocar todos los contenidos dentro de un sitio y unas etiquetas determinadas para contenerlos, atendiendo a la estructura que nosotros queremos comunicar a los sistemas que puedan procesar el documento. Header:Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada.Nav:Este apartado contiene los enlaces (barra de navegación) externos o internos de la página.Section:Este gran apartado puede agrupar diferentes subapartados (de tipo 'article') de diferentes temas, o bien puede definir un gran apartado de contenido unitario.Article:Es una pieza independiente de contenido, que puede estar contenida (o no) dentro de un apartado de tipo 'section'.Aside:Define un bloque de contenido (tangencial) relacionado con el contenido principal, pero que no es esencial para la compresión del mismo.Footer:Equivale al pie de página de un apartado concreto ('section' o 'article') o de la página web en general.
