GuilleSQL :: Microsoft SQL Server, SSIS, y más !!

Un vistazo a HTML5


Hace muchos años hubo una época en la que me dediqué bastante al desarrollo Web, utilizando principalmente HTML, CSS, y ASP, y como entorno de desarrollo, el TextPad ;-). Esa época quedó atrás y posteriormente en realizado algunas tareas de desarrollo Web de forma puntual. En estos días estoy aprovechando a darle un nuevo vistazo al mundo del desarrollo Web (con la perspectiva de explotarlo a tope desde SharePoint, claro ;-), motivo por que he querido aprovechar para dejar este breve Post resumen de lo he estado viendo (por ahora) de HTML5 y que intentaré ir actualizando.

HTML5 no es más que la siguiente evolución del HTML, un estándar que aún está en curso, pero que ya muchos navegadores han empezado a implementar. En cualquier caso, estamos en la misma situación de siempre, dependientes de la implementación de cada navegador.

Ahora, el código HTML debe preocuparse únicamente de la estructura del contenido de las páginas, y jamás de su apariencia. La presentación al usuario pasa a ser completamente una tarea de las hojas de estilo (CSS), mientras que el HTML se vuelve más semántico.

El DOCTYPE

Todas las páginas deben empezar con el DOCTYPE, ya que sin él, el navegador podría interpretar incorrectamente el contenido de la página, y en consecuencia, mostrarla de forma incorrecta al usuario. El DOCTYPE para HTML5 es el siguiente:

<!doctype html>

La falta del DOCTYPE puede provocar que los navegadores funcionen en un modo a prueba de errores (quirks mode), lo cual en IE8 significa que pueda intentar funcionar como un IE5.

Además, si en IE8 activamos la Vista de Compatibilidad, entonces empezará a funcionar en modo IE7 (sin los beneficios de CSS2.1). Esto también puede ocurrir si Microsoft incluye tu Sitio Web en su Lista de Vista de Compatibilidad. Podemos evitar este comportamiento incluyendo la siguiente línea en la cabecera, para forzar al Internet Explorer a utilizar su modo standard (es decir, el modo más alto en que pueda funcionar; ej: IE10 funcionará en modo IE10):

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Algunas web utilizan alguna variación de la anterior línea en su cabecera, por ejemplo, para mostrarse como en un IE9, independientemente de que la página web tenga o no el DOCTYPE:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

HTML5 y las versiones antiguas de Internet Explorer

Uno de los inconvenientes de utilizar hoy en día HTML5, es que las versiones antiguas de Internet Explorer no reconocen correctamente las nuevas etiquetas, por lo que tampoco reconocerán correctamente los estilos que apliquemos con CSS.

Es posible corregir este comportamiento utilizando JavaScript, para lo cual podemos simplemente añadir el siguiente trozo de código a nuestra cabecera (<head>).

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Este código sólo es visible para las versiones de Internet Explorer anteriores a IE9. También podemos descargar dicho fichero JavaScript para incluirlo dentro de nuestra Web. Para más detalles, incluyendo la descarga del código, visitar html5shim, HTML5 IE enabling script.

Siempre que sea posible, es deseable asegurarse de utilizar las versiones más recientes de Internet Explorer. Para aquellos casos en que no podamos tener dicha certeza ni queramos perder a dichos usuarios, poder aprovechar el JavaScript.

Téngase en cuenta que hoy en día IE8 es la versión de Internet Explorer más utilizada.

Las etiquetas <div> y <span>

<div>. Representa una división lógica o sección dentro de una página web, con el objetivo de agrupar varios elementos en bloque para formatearlos con CSS o manipularlos con JavaScript. No aporta ningún significado semántico, por lo que suele ser preferible utilizar otras etiquetas (ej: <header>, <footer>, <article>, <section>, etc.) cuando sea posible. Por defecto, los navegadores muestran una línea antes y después de un <div>, comportamiento que puede cambiarse utilizando CSS. Puede utilizarse con sus atributos class, lang y title.

<span>. Representa una agrupación de varios elementos en línea para formatearlos con CSS o manipularlos con JavaScript, permitiendo de este modo seleccionar parte del contenido de una etiqueta superior. No aporta ningún significado semántico.

Algunas etiquetas (tags) interesantes en HTML5

<address>. Debe contener información de contacto acerca del documento o de parte del documento, como links a los autores, páginas web, direcciones de email, etc. Por ejemplo, puede utilizarse en los pies (<footer>).

<header>. Representa la cabecera de una sección (<section>), artículo (<article>), o de una página web, pudiendo contener una tabla de contenido, un logo, encabezados (<h1> - <h6>), un formulario de búsqueda, elementos de navegación, etc. Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”header”>, algo que ahora queda obsoleto.

