Rediseñando NNL Newsletter (I)

Eliminando lo innecesario

En primer lugar eliminé los estilos incrustados en el mismo documento, la ventaja que nos otorga el uso de hojas de estilos en cascada o CSS es separar la estructura que describe el contenido del documento de su presentación. Por lo cual, controlaremos la presentación de los 25 boletines (y posteriores) a través de un solo documento CSS. A continuación se muestra el bloque eliminado:

<style type=”text/css”>
<!–
.style1 {
font-family: “Courier New”, Courier, mono;
font-size: 12px;
}
.style2 {color: #000000}
.style11 {font-size: 1px}
.style12 {color: #FFFFFF}
–>
</style>

Posteriormente procedi a eliminar el uso excesivo de las etiquetas <br>, de igual manera se eliminaron el uso de las clases: style1, style2, style11 y style12. Esto es realmente sencillo hacerlo, simplemente buscamos en nuestro editor favorito (en mi caso: Bluefish) la opción de Reemplazo (Edición » Reemplazar), introducimos los parámetros de búsqueda y reemplazo y el editor hará el trabajo por nosotros.

Siguiendo con el proceso de eliminación nos encontramos con el logo de NNL Newsletter, el cual tiene ciertos inconvenientes:

<p>
<img src="../logo.png" width="134" height="130">
</p>

El primer inconveniente es el semántico, en realidad un Agente de Usuario no sabrá definir la importancia de esta parte del código, simplemente lo tratará como un párrafo más, adicionalmente, se comete el error de emplear una imagen que el Agente de Usuario (P.ej. Un buscador) no sabría interpretar, ya que no se presenta siquiera un texto alternativo, el uso del atributo alt en las imágenes es vital. Ahora bien, lo que en realidad le daría la importancia que se merece esta parte del código sería usar un encabezado que le corresponda.

<h1><span></span>NNL Newsletter</h1>

¡Ahora sí!, hemos conseguido darle un alto nivel de importancia al nombre del newsletter, ahora bien, muchos se preguntarán, ¿Por qué de manera tan drástica ha eliminado la imagen?, ¿Acaso para lograr documentos realmente semánticos debemos deshacernos de las imágenes?, desde mi perspectiva el uso de imágenes con fines superfluos o únicamente con fines presentacionales deben dejarse del lado de las hojas de estilo en cascada, simplemente se ará (posteriormente) un reemplazo del encabezado por la imagen vía CSS (por eso de la etiqueta span vacía en el encabezado h1), este reemplazo vía CSS no disminuirá el valor semántico de nuestro documento.

Páginas: 1 2 3 4 5

2 comentarios en “Rediseñando NNL Newsletter (I)”

  1. Ganso PR: 2dijo:

    Muy muy didáctico el artículo. A ver cuándo llega la siguiente parte :D

  2. PIN PR: 4dijo:

    Pedazo artículo, Milton. Buenísimo de verdad. Enhorabuena. Esperando la siguiente entrega para seguir aprendiendo a hacer las cosas bien “de verdad”.

Deja tu comentario

XHTML: Puedes usar las etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>