Rzecz o drukowaniu stron

Serwisy typowo informacyjne, jak internetowe magazyny, duże portale czy sieciowe instrukcje obsługi są najczęściej drukowanymi stronami. Powinny oferować możliwość wydruku w wygodnej dla użytkownika formie, co oznacza, że powinny mieścić się w szerokości kartki i powiny marnować kartek jak najmniej. Stąd wszechobecne linki wersja do wydruku na wspomnianych sajtach.

Z drugiej strony, nie ma nic bardziej irytującego niż trafienie z Googli na taką właśnie stronę do wydruku, pozbawioną jakiejkolwiek nawigacji czy chociażby odnośnika do oryginału. Kontynuacja lektury czy poszukiwanie dalszych informacji stają się niemożliwe.

Również samo poszukiwanie przycisku odpowiadającego za wersję do wydruku jest często niewygodne, zwłaszcza, że webdesignerzy nagminnie wykazują się niezwykłą intuicją jeśli chodzi o dostępność i umieszczenie tej opcji.

Co by było, gdyby zupełnie z niej zrezygnować? Niewiele osób zdaje sobie z tego sprawę, ale jest to całkiem realne i niezwykle proste do realizacji. Wystarczy przygotować dodatkowy arkusz CSS i nadać mu odpowiedni atrybut media.

Można zrobić to na dwa sposoby. Pierwszy polega na podaniu atrybutu w elemencie <link/> już na etapie importu arkusza CSS:

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

Metoda ta ma tę zaletę, że wyraźnie rozdziela style przeznaczone do wydruku od tych przeznaczonych dla innych typów mediów. Druga metoda polega na zamknięciu reguł arkusza CSS przeznaczonych dla danego typu mediów w opisany blok:

@media print
{
	/* tutaj reguly CSS */
}

Regułki specyficzne dla medium wydruku powinny ukryć zbędne elementy nawigacyjne i nieistotne dekoracje graficzne, jak bannery czy grafiki tła. Tutaj potęgę swą pokazują layouty zbudowane w oparciu o czysty (X)HTML, gdzie sterowanie układem strony jest znacznie wygodniejsze niż w przypadku układów tabelkowych.

Jeśli boisz się, że użytkownicy nadal będą szukać wersji drukowalnej, to zawsze możesz umieścić w serwisie dodatkowy (niezależny od arkusza dla wydruku) link wywołujący tę samą stronę ze zmienionym arkuszem ekranowym (media screen) CSS, a ponad to podłączyć odpowiednią akcję JS, co pozwoli na przełączanie arkuszy w locie (i tym samym zaoszczędzi użytkownikom pobierania plików). Jakąkolwiek wersję wybierzesz, zaoszczędzi to masę kodu po stronie serwera i zwiększy użyteczność strony.

Przykład tak skonstruowanego serwisu można oglądać na oficjalnej stronie PLD.

24 » odpowiedzi dla wpisu “Rzecz o drukowaniu stron”


  1. 1 ehh

    Dobre rozwiązanie, ale pierw muszę do końca przejść na xhtml i więcej class używać…

  2. 2 Puck

    Czy nasza ulubiona przeglądarka obsługuje tą funkcję? Kiedyś tak zrobilem i miałem wrażenie, ze niebardzo.

  3. 3 Patrys

    Puck:

    Działa bez problemu.

  4. 4 m

    Troche przy okazji: warto zainteresowac sie niezle rozbudowanymi systemami do prezentacji tresci, jak Apache Cocoon, czy Lenya - bazujacy na Cocoonie CMS. Serializacja do roznych formatow jest tam bardzo ladnie wbudowana architektonicznie i, o dziwo, nawet kilka wiekszych sajtow w kraju na tym chodzi. Chocby (kryptoreklama) e-informatyka.pl ;). No i mocarne to, bo w srodku XML i XSL (co implikuje tez, ze na domowej maszynce takiego sajtu stawiac nie warto).

  5. 5 Patrys

    Nie widzę związku poza reklamą sajtu… Nie wiem też, jak masię używanie XSL do stawiania tego na domowej maszynce, bo ja nie mam problemów z przetwarzaniem XSL ma swoim notebooku.

  6. 6 Patrys

    Hmm, ani ten sajt się nie waliduje, ani nie używa styli wydruku. Pogubiłem się zupełnie.

  7. 7 zdzichuBG

    Nie ma nic bardziej irytujące niż strona, która na wydruku znienacka wygląda inaczej. W końcu po coś termin WYSIWYG został ukuty.

    A w przypadku takiej ,,mądrej'' strony pozostaje tylko drukowanie screenshotów.

    Znowu narzekam :(

  8. 8 Patrys

    zdzichuBG:

    A czemu miałbyś chcieć drukować obrazek tła z jakiejś strony albo menu, które jest bezużyteczne, kiedy znajdzie się na kartce?

  9. 9 zdzichuBG

    Właśnie po to, żeby mieć stronę tak jak w przeglądarce. Np. pokazać komuś.

    Do selektywnego drukowania zawartości strony posiadam supermoce kopiuj-wklej.

  10. 10 Patrys

    Ja przecież mówię o stronach informacyjnych, a nie o portfolio grafika. Pomijam fakt, że drukując stronę z zachowaniem jej szerokości z ekranu tracisz kupę miejsca na kartce, albo - co gorsze - ucinasz sobie fragment tekstu.

  11. 11 m

    Patrys, no luzuj - sajt jest masakrycznie noukomers: nie o promocje (ta Twoja wrodzona skromnosc;), ale o przyklad chodzilo, bo to naprawde technologiczne rodzynki. To, co przemawia do mnie, gdy ktos decyduje sie na Cocoona, to mozliwosc poteznego przetwarzania danych, ktora jest rdzeniem tego systemu, no i wlasnie latwosc podlaczania roznych serializatorow, np. fop do pdf. Tam sie to naprawde pysznie i elegancko robi. Pisales o zmianie formatowania html za pomoca podmieniania styli, to mi sie z ta serializacja do pdf skojarzylo, bo troche przy tym siedzialem.

    A XSL… no wiesz, pojedyncze transformatki tez u mnie smigaja, ale odpal no na swoim komputerze serwer aplikacyjny, zapusc wieksza aplikacyje na Cocoonie (DocBook, ktory mozna wykorzystac do trzymania bardziej rozbudowanego contentu w xml, to ponad 1 MB xsl w zipie), zrob ze 100 requestow jakism toolem do testowania obciazenia i mozesz spokojnie isc do kibla, zeby po powrocie przeczytac piekny stacktrace :). Malo mocy, malo mocy… Wszystkie wieksze sajty trzeba klastrowac, bo bida.

  12. 12 Patrys

    DocBook akurat śmiga u mnie :]

    Dalej twierdzę, że to jest zupełny offtopic. A XSL tak samo łatwo podłącza się do dowolnego silnika, który dane w bazie trzyma w XML albo Textile.

  13. 13 m

    @Patrys: ze sie nie waliduje to ju nou, zupelnie nie moja brocha - swoja droga dzieki, bo siara. Podmiana styli jest bodajze przy wyswietlaniu artykulow z czasopism.

    Offtopic jest bezdyskusyjnie, wiec i napisalem, ze uwaga jest "przy okazji". Nadal malo ludzi zna te technologie, a warte sa chocby tego poznania. I takie bylo moje pierwsze skojarzenie, bo webdeveloper w ujeciu html/css ze mnie zaden :).

    Odnosnie DocBooka: nie chcialbym zaglebiac sie w mocno techniczne kwestie, ale serializacja rozbudowanego DocBookowego dokumentu pomnozona przez zacna liczbe requestow (pojedynczo to wiesz - na maszynach developerskich smiga) robi kuku Sun Fire.

  14. 14 Patrys

    Ja nie odpalam portali na miarę nieszczęsnego Onetu na domowym komputerze. Do obsługiwanego ruchu spokojnie wystarcza :)

    EOT, jak coś chcesz więcej to na jabbera zapraszam, JID jest na górze strony.

  15. 15 m

    No EOT, moze ktos akurat sie zainteresuje i poprzeglada, co dla web@Java robi ASF. Dzieki za wymiane zdan.

  16. 16 Patrys

    Ja cie nie wyganiam, tylko wolalbym prowadzic dyskusje przez komunikatory niz na blogu ;]

  17. 17 m

    ;)

  18. 18 rzyjontko

    Skoro i tak już poszło w offtopic, to ja pozwolę sobie skrytykować zawartość portalu e-informatyka, który (tylko pobieżnie przejrzałem, więc może się mylę) służy pracownikom PWr. możliwości produkowania wątpliwej jakości "publikacji naukowych" (które, jak każdy wie są potrzebne pracownikom uczelni do otrzymywania kolejnych tytułów oraz władzom uczelni w wykazywaniu, że zajmują się badaniami naukowymi).

    Software Engineering Society? WTF? To ma być konkurencja dla ACM SIGSOFT, albo IEEE Computer? Wybaczcie, ale pracę magisterską piszę z Software Engineering (http://www.st.cs.uni-sb.de) i się zbulwersowałem. Brak umiejętności, żeby zgłosić publikację na ICSE albo ESEC/FSE? Wstyd i żenada!

  19. 19 m

    @rzyjontko: niewyspany? :)

    No wiec:

    - ten portal nie sluzy pracownikom PWr (moglbys wskazac te watpliwej jakosci prace naukowe pochodzace akurat z PWr?), a same publikacje elektroniczne nie maja numerow ISSN/ISBN, ani tez nie sa uznawane przez KBN,

    - Software Engineering Society to kolo naukowe, takie wiesz - studenckie, akademickie, bez funduszy. Akurat obaj dobrze wiemy, ile kosztuje udzial w konferencji, gdzie proceedingsy publikowane sa w IEEE Computer Society Press. Akurat ludzie z tego srodowiska to zdecydowanie nie obiboki, wiec nie pekaj - chodzi raczej o stymulacje naukowa mlodszych studentow,

    - nie wiem, skad to podniecenie publikacjami w IEEE SC: akurat w tym wydawnictwie kilku studentow ma juz publikacje i powod do dumy to sredni, bo nikt do pisania do poduszki czy na krajowe konferencje sie nie ogranicza,

    - wiecej wiesz… luzu, bo w babilonie pokoj.

  20. 20 rzyjontko

    Scientific Papers of the Institute of Applied Informatics of Wroclaw University of Technology, Series: Software Engineering to Twoim zdaniem publikacje studentów?

    An international journal that focuses on theoretical and practical issues pertaining development of software systems to jak rozumiem gazetka studencka?

    Ale faktycznie, niepotrzebnie się unoszę. Niech sobie każdy robi, co mu się podoba i jak mu się podoba.

  21. 21 m

    @rzyjontko: jakbys mial nizsze cisnienie krwi to na pewno doczytalbys do konca - "SPSE aims at providing a platform for *young researchers*, scientists and practitioners to present their work within software engineering area." - tak, to sa (maja byc) publikacje przede wszystkim studentow i doktorantow. Naprawde, wyluzuj, znam pelno ludzi z Uni, bardzo lubie Wasza uczelnie zreszta i nie ma potrzeby doszukiwac sie brudnych podtekstow - nie znajdziesz ich. Z inzynierii oprogramowania robimy sporo ciekawych rzeczy - praktyczne eksperymenty badajace skutecznosc praktyk metodyk agile, rozwijana jest tez bardzo rozbudowana platforma do kontroli jakosci kodu w przeplywie implementacji na podstawie metryk zbieranych podczas buildow z ciaglej integracji. Co wiecej, wdrazamy to w roznych firmach. Moglbys wskazac cos rownie praktycznego z punktu widzenia przemyslowego wytwarzania oprogramowania ze swojego podworka? No dajmy spokoj.

    Spij dobrze. A jak jestes nadal w Niemczech to pozdrow Elsindela :)

  22. 22 wyzimir

    Daje podgląd wydruku strony http://pld-linux.org/ w FF i co widzę? Linki nachodzą na tekst w tej samej linii…

  23. 23 cinnamon

    wyzymir >> żartujesz ;-) u mnie wszystko gra.

    Kolejny ciekawy artykuł :-)

  24. 24 PawelS

    Bardzo przydatne, jeśli się posiada np.: portfolio, cv na stronie :D

    Odpisując na jakaś oferte pracy, łatwiej jest podać link, niż szukać jakiegoś *.doc-a, który często w Open Office wygląda zupełnie inaczej, niż w Word-zie. Z pomocą przychodzi format *.rtf (ale też ma on kilka wad), albo *.pdf, ale jakaś Sekretarka nie wie czym to ostatnie otworzyć, bo na swoim komputerze ma tylko XP i Office-a :/

    Zresztą dobrze wykonana strona z takim bajerem lepiej świadczy o umiejętnościach pracownika, niż ładnie wyglądające CV w Word-zie.

Skomentuj wpis