Projektowanie WWW: 20 sztuczek profesjonalistów

Różnica między dobrym i doskonałym projektantem stron sprowadza się do umiejętności rozwiązywania problemów na skróty i oszczędzania czasu bez utraty jakości. Zebraliśmy 20 najlepszych sztuczek, z których powinniśmy skorzystać, jeśli chcemy nadać naszej pracy cechy profesjonalizmu.

1. Planowanie

Gdy palimy się do tego, by wreszcie uruchomić serwis internetowy, łatwo jest przeoczyć najbardziej oczywisty etap: planowanie. Bez względu na to, czy przygotowujemy szkielet strony i schematy połączeń w OmniGraffle albo w Visio, czy nawet na kartce papieru, oszczędzimy czas mając przed oczami cały projekt wraz ze strukturą serwisu, zanim przystąpimy do jego budowania. Oczywiste pomyłki można wykryć i usnąć zanim będzie za późno. W ten sposób prościej też wyjaśniać swoje pomysły klientom i kolegom, niż gestykulować rękami w powietrzu.

2. Zróbmy to ręcznie

Chociaż na rynku znajduje się wiele doskonałych narzędzi służących do budowy witryn, takich jak Adobe GoLive i Adobe Dreamweaver (dawniej Macromedia), profesjonaliści wolą kodować ręcznie. Czy są masochistami? Niewykluczone.

Jest tylko jeden sposób, by nauczyć się HTML-a – zakasać rękawy i zabrać się za pisanie kodu. Ale bez obaw: HTML to jedna z prostszych rzeczy, jakich można się nauczyć, a nieskomplikowaną stronę WWW można utworzyć za pomocą zaledwie kilku linijek kodu. Ręczne pisanie kodu jest też gwarancją, że jest on najkrótszy, jak to tylko możliwe, co jest ostatecznym celem wszystkich znawców HTML-a.

Nie rezygnujmy jednak z GoLive lub Dreamweavera. Obydwie aplikacje wyposażono w doskonałe środowisko do pisania kodu i użyteczne funkcje, takie jak rozwijalne bloki kodu i podział widoku. Dzięki temu możemy wprowadzać kod i jednocześnie oglądać końcowy rezultat. Jeśli chcemy zająć się jedynie wprowadzaniem kodu, możemy skorzystać z dowolnego edytora, w którym można zapisywać dokumenty w formacie TXT. Użytkownicy Maków mogą sięgnąć do BBEdit z Bare Bones Software, a pracujący w systemie Windows skorzystać z bezpłatnego edytora AceHTML firmy Visicome Media.

3. Arkusze stylów: importowanie versus linkowanie

Istnieją dwa sposoby przyłączenia zewnętrznego arkusza stylów do strony HTML i nie wszystkie przeglądarki zrozumieją obydwie metody. Można to wykorzystać dla naszych zastosowań i załadować jeden arkusz stylu do nowoczesnych przeglądarek oraz drugi do Nestcape\’a 4.x, który w innym przypadku zacznie dławić się bardziej złożonym CSS-em.

Kaskadowe arkusze stylów zaprojektowano po to, by pływały jeden nad drugim. Sekret tkwi w utworzeniu prostego arkusza stylu, który będzie działać w Netscapie 4.x z bardziej złożonym CSS-em przesuniętym do dodatkowego arkusza stylu, przyłączonego za pomocą @import, który Netscape 4.x będzie ignorować:

4. Zmyślne gradientowe tła

Za pośrednictwem CSS-a można w dużym stopniu kontrolować i dopasowywać obrazy użyte jako tło. Dobra wiadomość to to, że obrazy nie są ograniczone do tła body, ale mogą być także zastosowane w każdym DIV, poziomie bloku lub elemencie inline.

Obrazy, które są ułożone tradycyjnie lub wzdłuż osi X lub Y, można przewijać ze stroną lub pozostawić tam gdzie są, podczas gdy reszta strony przewija się nad nimi. Tła można też wyrównywać. To oznacza, że w prosty sposób można utworzyć stopniowane tło, które nigdy się nie powtarza bez względu na to, jak długa jest strona. Do tego celu używa się plików graficznych, których objętość wynosi zaledwie kilka kilobajtów.

Użycie poniższego kodu sprawia, że plik tła musi być jedynie tak wysoki jak gradient i szeroki na jeden piksel. Ten przykład zakłada, że gradient przechodzi w biały, ale atrybut koloru tła może przyjąć dowolną wartość.

body { background-color: white; background-image:
url(background.PNG); background-repeat: repeat-x; }

5. Komentowanie

Gdy wracamy na jakąś stronę, którą zaprojektowaliśmy miesiące temu, nie może być nic gorszego niż zrozumienie, co napisaliśmy i próby rozwikłania zawiłości kodu. Zróbmy sobie przysługę (i każdemu, kto zechce zerknąć na użyty na naszej stronie kod) umieszczając w HTML-u komentarze. Komentarze mogą być długie na kilka bajtów lub kilobajtów, ale zaoszczędzony dzięki nim czas jest bezcenny.

Komentarze zachęcają także do starannego kodowania poprzez dzielenie go na logiczne porcje. Niektórzy programiści wykorzystują komentarze do tworzenia spisu treści dla strony, który jest widoczny jedynie w poglądzie kodu.

Pamiętajmy jednak, że HTML i CSS korzystają z dwóch różnych rodzajów komentarzy, możemy więc chcieć poznać różnice.

/* CSS comments are enclosed by a forward slash and an asterisk. */

6. Skorzystajmy z prostego PHP przy budowie strony

Nie trzeba być ekspertem od PHP, by zacząć go używać do budowy strony. Jeśli nasz serwer wspiera PHP, możemy szybko i prosto za pomocą plików nagłówkowych (includes) zbudować bibliotekę używanych zwykle elementów, włączając je do naszej strony za pomocą prostego linka. To działa dla takich elementów jak menu, które może istnieć osobno. To oznacza, że jeśli dodamy nową pozycję w menu lub zmienimy projekt, wystarczy zmienić załączony plik, przez co uaktualnimy całą stronę.
Owe pliki są prostymi fragmentami kodu HTML, takimi jak tabela lub nieuporządkowana lista. Odwołująca się do nich strona powinna mieć rozszerzenie .php a pliki są dołączone za pomocą prostego kodu przedstawionego poniżej:

7. Ustawianie czcionek z pomocą ems

Projektanci kochają precyzować rozmiar typów w pikselach, ponieważ prosto i naturalnie odpowiada to temu, co robią w Photoshopie. Jednak jako typ określania rozmiaru piksele mają jedną wielką niedogodność: nie można zmienić ich rozmiaru w Internet Explorerze. A jeśli zwiększymy rozdzielczość monitora, to przecież nie tylko osoby z wadami wzroku będą być może chciały zwiększyć rozmiar fontu. Jakie jest więc rozwiązanie problemu?

Odpowiedzią jest specyfikacja typu w jednostkach em. Em jest szerokością litery \”M\” w foncie.

Ustawmy atrybut wielkości czcionki w znaczniku body na 62,5% jak to przedstawiono poniżej:

body { font-size: 62.5% }

To sprawi, że pojedynczy em będzie się równać 10 pikselom (16 x 62,5 = 10). Teraz możemy wyrażać wielkość pikseli w emsach. Przykładowo, 12 pikseli może być wyrażona jako 1,2 em, 9 pikseli staje się 0,9 em i tak dalej. Powinno to zadowolić zarówno projektantów, jak i użytkowników.

8. IE BOX Model hack

Wcześniej czy później natkniemy się na poważny błąd w IE, który nieprawidłowo oblicza szerokość i wysokość elementów poziomu bloku przez włączenie wartości dopełnienia (ang. padding) w rozmiary pola, zamiast dodania ich na jego zewnątrz. To może rozsadzić layout. Rozwiązanie jest znane jako Box Model Hack, które wykorzystuje inny błąd w IE, by zmusić przeglądarkę do użycia znaczników ignorowanych przez inne przeglądarki. Jeśli mamy div określony jak poniżej:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

to w większości przeglądarek otrzymamy box szeroki na 120 pikseli, ale w IE będzie on miał jedynie 100 pikseli. Najprostsze rozwiązanie to metoda box-within-the-box, gdzie jeden div jest umieszczany wewnątrz drugiego:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_
}

Stosuje się to w następujący sposób:

Your content goes here

9. Oszczędzanie przestrzeni

Nikt nie lubi budowania formularzy w HTML-u, zwłaszcza gdy przeglądarka zmusza do dodania wypełnienia wokół nich bez żadnego powodu. Po prostu dodajmy następujący CSS do naszego arkusza stylu.

10. Testy, testy i jeszcze raz testy

Dominacja IE na rynku przeglądarek jest nadszarpywana przez inne przeglądarki, takie jak Firefox i Opera. Wiele osób nadal używa archaicznych przeglądarek takich, jak stare wersje Netscape\’a.

Niemożliwe jest zaprojektowanie wspaniale wyglądającej strony WWW, która będzie działać we wszystkich wersjach przeglądarek, najlepiej więc zdecydować, które przeglądarki będziemy wspierać. Te oparte na Mozilli, WebKit (np. Safari), KHTML-u (Konqueror), Opera i Internet Explorer w wersji od 4 w górę są ogólnie uważane za godne zaufania standardy. Jednakże powinniśmy być dobrymi obywatelami sieci i tworzyć kod, który umożliwi nawet niewspieranym przeglądarkom otwarcie strony, nawet w niedoskonałej postaci (patrz porada nr 14).

11. Podstawy formatowania

Dawniej wszystko było proste. Jeśli grafika taka jak logo zawierała \”płaskie\” kolory, używaliśmy GIF-a. Jeśli było to zdjęcia, używaliśmy JPEG-a. Jest także trzeci format – PNG, który ma dwie wersje: 8-bitową z 256 kolorami oraz 24-bitową ze wsparciem dla kanału alfa ze zmienną przezroczystością.

