JMiur [E]

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('&lt;li&gt; alguna cosa &lt;/i&gt;');
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.

18 comentarios:

Unknown  

Hola, otro error común y bastante difícil de solucionar es poner etiquetas de tipo bloque dentro de etiquetas tipo inline...

por ejemplo:
< span > < div > algo < /div > < /span >

estaría mal y un buen validador nos lo dirá.

Saludos.

Responder
Unknown  

Jmiur no se puede mirar la bolsa negra, ni por correo ni por el blog

qué sucede aquí? :S

Ahhh ésto lo dejo para cuando se me prendan las lucecitas :) estoy con bajo consumo ;)

Responder
Gem@  

Que buena entrada J.Miur, que buena entrada. Con esa información es extraño que alguien no encuentre ese error de la plantilla.

Responder
JMiur  

- Los "errores" de validación no son "errores". Ese ejempl oque has colocado, funciona´ra perfectamente, dependiendo de las propiedades que se le den a cada etiqueta.

Graciela: no he visto problemas pero ... todo es posible :D

Gem@: Lo extraño sería no cometerlos una y otra vez. Si errores, esto sería muy aburrido :D

Responder
EM2.0  

Volvemos a la máxima que siempre olvidamos "ante cualquier problema, primero la solución más simple". Que no se que es un "ententitie"

Responder
Riverloom  

Saludos J.Miur, buena entrada y fantástico blog :) soy un adepto silencioso.

Sólo quería hacer un apunte, antes intentando por millonesima vez poner un javascript en mi blog (y como siempre no he podido), me he dado cuenta que en la plantilla , blogger me convertía el carácter < en &38; (mas o menos,creo q era ese .. me ha sonado a código ASCII con % ) y como siempre al pegar el código y intentar guardar .. ale a bailar flamenco con los caracteres. Bueno , solo era por si sabias pq hay esa variación en el carácter (siendo todos validos igualmente) al guardar la plantilla , puede ser que ni blogger se aclare? será cuestión de seguir probando :)

Bien, sin más, que quejarme de Blogger y felicitarte por el blog, me despido con un cordial saludo.
ed.

Responder
JMiur  

Pués las entities (y no encuentro una traducción adecuada), son la forma de escribir caracteres reservados. Caracteres como < > & se escriben como como &lt; &gt; &amp;

Eso es así porque la definición del DOCTYPE de la página así lo exige (por l omenos, en teoría) :D

Todos los caracteres tienen esas equivalencias; la é por ejemplo, se escribe &eacuote; Esta es una lista de esas equivalencias.

Responder
EM2.0  

Que inculta soy, por dios!, y yo creyendo que mi ordenador hacia cosas raras.

Responder
JMiur  

Dña. Urraca: Pués, eso deinculta es una exageración :D Lo dudo mucho :D

Daniel: Sin duda que si y que seguiremos equivocándonos :D

Responder
Unknown  

durante dos días no pude ver las entradas en la Bolsa, tal vez sea la compu, me daba error pero no recuerdo el número, hoy si :D

Responder
JMiur  

Ah me alegro que se arreglara. No, en estos dos dias no hubo problemas pero, ya se sabe que puede ocurrir cualquier cosa :D

Responder
MARCELO RODRIGUEZ  

a mi me aparece cuando pongo la keyword o en descripcion esto: No se ha Podido Analizar su plantilla, formada Porque no está bien. Asegurese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: la instrucción de proceso debe comenzar con el nombre de la meta. es un desastre y me cambia la posición de las palabras no entiendo nada

Responder
JMiur  

Puede ser cualquier cosa, habría que ver el código que estás utilizando; lo más probable es que le falte la barra de cierre a la etiqueta META:
<meta .................. />

Responder
Anónimo  

hola JMuir tiempo que no tenia problemas con blogger ... ahora al estar en alguna pagina o entrada de mi blog y querer editar una entrada o widget desde alli (con la llave que aparece debajo "editor") me dice la pagina que esta buscando en AnimeTop no existe ...

Responder
JMiur  

No sé a qué llave te refieres o en que blog te pasa eso.

Responder
Anónimo  

me refiero al editor rapido de blogger y el blog es http://ani-top.blogspot.com

Responder
JMiur  

Si a lo que te refieres es a las opciones de la barra de wibiya, eso, imagino que debe ser configurado en ese servico pero descoozco el método.

Responder
Anónimo  

bueno ya se soluciono solo ni idea como... pero ahora me surge otro problema ... intento insertar flash (videos de youtube y demas) en las "paginas" de mi blog pero no se ven .... se ven unicamente en las entradas o en un widget.

Responder

¿Quiere dejar un comentario?

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

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