Professional Documents
Culture Documents
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
N actualizacin: 0
Pgina 2 de 10
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.
HTML CSS
ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 3 de 10
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 "á" 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.
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
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.
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.
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"
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
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).
N actualizacin: 0
Pgina 8 de 10
6 Estilo de codigo
6.1 Ejemplo estructura de cdigo valido por W3C
N actualizacin: 0
Pgina 9 de 10
7 Recursos
N actualizacin: 0
Pgina 10 de 10