JMiur [E]

Por defecto, en Configuración | Formato veremos que tenemos definido algo así:

Convertir saltos de línea
Si seleccionas "Sí", los retornos forzados únicos introducidos en el Editor de entradas se sustituirán por etiquetas <br /> únicas en tu blog, y los retornos forzados dobles se sustituirán por dos etiquetas (<br /><br />).

Esto, hace que escribir en el editor de entradas sea sencillo; ponemos:

Este es un párrafo ...
... y este es otro ....

y veremos que al publicar la entrada, una línea está debajo de la otra.

Es lo que pasa en Blogger y también en al mayoría de los servicios de este tipo. Es obvio que eso ayuda pero, para quién no está informado de cómo funcionan las páginas webs, puede implicar problemas cuando se intentan hacer cosas diferentes o escribir código HTML de manera directa.

Lo que debemos entender es que los navegadores son bobos porque las computadoras son bobas y sólo hacen lo que nosotros les decimos que hagan así que si queremos que dos párrafos estén en dos líneas diferentes, en realidad, debemos indicárselo explícitamente y Blogger, lo que hace es simplificarnos la tarea, agregando el código extra necesario ya que para que veamos esos dos párrafos anteriores, en realidad, deberíamos escribir lo siguiente:

Este es un párrafo ...<br/>... y este es otro ....

que es lo que veremos si miramos el código fuente de nuestro sitio.

Como decía, el problema surge cuando ponemos otras cosas y escribimos etiquetas en diferentes líneas, allí se agregarán etiquetas <br/> extras, dejando líneas en blanco indeseadas. El caso más evidente son las tablas pero también ocurre con listas y con cualquier otra etiqueta:
<div>este es el párrafo anterior a la lista ...</div>
<ul>
<li>item UNO</li>
<li>item DOS</li>
<li>item TRES</li>
<li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>
este es el párrafo anterior a la lista ...


  • item UNO

  • item DOS

  • item TRES

  • item CUATRO


... y este es el párrafo siguiente.
Como se ve, entre los párrafos y los items de la lista se han generado espacios que no son otra cosa que etiquetas <br/> ya que cada item está escrito en una línea diferente. Para eñimianlos y que quede "normal", deberíamos escribir todo eso en una sola:
<div>este es el párrafo anterior a la lista ...</div>
<ul><li>item UNO</li><li>item DOS</li><li>item TRES</li><li>item CUATRO</li></ul>
<div>... y este es el párrafo siguiente.</div>
este es el párrafo anterior a la lista ...

  • item UNO
  • item DOS
  • item TRES
  • item CUATRO

... y este es el párrafo siguiente.
Esto pasará con cualquier código y de allí que muchas veces se diga "escribir todo en una sola línea", justamente, para evitar esos espacios indeseados que incluso, pueden hacer que ciertas cosas no funcionen. Por ejemplo, si usamos la etiqueta style o la etiqueta script en una entrada y escribimos en líneas separadas, no funcionarán en absoluto.

Tanto en el nuevo modelo de editor como en el que está en Blogger Draft, si desplegamos las Opciones de entrada veremos una alternativa que nos permite definir si vamos a utilizar esa configuración en cada post en particular:

Editar los saltos de línea de HTML
Pulsar "Intro" para los saltos de línea
Utilizar etiquetas <br />

Pero también podemos hacerlo de otro modo, creando alguna clase CSS que agregamos a nuestra plantilla y utilizándola para identificar sectores donde no queremos que Blogger inserte saltos de línea automáticos. Le damos un nombre cualquiera y simplemente, le decimos que no los muestre:
.noBR br {display:none;}
Con eso, podríamos escribir algo así:
<div>este es el párrafo anterior a la lista ...</div>
<ul class="noBR">
<li>item UNO</li>
<li>item DOS</li>
<li>item TRES</li>
<li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>
Y los saltos de línea de la lista serían ignorados:

este es el párrafo anterior a la lista ...

  • item UNO

  • item DOS

  • item TRES

  • item CUATRO


... y este es el párrafo siguiente.

15 comentarios:

Felipe  

Si... yo creo que eso nos ha sucedido a todos en algun puntico de nuestra historia en Blogger. :D

