comparte el articulo 

10 consejos útiles para realizar un mejor código

Actualizado el 04/10/2013 < > 0 Comentarios

Resumen: Consejos sobre como mejorar los códigos CSS y HTML.

Cuando alguien se inicia en la utilización de CSS, es frecuente que se comentan algunos errores que, si bien a veces no generan problemas en la visualización de la página web, y hasta en algunos casos se trata de códigos válidos, tienen otros tipos de inconvenientes, como veremos más adelante.

Simplificar

Cuando se trata de diseñar una página web, debemos tener en cuenta exclusivamente al usuario de la misma. Una página web debería tener solo aquello que es necesario. Para conseguir que un diseño se vea de determinada forma, muchas veces se recurre en forma abusiva a las imágenes, animaciones, sonidos, etc., sin tener en cuenta que esto hace que el peso de la página aumente sensiblemente y puede generar demoras en la carga de la página.

También puede verse en muchas ocasiones, que los diseñadores terminan generando códigos extremadamente confusos y largos, para diseños que pueden conseguirse en forma mucho más sencilla. Un elemento clave para la generación de un código ordenado es la planificación del diseño. Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos contenedores principales hacia los menores.

Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben ser determinados mediante el uso de CSS son los contenedores, como “body” y la capa principal. A partir de allí, se debe generar las capas de cada sección de la estructura de la página (cabecera, columnas, pie) para luego comenzar con los detalles necesarios dentro de cada una de ellas.

Tratar de no utilizar “hacks”

Los hacks son trucos mediante los cuales se pueden sortear algunos de los problemas generados por las diferencias existentes en la interpretación del código por parte de los navegadores. En la mayoría de los casos no son necesarios. Una de las soluciones más  conocidas es la utilización de archivos CSS destinados a ser interpretados exclusivamente por determinados navegadores o versiones de navegadores.

Prestar atención a la utilización de márgenes y rellenos

Los márgenes (margin) y los rellenos (padding) son las propiedades que generan más inconvenientes a los diseñadores más nuevos, debido en parte a las diferencias notorias que existen en la interpretación de las mismas por parte de los navegadores. Es por ello que siempre es absolutamente necesario que se tengan en cuenta, ya que en muchas ocasiones son el origen de diferentes descuadres y errores en el posicionamiento de diferentes elementos.

Evitar el abuso de los posicionamientos absolutos

Una tendencia natural en los diseñadores recién iniciados, es al abuso de los elementos posicionados en forma absoluta (position: absolute), debido a que con ello se elimina toda posibilidad de que se produzcan “comportamientos extraños” de los elementos. La maquetación de páginas web requiere una comprensión completa del comportamiento de los diferentes elementos y de cómo actúa cada una de las propiedades sobre ellos.

Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto, tienen entre otros inconvenientes, la rigidez e inflexibilidad. Esto dificulta notoriamente la introducción de elementos dinámicos, y es prácticamente imposible pensar en una página con contenidos dinámicos cuyo diseño visual esté elaborado de esta forma, ya que la extensión de los contenidos será variable y originará diferentes errores, como desbordamientos de capas y superposición de contenidos.

Evitar el abuso de los ‘div’

Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante la utilización de capas. No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos casos existen los elementos semánticamente correctos dentro de HTML. Muchos div’s pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos, etc.

En parte este tipo de abusos se debe a que se desconoce las posibilidades que muchos de estos elementos, y que es posible que adquieran diferentes formatos visuales y pueden adaptarse prácticamente a cualquier diseño.

Evitar el abuso de clases e identificadores

Este tipo de errores es frecuente inclusive en algunos diseñadores con experiencia, y en general es debido a la carencia en el uso de una de las propiedades fundamentales del CSS, que es la herencia.

Para entender mejor de lo que estamos hablando, veremos los siguientes ejemplos. En el primer ejemplo, veremos la forma incorrecta de hacerlo, mientras que el segundo se trata de la forma correcta.

Primer ejemplo:

<ul>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
</ul>
li.lista  {
  list-style: square;
  font: bold 13px arial, helvetica, sans-serif;
  }

Segundo ejemplo:

<ul id="lista">
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
</ul>
ul.lista li {
  list-style: square;
  font: bold 13px arial, helvetica, sans-serif;
  }

Generar código válido y utilizar el validador

Dado que este tema se encuentra tratado en forma extensa en otro artículo, simplemente agregaremos un enlace al mismo para que vean cual es la importancia de generar códigos válidos.

Importancia de validar los códigos

Además, la utilización del validador hace que se detecten algunos errores durante el proceso de trabajo, por lo que en muchas ocasiones puede resultar útil también en la etapa del desarrollo y no exclusivamente al finalizar el trabajo.

Racionalización del código

Algunos de los consejos que ya hemos dado, hace que se generen códigos más racionales, y por tanto, más sencillos de entender. La utilización correcta de los diferentes elementos HTML, la eliminación de elementos innecesarios y la simplificación, hace que los códigos generados sean más limpios, sencillos y racionales, lo que tiene como consecuencia una mayor sencillez a la hora de realizar correcciones y modificaciones, además de ser por lo general, más cortos y por tanto, generan archivos más pequeños y de carga más rápida.

Diseño flexible

En los últimos años se ha producido un incremento notable en el tamaño de los monitores de los usuarios, además de aparecer monitores con diferentes proporciones. También se ha producido un incremento importante en el acceso a internet con otros tipos de dispositivos diferentes a los clásicos ordenadores.

Todo esto hace necesario que los diseños sean cada vez más flexibles, y que puedan visualizarse en forma correcta independientemente del dispositivo que se utilice para acceder a las páginas web o las dimensiones del monitor.

Comprobaciones en diferentes navegadores

Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna forma de comprobar la visualización de las páginas que se están diseñando en ellos. En muchos casos puede decirse que con hacer la comprobación en alguno de ellos es suficiente para saber que en todos se va a ver bien, como puede ser el caso de los navegadores (generalmente solo en las últimas versiones) Mozilla-Firefox, Google Chrome, Opera y Safari.

No es el caso de Internet Explorer, que es el origen de la mayor parte de este tipo de dificultades, por lo que siempre es conveniente hacer comprobaciones en él luego de diseñada la página y en todas las versiones, ya que existen diferencias notables entre ellas en la forma en que interpretan el códigos CSS.

Si no es posible tener todos los navegadores instalados, o al menos algunos de ellos, es posible recurrir a algunas herramientas online o utilizar algunas herramientas que poseen los navegadores para emular a otros. También existen algunas herramientas instalables que permiten visualizar las páginas web como si se tratara de diferentes navegadores.

Publicado el 22/12/2010, última actualización 04/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras