Tag: HTML5

Cómo estructurar una página web

En How to Section Your HTML explican muy bien cómo estructurar una página web con las diferentes etiquetas semánticas que existen en HTML5:

The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.

Here is a brief explanation of each sectioning element and how they are used:

<nav> – Equivalent to role=”navigation”. Major site navigation that consistently appears frequently across the site. Examples include the primary navigation, secondary navigation, and in-page navigation.
<aside> – Equivalent to role=”complementary”. Content that is only tangentially related (or not related) to the main content. Think of something like a sidebar with supplementary information, a note within an article, or the outer container for a list of related articles at the bottom of a blog post.
<article> – Equivalent to role=”article”. Content that is self-contained in that it makes sense on its own when taken out of context. That could mean a widget, a blog post or even a comment within a blog post.
<section> – Equivalent to role=”region”. Content that needs extra context from its parent sectioning element to make sense. This is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones.

HTML5: de HTML4 a HTML5

[kml_flashembed movie=”http://www.youtube.com/v/vRqQRrULSxI” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión.

En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.

En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.

Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.

Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.

O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.

Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.

Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.

Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.

En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.

Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.

Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:

Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.

Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.

La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.

En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.

Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.

A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.

En primer lugar vamos a ver el código HTML de la cabecera.

Este es el típico código de una cabecera de una página web: un div y un h1.

En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.

Ahora la barra o menú de navegación del sitio web.

Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.

Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.

Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.

Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.

La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.

Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.

Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.

Por último, el pie de página.

En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.

En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.

Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

HTML5: introducción

[kml_flashembed movie=”http://www.youtube.com/v/DdXBcoaFPro” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a ayudar con tus primeros pasos con el lenguaje de etiquetado HTML5.

En el vídeo “Historia de HTML”, te expliqué la evolución del lenguaje de marcado o etiquetado HTML, el lenguaje con el que se crean las páginas web desde que Tim Berners-Lee creó la primera página web a finales de 1990 en el CERN.

Recuerda que después de HTML4, el W3C, el organismo que desarrolla los estándares de la Web inició el desarrollo de XHTML. Sin embargo, unos años después, el W3C canceló el desarrolló de XHTML y se unió a un grupo independiente de desarrolladores web con el objetivo de desarrollar HTML5.

Mucha gente tiene una gran confusión con HTML5, se piensa que es algo totalmente distinto a HTML4 y XHTML. Y no es así.

Fijémonos en este gráfico: cada rectángulo representa una etiqueta de HTML 4.

En HTML5, algunas de las etiquetas han desaparecido porque se han quedado viejas y ya no se deben emplear.

Otras etiquetas han variado un poco su funcionamiento o incluyen atributos nuevos.

Y por último, se han añadido etiquetas y atributos nuevos. Pero como podemos ver, la mayor parte de HTML5 sigue siendo lo mismo que ya existía en HTML4.

Por ejemplo, si consultamos una referencia de las etiquetas de HTML5, como ésta que existe en W3Schools, veremos que hay etiquetas como frame, frameset o noframes que aparecen marcadas como “no soportadas en HTML5”, ya no se deben emplear.

También hay etiquetas como header, keygen, main, mark, menuitem, meter y nav que aparecen marcadas como etiquetas nuevas de HTML5.

En el momento de grabar este vídeo, HTML5 todavía sigue en desarrollo.

La última versión publicada tiene fecha del 16 de septiembre de 2014 y posee el estado de “recomendación propuesta”, lo que significa que es ya casi la versión final.

¿Cuándo se espera que esté terminado HTML5?

El W3C tiene publicado un plan u hoja de ruta en el que se explica el proceso de estandarización de HTML5. Según este plan, se espera que HTML5 adopte el estado de recomendación durante el último cuatrimestre del año 2014.

El W3C no para, y aunque no esté finalizado HTML5, ya está trabajando en la próxima versión, la versión 5.1.

HTML 5.0 será una especificación oficial a finales del año 2014, y la versión 5.1 a finales del año 2016.

Aunque todavía no esté terminada su especificación, ya puedes empezar a usar HTML5, aunque con mucho cuidado.

¿Por qué con cuidado?

Porque no todos los navegadores admiten las nuevas características de HTML5.

Existen varios sitios web en los que se puede comprobar la compatibilidad de los navegadores con HTML5.

Por ejemplo, en HTML5Test, el test indica que la versión 37 de Google Chrome, la última versión en el momento de grabar este vídeo, obtiene 512 puntos de compatibilidad de un máximo de 555 puntos, lo cual está muy bien.

Sin embargo, Internet Explorer 11 obtiene un pobre resultado, sólo 365 puntos del máximo de 555, un resultado muy muy muy malo.

En HTML5Test también es posible encontrar una comparativa de distintos navegadores.

También existe el sitio web Can I use?, en el que se puede consultar la compatibilidad de las novedades de HTML5 y CSS3 con los distintos navegadores.

Por ejemplo, el nuevo control input type date tiene como propósito visualizar un calendario para que el usuario pueda seleccionar una fecha.

Según Can I use?, este control sólo se puede emplear en Google Chrome y Opera, pero no funciona en Internet Explorer, Firefox y Safari. Me estoy refiriendo a las versiones de estos navegadores de escritorio, de ordenador.

¿Lo podemos verificar?

Sí, por ejemplo en el sitio web “The Current State of HTML5 Forms” podemos verificar el funcionamiento de los nuevos controles de los formularios.

Efectivamente, el control de tipo date se visualiza correctamente en Google Chrome, pero en Mozilla Firefox se visualiza simplemente como un cuadro de texto, igual que en Internet Explorer.

Para empezar a aprender HTML5 puedes consultar documentación sobre HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional del desarrollo web necesitas conocer las tres versiones.

De todo ello te hablo en el vídeo “¿Cuál es el mejor: HTML, XHTML, HTML5?”.

Una vez que ya conozcas las versiones anteriores de HTML, ya puedes pasar a aprender HTML5. Existen muy buenos recursos para ello.

El primero que te recomiendo es “Dive into HTML5”, de Mark Pilgrim. Este sitio web se comenzó a desarrollar en el año 2009 y no se actualiza desde el 2011, pero en HTML5Doctor existe una copia que sí que se intenta actualizar con las últimas novedades del lenguaje.

También te recomiendo que consultes el sitio web W3Schools, que contiene tanto un tutorial como una referencia de todas las etiquetas de HTML5.

Y por supuesto, también puedes consultar el resto de vídeos del curso iDESWEB.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

HTML5 ya es un estándar

Ayer, 28 de octubre de 2014, el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, la recomendación final de HTML5.

¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportaran mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.

El W3C lo anunció con la nota de prensa HTML5 is a W3C Recommendation:

The HTML Working Group today published HTML5 as W3C Recommendation. This specification defines the fifth major revision of the Hypertext Markup Language (HTML), the format used to build Web pages and applications, and the cornerstone of the Open Web Platform.
“Today we think nothing of watching video and audio natively in the browser, and nothing of running a browser on a phone,” said Tim Berners-Lee, W3C Director. “We expect to be able to share photos, shop, read the news, and look up information anywhere, on any device. Though they remain invisible to most users, HTML5 and the Open Web Platform are driving these growing user expectations.”
HTML5 brings to the Web video and audio tracks without needing plugins; programmatic access to a resolution-dependent bitmap canvas, which is useful for rendering graphs, game graphics, or other visual images on the fly; native support for scalable vector graphics (SVG) and math (MathML); annotations important for East Asian typography (Ruby); features to enable accessibility of rich applications; and much more.
The HTML5 test suite, which includes over 100,000 tests and continues to grow, is strengthening browser interoperability. Learn more about the Test the Web Forward community effort.
With today’s publication of the Recommendation, software implementers benefit from Royalty-Free licensing commitments from over sixty companies under W3C’s Patent Policy. Enabling implementers to use Web technology without payment of royalties is critical to making the Web a platform for innovation.

HTML5: ¿Qué es HTML5?

[kml_flashembed movie=”http://www.youtube.com/v/1hR7EtD6Bns” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver qué es HTML5.

Hoy en día todo el mundo conoce las WWW, la World Wide Web, la Web, el invento que más ha cambiado nuestras vidas en los últimos 15 años. La Web es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.

Un elemento esencial de la Web es HTML, el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.

HTML5 es la quinta y última versión, por ahora, del lenguaje de etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es sólo eso, es algo más.

HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web. El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994.

Desde la publicación de la primera página web en diciembre de 1990, el lenguaje HTML ha ido mejorando con nuevas versiones. En noviembre de 1995 se publicó HTML 2.0, en enero de 1997 HTML 3.2, en diciembre de 1997 apareció HTML 4, y en enero de 2000 se publicó XHTML 1.0, una reformulación de HTML 4 utilizando XML. Finalmente, a mediados de 2007, el World Wide Web Consortium comenzó a trabajar en HTML5, versión que está actualmente en desarrollo y que se espera que se termine en 2014.

Pero las páginas web no se desarrollan únicamente con el lenguaje de marcado HTML. También se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript.

El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico que permite crear sitios web interactivos.

Además del HTML dinámico existen otras tecnologías, como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON. Todo ello se conoce como AJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador.

Desde hace un par de años, a AJAX se le han unido una serie de nuevas tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen algunas alternativas que realizan la misma función. A todas ellas se las conoce como HTML5, aunque lo más correcto sería llamarlas “la familia de tecnologías HTML5”.

Veamos qué nos ofrece cada una de ellas.

HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis, sintaxis de HTML y sintaxis de XHTML. Como he dicho antes, se espera que en 2014 se publique la versión final, ya que lo que tenemos ahora mismo es un borrador. El lenguaje de marcado HTML5 define nuevas etiquetas y atributos que añaden una mayor capacidad semántica al lenguaje.

Una de las nuevas tecnologías de la familia HTML5 es el canvas, que tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo como esta que vemos en esta imagen.

Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos con un lenguaje similar a HTML.

Otra de las tecnologías de HTML5 es el API de geolocalización para JavaScript que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información, y siempre que el usuario lo permita.

La tecnología de caché permite indicar los recursos de una página web o de una aplicación web que se desea que se almacenen de forma local. De esta forma mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local, mientras que la tecnología de bases de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datos SQLLite. Con esta tecnología se pueden realizar aplicaciones como esta, donde el usuario puede crear notas persistentes que conservan la posición y la información, aunque se abandone la página web.

Por último, los “web workers” es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo.

Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día? Es difícil responder esta pregunta porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente, pero hay algunos sitios web que nos pueden ayudar.

Por ejemplo, el sitio web “When can I use”, ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas.

El sitio web “findmebyIP”, ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh. Este mismo sitio web también nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.

El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea mucho más sencilla.

Por último, si quieres aprender más cosas de HTML5 te recomiendo el sitio web “HTML5 Rocks”, desarrollado por Google. En él encontrarás numerosos ejemplos y tutoriales que te mostrarán las fantásticas posibilidades de HTML5.

Y con esto finaliza este videotutorial sobre las tecnologías que forman la familia HTML5.
Si necesitas más información o quieres contactar conmigo, en la páginas web http://desarrolloweb.dlsi.ua.es/ podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es.