1. Czego nauczysz się w tym poradniku?

Ten poradnik jest przygotowaniem do stworzenia własnego projektu strony w programie Adobe Photoshop. Nauczysz się tutaj w jaki sposób dobierać kolory, kształty, style oraz jak rozmieścić poszczególne elementy strony w odpowiedni sposób.

Mam nadzieję, że po przeczytaniu serii moich poradników zdobędziecie doświadczenie, a także poszerzycie bądź uzupełnicie wiedzę na temat posługiwania się programem Adobe Photoshop. Zaczynajmy!

2. Od czego zaczynamy?

Tworząc stronę musimy się wcześniej dobrze zastanowić nad wszystkimi jej aspektami, czyli nad tematem, kolorystyką, stylem itp.. Najważniejsze jest jednak rozłożenie poszczególnych elementów strony. Ich nieumiejętne rozplanowanie staje się uciążliwe dla użytkownika, bo jest mu ciężko poruszać się po tej witrynie. Dlatego proponuję wziąć czystą kartkę papieru i narysować na niej ołówkiem wszystkie elementy strony, które zostaną użyte w tym projekcie. Proponowany przeze mnie wygląd strony jest taki:

To chyba najczęściej używany sposób na rozmieszczenie poszczególnych elementów strony. Jest prosty i przejrzysty, więc użytkownik szybko znajdzie w nim odpowiednie informacje

3. Kolory na stronie

Badacze z Carleton University w Ottawie odkryli, że pierwsza opinia o oglądanej stronie internetowej powstaje w mózgu w ciągu jednej dwudziestej sekundy. Wrażenie jest dość trwałe.

Dlatego w stronie internetowej ważne jest rozmieszczenie kolorów. Odpowiednie ich dobranie i łączenie to prawdziwa sztuka. Czasem ich zestaw przychodzi z całkiem innego źródła. Można znaleźć gotowe zestawienia kolorów w internecie. Ale można samemu je dobrać wykorzystując wyobraźnię. Zestawienie kolorów w moim projekcie to np.: fiolet, ciemny szary, wysoko nasycona żółć i oliwkowy. Ładnie wyglądają połączone ze sobą.

Nie polecałbym podbierania kolorów z innych stron. To jest coś w rodzaju kradzieży pomysłu. Pokaż, że jesteś na tyle kreatywny, że sam dobierzesz własne kolory do strony.

Inspiracji możesz też szukać w tematyce strony. Np. kolory do strony o architekturze starorzymskiej to szary i marmurowy, bo w takich kolorach wyobrażam sobie starożytne rzymskie rzeźby.

4.Style do strony – jaki wybrać?

Istnieje mnóstwo stylów do stron. Który wybrać? Najlepiej ten, który jest obecnie modny. Bo musicie wiedzieć, że w internecie też obowiązuje moda. Np. dwa lata temu modne były style z efektami 3D połączone z grafiką wektorową. Teraz przyszła moda na subtelne ramki wokół belek menu i nawigacji w kolorach mało intensywnych i z ubogą paletą barw. Jaki styl będzie modny jutro? Tego nikt nie wie!

Nie sugeruj się obecną modą. Możesz też stworzyć swój niepowtarzalny styl, który będą podziwiać wszyscy i który, być może nada nową modę w internecie.

Styli jednak nie można mieszać. Zbyt upstrzone strony to przerost formy nad treścią.

Styl to także czcionka. Jest mnóstwo serwisów udostępniających darmowe czcionki. Do projektu należy użyć od 1 do 3 czcionek.

Czcionki powinny do siebie pasować i mieć także ten sam styl. Zbyt duże nałożenie efektów na czcionki utrudnia odczytanie tekstu, a przede wszystkim wygląda to nieestetycznie. Tutaj przykład:

Do stylów należą także pędzle. Ich też jest sporo w sieci. Były często wykorzystywane do projektów dwa lata temu. W obecnych stylach do stron WWW używa się ich sporadycznie i tylko w nagłówkach albo bannerach. Zbyt duże nakładanie warstw pędzli daje okropny efekt. Dlatego należy wybrać ich odpowiedni kolor i na wybranym kształcie wstawić kilka wzorów. Potem można zmniejszyć ich przezroczystość.

