O kolorach w systemie heksadecymalnym pisałem już w tym artykule: Kolory HEX. Jak je tworzyć i odczytywać?

Paleta 16 kolorów podstawowych

Na potrzeby WWW określono 16 kolorów, które określono słowami. Poniżej nazwy kolorów (w nawiasie ich heksadecymalne odpowiedniki), które możemy użyć w CSS:

• black(#000000)
• silver(#C0C0C0)
• gray(#808080)
• white(#FFFFFF)
• maroon(#800000) red(#FF0000)
• purple(#800080)
• fuchsia(#FF00FF)
• green(#008000)
• lime(#00FF00)
• olive(#808000)
• yellow(#FFFF00)
• navy(#000080)
• blue(#0000FF)
• teal(#008080)
• aqua(#00FFFF)

W raz z rozwojem wersji CSS pula tych nazw trochę się zwiększyła i tak w przypadku CSS 2.1 mamy jeden dodatkowy kolor orange(#FFA500), natomiast w CSS 3 dodano jeszcze 130 nazw.

Kolory dziesiętne RGB

W bardzo łatwy sposób możemy za pomocą liczb dziesiętnych zakodować odpowiedni kolor. Podobnie jak w systemie heksadecymalnym mamy 16 777 216 kombinacji, po 256 dla każdego koloru (czerwony, zielony, niebieski).  Dla każdego koloru możemy zatem wybrać liczbę z zakresu od 0 do 255 i użyć w przykładowy sposób (CSS):

body{
color: rgb(0,0,255);
...
}

W powyższy sposób otrzymamy kolor już wiadomo chyba jaki.

Jak zamienić HEX na dziesiętny RGB?

Możesz potraktować to jako ciekawostkę, bo o ile nie napiszesz własnej palety koloru to raczej nie wiele Ci się to przyda, no ale może warto wiedzieć.

A więc tak: przypominam, że przedział systemu szesnastkowego przyjmuje znaki od 0-F (liczbowo byłoby to 0-15) . Aby zamienić HEX na dziesiętne odczytujemy wartość HEX i mnożymy x16 do odpowiedniej potęgi każdą liczbę, następnie wszystko dodajemy. Żeby było łatwiej pokaże to na przykładzie:

HEX F = DEC 15, bo 15*16^0 = 15
HEX FF = DEC 255, bo 15*16^1  + 15*16^0 = 255
HEX FFF = DEC 4095, bo 15*16^2 + 15*16^1 + 15*16^0 = 4095

Potęgi liczymy od 0 do ilości znaków kodu heksadecymalnego, w taki sposób, że jedności będą miały potęgę 0, dziesiątki potęgę 1, setki potęgę 2 itd…  Prościej mówiąc lecimy z potęgami od prawej do lewej strony (licząc od 0).

Zamiana w drugą stronę jest już nieco bardziej skomplikowana, więc na razie sobie ją darujemy.

Procentowy RGB

Kolor RGB możemy zapisać w postaci procentowej. Po prostu nadajemy tutaj wartości od 0 do 255, tyle, że w procentach (100% = 255):

body{
    background: rgb(0%,100%,0%);
...
}

W ten oto sposób otrzymaliśmy zielone tło. Należy pamiętać, że pomiędzy wartością liczbową a znakiem procentu nie może być żadnych odstępów i wszystkie wartości muszą być określane w procentach.

Nie jest to idealne rozwiązanie dla kogoś, kto chce dopasować kolor pod grafikę.

Dosyć ciekawego rozwiązania dostarcza nam CSS w wersji 3, a konkretnie chodzi o określanie koloru RGB ze stopniem przezroczystości alpha. Wygląda to następująco:

div{
   background: rgba(100%,0%,0%,0.5);
...
}

Wartość alpha mieści się w przedziale 0 (pełna przezroczystość) do 1 (wartość domyślna – brak przezroczystości).

Sposób ten akceptują przeglądarki, które obsługują przezroczystość (IE ma z tym problemy).

Model HSL

Jest to dosyć ciekawe rozwiązanie. Wybieramy barwę (ang. Hue), następnie określamy nasycenie (ang. Saturation) oraz jasność (ang. Lightness). Jednym słowem nie mieszamy  bezpośrednio kolorów, jak w przypadku RGB. Określamy go tak: hsl(H, S%, L%).

Barwa (H) określana jest  jako liczba całkowita w stopniach z przedziału 0 do 360 (koło barw). I tak oto wartość 0 daje nam barwę czerwoną, w kierunku do 120 jest coraz bardziej zielona, natomiast 240 to już barwa niebieska, a kolejne wyższe wartości kierują nas coraz bardziej w barwę czerwoną. Następnie procentowo określamy nasycenie oraz jasność. System ten określany jest również jako HSB (ang. Brightness – jasność).

Na wstępie chciałbym zaznaczyć, że w większości przypadków, używanie skomplikowanej kompozycji kolorów i tak może okazać się uciążliwe. O wiele lepszym sposobem będzie użycie dowolnego generatora. Zdarzają się jednak również takie sytuacje, w których to generator staje się zbędny.

System heksadecymalny – HEX

System heksadecymalny to alternatywny system liczbowy. W normalnym życiu używamy systemu dziesiętnego (decymalnego). W komputerach stosowany jest system binarny (dwójkowy). Znanym systemem używanym w komputerach jest też system oktalny (ósemkowy).

O co tutaj chodzi?

Oczywiście chodzi o zapis liczb. Ponieważ nie jest to artykuł nt. systemów liczbowych przedstawię tylko jedną ich cechę  – zakres liczbowy (inaczej przestrzeń znakową, w której możemy operować). Otóż systemy liczbowe wykorzystują pewne zakresy. Po przekroczeniu danego zakresu następuje swojego rodzaju pętla (cyfry się powtarzają).

Oto zakresy dla przykładowych systemów liczbowych:

• DECIMAL (dziesiętny) – 0-9
• OCTAL (ósemkowy) – 0-7
• BINARY (dwójkowy) – 0-1
• HEXADECIMAL (szesnastkowy) – 0-15

W pierwszych trzech systemach wykorzystywane są wyłącznie cyfry. System heksadecymalny jest inny. Ponieważ cyfr mamy tylko od 0 do 9, a zakres HEX-ów jest do 15 – pięć cyfr trzeba czymś zastąpić.

W systemie heksadecymalnym liczby od 10 do 15 zastąpiono literami alfabetu łacińskiego.

Zatem w systemie tym mamy do wyboru znaki 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 oraz A, B, C, D, E, F. Prawidłowy zakres mieści się więc w przedziale 0 – F.

Na pewno zwróciłeś uwagę na nazewnictwo powyższych systemów. Przytoczę tutaj kolejną regułkę:

Nazwa systemu liczbowego oznacza ilość wykorzystywanych znaków, a nie ostatnią liczbę zakresu

W systemie dziesiętnym wykorzystujemy 10 cyfr. Numerację zaczynamy od zera. W systemie heksadecymalnym wykorzystujemy 16 znaków – tutaj również zaczynamy numerację od zera, kończymy na dziewiątce i rozpoczynamy od pierwszej litery alfabetu łacińskiego (A), a kończymy na literze szóstej (F).

Aby operować kolorami w trybie HEX powyższe wiadomości na temat liczb można uznać za wystarczające.

Kolory HEX, czyli #XXYYZZ

Format kolorów heksadecymalnych opiera się o trzy kolory podstawowe: czerwony, zielony i niebieski (Red, Green, Blue). Powyższe oznaczenie #XXYYZZ określa się jako #RRGGBB (pierwsze litery angielskich nazw kolorów).

Numer koloru (0-F) oznacza jasność, gdzie 0 to kolor najciemniejszy, natomiast F to kolor najjaśniejszy. Można też uznać, że niższa cyfra oznacza poziom zaniku koloru (0 – brak koloru, F- kolor rzeczywisty). W ten sposób można mieszać kolory.

Przykładowo, aby uzyskać kolor czerwony można użyć #FF0000 (dwa F oznaczają pełny kolor czerwony, pozostałe kolory – brak zielonego i niebieskiego). Analogicznie do tego przykładu możemy uzyskać kolor zielony (LIME) – #00FF00 oraz niebieski – #0000FF.

Są to oczywiście najjaśniejsze odcienie podanych kolorów. Jeżeli wartości będą mniejsze – dany kolor będzie ciemniejszy. Wartości każdego koloru określa się mianem nasycenia.

Możemy też zmieszać kolory w powyższy sposób (np. czerwony + zielony = żółty lub czerwony + niebieski = fioletowy).

Nieco bardziej fachowe tłumaczenie

Każdy parametr mieści się w zakresie od 0 do 255, czyli od 00 do FF w heksach. Nie wszystkie kolory możemy zauważyć – ograniczeniem jest tutaj układ wzrokowy człowieka. Komputer potrafi te kolory rozpoznać, a dzięki takiemu rozwiązaniu (dwa znaki systemu heksadecymalne na kolor) można uzyskać aż 16 777 216 kolorów (proste obliczenie – dla każdego koloru mamy 256 możliwości – tak jak wyżej napisałem od 0 do 255 – i mamy 3 kolory, czyli 256³ daje nasz wynik).

Inny format: #RGB

Istnieje też nieco uproszczony format tworzenia kolorów w systemie heksadecymalnym. Ma on postać #RGB i można w nim uzyskać 4096 możliwości kolorów. Nasycenie każdego koloru mieści się w zakresie od 0 do 15, czyli od 0 do F (HEX) dla każdego z kolorów. Ta skrócona paleta umożliwia nam uzyskanie 4096 kolorów (16³)

Skala szarości

Skala szarości mieści się w przedziale od #000000 do #FFFFFF, czyli pomiędzy czarnym, a białym kolorem. Aby w miarę łatwo utworzyć kolor szary należy ustawiać wartości w taki sposób, aby barwa, nasycenie oraz jaskrawość był takie same.

Przykładowy kolor szary to: #AAAAAA.

Aby kolor był ciemniejszy należy zmieniać wartości w stronę zera, aby był jaśniejszy – odwrotnie.

Paleta bezpiecznych kolorów

Niestety wykorzystując wszystkie kombinacje nie uzyskamy kompatybilności z wszystkimi systemami i komputerami. Dzieje się tak ponieważ nie każdy komputer czy system operuje na takiej samej palecie.

Istnieje jednak pewien format gwarantujący kompatybilność. Jest to paleta 216 bezpiecznych kolorów, które powinny wyświetlać się tak samo na każdym komputerze. Rozwiązanie to zostało opracowane niegdyś przez firmę Netscape dla kompatybilności z monitorami 8-bitowymi.

Paleta 216 bezpiecznych kolorów określana jest mianem Web-Safe (Colours). Można ją znaleźć w większości programów oferujących palety kolorów oraz w programach graficznych (Photoshop od wersji 3.0).

Podsumowanie

Idea wyliczania kolorów heksadecymalnych jest dosyć prosta w zrozumieniu. Zastosowano podział na trzy podstawowe kolory, których nasycenie można zmieniać od 0 do 255 każdy.

W łatwy sposób możemy wygenerować odcienie kolorów podstawowych (jaśniejszy-ciemniejszy). Kolory w skali szarości otrzymamy podając te same wartości nasycenia dla wszystkich. Inne kolory otrzymamy poprzez mieszanie kolorów podstawowych.

Istnieją dwa formaty zapisu: #RRGGBB oraz #RGB – różnią się one ilością kombinacji. Na potrzeby stron internetowych oraz dla zapewnienia kompatybilności należy posługiwać się bezpieczną paletą 216 kolorów, która powinna znajdywać się w każdym programie graficznym (Web-Safe).

Zastosowany znak # (ang. hash) oznacza, że przedstawiony dalej ciąg będzie miał postać heksadecymalny.

System heksadecymalny jest jednym z kilku sposobów na określanie kolorów. Na potrzeby WWW możemy posłużyć się również notacją dziesiętną, procentową lub za pomocą modelu HSB (ang. Hue, Saturation, Brightness – Barwa, Nasycenie, Jaskrawość) określany też jako HSL..

Najważniejszą rzeczą na witrynie internetowej jest zawartość jaką witryna prezentuje. W głównej mierze to, co znajduje się na stronie internetowej, decyduje o zainteresowaniu użytkowników. Dopiero na drugim miejscu jest oprawa graficzna (co wcale nie znaczy, że witryna ma wyglądać niechlujnie). Zawartość strony (content) decyduje również o tym, czy użytkownik odwiedzi serwis ponownie.

Zawartość strony przyczynia się też do skuteczności kampanii reklamowych.

Mit: tekst Vs. grafika

Nie jest prawdą, że tekst dominuje nad grafiką i odwrotnie. Jedno i drugie powinno ze sobom współgrać. Nie można stwierdzić, że strona bez tekstu (lub z minimalną jego ilością) jest bezwartościowa.

Sam tekst również nie jest wskazany. Trudno czyta się strony, na której treść zajmuje całą szerokość od lewej do prawej (aż trzeba kręcić główną), jeszcze z czcionką 14px Time New Roman – o „nadmiarze” suwaków już nie wspominając. Dobra oprawa to podstawa (dobra – nie znaczy przecież cudowna).

Nie ma znaczenia czy to, co znajduje się na stronie, wygląda wyśmienicie – ważne żeby było przede wszystkim czytelne i w tym właśnie ma pomagać oprawa graficzna.

Strony tekstowe – strony graficzne

Ogólnie strony internetowe możemy podzielić na te dwie części. Pierwsze, strony tekstowe, to takie, na których sporo czytamy. Drugie natomiast, graficzne, to wszelkiego rodzaju galerie czy filmy. Często te części miesza się ze sobą (np. kiedy strona z artykułami posiada dodatkowo galerie zdjęć, czy galeria zdjęć – masę komentarzy).

Faktem jest, że nie ważne czy strona jest „graficzna”, czy „tekstowa” – ważne żeby oferowana zawartość był godna uwagi.

Grupa docelowa

Grupa docelowa jest określona zawartością strony. Jest to grupa osób zainteresowana danym tematem. Jeśli mamy stronę o zwierzętach – grupą docelową będą np. miłośnicy zwierząt (ogólnie) lub miłośnicy kotów (bardziej precyzyjnie) – i takich osób należy się spodziewać tworząc strony o tej tematyce.

Nie powinno się umieszczać innych treści niż te związane z tematyką strony. Posiadając stronę o psach, w większości nikogo nie będzie interesowała galeria samochodowa.

Należy unikać mieszania różnych tematyk, chyba, że jest na to bardzo dużo materiałów. Najlepiej jednak jest skupić się nad danym tematem i stopniowo go rozszerzać…

Psychologia oglądacza – wersja mini

Oglądacz, czyli użytkownik znajduje stronę internetową. Wchodzi i co widzi? Widzi zawartość. Można stwierdzić, że pierwsze wrażenie liczy się najbardziej, ale jestem zdania, że bardziej liczy się to, czy użytkownik znalazł to, czego szukał.

W wyszukiwarce znalazł: darmowy przepis na pizzę, klika i przechodzi na stronę. Na witrynie znajduje przepis na pizzę z gotowym ciastem (kupujesz ciasto i robisz) – to na pewno nie to czego szukał. Jeszcze gorzej: przepisu nie ma – tylko jakieś wyrazy konkretnie ze sobą niepowiązane – efekt: zawód, rozczarowanie i użytkownik z głowy.

Alternatywnie, wpisał: śmieszne filmy, znalazł, śmiał się, były faktycznie śmieszne – jest zadowolony, wpadnie jutro, aby sprawdzić, czy doszły jakieś nowe…

Powyższe dwa paragrafy to oczywiście tylko przykłady, których może być więcej…

Gdy użytkownik będzie rozczarowany, nie wróci już na stronę, która go zawiodła. Jeszcze gorzej, jeśli został oszukany. Jeżeli natomiast użytkownik jest zadowolony z treści – wróci jeszcze nie raz, a nawet doda stronę do zakładek, poleci stronę znajomemu itd…

Dobry content

Przy tworzeniu zawartości strony, dobrze jest postawić się na miejscu użytkownika z grupy docelowej. Przemyśleć dokładnie, czego taka osoba może szukać na stronie i dać tego, jak najwięcej.

Wstępnie – musisz się uzbroić

Jeżeli chcesz dobrze i sprawnie skonstruować stronę WWW musisz uzbroić się w pewne rzeczy. Jak za pewne domyślasz się, przede wszystkim – w cierpliwość. Stron nie powinno tworzyć się z rozmachu. Nie zawsze od razu wszystko wyjdzie jak należy. Czasami trzeba zacząć od nowa. Do sprawy należy podchodzić spokojnie – nerwy w niczym nie pomogą.

Kolejną rzeczą, w którą musisz się uzbroić to czas. Nie twórz stron, jeżeli nie masz czasu. Jeżeli zależy Ci na sprawnym i dokładnym zaprojektowaniu strony, lepiej przygotuj się na dłuższą „podróż”. Jeżeli śpieszysz się gdzieś, odłóż cały ten proces na kiedy indziej.

Jeżeli masz już cierpliwość i czas, przydadzą Ci się narzędzia. Używaj tylko wygodnego edytora tekstu. Pamiętaj o przygotowaniu programu graficznego (może być w gotowości do użycia). Dobrze jest mieć pod ręką jakąś paletę kolorów (z hexami).

Do projektowania przydadzą się też: ołówek, długopis, arkusz kartek A4 (np. w kratkę) i ewentualnie linijka…

Dobrym pomysłem jest sporządzenie grafiku lub wyznaczenie czasu na projekt (w rozkładzie na dzień).

Najpierw pomyśl…

Twoim zadaniem jest zaprojektowanie strony. Przygotuj sobie kartę i ołówek lub długopis. Zastanów się o czym dokładnie ma być strona. Jakie działy, odnośniki – zawartość merytoryczna. Na razie zapomnij o układzie graficznym. Wypisz wszystko po kolei. Rozplanuj działy, napisz wstępnie co w nich będzie (jakie elementy, może mechanizmy itp.). Zastanów się o czym mogą być artykuły (możesz też wypisać gdzieś ich tytuły).

Pamiętaj, że to tylko projekt wstępny i jeżeli chcesz coś zmienić to zmieniaj, kreśl…

Następnie zaprojektuj linki. Określ łącza w menu. Zastanów się co gdzie ma prowadzić. Możesz to narysować lub napisać.

Przykład:

Strona o kulinariach: na stronie głównej aktualności / ciekawostki / zmiany na stronie. Oprócz tego zrobić miejsce na odnośniki (mechanizm) do najnowszych pięciu przepisów / artykułów.

W menu – Dania: gotowane, smażone, pieczone, mrożone, na surowo, sałatki. Następnie w każdym z działów przepisy, mogą być podzielone na mięsne i wegetariańskie. Uzupełnieniem przepisów mogą być ciekawostki na temat danych potraw (np. po wybraniu danego przepisu nowe menu z odnośnikami typu: „Czy wiesz, że?” oraz „Witaminy i wartości odżywcze”, „Zalecenia”, „Inne sposoby podawania”.

W menu głównym strony można dodatkowo umieścić kategorię Fast Food, gdzie będą znajdywać się artykuły o tym, jak zrobić pożywny (ale nie koniecznie zdrowy obiad) w jak najkrótszym czasie. Oraz napoje czy koktajle.

Ponadto warto dać użytkownikowi możliwość dodawania własnych przepisów (po zarejestrowaniu) oraz dodawania komentarzy do przepisów / ciekawostek itp., a także umożliwić ocenę niniejszych (zaplanować mechanizmy – skrypty).

itd …

To jest trochę jakby gadanie do samego siebie, ale dużo daje. Można naprawdę wymyślić świetne rzeczy, jednak trzeba poświęcić temu trochę czasu… Ważne, żeby wyłapać jak najwięcej pomysłów.

Podobnie warto postępować w przypadku projektowania sklepów internetowych, katalogów, stron firmowych czy portali.

Papierowy układ strony

Skoro już wiesz, co będzie na Twojej stronie warto to narysować. Narysuj najpierw stronę główną wraz z całym układem nowego layout-u. Narysuj sobie nagłówek (np. z logo lub bannerem reklamowym), lewym / prawym menu (lub górnym), narysuj środek. Napisz linki w menu, przykładowe tabelki w treści – spróbuj odzwierciedlić stroną prosto ze swojej wyobraźni…

To jest trochę jakby gadanie do samego siebie, ale dużo daje. Można naprawdę wymyślić świetne rzeczy, jednak trzeba poświęcić temu trochę czasu… Ważne, żeby wyłapać jak najwięcej pomysłów.

Podobnie warto postępować w przypadku projektowania sklepów internetowych, katalogów, stron firmowych czy portali.

Papierowy układ stronySkoro już wiesz, co będzie na Twojej stronie warto to narysować. Narysuj najpierw stronę główną wraz z całym układem nowego layout-u. Narysuj sobie nagłówek (np. z logo lub bannerem reklamowym), lewym / prawym menu (lub górnym), narysuj środek. Napisz linki w menu, przykładowe tabelki w treści – spróbuj odzwierciedlić stroną prosto ze swojej wyobraźni…

Ładna strona czy lekka strona?

To pytanie stawiali sobie webmasterzy od wieków. Obecnie nie zawsze ma to znaczenie, bo trzeba by było odpowiedzieć sobie na kolejne pytanie: co to jest lekka strona? Z pewnością: lekka, czyli taka, która się szybko ładuje, jest mało przeciążona. Na dzień dzisiejszy mamy szeroki asortyment, jeżeli chodzi o łącza internetowe, więc można popisać się grafiką. Grunt to nie przesadzić.

Ładna strona czy lekka strona?To pytanie stawiali sobie webmasterzy od wieków. Obecnie nie zawsze ma to znaczenie, bo trzeba by było odpowiedzieć sobie na kolejne pytanie: co to jest lekka strona? Z pewnością: lekka, czyli taka, która się szybko ładuje, jest mało przeciążona. Na dzień dzisiejszy mamy szeroki asortyment, jeżeli chodzi o łącza internetowe, więc można popisać się grafiką. Grunt to nie przesadzić.

Grafikę obrazkową należy nadal stosować z rozwagą. Ogromny projekt graficzny i tak może okazać się zbędny. Wszystko zależy od celu witryny oraz od tego, co właściwie chcesz zaprezentować. Faktem jest, że ładna strona nie zawsze musi być „przeładowana” grafiką obrazkową. W rzeczywistości wystarczą minimalne umiejętności CSS i parę pomysłów, aby witryna mogła konkurować z pięknym „kombajnem” graficznym.

Można zatem stwierdzić, że ta „lekka” strona również może być ładna. I nie zawsze trzeba wynajmować grafika, który ułoży naprawdę odjazdowy design graficzny, ale można rozważyć taką możliwość.

To tyle, jeśli chodzi o kwestię „ciężkiej” grafiki…

Strona to nie piasek – zadbaj, aby się nie sypała

Witryna nie powinna posiadać niedociągnięć. Wszystko powinno mieć ręce i nogi. Co z tego, ze zapłaciłeś za layout te 300zł, jeśli pojawiły się niedociągnięcia, których nie chce Ci się usunąć? Jeszcze zanim strona pojawiła się w sieci powinna być przetestowana pod tym względem. Żadnych rozjeżdżających się tabelek, nieprawidłowych przerw między obrazkami. Wszystko powinno być na swoim miejscu.

Poprawność kodu też jest mile widziana. Należy zadbać o zamykanie odpowiednich znaczników. Z doświadczenia wiem, że czasami jest to najczęstsza przyczyna problemów z tabelkami lub DIV-ami. Przy poprawnym kodzie jego analiza jest łatwiejsza. Szybciej znajdziesz błąd.

Pamiętaj, aby przetestować witrynę pod przeglądarką wizualną (Mozilla Firefox, IE, Opera). Dobrze jest też wybrać jakiś standard W3C i się go trzymać. W zakreśie możliwości należy poprawiać wszelkie bugi. Przede wszystkim nie należy ignorować nawet najbardziej złośliwych skarg użytkowników.

Każdy użytkownik chce widzieć witrynę tak, jak ją zaprojektowano, czyli poprawnie.

O co tak na prawdę chodzi?

Dwie podstawowe sprawy zostały opisane powyżej. Teraz czas na konkrety…

Chodzi o użytkownika. To odbiorca ma widzieć stronę, nie tylko Ty. Należy zaprojektować stronę pod odbiorcę, czyli użytkownika. To użytkownik ma odwiedzić witrynę, kupić coś, przeczytać tekst, dodać stronę do katalogu. Nie rób stron dla siebie, zrób ją dla nich.

Wszystko przejrzyste

Nie ważne czy witryna, którą projektujesz to sklep, katalog, serwis informacyjny czy galeria grafiki – wszystko powinno być przejrzyste. Grafika (o której była mowa na początku) powinna być przyjazna użytkownikowi. Wygląd strony nie tylko ma się podobać, ale ma też sprawiać wrażenie, że komuś zależało na odwiedzinach strony.

Niektórzy mówią, że wygląd strony pod względem graficznym się nie liczy – ważne, żeby strona nie raziła w oczy i była czytelna. Po części można się z nimi zgodzić, ale czy tak trudno jest trochę pokombinować by strona wyglądała schludnie? To nic trudnego, można użyć wąskiej gamy kolorów i odpowiednio dobranych czcionek.

Warto pamiętać o stworzeniu światła, czyli odstępów pomiędzy elementami, co powoduje czytelność i skupienie wzroku na danym elemencie – chodzi o to, aby nie drażnić użytkownika i żeby sam wybierał elementy, na których ma się skupić. Nie warto upychać wszystkiego – jedno zaraz obok drugiego – a zwłaszcza linków bez odpowiednich odstępów. Użytkownik powinien odróżniać, co jest do czego na stronie.

Don’t make me think – nie każ mi myśleć

Użytkownik nie powinien się zbyt długo zastanawiać jak przejść na daną podstronę. Witryna to nie gra komputerowa – albo umożliwisz użytkownikowi normalne przemieszczanie się po jej elementach, albo znudzony myśleniem użytkownik opuści stronę. To, co powinno zastanawiać Twojego gościa to raczej treść Twojej witryny, a nie „jak przeczytać następny artykuł”, lub „jak dodać stronę do katalogu”.

Aktualnie rynek internetowy obfituje w usługodawców hostingowych. Istnieje wiele firm oferujących hosting na dobrych warunkach. Ale… Który hosting wybrać? Jaki hosting będzie dla mnie najodpowiedniejszy? Czego należy unikać i jak należy postępować? – tego dowiesz się poniżej…

Wybór odpowiednich parametrów

W zależności jaką stronę prowadzisz, musisz dobrać dla niej właściwe parametry. Główne parametry, jakie należy brać pod uwagę to: lokalizacja serwera, parametry techniczne (sprzęt), łącze dostępowe, szybkość odpowiedzi oraz pojemność konta, parametry konta, wszelkie limity.

Lokalizacja serwera, łącze dostępowe, sprzęt …

Są to niezwykle ważne parametry. Decydują o dostępności Twojej witryny dla przewidzianej grupy docelowej.

Lokalizacja serwera - serwery powinny znajdować się jak najbliżej grupy, do której kierujesz swoją stronę. Przykładowo, jeżeli grupa to Polacy – najlepszą lokalizacją będzie Polska, jeśli natomiast Twoja strona kierowana jest do Polaków mieszkających w USA, to najlepszą lokalizacją będą Stany Zjednoczone.

Łącze dostępowe - powinno być jak najszybsze i niezależne. Łącze dostępowe nie może być domowym łączem Twojego usługodawcy (w żadnym wypadku nie kupuj miejsca na stronę na serwerach domowych, np. Neostrada…). Przykładowa dobra przepustowość łącza – 1 Gbit/s z serwerowni do sieci.

Parametry techniczne (sprzęt) – parametry powinny być również jak najwyższe. Zapomnij o serwerach postawionych na platformach typu Pentium III 500Mhz. Najlepiej, jeśli serwerownia oferuje aktualny sprzęt (na czasie), odpowiednio dobrany do ilości utrzymywanych kont. Ważnym czynnikiem tutaj jest też sposób przechowywania serwerów (gdzie są, ile kont obsługują, czy ktoś nad nimi czuwa…).

Szybkość odpowiedzi serwera – przypuszczam, że chcesz, aby Twoja strona ładowała się jak najszybciej, więc odpowiedź serwera jest tutaj ważna. Na szybkość odpowiedzi wpływają trzy powyższe parametry (przede wszystkim lokalizacja i łącze).

Szybkość odpowiedzi serwera możesz sprawdzić poleceniem ping (musisz podczepić domenę pod ten serwer). W Windowsie możesz to sprawdzić tak:

C:\>ping twoja_domena.pl
Badanie twoja_domena.pl [xx.xxx.xxx.xxx] z użyciem 32 bajtów

Odpowiedź z xx.xxx.xxx.xxx: bajtów=32 czas=59ms TTL=54
Odpowiedź z xx.xxx.xxx.xxx: bajtów=32 czas=62ms TTL=54
Odpowiedź z xx.xxx.xxx.xxx: bajtów=32 czas=59ms TTL=54
Odpowiedź z xx.xxx.xxx.xxx: bajtów=32 czas=63ms TTL=54

Statystyka badania ping dla xx.xxx.xxx.xxx:
 Pakiety: Wysłane = 4, Odebrane = 4, Utracone = 0 (0% straconych)
Szacunkowy czas błądzenia pakietów w millisekundach:
 Minimum = 59 ms, Maksimum = 63 ms, Czas średni = 60 ms

Jeśli ping jest większy od 120 ms (mili sekund) to nie jest to za dobrze. Trochę trudniej jest z serwerami umieszczonymi poza granicą. Jeśli oferujesz swoją stronę Amerykanom – będziesz musiał prosić Amerykanów o pomoc (lub postarać się o konto shell na innym amerykańskim serwerze) – nie bez znaczenia są tutaj informacje od samej firmy hostingowej.

Najlepiej, aby ping mieścił się w przedziale najwyżej od 45 do 70 ms… Niemniej jednak – im mniejsza jego wartość, tym lepiej dla ciebie.

Twoja lokalizacja również ma wpływ na ping. Podczas testowania pingu dla polskich stron warto poprosić o pomoc znajomych (najlepiej z różnych regionów Polski).

Parametry konta

Przede wszystkim ważne są limity pojemności i transferu. W zależności jaką stronę prowadzisz, różne parametry należy rozpatrzyć. Jeżeli Twoja strona to istny download – potrzebujesz konta o wysokiej pojemności i transferze. Jeżeli prowadzisz natomiast stronę, gdzie w większości prezentujesz tylko tekst – pojemność konta nie jest aż tak ważna, tylko transfer może mieć istotne znaczenie.

Webmaster vs. Nowicjusz

Osoby tworzące strony internetowe można podzielić na dwie podstawowe grupy…

Webmaster - jest to osoba, która zna już podstawy tworzenia stron. Umie posługiwać się co najmniej HTML-em. Stworzenie prostej strony internetowej nie jest dla niego problemem. Wie też, w jaki sposób może uzupełnić swoją wiedzę – nie boi się szukać informacji…

Nowicjusz – chciałbym określić tym mianem wszystkie osoby zagubione, które chcą mieć własną stronę WWW, ale nie wiedzą od czego zacząć. Nowicjusz to osoba, która dopiero zaczyna swoją przygodę (w tym wypadku) z webmasteringiem. Nie potrafi posługiwać się biegle nawet HTML-em. Osobę tą trzeba często odpowiednio nakierować i pokazać w jaki sposób może uzyskiwać odpowiednie informacje na dany temat (przede wszystkim jeśli jest to nowa osoba w Internecie).

Zarówno webmaster, jak i nowicjusz ma przed sobą wybór: klikać czy pisać? Niestety, nie w każdym przypadku można odpowiedzieć tak samo…

Nowicjusz powinien…
… jak najwięcej pisać

Jedyną skuteczną i słuszną drogą do nauki czegokolwiek – czy jest to HTML, język programowania, język obcy, czy matematyka – jest praktykowanie uzyskanej wiedzy. Nie ma sensu wykuwać wszystkiego na pamięć bez sprawdzenia czy to „działa”. Komu potrzebna jest wiedza, której się nie wykorzystuje…?

Zapamiętać polecenia – zapamiętasz, o ile często będziesz je wpisywać. Im częściej nowicjusz wpisze dany znacznik – tym większe szanse na jego zapamiętanie.

Jest to udowodnione naukowo – lepiej się zapamiętuje jeśli się pisze (najlepiej na kartce papieru), niż jeśli się tylko zapamiętuje. Informacje, które się zapisało, są przechowywane w pamięci „bliżej” niż te tylko zapamiętane.

Ponadto najbardziej znany nam przykład z otoczenia – dzieci. Dziecko, zanim nauczy się mówić, musi usłyszeć dane słowo blisko 100 razy, aby je powtórzyć. Zanim nauczy się chodzić – musi samo spróbować stanąć na nogi – uprzednio obserwując jak robią to inni…Po pewnym czasie nie zwraca już uwagi na to czy mówi lub chodzi..

Nowicjusz, jako osoba starsza (bo nie sądzę, że webmasteringiem zajmują się też noworodki) może osiągnąć o wiele lepsze wyniki. Powtórzenie znacznika około 10 razy (z pamięci, bez zerkania do pomocy) może spowodować, że za 11-tym razem nowicjusz wpisze go już bez zastanowienia się. Znacznik powtórzony 100 razy to już gwarancja.

Na sam początek przydałoby się posiadać jakieś miejsce na stronę WWW. Do celów testowych na pewno nie ma co kupować hostingu – z wiadomych powodów. Dopiero kiedy nauczysz się sprawnie pisać strony, stworzysz coś wartego uwagi – możesz myśleć o finansowaniu strony. Niemniej jednak zakładam, że jesteś osoba początkującą (dlatego czytasz ten tekst ), więc w tej chwili odsyłam Cie do wyszukiwarki google.pl, w celu wyszukiwania darmowego hostingu (darmowe miejsce na stronę WWW).

Klient FTP

Wysyłanie plików na serwer odbywa się za pomocą specjalnego programu, zwane klientem FTP (ang. File Transfer Protocol). Zwykle mamy do czynienia z darmowymi programami tego typu. Osobiście od kilku lat używam jednego takiego programu, który rozwijany jest do dzisiaj. Jest bardzo prosty  użyciu i na początek będzie w sam raz. Mowa oczywiście o kliencie FileZilla. Program możemy ściągnąć w gotowych wersjach skompilowanych na system Windows, Linux oraz Mac OS X, istnieje też wersja do samodzielnej kompilacji.
Program pobierzesz stąd: http://filezilla-project.org.

Oczywiście, w dniu dzisiejszym zdecydowana większość usługodawców udostępniających hosting posiada wbudowane oprogramowanie do zarządzania plikami na potrzeby FTP. Niemniej jednak o wiele większą funkcjonalność zapewniają najprostsze programy pełniące funkcję klienta FTP, dlatego gorąco zachęcam do korzystania właśnie z nich.

Konfiguracja programu

Jeżeli ściągnąłeś już klienta FileZilla należy go odpowiednio skonfigurować. W zasadzie najprostsza konfiguracja sprowadza się jedynie do wpisania adresu ftp oraz hasła (dane te powinieneś otrzymać podczas zakładania konta na WWW).

Oczywiście najwygodniej będzie korzystać z programu FileZilla w języku polskim. Zatem jeśli zapomniałeś zaznaczyć odpowiedniej opcji podczas instalacji programu, możesz dokonać tego teraz. Kliknij w programie zakładkę:

Edit --> Settings...

Powinno się pojawić okno, jak na obrazku poniżej:

Ustawienia klienta FileZilla

Następnie wybieramy po prawej Language (pod Interface) wybieramy nasz język i klikamy OK.

Mając już wszystko po polsku możemy spokojnie utworzyć profil ftp. W programie wciskamy CTRL+S, aby wywołać menedżera stron. Po lewej mamy menu na białym tle. Zaznaczamy Moje strony i klikamy na dole przycisk Nowy adres. Nadajemy dowolną nazwę.

Po prawej stronie wypełniamy odpowiednie pola. W polu Serwer wpisujemy adres serwera ftp, którą dostarcza operator. Domyślny port jaki obsługuje FTP to port 21. Jeżeli usługodawca nie określa numeru portu to najprawdopodobniej obowiązuje nas domyślny, czyli pole pozostawiamy puste (zazwyczaj jest domyślny). Typ serwera – FTP - File Transfer Protocol. Jeżeli chodzi o Typ logowania wybieramy z listy Normalna i wpisujemy poniżej nazwę użytkownika i hasło. Wciskamy przycisk Połącz i powinniśmy znaleźć się na serwerze.

W zależności od operatora pliki mogą być przesyłane do odpowiedniego katalogu. Tak więc, aby umieścić stronę w ten sposób, aby widzieli ją normalni użytkownicy z poziomu przeglądarki, należy wgrać pliki do publicznego katalogu. Najczęściej spotykane nazwy to: public_html, public, www, www-html itp… Dane te powinien dostarczyć nam operator.

Ważna uwaga: w przypadku darmowego hostingu zazwyczaj nazwa Twojej strony będzie wyglądać w ten sposób: www.twojlogin.nazwa_dostawcy.pl. Wgrywając pliki na serwer należy pamiętać o pliku indeksu. Jest to domyślny plik, który zostanie otworzony po wpisaniu wyżej wymienionej nazwy. Najczęściej spotykane nazwy to: index wzbogacony o rozszerzenie: .html, .htm, .php (lub inne) i należy pamiętać, aby unikać utrzymywanie dwóch plików indeksu w jednym katalogu. Co prawda wszystko zależy od ustawień serwera, ale po co narażać się na problemy?

Inne klienty FTP

Zarówno w sieci, jak i w systemach operacyjnych możemy natknąć się na różne inne klienty FTP. Niemniej jednak zasada działania jest ta sama, więc można uznać, że powyższa instrukcja ma uniwersalny charakter. Aczkolwiek zachęcam do używania klienta FileZilla i zachęcam do zapoznania się z jego innymi opcjami.

Czym jest język HTML?

HTML (z ang. HyperText Markup Language – hipertekstowy język znakowania) to narzędzie przeznaczone do tworzenia stron internetowych. Język ten opracowali Tim Berners-Lee i Anders Berglund w 1989 roku dla CERN – Europejskiego Ośrodka Badań Jądrowych. Opracowano go z myślą o technologii World Wide Web i łatwiejszym dostępie do dokumentów w sieci…

W języku tym polecenia są tzw. znacznikami (ang. tags). Zwykle składają się z dwóch części: otwierającej i zamykającej. Pomiędzy tymi dwiema częściami znajduje się tekst, którego te znaczniki dotyczą (np. <b>wyraz pogrubiony</b>). Oprócz tego definiuje się specjalne nagłówki, które stanowią informacje dla wyszukiwarek i przeglądarek Internetowych.

- niech to będą pierwsze informacje o HTML-u, jakie musisz wykuć na blachę…

Zaangażowanie i cierpliwość

To dwie najważniejsze cechy, które powinny Cię teraz charakteryzować. Musisz chcieć się nauczyć tego języka. Musisz uzbroić się w cierpliwość, gdyż wiele razy może się zdarzyć, że popełnisz dosyć głupie błędy, które będą wywoływać frustracje – nie dawaj za wygraną, poprawiaj je…

Znaczniki mogą się na początku mylić – np. zamiast pochylenia nadasz podkreślenie. Może się zdarzyć, że zapomnisz o zamknięciu cudzysłowu lub nawiasu trójkątnego… Możliwe, że zacznie Cię to bawić, w końcu pewnie zacznie i wkurzać… – przygotuj się na to.

Nie bój się języka – HTML jest łatwy

HTML to chyba najprostszy język w sieci. Nie jest to w prawdzie język programowania, ale może stanowić dobry początek (wpisywanie poleceń – natychmiastowe efekty – wyciąganie wniosków).

Znaczniki są naprawdę intuicyjne i łatwe do nauczenia. Nie ma zbyt wielu reguł do przestrzegania. Na początku bądź jednak ostrożny, unikaj błędów. Każdy najmniejszy błąd – poprawiaj.