c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, Espaa 644 317 266 info@soluciones4web.

com

Motivo

Manual de Buenas Prcticas de maquetacin en html Una buena maquetacin es fundamental para obtener un diseo elegante, compatible con todos los navegadores y que cumpla las normas de accesibilidad establecidas. Un buen diseo ayudar a hacer tu pgina web ms rpida y fcil de encontrar en los buscadores de Internet. La maquetacin es el plano inicial en base al cual se montar toda tu pgina y debemos prestarle especial atencin. En este artculo te dejo algunas buenas prcticas a seguir.

1. Lo primero es declarar un doctype. La declaracin de un "Doctype" deber localizarse al inicio

del cdigo HTML. Es importante sealar que en la declaracin del doctype NO debe haber NINGN espacio en blanco ni cambio de lnea ANTES , la mayora de los navegadores saben arreglrselas, pero en IE8 provocar misteriosos comportamientos
2. Encoding: La razn por la que se hace uso de los "&aacute" es que la pgina no define su

encoding, debe estar en UTF-8, y especificar el meta para el encoding, de modo que no haya ninguna necesidad de utilizar HTML entities para las tildes y caracteres raros. 3. Usa etiquetas de 'Ttulo' con significado. Lo que introducimos en la etiqueta <title> es lo que Google utiliza para su lista de resultados. 4. Usa metaetiquetas descriptivas. Las metaetiquetas descriptivas ayudan a que los robots de los buscadores obtengan mayor informacin acerca de las pginas. La Metaetiqueta "Description" : Esta metaetiqueta describe el propsito principal de una pgina. Deber ser diferente en cada pgina o seccin. Google tambin utiliza el contenido de sta y lo muestra en los resultados de bsqueda. Para no saturar las descripciones es mejor que incluyas contenido conciso que atraiga a tus potenciales visitantes. Metaetiqueta "keywords (palabras clave) Esta metaetiqueta incluye palabras separadas por comas que son relevantes al contenido de la pgina y al igual que la metaetiqueta "description, debe ser concisa y directa.

Pgina 1 de 5

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, Espaa 644 317 266 info@soluciones4web.com

Motivo

Utiliza divs "<div>" para maquetar y dividir tu contenido en zonas o secciones El primer paso que debes tener en cuenta es dividir el contenido de la pgina en secciones principales para organizar la informacin de la misma. Con esto garantizars un contenido ordenado y con una buena arquitectura de la informacin. 6. Por regla general NO utilizar tablas, A MENOS que se trate de informacin tabulada, pues si la naturaleza de la informacin es una relacin de datos tabulados, entonces nada mejor que una tabla para representarla (ej: tablas comparativas, desgloses, una relacin de elementos con sus respectivas propiedades, etc)
5.

