Hola PHPeros.
Hace bastante tiempo que no me vengo a escribir nada por acá, pero es porque por el trabajo casi no me queda tiempo libre, y el poco tiempo libre que me queda lo invierto en mi empresa (sí, soy un workholic).
En fin, quise venir a compartirles un documento que he venido estructurando y comenzando a aplicar en mis proyectos, que espero que les sea de ayuda en algún momento, se trata de
buenas prácticas al escribir documentos HTML.
1. Siempre cierra las etiquetas.Claramente, este es un error digno de muchos principiantes, el no cerrar las etiquetas. Esto, aparte de que puede que te joda todo el flujo del marcado, es totalmente inválido por cualquier validador de código.
Mal:
<ul>
<li>Item #1
<li>Item #2
</ul>Bien:
<ul>
<li>Item #1</li>
<li>Item #2</li>
</ul>2. Nunca uses estilos "inline"Esto realmente que es una muy mala práctica, debido a que nos limita mucho a la hora de retocar nuestro código, inclusive si queremos agregar bloques de código con el mismo comportamiento, estaremos repitiendo código, recuerden una recomendación muy importante es escribir código basado en la filosofía
DRY (Don't repeat yourself).
Se recomienda ubicar tus estilos siempre en un archivo CSS (Cascading Style Sheet), y luego llamarlo dentro de los archivos que los vayas a aplicar.
Mal:
<p style="color: red; font-size: 2em;">Some text.</p>Bien:
<style>
.myParagraph{
color: red;
font-size: 2em;
}
</style>
<p class="myParagraph">Some text.</p>3. No uses JavaScript "inline"Por la misma razón de usar CSS inline. Complica luego el optimizado del código, aparte de que es mejor tenerlo todo en un documento, que tenerlo todo "chorreado" por todo tu proyecto.
Mal:
<a href="#" onclick="makeSomeAction(); return false">Do it!</a>Bien:
<script>
var myAnchor = document.getElementById('myAnchor');
myAnchor.addEventListener('click', function(){
event.preventDefault();
makeSomeAction();
});
</script>
<a href="#" id="myAnchor">Do it!</a>4. Llama a los archivos CSS dentro del HEAD de tu documento.Se recomienda llamar tus hojas de estilo externas (o si usas CSS embebido, lo cual es una mala práctica) dentro de la etiqueta HEAD de tu documento para que esta cargue primero las hojas de estilo y luego renderize el documento progresivamente. Esto evita que pase el típico error de que primero se cargue todo el documento y luego las hojas de estilo, cosa que deja una mala experiencia a nuestros visitantes.
Ejemplo:
<head>
<title>My test</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
</head>5. Llama a tus archivos JavaScript al final del documentoJusto antes de cerrar la etiqueta BODY. La desventaja de ubicarlos en la etiqueta HEAD, es que el documento hará una pausa para cargar los archivos, y una vez cargados, continuar con el flujo normal del documento y renderizar.
Mal:
<head>
<title>My test</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
<script type="text/javascript" src="js/functions.js"></script>
</head>Bien:
<html>
<body>
<!-- Some code for your body tag -->
<script type="text/javascript" src="path/to/file.js"></script>
</body>
</html>6. Escribe tus etiquetas en minúscula (lowercase)Mal:
<DIV>
<P>Some text.</P>
</DIV>Bien:
<div>
<p>Some text.</p>
</div>7. Utiliza los tags H1-H6Esto te va ayudar en la semántica de tus sitios, y en el posicionamiento en buscadores (SEO).
Mal:
<div class="sectionTitle">Home</div>Bien:
<h1>Home></h1>8. Guíate por un patrón de diseñoSepara la lógica de la programación (llámese PHP, Python, Ruby, JavaScript, etc..) del resultado final (vista), permite tener un código muy optimizado y a la ves reusable por si en un futuro alguien se une a tu proyecto.
Un patrón que recomiendo personalmente es el
MVC (Model View Controller).
9. Utiliza plantillas prediseñadas para la estructura de tu sitioPuedes utilizar
Boilerplate, el cual viene con Modernizr y Normalize incluídos, aparte de tener un código más limpio y con la mayoría de tips que he explicado anteriormente aplicados.
Bien, hasta ahora esa es la lista de los mejores best practices y los más útiles que he redactado y recopilado a lo largo de la web. Si quieres puedes sugerir más para que estén en esta lista, e ir agrandándola para que les sirvan de ayuda a los nuevos.
