Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 9. Promocja serwisu Ka *dy twórca...

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Redaktor prowadzący: Michał Mrowiec

Projekt okładki: Studio Gravite / OlsztynObarek, Pokoński, Pazdrijowski, Zaprucki

Fotografia na okładce została wykorzystana za zgodą Shutterstock.com

Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/twstp3Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

ISBN: 978-83-246-6538-9

Copyright © Helion 2014

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/twstp3

http://helion.pl/rf/twstp3

http://helion.pl/ro/twstp3

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci Wst p .............................................................................................. 7

Rozdzia 1. Podstawowe informacje .................................................................... 9Czym jest internet? ........................................................................................................... 9Czym jest strona WWW, a czym witryna? ..................................................................... 10Dlaczego warto prowadzi w asn stron WWW? ......................................................... 10Oprogramowanie potrzebne przy tworzeniu stron WWW .............................................. 13

Edytory tekstowe ...................................................................................................... 13Edytory graficzne ..................................................................................................... 14Programy do przygotowywania grafiki sieciowej .................................................... 14Klient FTP ................................................................................................................ 15

Etykieta i prawo autorskie .............................................................................................. 16Wybór us ugodawcy, u którego zamie cimy stron WWW ........................................... 17W asna domena .............................................................................................................. 18

Rozdzia 2. J zyk HTML — od tego wszystko si zaczyna ................................... 21Nowo ci wprowadzone przez j zyk HTML5 ................................................................. 23

elazne zasady u ywania j zyka HTML ........................................................................ 24Zasada 1. Nigdy nie krzy uj znaczników ................................................................. 24Zasada 2. Zawsze zamykaj wszystkie znaczniki ...................................................... 24Zasada 3. Wpisuj c znaczniki i atrybuty, zawsze u ywaj ma ych liter .................... 25Zasada 4. U ywaj cudzys owów dla wszystkich atrybutów ..................................... 25Zasada 5. Uwa aj ze znakami specjalnymi w skryptach .......................................... 25

Struktura dokumentu, znacznik i jego konstrukcja ......................................................... 25Znaczniki i atrybuty ................................................................................................. 25Podstawowa struktura dokumentu ............................................................................ 26Nag ówek strony ...................................................................................................... 27Cia o i sekcje dokumentu HTML ............................................................................. 32Elementy blokowe .................................................................................................... 35Elementy wstawiane ................................................................................................. 44Elementy osadzone (grafika, multimedia, aplikacje) ................................................ 51Hiper cza ................................................................................................................ 61Tabele ....................................................................................................................... 72Formularze ............................................................................................................... 79Komentarze .............................................................................................................. 97

Rozdzia 3. Grafika sieciowa ............................................................................ 99Format .......................................................................................................................... 101

GIF ......................................................................................................................... 101JPG ......................................................................................................................... 115PNG ........................................................................................................................ 117

Poleć książkęKup książkę



4 Tworzenie stron WWW w praktyce

Inne metody redukcji rozmiaru zdj i grafiki ........................................................ 117Pozosta e formaty publikacji grafiki na stronie WWW .......................................... 120Wyg adzanie kraw dzi — antyaliasing .................................................................. 121

Tworzenie gotowych rozwi za na potrzeby stron WWW ........................................... 124Prostok tne i owalne przyciski ............................................................................... 124Przyciski o nieregularnych kszta tach .................................................................... 129Ci cie grafiki na mniejsze elementy ....................................................................... 131Mapa odsy aczy ...................................................................................................... 134

Rozdzia 4. Wprowadzenie do CSS3 ................................................................ 135Podstawowe poj cia ..................................................................................................... 136

Budowa stylu .......................................................................................................... 136Osadzanie stylów na stronie ................................................................................... 137Jednostki miar stosowane w CSS ........................................................................... 141Nazewnictwo kolorów u ywane w CSS ................................................................. 143

Selektory ....................................................................................................................... 144Selektory proste ...................................................................................................... 144Selektory uniwersalne ............................................................................................ 145Selektory potomka .................................................................................................. 146Selektory dziecka ................................................................................................... 147Selektory rodze stwa ............................................................................................. 148Selektor ogólnego rodze stwa ................................................................................ 149Selektor atrybutu .................................................................................................... 150Selektor atrybutu z mo liwo ci dopasowania ci gu znaków ................................ 151Identyfikatory ......................................................................................................... 152Klasy ...................................................................................................................... 153Pseudoklasy ............................................................................................................ 155Pseudoelementy ...................................................................................................... 174Grupowanie selektorów .......................................................................................... 176

Dziedziczenie ............................................................................................................... 178Kaskadowo ................................................................................................................ 181W a ciwo ci tekstu ....................................................................................................... 182

Wyrównanie tekstu ................................................................................................. 183Pionowe wyrównanie ............................................................................................. 184Wci cie pierwszego wiersza akapitu ...................................................................... 185Odst py pomi dzy literami ..................................................................................... 186Odst py pomi dzy wyrazami ................................................................................. 187Odst py mi dzy liniami .......................................................................................... 187

amanie d ugiego ci gu znaków ............................................................................ 188Dekoracja tekstu ..................................................................................................... 189Przekszta canie — ma e i du e litery ..................................................................... 190Kontrola pustej przestrzeni ..................................................................................... 190Cieniowanie tekstu ................................................................................................. 191

W a ciwo ci czcionki ................................................................................................... 192Rodzina czcionek ................................................................................................... 192Rozmiar czcionki .................................................................................................... 194Waga czcionki ........................................................................................................ 196Style czcionki ......................................................................................................... 197Wariant czcionki .................................................................................................... 198Osadzanie czcionki na stronie ................................................................................ 198Zbiorczy zapis w a ciwo ci czcionki ..................................................................... 200

W a ciwo ci list ............................................................................................................ 200Typ listy ................................................................................................................. 201Dowolny obraz jako wypunktowanie listy ............................................................. 203Zawijanie tekstu ..................................................................................................... 203Zbiorczy zapis w a ciwo ci list .............................................................................. 204




Spis tre ci 5

Kolor, t o i przezroczysto .......................................................................................... 205Nowe modele barw i przezroczysto ci w CSS3 ..................................................... 205Kolor elementu ....................................................................................................... 209Kolor t a ................................................................................................................. 209Element graficzny jako t o ..................................................................................... 211Rozmiar t a ............................................................................................................. 212Zatrzymanie t a ....................................................................................................... 212Kontrola powielania t a .......................................................................................... 214Pozycjonowanie t a ................................................................................................ 215Wieloelementowe t o .............................................................................................. 217Kontrola styku t a i obramowania .......................................................................... 218Zbiorczy zapis w a ciwo ci t a ............................................................................... 219

Marginesy, obramowanie i dope nienia ........................................................................ 220Pude kowy model formatowania elementów .......................................................... 220Marginesy ............................................................................................................... 220Dope nienie ............................................................................................................ 224Obramowanie ......................................................................................................... 225Wymiary ................................................................................................................. 230

Tabele ........................................................................................................................... 232Odst py we wn trzu tabeli ..................................................................................... 235Pojedyncze obramowanie ....................................................................................... 235Kontrola pustych komórek ..................................................................................... 236Generowanie tabeli ................................................................................................. 237Podpis tabeli ........................................................................................................... 237

Pozycjonowanie elementów ......................................................................................... 238Rodzaje pozycjonowania ........................................................................................ 238Okre lanie pozycji .................................................................................................. 242Warstwy ................................................................................................................. 242

P ywanie i tamowanie elementów ................................................................................ 244P ywanie elementów .............................................................................................. 244Tamowanie elementów ........................................................................................... 246

Efekty wizualne ............................................................................................................ 247Kadrowanie ............................................................................................................ 247Ukrywanie elementów ............................................................................................ 248Sterowanie wymiarowanymi elementami ............................................................... 249

Cytaty ........................................................................................................................... 251

Rozdzia 5. Praktyczny projekt. Moja strona domowa....................................... 253Dlaczego potrzebna jest strona WWW? ........................................................................ 253Gromadz materia y ...................................................................................................... 254Struktura witryny........................................................................................................... 257Przygotowuj poszczególne elementy witryny.............................................................. 258

Strona g ówna.......................................................................................................... 258Sekcja Ksi ki ......................................................................................................... 272Sekcja Artyku y....................................................................................................... 278Sekcja O mnie ......................................................................................................... 279Sekcja Przyjazne strony........................................................................................... 279Sekcja Sklep ............................................................................................................ 281Sekcja Kontakt ........................................................................................................ 284

Nazwy plików................................................................................................................ 285Testowanie gotowego projektu...................................................................................... 286

Testy w ró nych przegl darkach ............................................................................. 286Testy rozdzielczo ci ................................................................................................ 287Testy zgodno ci kodu ze specyfikacj ..................................................................... 290

Wnioski ......................................................................................................................... 293





Rozdzia 6. Darmowe us ugi dost pne w sieci ................................................. 295Komentarze .................................................................................................................. 295Status komunikatorów Gadu-Gadu oraz Tlen na stronie WWW .................................. 299Sonda ............................................................................................................................ 299Statystyki ...................................................................................................................... 301

Instalacja darmowej wersji statystyk ...................................................................... 302Wnioski ........................................................................................................................ 305

Rozdzia 7. Przydatne skrypty, których mo na u y na stronie WWW ............... 307Nowe okno ................................................................................................................... 307Zamykanie otwartego okna ........................................................................................... 308Rollover ........................................................................................................................ 308Drukowanie zawarto ci strony ..................................................................................... 308Zmiana zawarto ci paska statusu .................................................................................. 309Dodawanie strony do „Ulubionych” ............................................................................. 309Strona startowa ............................................................................................................. 309Zmiana t a ca ej komórki tabeli .................................................................................... 309Wczytywanie arkusza w zale no ci od u ywanej przegl darki .................................... 310

Rozdzia 8. Publikacja i utrzymanie strony ...................................................... 313Wybór serwera — hosting ............................................................................................ 313Zak adanie konta .......................................................................................................... 315Publikacja strony .......................................................................................................... 317Rejestracja domeny ...................................................................................................... 319

Rozdzia 9. Promocja serwisu ......................................................................... 323Popularne sposoby promocji strony .............................................................................. 323

Podpis poczty elektronicznej .................................................................................. 323Listy mailingowe .................................................................................................... 324Inne formy promocji ............................................................................................... 324

Podstawy optymalizacji stron pod k tem wyszukiwarek .............................................. 324Domena i hosting ................................................................................................... 324Metaznaczniki ........................................................................................................ 327Tre publikowana na stronie ................................................................................. 329Nag ówki i wyró nienia ......................................................................................... 330Opis linków na stronie ............................................................................................ 331Prawid owa indeksacja strony ................................................................................ 331Zdobywanie pozycji i kontrola efektów ................................................................. 337

Integracja strony z mediami spo eczno ciowymi ......................................................... 338

Rozdzia 10. Praca z systemem CMS na przyk adzie platformy WordPress ......... 343Instalacja i wst pna konfiguracja WordPressa .............................................................. 343

Instalacja i wst pna konfiguracja ........................................................................... 344Wst pna konfiguracja ............................................................................................. 350

Instalacja i modyfikacja szablonu ................................................................................. 352Instalacja szablonu i dopasowanie uk adu strony ................................................... 352Dopasowanie uk adu strony do w asnych potrzeb .................................................. 356

Publikacja tre ci ............................................................................................................ 360Rozbudowa mo liwo ci za pomoc wtyczek ................................................................ 366

Podsumowanie ............................................................................. 371

Skorowidz .................................................................................... 372




Rozdzia 9.

Promocja serwisuKa dy twórca strony chce, by po jej publikacji by a ona oblegana przez t umy odwie-dzaj cych. Niestety, w praktyce sprawa odwiedzin oraz popularno ci strony nie wy-gl da tak dobrze. Aby rozpropagowa swoj witryn , musisz si gn po wiele roz-wi za i sztuczek, które postanowi em opisa poni ej w zwi z ej formie.

Popularne sposoby promocji stronyW niniejszym podrozdziale opisa em kilka prostych i popularnych sposobów promo-cji strony. Wi kszo przedstawionych rozwi za nie wymaga specjalnej wiedzy orazdu ego nak adu pracy. Dzi ki temu wietnie nadaj si one na start.

Podpis poczty elektronicznejNajprostszym sposobem reklamy strony jest dodanie do wysy anej poczty e-mail odpo-wiedniej stopki lub podpisu zawieraj cego adres serwisu. Je eli wysy asz du o e-maili, toz ca pewno ci w bliskiej przysz o ci taka forma promocji odniesie skutek.

Dalej zamie ci em przyk ad swojej stopki, która jest cz ci ka dego listu wysy ane-go z komputera.

--Bartosz Danowski :: http://danowski.pl ::Jak walczy ze spam-em - http://danowski.pl/ksiazka/spam

W swoim przyk adowym podpisie poza imieniem i nazwiskiem zamie ci em adresstrony internetowej oraz reklam losowo wybranej ksi ki.

Tworz c stopk poczty, musisz pami ta o tym, by nie zawiera a ona wi cej ni czte-ry wiersze — w przeciwnym razie mo esz spotka si z krytyk takiego dzia ania zestrony innych u ytkowników internetu.





Listy mailingowePromocja strony WWW czy te us ug oferowanych w internecie za pomoc pocztyelektronicznej jest tak stara, jak sam internet. Decyduj c si na ten sposób promocjistrony, musisz pami ta o kilku wa nych rzeczach.

Moim zdaniem najwa niejsz spraw jest grono adresatów poczty. Nie powinienewysy a poczty elektronicznej do grupy ludzi, których adresy znalaz y si w bazie da-nych b d cej w Twoim posiadaniu. Takie dzia anie zazwyczaj spotyka si z wrogo-ci odbiorców, poniewa cz sto okazuje si , e ich adresy e-mail trafi y do takiej ba-

zy bez ich wiedzy i zgody.

Zanim zdecydujesz si rozsy a e-maile z reklamami swojej strony, koniecznie zapo-znaj si z ksi k Spam. Profilaktyka i obrona — http://danowski.pl/ksiazka/spam.

Dlatego skorzystaj z systemów do prowadzenia biuletynów informacyjnych i umo liwswoim czytelnikom dopisywanie swoich adresów do Twojej bazy. Dzi ki temu unik-niesz problemów z pos dzaniem o spamowanie.

Inne formy promocjiDo innych form promocji mo na zaliczy zamieszczenie adresu strony na papierzefirmowym, wizytówkach, folderach reklamowych oraz w bran owych magazynach.

Dzi ki temu o Twojej stronie dowiedz si ludzie, którzy s zainteresowani tym, corobisz lub co oferujesz.

Podstawy optymalizacji stronpod k tem wyszukiwarek

Zdecydowanie najlepszym sposobem na wzrost popularno ci Twojej strony jest jejoptymalizacja, przygotowanie do indeksacji przez wyszukiwarki oraz zdobywaniewysokich pozycji w wynikach wyszukiwania.

Porady zamieszczone poni ej potraktuj jako wst p do pozycjonowania stron WWW,gdy temat ten jest na tyle obszerny, e wymaga osobnej ksi ki. Nie zmienia tofaktu, e niektóre rady tu zamieszczone s na tyle uniwersalne i ponadczasowe,e ich stosowanie w niczym nie zaszkodzi, a cz sto przyniesie po dany efekt

w postaci dobrych miejsc w wynikach wyszukiwania.

Domena i hostingCzasy, gdy domeny kosztowa y maj tek, dawno min y. Dzisiaj domen mo emy zareje-strowa ju za 1 z w ramach jednej z wielu promocji. Natomiast koszt jej pó niejszego




Rozdzia 9. Promocja serwisu 325

przed u enia kszta tuje si na poziomie kilkudziesi ciu z otych. Sama rejestracja domenypoza promocj to równie wydatek rz du kilkudziesi ciu z otych na rok. Oczywi ciekonkretne kwoty zale od tego, czy zamawiamy domen z ko cówk .pl, czy np. .com.pllub .eu.

Zapami taj, e wszelkie dzia ania maj ce na celu budow pozycji strony i jej rozpo-znawalno ci wymagaj w asnej domeny. Domen tak musisz zarejestrowa , op acii utrzymywa na serwerze. Nie mo esz korzysta z domen, które przydzieli Ci np. do-stawca us ug internetowych, poniewa zmieniaj c dostawc us ug hostingowych,stracisz j . Na marne pójd pieni dze oraz ca a praca, które w o y e w promocjstrony i d enie do tego, aby domena by a atwa do zapami tania.

Wybieraj c domen , mo na odnie wra enie, e to rzecz prosta i do zrobienia na po-czekaniu. Niestety, tak nie jest i swój wybór musisz przemy le . Dobrze dobrana do-mena musi spe nia nast puj ce kryteria:

by atwa do zapami tania,

by krótka,

nie mie polskich znaków,

najlepiej nie powinna zawiera my lników i wielu s ów,

powinna by zgodna z tematyk strony WWW.

Pierwsze dwa warunki wydaj si do oczywiste. Nazwy krótkie to nazwy atwe dozapami tania. To wa na cecha, gdy Twoja strona ma by przez ludzi równie pami -tana i polecana w codziennych rozmowach. Przyk adem doskona ej domeny i jej po-wi zania z tre ci witryny jest tablica.pl, która odpowiada za serwis z drobnymi og o-szeniami. W codziennych rozmowach padaj takie zwroty „kupi em to na tablicy” lub„sprzeda am na tablicy zb dne rzeczy”. Warto tutaj wskaza , e w a ciciel serwisutablica.pl zmieni niedawno adres na olx.pl. To dla odmiany przyk ad na to, e nazwakrótka wcale nie musi by prosta do zapami tania i mo e nie nadawa si do atwegowykorzystywania jej podczas rozmów. Zreszt sam spróbuj wstawi olx w przyk a-dowe wypowiedzi zacytowane przeze mnie kilka linijek powy ej.

Kolejn wa n kwesti jest obecno polskich znaków w nazwie domeny. Tutaj coprawda technicznie mo liwe jest ich wykorzystanie, o czym wiadczy obecno takichdomen jak g eg ó ka.pl, ale sens takiego dzia ania jest raczej redni. Wybieraj c polskieznaki w nazwie domeny automatycznie zamykasz si na ludzi u ywaj cych innych j zy-ków i swoj us ug nie zawojujesz wiata. Poza tym polskie znaki mog wywo ywaproblemy podczas samej indeksacji witryny i jej promocji. Sugeruj , aby ich unika .

Zdecydowanie unikaj domen, które sk adaj si z kilku s ów. Maksymalna zalecanad ugo adresu to dwa s owa rozdzielone cznikiem. Nie ma sensu rejestrowa do-men, które b d wygl da na przyk ad tak: kwatery-nad-morzem-w-lebie.pl poniewakorzystanie z takiego adresu jest niewygodne. Znacznie lepszym pomys em jest wy-kupienie domeny kwatery-leba.pl lub si gni cie po domeny regionalne i wykupienieadresu kwatery.leba.pl.





Ostatnia z cech dobrej domeny to jej zgodno z tematyk witryny. Tutaj panuj dwieszko y. Cz osób zwi zanych z pozycjonowaniem stron uwa a, e domena konieczniemusi zawiera s owa kluczowe odpowiadaj ce tematyce. Zgodnie z tak teori dome-na kwatery-leba.pl jest wr cz wymarzona dla witryny oferuj cej noclegi w ebie.Dzieje si tak, poniewa s owa kluczowe w domenie pozwalaj na jej lepsz promo-cj i osi gni cie atrakcyjniejszych wyników w SERP-ach.

Druga grupa osób uwa a, e s owa kluczowe w adresie witryny nic nie daj i nie wp y-waj w znacz cym stopniu na pozycj witryny. Inaczej mówi c, domena glendoria.plb dzie mie takie same szanse w walce o dobre wyniki jak kwatery-leba.pl.

Prawda le y po rodku i z tego powodu staraj si tak dobiera adres domeny, abyspe ni mo liwie wszystkie podane na pocz tku kryteria.

Hosting to nic innego jak us uga firmy udost pniaj cej serwery, na których za stosownop at mo emy przechowywa swoj stron WWW i pokazywa j wiatu. Na rynkuus ug internetowych mamy ogromn konkurencj , a oferty poszczególnych firm bar-dzo si ró ni , dlatego wybór odpowiedniego miejsca dla strony nie jest atwy. Ko-nieczna jest tutaj dok adna analiza wszystkich aspektów oraz dobranie oferty do w a-snych potrzeb.

Wybieraj c odpowiedni hosting dla strony, nale y bra pod uwag kilka kluczowychczynników, które pozwoli em sobie wymieni poni ej.

Rozwi zania technologiczne wykorzystywane przy budowie strony. Je elikorzystasz z baz danych, j zyka PHP, skryptów CGI lub potrzebujesz w asnejdomeny albo kilku kont e-mail, powiniene wybra ofert , która sprostaTwoim oczekiwaniom.

Popularno strony. Je eli tworzysz stron , która b dzie cieszy si dupopularno ci , to wybieraj c odpowiedni hosting, musisz wzi pod uwaglimity transferu przypisane do danej oferty. Dok adniej mówi c, chodzi o to,e niemal ka da firma ogranicza korzystanie ze swoich us ug, nak adaj c

miesi czne limity transferu. Musisz wiedzie , e ka dy odwiedzaj cyTwoj stron ci ga jej zawarto na dysk, a pobrane dane zmniejsz Twójmiesi czny limit. Parametry musisz dobra tak, aby w rodku miesi ca niezabrak o transferu, bo to mo e skutkowa problemami z dzia aniem strony.

Awaryjno serwera. To kolejny czynnik maj cy kluczowe znaczeniepodczas wyboru odpowiedniego serwera dla strony. Je eli serwerus ugodawcy ma ci g e awarie, koniecznie poszukaj innej oferty. Pami taj,e dla Twoich go ci ci g e problemy z dostaniem si na stron s

wystarczaj cym powodem do tego, aby zrezygnowa z odwiedzin.

Szybko wczytywania si strony. Przeci tny u ytkownik internetuoczekuje, e ogl dana przez niego strona zostanie wczytana w kilka sekund.Dlatego zadbaj o to, by wybrane przez Ciebie konto dzia a o szybko. Skorzystajz us ug firmy, która pozwala na bezp atne przetestowanie oferty. Dzi ki temusam b dziesz móg sprawdzi , jak szybko dzia a strona. Warto równiepoprosi znajomych o sprawdzenie szybko ci testowanej us ugi.





Pomoc techniczna. Nawet najlepszy us ugodawca ma prawo do wpadeki awarii. Dlatego nale y zadba o wybór takiej firmy, która dysponujesprawnym, ca odobowym serwisem. Dzi ki temu ewentualna awaria zostanienatychmiast zlokalizowana i usuni ta.

Jak widzisz, wymogów, jakie powinien spe nia dobry hosting, jest ca kiem sporo. Naszcz cie w sieci dost pne s rozwi zania u atwiaj ce znalezienie odpowiedniego do-stawcy us ug. Do weryfikacji jako ci us ug wiadczonych przez wybran przez Ciebiefirmy wykorzystaj Google i tam poszukaj opinii.

Wymienione powy ej czynniki wydaj si nie mie nic wspólnego z optymalizacjstrony. Jednak w rzeczywisto ci okazuje si , e wyszukiwarki podczas indeksacji stronuwzgl dniaj szybko dzia ania i dost pno . Gdy strona dzia a wolno robot siecio-wy b dzie mia problem z dok adn indeksacj witryny i obni y jej warto . Gdy ro-bot trafi na stron , która akurat nie dzia a z powodu awarii serwera, wróci na ni zajaki czas. Jednak gdy podczas kolejnych wizyt robot znowu zauwa y, e strona niedzia a, uzna j za pozbawion warto ci i j pominie.

Jak widzisz, z y hosting mo e zniweczy ca Twoj prac oraz poniesione rodki nabudow wizerunku i optymalizacj strony WWW.

MetaznacznikiNa samym pocz tku przeanalizuj tre swojej strony i na tej podstawie wybierz kilkas ów kluczowych. Powinny to by s owa lub frazy, które najlepiej oddaj zawartostrony i s wykorzystywane przez ludzi szukaj cych informacji w sieci. Aby prawi-d owo wykona to zadanie, warto wczu si w rol osoby szukaj cej, a nie pozycjo-nuj cej stron . Poza tym pami taj, e s owa i frazy powinny by dopasowane do ka -dej z podstron, a co za tym idzie, raczej nie b d to zawsze te same zestawy s ów.

Analizuj c zawarto mojej strony, doszed em do wniosku, e ka da z podstron omawia-j cych ksi ki korzysta z innych s ów i fraz kluczowych. Dlatego jako przyk ad dodalszych rozwa a pos u y mi strona jednej z ksi ek, Nero 9. Nagrywanie p yt CDi DVD. wiczenia praktyczne. Wytypowane przeze mnie s owa kluczowe wypisa emponi ej.

Nero

Nagrywanie p yt

Nero Burning ROM

Wypalanie p yt

P yty CD DVD

Kopiowanie p yt.

Maj c wybrany zestaw kluczowych fraz i s ów, mo esz zabra si do optymalizacji kodustrony. W pierwszej kolejno ci musisz zadba o odpowiednie opisane znaczników<meta />. Poni ej zamie ci em przyk ad odpowiednich znaczników wraz z wpisanymi





s owami kluczowymi. Pami taj, e oba elementy musz znajdowa si w nag ówkustrony pomi dzy znacznikami <head></head>.

<meta name="keywords" content="nero, nagrywanie p yt, kopiowanie p yt, wypalaniep yt, wypalanie, p yty CD DVD " /><meta name="description" content="Poznaj mo liwo ci pakietu Nero i naucz sinagrywa p yty CD oraz DVD" />

Zwró uwag , e s owa kluczowe — atrybut keywords — rozdzielone s przecinkami.Postaraj si nie dodawa zbyt wielu s ów kluczowych. Element ten obecnie nie maznaczenia dla pozycji strony w indeksie wyszukiwarki, ale mimo to warto zadba , abyznalaz si w kodzie strony.

Drugi z przedstawionych znaczników zawiera opis strony. Opis powinien by zwi z yi na temat, bo w du ej mierze od niego zale y, czy dany go poczuje si zach conydo bli szego zapoznania si z Twoj stron . Staraj si w opisie wykorzystywa s owakluczowe. Element ten jest wykorzystywany w opisie wyników prezentowanychprzez wyszukiwark . Dlatego koniecznie o nim pami taj i po wi mu wiele uwagi.

Nast pnym istotnym elementem jest tytu strony. Przypomn tylko, e jest on tworzo-ny za pomoc znacznika <title></title>. Dobrze zbudowany tytu strony powinienzawiera informacje o jej zawarto ci oraz pozycjonowane frazy lub s owa kluczowe.Zdecydowanie z ym pomys em jest tworzenie tytu u zawieraj cego np. nazw ma oznanej firmy produkuj cej okna. Ma o kto b dzie szuka producenta okien wed ug na-zwy firmy. Poni ej przedstawi em dobrze skonstruowany tytu strony.

<title>Nero 9. Nagrywanie p yt CD i DVD. wiczenia praktyczne</title>

Tytu strony jest wy wietlany w wynikach wyszukiwania i stanowi opis odno nikaprowadz cego do Twojej strony — rysunek 9.1. Zadbaj wi c o to, aby tytu oddawaw stu procentach zawarto strony i zach ca do klikni cia. Pami taj równie o tym,e tytu dla ka dej z podstron musi by inny.

Rysunek 9.1.Przyk adowy wynikwyszukiwania

Kolejnym istotnym elementem, który musi znale si w kodzie strony, jest znacznik<meta name="robots" />, który informuje robota wyszukiwarki o tym, co mo na in-deksowa na stronie. Poni ej znajduje si przyk adowy wpis, pozwalaj cy na pe nindeksacj wszystkich podstron serwisu.

<meta name="robots" content="index,follow" />

W zale no ci od potrzeb warto ci wpisane do atrybutu content mog oczywi cieprzybiera inn posta , np.:

'index' — strona powinna by zaindeksowana,

'noindex' — strona nie powinna by zaindeksowana,





'follow' — linki z tej strony powinny by zaindeksowane,

'nofollow' — linki z tej strony nie powinny by zaindeksowane,

'all' równa si 'index, follow' — warto domy lna,

'none' równa si 'noindex, nofollow'.

Uwaga: wszystkie opisane w niniejszym podrozdziale znaczniki j zyka HTML po-winny znale si w nag ówku ka dej z podstron serwisu.

Tre publikowana na stroniePo zmianach kodu strony przysz a pora na to, aby przyjrze si tre ci pozycjonowanejstrony. Poprawnie napisany tekst przeznaczony do prezentacji na stronie WWW po-winien spe nia kilka surowych kryteriów, dzi ki którym b dzie trafia do czytaj cegooraz wp ynie na popraw wyników wyszukiwania. Do najwa niejszych cech dobregotekstu zaliczamy nast puj ce czynniki:

Zwi z a forma — pami taj, e internauci nie lubi przys owiowego laniawody. Ponad wszelk w tpliwo wykazano, e ludzie korzystaj cy z internetupo przeczytaniu dwóch ekranów tekstu rezygnuj z dalszej lektury. Dlategostaraj si pisa zwi le, a d u szy artyku dziel na kilka podstron. Je elimusisz podzieli tekst na strony, to staraj si zrobi to tak, by koniec jednejstrony zach ca do klikni cia i wej cia na nast pn . Dzi ki temu czytelnicyprzejd dalej i sp dz wi cej czasu na Twojej stronie.

Prosty i zrozumia y j zyk — staraj si u ywa prostego i zrozumia ego j zyka.Dzi ki temu tekst b dzie lepiej zrozumiany nawet przez osoby s abiejobeznane z tematem.

Zadbaj o stron j zykow — staraj si , aby teksty na stronie by y napisanepoprawn polszczyzn , zawiera y polskie znaki i by y wolne od b dówortograficznych. Zapami taj, e algorytmy dzia ania wyszukiwarek stronWWW mog wykrywa b dy, tj. tekst o niskiej jako ci, i na tej podstawieobni a wiarygodno strony, co przek ada si na gorsze pozycje w rankingu.

Pisz dla ludzi — tworz c materia y przeznaczone do publikacji na stronie,w pierwszej kolejno ci pisz dla ludzi. Tekst b d czyta ludzie i to oni muszgo zrozumie . Staraj si oczywi cie zadba o to, aby w tek cie wyst powa ys owa lub frazy, dla których pragniesz uzyska dobr pozycj w wynikachwyszukiwarki. Dodatkowo elementy te mo esz wyró ni , ale ca y czas miejna uwadze, e tekst ma by czytelny dla cz owieka. Dlatego nie przesadzajz nasyceniem s owami kluczowymi i stosowaniem wyró nie . Dodaj tyles ów kluczowych, ile tego wymaga poprawno tekstu, i wyró niaj tylkonajwa niejsze elementy.

Opisz poruszane zagadnienie wyczerpuj co — postaraj si w publikowanychtekstach dok adnie omawia temat. Je eli prowadzisz sklep internetowy,zadbaj o to, aby poza opisem przedmiotu na stronie znalaz y si równiezdj cia oraz dok adna specyfikacja. Chodzi o to, by potencjalny klientw jednym miejscu znalaz odpowied na wszystkie swoje pytania.





Stawiaj na unikalno tekstu — algorytmy wyszukiwarek internetowychopanowa y do perfekcji odnajdowanie jednej i tej samej tre ci umieszczonejna kilku stronach WWW. Wykrycie duplikatów powoduje, e takie tre ciuznawane s za materia y o niskiej jako ci i z tego powodu otrzymuj niskieoceny w rankingu.

Nag ówki i wyró nieniaPrzy projektowaniu stron internetowych powinni my zwróci uwag na ich logicznbudow . Ogólnie uwa a si , e s owa kluczowe zawarte w nag ówkach s traktowaneprzez algorytmy wyszukiwarek jako plus przy ocenie strony. Podej cie takie jest lo-giczne, poniewa zak ada, e nag ówek to celowo wyró niony fragment tekstu, a sko-ro tak, to ma on szczególne znaczenie dla odbioru tre ci.

Nag ówki na stronie powinny by stosowane w sposób logiczny, tak jak w gazecie czyksi ce. W specyfikacji j zyka HTML mamy do dyspozycji sze nag ówków: h1, h2,h3, h4, h5 i h6, gdzie h1 jest najwa niejszy, a h6 najmniej istotny. Ka da przegl dar-ka domy lnie ró nicuje rozmiar nag ówków i dzi ki temu h1 to najwi kszy, a h6 naj-mniejszy tekst. Kontrola sposobu wy wietlania nag ówków oraz rozmiaru i rodzajuczcionki jest mo liwa za pomoc kaskadowych arkuszy stylów. Poni ej zamie ci emprosty przyk ad maj cy na celu zobrazowanie tego, jak powinni my wykorzystywanag ówki w tek cie:

<div class="tresc"> <h1>Laptopy – jak wybra najlepszy?</h1> <p>Ogólny opis kryteriów wyboru laptopa</p> <h2>Procesory w laptopach</h2> <p>Opis stosowanych procesorów w laptopach</p> <h3>Procesory firmy Intel </h3> <p>Opis</p> <h3>Procesory firmy AMD </h3> <p>Opis</p><h2>Pami RAM w komputerach przeno nych</h2> <p>etc.</p></div>

Zapami taj, e nag ówek h1 powinien by u yty tylko raz — do opisu ogólnego te-matu strony. Nag ówki od h2 do h6 mog by stosowane cz ciej, na przyk ad tak jakpowy ej — do oddzielenia sekcji strony. W przyk adowych nag ówkach zawar em s owakluczowe dotycz ce laptopów, przez co daj wyszukiwarkom zna , e to s wa nes owa na mojej stronie.

Kluczowe s owa w tek cie powiniene wyró ni . Przypomn , e s u do tego nast -puj ce znaczniki:

<b></b>,

<i></i>,

<u></u>,

<strong></strong>,





<em></em>,

<tt></tt>,

<cite></cite>,

<dfn></dfn>.

Przy stosowaniu wyró nie s ów kluczowych wyst puj cych w tek cie kolejny razwarto kierowa si zdrowym rozs dkiem. Odpowiednie wyró nienie s ów kluczowychmo e w znacznym stopniu u atwi zrozumienie i przyswajanie tekstu. Natomiast przesad-ne naszpikowanie tekstu wyró nieniami powoduje, e czytanie staje si m cz ce,a i wyszukiwarki mog wietrzy w tym podst p. Poni ej zamie ci em dwa prosteprzyk ady tekstu, w którym pojawi y si wyró nienia s ów kluczowych.

Opis linków na stronieKolejnym wa nym narz dziem pozwalaj cym wyró nia s owa kluczowe jest ich wyko-rzystywanie w opisie odsy aczy. Zanim jednak przejdziemy do konkretów, przyjrzyj-my si konstrukcji typowego odsy acza tekstowego:

<a href="http://www.domena.pl">Opis odsy acza</a>

Tekst znajduj cy si pomi dzy znacznikami <a></a> jest widoczny bezpo rednio nastronie, dlatego w tym miejscu zaleca si stosowanie s ów kluczowych. Powinny onewyst powa w opisie odsy aczy zarówno zewn trznych, jak i wewn trznych.

Przy dodawaniu odsy aczy wewn trznych ze s owami kluczowymi konieczny jest umiar.Chodzi o to, aby w ramach jednej podstrony nie stosowa zbyt du ej liczby odsy a-czy, poniewa dzia anie takie mo e:

wywiera negatywny wp yw na wygod obs ugi strony i jej funkcjonalno ;

nie przynosi oczekiwanych efektów w walce o odpowiedni pozycj .

Jedna z teorii g osi, e pojedyncza podstrona powinna zawiera tylko jeden odsy aczprowadz cy do innej strony. Dok adniej mówi c, nale y unika sytuacji, w której nastronie A umieszczamy wiele odsy aczy do strony B, ró ni cych si opisami. Je eli junawigacja strony tego wymaga, to nale y pami ta , e brany pod uwag jest pierwszyopis odsy acza w kodzie strony.

Oczywi cie nic nie stoi na przeszkodzie, aby strona A zawiera a wiele odsy aczy doinnych podstron — B, C, D itd. Wa ne jest jednak to, by nie powiela w opisach tychsamych fraz i s ów kluczowych.

Prawid owa indeksacja stronyPo dobraniu s ów kluczowych, prawid owym opisie istotnych znaczników w kodziestrony i optymalizacji tekstów przysz a pora na to, aby zadba o nale yt indeksacjstrony przez wyszukiwarki. Zanim jednak przejdziemy do konkretów, kilka wa nychinformacji na temat tego, w jaki sposób dzia aj roboty wyszukiwarek.





W du ym uproszczeniu robot wyszukiwarki jest samodzieln przegl dark , któraanalizuje zawarto strony i wyniki swoich obserwacji przesy a do bazy danych. Robot powypuszczeniu z „klatki” zaczyna swoj w drówk po sieci i przemieszcza si pomi -dzy indeksowanymi stronami dzi ki odno nikom. Dlatego bardzo wa nym elementemjest prawid owe po czenie wszystkich stron w serwisie. Robot musi mie swobod„skakania” ze strony na stron , tak by zapozna si ze wszystkimi cz ciami serwisu.

Niestety, robot sieciowej wyszukiwarki w zale no ci od tego, z jakim serwisem ma-cierzystym jest powi zany, ma szereg braków i ogranicze , które musimy bra poduwag podczas tworzenia strony.

Zacznijmy od najwa niejszego ograniczenia. Otó wi kszo robotów nie potrafi anali-zowa stron wykorzystuj cych technologi Adobe Flash lub robi to nieudolnie. Efek-tem tych ogranicze mo e by zerowa lub szcz tkowa indeksacja Twojej strony.

W przypadku mojej strony domowej (starej wersji) boczne menu nawigacyjne zosta owykonane za pomoc programu Adobe Flash — rysunek 9.2, co zaowocowa ow pierwszej fazie problemami z indeksacj strony.

Rysunek 9.2. System nawigacji oparty na Adobe Flash jest z ym rozwi zaniem z punktu widzeniapozycjonowania stron

Niestety, roboty indeksowa y wy cznie stron g ówn oraz podstrony, do którychodno niki znajdowa y si w kolumnie aktualno ci i w g ównej tre ci strony. czniew indeksie znajdowa o si zaledwie kilkana cie procent ca ego serwisu.

Opisany powy ej problem mo na rozwi za przynajmniej na trzy sposoby, które po-zwoli em sobie szerzej opisa poni ej.





Najszybszym rozwi zaniem jest dodanie drugiego, tekstowego menu nawigacyjnego,przeznaczonego g ównie dla robotów. W przypadku mojej strony domowej takie me-nu pojawi o si w stopce strony — rysunek 9.3.

Rysunek 9.3. Dodatkowe tekstowe menu nawigacyjne wp ywa na lepsz indeksacj strony

Drugim rozwi zaniem, które wymaga odrobin wi cej zachodu, jest utworzenie mapystrony. W praktyce taka mapa jest wykazem odno ników do wszystkich podstronserwisu. Rysunek 9.4 przedstawia przyk adow map mojej strony domowej.

Rysunek 9.4.Mapa strony bardzodobrze wp ywa nalepsz indeksacjstrony

Tworz c map strony, warto skorzysta z list wypunktowanych lub numerowanych,a gotow podstron bezwzgl dnie nale y podpi do g ównej strony serwisu za pomoctekstowego odno nika. Na przyk adowej witrynie odno nik do mapy strony znaj-dziesz w tekstowym menu nawigacyjnym, umieszczonym w stopce — rysunek 9.3.





Licz ce si wyszukiwarki udost pni y specjalne narz dzie do tworzenia map orazzarz dzania nimi. Dzi ki temu strony maj by jeszcze lepiej i dok adniej indekso-wane. Przyk ad takiego rozwi zania znajdziesz m.in. w ramach pakietu GoogleWebmaster Tools.

Ostatnim i chyba najbardziej wymagaj cym rozwi zaniem jest zmiana systemu nawi-gacji strony i zast pienie go lepszym oraz nowocze niejszym rozwi zaniem, jakim skaskadowe arkusze stylów. Na rysunku 9.5 wida alternatywne menu nawigacyjnemojej strony domowej, wykonane za pomoc CSS.

Rysunek 9.5.Za pomoc CSSmo na utworzyrównie atrakcyjne,a przy tymfunkcjonalne menunawigacyjne

Poni ej zamie ci em przyk adowy arkusz stylów oraz kod strony WWW z prezentowa-nym menu. Mam nadziej , e dzi ki informacjom zawartym w poprzednich rozdzia achniniejszej ksi ki poradzisz sobie z przygotowaniem podobnego systemu nawigacji.

Kod HTML<div id="menu"><ul id="danowski"><li><a href="#1" title="Strona g ówna">Strona g ówna</a></li><li><a href="#2" title="Napisane ksi ki">Ksi ki</a></li><li><a href="#3" title="Artyku y">Artyku y</a></li><li><a href="http://danowski.blogspot.com" title="Blog">Blog</a></li><li><a href="#4" title="W a nie pisz ">W a nie pisz </a></li><li><a href="#5" title="Uaktualnienia">Uaktualnienia</a></li><li><a href="#6" title="O mnie">O mnie</a></li><li><a href="#7" title="Sklep">Sklep</a></li><li><a href="#8" title="Reszta">Reszta</a></li><li><a href="#9" title="Przyjazne strony">Ciekawe strony</a></li><li><a href="#10" title="Kontakt">Kontakt</a></li></ul></div>

Arkusz stylów:ul#danowski{list-style: none;





margin: 0;padding: 0;}#menu{width: 150px;border-style: solid solid none solid;border-color: #F4F4F4;border-size: 1px;border-width: 1px;margin: 10px;}

#menu li a{height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px;text-decoration: none;outline-style: none;}

#menu li a:link, #menu li a:visited{color: #404040;display: block;background: url(images/menu1.gif);padding: 8px 0 0 10px;outline-style: none;}

#menu li a:hover{color: #26370A;background: url(images/menu1.gif) 0 -32px;padding: 8px 0 0 10px;}

#menu li a:active{color: #26370A;background: url(images/menu1.gif) 0 -64px;padding: 8px 0 0 10px;}

Na rysunku 9.6 wida obrazek wykorzystany do przygotowania menu.

Rysunek 9.6.Zmy lna konstrukcjaobrazka powoduje,e animacja menu

jest p ynna niezale nieod posiadanego cza

Szalenie wa nym czynnikiem poprawiaj cym dok adn indeksacj strony jest systemwewn trznych odno ników pomi dzy stronami. Innymi s owy, w miar mo liwo cizadbaj o to, aby poszczególne strony by y powi zane mi dzy sob . Zwró uwag , e





na przyk adowej stronie g ównej mo na np. znale odno nik do strony o ksi ce oma-wiaj cej program Nero. Po otwarciu odpowiedniej podstrony pod opisem ksi ki znaj-dziesz kilka kolejnych odno ników do innych ksi ek na ten sam temat — rysunek 9.7.

Rysunek 9.7. Zadbaj o wzajemne powi zania poszczególnych stron





Je eli z jakich powodów dany odsy acz ma nie by analizowany przez robota wy-szukiwarki, mo na skorzysta z atrybutu rel="nofollow".

<a href="http://danowski.pl" rel="nofollow">Ten odsy acz nie zostaniesprawdzony przez robota</a>

Zdobywanie pozycji i kontrola efektówZdobywanie pozycji w wynikach wyszukiwania jest procesem powolnym i wymagaci g ej aktywno ci z Twojej strony. Dzia ania, które musisz prowadzi , obecniesprowadzaj si do dwóch kwestii:

optymalizacja strony,

zdobywanie linków naturalnych.

Pierwsze kwestia zosta a szeroko omówiona w ca ej ksi ce oraz w niniejszym rozdziale.W ramach podsumowania pozwoli em sobie wypunktowa rzeczy naprawd wa ne:

optymalizacja kodu i szybko ci dzia ania witryny,

unikalno i wysoka jako publikowanych tre ci,

przemy lany system nawigacji,

optymalizacja publikowanych tre ci.

Druga z podniesionych kwestii jest znacznie trudniejsza do realizacji poniewa Googlebacznie zwraca uwag na odno niki prowadz ce do Twojej strony i ocenia ich natu-ralno . Dlatego zdobywaj c odno niki, kieruj si nast puj cymi wskazówkami:

Nie u ywaj systemów wymiany linków.

Zdobywaj odno niki r cznie w ma ych partiach.

Dbaj o to, by opisy odno ników by y zró nicowane. Nie musisz dodawawy cznie linków ze s owami kluczowymi w opisie. Mo esz linkowa bezopisów lub u ywa opisów typu „wi cej”, „czytaj” itp. Im bardziej naturalneodno niki, tym lepiej.

Zwracaj baczn uwag na to, gdzie znajduj si odno niki do Twoich stron.Wybieraj strony naturalne o wysokiej warto ci, a nie takie, które powsta ywy cznie z my l o tworzeniu zaplecza SEO.

Zwracaj uwag na obecno odno ników do Twojej strony w mediachspo eczno ciowych. Kwestia ta zosta a szerzej opisana w kolejnympodrozdziale.





Integracja stronyz mediami spo eczno ciowymi

Zacznijmy od próby znalezienia odpowiedzi na pytanie, czym s serwisy oraz mediaspo eczno ciowe. Bez w tpienia serwisami spo eczno ciowymi s strony WWW, któ-re zbieraj ludzi w jednym miejscu i staraj si ukierunkowa ich internetow aktyw-no . Mówi c pro ciej, serwisy spo eczno ciowe daj szereg narz dzi, które pozwa-laj na przyci gni cie, zatrzymanie oraz wzajemn interakcj du ej grupy ludzi.

Skoro mówimy o du ej grupie ludzi wchodz cych w interakcje, to mo emy dopatrzy situtaj przekazywania informacji, a co za tym idzie — nazwa media spo eczno ciowezaczyna nabiera sensu. Warto pami ta o tym, e z uwagi na atwo komunikacji orazzasi g, jaki maj media spo eczno ciowe, ka dy mo e by tutaj zarówno nadawc in-formacji, jak i jej odbiorc . Oznacza to, e w przypadku mediów spo eczno ciowychzacieraj si granice pomi dzy nadawc a odbiorc .

Najwa niejsze cechy mediów spo eczno ciowych to:

Ogromny zasi g — Facebook zbli a si do miliarda u ytkowników.

Du a aktywno u ytkowników — z bada publikowanych m.in. przezMegapanel wynika, e ponad 90% internautów korzysta z ró nych typówmediów spo eczno ciowych i po wi ca im nawet 1,5 godziny dziennie.

Ogromna ró norodno — nawet w ród ogólnych, du ych mediówspo eczno ciowych mo na wyró ni szereg mniejszych spo eczno ci skupionychna konkretnej tematyce. Na przyk ad nie ma problemu, aby na Facebookupowsta a grupa mi o ników ksi ek informatycznych wydawnictwa Helionb d grupa obro ców dworca kolejowego w Katowicach, który by przyk ademnurtu brutalizmu w architekturze powojennej. Oczywi cie obok mediówogólnych mo emy spotka serwisy od samego pocz tku stworzone z my lo wybranej grupie u ytkowników, np. GoldenLine nastawi si na gromadzenieludzi zainteresowanych karier i budow w asnego wizerunku z my l o lepszejpozycji na rynku pracy.

Zró nicowanie kana ów komunikacji — media spo eczno ciowe to zarównodu e serwisy spo eczno ciowe, jak i ma e blogi, fora dyskusyjne czy mikroblogi.

atwo tworzenia przekazu — wspóln cech mediów spo eczno ciowychjest atwe przej cie od odbiorcy tre ci do jej nadawcy. Mówi c pro ciej,ka dy w dowolnym momencie mo e rozpocz nadawanie swojego przekazui prawie natychmiast b dzie mia on odbiorców. Wszystko zale y tylkood sposobu przekazania oraz warto ci publikowanych tre ci.

Uda o nam si mniej wi cej okre li , czym s media spo eczno ciowe. Teraz spróbujodpowiedzie na pytanie, dlaczego s one tak wa ne z punktu widzenia osób zajmu-j cych optymalizuj cych swoje strony WWW.





W algorytmie wyszukiwarki Google ci gle s wprowadzane zmiany, które maj na celuzapewnienie jak najlepszych wyników. Kolejne zmiany wprowadzane w Google (mowatutaj o aktualizacjach Panda i Pinguin) skupi y si na jako ci tre ci oraz na natural-nych linkach prowadz cych do nich. Programi ci Google dostrzegli, e media spo-eczno ciowe najszybciej reaguj na otaczaj c nas rzeczywisto i ywo si o niej

w nich dyskutuje za pomoc linków do stron z warto ciowymi tre ciami. Dodat-kowo z uwagi na ogromn popularno spo eczno ci internetowych, nad konkretnymizagadnieniami dyskutuj spore grupy ludzi, które wzajemnie wymieniaj si tre cia-mi. Oznacza to, e aktywno w mediach spo eczno ciowych mo e zosta zmierzonai wykorzystana podczas okre lania warto ci konkretnych stron WWW.

Wyobra sobie na przyk ad strony dwóch producentów butów damskich. Obaj majserwisy internetowe, w których promuj swoje kolekcje. Obaj przyk adaj si dooptymalizacji i pozycjonowania stron WWW, ale tylko jeden z nich posiada grono fanówna Facebooku i uruchomi tam w asny profil. Bez w tpienia osoby lubi ce mark b -d wzajemnie dyskutowa y i wymienia y si informacjami o nowych modelach bu-tów, promocjach czy ciekawych informacjach na temat danego producenta. Ten natu-ralny ruch generowany przez spo eczno skupion wokó producenta butów b dzieskutkowa pojawieniem si nowych naturalnych odno ników do jego strony. Fakt tenzostanie odnotowany przez roboty Google, a nast pnie wykorzystany podczas okre-lania pozycji w rankingu wyników wyszukiwania.

Pewnie zastanawiasz si , na jakiej podstawie algorytm Google potrafi zmierzy popular-no w mediach spo eczno ciowych. Otó okazuje si , e jest to bardzo proste. Na przy-k ad w serwisie Facebook licz si udost pnienia oraz klikni te przyciski Lubi to.W Google+ istotne s tzw. +1 (odpowiednik przycisku Lubi to z Facebooka) orazudost pnienia wpisów. Innymi s owy, ca a Twoja aktywno w mediach spo eczno-ciowych powinna skupi si na:

stworzeniu kana u komunikacji,

pozyskaniu fanów,

d eniu do tego, aby zdobywa jak najwi cej rekomendacji (Lubi to i +1oraz udost pnie swoich tre ci).

Pierwszy i drugi punkt to temat mocno odbiegaj cy od problemów poruszanych w ni-niejszej ksi ce. Dlatego pozwoli em sobie jedynie je wskaza bez ich opisywania.Natomiast ostatnia z wymienionych kwestii ma zwi zek z tworzeniem stron, ponie-wa do realizacji tych celów mo emy wykorzysta ró ne komponenty udost pnioneprzez twórców serwisów spo eczno ciowych i np. doda na swojej stronie przyciskLubi to — rysunek 9.8.

Instalacja przycisków mediów spo eczno ciowych ogranicza si do dodania na stroniefragmentu kodu HTML i JavaScript (tak jak w przypadku instalacji statystyk). Kod nale ywklei w miejscu, w którym ma pojawi si przycisk). Poni ej zamie ci em linki dostron popularnych mediów spo eczno ciowych, na których znajdziesz odpowiedniekody do skopiowania.





Rysunek 9.8. Przyciski mediów spo eczno ciowych u atwiaj dzielenie si odno nikami do Twojejstrony WWW

Facebook

https://developers.facebook.com/docs/plugins/like-button

https://developers.facebook.com/docs/plugins/share-button

Google

https://developers.google.com/+/plugins/+1button/?hl=pl

Twitter

https://about.twitter.com/resources/buttons

Pinterest

http://business.pinterest.com/pl/widget-builder#do_pin_it_button




Przyk adowy kod przycisku +1 serwisu Google Plus wygl da tak:<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript"> window.___gcfg = {lang: 'pl'};

(function() { var po = document.createElement('script'); po.type = 'text/javascript';po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s); })();</script>

Skorowidz

Aadministracja systemem

komentarzy, 298administrator, 100adresowanie odsy aczy, 72adresy

bezwzgl dne, 70wzgl dne, 70

akapity, 36animacja, 109, 110animacja Flash, 58animowany GIF, 107–112ankieta, 299antyaliasing, 121aplikacja

Adobe Flash, 332DrawPlus 4, 15Dreamweaver, 14FileZilla, 317GIMP, 15JTHTML, 14MS GIF Animator, 109Paint.NET, 15Paint Shop Pro, 99, 103PSPad, 14

atrybut, 25autocomplete, 86autofocus, 86, 92, 93autoplay, 58checked, 86class, 154cols, 92content, 31, 328controls, 57coords, 65disabled, 87, 92height, 59href, 63, 65list, 88

loop, 56, 58max, 87maxlength, 93min, 87name, 84placeholder, 89, 93readonly, 93rel, 337required, 89, 92rows, 92sandbox, 61shape, 65size, 86src, 57, 59srcdoc, 60target, 60title, 66value, 85, 89width, 59wrap, 94

atrybuty znaczników, 90

Ccechy dobrego tekstu, 329cia o dokumentu, 32cieniowanie tekstu, 191ci cie grafiki, 131CMS, 343CSS3, 135

budowa stylu, 136cytaty, 251dope nienie, 224dziedziczenie, 178efekty wizualne, 247identyfikatory, 152jednostki miar, 141kaskadowo , 181klasy, 153

kolor, 205marginesy, 220nazewnictwo kolorów, 143obramowanie, 225p ywanie elementów, 244pozycjonowanie elementów, 238przezroczysto , 205pseudoelementy, 174pseudoklasy, 155selektory, 144tabele, 232tamowanie elementów, 246t o, 205warstwy, 242w a ciwo ci czcionki, 192w a ciwo ci list, 200w a ciwo ci tekstu, 182wymiary, 230

cytaty, 38, 251czcionki

cursive, 193fantasy, 193monospace, 193rozmiar, 194sans-serif, 193, 194serif, 193style, 197waga, 196wariant, 198

Ddarmowe us ugi, 295data i czas, 82deklaracja

kotwicy, 69strony kodowej, 28tekstu, 189




Skorowidz 373

dodawanienowego wpisu, 365strony, 309

domena, 18, 319, 324dopasowanie

stylu, 151uk adu strony, 356

dope nienie, 224drukowanie zawarto ci strony, 308drzewo katalogów, 71dzia anie

dope nienia, 225pseudoklasy :nth-child(), 165selektora prostego, 149stylu overflow, 250

dziedziczenie, 178

Eedytory

graficzne, 14programistyczne, 14tekstowe, 13

efekt rollover, 129, 308efekty wizualne, 247elementy

blokowe, 35graficzne, 52osadzone, 51tabeli, 78witryny, 258wstawiane, 44

etykieta, 16

Ffilmy, 54Flash, 58, 120format

czasu, 83daty, 82GIF, 101JPG, 115PNG, 117SVG, 120

formatowanieelementów, 220tabel, 232

formaty graficzne, 101formularze, 79FTP, File Transfer Protocol, 15

Ggenerowanie tabeli, 237GIF, 101grafik, 100

grafika, 14grafika sieciowa, 99gromadzenie materia ów, 254grupowanie

selektorów, 176znaczników, 44

Hhiper cza, 61

graficzne, 64tekstowe, 62

hosting, 313, 324HSL, 205HSLA, 206HTML5, 21, 23

Iidentyfikatory, 152importowanie arkusza, 140indeksacja strony, 331instalacja

statystyk, 302–305systemu komentarzy, 296szablonu strony, 352WordPressa, 343wtyczki, 366

internet, 9

Jjednostki

bezwzgl dne, 142czasu, 142k towe, 142wzgl dne, 141

j zyk HTML, 21JPG, 115

Kkadrowanie, 247kaskadowe arkusze stylów, 22, 135kaskadowo , 181klasy, 153klient FTP, 15kod ród owy, 22kodowanie UTF-8, 27kolejno nak adanych elementów,

243kolor, 143

elementu, 209obramowania, 228przezroczysty, 103t a, 209

kolumna, 73lewa, 264prawa, 266

komentarze, 97, 295kompresja

bezstratna, 101LZW, 102

komunikatorGadu-Gadu, 299Tlen, 299

konfiguracjastatystyk, 302WordPressa, 350

kontrolaefektów, 337pustej przestrzeni, 190pustych komórek, 236

kotwice, 69krzy owanie znaczników, 24

Llinia pozioma, 42listy, 38, 201

definicji, 39mailingowe, 324numerowane, 39rozwijane, 88wypunktowane, 39

amanie ci gu znaków, 188czenie

nag ówków i akapitów, 37plików, 71

Mmapa

odsy aczy, 65, 67, 134strony, 333

marginesy, 220media spo eczno ciowe, 338menu nawigacyjne, 333, 334metaznaczniki, 327model

HSL, 205HSLA, 206RGBA, 208

modelebarw, 205przezroczysto ci, 205





Nnag ówek, 35, 261, 330nag ówek strony, 27, 30nak adanie elementów, 243nazwa domeny, 325nazwy plików, 285

Oobramowanie, 75, 218, 225

