Explica qué div estás cerrando
La mayoría de las veces, cuando estoy viendo una fuente de sitio web, veo, en la parte inferior de la página, una lista casi interminable de etiquetas de cierre. De hecho, muchos principiantes piensan que sólo tienen que usar divs en lugar de tablas para producir código de calidad. Los divs son limpiadores que las tablas, pero sin la organización de código adecuada, puede ser tan (o incluso a veces más) desordenado como el código basado en tablas.
El uso de sangría es un buen comienzo. Pero un consejo que definitivamente puede hacer que ahorres mucho tiempo es comentar cada etiqueta div que está cerrando, como se muestra en el ejemplo siguiente:
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
Utilice un restablecimiento CSS
A menos que seas un principiante o si estabas de vacaciones en una isla desierta durante los últimos 6 años, es posible que ya sepas lo útil que es un CSS para restablecerlo. Dado que, de forma predeterminada, los exploradores no aplican el mismo estilo predeterminado a los elementos HTML, un restablecimiento CSS garantizará que todos los elementos no tengan ningún estilo en particular para que pueda definir el suyo propio sin el riesgo de muchos problemas de representación entre exploradores.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, font, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, conjunto de campos, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td margen: 0; acolchado: 0; borde: 0; esquema: 0; tamaño de fuente: 100%; alineación vertical: línea de base; fondo: transparente; } cuerpo ? altura de línea: 1; } ol, ul estilo de lista: ninguno; } blockquote, q ? citas: ninguna; } blockquote:before, blockquote:after, q:antes, q:after ? contenido: ''; contenido: ninguno; } /* ¡Recuerde definir estilos de enfoque! */ :Focus ? esquema: 0; } /* Recuerde resaltar inserciones de alguna manera! */ ins ? decoración de texto: ninguno; } del del decoración de texto: línea a través; } /* las tablas todavía necesitan 'cellspacing"0"' en el marcado */ tabla de la mesa de la mesa de colapso fronterizo: colapso; espaciado de borde: 0; }
Fuente:http://meyerweb.com/eric/tools/css/reset/index.html
No uses @import
Los archivos CSS se pueden incluir utilizando la directiva @import. Esto puede ser útil cuando, por ejemplo, desea incluir una hoja de estilos en otra. Otra práctica común es incluir el archivo CSS en los documentos html usando lo siguiente:
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
Mientras funciona, la directiva @import es mucho más lenta que la otra forma de incluir hojas de estilo en un documento html:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
No hará ninguna diferencia en los sitios web de poco tráfico, pero si usted tiene la oportunidad de poseer un sitio web popular, no pierda el tiempo de su visitante usando @import.
Fuente:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
"Smush" tus imágenes
Siendo un desarrollador, siempre encontré que optimizar mis imágenes para la web no fue fácil. Probé el viejo comando de Photoshop "Guardar para web", pero la mayoría de las veces, terminé con imágenes que eran demasiado grandes o sin una calidad suficiente.
Como resultado, tenía la mala costumbre de usar imágenes no óptimas en mis sitios web. Esto no es un problema cuando no tienes que preocuparte por el ancho de banda de tu sitio, pero después de mi reciente cambio en mi vps.net servidor privado virtual, tuve que tener cuidado con los tamaños de imagen.
En este momento, encontré una herramienta muy interesante llamada Smush It: Usted introduce su url de imagen no optimizada, y Smush creará una imagen perfectamente optimizada para usted. Puede ahorrar hasta un 70% del tamaño del archivo, manteniendo la calidad original. Por ejemplo, todas las imágenes de mi lista de editores de código en línea han sido "smushed".
No mezcle CSS con HTML
Como lenguaje de marcado, el uso correcto de HTML es organizar documentos definiendo un encabezado, un pie de página, listas, blockquotes, etc. Hace algún tiempo, los desarrolladores web front-end solían usar atributos HTML obsoletos para aplicar estilo a un elemento determinado.
Hoy en día, el atributo style permite a los desarrolladores insertar CSS directamente en un documento html. Esto es muy útil para las pruebas o cuando tienes prisa. Pero el atributo de estilo es una mala práctica, que va completamente en contra de la filosofía CSS.
En el ejemplo siguiente se muestra cómo se puede convertir una línea de código simple y sucia, con el atributo style:
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Gatos que codifican</a>
No mezcle Javascript con HTML
Al igual que mezclar su código html con css es una mala práctica, no debe utilizar ningún Javascript en sus documentos html. La siguiente práctica incorrecta ilustra un evento onclick:
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Gatos que codifican</a>
El mismo resultado se puede lograr utilizando Javascript sin obstáculos. En este ejemplo, estoy usando el popular marco de jQuery:
$(document).ready(function() ?
$('#cwc').click(function() ?
alerta('Me encanta este sitio web');
});
});
Esto puede parecer un poco más difícil al principio, especialmente para los principiantes; pero definitivamente no lo es, y mantendrá su documento html limpio.
Usar comentarios condicionales
Usted lo sabe, IE apesta, y algunos clientes chupan aún más al requerir que cree páginas web que son compatibles con este navegador obsoleto. Para dirigirse a versiones específicas de IE, puede utilizar los conocidos hacks de IE, como se muestra a continuación:
altura: 200px; /* navegadores normales */ _height: 300px; /* IE6 */ .height: 250px; /* IE7 */ *altura: 350px; /* Todas las IE */
Esos hacks son extremadamente útiles a veces, pero no son la mejor manera de apuntar a una versión específica de IE, y hará que su validación CSS falle.
En su lugar, debe usar el comentario condicional que se muestra a continuación para dirigirse a IE6.
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Coloque el archivo Javascript en la parte inferior
Una práctica popular de finales de los años 90/principios de 2000 fue colocar archivos Javascript dentro de la<head>Y</head>Etiquetas. El problema es que sus archivos javascript se cargarán primero, y por lo tanto su contenido se cargará después.
Al colocar archivos Javascript en la parte inferior de sus documentos, se asegurará de que los archivos JS se cargarán solo cuando el contenido se haya mostrado correctamente.
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
Usar HTML semánticamente
HTML no es un lenguaje de programación. Es un lenguaje de marcado, que se utiliza para crear documentos estructurados mediante la denotación de semántica estructural para texto como encabezados, párrafos, listas y más.
Si comenzó a crear sitios web en los viejos años 90 o a principios de siglo, sabe lo sucio que estaba el marcado en ese momento. Pero felizmente, ha evolucionado.
Entre otras cosas, es importante utilizar el elemento html semánticamente. Por ejemplo, un menú de navegación siempre debe ser una lista desordenada:
<ul> <li><a href="#">Casa</a></li> <li><a href="#">acerca de</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Blog</a></li> </ul>
Pruebe WHILE you build para evitar problemas entre navegadores
Uno de los mayores errores que he cometido al desarrollar html, CSS y javascript, fue no probar mis páginas en varios navegadores mientras las escribía. En su lugar, solía escribir todo mi código y simplemente ver en Firefox para ver cómo se representaba.