Złą wiadomość jest to, że IE nie wspiera kanałów alfa PNG bez uciekania sie do zupełnego ich przerabiania. 8-bitowy PNG kompresuje sie jednak lepiej, niż jego odpowiednik GIF. O ile nie potrzebujemy animacji, której nie da się uzyskać w PNG, PNG może zastąpić GIF-y w większości sytuacji, dzięki czemu zyskujemy na objętości pliku.

JPEG zazwyczaj tworzy mniejsze pliki niż 24-bitowy PNG, więc o ile nie korzystamy z kanału alfa PNG za pomocą sztuczki (http://www.alistapart.com/stories/pngopacity/), JPEG nadal jest lepszym formatem dla obrazów z pełną paletą barw.

12. Atrybuty \”title\” i \”alt\”

Upewnijmy się, że nasze obrazki korzystają ze znaczników title oraz alt, co czytnikom przeznaczonym dla osób z wadami wzroku umożliwi właściwe sparsowanie strony:

13. Właściwy format dla pseudoklas

Dla efektu rollover ważne jest to, że pseudoklasy są we właściwej kolejności, w przeciwnym razie nie będą działać poprawnie we wszystkich przeglądarkach. Właściwa kolejność to:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

14. Zastosowania znaczeniowego mark-up

Idea stojąca za semantycznym znakowaniem to oddzielenie treści serwisu od jego wyglądu, co wspaniale ją degraduje. Idealnie, jeśli nie musieliśmy usuwać arkuszy stylów, strona powinna nadal działać. Może wyglądać niezbyt ładnie, ale użytkownicy starszych przeglądarek, będą w stanie skorzystać ze zrozumiałej treści zamieszczonej na stronie.

Pozycjonowanie, style i pewna interaktywność może być dodana później za pomocą arkuszy stylów i CSS-P.

15. Favikony

Favikony (ang. favicons) to nieduże 16 x 16 pikseli ikony, które pojawiają się na listach ulubionych i w pasku adresowym strony WWW. Można je szybko i prosto dodać: zapiszmy grafikę w formacie .ico i umieścić ją w głównym folderze serwisu. Tylko tyle.

16. Zmiana liter z pomocą CSS

Jeśli potrzebujemy tekstu napisanego dużymi literami, takiego jak nagłówek, zamiast go ponownie przepisywać, pozwólmy CSS-owi wykonać tę niewymagającą myślenia pracę. Poniższy kod przekształci każdy tekst opatrzony atrybutem h1 na tekst zapisany dużymi literami, bez względu na format.

h1 { text-transform: uppercase; }

17. Zawijanie tekstu wokół obrazków

18. Zestawy uniwersalnych znaków

Zestawy znaków są ważną częścią definicji strony WWW, ale zarazem są chyba jednym z najmniej rozumianych składników. Zestawy znaków, które są definiowane niewidzialnej sekcji nagłówka strony, mówią przeglądarce jakiej metody należy użyć by odkodować znaki. ISO Latin 1 (znany także jako ISO 8859-1) przetwarza kod, który znajdzie za pomocą podstawowego alfabetu zachodniego, ale Shift JIS będzie próbować wyświetlać każdy znak, jaki znajdzie w języku japońskim.

W obliczu dużej konkurencji zestawów znaków mogą pojawić się problemy, zwłaszcza gdy używamy zestawu znaków MS Windows (w którym część znaków może zostać zastąpiona pustą przestrzenią w innych systemach operacyjnych) lub gdy kilka języków występuje obok siebie na jednej stronie.

Rozwiązaniem jest użycie jednego uniwersalnego zestawu znaków, który jest w stanie poradzić sobie w większości potencjalnych sytuacji. Na szczęście jeden taki istnieje: UTF-8, bazujący na Unicode. Unicode to branżowy standard, zaprojektowany by umożliwić spójne wyświetlanie i obróbkę tekstów oraz symboli pochodzących z różnych języków. UTF-8 szybko stał się definicją zestawu znaków z wyboru i powinien zostać dołączony do nagłówka strony w następujący sposób:

19. Style wydruku

Gdy ludzie drukują strony WWW, często nie są zainteresowani naszą błyskotliwą grafiką. Chcą jedynie uproszczonej wersji strony. Za pomocą CSS można utworzyć osobny arkusz stylu, który dotyczy jedynie drukowanych wersji strony. Arkusz stylu wydruku dodajemy dokładnie w taki sam sposób, jak regularny arkusz stylu do strony:

lub

Dzięki temu CSS będzie stosowany tylko przy drukowaniu i nie będzie wpływać na to, jak strona wygląda na ekranie. Zastosowanie nowego arkusza stylów gwarantuje czarny tekst na białym tle oraz usunięcie dodatkowych funkcji – wszystko, by zwiększyć łatwość czytania.

20. Uczenie się od innych

Wreszcie szybka i prosta rada: uczmy się podpatrując dobre serwisy, które stworzyli inni. Budowę każdego serwisu przygotowanego w HTML-u można łatwo podejrzeć wyświetlając źródło strony. Zobaczmy jak inni wykonali swoją pracę i zastosujmy ich metody w naszej własnej pracy.