JMiur [E]

La llamada Google HTML/CSS Style Guide es eso; un documento de Google que intenta definir algunas reglas a seguir cuando se escriben códigos HTML o CSS cuyo objetivo es ayudar a quienes lo leen o deben interpretarlo.

La guia es una mezcla de sugerencias validas y subjetivas por lo tanto, cada uno debería "filtrarla" y tener en cuenta aquellas cosas que se adapten a su modo de trabajo y descartar las otras. La base de todo esto es la accesibilidad es decir, que nosotros mismos entendamos qué estamos escribiendo y lo hagamos siempre del mismo modo para que resulte sencillo modificarlo en el futuro.

La paradoja del documento de Google es que ellos no aplican lo que predican ya que las páginas que crean los servicios que administran suelen ser engendros irracionales sin pies ni cabeza. Ni hablar de Blogger o de sus plantillas !!!

De todos modos, acá hay algunas sugerencias a tener en cuenta que no son novedad pero tal vez valga la pena repetir.

1 Usar las etiquetas HTML correctas ya que cada una de ellas ha sido creada con un propósito.

A es un enlace por lo tanto; es mejor poner:
<a href="UNA_URL">un enlace</a>
que:
<div onclick="abrir('UNA_URL');">un enlace</a>
H1 H2 H3 etc son encabezados; el número (1 a 6) no existe para indicar su tamaño sino para indicar su importancia. Una página web sólo debería tener una etiqueta H1 y esa etiqueta debería ser el título. Si hay subtítulos se usa H2 y no hay que abusar de ellos; si los títulos son elementos intrascendentes (por ejemplo los títulos de la sidebar de Blogger) estos no deberían tener una etiqueta de encabezado y si la tienen, jamás deberían ser encabezados "superiores" al título del blog o al título de la entrada.

P es un párrafo (un texto) así que escribir:
<p><img src="UNA_IMAGEN" /></p>
no tiene mucho sentido.

2 Toda etiqueta IMG debería tener un atributo alt que indique el contenido alternativo pero, lo mismo debería hacerse con videos o cualquier otro tipo de contenido multimedia.

3 Las reglas del HTML5 dicen que ya no es necesario agregar el atributo type en hojas de estilo y scripts a menos que el tipo no sea el usual (CSS y JavaScript) por lo tanto, se sugiere que en lugar de esto:
<link rel="stylesheet" href="archivo.css" type="text/css" />
<script src="archivo.js" type="text/javascript"></script>
se use:
<link rel="stylesheet" href="archivo.css" />
<script src="archivo.js"></script>
ya que es algo que funcionará en cualquier navegador y en cualquier página, aún cuando no sea HTML5.

4 Agregar siempre un punto y coma final a cualquier propiedad de CSS aún cuando no sea "obligatoria" es algo que evitará errores futuros.

Suele verse esto:
.ejemplo {
  text-align: center
}
que funciona perfectamente pero, en algún momento le agregamos alguna otra propiedad:
.ejemplo {
  text-align: center
  color: red;
}
y ya no funcionará porque nos hemos olvidado de agregarle el punto y coma final.

5 Indentar el código siempre es buena idea porque permite visualizar qué cosa esta dentro de que otra y de ese modo comprender cómo se verán afectados los contenidos. Ellos recomiendan usar dos espacios y evitar el uso de la tecla TAB (cosa con la que yo estoy de acuerdo) pero, es algo que queda criterio de cada uno:
<div>
  <p> algo </p>
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
  <div>
    <!-- OTRA COSA -->
  </div>
</div>
Minimizar quitando espacios o indentaciones debería estar reservado sólo a aquellos códigos que estemos completamente seguros que no vamos a editar jamás.

