icono LinkedIn
Raúl Expósito Díaz

Consultor tecnológico de desarrollo de proyectos informáticos

Ingeniero en Informática por la Universidad Carlos III de Madrid, especialidad en IA

http://raulexposito.com/ - Perfil LinkedIn.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-02-08

Tutorial visitado 6.206 veces Descargar en PDF
Cómo generar versiones imprimibles de páginas web

Cómo generar versiones imprimibles de páginas web

1. Introducción

En este gran océano de textos, imágenes y enlaces que es Internet hay algunas cosas que merecen la pena ser impresas. Estoy seguro de que alguna vez has necesitado imprimir alguna página web y no has podido hacerlo directamente porque la impresión iba a quedar mal: hay imagenes que se descolocan, existen fondos y textos con colores, se muestran el menú, el encabezado y el pie de página de la web, etc. En definitiva la impresión de la página web, en el mejor de los casos, es la propia página web en sí. No imprimes únicamente los contenidos, sino lo que ves tal cual.

La solución más habitual a este problema es el de seleccionar todo el texto, copiarlo y pegarlo en algún procesador de textos, y ya una vez allí con más o menos esfuerzo dejarlo como queremos e imprimirlo.

Pensemos por un momento en nuestros lectores. ¿Realmente queremos que hagan todo ese esfuerzo?, ¿no sería mejor para ellos el que les facilitasemos la impresión de nuestros contenidos?

Imaginemos un caso. Hemos creado una página en el que hablamos sobre temas del espacio. Hemos puesto un fondo negro con estrellas y unas letras blancas. ¿Os imaginais el gasto de tinta y de toner que tiene que hacer nuestro querido y amado lector si manda a imprimir esa página?



En este tutorial os vamos a explicar una manera de conseguir que los cartuchos duren bastante más y de lograr que nuestro lector no se arrepienta de haber mandado a imprimir nada nuestro. Lo que haremos será jugar con los estilos de la página, de tal modo que cuando mande a imprimir directamente la página anterior le salga algo como lo siguiente:



La imagen se corresponde con la vista preliminar de firefox, la cual podeis encontrar pulsando sobre [ Archivo > Vista Preliminar ]. El fondo es blanco, las letras negras ... se imprime bastante mejor y nuestra impresora lo agradece.

Podeis hacer la prueba sobre cualquier entrada de la wikipedia, por ejemplo sobre ésta. Si navegais por la página vereis el logo arriba a la izquierda, la barra lateral, el buscador, etc. pero si mandais la página a imprimir directamente lo que vereis serán únicamente los contenidos. Os invito a que hagais la prueba con la vista preliminar tal y como os he indicado anteriormente.

Tambien os invito a que probeis que las imágenes que hemos puesto anteriormente son de verdad. Para ello podeis probar el ejemplo directamente o descargarlo completo utilizando los siguientes enlaces:

Y es a partir de ahora cuando os explicamos cómo conseguirlo.

2. La página HTML de ejemplo

Antes de nada es necesario que tengamos clara una cosa. Cuando mostramos una página web tenemos por un lado los contenidos y, por otro, los estilos.

  • Los contenidos son las letras, palabras y frases que dan sentido al texto que escribimos y van en ficheros html.
  • Los estilos se encargan de dictaminar de qué manera se muestran los contenidos y van en ficheros css.

Es muy importante separar contenidos y estilos. Cuando en una página éstos se encuentran separados es muy fácil cambiar el estilo y dar un aspecto totalmente distinto a nuestra página.

Os preguntareis por qué cuento esto. La razón es sencilla: cuando veamos los contenidos en la pantalla usaremos unos estilos y, cuando vayamos a imprimir, otros.

Llegados a este punto os voy a mostrar el código de la página. Como vereis no se define en ningún momento de qué manera vamos a visualizar nada.


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
	<head>
		<title>Los agujeros negros</title> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<meta http-equiv="Content-Style-Type" content="text/css" /> 
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
		<link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> 
	</head>
	<body>
		<p class="center page">
			<img src="img/blackhole.jpg">
		</p>
		<p class="center print">
			<img src="img/adictos.jpg">
		</p>
		<p>Un agujero negro u hoyo negro es una región finita del espacio-tiempo provocada por una gran concentración de masa en su interior, con enorme aumento de la densidad, lo que genera un campo gravitatorio tal que ninguna partícula material, ni siquiera los fotones de luz, puede escapar de dicha región.</p>
		<p>La curvatura del espacio-tiempo o «gravedad de un agujero negro» provoca una singularidad envuelta por una superficie cerrada, llamada horizonte de sucesos. Esto es debido a la gran cantidad de energía del objeto celeste. El horizonte de sucesos separa la región del agujero negro del resto del Universo y es la superficie límite del espacio a partir de la cual ninguna partícula puede salir, incluyendo la luz. Dicha curvatura es estudiada por la relatividad general, la que predijo la existencia de los agujeros negros y fue su primer indicio. En los años 70, Hawking, Ellis y Penrose demostraron varios teoremas importantes sobre la ocurrencia y geometría de los agujeros negros.1 Previamente, en 1963, Roy Kerr había demostrado que en un espacio-tiempo de cuatro dimensiones todos los agujeros negros debían tener una geometría cuasi-esférica determinada por tres parámetros: su masa M, su carga eléctrica total e y su momento angular L.</p>
		<p>Se cree que en el centro de la mayoría de las galaxias, entre ellas la Vía Láctea, hay agujeros negros supermasivos. La existencia de agujeros negros está apoyada en observaciones astronómicas, en especial a través de la emisión de rayos X por estrellas binarias y galaxias activas.</p>
		<p>Fuente original: <a href="http://es.wikipedia.org/wiki/Agujero_negro">Agujero negro</a></p>
	</body>
	</html>

La "magia" ocurre en las siguientes líneas. En ellas estamos diciendo que queremos usar los estilos del archivo style.css cuando estamos viendo la página en la pantalla, mientras que queremos usar los estilos del archivo print.css cuando vayamos a imprimirla. Esto lo indicamos en la sección llamada media.

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

También os habreis dado cuenta viendo las imágenes de que en el navegador se muestra una imagen de un agujero negro mientras que en la impresión aparece la mascota de adictosaltrabajo.com. Para ello he jugado un poco con las css.

La primera de las imágenes tiene dos estilos. El primero, llamado center, hace que la imagen esté centrada horizontalmente y el segundo, llamado page, que la imagen se muestre en nuestro navegador. Esto lo explicaremos mejor cuando veamos el contenido de los archivos css con la definición de los estilos.

	<p class="center page">
		<img src="img/blackhole.jpg">
	</p>

La segunda también tiene dos estilos. El primero se mantiene pero el segundo cambia para llamarse print, que hará que la imagen se muestre en la impresión.

	<p class="center print">
		<img src="img/adictos.jpg">
	</p>

Los nombres center, page y print son totalmente arbitrarios e inventados por nosotros. Podriamos haber puesto cualquier otro nombre.

El resto de la página está formado simplemente por la definición de párrafos con los contenidos y un hiperenlace.

3. Las hojas de estilo

En el archivo style.css, que es el que se aplica cuando mostramos la página en el navegador, podemos ver la siguiente definición de estilos:


	body { background: url("space_background.jpg") }

	p { color: white; }

	a { color: orange; }

	p.center { text-align: center; }

	p.page { display: block; }

	p.print { display: none; }

Donde:

  • En body indicamos que queremos que el fondo de la página sea la imagen con las estrellas.
  • En p que los textos de los párrafos se muestren en color blanco.
  • En a que el hiperenlace se muestre de color naranja.
  • En p.center que los contenidos de los parrafos con este estilo se muestren centrados horizontalmente.
  • En p.page que los contenidos de los parrafos con este estilo se muestren en bloque.
  • En p.print indicamos que NO QUEREMOS que se muestren los contenidos de los parrafos con este estilo.

De este modo la mascota de adictosaltrabajo.com no saldrá al usar esta hoja de estilos ya que el párrafo que contiene la imagen tiene el estilo print. En cambio la imagen del agujero negro sí se mostrará.

En cambio, en el archivo print.css, que es el que se aplica cuando mandamos la página a imprimir, vemos esta otra definición:


	p.center { text-align: center; }

	p.page { display: none; }

	p.print { display: block; }

Donde:

  • En p.center indicamos que queremos que los contenidos de los parrafos con este estilo se muestren centrados horizontalmente.
  • En p.page indicamos que NO QUEREMOS que se muestren los contenidos de los parrafos con este estilo.
  • En p.print que los contenidos de los parrafos con este estilo se muestren en bloque.

Esta vez es al contrario, la imagen del agujero negro no saldrá pero la de la mascota de adictosaltrabajo.com sí aparecerá. Como no hemos puesto ninguna imagen de fondo la página saldrá en blanco, al no definir el color del texto este saldrá negro y al no personalizar el color del hiperenlace este saldrá subrayado y en azul.

4. Conclusiones

Como habreis podido ver este tutorial explica una técnica elegante a la par que sencilla con la cual hacer la vida más fácil a nuestros lectores. Detalles como este son de agradecer en una web y no son difíciles de conseguir, así que, ¿por qué no intentarlo?.

Quiero agraceder a mi compañero José Manuel Sánchez el haber tenido la amabilidad y la paciencia de haberme enseñado a hacer esto cuando lo necesité. Espero que os haya sido de utilidad.


A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2010-02-08-14:23:00

Autor: jcarmonaloeches

Muy útil la aportación,
Gracias Raúl, aplicaré esto a mi futura web.

Saludos,