Checklist para un buen desarrollo Web

2Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Teoría, Web

Si ya hablé de pautas para diseño Web, esta vez le toca al desarrollo (maqueteo).

Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.

Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:

Código HTML

El código debe ser limpio y claro. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares correctos: si vamos a poner un título que no sea div, sino que sea un H1, H2 o H3 (dependiendo de su importancia); si ponemos un input en un formulario, el texto asociado debe ir dentro de una etiqueta LABEL y debe tener el atributo FOR indicando al ID del input; etc.

Además de todo esto, el código debe ser validado por la w3c.

CSS

Los estilos CSS deben estar correctamente ordenados (ordénenlos como quieran, ¡pero ordénenlos!). Deben fijarse en que no hayan atributos innecesarios ni duplicados, ni estilos que no se estén usando. Por supuesto que deben estar bien tabulados y deben ser lo más compacto posible (para ahorrar espacio).

También deben estar validados por la w3c.

Codificación

Este tema es probablemente de los más complejos y desconocidos. En realidad no es tan complejo si se explica claramente, pero siempre cuesta entenderlo. Asique para ahorrarme palabras les dejo esta excelente explicación. En resumen, la idea es siempre utilizar UTF-8 como codificación ya que es más universal, y de esa manera se asegurarán que al momento de integrar la maqueta con algún lenguaje de programación (php, asp, etc.) todo va a funcionar perfecto. Sino, mejor ni les digo el problemita que van a tener con las “ñ”, los acentos y algunos otros caracteres.

Tamaño de texto y deformidades

Generalemente, la maqueta se debe hacer respecto a algún diseño (probablemente un PSD). Lo que digo con respecto al tamaño del texto es que deben asegurarse que los tamaños de texto que aparezcan el los PSD deben ser EXACTAMENTE IGUALES al que se ven en sus maquetas (de hecho la maqueta debe ser EXCATAMENTE igual que el diseño: esa es la idea de un buen maqueteo, sino ¿para qué entregar un diseño?).

Si se fijan también, los navegadores (no todos) hacen crecer el texto de la página al girar la rueda del mouse presionando la tecla CTRL. En esos casos, debemos asegurarnos que los textos que vayan creciendo no se salgan de sus espacios y que no se monten sobre otros textos. Generalemente este problema surge cuando se dan alturas fijas a los DIVs, y la solución se consigue utilizando algunos trucos que ya he mencionado (Divs expandibles).

Png’s transparentes en IE6

El típico problema, que aunque todos los desarrolladores estemos en contra, vamos a tener que solucionar hasta que este famoso navegador (y no por ser bueno) esté fuera del mercado.

Debemos cerciorarnos de que las transparencias se vean bien en IE6.

Correcta visión en todos los navegadores

Antes de comenzar el desarrollo (o durante) debemos tener claro para que navegadores debemos maquetear. Idealmente es para todos, pero por lo menos hay que regirse por los 4 más populares: Firefox, Internet Explorer (6,7 y 8), Safari y Chrome.

Como lo he mencionado varias veces, el objetivo es que se vea EXACTAMENTE IGUAL en todos los navegadores, incluyendo espacios separaciones, fondos, transparencias, tamaños, etc. Se puede, incluso sin usar los típicos hacks de CSS que andan dando vueltas por internet.

Tabulación y eliminación de espacios

Una vez que nuestra maqueta está terminada, tenemos que mirar su código.

Debemos fijarnos que esté correctamente tabulada (con tabs y no con espacios) y que no tenga saltos de linea adicionales. Por ejemplo, si utilizamos Dreamweaver, debemos cerciorarnos que en OPCIONES / FORMATO DE CODIGO esté marcado “indentar con 1 tab”. Si no lo hacemos así, tendremos miles de caracteres adicionales que pueden hacer incluso que una página pese un 25% o 30% adicional (y cuando hablamos de sitios con muchas visitas eso cuenta).

Limpieza de CSS y JS

Lo mismo que comenté antes de los CSS. Debemos realizar una limpieza final a los CSS y JS que hayamos utilizado para que no sobre nada y para que estén correctamente ordenados.

Ortografía

Cae de maduro, pero no para todos. Hay que fijarse en que la ortografía de nuestra maqueta o desarrollo sea correcta. He visto sitios por ahí que llegan a ser vergonzosos, y eso dice mucho de una empresa o persona.

JS y CSS de la cabecera

Debemos fijarnos que los CSS y JS que forman parte de nuestro desarrollo estén incluídos dentro de la etiqueta HEAD. La única excepción que podríamos hacer es en los casos de JS o CSS adicionales, como por ejemplo, los de Google Analytics, que idealmente deberían ir al final (para permitir que la página se cargue primero).

Debemos fijarnos también que no hayan funciones o estilos escritos en el código HTML (¿por qué?).

Links, hover y visted

Otro detallito más que muchas veces pasa desapercibido. Debemos fijarnos que no existan links rotos y también que pasa con nuestros links al momento de ser visitados. Los colores de los :visited y :hover deben estar definidos en nuestros estilos CSS.

Navegación

Una vez que está todo listo, es hora de navegar nuestro sitio, y probar que todo esté en orden. Es mejor que nos demos cuenta de cualquier detalle antes de lanzar un sitio a que se den cuenta nuestros visitantes de los errores.