Opciones para crear páginas web amigables de impresión

Estás en Inicio / Editorial / Desarrollo Web

06.05.2008

Opciones para crear páginas web amigables de impresión

Por Reynier Matos Padilla | 6,554 Lecturas
Archivado en: CSS, Desarrollo Web

Generalmente nos resulta más cómodo leer el contenido de una web en un papel impreso que en la pantalla de nuestro ordenador; es por eso que en este artículo abordamos los aspectos fundamentales a tener en cuenta en el momento de implementar en nuestro sitio las páginas para impresión.

Una página web amigable para impresión es aquella que al imprimirla se puede leer perfectamente ajustándose a las características de una lectura en papel, pero que al mismo tiempo en la pantalla se muestra con toda la elegancia, diseño y colorido necesario.

Para llevar a cabo ésto, modificamos su apariencia, eliminando los anuncios publicitarios, decoraciones, elementos de navegación, vínculos y otros aspectos que no son relevantes cuando el contenido se encuentra en papel.

Teniendo en cuenta que a la mayoría de las personas prefieren leer sobre una hoja de papel que en la pantalla del ordenador, es importante considerar esta opción en el diseño de nuestros sitios web. Si le damos al usuario la posibilidad de imprimir el contenido de las páginas también estaremos haciendo nuestro sitio más usable.

Utilizando CSS

La forma ideal de implementar un diseño especial para impresión es utilizando las hojas de estilo agregando una extra y especificando mediante la propiedad media, que es para impresión y no para verse en pantalla.

Para esto es necesario escribir el código que mostramos a continuación dentro de la etiqueta <HEAD> de la página.

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

Como podemos ver además del archivo CSS que siempre se incluye, definimos el de impresión para que los dispositivos lo interpreten cuando hagamos el llamado a dicha opción.

Consejos al crear nuestra hoja de estilo

Elementos decorativos

En la hoja de estilos destinada a impresión tenemos que tomar en cuenta varios aspectos importantes como ocultar elementos de navegación, gráficos decorativos, o colores de relleno e imágenes de fondo, entre otros, todo ésto con la finalidad de que únicamente salga impreso el contenido principal y algún elemento extra como el nombre del sitio o dirección del enlace.

Otro aspecto a tener en cuenta es el color de fondo, este debe ser diferente al color de la letra, de manera que el contraste entre éstos permita leer claramente el texto. Recomendamos que el fondo sea blanco con la fuente negra, sin colores ni imágenes de fondo, ya que esto provocaría un gasto de tinta excesivo e innecesario además que se haría el texto ilegible.

Fuente de impresión

Las fuentes recomendadas para el diseño de un sitio web generalmente son Verdana, Arial y Helvetica; sin embargo para una buena lectura en el papel las fuentes de la familia Serif y la muy conocida Times New Roman son las idóneas.

También será necesario considerar el tamaño de la fuente. Debe ser suficientemente legible; no debe ser muy grande para que no ocupe mucho espacio, ni muy pequeña que no se entienda lo que está escrito. El tamaño recomendado está entre 12 y 14 puntos.

Ancho del contenido

Es muy recomendable que las tablas, div y en general todas las etiquetas que se utilizan para organizar el contenido en una página tengan establecido el ancho de forma relativa, es decir, utilizando por cientos en la propiedad width de la etiqueta.

De esta forma se garantiza que el contenido se ajuste automáticamente al tipo de hoja que seleccione el usuario en el momento de la impresión. A continuación mostramos un ejemplo del ancho relativo.

<div width="100%">
<!-- Contenido  -->
</div>

También es posible establecer un ancho fijo para estas etiquetas, pero en este caso el ancho total de la página siempre debe ser menor a 600 píxeles. El inconveniente de esta variante es que, al no ajustarse automáticamente al tamaño del papel, se podrá imprimir en menor cantidad de tipos de hojas.

Si se establece además los tamaños de fuente de forma relativa daremos también la posibilidad al usuario de seleccionar en su navegador el tamaño de fuente en la vista de impresión.

Implementando el llamado a Impresión

Para aumentar un poco la usabilidad del sitio podemos agregar botones o textos directamente en la página que hagan el llamado a la opción de Imprimir en el navegador, para ello la forma más sencilla es utilizando el evento print() del javascript como se muestra en el siguiente código de ejemplo.

<a href="#" onclick="javascript:print();">Imprimir</a>

Al invocar este método ocurre algo similar a la opción Imprimir del navegador, que generalmente se encuentra en el menú Archivo. Al pinchar sobre el texto del ejemplo se muestra el cuadro de diálogo de impresoras para que seleccionemos a la que se enviará la página y si es necesario ajustemos algunos parámetros de impresión como cantidad de copias, orientación de la hoja, entre otros.

Alternativas al uso de Hojas de Estilo

Otra variante para implementar una versión de Impresión en nuestro sitio es permitir que el usuario descargue el contenido de la página en un documento de tipo PDF o DOC especialmente formateado y listo para imprimir.

Esta opción es muy útil por ejemplo, cuando un artículo es muy extenso y es fraccionado en varias páginas en el documento descargado estará el contenido completo y no será necesario imprimir por separado cada una de las páginas web que componen el artículo.

Para llevar ésto a cabo podemos generar los archivos tipo PDF de forma dinámica utilizando la librería FPDF escrita en PHP, para ello necesitaremos la programación de la función que genere dichos archivos, los cuales pueden visualizar utilizando un visor de este tipo de documentos como Foxit Reader o Acrobat Reader.

Algo a destacar es que en esta forma de implementación los vínculos embebidos de la página pierden su utilidad y significado al ser impresos (a menos que el archivo se genere con ellos), pero una alternativa podría ser especificar estos vínculos como pié de página en los documentos para que no pierdan su función.

También se pueden ofrecer descargas de archivos en formato .DOC los cuales se pueden visualizar utilizando el procesador de texto Word que está incluido en el paquete Office de Microsoft o también con el OpenOffice de distribución gratuita.

Otros aspectos importantes

Es muy importante que el logo del sitio esté presente en la versión para impresión y de este modo identifique el contenido de la página además para que el usuario sepa con claridad a qué sitio pertenece la página.

También es útil mantener la ruta de navegación o breadcrumbs, como también se le conoce; ya que esto indica al usuario la estructura jerárquica dentro del sitio de la página impresa. Un ejemplo de ruta de navegación es este: “Inicio > Artículos > Desarrollo Web > Impresión”.

Las páginas que utilizan marcos en su diseño generalmente presentan problemas para su impresión, por lo que es muy recomendable no utilizar marcos o frames en sus páginas.

Las imágenes animadas y vídeos flash que se encuentren en el documento en el momento de la impresión perderán su objetivo, por lo que recomendamos que en la vista de impresión se sustituyan por una descripción de texto que ayude al usuario a recordar su contenido.

Califica esta nota:

(7 votos, promedio: 4.71 de 5)

Loading ...

Sobre el autor

Reynier Matos Padilla
Administrador de sistemas y diseñador web. Con experiencias en tecnologías ASP.NET, PHP, Javascript, CSS, DHTML, AJAX, servicios web, y XML.

Comentarios

21 comentarios en total.

Juan Manuel Lemus 06.05.2008 - 17:01 - #

Interesante artículo. La verdad, realmente importante el utilizar este tipo de recursos. La versión imprimible siempre es importante pero lamentablemente, casi nunca la solemos incluir en los proyectos.

Importante utilizarla desde el punto de vista accesibilidad (o al menos, yo lo colacaría en ese apartado).

Excelente artículo….
juegos multijugador 07.05.2008 - 02:47 - #

Muy interesante!
Y puestos a ser amigables con el usuario, en vez de hacer la llamada a javascript de este modo:
Imprimir
¿No sería más adecuado hacerla así?
Imprimir
juegos multijugador 07.05.2008 - 02:49 - #

