Recopilando buenas prácitcas… Vol. I


Imagen Web

Ésto es algo que me propuse hace un tiempo hacer, y por falta de “tiempo/pasión” no le he dedicado el espacio que se merece realmente. Ésta es mi nueva meta, dejar documentado en algún sitio lo que considero como “Buenas Prácticas” en el desarrollo de las aplicaciones orientadas a entornos web. La mayoría de éstas buenas prácticas las he recopilado de muchos sitios web, las he desarrollado en el día a día de mi trabajo, me las han comentado compañeros, etc.

Me es difícil nombrar a todos y cada uno de aquellos que han aportado a que yo desarrolle ésto, que creo que es de contenido libre y beneficioso para otros, por lo cual insto a todo aquél que crea y considere que es de su autoría la información aquí expuesta, por favor lo exprese en los comentarios de éste y los sucesivos posts que iré publicando para poder hacer referencia al sitio en cuestión. Muchas gracias por vuestra colaboración.

Si lo que yo publico aquí, crees que es de utilidad y provechoso difundirlo, simplemente coméntale a un amigo, cópiaselo y pégalo en donde creas oportuno, haz y deshaz lo que creas que se deba hacer. Como humano eres libre y debes ejercer tu libertad, sin distinciones.

Hoy comenzaré con una práctica más superficial en las aplicaciones, la parte visual codificación HTML.

Para poder navegar sobre los varios volúmenes que iré publicando sucesivamente, simplemente pueden hacerlo en la categoría de Tecnología / Buenas Prácticas y sus sucesivos subtags como pueden ser Java, Javascript, XHTML, Web, y demás que se irán añadiendo.

1. Primero ante todo, cierra siempre tus tags!

Es increíble ver como no nos adaptamos a programar con tags cerrados y lo cierto es que los navegadores leen más rápidamente (aunque no lo notemos) cuando la estructura del arbol DOM se encuentra bien codificada.

Antiguamente solíamos escribir (por ejemplo una lista) de la siguiente manera:

<li> Link 1
<li> Link 2

Y lo cierto es que el código como tal, se encuentra mal formulado, una de las grandes congruencias de la codificación XHTML es lo que se conoce como: “estructuración en cajas”. Y debería ser formulado de la siguiente manera:

<ul>
   <li> Link 1</li>
   <li> Link 2</li>
</ul>

2. Declarar el Doctype de manera correcta.
En este mundo de trabajo, me he encontrado con todo tipo de cosas, pero la que más me ha asombrado son aquellos que en la proeza de innovar, inventan Doctypes que no se encuentran normalizados por la W3C, lo lógico es utilizar el estándar que para ello está. Los existentes a la fecha y los más utilizados son los siguientes:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Por mi parte, siempre prefiero utilizar XHTML Strict, aunque reconozco que en algunos casos no es recomendable por lo que se debe recurrir a utilizar el Transitional que es el que se utiliza comunmente.

3. No utilices Nunca estilos en línea!
En ocasiones, cuando estamos un poco hartos del trabajo, recurrimos al camino fácil, todos pecamos de ello, pero aquí estamos para las buenas prácticas! No para los senderos sinuosos.
Es necesario saber separar la maquetación de la presentación, sobre todo para poder contemplar navegadores que quizás no interpreten hojas de estilo y no necesiten cargar las mismas. A nivel de mantenimiento es mucho más costoso los estilos en línea, por experiencia lo sé, créeme. Ésto:

<p style="color: red;">Texto </p>

Debería modificarse por ésto:

#idElemento > p { color: red; }

4. Localiza todos las etiquetas de LINK de css dentro del tag HEAD.
Técnicamente, tu puedes situar el tag LINK en cualquier lugar que desees, el navegador lo va a incorporar igual, aunque las especificaciones recomiendan que se utilice el tag HEAD para ello.

Cita:
Cuando investigamos la performance en Yahoo!, descubrimos que
moviendo las hojas de estilo al tag HEAD las páginas se cargan
más rápido. Esto sucede porque poniendo las hojas de estilo
en el tag HEAD permite a la página renderizarse progresivamente.
El equipo YSlow

5. Considerar localizar los tags SCRIPT al final del cuerpo del documento.
Si, lo se, todos estamos acostumbrados a situar los tags SCRIPT en el tag HEAD del documento, y ésto viene heredado de un conocimiento muy antiguo en el cual no todos los navegadores leían Javascript y si lo escribíamos “inline” dentro del tag SCRIPT no encontrándose en el tag HEAD, era probable que el usuario visualizara el código que habíamos desarrollado.
Con los scripts linkeados no sucederá bajo ningún concepto este tipo de sucesos, por tanto no tenemos que preocuparnos por ello, por lo que si nos preocupamos es por el renderizado de la página.
Cuando el navegador intenta cargar Javascript, lo realiza de manera síncrona, por lo que no terminará de cargar la página hasta que termine de cargar el script, lo que al usuario le representa una sensación de “demora”.
Nota bene: considerar que los script siempre se encuentren dentro del tag body para poder permitirte utilizar el atributo onLoad del mismo, de lo contrario te dará un error.

6. No utilices Javascript en línea (como dice Tuts: No estamos en 1996!).
Otra práctica heredada del pasado, es incorporar en el cuerpo de la página código Javascript incrustados en atributos de un elemento (onclick, onblur, onchange, etc.).
Éstas prácticas generan Javascript obstructivo que en algunos casos ciertos navegadores pueden no soportarlo, para ello debemos profundizar más en Javascript no obstructivo (En próximos volúmenes…).
Para realizar éstas prácticas, debemos llevar la funcionalidad a un Javascript externo el cual realizará llamadas addEventListener/attachEvent para incorporar la funcionalidad que deseamos. Si utilizas un framework como jQuery, puedes hacerlo de la siguiente manera.

$('a#moreCornInfoLink').click(function() {
   alert('Want to learn more about corn?');   
});

7. Utiliza tus tags en minúsculas.
Técnicamente, puedes utilizar tanto mayúsculas como minúsculas, el navegador lo va a leer de la misma manera, lo que no significa que logres validar tu documento si deseas ir plus ultra. No le dañes los ojos a nadie y utiliza los tags en minúsculas, es más legible.

8. Utilizar tags H1, H2, H3, H4, H5, H6.
Ésto es necesario para empezar a utilizar técnicas SEO, que para interfaces web, si lo que vendes es tu contenido antes que la funcionalidad, es imprescindible utilizarlo. Si el contenido no es tu preocupación mas la funcionalidad, puedes olvidarte de éste punto.

9. Incorpora una estructura de navegación con una lista no ordenada.
Ésta es una práctica más orientada a WAI (Web Accesible Initiative) pero también es recomendable utilizarlo para lograr una navegabilidad más facil e intuitiva, de ésta manera podrás aplicarle los estilos que deseas.

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>

Acerca de fabiancouto

Nacido en Montevideo, Desarrollador de software en @brujula_talk & owner de @TrabajoBalear. Adicto a la ironía y al sarcasmo. En busca de sabiduría y felicidad.

Publicado el 19 abril, 2010 en Buenas Prácticas, Desarrollo, Web, XHTML y etiquetado en , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: