elclerigo!

Recientemente me pidieron que redactará el HOW-TO de la maquetación XHTML de nuestros desarrollos. Queríamos crear una forma de desarrollar común, para que dentro de 3 años alguien pudiera abrir una página y desenvolverse sin problemas entre su código. Además debíamos tener muy en cuenta a los diseñadores, y su escaso (nulo xD) conocimiento del código de cliente/servidor.

Así pues, esto fue lo que redacté y entregué. La intención es ampliarlo y corregirlo. Así que cualquier aportación será bien recibida.

Normas generales XHTML

• Definir en la primera línea el DOCTYPE

o HTML 4.1, XHTML 1.0, XHTML 1.1
o Transitional, Strict, Frameset

• Incluir en la etiqueta HTML la versión xhtml y el lenguaje

Ejemplo:

• Incluir dentro del HEAD los METAS

o Description: Una descripción de unas dos líneas de esa página. Es lo que aparece en google bajo el título de la página
o Content-type: text/html; charset=UTF-8/ISO-8859-15

Ejemplo:

• Incluir dentro del HEAD los enlaces a javascript y css

• Separar el layout de la página en tres partes: HEADER, MAIN, FOOTER

• Separar el MAIN en al menos dos partes: NAV, CONTENT, SECUNDARY_NAV, SECUNDAY_CONTENT,…

• En ocasiones NAV puede estar en el HEADER

• Separar contenido, presentación e interacción: No incluir ni estilos ni eventos javascript dentro del código HTML.

• Validar el código HTML (validador W3C, validador local W3C Web Developer Toolbar for Firefox)

• Los nombres de ID’s y clases hacen referencia al contenido, no a la apariencia: No usar nombres de clase o id’s como “azul”, “amarillo”, “texto_negrita” si no nombres como “direccion”, “telefono”, “navegación”, “cabecera”, etc…

• Es mejor un fichero CSS de 30Kb que 3 ficheros de 10Kb cada uno

• Usar siempre minúsculas: tanto para el HTML como para las clases CSS

• Usar un hoja de estilos exclusiva para Internet Explorer: usando comentarios condicionales para agregarla

• Prueba tus páginas en Firefox, IE7 e IE6 como mínimo: Esto supone el 99% de los navegadores que visitan una web


Normas generales CSS

• Deshacer estilos predefinidos: Usar el undohtml.css

• Comentar la hoja de estilos: separando las distintas partes. Enlaces, cabecera, pie de página, layout, etc..

• Dentro de un estilo mantener un orden

Etiqueta {
/*Lo primero siempre lo relativo a posicionar el elemento*/
Clear: both;
Position: relative/absolute/fixed;
Float: Left/Right;
Display: Inline;
/*Después lo que afecta al modelo de caja*/
Width: 20em;
Min-height: 10em;
Margin: 0 0 0 0;
Padding: 0 0 0 0;
Border: 1px solid #000000;
/*Después lo que afecte al fondo*/
Background-color: #323536;
Background-image: url([ruta relativa]);
Background-position: left top/bottom/right/right bottom;
Background-repeat: no-repeat/repeat-x/repeat-y;
/*Después lo que afecte a las tipografías, fuente y color de fuente*/
Font-family: Arial, Helvetica, Tahoma, Verdana;
Font-size: 0.8em;
Color: #000000;
Font-weight: bold;
Text-decoration: underline;
Font-style: italic;
/*Por último lo que influye en la apariencia*/
List-style:
Text-indent:
Etc…
}

• Validar CSS: (validador W3C, validador en local de la Web Developer Toolbar para Firefox)