Por el contrario, se recomienda minimizar ciertas cosas, por ejemplo, eliminar las comillas innecesarias en las direcciones URL:
background: url("UNA_IMAGEN") no-repeat 0 0 transparent;
se puede escribir:
background: url(UNA_IMAGEN) no-repeat 0 0 transparent;
usar tres caracteres de color cuando es posible:
color: #FFF;
en lugar de:
color: #FFFFFF;
eliminar la unidad cuando el valor es cero:
margin: 0;
en lugar de:
margin: 0px;
eliminar el cero cuando se usan valores decimales:
font-size: .8em;
en lugar de:
font-size: 0.8em;
6 Una última recomendación que desconocía y habría que verificar y evaluar: omitir el protocolo (http:, https:) en las direcciones URL de los archivos externos a menos que ese protocolo sea absolutamente necesario; en lugar de:
background: url(https://lh5.googleusercontent.com/xxxxxxx/imagen.jpg);
usar:
background: url(//lh5.googleusercontent.com/xxxxxxx/imagen.jpg);
Si optamos por esto, hay que tener en cuenta que la URL debe comenzar con //

En resumen: conviene leerlo, "masticarlo", aplicar aquello que nos parezca razonable y descartar el resto. Como siempre, sólo debe primar el sentido común y no aceptar todo lo que se diga como si fuera una verdad revelada e incontrovertible, lo diga quien lo diga.

14 comentarios:

Eugenia  

Tuviste problemas para acceder desde firefox o Chrome a blogger en estos dias? La unica forma que encontré de ingresar desde estos navegadores, fue borrando la cookie de blogger (a cada rato) y sin embargo, aun así,funciona bastante mal el servicio una vez dentro de la web, nadie dice nada al respecto y el status blogger indica un funcionamiento impecable (?) desde agosto del 2011 (???). Ha sido un verdadero dolor de cabezas en estos dias. Espero se solucione pronto.

saludos!

JMiur  

No he tenido ningún problema similar.

Responder
Gem@  

Google dice eso de "Haz lo que yo te diga no lo que yo haga"
Buenas recomendaciones las tuyas :)

JMiur  

Es lo que suele pasar con los "poderosos" ... mucho blablabla :D

Responder
Pablo  

Creo que lo más importante son los títulos y el atributo alt de las imágenes, lo demás son bobadas, por lo menos así lo veo yo. Saludos

Responder
Emanuel  

Hola tengo una duda con esto

background: url(UNA_IMAGEN) no-repeat 0 0 transparent;

se puede también definir el centrar antes del punto y coma, osea asi

background: url(UNA_IMAGEN) no-repeat 0 0 transparent center;

o si o si hay que escribir esto (y sino lo hubiera todos los navegadores lo entenderían perfectamente)

background-position:center;

JMiur  

Lo usual es colocar los dos valores de la posición, horizontal y vertical pero, puede ponerse uno solo en cuyo caso se toman ambos valores como el mismo:

background-position:center;
equivale a
background-position:center center;

En el ejemplo que das:
background: url(UNA_IMAGEN) no-repeat 0 0 transparent center;
sobran datos ya que 0 y 0 son la posición (equivalen a left top ) así que sería así:

background: url(UNA_IMAGEN) no-repeat center center transparent;
o
background: url(UNA_IMAGEN) no-repeat 50% 50% transparent;

Emanuel  

Perfecto gracias ya entendí mejor

Responder
Iván  

JMiur tengo una consulta, en los resultados de google, mi blo aparece con una fecha extraña a un costado de la descripción del blog, cómo puedo hacer para quitarla? Ya te había preguntado antes, pero me respondiste que era una metaetiqueta, o algo así y no me aclaraste como hacerlo. Perdoná las molestias. Gracias.

JMiur  

Lo que se ve es la fecha de la publicación de la entrada o de la última actualización. No puedes cambiar al forma en que Google muestra los resultados de búsqueda.

Responder
CristJian  

Si no cumplen... hay tabla!

Responder
Alejandro  

Muy buen resumen de buenas prácticas!! :D me lo leeré entero a ver qué más interesante hay por ahí!! muchas gracias!!

Responder
Alí Reyes H.  
Este comentario ha sido eliminado por el autor.
JMiur  

¿A qué fecha te refieres?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR