07Mar
Desarrollo frontend

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="https://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).

Compartir: