Artykuł

cze 08 2010
0

Porady dla webmasterów

Studiując, pracując, a przede wszystkim tworząc Alt Control Delete, miałem okazje by nauczyć się co nieco o Webdeveloperce. W dzisiejszym wpisie, chciałbym przedstawić garść porad, które przydać mogą się, szczególnie początkującym webmasterom. Zapraszam więc dalej:)

Technologie

Pierwszą rzeczą, od której powinniśmy rozpocząć tworzenie każdej strony WWW to wybór technologii. Jeśli znamy kilka technologii, to wybór powinniśmy uzależnić od przeznaczenia strony. Przykładowo, jeśli robimy stronę wizytówkę, z jedną podstroną (ewentualnie kilkoma), które będą mieć statyczny charakter to powinien wystarczyć statyczny (X)HTML.

Jeśli strona ma mieć dynamiczną, zmienną treść, jeśli dane mają być pobierane z bazy, XMLa, czy też może plików tekstowych, to zostaniemy postawieni przed kolejnym wyborem - wyborem języka, który to wszystko obsłuży.

Do zastosowań prywatnych oraz częściowo komercyjnych, często używany jest tzw. LAMP, będący połączeniem kilku znanych technologii.

W poważnych zastosowaniach komercyjnych, w grę będzie wchodzić ASP.NET lub JEE.

Przeczytaj tekst na temat różnych technologii internetowych, aby dowiedzieć się więcej.

Jaki doctype?

Doctype to nic innego jak deklaracja typu dokumentu, która powinna być dodana do każdego porządnie sformatowanego dokumentu i to na samym jego początku. Można powiedzieć, że Doctype określa reguły gry, a formalnie rzecz ujmując, określa on język znaczników używanych na stronie (przeczytaj więcej na temat technologii internetowych).

Każdy język znaczników, ma swoje unikalne tagi (znaczniki) oraz reguły według których należy budować stronę. Obecnie najpopularniejszym jest XHTML (oparty na XML). Jednak do gry powraca właśnie HTML w wersji 5, który na razie różnie jest wspierany przez przeglądarki, ale raczej na pewno to do niego właśnie należeć przyszłość.

Zatem jeśli ktoś by mnie zapytał jaki Doctype na dziś, odpowiedziałbym XHTML. A dlaczego? Bo jest dobrze wspierany przez wszystkie popularne przeglądarki i jeśli zrobiliśmy taką stronę dobrze, to szybko da się ją przekształcić do HTML 5. Z drugiej strony, jeśli tworzysz stronę dla świadomych użytkowników, którzy stale aktualizują swoje oprogramowanie, możesz pokusić się śmiało o HTML 5. Jeśli tworzysz stronę, dla wielkiej korporacji, w której żyje dziadek IE 6 - to po prostu masz pecha...

O tym jak zadeklarować Doctype, możecie przeczytać na w3schools.

Tagi meta

Tworząc nową stronę WWW, warto zdefiniować tagi meta. Choć wiele osób o nich zapomina, to warto je stosować bo są często przydatne i skanowane przez różne roboty sieciowe. Dostrzeżemy ich znaczenie również, kiedy będziemy chcieli dodać stronę do wielu różnych katalogów, które pobierają te dane.

Istnieją cztery podstawowe tagi, na które warto moim zdaniem zwrócić uwagę:

<meta name='content-language' content='pl' />
<meta name='author' content='autor' />
<meta name='keywords' content='słowa kluczowe' />
<meta name='description' content='opis strony' />

Pierwszy z nich, content-language - pozwala na określenie języka zawartości strony. Przydaje się, do jawnej deklaracji języka, w jakim tworzona jest nasza witryna. Informacja ta jest przydatna np. z punktu widzenia wyszukiwarek i wyników przez nie prezentowanych.

Drugi zapis, pozwala na określenie autora. Może to być imię i nazwisko, ksywka, coś co nas identyfikuje.

W trzeciej linii, znalazł się metatag, zawierający tzw. słowa kluczowe. Są to charakterystyczne dla naszej strony słowa, które pojawiają się najczęściej w jej treści. Np. dla strony o programowaniu, mogą to być nazwy różnych języków programowania, wzorców projektowych, itp. Wszystkie słowa należy rozdzielać przecinkiem i nie należy przesadzić z ich ilością. Najlepiej jeśli będzie ona oscylować w granicy pomiędzy 100 - 200 znaków.

W czwartej linii, definiujemy opis strony. Powinien on być zwięzły i treściwy i nie przekraczać 160 znaków.

Zdefiniowane w meta tagach słowa kluczowe oraz opis strony, możemy definiować dla każdej podstrony z osobna. Kiedyś tak zdefiniowane dane miały ogromne znaczenie z punktu widzenia pozycjonowania. Dziś, w dużej mierze, mają one charakter bardziej informacyjny, choć sekrety działania algorytmów wyszukiwarek nie są do końca znane (jeśli jest taka szansa, że wciąż są jednak używane, to warto z nich skorzystać). Dlatego ja jestem zwolennikiem ich umieszczania.

Istnieje jeszcze jeden metag, godny uwagi i zwie się on robots. O jego działaniu pisałem szerzej, we wpisie poświęconym zarządzaniu ruchem robotów sieciowych.

Tag title

Tag title, występuje w sekcji head strony i ma duże znaczenie z punktu widzenia pozycjonowania (czytaj więcej na temat pozycjonowania) jak również samej logiki budowania strony WWW. Niestety, zbyt długi tag title, jest ucinany przez wyszukiwarki jak również staje się po prostu nieczytelny dla samych użytkowników naszej strony. Dlatego moja rada na budowę takiego tagu jest taka:

Nazwa konkretnej podstrony - Nazwa strony

Sam osobiście staram się zawsze trzymać tej reguły - co powinno być widoczne na górnej belce przeglądarki. Dzięki temu, za każdym razem powinien się zaindeksować, tytuł określonej podstrony, a jeśli jest on stosunkowo krótki, to zaindeksuje się również tytuł całej strony, a tym samym wzmocnią słowa kluczowe w nim zawarte.

Semantyka strony

Zgodnie z ogólnie panującym trendem rozwoju semantycznego Internetu, coraz większe znaczenie ma układ treści zawartych na stronie. Tworząc tekst, warto jest odpowiednio zaznaczać ważne punkty, frazy czy też słowa. Na znaczeniu zyskują wszystkie znaczniki nagłówków (h1, h2, h2 itd.), wyróżnień (strong, em, q), a także np. znacznik abbr, który umożliwia wstawianie w treść strony skrótów.

Dodatkowo, tworząc nagłówki warto zadbać o ich logiczną strukturę. Najważniejszy z nich, to oczywiście h1 i służy on z reguły do oznaczenia loga/tytułu strony. Kolejne nagłówki mogą być używane np. jako nazwy kolumn w panelu bocznym czy też po prostu jako tytuł konkretnej podstrony (u mnie widoczny pod logiem - z prawej strony).

Walidacja i przeglądarki

Kod (X)HTML możemy stworzyć prosto i szybko, jednak aby stworzyć porządny kod, pozbawiony błędów walidacji to potrzeba już praktyki jak i czasu. Poprawność kodu oraz możliwości z jakich możemy skorzystać, zależą od wybranego typu dokumentu (Doctype).

W chwili obecnej, prawdopodobnie najbardziej surowe wymagania, ma XHTML w wersji Strict. Poprawność naszej strony, możemy weryfikować na kilka sposobów:

  • Walidując stronę za pomocą walidatora W3C
  • Walidując stronę przy pomocy wtyczki do przeglądarki (sprawdź Html Validator - wtyczkę do Firefoksa)
  • Walidując stronę przy pomocy edytora HTML (jeśli nasz program posiada takie funkcje)

