Spis treści. 1. Szerokość witryny WWW

Transkrypt

1 Jednym z ważniejszych założeń webmasteringu jest to, by strona WWW była poprawnie wyświetlana na wielu różnych urządzeniach, w wielu różnych środowiskach. Wynikają z tego liczne trudności i komplikacje. Część kłopotów dotyczy rozdzielczości ekranu urządzenia, na którym wyświetlana jest witryna WWW. Spis treści Szerokość witryny WWW Rozdzielczości monitorów polskich internautów Jak zmieniać szerokość okna przeglądarki? Viewport Badanie maksymalnej szerokości układu Programowe sprawdzanie rozdzielczości JavaScript PHP 1. Szerokość witryny WWW Szerokość witryny WWW może być niezależna od szerokości okna przeglądarki, a więc tym samym od rozdzielczości monitora. Układy takie nazywamy układami stałej szerokości. Wymiar witryny jest wówczas wyrażony w jednostkach bezwzględnych, np. pikselach: #pojemnik { width : 760px; <div id="pojemnik"> </div> Drugim rodzajem stron WWW są układy nazywane płynnymi, których szerokość dostosowuje się do szerokości okna przeglądarki. Zmiana szerokości okna przeglądarki powoduje zmianę szerokości układu, a co za tym idzie także zmianę ułożenia tekstu, obrazów i całej zawartości: #pojemnik { width : 80%; <div id="pojemnik"> </div> Przystępując do pracy nad nowym projektem trzeba odpowiedzieć na pytanie: czy będzie to projekt płynny czy stałej szerokości?

2 O układzie stałej szerokości należy wiedzieć, że w przypadku, gdy szerokość okna przeglądarki jest mniejsza od szerokości układu, na stronie pojawi się poziomy pasek przewijania. Jeśli na przykład przygotujesz układ o szerokości 760 pikseli (z myślą o rozdzielczościach od wzwyż), to poziomy pasek przewijania nie pojawi się na monitorach o rozdzielczościach , czy (zakładając, że okno przeglądarki ma maksymalne wymiary). Jeśli natomiast rozdzielczość monitora wynosi , wówczas na ekranie zmieści się jedynie fragment strony. W takim przypadku przeglądarka wyświetli poziomy pasek przewijania. Poziomy pasek przewijania pojawiający się na monitorach pracujących w rozdzielczości od wzwyż jest uznawany za błąd. W ostatnim okresie granica ta zaczyna się podnosić: coraz częściej spotkać można witryny, które są wyświetlane bez poziomego paska przewijania dopiero od szerokości wzwyż (w rozdzielczości pojawia się poziomy pasek przewijania). Taka sytuacja ma miejsce między innymi na stronie 2. Rozdzielczości monitorów polskich internautów Pod adresem znajdują się obszerne statystyki charakteryzujące polski internet. Są one uaktualniane na bieżąco i stanowią punkt odniesienia dla producentów oprogramowania, wydawców witryn czy agencji reklamowych. Jedno z zestawień dotyczy rozdzielczości monitorów wykorzystywanych przez Internautów. Jak możemy przeczytać na stronach w Polsce procentowy udział różnych rozdzielczości wynosi: 1024x768 69,9 % 1280x ,4 % 800x600 11,9 % 1600x1200 0,6 % 640x480 0,1 % Źródło: Geminus SA, geminustraffic, 21.XI XI Dane te zostały przedstawione na rysunku 1. Rysunek 1. Rozdzielczości monitorów polskich internautów w okresie 21.XI XI.2006 (w/g Geminus SA)

3 Z zestawień za wcześniejsze okresy wynika, że udział rozdzielczości spada kwartalnie o około 2 3 procent. Należy zatem spodziewać się, że w roku 2007 jej udział spadnie znacznie poniżej 10%. Rysunek 2. Rozdzielczości monitorów polskich internautów w okresie od połowy roku 2003 do końca roku 2006 (w/g Geminus SA) Z zacytowanego powyżej zestawienia wynika, że nadeszła pora zmian. Jeśli chodzi o rozdzielczości ekranów polskich internautów, to układy stałej szerokości możemy przygotowywać dostosowując je do wymiarów zamiast Pamiętaj, że szerokość kolumny tekstu ma istotny wpływ na jego czytelność. Kolumny bardzo dużej szerokości (przekraczającej 120 znaków w wierszu) czyta się wolniej od kolumn średniej szerokości (czyli około 80 znaków w wierszu). 3. Jak zmieniać szerokość okna przeglądarki? Szerokość okna przeglądarki możemy zmieniać ręcznie (tj. przy użyciu prawego dolnego narożnik okna). Wtedy jednak trudno będzie uzyskać jakąś konkretną szerokość, np. 800 pikseli. W Firefoxie jest do dyspozycji wtyczkę Developer Toolbar. Wtyczka ta zawiera między innymi grupę opcji Resize. Znajdziesz tam opcje pozwalające na ustalenie dowolnej szerokości okna przeglądarki z dokładnością do piksela. Rysunek 3. Opcja Resize wtyczki Developer Toolbar

4 W pozostałych przeglądarkach (np. IE) należy wykorzystać tzw. favelety niewielkie skrypty JavaScript wzbogacające funkcjonalność przeglądarek. Oto przykład skryptu zmieniającego szerokość okna przeglądarki na : <a href="javascript:void(window.resizeto(800,600))"> Więcej informacji o faveletach znajdziesz na stronie 4. Viewport Przeglądarki nie mogą przeznaczyć całej swojej szerokości na wyświetlanie strony WWW. Wynika to chociażby z faktu, że okno przeglądarki posiada obramowanie, które przecież zajmuje kilka pikseli z każdej strony. W ten sposób dochodzimy do pojęcia vieportu. Viewport jest obszarem przeglądarki przeznaczonym na rendering strony WWW. Viewport jest zawsze mniejszy od rozmiaru okna przeglądarki, a ten z kolei jest zawsze mniejszy od rozdzielczości ekranu. Rozmiar viewportu możesz sprawdzić w Firefoxie wykorzystując Developer Toolbar. Opcja Resize Display Window Size podaje rozmiar okna przeglądarki oraz rozmiar obszaru przeznaczonego na rendering strony. Rysunek 4. Rozmiar okna przeglądarki i viewportu Dodatkowo, opcja Resize Display Window Size in Title wyświetla rozmiar okna przeglądarki oraz viewport w belce tytułowej, co ilustruje rysunek 3.

5 Rysunek 5. Rozmiar okna przeglądarki i viewportu wyświetlane w belce tytułowej Z tego wynika ważny wniosek dla webmasterów. Jeśli chcesz przygotować układ stałej szerokości, który będzie wyświetlany bez poziomego paska przewijania na monitorach o zadanej rozdzielczości, np. od wzwyż, to nie możesz deklarować szerokości głównego pojemnika 800 pikseli: width : 800px; W takim przypadku, z racji na zmniejszoną szerokość viewportu, będzie pojawiał się poziomy pasek przewijania. Musisz użyć wartości mniejszej, np. 760 pikseli. 5. Badanie maksymalnej szerokości układu Z racji na to, że viewporty są węższe od okna przeglądarki, nie należy stosować układów o szerokościach odpowiadających rozdzielczościom ekranu. Jeśli wykonasz układ o szerokości 800 pikseli, to na urządzeniu o rozdzielczości (a dla takiego urządzenia ten projekt jest przeznaczony) pojawi się poziomy pasek przewijania, uznawany za błąd. Powstaje więc pytanie: jaka może być maksymalna szerokość układu witryny przeznaczona na zadaną rozdzielczość monitora? Badania takie możesz przeprowadzić samodzielnie. Wystarczy: wykonać testową witrynę WWW o zadanej szerokości (np. 800), zmienić rozdzielczość monitora na badany tryb (np ), zmniejszać stopniowo szerokość układu o 1 piksel, i badać wygląd witryny w kilku wybranych przeglądarkach. Zniknięcie poziomego paska przewijania oznacza, że podana szerokość może być traktowana jako maksymalna dopuszczalna wartość. Badania możesz zakończyć, gdy we wszystkich przeglądarkach zniknie poziomy pasek przewijania. Pamiętaj, że badana witryna musi mieć kilka stron tekstu, tak by zawierała pionowy pasek przewijania! Wyniki przeprowadzonych przeze mnie badań dla czterech wybranych przeglądarek i trzech wybranych rozdzielczości są zawarte w tabelach 1, 2, 3. lp. Przeglądarka Max Uwagi 1. FF IE Opera od 781 część tekstu jest zasłonięta 4. Netscape Tabela 1. Rozdzielność monitora ustawiona na lp. Przeglądarka Max 1. FF IE Uwagi

6 3. Opera od 1005 część tekstu jest zasłonięta 4. Netscape Tabela 2. Rozdzielność monitora ustawiona na lp. Przeglądarka Max Uwagi 1. FF IE Opera od 1260 część tekstu jest zasłonięta 4. Netscape Tabela 3. Rozdzielność monitora ustawiona na Wnioski z wyników doświadczeń zawartych w tabelach od 1 do 3 są przedstawione w tabeli 4. Biorąc pod uwagę, że inne przeglądarki mogą mieć nieco bardziej zmniejszony viewport, oraz przyjmując margines około dwudziestu pikseli na nieprzewidziane problemy otrzymamy szerokości zawarte w ostatniej kolumnie tabeli 4. lp. Rozdzielczość ekranu Maksymalna szerokość układu Szerokość układu z rezerwą Tabela 4. Wnioski z tabel 1, 2, 3 6. Programowe sprawdzanie rozdzielczości 6.1 JavaScript Rozdzielczość ekranu przeglądarki jest dostępna w skrypcie JavaScript. Obiekt screen posiada właściwości width oraz height zawierające bieżące ustawienia. Właściwości te możesz wyświetlić np. korzystając z funkcji alert(): <script type="text/javascript"> alert(screen.width); alert(screen.height); </script> 6.2 PHP W celu przekazania rozdzielczości odczytanej w JavaScript na serwer wykorzystaj ciasteczka. Najpierw w skrypcie JavaScript przekaż ciasteczko zawierające rozdzielczość ekranu: <script type="text/javascript"> document.cookie = 'resolution=' + screen.width + 'x' + screen.height; </script>

7 Następnie ciasteczko odczytaj w PHP: $resolution = ''; if ( isset($_cookie['resolution']) ) { $resolution = $_COOKIE['resolution']; if ($resolution) { echo 'Rozdzielczość dostępna w PHP: '. $resolution; else { echo 'Rozdzielczość nie jest dostępna w PHP!'; lp. Przykład 1. Układ stałej szerokości 2. Układ zmiennej szerokości 3. Favelety: zmiana szerokości okna przeglądarki 4. Badanie zależności maksymalnej szerokości viewportu od rozdzielczości monitora 5. JavaScript: sprawdzanie rozdzielczości ekranu 6. PHP/Ciasteczka/JavaScript: sprawdzanie rozdzielczości ekranu po stronie serwera 7. Wszystkie przykłady Tabela 5. Przykłady do pobrania