maquetacion

¿Qué es html semántico? ¿No es todo el html igual? Cuando hablamos de html semántico no nos referimos a ninguna nueva tecnología, ni siquiera aportamos ninguna regla nueva al html. Simplemente nos referimos a una página web en la que la estructura html está bien hecha, aprovechando la semántica que brinda el html, y por tanto dota por si sola a los contenidos de significado.

En las especificaciones html del W3C se nos indica una colección de etiquetas que podemos usar a la hora de generar nuestra web. Pero estas etiquetas historicamente se han usado más por la apariencia que adquirían en la pantalla de los navegadores que por su significado real. Así, la web vivió muchos años con maquetas llenas de tablas y atributos que permitían a los diseñadores y maquetadores colocar cada elemento donde les apetecía.

Más adelante, cuando el uso del css 2.1 empezó a hacerse común estas tablas pasaron a ser sustituidas por divs, un elementeo sin ningún significado semántico que solo debe usarse como bloque agrupador de otros.

El html semántico se hace posible en un tiempo en el que la información sobre el propio html y el css en los distintos navegadores ha llegado a ser tan completa que nos permite, con algo de experiencia, empezar a preocuparnos por que nuestro código use realmente las etiquetas html que aportan al contenido el significado real que tienen. En una página con html semántico las tablas solo tienen sentido para mostrar datos tabulados, los divs solo se usan como bloques contenedores como pueden ser la cabecera o pie de la página, la barra lateral, etc... El resto de elementos deben incluirse con las etiquetas html que los representan: titulares, parrafos, listas, citas, estilos de letra, etc...

Seguidamente una mini guía muy básica de como representar con etiquetas html distintos elementos en una web.

• Bloques bien diferenciados en la página  (Cabecera, barra lateral, etc... ) : Único caso en el que contendremos los elementos dentro de una etiqueta <div/>.
• Titulares, titulos de sección, subtitulos : Usaremos las etiquetas <hX/> que nos permiten marcar  titulos. El titular principal de la página será la etiqueta <h1/>, los titulos de secciones los <h2/>, distintos titulos de partes del contenido los <h3/>, subtutitulos <h4/>, etc... y así hasta el nivel de títulos que necesitemos.
• Menús, Pestañas, listas de links, footers de links, etc. : Usaremos las etiquetas de listado no numerado <ul/> para contener el elemento y luego para cada link usaremos <li><a/><li> marcando que cada link es en realidad un elemento de listado que solo contiene un link.
• Contenido : Para redactar el contenido debemos usar etiquetas enfunción de lo escrito en el contenido. Para parrafos normales, usaremos <p/>para cada parrafo. Para listados ordenados <ol/>, sin orden definido <ul/>. Aparte tenemos la posibilidad de usar otras etiquetas para contenidos especiales: <pre/>, <blockquote/>, etc.

[...]

¿Te interesa? Sigue leyendo...

8 Comentarios, leelos

EL W3C (World Wide Web Consortium) indica entre sus reglas que los ficheros en formato HTML, XML y derivados deben incluir en su comienzo una etiqueta especial que defina la estructura de su contenido. Esta etiqueta es la famosa doctype y viene a marcar las reglas con las que está creada una página concreta.

¿Reglas distintas? ¿No son todas las páginas iguales por dentro? No, aunque lentamente el código HTML ha ido evolucionando con el tiempo y aunque los navegadores hacen lo que pueden por representar siempre las páginas lo mejor posible si les ayudamos indicándoles con que versión estamos trabajando nuestras posibilidades de conseguir una correcta visualización en todos los navegadores aumentarán muchísimo.

Actualmente existen una gran cantidad de doctypes pero debemos centrarnos en aquellos que podemos querer usar o que podemos encontarnos en la web actual. Para cada doctype existen 3 variantes posibles:

• Strict : Cuando se van a seguir las especificaciones de ese doctype al 100%
• Transitional : Cuando se permiten ciertos "errores" comunmente aceptados en versiones anteriores de esa especificacion.
• Frameset : Cuando se trata de una declaración de Frames (esto no deberíamos usarlo nunca).

Etiquetas Doctype Html 4.01

Doctype Strict

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

Doctype Transitional

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Doctype Frameset

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

Etiquetas Doctype XHTML 1.0

Doctype Strict

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype Transitional

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype Frameset

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Una información que muchos conocen pero que siempre viene bien recordar y organizar. ¿Como diferenciar el css entre navegadores?

La opción más aconsejada es empezar a maquetar siempre en un navegador que cumpla suficientemente bien los estándares y no hacerle un css demasiado complejo. A partir de ahí los descuadres en la maqueta, que deberían producirse solo en internet explorer,  se pueden arreglar con otros archivos css que podemos cargar como condicionales de explorer:

1
2

<link   rel="stylesheet" href="css/cssNormal.css" type="text/css" />
<!--[if IE]><link   rel="stylesheet" href="css/cssParaExplorer.css" type="text/css" /><![endif]-->

Con este tipo de códigos el css solo será cargado por navegadores explorer.

Una segunda opción también válida es la de utilizar formas válidas de definir los elementos del css pero que solo entienden algunos navegadores. De esta forma podemos añadir pequeños arreglos en un mismo archivo css sin que por ello nuestro código deje de validar.

1
2
3
4

#miDiv { código todos los navegadores }
* html #miDiv { solo lo entenderá IE6 }
*:first-child+html #miDiv{ solo lo entenderá IE7} 
html>/**/body #miDiv { solo lo entenderá FF }

Por último la forma más rápida de corregir un pequeño defecto es usando carácteres delante de propiedades de una misma definición css.

1
2
3
4
5

#miDiv { 
  margin:20px; /* para todos los navegadores */
  #margin:25px; /* para todos los internet explorer */
  -margin:30px;  /* solo para internet explorer 6 */
}

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Actualmente estoy intentando aprender a desarrollar para "Canvas", una nueva etiqueta html perteneciente a html 5.

Canvas viene a brindarnos posibilidades de dibujo mediante código javaScript. Básicamente se trata de un bloque dentro del HTML en el que podemos usar distintas funciones para dibujar poligonos e insertar y tratar imágenes. Aprovechando todas sus funciones será capaz de realizar acciones casi tan complejas y dinámicas como con Flash. Sin embargo actualmente, ya que estamos obligados a que todo lo que hacemos se vea bien en explorer, debemos reducir nuestro uso de canvas al 2D, incluyendo tan solo algunas funciones para dibujar en nuestro bloque lineas, circulos, polígonos e imágenes.

Para poder empezar a tocar canvas y hacer nuestras pruebas necesitamos básicamente la información contenida en estos 2 links:

• Tutorial de Canvas de Mozilla (en inglés) : Un fantástico tutorial que de forma simple nos presenta las funciones básicas de canvas.
• exCavas : Código javaScript para hacer que canvas funcione bien incluso en explorer 6.

Adelante!

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo