Niezbędnik webmastera

Stworzenie profesjonalnej witryny nie sprowadza się wyłącznie do jej zaprojektowania, a następnie napisania w tekstowym bądź graficznym edytorze WWW. Taki scenariusz może być prawdziwy tylko w wypadku serwisów najprostszych, niezawierających interaktywnych lub dynamicznych elementów, ubogich w grafikę czy pozbawionych przyciągających oko animacji. A przecież każdy twórca strony chce, by jego witrynę odwiedzało jak najwięcej osób i aby stanowiła ona wzór do naśladowania dla innych. Niezbędne staje się więc jej ciągłe ulepszanie, a do tego potrzeba odpowiednich programów. Na następnych stronach przedstawię te najpotrzebniejsze.

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.

), których stosowanie nie jest obecnie zalecane, a które często z przyzwyczajenia są używane przez autorów stron. W takim wypadku należy je oczywiście zastąpić np. poprzez odpowiednio zdefiniowany styl.

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 programuhttp://CenaKrótki opis
Walidatory
W3C Validatorvalidator.w3.org/freewareAnalizuje kody HTML i XHTML stron WWW pod kątem poprawności i zgodności ze standardami.
WDG HTML Validatorwww.htmlhelp.com/tools/validator/freewareZdalny walidator HTML na stronie HTMLhelp.
Tidy www.w3.org/People/Raggett/tidy/freewareAutomatycznie poprawia błędy w kodzie HTML.
CSSCheckwww.htmlhelp.com/tools/csscheck/freewareSprawdzanie poprawności stylów.
NetMechanic Onlinewww.netmechanic.com/darmowy test stronySprawdza poprawność kodu HTML, kompatybilność z przeglądarkami, czas ładowania strony, testuje odnośniki oraz sprawdza pisownię w języku angielskim.
Dr. Watsonwatson.addy.com/freewareSprawdza 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.
Deloriewww.delorie.com/freewareSprawdza poprawność kodu HTML, ma możliwość porównania wyglądu strony w różnych przeglądarkach i symulację wyszukiwarek.
HTML-Optimizer 9.0.1www.tonbrand.nl/ok. 17 USDAplikacja służąca do optymalizacji stron internetowych. Optymalizuje zarówno kod HTML, jak i skrypty.
MetaMedicwww.northernwebs.com/set/setsimjr.htmlfreewareSprawdzanie poprawności znaczników META.
META Master 2000 4.0www.reallybig.com/mm/freewareProsty generator znaczników META na strony WWW.
cg-eyewww.htmlhelp.com/tools/cg-eye/freewareSprawdzanie poprawności skryptów CGI.
GIF Wizard SiteScanwww.gifwizard.com/darmowy testSprawdzanie poprawności odnośników oraz wyszukiwanie grafiki, która nie jest zoptymalizowana.
Narzędzia skryptowe
Code Charge 2.3www.codecharge.com/ok. 140 USDGenerator 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.0dark-street.cjb.net/freewareZestaw narzędzi pozwalający szybko przygotować kod JavaScriptu do najpopularniejszych zastosowań.
JK Popup Window Generator 3.0javascriptkit.com/popwin/freewareProste narzędzie do tworzenia okienek pop-up.
Status Bar Javascript Magic 1.0www.likno.com/freewareNarzędzie do generowanie animowanych Pasków statusu na stronach internetowych.
CoffeeCup Button Factory 6.1www.coffeecup.com/ok. 34 USDŁatwy w użyciu kreator przycisków na potrzeby stron WWW.
ScriptXL 1.5www.tavsoft.com/ok. 15 USDProsty generator kodu JavaScript.
MouseOver Button Wizard 2.2www.mobw.net/freewareGenerator służący do szybkiego i łatwego tworzenia efektów MouseOver dla przycisków.
TopStyle Lite 3.10www.bradsoft.com/freewareJeden z najlepszych programów do tworzenia CSS.
CoffeeCup StyleSheet Makerwww.coffeecup.com/ok. 34 USDZaawansowane narzędzie do tworzenia kaskadowych arkuszy stylów.
Layout Master 1.1www.westciv.com/freewarePozwala zaprojektować rozmieszczenie elementów na stronie WWW.
Style Master 3.5www.westciv.com/ok. 50 USDWygodne tworzenie kaskadowych arkuszy stylów (CSS) i formatowanie stron WWW z ich wykorzystaniem.
Pomocnik PHP Comfortphp.wckp.lodz.pl/freewareProgram ułatwiający tworzenie stron z wykorzystaniem PHP.
phpBB 2.0.11www.hotscripts.pl/freewareBardzo popularny system forum dyskusyjnego.
CoffeeCup DHTML Menu Builderwww.coffeecup.com/freewareTworzenie menu w DHTML-u.
Sothink DHTMLMenu 5.5www.srctec.com/ok. 35 USDTworzenie menu w DHTML-u.
AllWebMenus PRO 3.1.532www.likno.com/ok. 60 USDAplikacja służąca do wygenerowania menu strony WWW.
SiteXpert Professional 6.1 PLwww.xtreeme.com/pl/sitexpert/ok. 125 USDTworzenie elementów nawigacyjnych witryn internetowych (menu, drzewa itp.) oraz wyszukiwarek.
Grafika i Flash
Ulead PhotoImpact 10www.ulead.com/ok. 90 USDProgram do edycji grafiki rastrowej.
Adobe ImageReadywww.adobe.com/ok. 3270 zł 1)Moduł Photoshopa, umożliwiający optymalizację grafiki internetowej.
CoffeeCup GIF Animatorwww.coffeecup.com/ok. 34 USDProsty w obsłudze program do tworzenia animowanych GIF-ów.
Actual Web Album 1.6www.exacttrend.com/ok. 20 euroNarzędzie do tworzenia internetowych galerii zdjęć.
Album Creator 3albumcreator.firmtools.com/ok. 15 USDNarzędzie służące do przygotowywania albumów internetowych.
Express Thumbnail Creator 1.72www.neowise.com/ok. 40 USDProgram do tworzenia galerii internetowych; dzięki kreatorowi obsługa programu jest wyjątkowo łatwa.
CoffeeCup Firestarterwww.coffeecup.com/ok. 49 USDTworzenie multimedialnych, flashowych animacji.
MenuMakerwww.mi-studio.com/freewareProgram do konstrukcji profesjonalnych menu rozwijalnych.
Macromedia Fireworks MXwww.macromedia.com/ok. 415 euroPrzygotowywanie grafiki do publikacji multimedialnych i witryn WWW.
Xara Web Stylewww.xara.com/ok. 79 USDTworzenie trójwymiarowych napisów, nagłówków, logo, animacji.
1) – cena dotyczy programu Adobe Photoshop, w skład którego wchodzi moduł ImageReady.
Więcej:bezcatnews