Nadchodzi SVG – czy to koniec FLASH-a?

 

Gwoli ścisłości, SVG już dawno nadszedł, na tyle dawno, że Flash był jeszcze w powijakach. Ale co to właściwie SVG? Scalable Vector Graphics, czyli format oparty na XML-u służący do opisu danych wektorowych. Ok, ale po co mi to?

Obecnie wszystkie najpopularniejsze przeglądarki za wyjątkiem tej, której imienia nie warto wspominać wspierają SVG. Oznacza to, że możemy korzystać z jego dobrodziejstw praktycznie nieskrępowanie. Nie potrzeba żadnych wtyczek (IE jest wyjątkiem)! Nie bez przyczyny porównałem SVG do Flasha, ponieważ daje podobne możliwości. Brak tu jednak obsługi strumieni, wideo i audio.

Wstawienie gotowego pliku w formacie .svg, wykonanego przy pomocy programu do tworzenia grafiki wektorowej (np. open-source’owy Inkscape) jest banalne. Dlaczego więc z tego nie korzystać? Zobacz poniższy przykład:


<pre id="line1"><head>
    <meta name="svg.render.forceflash" content="true"></meta>
    <script src="<a href="view-source:http://codinginparadise.org/projects/svgweb/src/svg.js">../../src/svg.js</a>" data-path="../../src/"></script>
</head>
<body>

<pre id="line37">    <!--[if IE]>
    <object src="../svg/img.svg" classid="image/svg+xml"
            style="display: block;">
    <![endif]-->
    <!--[if !IE]>-->
    <object data="../svg/img.svg" type="image/svg+xml"
            style="display: block;">
    <!--<![endif]-->
    </object>
</pre>
</body>

Kod wraz z komentarzami warunkowymi dla zapewnienia poprawnego działania w IE. To wszystko.

Oczywiście można pokusić się o generowanie grafik on-line, w końcu SVG to format oparty na XML-u. Zobacz źródła przykładu projektu svgweb Google’a.

Więcej na temat formatu SVG.

 
 

Stylowanie wydruku

 

Jak zaimplementować stronę print-friendly? Wykorzystamy przeznaczony do tego oddzielny arkusz stylu. O wszystkim decyduje atrybut media:

<style type="text/css" media="screen">@import url("domyslny-arkusz.css");
</style>
<style type="text/css" media="print">@import url(“arkusz-do-wydruku.css");
</style>

To jednak nie wszystko.  O czym szczególnie należy pamiętać formatując stronę do wydruku? Oto garść porad:

  • Dla dużych fragmentów tekstu używaj czcionki szeryfowej – tę czyta się na papierze lepiej niż bezszeryfową.
  • Usuń formatowanie linków – i tak nikt z nich nie skorzysta.
  • Schowaj bloki odpowiedzialne za nawigację – użytkownika interesuje przecież zawartość TEJ strony.
  • Tło nie jest drukowane, dlatego pamiętaj o odpowiednim kontraście dla koloru tekstu (szczególnie jeżeli Twoja strona jest w kontrze)
  • Usuń marginesy strony.
  • Dostosuj szerokość layoutu, by zmieściła się na jednej szerokości kartki A4.
  • Stosuj wymiary odpowiednie dla wydruków – np. dla czcionek – pt.
  • Testuj korzystając z drukarek PDF – oszczędzaj drzewa ;-)
 
 

O doborze kolorów

 
Kuler Adobe'a

Kuler Adobe'a - wybór kolorów

Dostajemy do rąk gotową specyfikację. Tworzymy układ strony głównej, podstron. Gotowe. Rzucamy się do Photoshopa. Chwila zastanowienia nad wyborem narzędzia. Teraz kolor. Damn! Jaki kolor?

Warto wtedy wspomóc się odpowiednim narzędziem, które podpowie nam jakie kolory mamy dobrać by nasza strona wyglądała przejrzyście, a przy tym niesztampowo. Ile w końcu można patrzeć na mdły błękit morski, w którym rzeźbi się co drugą stronę? Paleta kolorów jest znacznie szersza.

Po pierwsze kuler Adobe’a. Kuler pozwala na tworzenie i wybór 5-kolorowych zestawów, gotowych do użycia na stronie. Możemy wybierać spośród zestawów zapisanych przez innych użytkowników, ale najciekawsze jest oczywiście tworzenie własnych kompozycji.

W tym celu mamy do dyspozycji szereg predefiniowanych ustawień, które po wybraniu jednego koloru nadrzędnego, dobiorą nam automatycznie pozostałe cztery. Te można dalej modyfikować, szukając złotego środka. I to wszystko wystarcza w zupełności by otrzymać paletę kolorów do naszego projektu.

A jak to nam nie wystarczy, można nawet wczytać plik graficzny, na podstawie którego kuler sam dobierze odpowiednie pięć barw.

 
 

Kolory, czyli szybki sposób na skórki

 

Jak najszybciej pozwolić użytkownikowi na wybór skórki? Zapisać wszystkie charakterystyczne właściwości (kolory, tła) i odrębnym pliku CSS dla każdego wariantu kolorystycznego. Nie zapewni to zmiany układu elementów na stronie, ale pozwoli jedynie na zmianę jej charakteru. Potem wystarczy wczytać odpowiedni plik w zależności od skórki.

Zewnętrzny plik zawierający definicję kolorów i tła ma także duże praktyczne znaczenie. Wystarczy, że grafikowi wpadnie do głowy pobawić się suwakiem hue/saturation w Photoshopie, żeby zmienić kolorystykę projektu i mamy problem. Mając jednak jeden plik z kilkoma wpisami, modyfikacja 3-5 kolorów nie jest taka straszna i czasochłonna.

Dla przykładu wczesne wersje szablony tego bloga wykonane przeze mnie.

 
 
« poprzednie wpisynastępne wpisy »