Versión Imprimible en tu web

Una adecuada versión imprimible para nuestros sitios web o blogs, debe brindan la opción de imprimir los contenidos con la menor cantidad de colores e imágenes posibles, ofreciendo una página sin los elementos de navegación.

Es importante ofrecer a los usuarios, una versión de nuestros contenidos de forma limpia de todo lo que lo rodea. El documento generado para impresión, puede contener un logotipo e incorporar la ruta del documento, para que este sea encontrado fácilmente.

Hay algunos tips que debes tomar en cuenta, para crear una versión adecuada de impresión de los contenido de tu sitio web o blog:

• No es recomendable el uso de columnas.
• Las tablas e imágenes deben tener un tamaño menor de 750 píxeles de ancho o usar tamaños en %.
• No usar frames.
• Procurar que las tablas no contengan color de fondo.
• Usar fuentes tamaño “normal” 12 puntos.
• Los objetos animados como gif, flash, videos, suelen dar problemas en la impresión, es recomendable si se quiere imprimir una demostración, ofrecer una versión con imágenes paso a paso con pie de imagen explicando cada una.
• El navegador Internet Explorer corta las imágenes si estas se encuentran entre 2 páginas.
• Eliminar los banners que contenga el sitio.

WP-PRINT, PLUGIN PARA IMPRIMIR DESDE WORDPRESS

El WP-Print es un plugin creado por Lester ‘GaMerZ’ Chan, el cual se puede utilizar para instalarlo en nuestro blog de WordPress. Para usarlo debemos descargarlo y descomprimir el paquete “print” hacia el directorio “wp-content\plugins\”.

El plugin debe activarse, para ello debemos acceder al menú “Plugins” ubicado en el panel de administración del blog. Luego acceder a la opción “Print” en la pestaña “Opciones”. Allí podremos realizar configuraciones básicas del mismo, por ejemplo: contenido a imprimir, comentarios, imágenes, vínculos, seleccionar una imagen que identificará esta opción y el texto.

Si deseamos que la opción imprimir aparezca en cada post debemos acceder al directorio de nuestra plantilla dentro de “wp-content\themes\”, editar el archivo “index.php” buscar el siguiente código:

 <?php while (have_posts()) : the_post(); ?> y agregar debajo:<?php if(function_exists('wp_print')) { print_link(); } ?>Quedando de la siguiente manera:<?php while (have_posts()) : the_post(); ?> <?php if(function_exists('wp_print')) { print_link(); } ?>

Si deseamos que aparezca la opción de imprimir en un lugar determinado, al escribir o editar un Post debemos insertar “[print_link]” donde la deseemos mostrar.

Descargar: Plugin WP-Print

GENERAR ARCHIVO PDF

Otra de las opciones al momento de manejar contenidos es la versión imprimible generando un PDF. Esta opción puede utilizarse para imprimir pero también puede descargarse como documento.

Las librerías FPDF creadas en PHP freeware, tiene como objetivo generar archivos en PDF con contenido específico. El siguiente código debe insertarse en un archivo PHP. Este archivo puede vincularse con una base de datos, realizando consultas y obteniendo el contenido a imprimir.

<?phprequire('fpdf/fpdf.php'); // Librería FPDF
$pdf=new FPDF();  // Creación de una instancia de la Clase “PDF_HTML”$pdf->AddPage(); // Método de la clase$pdf->SetFont('Arial','B',16); // Método de la clase, definir fuente, estilo, tamaño$pdf->Cell(40,10,'Maestros del Web'); // Método de la clase, posición a imprimir$pdf->Output();  // Método de la clase, salida al archivo PDF?>

Descargar: Librerías FPDF

VERSIÓN PARA IMPRESIÓN USANDO HOJAS DE ESTILOS CSS

El uso de los archivos CSS nos permite diseñar un estilo determinado para mostrar en la pantalla diferentes opciones de la impresión. Vinculando una hoja de estilo con el sitio.

En atributo “Media” identifica el uso de “screen/pantalla” y “print/impresora“. Al utilizar Dreamweaver como editor se facilita la selección de la opción, de lo contrario debemos buscar la línea de código y agregarlo.

El siguiente código es el que debe agregarse para el atributo print/impresora:

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

El siguiente código es el que debe agregarse para el atributo screen/pantalla:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

El siguiente código pertenece a una hoja de estilo la cual se mostrará en pantalla, se puede ver el uso de colores fuertes como el rojo y fuentes grandes. Este archivo puede llamarse screen.css (el nombre del archivo no afecta la función del atributo):

fondo { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #FF0000; border: thin solid #000000;}

Para la versión que será impresa utiliza pocos colores y puede nombrarse print.css (el nombre del archivo no afecta la función del atributo):

.fondo { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: underline;}

La siguiente página HTML vinculará estas hojas de estilo:

<html><head><title>Prueba</title><link href="screen.css" rel="stylesheet" type="text/css" media="screen" /><link href="print.css" rel="stylesheet" type="text/css" media="print" /></head><body class="fondo">Maestros del Web</body></html>

Descargar: código CSS ejemplo.

Debemos tener en cuenta que los estilos de ambos archivos deben tener el mismo nombre “fondo”, para cuando necesite seleccionar el archivo CSS que será usado para mostrar en “pantalla” e “impresora”.

FUNCIÓN DE LOS ATRIBUTOS

Para entender el funcionamiento de esta opción, podemos decir que cuando se carga una página en el navegador, esta importará la hoja de estilo con la opción “screen”, la cual puede contener imágenes de fondo, cargado de colores fuertes y demás.

Cuando vamos a ver una vista previa de impresión o a imprimir, esta importa la hoja de estilo con la opción “print” que hayamos creado, la cual debemos procurar que contenga la menor cantidad de colores, imágenes y estilos posibles, definir un tamaño de letra adecuado.

Finalmente, recordemos que la versión imprimible en nuestro sitio o blog, es una opción fundamental para los usuarios que les gusta tener acceso a la información de forma impresa. Esto es un valor agregado para el buen manejo de nuestros contenidos.

vía: Maestrosdelweb

Posted in: CSS