2012

T&T International Group, S.A.

Calle Luis de Camoens, Edf. Centro Clover, Piso 1 Zona Industrial La Trinidad Caracas, 1080 Venezuela Tel.: (58212)944.05.50 (master) Fax: (58212)945.05.10 Web: http://www.ttinternationalgroup.com Email: info@ttinternationalgroup.com

Estndares de Codificacin WEB

Mejores Prcticas para HTML/XHTML
Define los lineamientos para los desarrolladores

Date Created: 01/28/04

Last Revision: 01/28/05

Revision Number: 0

Page i

13/03/2012

Tabla de Contenidos
1 2 CONTROL DE VERSIONES Y CAMBIOS ................................................................................ 3 INTRODUCCIN .................................................................................................................. 3 2.1 2.2 3 4 5
6

POR QU ESTNDARES WEB ......................................................................................................... 8 W3C - EL CONSORCIO WORLD WIDE WEB ..................................................................................... 3

BUENAS PRACTICAS DE MAQUETACION XHMTL ................................................................. 4 CONVENCIONES DE NOMBRE .............................................................................................. 8 4.1 5.1 LINEAMIENTOS GENERALES ......................................................................................................... 8 EJEMPLO ESTRUCTURA DE CODIGO VALIDO POR W3C......................................................................... 9 ESTILO DE CDIGO ............................................................................................................. 9
RECURSOS.10

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 2 de 10

1 Control de Versiones y de Cambios

El versionamiento y los cambios producidos de este documento, as como las fechas y responsables de los mismos, se reflejan en la siguiente tabla:
Versin 1.0 Fecha 13/03/12 Responsable Pedro Giacometto / Desarrollo Web Estado Borrador Cambios efectuados Manual Estandares XHTML

2 Introduccin
Este documento define los lineamientos y sugerencias que sern utilizados por el departamento de desarrollo web, as lograr un estilo consistente y reforzar prcticas que mitiguen errores comunes. Se encuentra enfocado primordialmente en el desarrollo XHTML.

2.1 Por qu estndares web?

Para hacer que Internet sea un lugar mejor, tanto para los desarrolladores y los visitantes, es importante que tanto los navegadores Web y los desarrolladores siguen los estndares Web. Al seguir los estndares de la Web, el desarrollo se simplifica, ya que es ms fcil para un desarrollador de entender la codificacin. El uso de estndares Web se asegurar de que todos los navegadores mostrar el sitio web correctamente. Las pginas Web que se ajusta a las norma son ms fciles de indexar para los motores de bsqueda, ms fcil de convertir a otros formatos, y ms fcil de acceder con lenguajes de programacin (como JavaScript y el DOM).

2.2 W3C - El Consorcio World Wide Web

El W3C crea y mantiene los estndares de la Web. La World Wide Web Consortium (W3C), fundado en 1994, es un consorcio internacional dedicado a "guiar la Web hacia su mximo potencial", lo que hace al desarrollo de especificaciones, directrices, software y herramientas. Los estndares del W3C ms importantes son:

HTML CSS
ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 3 de 10

Fecha elaboracin: 13/03/12

XML XSL DOM Gua de Referencia XHTML Estndares

El W3C Oficial Pgina de inicio

3 Buenas Prcticas de maquetacin XHTML

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. Usa etiquetas de 'Ttulo' con significado. Lo que introducimos en la etiqueta <title> es lo que Google utiliza para su lista de resultados. Usa meta etiquetas descriptivas. Las meta etiquetas descriptivas ayudan a que los robots de los buscadores obtengan mayor informacin acerca de las pginas. La Meta etiqueta "Description": Esta meta etiqueta 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.

3.

4.

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 4 de 10

Meta etiqueta "keywords (palabras clave) Esta meta etiqueta incluye palabras separadas por comas que son relevantes al contenido de la pgina y al igual que la meta etiqueta "description, debe ser concisa y directa.
5.

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. 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) 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)

6.

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. 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.

8.

9. Nunca Utilizar estilos en el cdigo HTML 10. 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) recomendable atiborrar nuestro cdigo HTML de llamadas a ficheros externos. Tener el

11. Intenta tener la menor cantidad de ficheros externos de JavaScript No es

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 5 de 10

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.
12. Utiliza siempre que sea posibles 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.

13. Usar las etiquetas de encabezados "<h1><h6>" de manera jerrquica para

otorgar importancia a nuestro contenido y que ste sea clasificado acertadamente.

14. 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"
15. 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.
16. 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 multibrowser.

17. Para maquetar los mens utilizar una lista desordenada <ul> 18. Fjate que has cerrado todas tus etiquetas. 19. Usa minsculas en tus etiquetas y atributos para facilitar la lectura de tu

cdigo.

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 6 de 10

20. 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 cual 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"

21. 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>.
22. 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

23. 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.

24. Comenta tu cdigo 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.....

25. 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. usar el validador del W3C.
ltima actualizacin: 13/03/12 N actualizacin: 0

Fecha elaboracin: 13/03/12

Pgina 7 de 10

4 Glosario de Trminos
Camel Case: Palabra con la primera parte toda en minscula, y cada parte siguiente con la primera letra en mayscula y el resto en minscula Ej. customerName. Pascal Case: Palabra con la primera letra de cada parte que la conforma en mayscula y el resto en minscula Ej. CustomerInfo.

5 Convenciones de nombre
La consistencia es un pilar fundamental para tener soluciones con buenas caractersticas para su mantenimiento. De esta forma es clave al darle nombre a todos elementos involucrados en el desarrollo de los proyectos (nombre de los proyectos, de archivos fuentes, entre otros).

5.1 Lineamientos generales

1. Siempre usar Camel Case o Pascal Case. 2. Evitar nombres que estn todos en maysculas, as cmo el uso de puras minsculas en palabras compuestas Ej. Usar lastName, en vez de LastName. 3. No usar nombres que comienzan en un nmero. 4. Siempre utilizar nombres que sean especficos y que indiquen un significado. 5. Evitar ser poco descriptivo. 6. Evitar el uso de abreviaciones, al menos que el nombre sea excesivamente largo. 7. Evitar abreviaciones que tengan ms de 5 caracteres. 8. Las abreviaciones deben ser ampliamente conocidas y aceptadas. 9. Usar mayscula para abreviaciones de 2 letras, y pascal case para abreviaciones ms largas.

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 8 de 10

6 Estilo de codigo
6.1 Ejemplo estructura de cdigo valido por W3C

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 9 de 10

7 Recursos

Resumen de Firebug Depurar Javascript con Firebug - video tutorial YSlow

Fecha elaboracin: 13/03/12

ltima actualizacin: 13/03/12

N actualizacin: 0

Pgina 10 de 10