Los errores más comunes

El que tiene boca se equivoca y el que tiene un blog se equivoca más. Todos nosotros nos equivocamos al escribir códigos, al agregarlos o al "corregirlos". Eso no es problema, es lo más natural del mundo. El problema se genera al darnos cuenta del error y al tratar de solucionarlo.

Lo elemental es el diagnósitico y claro, eso es lo más complicado y solemos complicar lo simple hasta que alguien nos dice "el error es ese" y lo miramos como si fuera un genio sin darnos cuenta que, en realidad, estamos tan metidos en nuestro propio trabajo que no lleganos a ver lo que para cualquier otro es evidente.

No, eso no tiene solución, es parte de nuestra naturaleza como seres humanos pero, aún así, hay dos o tres cosas que podemos hacer antes de darnos por vencidos.

Cuando escribimos HTML, el error más común es olvidarnos que existen las etiquetas de cierre. En ciertos servicios esto no es importante ya que se supone (o se suponía) que no todas las etiquetas tienen un cierre ya que algunas se definen por si mismas: IMG INPUT BR META LINK PARAM, incluso, si alguien ha aprendido este lenguaje hace mucho tiempo, recordará que se decía que la etiqueta <P> tenía un cierre opcional </P> y claro, cuando nos dicen que es opcional, solemos optar por lo más cómodo que es no ponerla.

En estos tiempos las cosas han cambiado. No tanto porque ciertos sistemas sigan funcionando igual sino porque se tiende a aconsejar que toda etiqueta abierta tenga su cierre así que deberemos escribir: <img ....... /> <input ....... /> <br/> <meta ....... /> <link ....... /> <param ....... />.

En todos los casos, la barra de cierre / precede al símbolo > sin espacios intermedios.

Que todas las etiquetas estén cerradas tampoco garantiza que no haya un error ya que el orden en que están cerradas también es importante y es otro de los errores más comunes. La regla de oro es esta: "la última etiqueta abierta es la primera que debe ser cerrada"; por eso, siempre es bueno escribir usando sangrías de tal forma de saber dónde estamos y qué cosas hay abiertas.

Esto es un error:

<div>
.......
<p>  ....... <span> ....... </span> 
</div> 
.......
<p>

El DIV se cierra cuando la etiqueta P (que está dentro de este) aún está abierta. Si lo escribimos con sangrías es más sencillo ver cómo debería ser:

<div>
  .......
  <p>
    ....... 
    <span>
      .......
    </span> 
    .......
  <p> 
</div>

También los atributos de las etiquetas tienen sus problemas. El más común es usar el mismo ID en dos o más etiquetas que, a veces podrá ser inócuo pero debemos evitarlo a toda costa. Los nombres de los IDs son únicos y exclusivos, sólo puede haber uno por página; si queremos repetir propiedades, debemos usar el atributo CLASS.

El uso de las comillas debe ser cuidadoso. Al igual que con las etiquetas, hay un orden. Si abrimos una comilla doble y luego otra simple, se deben cerrar en ese mismo orden. En Blogger, las cosas se complican un poco porque las reglas varían ya sea si estamos escribiendo en un post, en la plantilla o en un elemento HTML.

En la plantilla, deberíamos usar comillas simples externas y comillas dobles en el interior. Estas últimas se convertirán en entities:

<a href='javascript:void(0);' onclick='miFuncion(&quot;unDato&quot;);'>

es lo mismo que esto que podemos usar tanto en un post como en un elemento HTML:

<a href='javascript:void(0);' onclick='miFuncion("unDato");'>

y es lo mismo que esto pero con comillas dobles de apertura y simples en el interior que es la sintaxis más común:

<a href="javascript:void(0);" onclick="miFuncion('unDato');">

La plantilla de Blogger es estricta, no admite que se coloquen símbolos como < y > salvo que sean etiquetas HTML. Si se usan dentro de un script, deben ser cambiadas por sus equivalentes. Lo mismo ocurre con símbolos como &. Esto, dará un error:

document.write('<li> alguna cosa </i>');

deberíamos escribir esto:

document.write('<li> alguna cosa </i>');

o colocar todo el contenido del script usando CDATA:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí el código ...
//]]>
</script>

Esta restricción no es válida en los elementos HTML, allí si usaremos CDATA porque el script no funcionará. Evetualmente, tampoco lo hará en algunos casos ya que por algún misterioso criterior, Blogger los cambia sin aparente razón.

En todos estos casos, si nos equivocamos y vemos que Blogger ha cambaido nuestro código, no conviene que busquemos esos cambios y los re-escribamos; salvo que el código sea muy simple y entendamos de qué se trate, lo mejor es eliminarlo y pegarlo otra vez desde el original; nos evitaremos dolores de cabeza.

Todos los scripts pueden tener sus problemas pero, el más usual es que, simplemente no se carguen y es eso lo primero que deberíamos chequear. Difícil si no se disponen de herramientas para ello pero no hay muchas alternativas. REsolvamos el primero, el más elemental, casi todos los errores por lo que me consultan son direcciones URL erróneas.

Lo mismo ocurre con las imágenes, favicons u otro tipo de archivos que alojamos fuera de Blogger. Una manera simple de verificar si son accesibles es copiar la dirección, pegarla en la barra de direcciones del navegador y abrirla. Si es una imagen, un script, o un SWF, debería mostrarnos el contenido del archivo. Si es otro formato, debería abrirse o bien descargarse. En ningún caso se abrirá una página web; si ocurre eso es que el servicio que estamos utilizando no admite el uso directo de esos archivos y que se trata de un sitio donde sólo se permite el alojamiento o bien, la URL que estamos usando es incorrecta.

Cuando escribimos CSS los errores son más sutiles pero existen. Sutiles porque el navegador los ignora, si algo está mal, simplemente sigue de largo. Eso, los hace más difíciles de detectar.

Todas las propiedades deben terminar con un punto y coma. Es cierto que la última de una declaración no y que la que está antes de la llave de cierre no lo requiere pero, mejor colocarlo siempre hasta hacerse el hábito.

Todos los valores de color en formato hexadecimal deben estar precedidos por el símbolo # y no debe haber un espacio entre este y el valor. También es importante recordar que esos valores pueden tener 3 o 6 caracteres pero, cualquier otra cantidad, será ignorada y no tendrá ningún efecto.

Son muchos los casos donde se usan valores que no tienen efectos. El navegador los ignora porque ciertas propiedades no los admiten. Por ejemplo, padding no admite valores negativos ni la palabra auto.

Si utilizamos palabras claves como !important, esas palabras deben tener un espacio de separación; lo mismo ocurre con propiedades con varios valores. Esto es un error ya que entre el paréntesis de cierre y la palabra no-repeat falta un espacio:

background: red url()no-repeat left top;

No debemos agregar etiquetas HTML dentro de las definiciones CSS por lo tanto, si se quieren colocar comentarios, no se debe usar la sintaxis HTML. Esto es un error:

<style>
  body {color: red;}
  <!-- este es un comentario -->
  div {float: left;}
</style>

Los comentarios simples dentro de las etiquetas <style> </style> se escriben así:

/* este es un comentario */

Esto, no es un problema de buena sintaxis exclusivamente, hacerlo de manera errónea hará que no funcione.

Blogger tiene una etiqueta especial:

<b:skin><![CDATA[
  .......
]]></b:skin>

que equivale a la etiqueta:

<style id='page-skin-1' type='text/css'><!--
  .......
--></style>

Por lo tanto, dentro de <b:skin> </b:skin>, no debemos agregar una etiqueta <style> ya que no se nos advertirá del error (porque usa CDATA) y el resultado será impredecible.