Alfredo Juarez

“Divide et vinces”: Divide y Vencerás
Julio Cesar

Muchos diseñadores web están acostumbrados a tener las etiquetas HTML, junto con las reglas CSS y las funciones JavaScript. Para los que se pregunten ¿Y eso que tiene de malo?  Este método no es de lo mas eficiente, ya que tienes una ensalada de lenguajes, esto hace que a la hora de querer hacer una revisión te pierdas entre tanto jeroglífico; por otro lado si tienes todo en un solo archivo la carga de la página se pone algo lenta ya que para el navegador es mas pesado cargar un archivo de muchos Bytes.
Hace tiempo hable sobre los Patrones de diseño, pero olvide mencionar que también existen los Anti-Patrones los cuales describen las malas conductas que no debe de tomar nunca un desarrollador, a continuación les pongo la descripción del antipatron que les estoy mencionando.
Código espagueti (spaghetti code): Construir sistemas cuya estructura es dificilmente comprensible, especialmente debido a la escasa utilización de estructuras de programación.

Mantener todo separado

Es sabido que las páginas Web se dividen 3 partes fundamentales:

• Contenido: Define el contenido del sitio.
• Presentación: Define el aspecto visual del sitio.
• Comportamiento: Define las acciones del sitio.

Este método es llamado “Separación de preocupaciones”.

Entender e implementar éste método lleva tiempo y se necesita un poco de disciplina, pero una vez que hallan comprendido los beneficios de mantener todo separado tratarán de siempre hacerlo de esta manera.

Tres Capas

Mantener diferentes tipos de códigos lo mas separado posible es una buena práctica en cualquier tipo de programación. Facilita el re-uso de código, reduce notablemente la duplicidad de código y por último hace que la búsqueda y corrección de problemas sea mas fácil en un futuro.

Cuando esta practica es usada en la Web te permite conocer las diferentes maneras en las que los usuarios acceden a tu contenido, ya sea directamente, o vÃía algún lector de Feeds (Si ofreces RSS o algún otro formato parecido).

La clave para tener al mayor numero de visitantes es pensar en la Web como Tres capas.

A la hora de construir un sitio, debes de tomar en cuenta estas tres capas:
1. Empezamos produciendo el contenido en formato HTML. Esta es la base de todo.
2. Después agregamos un poco de CSS para darle un aspecto visual mas atractivo.
3. Finalmente, podemos agregarle JavaScript, PHP, o cualquier otro lenguaje para darle dinamismo al Sitio.

Si mantenemos el código HTML, CSS y JavaScript separados, veremos que nuestro sitio será legible para tantos navegadores capaces de usar CSS y JavaScript o para los que no tienen estas características.

HTML para contenido

Todo lo necesario para leer el contenido de una pagina Web radica en el HTML. Algo que se debe de tomar en cuenta siempre es el principio K.I.S.S (Keep It Simple, Stupid). “Mantenlo simple, estupido“ por sus siglas en inglés.
El mezclar aspectos presentacionales con contenido y/o aspectos de comportamiento son detalles que traen problemas futuros en el desarrollo del Sitio.

¿HTML Semántico o No?

El usar etiquetas HTML para aspectos visuales se le denomina HTML no-semántico, es decir, el uso de etiquetas

<b>, <i>, <u>, <font>, etc..
<p><a xhref=”Desc.html”><font color=”red”>20% de descuento</font></a> todo el mes</p>

Esto puede tomar forma usando atributos CSS:

<p> <a zhref="Desc.html" class="red">20% de descuento</a> todo el mes</p>

Si piensas que esta forma está bien, este artículo te ayudará a tomar el camino del bien. Si en un futuro decides que quieres el link Amarillo, tendrías que cambiar el CSS, y cambiar la referencia a la clase, o dejar la referencia como “red”, cuando en realidad es amarillo.

Mas que mostrar información presentacional en tu código HTML, deberías enfocarte a qué es lo que realmente quieres, por ejemplo, en nuestro caso lo que deseamos es enfatizar el 20% de descuento, entonces, ¿Por qué no usar la etiqueta < em > < / em >? Que precisamente es para eso.

<p><em><a href="Desc.html">20% de descuento</a></em> todo el mes</p>

¿El link es una advertencia?, entonces usemos mejor una clase CSS que referencie a la llamada de advertencia.

<p> <a href="Desc.html" class="advert">20% de descuento</a> todo el mes</p><

Esta sería la mejor forma de usar HTML semántico, es decir, usar solamente las etiquetas para marcar contenido, no para especificar el aspecto visual del mismo.

Algunos diseñadores Web caen en el error de que las etiquetas < h1 > son presentacionales, y tratan de evitarlas usando HTML:

<p class="titulo"> Desarrollo Web en Tres Capas </p>

El hecho de que una porción de texto sea un titular es parte del contenido, viéndose reflejado en en el HTML, esta etiqueta es correcta:

<h1>Desarrollo Web en Tres Capas</h1>

Esta forma de usar el HTML, de manera que solo se utilicen etiquetas para el contenido es llamada por los estándares Web HTML semántico.

Utilizar el marcado semántico permite que tu código sean documentos totalmente legibles, personas que por cualquier razón, no pueden leer el sitio de manera normal, el HTML sería totalmente comprensible por las personas, ya que estás usando meramente etiquetas que describen los significados del contenido.

Lo mejor de todo, sin embargo, es que el marcado semántico te permite aplicar nuevos estilos (presentaciÃón) o interactividad (comportamiento) sin tener que hacer muchos, o en algunos casos ningún cambio al código HTML.

CSS para Presentación

Obviamente los aspectos relacionados con la forma visual del contenido radica en las reglas CSS usadas para el Sitio.

Con todo el trabajo hecho, manteniendo el código HTML con marcado semántico, la tarea de darle vida al contenido, se convierte en algo mas sencillo, aplicando estilos CSS.

Como probablemente sabrás los estilos CSS, pueden ser aplicados de 3 formas distintas:

• Estilos en linea
• Estilos Embebidos
• Estilos Externos

Los estilos externos son realmente el camino a seguir a la hora de diseñar una Pagina Web, debido a que te permite compartir esos estilos a múltiples documentos, reduciendo la duplicidad de código, y la cantidad de descarga de código necesario por el navegador, y por último a la hora de querer cambiar el aspecto gráfico del Sitio, no necesitarás meter las manos al código HTML.

JavaScript para comportamientos

Al igual que CSS, es posible agregar JavaScript de diferentes formas, pero este documento pretende utilizar la forma externa de hacerlo.

<script type="text/javascript" src="script.js"></script><

Escribir JavaScript que aumente la usabilidad sin estorbar al Sitio, sin la necesidad de bloquear aquellos usuarios que tengan deshabilitado el JavaScript en sus navegadores, y sin interferir en otros Scripts que deban ser aplicados a la página, es llamado JavaScript no obstrusivo.

Artí­culo original | SitePoint Simple Javascript
Analizado, Sintetizado y traducido por Alfredo Juárez.
Se trata de un pequeño resumen del primer capitulo de este libro, la verdad es que es totalmente recomendable si les interesa aprender JavaScript para añadirles dinamismo a los desarrollos Webs.