Quería decir
href=”javascript:print()”

en vez de:
href=”#” onclick=”javascript:print();”
nodo 07.05.2008 - 08:50 - #

Para poner la url de los enlaces se puede usar lo siguiente:

@media print{
a[href]:after{

content:” “;

}

}
nodo 07.05.2008 - 08:53 - #

Vaya, no paso el filtro. Haber ahora.

@media print{
a[href]:after{
content:” <” attr(href) “>”;
}
}
Programacion web y tecnologias informaticas 15.05.2008 - 10:21 - #

Las dos versiones del vínculo de impresión son válidas. Ambas se ejecutan de la misma forma utilizando el mismo javascript.

Quería decir
href=”javascript:print()”

en vez de:
href=”#” onclick=”javascript:print();”

Saludos y suerte!
afas 17.05.2008 - 16:09 - #

hola
carlos 18.05.2008 - 11:35 - #

muy bueno tu blog
nico 18.05.2008 - 18:09 - #

entren a la pagina http://www.club-aero.es.tl esta buenisima deja tu comentario, dale man te esperamos en la pag…
Irner Ceballos 20.05.2008 - 09:03 - #

Muy interesantes tus artículos, sugerencias, etc, pero me gustaría que suministraras información para diseño y elaboración de web para principiantes se que lo harías muy bien. Gracias.
victor manuel 27.05.2008 - 16:38 - #

hola ILOE YOU MY BEYBY FOREBEER IN THE SEX IN FOR THE ILOVE
osiris camacho 27.05.2008 - 16:42 - #

me parece interesante y espero poder lograr crear una pagina amigable yo sola gracias por sus recomendaciones
KIBER 27.05.2008 - 16:43 - #

ME PARECION MUY INPORTANTE TUS ARTICULOS Y PERDONA EL MENSAJE PASADO NO LO ESCRIBI YO LOL ESCRIBIO UNA
AMIGA SOLO QUE ESTABA LISTO PARA ESCRIBIR PERO ME ABLARON Y SE PUSO A ESCRIBIR OK BYE
KIBER 27.05.2008 - 16:47 - #

LA VERDAD ME PARECIO SUPER INPORTANTE POR QUE AMI MEGUSTA MUCHO LA TECNOLOGIA
Y QUIERO ACER MI CARRERA DE ERRAMIENTAS DE COMPUTO Y LA VERDAD ME INTERESO MUCHO Y OGALA TE VALLA BVIOEN Y TE DECEO MUCHA SUERTE OK BYE
TIENES MI CORREO A GREGAME OK BYE
eduardo 27.05.2008 - 16:50 - #

ps esta
algo bien
la pagina
pero ps
si le
pusieras
otras
cositas
por k
la berdad
enfada
leer tanto
y ps si
k pusieras
instrucciones
para principiantes
VICTOR MANUEL PEREZ P. 27.05.2008 - 16:50 - #

LA VERDAD ME PARECION MUY IMPORTANTE TU ARTICULO Y MAS PORQUE ME GUSTA MUCHO LA TECNOLOGIAY OGALA Y YO TANBYEN PUDIER5A HACER UN ARTICULO IGUAL AL TUYO Y ALOMEJOR MUCHO MEGOR OK BYE TIENES MI CARREO AGREGAME OK
Mangel 29.05.2008 - 11:12 - #

Muy interesante, me ha sido de gran ayuda, gracias
alejandro Chavez 30.05.2008 - 08:17 - #

excelente articulo muy recomendable
Felix 09.06.2008 - 01:34 - #

Estas aportaciones siempre son muy utiles, gracias a los amigos que comentan y nos dan pautas para mejorar en nuestro conocimiento
annyck 14.06.2008 - 17:27 - #

nesecito crearme mi pag web hola a todos y quien quiera mi msn este es anny-ck@hotmail.com
Xavier 16.06.2008 - 23:33 - #

Me parece que hay una herramienta de Adobe que también ayudaría bastante en este sentido.