JMiur [E]

Yo no suelo usar impresora, la tinta es demasiado cara y mi auto-control demasiado escaso así que, hace mucho que la regalé y ya no me preocupo del tema. Según me contó Ignasi, de El meu mon - My world, él tampoco suele utilizarlas pero, le sacó las telas de araña, la desempolvó y se dedicó a intentar armar algún tipo de código para Blogger que permitiera imprimir los posts con comodidad.

El resultado, puede verse en el artículo de su blog, que trataré de resumir aquí.

Todo se basa en lo que la Wikipedia define como wiki Printer friendly y es una adaptación de esos códigos a la estructura de Blogger.

Primero que nada, agregamos las siguientes propiedades de estilo a la plantilla. Lo más fácil es colocarlas justo antes de la etiqueta </head>:
<style media='print' type='text/css'>
#navbar-iframe {display: none; height: 0px; visibility: hidden;}
.noprint {display: none;}
body {background:#FFF; color:#000;}
a {text-decoration: underline; color:#00F;}
}
</style>
media es un atributo cuyo valor especifica el medio en que se utilizarán ciertas propiedades CSS (la pantalla, el papel, un sintentizador de voz, etc). Normalmente, utilizamos que no es necesario escribir ya que se trata del valor por defecto, en este caso, con media="screen"media="print" indicamos que ciertas propiedades sólo se aplicarán cuando utilicemos una impresora. Ver detalles en w3.org.

Básicamente, todo elemento donde coloquemos class="noprint" no será impreso. Cada uno deberá definir cuáles son los elementos que nos serán impresos pero, la lógica diría que, por ejemplo, deberíamos ocultar la sidebar, los comentarios o el header del blog, simplemente, porque lo que nos interesa es el contenido del post y no la página completa, tal y como la vemos en la pantalla.

Sea como sea, habrá que tomarse el trabajo de buscar en la plantilla los sectores que se ocultarán y, enmarcarlos entre estas dos etiquetas:
<span class="noprint">
[ el sector que ocultaremos ]
</span>
Por último, hay que darle al visitante algún tipo de enlace donde pueda hacer click. Puede ser un texto:
<a href="javascript:window.print()">Imprimir Página</a>
o una imagen:
<a href='javascript:window.print()'><img border='0' src='URL_imagen'/></a>
Ignasi recomienda mostrar el enlace en la sección de comentarios pero, tal como aclara, puede ser ubicado en cualquier otro lugar.

Muy buen trabajo para un tema sobre el que poco se habla.

18 comentarios:

Ignasi  

Ei JMiur!

Lo has publicado, genial!!

Todo hay que decirlo, que yo como aquel quien dice, no he hecho nada, entre la ayuda del Vagabundia e investigando por internet, se ha podido hacer esto :)

Gracias!

Responder
JMiur  

Lo había prometido y cumplí. Tarde pero aquí está :)

Siempre me pareció que era un aporte interesante, algo que no se ve mucho y no te quites méritos, unir los pedazos del rompecabezas no es tarea sencilla :)

Responder
ignacio  

Gracias por tu aportació.

Lo insertado incando cuatro excepciones: header, sidebar, footer y comments; y me imprime toda la página igualmente.

Supongo que será porque no sé dónde colodar los class=print>header

Si eres tan amable de aclararmelo, te estaría muy agradecido

Responder
JMiur  

En principio, lo que hay que marcar son los bloques que no deseamos imprimir.

Por ejemplo, para no imprimir el header, lo metemos dentro de esa clase noprint:

<span class="noprint">

<div id="header-wrapper">
..................................................
</div>

</span>

Creo entender que esa es la pregunta pero no estoy seguro. Cualquier cosa, me lo aclaras.

Responder
ignacio  

Gracias por tu rápida respuests.

Yo puse esto -por lo que te entendí y sigue sin funcionar:


style media='print' type='text/css'>
#navbar-iframe {display: none; height: 0px; visibility: hidden;}
.noprint {display: none;}
body {background:#FFF; color:#000;}
a {text-decoration: underline; color:#00F;}
}
/style>
span class="noprint">

div id="header-wrapper">
div id="sidebar-wrapper">

/div>
/div>
/span>

He tenido que quitar el símbolo < psrs poder enviar el comentario

Seguro que, como estoy aprendiendo autodidactamente de lo que veo por ahí y deduzco, hay algo que s me escapa.

Saludos

Responder
Ignasi  

Hola Ignacio,

A ver, la parte del codigo que has puesto en tu ultimo comentario:

<style media='print' type='text/css'>
#navbar-iframe {display:none ; height:0px;visibility:hidden;}
.noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
</style>

Lo tienes que poner entre los codigos: <head></head>

A parte, tienes que "indicar" la parte de tu blog para que no se imprima (header, sidebar, etc...) con la funcion: <span class="noprint">..</span> Dentro de las secciones ubicadas en <body></body>

A ver si así se soluciona ;)

Responder
JMiur  

Gracias por la colaboración, Ignasi, espero que esto aclare el tema. Como no uso impresora, me resulta difícil probar el tema.

Responder
Hîthwen Fëadür  

Pero con esto se imprimen todos los post q haya "en portada", no solo en el que has clickado ¿qué modificacion habría q hacer?

Responder
J.C.Romo  

Lo único que no he conseguido es que el post se imprima, no como una columna- sino ocupando el ancho del folio. No se si esa cuestión es solucionable.
Un saludo
Juan Carlos

Responder
Rubén  

Yo sueño con una aplicación para insertar en mis blogs que sea capaz de imprimir a pdf el post concreto con sólo pulsar un botoncito ubicado al final (tipo digg this o menéame...) sería esto posible????

Responder
JMiur  

Para eso es necesario algún tipo de servicio que lo provea. La verdad, no conozco ninguno pero estaré atento.

Responder
Gem@  

Yo tampoco uso impresora, así que no puedo probar para ver que tal resulta, pero es lo que un amigo está buscando así que gracias a los dos ;)

Responder
JMiur  

La idea es lógica así que no debería haber problemas.

Responder
Fénix Jurídico.  

tengo un problema, no se imprime toda la entrada, sólo imprime la primera página y la última

Responder
Claudio - Poca Tinta  

Hay alguna manera de poner un enlace para crear un PDF, como el que tienes en la barra lateral, pero usarlo por post. Es que eso de imprimir no va con mi forma de pensar ahora.

Tendré varias consultas, espero sean pocas, es que estoy cambiando mi plantilla, por eso de ordenar todo.

Saludos amigo y tu trabajo es genial y en el blog también.

Responder
JMiur  

La opción de guardar como PDF sólo funciona en posts individuales así que no entiendo bien la pregunta. El botón puede ponerse debajo de los posts para que sea más explícito; eso no es problema.

Responder
Claudio - Poca Tinta  

OK, es que la función se demoraba mucho y pensé estaba convirtiendo todo el blog.

Sorry!... :D

Responder
Maite  

Ma parece un post muy interesante. Cuando resuelva este otro tema previo me meteré con ello. El caso es que cuando imprimo un par de páginas de mi blog a veces la línea de cambio de página no se imprime o queda rasurada. Creo que es un tema de configuración de blog más que de configuración de impresión, porque cambio márgenes de impresión en Internet Explorer y sigue igual, ya en papel, ya en vista previa de impresión, ya en copia a pdf, casi siempre hay algún problema. Y me pasa lo mismo desde distintos ordenadores.¿Me podéis ayudar? Gracias.

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