<footer>. Representa el pie de una sección (<section>), artículo (<article>), o de una página web, pudiendo contener información de Copyright, notas legales, elementos de navegación, información de contacto (<address>), etc. De este modo, una página puede contener varias secciones, cada una con su pie (<footer>) más un pie adicional para la propia página. Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”footer”>, algo que ahora queda obsoleto.

<section>. Representa un documento genérico, que usualmente tiene una estructura (encabezado, contenido, y pie). Salvo rara excepción, no debería utilizarse la etiqueta <section> si no hay un encabezado natural para ella. No se trata de un contenedor estrictamente por razones de estilo, ya que en ese caso utilizaríamos la etiqueta <div>. Tampoco debe utilizarse cuando las etiquetas <article>, <aside> o <nav> son más apropiadas.

<article>. Representa un componente de una página, como puede ser una artículo de una revista, una entrada de un Blog, una entrada de un Foro, o cualquier elemento independiente de contenido (ej: el contenido de una página Acerca De). En ocasiones es confundido con las etiquetas <section> y <div>, aunque la etiqueta <article> es una especialización de la etiqueta <section>. Puede tener sus encabezados (<header>, <h1> - <h6>, etc.), sus diferentes secciones (<section>), y su pié (<footer>). Por ejemplo, sería posible definir la entrada de un Blog como un elemento <article>, y en su interior de forma anidada cada comentario también podría definirse como elementos <article> dentro de una sección (<section>) específica para los comentarios.

<nav>. Debe contener un conjunto de enlaces de navegación (<a>) que represente un bloque principal de enlaces de navegación (ej: una tabla de contenidos, la miguitas, elementos de paginación previous/next, etc.). Puede utilizarse en un artículo (<article>), sección (<section>), en una cabecera (<header>), o incluso a nive de la página web, aunque no suele utilizarse en el pie (<footer>). Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”nav”>, que contenía una lista no-ordenada (<ul>) con los enlaces (<a>) como elementos de lista (<li>), algo que ahora queda obsoleto.

<aside>. Cuando es utilizado dentro de un artículo (<article>) su contenido debe estar específicamente relacionado con dicho artículo (ej: un glosario). Cuando es utilizado fuera de un artículo (<article>) su contenido debe estar relacionado con el sitio web o con la página web (ej: blogroll, grupos de navegación adicionales, e incluso publicidad).

<menu>.

<code>.

<figure>.

<cite>.

<time>.

<audio>.

<video>. 

Otras recomendaciones para la utilización de HTML5

Existen varias recomendaciones que debemos evaluar al realizar un desarrollo Web basado en HTML5.

  • No utilizar la etiqueta <font>. El formateo del texto debe realizarse utilizando estilos, evitando utilizar HTML para estas labores de presentación.
  • No utilizar las etiquetas <b> e <i>. En su lugar utilizar las etiquetas <strong> y <em>.
  • No utilizar la etiqueta <table> para ajustar o distribuir los contenidos en la página. La etiqueta <table> sólo debe utilizarse para contener información tabular, como un grid de resultados.
  • No utilizar los atributos relacionados con la presentación, ni en la etiqueta <body>, ni en ninguna otra etiqueta. En su lugar deben utilizarse estilos CSS, para controlar todos estos detalles (incluso para las etiquetas <body> y <html>): bordes, colores, alineación, márgenes, imágenes de fondo, etc.
  • No abusar de la etiqueta <br>. Considerar la utilización de estilos CSS para controlar los márgenes en los diferentes elementos (ej: <p>, <h1> - <h6>, etc.).
  • Utilizar encabezados <h1> - <h6> para indicar la importancia relativa del texto. Deben utilizarse de forma consecutiva, es decir, a un <h1> no debe seguirle un <h4>.
  • No abusar de la utilización de la etiqueta <div>. Por ejemplo, una barra de navegación puede representarse con una lista (<ul>). Además, en HTML5 están disponibles nuevas etiquetas como <section>, <header>, <footer> o <article>, que pueden utilizarse en lugar de <div>, y además aportan un valor semántico.
  • Utilizar las etiquetas <dl> (definition list), <dt> (definition term), y <dd> (definition description) siempre que sea necesario. En lugar de incluir como simple texto las listas de definiciones de términos, es recomendable utilizar las etiquetas existentes para ello (<dl>, <dt> y <dd>). Téngase en cuenta, que para un término <dt> (ej: Autor) pueden existir varios elementos de definición <dd> (ej: varios autores).

Una última recomendación bastante importante es validar el código HTML y CSS que estemos creando. Hay varias formas de realizar esto, de las cuales, quizás la más sencilla sea utilizar los validadores HTML y CSS disponibles OnLine que ofrece el W3C:

Además, deberemos probar nuestra Página Web en diferentes Navegadores, para garantizar que se muestra bien en todos ellos (ej: Diferentes versiones de IE, FireFox, Google Chrome, etc.).

