comparte el articulo 

Consejos sobre HTML para principiantes, Parte 2

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: Continuamos con la serie de consejos para aquellas personas que van iniciando su carrera, presentamos como manejar las hojas de estilo y scripts en nuestros desarrollos

Continuamos con esta serie de consejos que buscan ayudar a diseñadores web principiantes, recalcando costumbres de trabajo adecuadas y recomendando buenas prácticas para llevar a cabo una programación web correcta con HTML.

En caso de que no hayas leído la primera parte de esta serie te recomendamos que la consultes antes de empezar a leer este artículo.

No uses estilos en las etiquetas HTML

Trata siempre de evitar utilizar la declaración de estilos dentro de las etiquetas HTML. Hasta hace relativamente poco el incluir atributos relacionados al diseño y estilo de los elementos era una práctica común en el desarrollo de aplicaciones para la Web, por ello no es de extrañarse encontrarnos con tutoriales que aún manejan este tipo de declaraciones en el código.

Con la introducción y expansión de CSS esta costumbre ha ido quedando obsoleta. La definición de los estilos, colores y el diseño estético de un sitio quedaron como función exclusiva de las hojas de estilo, por lo que los atributos que fueron definidos en los inicios de HTML para llevar a cabo estas tareas han dejado de ser utilizados.

En el pasado era muy común encontrar sentencias como la siguiente:


<body bgcolor="#000000"></body>

La cual se utilizaba para definir el color de fondo de nuestra página, en la actualidad para realizar esto se debe definir, en una hoja de estilo, un bloque de código como el siguiente:


body{

background: #000000;

}

De esta manera nos evitamos utilizar el atributo “bgcolor” para definir un aspecto correspondiente únicamente al diseño.

Existe otra manera de definir estilos la cual también debemos evitar, aunque sea en menor medida, esta es la definición de estilos dentro de las etiquetas HTML mediante el atributo “style”. Es muy común que por cuestiones de comodidad o simplemente por no conocer el correcto uso y estandarización del código, definamos una sentencia de estilo de la siguiente forma:


<body style="background: #000000;"></body>

Como se puede apreciar, en esta ocasión sí utilizamos lenguaje CSS para definir el color del fondo de nuestro sitio, sin embargo seguimos manejando la definición dentro de una etiqueta lo cual puede causar conflicto con el código que establecimos por separado en la hoja de estilo. Es mejor mantener tus asuntos en orden y simplemente saber crear un entorno de trabajo más adecuado.

Maneja el código CSS en archivos separados del HTML

Desde un punto de vista técnico tú puedes colocar un bloque CSS en cualquier parte del código HTML que desees, funcionará de manera correcta y similar a cualquiera de las otras opciones que puedes eligir. Al final no habrá repercusiones en el resultado ya que el código será el mismo sea donde sea que se coloque, ejecutará las mismas acciones e instrucciones que tu diste por lo que cumplirá su función técnica por igual, sin embargo si habrá variación en el tiempo de respuesta.

Se recomienda manejar el código de estilo es un archivo por separado para mantener una mejor organización del sitio, comúnmente el manejar archivos únicos y exclusivos para las hojas de estilo hace que se facilite su edición y administración, además de que muchos editores de código pueden hacer una mejor depuración.

Entre los principales beneficios de manejar un archivo externo para depositar nuestro código CSS, se encuentra el hecho de que este archivo se puede utilizar para varios sitios y páginas de manera simultánea, sin necesidad de transcribir el código de un lado a otro, bastando con su adherencia entre las etiquetas “head” para su correcto funcionamiento.

De igual manera, el manejar un archivo CSS representa un ahorro tiempo al momento de la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo el sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de respuesta y una carga más rápida.

Es importante recalcar el hecho de que las hojas deben incluirse dentro de las etiquetas “head”, de la siguiente manera:


<head>

<title>Mi sitio de prueba</title>

<link rel="stylesheet" type="text/css" href="mi_estilo.css" />

</head>

Ya que esto también influye para mejorar el tiempo de respuesta, o por lo menos eso nos hace creer. El hecho de llamar a los estilos en la etiqueta “head” hace que la página se cargue progresivamente, lo que crea la impresión de que el sitio se carga más rápido.

Coloca los scripts al final del HTML

Antes se acostumbraba cargar los archivos relacionado a JavaScript en el mismo espacio donde se incluían las hojas de estilo, es decir entre las etiquetas “head” del código, esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debía cargar primero todos los scripts con sus funciones antes de empezar a desplegar los elementos del sitio.

Es por esta razón que en la actualidad se recomienda agregar esta clase de archivos al final de nuestro código HTML, con esto lograremos que la página se cargue más rápido y el usuario obtenga una respuesta casi inmediata.


<body>

<p>Este es mi sitio de prueba</p>

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

</body>

Como puedes apreciar hasta ahora hemos mencionado el uso de archivos externos para crear los scripts, si deseas incluirlos en el mismo código HTML, también es válido, pero eso sí, no lo hagas dentro de una etiqueta HTML, no cometas errores como este:


<img id="miImg" src="mi_imagen.png" onclick="alert('hola usuario');"/>

Trata de aplicar el uso de funciones y eventos por separado para llamar al script, o mejor aún haz uso de frameworks como jQuery para crear códigos claros y bien estructurados como este:


jQuery('#miImg').click(function() {

  alert('hola usuario');

});

Donde mediante un evento “click” mandamos llamar la misma funcionalidad que en la sentencia pasada.

Publicado el 16/06/2011, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras