* Mapa strony

Projektowanie, optymalizacja stron

Porady dla webmasterów - lista zasad


Czyli co robić a czego unikać przy robieniu stron.


1.Można oczywiście pisać stronę w notatniku, ale wygodniej jest użyć edytora stron np. EdHTML. Notatnik ma wady jak, brak kolorowania składni (łatwo o drobny błąd w kodzie który później będzie trudny do odszukania).
Edytor stron m.in. zamyka nam znaczniki, wstawia całe polecenia itd. co znakomicie przyśpiesza i ułatwia pisanie stron.
Jeżeli już chcemy używać notatnika to polecam bardziej rozbudowane niż ten systemowy notatnik, dobrym notatnikiem jest np. notepad2 który koloruje składnie.


2.CSS jest specjalnie stworzony do formatowania wyglądu i ma spore możliwości które nie są dostępne w (x)html. Stosując CSS możesz 'odzudzić' stronę nawet o 70% (mówię tu o samym kodzie). Dodatkowo jeśli zastosujesz zewnętrz plik z CSS przyśpieszysz wczytywanie się strony, gdyż jest on wczytywany tylko raz w czasie przeglądanie całej strony.


3.Coraz więcej osób zdaje sobie sprawę z tego że warto aby strona była zrobiona zgodnie ze standardami. Standardy dają większą szanse na to że strona będzie się dobrze wyświetlać w różnych przeglądarkach.
Jako ciekawostkę dodam że jest ustawa obligująca do tego aby strony rządowe były robione zgodnie ze standardami.


4.Nadal przoduje przeglądarka Internet Explorer, ale to nie oznacza że masz zignorować inne. Absolutne minimum przeglądarek w których należy sprawdzać stronę to IE6, IE7, Firefox, Opera.
Aby posiadać na komputerze kilka wersji IE, można poszukać w Internecie wersji standalone.


5.Skrypty JS takie jak np. zegarek, coś latającego czy inny taki bajer tylko denerwuje oglądającego. Zamiast zachęcać do pozostania na stronie to często powoduje odwrotny skutek.


6.Jeżeli sobie nie radzisz z dostosowaniem strony do określonej przeglądarki to stosujesz hack. Pamiętaj jednak że hack który działa w określonej wersji przeglądarki nie musi działać w innej wersji. Hacki też gmatwają kod strony i po jakimś czasie będzie Ci trudno się w tym wszystkim połapać.


7.Grafika na stronie jest potrzebna, uaktrakcyjnia jej wygląd, jak ze wszystkim stosuj ją z umiarem. Nadmiar grafiki spowoduje wolniejsze wczytywanie się strony, nie każdy ma łącze tak szybkie jak Twoje.


8.Validator pozwoli Ci zauwarzyć błędy na Twojej stronie które uszły Twojej uwadzę. Jeśli używasz przeglądarki Firefox to możesz dla swojej wygody zainstalować rozszerzenie Walidator HTML


9.Bądź otwarty na nowości, pamiętaj że zastój w nauce sztuki webmasterskiej oznacza cofanie się. Jak wszędzie i webmasterstwo nie stoi w miejscu, bez znajomości np. CSS, PHP nie masz co marzyć o dobrej stronie.


10.Eksperymentuj z kodem, takie próby rozwijają Twoje kreatywne myślenie i być może odkryjesz coś.. genialnego co innym się nie udało.


11.Podpatruj jak inni rozwiązali dany problem, wiele się nauczysz dzięki temu. To jest dobra nauka robienia stron.


12.Staraj się tworzyć rozwiązania elestyczne, strona może również dobrze wyglądać gdy oglądamy ją np. na komórce.


13.Mnogość plików wcale nie ułatwia Tobie zadania ani nie powoduje szybszego wczytywania się strony. Jeśli to tylko możliwe to unikaj rozdrabniania strony na pliki.


14.Jeżeli chcesz maksymalnie poszerzyć grono odbiorców Twojej strony to nie zapominaj o tym że instnieją przeglądarki tekstowe np. Lynx.


15.Nie zapominaj o kompresji grafiki użytej na stronie. Grafika ma bardzo duże znaczenia na szybkość wczytywanie się strony.


16.Nie nadużywaj stosowania flasha, nie jest to język który nadaje się na każdą stronę. Flash ładnie wygląda, jednak niedobrze zrobiony może znacznie obciążyć komputer (procesor) oglądającego. Jeżli użyjesz flasha do budowy menu to zalecam zrobić też alternatywne menu (niektórzy blokują flash na stronach).


17.Nie zapomnij dodawać tekst alternatywny (alt) do obrazków, nie każdy ma włączone grafikę na stronach. Niektórzy np. łączą się z Internetem przez GPRS a tam liczy się każdy kilobaj zbędnych danych (wyższe koszty).


18.Dobrym.. nawykiem jest na początku stylów zerować domyślne marginesy przeglądarki * { margin: 0; padding: 0; }, możesz uniknąć wtedy wiele 'niespodzianek' ze strony przeglądarki.


19.Optymalizacja strony pod wyszukiwarki, głównie Google, jest pierwszym krokiem w promocji swojej strony w Internecie. Dobierz słowa kluczowe, na które chcesz się znaleźć wysoko w SERPach, umieść je w odpowiednich miejscach na stronie trzymając się standardów sieciowych (tytuł strony, metatagi description i keywords, h1 - h6, alt, title, anchory linków wewnętrznych i zewnętrznych itp.), a dzięki temu strona będzie przyjazna zarówno dla użytkowników, jak i robotów wyszukiwarek. Pisząc artykuły stawiaj na pierwszym miejscu to, aby były one ciekawe i wartościowe dla użytkowników, jednak staraj się znaleźć kompromis pomiędzy tym, co dobre dla użytkowników a tym, co dobre dla wyszukiwarek.


20.Zrezygnuj z ramek i naucz się stosować include. Ułatw sobie życie i stosuj PHP w jak największym stopniu, ponieważ przyspieszy to pracę nad stroną i daje mnóstwo możliwości.


21.Przeglądarka IE rządzi się własnymi prawami i jeśli strona działa tylko w niej.. to z pewnością masz niepoprawnie napisany kod.


22.Nie zapominaj że są inne systemy operacyjne niż windows. Jeżeli masz na stronie kodowanie windows to użytkownicy którzy mają inny system zobaczą 'krzaczki' na Twojej stronie.


23.Umieszczaj dla Swojej wygody style w zewnętrznym pliku, takim sposobem 'panujesz' nad wyglądem całości strony z jednego pliku.


24.Komentarze w kodzie ułatwiają orientacje co dany kawałek kodu co robi, za co odpowiada. Jednak jak to zwykle bywa z przeglądarką IE, jest błąd który może powodować że strona Ci się rozwali przez napisany komentarz w kodzie strony.


25.Webmasterzy ci początkujący robią błędy przy robieniu miniaturek na stronę:

1. nie może ich być za dużo na jednej stronie
2. robią miniaturki zmniejszając zdjęcie tagami a nie programem graficznym. Skutek jest taki że zdjęcia bardzo długo się wczytują. np. gdy na stronie jest 50 miniaturek, każda 'waży' 200kb zamiast 4-5kb. policzmy 50x200kb = 10mb zamiast 200kb, różnica jest ogromna.
Spotkałem się z takim przypadkiem gdzie miniaturka powinna 'ważyć' ok. 150KB a 'ważyła' 3,9MB.

Prostym programem graficznym i darmowym jest IrfanView, jest też spolszczenie do niego oraz zestaw pluginów rozszerzających jego możliwości.
Jest m.in. możliwość w nim hurtowej zmiany rozmiaru, nazwy, kompresji itd., należy z menu 'plik' wybrać 'przetwarzanie wsadowe'.


26.Box model to pudełko za pomocą którego układamy poszczególne elementy na stronie.
Do wielkości box model liczymy :
1. width / height (szekość / wysokość).
2. padding (margines wewnętrzny).
3. margin (margines zewnętrzny).
4. border (ramka).

Wszystkie wartości się dodaje np.
width: 100px; padding: 5px; margin: 10px; border: 1px; = 100+5x2+10x2+1x2 = 132px wynosi szerokość box model.
Niestety i tutaj jest problem z IE i jej interpretacją wartości box model. IE padding i border wlicza do szerokości podstawowego pudełka width, w naszym przykładzie będzie to razem zamiast 132px tylko 120px.
Jak sobie z tym poradzić?
Przeczytać zasadę nr. 27.
Nie używać padding i border lub też użyć osobny arkusz stylów dla IE.
Można też przykładowo zamiast padding zastosować margin elementowi zewnętrznemu, dzięki temu uzyskamy podobny efekt.

27.To są dwie podstawowe sprawy o których trzeba pamiętać przy robieniu strony.
Doctype określa odmianę języka (x)html w którym piszęmy stronę.
Natomiast tryb quirks jest trybem wstecznej zgodności ze starszymi wersjami przeglądarek. Jest to szczególnie ważne przy IE, włączenie tego trybu powoduje kompatybilność kodu z wersjami IE5 i wcześniejszymi. Tryb quirks powoduje jednocześnie jak można się domyśleć, niekompatybilność kodu z nowszymi technikami np. zastosowanymi w css.
Z tych też powodów należy zwracać uwagę aby przez przypadek nie wejść w tryb quirks, a wejść jest dosyć łatwo...wystarczo coś napisać przed doctype. Np. Box model jest inaczej interpretowany w trybie quirks.


28.Często webmasterzy mają problem z kodowaniem liter w bazie danych, wychodzą tzw. krzaczki na stronie. Aby w dużym stopniu uniknąć takiej sytuacji to zależy przy połączeniu się z bazą danych określić kodowanie jakie mamy na stronie. W większości przypadków kodowanie na stronie mamy UTF-8, w takim przypadku dopisujemy linijkę mysql_query("SET NAMES 'utf8'");.
Przykładowo nasz kod połączenia z bazą banych może wyglądać:
$baza=@mysql_connect("serwer", "użytkownik", "hasło")
or die ('<h1>Nie można się połączyć z bazą danych.</h1> ');
mysql_query("SET NAMES 'utf8'");
mysql_select_db("baza_danych",$baza);

Taki wpis w większości przypadków rozwiązuje problem z kodowaniem liter, należy naturalnie w bazie danych też ustawić kodowanie na UTF-8. Ten wpis należy umieścić od razu przy tworzeniu naszej bazy, unikniecie w ten sposób problemy z kodowaniem liter w przypadku przenoszenia bazy na inny serwer.


Portfolio

projektowanie, optymalizacja

www.puma.pomorze.pl

2017 / 08 / 19
Po
Wt
Śr
Cz
Pi
So
Ni
1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Jeżeli skorzystałeś z moich porad,
będę wdzięczny za umieszczenie linka do mojej strony.

<a href="http://www.puma.pomorze.pl" title="Porady webmasterskie">Porady webmasterskie</a>
Konkurs WWW - forumweb.prv.pl :: 3 MIEJSCE
(2007.05)
Puma © 14.05.2006 Moje strony: Portfolio | Świat marzeń i prawdy | Aktualności - komentarze