Y si lo deseamos, recordar que podemos utilizar Minificadores de Código (HTML, CSS, JavaScript, y demás) para conseguir un código más ligero, minimizando el tiempo de descarga.

Despedida y Cierre

Hasta aquí llega el presente artículo, que espero poder actualizar algo más con el paso del tiempo. Por último, antes de acabar, quería añadir algunos enlaces de interés:

Poco más por hoy. Como siempre, confío que la lectura resulte de interés.

 


[Fecha del Artículo (UTC): 11/05/2013]
[Autor: GuilleSQL]



Escribir un Comentario

Para poder escribir un comentario, debe Iniciar Sesión con un usuario.

Si no dispone de un usuario, puede Registrarse y hacerse miembro.

Si dispone de un usuario, pero no recuerda sus credenciales de acceso, puede Restablecer su Contraseña.

Miembros de
Miembros de GITCA (Global IT Community Association)

Menu de Usuario
  Iniciar Sesión
  Registrarse
  Restablecer Contraseña
  Ventajas de Registrarse

Acerca de
  Contigo desde Oct 2007
  771 usuarios registrados
  86146 pageloads/mes
  Ranking Alexa 498160

Social Networks
Sigue a Portal GuilleSQL en Linkedin !!
Sigue a Portal GuilleSQL en Twitter !!



Archivo

Enero de 2017 (3)
Junio de 2016 (1)
Mayo de 2016 (2)
Abril de 2016 (2)
Septiembre de 2015 (2)
Agosto de 2015 (2)
Junio de 2015 (10)
Mayo de 2015 (4)
Abril de 2015 (8)
Marzo de 2015 (11)
Octubre de 2014 (3)
Septiembre de 2014 (7)
Agosto de 2014 (5)
Julio de 2014 (2)
Mayo de 2014 (4)
Abril de 2014 (4)
Marzo de 2014 (4)
Febrero de 2014 (1)
Enero de 2014 (5)
Diciembre de 2013 (8)
Noviembre de 2013 (2)
Octubre de 2013 (7)
Septiembre de 2013 (6)
Agosto de 2013 (1)
Julio de 2013 (6)
Junio de 2013 (11)
Mayo de 2013 (7)
Abril de 2013 (6)
Febrero de 2013 (5)
Enero de 2013 (7)
Diciembre de 2012 (12)
Noviembre de 2012 (13)
Octubre de 2012 (5)
Septiembre de 2012 (3)
Agosto de 2012 (6)
Julio de 2012 (4)
Junio de 2012 (1)
Mayo de 2012 (2)
Abril de 2012 (7)
Marzo de 2012 (16)
Febrero de 2012 (9)
Enero de 2012 (5)
Diciembre de 2011 (10)
Noviembre de 2011 (10)
Octubre de 2011 (4)
Septiembre de 2011 (5)
Agosto de 2011 (2)
Julio de 2011 (2)
Junio de 2011 (4)
Mayo de 2011 (2)
Abril de 2011 (6)
Marzo de 2011 (4)
Febrero de 2011 (10)
Enero de 2011 (5)
Diciembre de 2010 (6)
Noviembre de 2010 (4)
Octubre de 2010 (8)
Septiembre de 2010 (4)
Agosto de 2010 (1)
Julio de 2010 (3)
Mayo de 2010 (5)
Abril de 2010 (6)
Marzo de 2010 (8)
Febrero de 2010 (3)
Enero de 2010 (1)
Diciembre de 2009 (9)
Noviembre de 2009 (14)
Octubre de 2009 (2)
Septiembre de 2009 (8)
Agosto de 2009 (2)
Julio de 2009 (10)
Junio de 2009 (9)
Mayo de 2009 (10)
Abril de 2009 (9)
Marzo de 2009 (3)
Febrero de 2009 (2)
Enero de 2009 (3)
Noviembre de 2008 (2)
Octubre de 2008 (2)
Septiembre de 2008 (2)
Agosto de 2008 (5)
Julio de 2008 (5)
Junio de 2008 (1)
Mayo de 2008 (3)
Abril de 2008 (2)
Marzo de 2008 (2)
Febrero de 2008 (2)
Enero de 2008 (5)
Noviembre de 2007 (2)
Octubre de 2007 (2)






Esta información se proporciona "como está" sin garantías de ninguna clase, y no otorga ningún derecho.
This information is provided "AS IS" with no warranties, and confers no rights.

Copyright © 2007 GuilleSQL, todos los derechos reservados.
GuilleSQL.com y GuilleSQL.net son también parte de Portal GuilleSQL.

Visitas recibidas (Page Loads) en GuilleSQL (fuente: StatCounter):

screen resolution stats
Visitas