kolor, 228szeroko , 227zaokr glenie naro ników, 228

obrazki, 52odst py

mi dzy liniami, 187mi dzy literami, 186mi dzy wyrazami, 187w tabeli, 235

odsy acz, 63pocztowy, 64do ramek, 72

odtwarzaniefilmu, 56pliku audio, 58

okre lanie pozycji, 242opis

linków, 331strony, 29

oprogramowanie, 13optymalizacja

plików GIF, 114plików JPG, 116stron, 324

osadzanieczcionki, 198filmów, 54ramki, 59stylów, 137

otwieranie okna, 307

Ppakiet Google Webmaster Tools, 334paleta kolorów, 83pasek statusu, 309platforma WordPress, 343plik index.html, 31pliki

.gif, 52

.jpg, 52

.mp3, 57

.mp4, 54

.ogg, 54, 57

.png, 52

.wave, 57

audio, 57strony, 22

p ywanie elementów, 244PNG, 117podgl d ród a dokumentu, 22podpis

poczty elektronicznej, 323tabeli, 78, 237

pojedynczy wpis, 270pole typu

input, 81, 85select, 89, 91textarea, 92

polecenie@import, 140background-attachment, 213background-color, 209background-image, 211background-repeat, 214color, 209dir, 145letter-spacing, 186list-style-position, 203overflow, 249padding-left, 224robots, 31word-spacing, 187

pomniejszanie obrazka, 53powielanie t a, 214powi kszanie obrazka, 53pozycjonowanie

bezwzgl dne, 239elementów, 238statyczne, 239t a, 215ustalone, 240wzgl dne, 239

prawo autorskie, 16programista, 100promocja serwisu, 323protokó FTP, 15przeplot, 107przesy anie tre ci formularza, 94przezroczysto , 106, 209przyciski

o nieregularnych kszta tach, 129owalne, 124mediów spo eczno ciowych, 340prostok tne, 124

pseudoelement:first-letter, 174:first-line, 174:after, 175:before, 175

pseudoklasa:link, 155:visited, 155:hover, 155

:active, 158:lang, 158:first-child, 159:target, 159:enabled, 160:disabled, 160:root, 161:nth-child(), 162:nth-of-type(), 165:last-child, 167:first-of-type, 168:last-of-type, 169:only-child, 170:only-of-type, 171:empty, 172:not(), 173

publikacjaanimacji Flash, 58filmów, 54obrazków, 52plików audio, 57strony, 317tre ci, 360

Rramki osadzone, 59ramy formularza, 80redukcja

palety kolorów, 112rozmiaru grafiki, 117

rejestracja domeny, 313, 319RGBA, 208rodzaje pozycjonowania, 238rodzina czcionek, 192rozmiar

czcionki, 194nag ówka, 35obrazka, 118t a, 212

rozszerzenia plików, 22

Ssekcja

Artyku y, 278Kontakt, 284Ksi ki, 272O mnie, 279Przyjazne strony, 279Sklep, 281

sekcje dokumentu, 32selektor

atrybutu, 150, 151ogólnego rodze stwa, 149




Skorowidz 375

selektorydziecka, 147potomka, 146proste, 144rodze stwa, 148uniwersalne, 145

serwerydarmowe, 18p atne, 18

serwisy spo eczno ciowe, 338skalowanie obrazka, 54skrypty

dodawanie strony, 309drukowanie strony, 308nowe okno, 307strona startowa, 309wczytywanie arkusza, 310zamykanie okna, 308zmiana t a, 309

s owa kluczowe witryny, 29sonda, 299statyczne strony, 352statystyki, 301sterowanie wymiarowanymi

elementami, 249stopka, 34, 261strona

g ówna, 258kodowa, 27startowa, 309WWW, 10

strukturadokumentu, 25, 26strony, 34, 258, 358witryny, 257

stylbackground-clip, 218background-image, 217background-position, 215background-size, 212border-collapse, 235border-radius, 229obramowania, 226opacity, 209overflow, 249quote, 251resize, 232text-shadow, 191text-transform, 190word-wrap, 188

styleczcionki, 197wewn trzne, 137zewn trzne, 138

SVG, 120

systemCMS, 343komentarzy Disqus, 298nawigacji, 332

szeroko , 231

Ttabela, 72, 74, 232

generowanie, 237obramowanie, 235odst py, 235podpis, 237puste komórki, 236

tabele niesymetryczne, 76tamowanie elementów, 246techniki promocji, 323technologia Flash, 58, 120tekst

cieniowanie, 191dekoracje, 189amanie ci gu znaków, 188

odst py mi dzy liniami, 187odst py mi dzy literami, 186odst py mi dzy wyrazami, 187przekszta cenia, 190wci cie, 185wyrównanie, 183, 184zawijanie, 203

testowanie projektu, 286testy

rozdzielczo ci, 287w ró nych przegl darkach, 286zgodno ci, 290

t o, 211powielanie, 214pozycjonowanie, 215wieloelementowe, 217zatrzymanie, 212

transparentno , 103tre , 329tworzenie

animowanych GIF-ów, 109blogu, 352formularzy, 90projektu, 253przycisku, 124–130rysunku, 104, 105sondy, 299, 300struktury strony, 357

typylist, 201pól, 81

tytu strony, 28

Uuk ad strony, 356ukrywanie elementów, 248us ugi, 295utrzymanie strony, 313u ywanie

cudzys owów, 25ma ych liter, 25

Wwaga czcionki, 196walidacja kodu HTML, 291walidator, 21, 22wariant czcionki, 198warstwy, 129, 242wci cie, 185wcinanie kodu, 74wczytywanie arkusza, 310webmaster, 99wieloelementowe t o, 217witryna, 10w a ciwo ci

czcionki, 192, 200list, 200marginesów, 223obramowania, 230tekstu, 182t a, 219

WordPress, 343wpis, 270wprowadzanie danych, 82wtyczki, 366wybór

serwera, 313us ugodawcy, 17

wyg adzanie kraw dzi, 121wymiarowanie tabel, 75wypunktowanie listy, 203wyrównanie tekstu, 183wyró nienia, 330wysoko , 231wysy anie poczty, 64

Zzachowanie formatowania, 41zagnie d anie

list, 40tabel, 77

zak adanie konta, 315zamykanie

okna, 308znaczników, 24





zaokr glenie naro ników, 228zapis

obrazka, 108, 134polskich znaków, 27w a ciwo ci czcionki, 200w a ciwo ci list, 204w a ciwo ci marginesów, 223w a ciwo ci obramowania, 230w a ciwo ci t a, 219

zastosowanie kotwicy, 70zatrzymanie t a, 212zawijanie tekstu, 203zdobywanie pozycji, 337zmiana

arkusza stylów, 140rozdzielczo ci ekranu, 289rozmiaru elementu, 231rozmiaru grafiki, 119systemu nawigacji, 334t a, 309zawarto ci paska statusu, 309

znacznik, 25<a>, 62<abbr>, 46<area />, 65<article>, 34<aside>, 34<audio>, 57<b>, 49<base />, 32<blockquote>, 38<br />, 50<cite>, 45

<code>, 47<dd>, 39<del>, 51<dfn>, 46<div>, 35, 44<dl>, 39<dt>, 39<em>, 44<embed>, 59<fieldset>, 95<figcaption>, 35, 43<figure>, 35, 43<footer>, 34<form>, 80<h1>, 35<head>, 27<header>, 34<html>, 27<hr />, 42<i>, 49<iframe>, 59<img />, 52, 68<input />, 81<ins>, 51<kbd>, 48<label>, 95<legend>, 95<li>, 39<link />, 32<map>, 65<mark>, 49<meta />, 29, 31, 327<meter>, 96<nav>, 34

<ol>, 39<optgroup>, 91<option>, 90<output>, 96<p>, 36, 41<pre>, 35, 41<progress>, 96<q>, 45<samp>, 48<section>, 34<small>, 45<span>, 50<strong>, 45<sub>, 48<sup>, 48<table>, 74<tbody>, 78<textarea>, 92<tfoot>, 78<thead>, 78<time>, 47<title>, 28<tr>, 74<ul>, 39<var>, 48<video>, 55<wbr />, 51

znacznikiHTML5, 33porz dkowe, 95

znaki specjalne, 25




http://program-partnerski.helion.pl

Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 9. Promocja serwisu Ka *dy twórca...

Documents

Transcript of Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 9. Promocja serwisu Ka *dy twórca...