incorrecto: que el marco del sitio sea una tabla que lo envuelve todo para darle estructura correcto: que una tabla con "info tabulada" forme "parte" del cuerpo de un contenido (ej: http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks o http://drupal.org/project/usage/drupal)
7. SEO: cabecera y logos como imgenes son anti-SEO, se deben utilizar trucos para representar

textos (aunque estn ocultos bajo las imgenes) y en cualquier caso los "alt" y "title" de esas imgenes son bastante importante. 8. Separa el contenido de la pgina HTML del estilo con que se muestra El cdigo HTML contendr la informacin, el cdigo CSS el estilo y la manera en que se presenta. Siempre hay que usar stilos separados y no dentro de la pgina HTML. As el cdigo ser ms limpio y permitir modificaciones de manera ms eficaz. 9. Intenta unificar todos los estilos en una sola hoja de estilos Cada archivo implica una solicitud HTTP, lo cual hace que el tiempo de carga de la pgina sea ms lento. Cuando son muchos CSS para IE se utiliza el "@import", que permite entonces exceder el lmite de 30, pero mucho mejor es utilizar un framework que permita "agregar" los ficheros CSS y JS en un nico fichero para CSS y un nico fichero para JS (lo cual resuelve el problema de las descargas paralelas)
10. Intenta tener la menor cantidad de ficheros externos de JavaScript

No es recomendable atiborrar nuestro cdigo HTML de llamadas a ficheros externos. Tener el cdigo JavaScript en ficheros aparte con extensin JS, y aunque a veces har falta poner algo del cdigo en la pgina, este debe ser de mnimo impacto.

Pgina 2 de 5

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, Espaa 644 317 266 info@soluciones4web.com

Motivo

11. Utiliza siempre que sea posible funcionalidades de CSS2 en lugar cdigo JavaScript para

los estilos como el hover con lo que se evita estar cargando innecesariamente la ejecucin del JavaScript. 12. Usar las etiquetas de encabezados "<h1><h6>" de manera jerrquica para otorgar importancia a nuestro contenido y que ste sea clasificado acertadamente. 13. Haz un buen uso de las etiquetas HTML Aqu te detallo algunos ejemplos: Usar la etiqueta <p> para los prrafos apropiadamente y no hacer uso abusivo de los saltos de linea <br> . Para aadir espacio entre prrafos hay que ayudarnos de CSS usando propiedades como 'padding' o 'margin'. estudiar ms el potencial de los padding para ahorrarse estar repitiendo margins en los elementos que estn en una misma regin No realizar alineaciones centradas forzadas en atributos HTML para centrar la pgina. Utilizaremos mrgenes automticos para centrar el div contenedor. Si quieres resaltar algn texto es mejor usar "em" o "strong" en lugar de usar "i" o "b"

14. No abusar del uso de <div>

Evitar saturar el cdigo de <div> anidados. Hay que usarlos cuando no haya otro elemento html que represente lo que necesitamos. No hay que usar las DIVS como sustituto de elementos lineales para obtener elementos de bloque. En ese caso hay que utilizar elementos lineales apoyados en las propiedad display: block de CSS.
15. No abusar de float

Esto es muy importante, para garantizar la compatibilidad entre los diferentes navegadores, los divs no deben ser flotados masivamente porque en muchos browsers (IE6 por ejemplo) el sitio se rompe de mala manera, los float se deben utilizar solamente en los casos que ya estn identificados como vlidos y multi-browser.
16. Para maquetar los mens te recomendamos utilizar una lista desordenada <ul> 17. Fjate que has cerrado todas tus etiquetas. 18. Usa minsculas en tus etiquetas y atributos para facilitar la lectura de tu cdigo.

Pgina 3 de 5

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, Espaa 644 317 266 info@soluciones4web.com

Motivo

19. Usar los atributos "alt y title para las imgenes

El atributo "alt" significa "texto alternativo", y quiere decir, que si no se encuentra la imagen se debe mostrar ese texto, entonces un error comn es introducir toda una oracin, lo cul rompera horriblemente la pgina si le pedimos al navegador que no muestre las imgenes, en la vida real esto solo ocurre para los navegadores textuales (de consola) o cuando una imagen est rota y no es encontrada. los buscadores comprenden el significado de la imagen por su "title" que es realmente el ttulo que s puede llevar una oracin explicativa, y entonces es el title quien es SEO, lo que pasa es que "en ausencia del title" los buscadores intentan encontrar significado textual en el "alt"
20. Utilizar etiquetas <fieldset> y <label> en los formularios

Es til utilizar la etiqueta <label> para dar nombre a los elementos de un formulario y eliminar el uso de la etiqueta prrafo <p> o para evitar introducir texto sin etiqueta alguna. Igualmente es importante dividir los sets dentro de los formularios mediante la etiqueta <fieldset> y cuando sea necesario nombrar los set mediante la etiqueta <legend>.
21. Evitar tener una hoja de estilo diferente en dependencia del navegador o de la versin de

este. Es posible evitar estos tweak&twist si se tiene dominio de CSS2 y CSS3, y en general de correcta maquetacin multi-browser, puesto que es posible utilizar un nico fichero CSS con reglas que tomen en cuentan algunas particularidades entre los diferentes browsers (ej: poner primero las reglas especficas para cada navegador y finalmente la regla CSS3 que por estar de ltima predominar en caso de que el navegador la soporte) Pero si de todas formas nos encontramos haciendo semejante condicional (suele pasar cuando uno va a arreglar algo que ya est hecho y no se pretende re-hacerlo completamente nuevo) entonces hay que destacar que las reglas en ese otro fichero CSS deben ser la mnima cantidad posible
22. Ordena tu cdigo con tabulaciones adecuadas ya que es una buena prctica para que sea

fcilmente modificable y entendible por ti mismo o si es necesario por otra persona que contine el desarrollo. 23. Comenta tu cdigo

Pgina 4 de 5

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, Espaa 644 317 266 info@soluciones4web.com

Motivo

Destacar que los comentarios deben ser sintticos y decorosos, ya que pueden ser vistos por el usuario, la pgina se despacha con los comentarios HTML includos, y lo mismo para CSS y JS, entonces no est bien comentar como si estuvisemos hablando en familia, porque puede terminar teniendo una mayor audiencia en caso de que alguien quiera inspeccionar por dentro.....
24. Valida el cdigo

Es una herramienta muy til que puede ayudarte a encontrar errores tales como olvidar cerrar una etiqueta, haber cerrado un estilo con dos puntos en lugar de punto y coma y un largo etc. Te animamos a usar el validador del W3C.

Pgina 5 de 5