Niezależnie od wybranego sposobu, zawsze powinniśmy dążyć do tego, by nasza strona była poprawna. Szczególnie gdy pracujemy na stanowisku webdevelopera. Warto tu również zwrócić uwagę, że strona powinna się wyświetlać dobrze w najnowszych i najpopularniejszych wersjach topowych przeglądarek (Internet Explorer, Mozilla Firefox, Opera oraz Chrome) - co ważne przeglądarki bywają kapryśne.

Narzędziem które warto poznać, jest Firebug będący niezwykle zaawansowana wtyczką do przeglądarki Firefox. Firebug pozwala nam między innymi: badać kod strony, podglądać wysyłane żądania, debugować JavaScript itd.

Internet Explorer

Mówiąc o walidacji i przeglądarkach, warto jeszcze wspomnieć o zmorze każdego Webmastera, czyli przeglądarce Internet Explorer, która kompletnie rozmija się ze standardami. Niestety, wciąż trzyma się ona mocno, choć wersja 6, która była domyślnie instalowana wraz z Windowsem XP, powolutku wymiera i właściwie jeśli nikt nas nie zmusza, to nie jest konieczne jej wsparcie. Gorzej, jeśli tworzymy strony np. dla jakiś dużych korporacji, w których często królują przeglądarki pokroju Internet Explorer. W takiej sytuacji musimy po prostu zadbać o kompatybilność wsteczną. W przypadku IE pojawia się kolejny problem, ponieważ każda z wersji (6, 7, 8) potrafi się zachowywać zupełnie inaczej z jednym określonym kawałkiem kodu...

I tu pojawia się następny problem - skąd wziąć nagle kilka różnych wersji IE? Z pomocą mogą przyjść narzędzia pokroju IETester (screen 1), które posiadają wbudowanych kilka wersji silników różnych przeglądarek. IETester jest specjalistą od IE i pozwala na testowanie naszej strony w Internet Explorerze w wersjach 5.5, 6, 7 oraz 8! Mi się on przydał już nieraz:)

Browsershots.org

Jeśli klient wymaga, aby strona działała właściwie na dowolnej konfiguracji system-przeglądarka, a my nie mamy technicznej możliwości by to wszystko sprawdzić ręcznie, możemy pokusić się o wykorzystanie strony Browsershots (screen 2), która tworzy zrzuty ekranu naszej strony w różnych systemach i przeglądarkach (lista możliwości jest naprawdę pokaźna). Ponieważ generowanie zrzutów zajmuje czas (z reguły do godziny), warto taki proces przeprowadzić już raczej na końcu procesu budowy naszej strony. Gotowe screeny, możemy pokazać nawet naszemu klientowi:)

Statystyki dla strony

Tworząc mniej lub bardziej rozbudowany serwis, z pewnością będzie nam zależało na tym, by ktoś tam jednak zaglądał. A jak to szybko zweryfikować? Podłączając na szybko jakiś skrypt statystyk. Moim niekwestionowanym faworytem jest Google Analytics, który oferuje bezpłatne statystyki dla każdego. Można jeszcze skorzystać z oferty stat24 oraz wielu różnych innych serwisów, których dzięki Google można znaleźć setki.

Zawsze, możemy również pokusić się o napisanie własnego skryptu statystyk:)

Słowo końcowe

Przedstawione wyżej porady to tak naprawdę tylko wycinek spraw, z których warto sobie zdawać sprawę. Prawda jest taka, że w zawodzie informatyka/programisty/webdevelopera, należy uczyć się całe życie. I to zarówno z książek, artykułów jak i na własnych błędach (choć tych powinno być oczywiście jak najmniej:)). I z tą twórczą zachętą, kończę dzisiejszy wpis.

Data ostatniej modyfikacji: 05.06.2011, 17:21.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus