Optimizar XHTML

Seis cuestiones a tener en cuenta para optimizar nuestro código XHTML.

1. Usar Strict Doctype

Con la versión estricta (no la transicional) se hace posible una separación completa de la estructura, presentación y comportamiento del sitio web.

2. Mejor con UTF

Ya se ha hablado mucho sobre los beneficios de usar UTF así que simplemente hago referencia a un buen artículo: ¡UTF-8 vale la pena!.

Intentar llevar UTF-8 a todas las capas de la arquitectura de una aplicación web (Web, Apache, MySQL).

Entidad HTML para carácter &

Con UTF-8 podemos (entre otras cosas) evitar el uso de entidades HTML para acentos y otros caracteres especiales de un idioma en concreto. No obstante existe una excepción, es conveniente no usar de forma literal el carácter & y en este caso si es recomendable usar su entidad HTML:

&

3. No incrustar CSS y JavaScript en el XHTML

Para el CSS

No recomendado:

	<style type="text/css">
		body { color: #666666; }
	</style>
</head>
<p style="font-weight:700; color: red;">Importante!</p>

Recomendado:

	<link rel="stylesheet" href="http://aurea.es/style.css" type="text/css" media="screen" />
</head>

Preferiblemente vinculamos todo el CSS por medio de un fichero externo.

Cuidado también con las propiedades CSS particulares.

Para el JavaScript

No recomendado:

	<script type="application/javascript">
		document.getElementById('text').focus();
	</script>
</head>

Recomendado:

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

Nuevamente es preferible vincular también el JavaScript a través de un fichero externo.

Para eventos JavaScript

No recomendado:

<input id="name" type="text" onmouseover="this.focus();" />

Recomendado (ejemplo en mootools):

$('name').addEvent('mouseover', function(event) { this.focus(); }); 

Añadimos al elemento con ID “name” un evento mouseover que al dispararse ponga el foco sobre si mismo, todo ello en un documento JavaScript externo y vinculado.

4. Optimizar CSS y JavaScript

Seguro que si optimizamos nuestro CSS y JavaScript conseguimos reducir el código XHTML.

Debemos para ello tener en cuenta:

  • Evitar la classitis, divitis y spamania innecesaria.
  • Organizar adecuadamente el CSS.
  • Usar inteligentemente el potencial de la cascada.
  • Usar las formas abreviadas para optimizar más el CSS.
  • Tanto el CSS como JavaScript pueden ser comprimidos.

5. Hacer más semántico el XHTML

Pensando muy bien el orden, estructura y contenido de los elementos XHTML, de forma colateral el anidamiento será más simplificado y correcto.

6. Nombrar de forma más semántica y convencional

No recomendado:

<div id="cabecera">
	<p class="rojo">alerta!</p>
</div>

Recomendado:

<div id="header">
	<p class="alert">alerta!</p>
</div>

El nombre para el ID “header” es más semántico y toda una convención, por otro lado el elemento párrafo contiene una clase llamada “alert” aportando más semántica (sobre todo para el diseñador que manipula el código).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *