Búsqueda

martes, noviembre 14, 2006

Imprimir MalaCiencia

No sé si alguna vez alguien habrá querido imprimir algún artículo de este blog. Si alguien lo ha hecho, habrá sufrido un pequeño inconveniente que afecta a la gran mayoría de páginas web: se imprime todo. Y todo significa la barra de Blogger, las barras laterales de enlaces, los anuncios... todo. Puede que incluso se impriman los colores de fondo, aunque la mayoría de navegadores vienen configurados por defecto para ignorar los colores e imágenes de fondo a la hora de imprimir. Y eso es sin duda una molestia. Las barras de navegación no tienen ninguna utilidad a la hora de imprimir una copia en papel. Más bien son molestas, ya que ocupan un espacio que podría destinarse al texto en sí. Muchos sitios web tienen un botón en sus páginas con el lema “versión para imprimir”, para mostrar una página con una maquetación diferente, sin todos esos elementos innecesarios y molestos sobre el papel. Como es lógico, esa funcionalidad requiere un cierto esfuerzo para el desarrollador del sitio. Sin embargo, hay una forma mucho más sencilla y elegante de resolver el problema, sin necesidad de “duplicar” cada página.

Hace tiempo comenté qué son las CSS, y cómo un buen uso de ellas y del (X)HTML Strict nos permitía separar completamente el contenido de una página de su apariencia. El estándar CSS tiene una serie de características no muy conocidas (o el menos, muy poco utilzadas) por muchos diseñadores, y es el poder discriminar la aplicación de determinado conjunto de reglas de estilo, en función del medio en el que se presente la página. ¿El qué? Veamos, la mayoría de la gente da por sentado que a la Web se accede mediante un ordenador, utilizando un navegador que visualiza las páginas (es más, la mayoría da por sentado que se accede con Internet Explorer bajo Windows en un PC). Sin embargo, no es la única forma (o al menos no debería serlo, aunque la mayoría de sitios están pensados únicamente para ese tipo de acceso). Últimamente se están popularizando dispositivos móviles con la posibilidad de acceder a Internet, como PDAs o teléfonos móviles muy sofisticados (de hecho, hay que ir olvidándose del término “teléfono móvil” y referirse a ellos como “terminales móviles”). También existe la posibilidad de acceder mediante algún servicio de TV, o software para invidentes que “lee” en voz alta el contenido de la página. Pues bien, el estándar CSS permite aplicar unos estilos u otros, dependiendo del medio de acceso. Y entre estos medios se encuentran las impresoras.

La forma de hacerlo es muy simple. Basta con especificar el atributo media en la etiqueta (X)HTML correspondiente (o la regla @media en el código CSS), que puede tomar varios valores como screen para referirse a un monitor de ordenador, speech para referirse a un sintetizador de voz, o lo que ahora nos interesa, print para referirse a un dispositivo de impresión. Si no se especifica nada, las reglas de estilo se aplicarán independientemente del medio de acceso, que es lo que ocurre con la mayoría de páginas. Pero si utilizamos este atributo, podemos definir una apariencia completamente diferente para el monitor y para la versión impresa. Y todo ello, como no me canso de insistir, sin tocar una sola coma del código HTML que forma la página en sí.

Pues bien, he aplicado esta buena práctica a este blog, de forma que si imprimiis un arículo cualquiera, sólo aparecerá el contenido del mismo (título y pie incluido), ocupando todo el ancho disponible, y con el fondo blanco. Ni barras laterales, ni anuncios, ni bordes. Podéis comprobarlo vosotros mismos imprimiendo esta página, o si queréis ser ecológicos y no malgastar papel y tinta, seleccionando la opción "Vista preliminar" (o "Print preview") de vuestro navegador, que mostrará cómo quedaría la página impresa. Como veis, el resultado final es más cómodo de leer, y al tener más espacio para el texto, utilizamos menos papel. Así que desde aquí animo a todos los que lean esto y tengan una página propia, a hacer lo mismo. No es nada complicado.

Hay que decir que no todos los navegadores implementan correctamente la impresión de una página, según estos estándares. Hay opciones interesantes, como el controlar los saltos de página (y evitar que al final de una página quede sólo la primera línea del siguiente párrafo) que no implementan todos los navegadores. Además, muchos de ellos no componen correctamente la página cuando hay elementos con un posicionamiento "peculiar". Como suele ser habitual, la peor nota va para el Internet Explorer, y en el caso concreto de este blog, en la versión impresa el texto no fluye alrededor de las imágenes (para los entendidos, digamos que "pasa" de los float), o al menos, hasta la versión 6, ya que no he probado la 7. Así que os recomiendo también que utilicéis navegadores que implementen mejor los estándares del W3C, como el Firefox o el Opera.

19 comentarios:

  1. Yo tengo IE (no sé ahora mosmo que versión) y cuando le das a vista preliminar te sale la página completa, aunque hayas seleccionado algo. Lo que no he probado es si seleccionando lo que quieres imprimir, dándole a imprimir, pero con el botón derecho y seleccionando la opción "Selección", imprimira sólo lo seleccionado. Si lo haces con el botón "imprimir" ese que hay arriba del navegador y tiene una impresora dibujada te imprime la página completa.
    Un saludo a todos. Gus. C.Real
    P.D. Siento aparecer como anónimo, pero es que no tengo página propia y no sé cómo se pone para que salga el nombre, pero siempre firmo cuando escribo algo. Gracias.

    ResponderEliminar
  2. Hola otra vez. Antes cuando he puesto que imprimía toda la página, me estaba refiriendo sólo a los artículos. Lo que no sale son las barras laterales ni la de Blogger.
    Gus. C. Real.

    ResponderEliminar
  3. IE7 también pasa del float: Ejemplo

    (Offtopic) Posiblemente lo hayas visto, Alf (ya que tienes al blog enlazado), pero por si no es el caso, esta entrada de Yo, programador creo que es bastante interesante.

    ResponderEliminar
  4. El navegador que mejor refleja el contenido es Opera, es el único que supera el test acid, donde se utilizan un monton de pasos y estilos de css para dibujar una simple carita sonriente. Explorer no da ni una, y firefox tambien fracasa, aunque menos.

    Opera tambien es el que mejor guarda páginas en disco, con imágenes y todo, incluso en páginas con mucho contenido generado en el momento via javascript, donde otros fallan.

    ResponderEliminar
  5. Pues hablando de CSS: no estaría de más que definieras tanto "color" como "background-color" para los comentarios.

    Tengo definido el fondo oscuro por defecto pero, como los colores del texto son grises oscurillos, me veo obligado a seleccionar los textos para poder leerlos.

    ResponderEliminar
  6. Pos hombre, yo uso Opera con la barra de webdeveloper (no confundir con la misma de Firefoz), que incluye un botoncito 'kill' que me permite eliminar las cosas que no quiero que se impriman... y acabo dejando sólo el texto que me interesa

    ResponderEliminar
  7. Muy interesante, tanto el artículo como los comentarios.

    ResponderEliminar
  8. Gracias Alf, yo sí suelo imprimirme tus artículos

    ResponderEliminar
  9. Pues hablando de CSS: no estaría de más que definieras tanto "color" como "background-color" para los comentarios.

    Mmm... No sé si en Blogger se puede hacer eso. Sólo dispones de una plantilla, que es la del blog. Los comentarios se abren en otra ventana, en una página diferente. Y no sé si se puede hacer algo (al menos no he encontrado ninguna opción para ello).

    ResponderEliminar
  10. Exacto, esa página de blogger es intocable...

    ResponderEliminar
  11. Y digo yo desde mi ignorante posición: ¿y si selecciono el texto que me interesa arrastrándolo y luego lo corrijo dándole el formato que quiera con el editor de texto y lo imprimo?

    Ejque yo pa esto de lanfomastica soy mu negau...

    Saludos.

    ResponderEliminar
  12. Copiando el texto seleccionado en un documento en blanco, claro...

    Sorry, acabo de llegar del curro y vengo un poco despistado.

    ResponderEliminar
  13. Estimado amigo,
    Antes que nada una felicitación por tan excelentes textos. escribo desde México y quisiera opinar sobre la manera de imprimir lo que uno desee. En realidad, salvo raras
    excepciones, pasando el ratón por toda el área deseada, oprimiendo todo el tiempo el botón izquierdo
    y soltándolo en cuanto se termine,
    y luego yéndose a "archivo" en la
    barra superior, del lado izq. y
    oprimiendo el botón izq., aparecerá
    el renglón "seleccionado" que se
    tendrá que señalar con el botón izq.; posteriormente se irá a imprimir y ¡YA!
    Un saludo
    Antonio Nader
    22 Nov. 2006

    ResponderEliminar
  14. Buen trabajo Alf, lo impresión es perfecta. al menos en navegadores que cumplen bien el estándar CSS, del otro no opino :)

    En cuanto al comentario un pequeño detalle, dices que el tipo de CSS para los lectores de pantalla (sintetizadores de voz) es el "speech", cuando realmente se llama "aural", "speech" no existe. Y lamentablemente el soporte de este tipo de CSS es casi nulo.

    ResponderEliminar
  15. Era "aural", en la versión 2, pero en la 2.1 lo han cambiado a "speech":

    http://www.w3.org/TR/CSS21/media.html
    http://www.w3.org/TR/CSS21/aural.html#aural-media-group

    Eso sí, no me preguntes por qué (misterios del W3C)

    ResponderEliminar
  16. Hay un problemilla que he probado en IE y Firefox. En algunas entradas aisladas las barras laterales siguen saliendo.

    Ejemplo, ¿o solo me pasa a mí?

    Un saludo

    ResponderEliminar
  17. Eso debía ser por la no actualización de todo el blog. Lo comprobé, y no sólo aparecían las barras, sino que la barra derecha no estaba actualizada (faltaba el último enlace que puse).

    He republicado todo el blog, y debería estar resuelto. Al menos, lo está en la que pones.

    ResponderEliminar
  18. Perfecto. Cuando tenga algo de tiempo, intentaré hacer lo mismo en el mío. Es muy buena idea.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.