Google genera mucho contenido de código abierto, y entre este se encuentra muchísmo código de programación. Pues existen una serie de guías en las que se recomiendan determinadas formas de trabajar que pueden ser interesantes, principalmente (al menos a mi) las que hacen referencia al HTML. Me gustaría destacar algunas de las recomendaciones… que no significa que yo las use o que esté de acuerdo, pero creo que son mencionables.
Uso del protocolo
No se recomienda indicar el uso del protocolo en cuestión cuandos e llama a un objeto. A mi me gusta ponerlo, y aunque sé que en el RFC se dice que no es necesario…
<!-- No recomendado -->
<script src="http://www.example.com/example.js"></script><!-- Sí recomendado -->
<script src="//www.example.com/example.js"></script>Indentación
Algo que yo suelo hacer… que el código esté bien ordenado. Para ello las “tabulaciones” se indicarán con 2 espacios (se recomienda no usar tabulaciones, aunque yo es lo que uso).
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>Mayúsculas/Minúsculas
Se recomienda que todo el HTML esté en minúculas:
<!-- No recomendado -->
<A HREF="/">Home</A><!-- Sí recomendado -->
<img src="example.png" alt="Google">Espacios en blanco
Es mejor no dejar espacios en blanco si no son necesarios.
<!-- No recomendado -->
<p>¿Qué? </p><!-- Sí recomendado -->
<p>Gracias</p>Codificación
Esto es muy sencillo… se recomienda el uso de UTF-8 (sin BOM). Además, en las plantillas HTML se debe indicar la meta-etiqueta correspondiente:
<meta charset="utf-8">HTML5
Se prefiere HTML5 en los documentos, con su cabecera correspondiente:
<!DOCTYPE html>Esto también incluye el uso del MIME text/html y no de XHTML y, por ello, no hace falta cerrar las etiquetas o sea, es mejor <br> y no <br />.
Código HTML válidado
Algo de lo que siempre hay muchas discusiones… personalmente es lgo que me gusta cumplir, al menos cuando la web no tiene códigos de publicidad u otros elementos externos.
<!-- No recomendado -->
<title>Test</title>
<article>This is only a test.<!-- Sí recomendado -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>Semántica
Hay que usar el HTML según su valor inicial, esdecir, un P es un párrafo, y un A un enlace.
<!-- No recomendado -->
<div onclick="visitarRecomendados();">Recomendados</div><!-- Sí recomendado -->
<a href="/recomendados/">Recomendados</a>Multimedia
Hay que proveer de contenido alternativo en el caso de uso de elementos multimedia. Por ejemplo, las imágenes deberían llevar un texto alternativo.
<!-- No recomendado -->
<img src="example.png"><!-- Sí recomendado -->
<img src="example.png" alt="Contenido de ejemplo.">Inter dependencia
Hay que intentar mantener diferenciado y desvinculado el código de la página, de la estructura (markup) de la presentación (styling) del comportamiento con los mismos (scripting).
Evitar entidades
Gracias al UTF-8, es casi innecesario el uso de entidades HTML (por ejemplo el &eur para representar €). Sólo hay dos excepciones habituales que son el & y el < o >.
<!-- No recomendado -->
El símbolos del Euro es: “&eur;”.<!-- Sí recomendado -->
El símbolos del Euro es: “€”.Etiquetas opcionales
Este es otro de esos puntos en los que no estoy 100% de acuerdo. Si bien es cierto qu una de las grandísimas ventajas del HTML5 es que no es necesario escribir todo el código estructurado como hasta ahora, no tengo muy claro que sea interesante de cara a la compatibilidad con todo.
<!-- No recomendado -->
<!DOCTYPE html>
<html>
<head>
<title>gastando bytes</title>
</head>
<body>
<p>Mal.</p>
</body>
</html><!-- Sí recomendado -->
<!DOCTYPE html>
<title>ahorrando bytes</title>
<p>Bien.Atributo “type”
En cambio, esta sí que la considero del todo útil (ya que antes me arecía completamente inútil). En principio los ficheros externos a los que llamamos (por ejemplo .CC o .JS) no es necesarios indicarles el MIME al que mandamos (al fin y al cabo, los ficheros ya lo indican per sé).
<!-- No recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"><!-- Sí recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"><!-- No recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script><!-- Sí recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>Formateado general
Hay que usar un salto de línea para aquellos bloques, listas o tablas e indentar cada elemento hijo. Esta es otra de las recomendaciones que agradezco, porque veo programadores que han hecho mucho daño al HTML.
<blockquote>
<p><em>prueba</em> de un texto cualquiera.</p>
</blockquote><ul>
<li>José
<li>María
<li>Juan
</ul><table>
<thead>
<tr>
<th scope="col">Ingresos
<th scope="col">Gastos
<tbody>
<tr>
<td>5,00 €
<td>4,50 €
</table>Uso de comillas
Se recomienda el uso de comillas dobles “ en vez de comilla simple ‘para los atributos.
<!-- No recomendado -->
<a class='boton boton-alternativo'>Acceder</a><!-- Sí recomendado -->
<a class="boton boton-alternativo">Acceder</a>También hay una serie de recomendaciones para las hojas de estilo CSS. A parte de que el CSS debería validar (algo lógico). Además, se recomeinda que el nombre de las clases sea corto y genérico. Por ejemplo, es más recomendable usar #nav que #navegacion o usar .aux que no .boton-verde.
Selectores
Además, por un tema de rendimiento (muy importante de cara al WPO) hay que intentar ir al elemento más concreto que incliur los generales. Yo principalmente lo veo claro con los ID, pero no siempre con las clases.
/* No recomendado */
ul#ejemplo {...}
div.error {...}/* Sí recomendado */
#ejemplo {...}
.error {...}Propiedades cortas
Algunos elementos permiten propiedades agregadas…
/* No recomendado */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;/* Sí recomendado */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;Valores 0
Los datos que son de valor 0 no requieren de unidades para acompañarlo. De la misma forma, si un vaor va entre -1 y 1, no es necesario indicar el 0.
margin: 0;
padding: 0;font-size: .8em;Hexadecimal
Hay que intentar usar los colores cuanto más cortos mejor. De esta forma, si hay colores que se pueden reducir a 3 caracteres, mejor.
/* No recomendado */
color: #eebbcc;/* Sí recomendado */
color: #ebc;Ordenar los elementos
Se recomienda ordenar los elementos de forma alfabética. Claro está dentro de cada elemento.
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;Finalizar las declaraciones
Al final de cada uno de los elementos se recomienda finalizar con un punto y coma.
/* No recomendado */
.test {
display: block;
height: 100px
}/* Sí recomendado */
.test {
display: block;
height: 100px;
}Separar propiedades y valores
Siempre utilizar un espacio entre las distintas propiedades y sus valores, pero no entre el valor y el punto y coma final.
/* No recomendado */
h3 {
font-weight:bold;
}/* Sí recomendado */
h3 {
font-weight: bold;
}Selectores y declaraciones
Siempre separar cada selector en una línea distinta de otro selector. Además separara con un salto de línea cada regla.
/* No recomendado */
a:focus, a:active {
position: relative; top: 1px;
}/* Sí recomendado */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}Comillas
A diferencia del HTML, en los CSS es mejor evitar las comillas, y en caso necesario (como en los nombres de tipos de letra) usar la comilla simple ‘.
/* No recomendado */
@import url("//www.example.com/css/estilo.css");
html {
font-family: "open sans", arial, sans-serif;
}/* Sí recomendado */
@import url(//www.example.com/css/estilo.css);
html {
font-family: 'open sans', arial, sans-serif;
}En fin, son simples sugerencias de reglas, unas más aceptables que otras… pero las que Google utiliza internamente cuando tiene que liberar código al mundo mundial. Así que, si quieres ser un buen googler ya sabes lo que te toca hacer.
Deja una respuesta