5. Kształty na stronie

Kształty są elementami stylu strony. One także nadają charakter witrynie. W zależności od strony stosuje się różne kształty. O ich zróżnicowaniu możemy się przekonać oglądając belki menu na innych stronach. Dawniej były w kształcie „fasolki”, potem w kształcie lekko zaokrąglonego prostokąta, a teraz już w kształcie samego prostokąta. Możesz zrobić menu nawet i w kształcie koła; wszystko zależy od Ciebie.

Myślę, że po przeczytaniu tego artykułu zaczniecie inaczej patrzeć na strony w internecie. Bo w webdesignerstwie nie jest najważniejsza znajomość programów graficznych oraz umiejętności, ale kreatywność i oryginalność wykonanych projektów.

Znaczniki HTML:

Chcesz stworzyć prostą stronę WWW ? To czytaj dalej…

Najważniejsze w kodzie strony są następujące “działy” kolejnych znaczników. Są to:

<html>

<head>

<body>

Aby tworzyć w HTML trzeba w przynajmniej małym stopniu znać język angielski. Bez tego się nie obędzie. Przedstawię gotowy kod, z miejscem na przesuwający się tekst do góry, tekst oddzielony, tekst, oraz zdjęcie. A oto on:

<html>

<head>

<title>TUTAJ WPISUJEMY TYTUŁ STRONY</title>

</head>

<body>

<body bgcolor=“TUTAJ WPISUJEMY KOLOR TŁA STRONY”>

<center>

<marquee><h1><font color=“TUTAJ WPISUJEMY KOLOR TEKSTU, KTÓRY MA SIĘ PRZESUWAĆ”>TUTAJ WPISUJEMY TEKST, KTÓRY MA SIĘ PRZESUWAĆ</font></h1></marquee>

<hr>TUTAJ WPISUJEMY TEKST, KTÓRY MA BYĆ ODDZIELONY, NP.: ZAPRASZAM NA FORUM.TOIN.PL.<hr>

TUTAJ WPISUJEMY TEKST STRONY

<img src=“TUTAJ WPISUJEMY, KTÓRE MA BYĆ ZDJĘCIE DODANE”>

</body>

</html>

Teraz pada pytanie: Co wpisać i co w ogóle z tym kodem zrobić ?

Zacznę opisywać po kolei:

1. Kod wpisujemy w Notatniku, a stronę zapisujemy koniecznie jako: “index.html” (bez cudzysłowu).

2. Tam, gdzie mamy wpisać tytuł wpisujemy to co będzie się pokazywać na pasku tytułowym przeglądarki do góry.

3. Tam, gdzie mamy wpisać kolor tła strony wpisujemy:

• Jeden z podstawowych kolorów w języku angielskim, np.: blue
• albo kolor w formacie HTML-owym, np.: #CC0000

4. Z kolorem tekstu, który ma się przesuwać jest tak samo jak wyżej.

5. Tam, gdzie mamy wpisać tekst tekstu, który będzie się przesuwał wpisujemy wybrany przez nas tekst, np.: “Witam !”.  Znaczniki <h1> można usunąć, one tylko kontrolują jaki ma być rozmiar tego tekstu.

6. Tekst oddzielony jest oddzielony linią o góry i u dołu. Za oddzielenie odpowiada znacznik <hr>.

7. Tekst strony możemy dowolnie sformatować znacznikami zawartymi w tabelce u góry.

8. Aby wstawić zdjęcie musimy wiedzieć do jakiego folderu wstawimy ten obrazek na serwerze. Jeśli, np.: do folderu “images”, a obrazek będzie się nazywał “dom.jpg”, wtedy linijka kodu odpowiedzialna za obraz, będzie wyglądać następująco:

<img src=“images\dom.jpg”>

Możemy również wrzucić zdjęcie “luzem”:

<img src=“dom.jpg”>

Folder, lub luźne zdjęcie musi być w tym samym miejscu co plik strony (index.html).

9. Nasza strona jest gotowa. Możemy dodać dodatkowe znaczniki i inne rzeczy, ale musimy pamiętać o zamykaniu znaczników, np.: <b><i>TEKST</i></b>. Teraz wystarczy wgrać ją na serwer. Przykładowy efekt:

Co prawda na zdjęciu powyżej nie można zobaczyć, jak tekst się przesuwa, ale efekt widzicie u siebie. Mój kod wyglądał tak:

<html>

<head>

<title>Prosta strona WWW</title>

</head>

<body>

<body bgcolor=“blue”>

<center>

<marquee><h1><font color=“gold”>!!! Witam na mojej stronie !!!</font></h1></marquee>

<hr>ZAPRASZAM NA FORUM.TOIN.PL<hr>

Strona przykładowa<br>

<img src=“images\dom.jpg”>

</body>

</html>

Wszystkie przedstawione algorytmy będę testował na tej stronie czyli toin.pl.

Parametry toin.pl na dzień dzisiejszy 21.06.2010 są następujące:

• Ilość unikalnych użytkowników strony (UU/mc) ~ 11 000
• Obecność w wyszukiwarkach — prawie we wszystkich
• Wiek domeny — od 2008.10.03 (łatwo sprawdzić wiek domen tutaj)
  
• PR = 2
• Alexa Rank = 406,858

Poniżej wyniki poszczególnych algorytmów:

www.cwt.com.pl/wycena/

bizinformation.org/pl/www.toin.pl

www.speedtest.pl/wycena.html

www.wycenawww.pl

netraport.pl/wycena-strony.php

Ok to tylko niektóre algorytmy oferujące wycenę naszego serwisu. Oczywiście każda z nich jest fikcyjna, choć ta ostatnia najbliżej prawdy. Najlepiej byłoby wystawić taki serwis na allegro.pl i wtedy można było by się zorientować ile naprawdę warte są nasze blogi. Ten sposób był już wykorzystywany bodajże dla domeny linuks.pl gdzie w ramach badania rynku wystawiono domenę na sprzedaż.

W każdym razie wiemy już, że za darmo wyceny nie ma i nie będzie. Algorytmy są zbyt nie dopracowane. Trzeba by było użyć nie tylko inteligencji ale i doświadczenia, a jak wiadomo to już kosztuje.

Według Was jaki sposób jest najlepszy na wycenę serwisu?

]]> http://toin.pl/3405/wycena-stron-www-za-darmo/feed/ 6 http://toin.pl/1711/adsense-dla-domen-home-pl/ http://toin.pl/1711/adsense-dla-domen-home-pl/#comments Wed, 03 Mar 2010 14:05:27 +0000 slasho http://toin.pl/?p=1711 Jeżeli w naszym dorobku posiadamy domeny których nie używamy to warto wykorzystać je jako strony z reklamami. Być może ktoś zabłądzi i wejdzie właśnie na tą domenę. Google AdSense umożliwia nam taką konfigurację. Posiadam polskie domeny w home.pl i właśnie na przykładzie tego operatora chciałbym pokazać jak przekierować je na adsense.

Konfiguracja konta AdSense

1. Najpierw zaloguj się do google adsense gdzie będziesz mógł dodać nowe reklamy.

2. Następnie dodaj nową domenę:

3. Wpisz jej nazwę:

4. Na moim przykładzie jest to moj-zakup.pl to jest właśnie nie używana domena. Po dodaniu otrzymasz taki komunikat:

Interesować będzie nas tylko “wartość / cel” czyli 216.239.32.21 a także Twój unikatowy identyfikator czyli

pub-1111111111111111111.afd.ghs.google.com.

Pamiętaj aby skopiować go do home.pl bez kropki na końcu!

Konfiguracja domeny w home.pl

1. Logujemy się do ustawień naszej domeny:

2. Ustawiamy przekierowanie na adres ip podany przez google, i wpisujemy swoją nazwe konta.

3. Następnie utwórz dla hosta następujące rekordy CNAME (aliasy), używając swojego rejestratora domen. Czyli interesuje nas to co na samym końcu. Klikamy w nazwę domeny.

4. Uzupełniamy rekord:

5. Klikamy Zapisz.

Podsumowanie

Przekierowania nie uda nam się zrobić szybko (np w ciągu jednego dnia), gdyż zależy to od akceptacji domeny przez google. Lecz jeżeli zostanie ona zaakceptowana (musi być zgodna z zasadami programu) to wyświetlane reklamy będą wyglądały tak jak na dodanej przeze mnie domenie moj-zakup.pl Oczywiście nie wiem jak długo jeszcze będę trzymał tą domenę także póki co działa ;)

]]> http://toin.pl/1711/adsense-dla-domen-home-pl/feed/ 3 http://toin.pl/1266/jak-zablokowac-strone-internetowa/ http://toin.pl/1266/jak-zablokowac-strone-internetowa/#comments Sun, 20 Dec 2009 13:41:53 +0000 slasho http://toin.pl/?p=1266 Załóżmy, że nie tylko Ty korzystasz z domowego komputera. Może Cie irytować, że np Twoje dzieci za długo przesiadują przy kompie, a wszystko przez jedną stronę, którą najlepiej byś usunął z sieci. W dzisiejszych czasach, gdzie portale społecznościowe są tak powszechne, że aż niezbędne do życia (dla niektórych;) ludzie przesiadują tam sporo czasu. Jeżeli uważasz, że za dużo i chcesz to “ukrócić” to przedstawię metodę, gdzie bez zbędnych programików (Benjamin itp) możesz to zrobić szybko i skutecznie.

Jeśli Twoim celem jest tylko kilka stron do zablokowania, to ten sposób będzie idealny. Chodzi tu o modyfikacje tylko jednego pliku, który otworzymy przez notatnik. Plik hosts znajduje się w:

C:\WINDOWS\system32\drivers\etc

127.0.0.1       localhost
::1             localhost

Zamiast localhost wpisz adres strony, którą chcesz zablokować np nasza-klasa.pl

127.0.0.1       nasza-klasa.pl
::1             localhost

Teraz wpisując w przeglądarkę nasza-klasa.pl zostaniesz przekierowany na adres, który nic nie znaczy czyli 127.0.0.1

Warto zrobić przekierowanie na stronę np google.pl wtedy zamiast 127.0.0.1 wpisz adres ip google.pl czyli 209.85.135.147

Ostatnie 2 wiersza hosts będą wtedy wyglądały tak:

209.85.135.147      nasza-klasa.pl
::1             localhost

Jak odczytać ip strony internetowej? Wystarczy uruchomić wiesz poleceń CMD.

1. Najpierw naciśnij

2. Kliknij

3. Wpisz CMD.

4. Wpisz ping google.pl (lub jakiś inny adres który chcesz odczytać)

Dla windows Vista ten wiersz poleceń pokaże się gdy klikniesz w start i wpiszesz CMD w miejsce zaraz powyżej gdzie miga kursor:

Podsumowanie

Modyfikując hosts możesz zablokować lub przekierować dowolną ilość stron, bez większego wysiłku. Instalowanie programów, które działają na podobnej zasadzie może doprowadzić do tego, że zablokowane strony będą poza Twoją kontrolą.. co zazwyczaj kończy się usunięciem takiego programiku z komputera.

Pamiętaj, że możesz w każdym momencie odwrócić proces blokowania wskazanych adresów. Wystarczy robić sobie kopie pliku hosts lub wkleić ostatnie 2 wiersze tak jak było na początku.

Jeżeli chcesz więcej niż jedną stronę zablokować lub przekierować to wpisuj adresy jeden pod drugim np:

127.0.0.1       nk.pl
209.85.135.147  wp.pl
209.85.135.147    onet.pl

itp.

W tej wersji windowsa trochę jest inaczej. Najpierw uruchom notatnik jako administrator aby nie pojawił się monit “odmowa dostępu”.

Wrzuć zawartość hosts do notatnika i dopisz nowe wiersze np:

127.0.0.1       nk.pl
209.85.135.147  wp.pl
209.85.135.147    onet.pl

Ważne aby wiersz nie zaczynał się od # gdyż oznacza to komentarz.

]]> http://toin.pl/1266/jak-zablokowac-strone-internetowa/feed/ 31