Dążenie ku doskonałości
Zwiększanie atrakcyjności witryny to tylko jeden i wcale nie najważniejszy aspekt pracy webmastera. Przecież zawsze można zrezygnować z efektownych “wodotrysków” i postawić na prostotę – ostatecznie najważniejsze jest zaprezentowanieodwiedzającemu pewnych informacji. Trzeba jednak pamiętać, że prostota to nie to samo co siermiężność, a wszystkiego w zwykłym HTML-u zrobić się po prostu nie da. Jeżeli zatem nasza witryna ma wchodzić w interakcję z użytkownikiem (np. wyświetlać się w wybranym przez niego schemacie kolorów) czy też zbierać jakieś dane (np. o liczbie odwiedzin), trzeba się liczyć z potrzebą wykorzystania innych technik.
Każdemu twórcy stron WWW powinno też zależeć na tym, by powierzona mu witryna miała poprawny i optymalny kod HTML oraz żeby dotarła do niej jak największa liczba użytkowników Internetu. Realizacja tych zadań nie jest bynajmniej prosta – na szczęście istnieje wiele narzędzi wspomagających pracę webmastera.
Pomocnicy
Gdy tworzymy najprostsze witryny, zawierające krótki kod HTML, wystarczy skorzystać z dowolnego edytora, np. Notatnika. Trudno jednak mówić o komforcie pracy z taką aplikacją w wypadku rozbudowanych dokumentów. Nie można wówczas ogarnąć całości kodu witryny, a więc sprawnie i szybko modyfikować jej zawartości. Niewygodne jest także sprawdzanie poprawności źródła strony (szczególnie że wiele przeglądarek “poprawnie” wyświetli dokumenty HTML zawierające błędy składni!), chyba że użyjemy w tym celu specjalnego programu, tzw. walidatora.
Oczywiście tego rodzaju dodatkowe narzędzia i usprawnienia znajdziemy w wielu edytorach kodu HTML, takich jak HomeSite czy Pajączek, ale nawet i one nie sprostają wymaganiom każdego web-mastera (patrz: $(LC132498: Edytory HTML a dodatkowe narzędzia)$). Czasami też o wiele prościej jest wykonać pewne elementy witryny w innych programach (np. generatorach galerii obrazków) lub skorzystać z gotowców znajdujących się w różnego rodzaju składnicach skryptów (np. dynamiczne menu). Trudno również wyobrazić sobie tworzenie strony bez edytora stylów CSS, programu do obróbki grafiki, konwertera znaków itp.
Tworzenie i optymalizacja kodu HTML
Do podstawowych narzędzi każdego webmastera należą edytory ułatwiające pisanie kodu, np. specyficzne kolorowanie jego składni. Na ich temat nie będę się jednak w tym artykule rozwodziła, gdyż każdy – nawet początkujący twórca stron WWW – zapewne ma już swoją ulubioną aplikację. Trudno by też było w kilku zdaniach rzetelnie je porównać i wskazać tą najlepszą. Warto natomiast przyjrzeć się bliżej bardzo użytecznej grupie programów dbających o poprawność kodu HTML, jego zgodność ze standardami oraz optymalizację, szczególnie że nie każdy z nas na co dzień rozumie potrzebę ich stosowania.
Nie robić błędów
Walidacja kodu HTML lub CSS to nic innego jak sprawdzenie poprawności składni dokumentu oraz jego zgodności z oficjalną specyfikacją języka, publikowaną przez World Wide Web Consortium na www.w3c.org. Walidatory analizują więc pliki stron WWW i wyszukują znajdujące się w nich błędy: brakujące lub błędnie użyte znaczniki i atrybuty, nieprawidłowe ich zagnieżdżenia, brakujące cudzysłowy, literówki itd. Przy okazji programy te wyłapują znaczniki przestarzałe (np.
Ktoś mógłby jednak zapytać, po co to wszystko, skoro strona i tak jest dobrze wyświetlana w najpopularniejszej przeglądarce. Istnieje jednak wiele powodów, dla których każdy publikowany w Sieci dokument należy dokładnie sprawdzić. Po pierwsze dlatego, że poprawny kod wyświetli się dobrze w większości przeglądarek, a nie tylko w tej, “pod którą” był pisany. Trzeba też pamiętać, że najnowsze wersje browserów dużo dokładniej sprawdzają kod strony przed jej wyświetleniem i mogą po prostu nie zaprezentować dokumentu zawierającego błędy. Nie bez znaczenia jest także fakt, iż niepoprawnie skonstruowane witryny dłużej się ładują, gdyż przeglądarka musi poświęcić czas na zinterpretowanie i ominięcie błędów. Stosując walidatory, możemy także pogłębić naszą wiedzę o języku HTML oraz w wypadku zmiany specyfikacji odkryć różnice w stosunku do jej poprzedniej wersji. Szczególne korzyści ze stosowania tego typu programów powinny jednak odczuć osoby korzystające z tzw. graficznych edytorów stron WWW, które generują pliki o nadmiernej liczbie znaczników. Dzięki weryfikacji składni taki dokument można oczyścić z niepotrzebnych “śmieci”, a zarazem znacznie odchudzić. Witryna będzie się zatem ładowała dużo szybciej.
Część narzędzi weryfikujących kod HTML jest dostępna online na specjalnych stronach WWW. Mam tu na myśli przede wszystkim takie aplikacje, jak WDG HTML Validator i W3C Validator, które analizują dokumenty napisane w językach HTML i XHTML. Najpopularniejszym walidatorem jest jednak Tidy, którego możemy zainstalować na dysku jak każdą inną aplikację. Z kolei do sprawdzania poprawności arkuszy stylów polecam CSSCheck.
Programy dla webmasterów | |||
Nazwa programu | http:// | Cena | Krótki opis |
Walidatory | |||
W3C Validator | validator.w3.org/ | freeware | Analizuje kody HTML i XHTML stron WWW pod kątem poprawności i zgodności ze standardami. |
WDG HTML Validator | www.htmlhelp.com/tools/validator/ | freeware | Zdalny walidator HTML na stronie HTMLhelp. |
Tidy | www.w3.org/People/Raggett/tidy/ | freeware | Automatycznie poprawia błędy w kodzie HTML. |
CSSCheck | www.htmlhelp.com/tools/csscheck/ | freeware | Sprawdzanie poprawności stylów. |
NetMechanic Online | www.netmechanic.com/ | darmowy test strony | Sprawdza poprawność kodu HTML, kompatybilność z przeglądarkami, czas ładowania strony, testuje odnośniki oraz sprawdza pisownię w języku angielskim. |
Dr. Watson | watson.addy.com/ | freeware | Sprawdza poprawność kodu HTML, czas ładowania strony, poprawność odno_ników, weryfikuje odnośniki do plików graficznych, sprawdza popularność strony oraz pisownię w języku angielskim. |
Delorie | www.delorie.com/ | freeware | Sprawdza poprawność kodu HTML, ma możliwość porównania wyglądu strony w różnych przeglądarkach i symulację wyszukiwarek. |
HTML-Optimizer 9.0.1 | www.tonbrand.nl/ | ok. 17 USD | Aplikacja służąca do optymalizacji stron internetowych. Optymalizuje zarówno kod HTML, jak i skrypty. |
MetaMedic | www.northernwebs.com/set/setsimjr.html | freeware | Sprawdzanie poprawności znaczników META. |
META Master 2000 4.0 | www.reallybig.com/mm/ | freeware | Prosty generator znaczników META na strony WWW. |
cg-eye | www.htmlhelp.com/tools/cg-eye/ | freeware | Sprawdzanie poprawności skryptów CGI. |
GIF Wizard SiteScan | www.gifwizard.com/ | darmowy test | Sprawdzanie poprawności odnośników oraz wyszukiwanie grafiki, która nie jest zoptymalizowana. |
Narzędzia skryptowe | |||
Code Charge 2.3 | www.codecharge.com/ | ok. 140 USD | Generator kodu aplikacji i serwisów internetowych, umożliwiający programowanie w językach ASP, PHP, Java Servlets, JSP, ASP.NET (C# i VB.NET), Perl czy CodeFusion. |
JS Utility Suite 1.0 | dark-street.cjb.net/ | freeware | Zestaw narzędzi pozwalający szybko przygotować kod JavaScriptu do najpopularniejszych zastosowań. |
JK Popup Window Generator 3.0 | javascriptkit.com/popwin/ | freeware | Proste narzędzie do tworzenia okienek pop-up. |
Status Bar Javascript Magic 1.0 | www.likno.com/ | freeware | Narzędzie do generowanie animowanych Pasków statusu na stronach internetowych. |
CoffeeCup Button Factory 6.1 | www.coffeecup.com/ | ok. 34 USD | Łatwy w użyciu kreator przycisków na potrzeby stron WWW. |
ScriptXL 1.5 | www.tavsoft.com/ | ok. 15 USD | Prosty generator kodu JavaScript. |
MouseOver Button Wizard 2.2 | www.mobw.net/ | freeware | Generator służący do szybkiego i łatwego tworzenia efektów MouseOver dla przycisków. |
TopStyle Lite 3.10 | www.bradsoft.com/ | freeware | Jeden z najlepszych programów do tworzenia CSS. |
CoffeeCup StyleSheet Maker | www.coffeecup.com/ | ok. 34 USD | Zaawansowane narzędzie do tworzenia kaskadowych arkuszy stylów. |
Layout Master 1.1 | www.westciv.com/ | freeware | Pozwala zaprojektować rozmieszczenie elementów na stronie WWW. |
Style Master 3.5 | www.westciv.com/ | ok. 50 USD | Wygodne tworzenie kaskadowych arkuszy stylów (CSS) i formatowanie stron WWW z ich wykorzystaniem. |
Pomocnik PHP Comfort | php.wckp.lodz.pl/ | freeware | Program ułatwiający tworzenie stron z wykorzystaniem PHP. |
phpBB 2.0.11 | www.hotscripts.pl/ | freeware | Bardzo popularny system forum dyskusyjnego. |
CoffeeCup DHTML Menu Builder | www.coffeecup.com/ | freeware | Tworzenie menu w DHTML-u. |
Sothink DHTMLMenu 5.5 | www.srctec.com/ | ok. 35 USD | Tworzenie menu w DHTML-u. |
AllWebMenus PRO 3.1.532 | www.likno.com/ | ok. 60 USD | Aplikacja służąca do wygenerowania menu strony WWW. |
SiteXpert Professional 6.1 PL | www.xtreeme.com/pl/sitexpert/ | ok. 125 USD | Tworzenie elementów nawigacyjnych witryn internetowych (menu, drzewa itp.) oraz wyszukiwarek. |
Grafika i Flash | |||
Ulead PhotoImpact 10 | www.ulead.com/ | ok. 90 USD | Program do edycji grafiki rastrowej. |
Adobe ImageReady | www.adobe.com/ | ok. 3270 zł 1) | Moduł Photoshopa, umożliwiający optymalizację grafiki internetowej. |
CoffeeCup GIF Animator | www.coffeecup.com/ | ok. 34 USD | Prosty w obsłudze program do tworzenia animowanych GIF-ów. |
Actual Web Album 1.6 | www.exacttrend.com/ | ok. 20 euro | Narzędzie do tworzenia internetowych galerii zdjęć. |
Album Creator 3 | albumcreator.firmtools.com/ | ok. 15 USD | Narzędzie służące do przygotowywania albumów internetowych. |
Express Thumbnail Creator 1.72 | www.neowise.com/ | ok. 40 USD | Program do tworzenia galerii internetowych; dzięki kreatorowi obsługa programu jest wyjątkowo łatwa. |
CoffeeCup Firestarter | www.coffeecup.com/ | ok. 49 USD | Tworzenie multimedialnych, flashowych animacji. |
MenuMaker | www.mi-studio.com/ | freeware | Program do konstrukcji profesjonalnych menu rozwijalnych. |
Macromedia Fireworks MX | www.macromedia.com/ | ok. 415 euro | Przygotowywanie grafiki do publikacji multimedialnych i witryn WWW. |
Xara Web Style | www.xara.com/ | ok. 79 USD | Tworzenie trójwymiarowych napisów, nagłówków, logo, animacji. |
1) – cena dotyczy programu Adobe Photoshop, w skład którego wchodzi moduł ImageReady. | |||