Casi siempre creo mis entradas a través de la pestañita de Edición en HTML y tengo marcada la opción de utilizar los <br/> de tal manera que lo que yo escribo sea lo que se muestre aunque a veces en canson ponerse a poner todos los <br> de la entrada.

Por cierto, esto me pone a pensar que sería genial que no necesitaramos "parsear" el codigo HTML dentro de los comentarios o dentro de algunas partes de la edición en HTML de la plantilla, eso si nos ahorraria unos cuantos segunditos y algunos dolores de cabeza. :D

Responder
pào monti'kopp  

Hola JMiur
Te escribo porque tengo un problema horrible con el buscador de google en mi blog y no logro solucionarlo... en firefox se ve excelente; con las esquinas redondeadas y en la posición exacta, pero en explorer se descuadra y no acepta los estilos css... HELP!!! :(

Responder
Oloman  

Interesante opción. Suelo usar Intro para los saltos de línea y eso provoca que tenga que retocar a mano, tal y como comentas, las listas... y otras cosas. Gracias.

Responder
Vito López  

gracias por este aporte, tomare muy en cuenta esto ya que he tenido algunos inconvenientes

Responder
Graciela  

Gracias Jmiur, ese br es muy hincha :X

Responder
piXel  

Algo raro que me pasa es que cuando estoy en el editor de entradas para publicarcas..

paso de la solapa editar html a la solapa redactar y se me van agregando espacios entre las listas y las tablas por cada vez que cambio..

Responder
JMiur  

Felipe:
No creo que jamás ocurra eso para los comentarios. En realidad, ningún servicio usa ese sistema en los comentarios; no sé si sería posible.

pào monti'kopp:
Ls esquinas redondeadas no funcionarán en IE hasta que salga la nueva versión. En cuanto al resto, en IE8 se ve bien excepto el borde que no entiendo por qué no es tomado. Busca esta parte y agrégale la palabra !important:

input.gsc-input {
...........
border:1px solid #252525 !important;
}

Oloman:
Es algo que uso habitualmente justamente por eso, hay ciertas listas o códigos que i uno escribe sin saltos de línea son complicadísimos de editar.

Vito López
Todos hemos sufrido estos problemas :D

Responder
Pozo+10™  

Urgente ayudaa por favor! Observa http://www.planeta-grandt.com.ar/search/label/gOl%C3%A9adores%20Apertura%202010
Por que la sidebar derecha se ve debajo??? es una mal formación en un post creo no???

Responder
Pozo+10™  

Ya lo acomode JMiur tuve que modificar todo el post, el HTML afectaba, había algo mal formado. Saludos!

Responder
JMiur  

Graciela:
Es muy hincha pero a la vez es muy cómodo para escribir. NAda es perfecto :D

piXel:
Sí, eso ocurre dependiendo del tipo de navegador o del tipo de etitor que estés utilizando.

Responder
Karla  

Hola JMiur

Pues yo me complique la excistencia un rato, con algo que parece tan sencillo como seleccionar opciones:

Trate de colocar una caja de textarea para mostrar código y a/nadiendo la función onclick para seleccionar el contenido, primero dentro del código me aparecia las etiquetas /br en cada salto en linea, imaginate como se veía el códido |O , después selecciones intro y bendito que se soluciono aunque tuve que recolocar cada parrafo, pensé que tenia que colocar manualmente cada etiqueta /br , pero no basto con mover los parrafor con enter...:P

Uff que bochorno!

Responder
JMiur  

Los editores de Blogger se están poniendo "pesados" ; andan haceindo cosas raras :D

Responder
piXel  

Con respecto a internet explorer y los saltos de líneas hay algún tema especial??

Lo digo porque por ejemplo está pag..
http://solomochila.blogspot.com/2008/01/mapa-del-blog.html

Se ve dentro de todo bien con firefox..

pero cuando la abro con internet explorer no respeta para nada los saltos de línea!..

Responder
JMiur  

Los saltos de línea son exactamente lo mismo en ambos navegadores; eso lo puedes verificar mirando el código fuente resultante; el problema está en el diseño gráfico de ese sector y de las propiedades que deberías colocar en la lista de la izquierda y los textos de la derecha.

Como la lista UL flota, eso descompagina las cosas y los navegadores las interpretan de manera diferente.

Responder
salvador22  

muchas gracias , es lo mejor que he encontrado en toda la red

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