Na tym blogu znajdziesz mnóstwo informacji o efektywnym tworzeniu stron WWW.

Jeśli chcesz, aby Twoje witryny działały szybciej, lepiej to dobrze trafiłeś.

Pokażę Ci jak tworzyć projekty, które będą się wyświetlać poprawnie na każdej popularnej przeglądarce w sieci. Wiele informacji tyczy się też zagadnienia SEO oraz optymalizacji pod kątem szybkości ładowania się strony WWW.

Sposoby pozycjonowania stron WWW

pozycjonowanie stron

pozycjonowanie stronOstatnim razem opisałem zagadnienie związane z tworzeniem stron WWW, czyli CSS Sprites. Dziś zmienię nieco tematykę i napiszę nieco o pozycjonowaniu stron WWW, a bardziej o narzędziach o sposobach w jaki się to robi.

Tekst jest dla osób, które mają choć najmniejsze pojęcie o SEO. Zacznę od darmowych i zarazem najuciążliwszych i wymagających multum wolnego czasu sposobów na wysoką pozycję naszej strony w wynikach wyszukiwania. Następnie przejdę do znanych mi, gotowych i kompleksowych narzędzi, które „odwalają” po prostu za nas całą robotę. Są one naprawdę świetne, a co za tym idzie nietanie. Najczęściej wykupuję się licencję roczną rzędu 300-500 zł.

Jeśli zaczynamy swoją przygodę z SEO warto skorzystać z darmowych rozwiązań. Do monitorowania naszej pozycji w Google skorzystać możemy z programu Free Monitor for Google [zobacz screen]. Możemy tam dodać b. dużą ilość stron, możemy też zmienić zakres poszukiwań w Google. Możemy też tworzyć własne zaplecze, co jest bardzo czasochłonne, ale niewiele jest dobrych narzędzi do automatycznego generowania stron pod zaplecze [jak już to bardzo drogie]. Niestety z dodawaniem linków do katalogów może być problem [nigdy nie pokonamy konkurencji ręcznie dodając wpisy do katalogów]. Pod tym adresem zaś znajduje się narzędzie, dzięki któremu za jedyne 20 zł pozyskać możemy naprawdę niezłą ilość linków [ja w ciągu 4 miesięcy pozyskałem ich ok. 175 - dobre na początek].

Dla osób, które bardziej poważnie podchodzą do pozycjonowania stron polecam 2 pakiety:

  1. SeoStationscreen ze strony głównej narzędzia.
  2. SeoAdderscreen ze strony głównej narzędzia

Oba narzędzia mają miły dla oka interfejs i świetną funkcjonalność. SeoStation kosztuje 324 zł rocznie, Adder zaś 399.

Wtyczki WordPress, które musisz znać

wtyczki wordPress

wtyczki wordPressWtyczki WordPress to funkcjonalność tego systemu zarządzania treścią, który stawia go ponad konkurencją. W sieci jest tego multum, a programiści chętnie tworzą coraz to nowsze rozwiązania.

Korzystam z WordPress’a już od kilku lat i jestem w stanie rozpisać tu listę swoich ulubieńców.

Na moim portfolio w sekcji zrealizowanych projektów znaleźć możecie kilka stron opartych na WordPress’ie. Choćby ta na której się w chwili obecnej znajdujecie.

Więc do rzeczy. Zacznę od wtyczek oczywistych, opisywanych niejednokrotnie na różnych blogach IT. Mowa tu o takich wtyczkach jak:

  1. All in One SEO Pack – wtyczka do automatycznego tworzenia tytułów, opisów i słów kluczowych stron. Obsługuje wyjątki. Zamiennie używać możemy Platinum SEO Pack które nie różni się od tej pierwszej chyba niczym.
  2. Akismet – jest on automatycznie wgrany w WordPressa i chroni nasz blog od nielubianego przez wszystkich spamu.
  3. XML-Sitemap – wtyczka marzenie. Tworzy ona automatycznie mapę strony w XML, przesyła informację do Google, które natychmiast ją uaktualnia. Ci, którzy blogi posiadają a nie wiedzą co to mapa witryny radzę się tym pojęciem zająć – znacznie poprawi nam ona ilość wejść na stronę,
  4. Captcha - wymaga od użytkownika wykonanie prostych działań typu six * 8 = . Chroni blog przed robotami dodającymi automatycznie komentarze.
  5. HTML Page Sitemap – automatycznie generowana mapa strony HTML.
  6. Shortcode Exec PHP - wtyczka umożliwiająca dodawanie zdefiniowanego wcześniej kodu za pomocą skróconej frazy. Posiada dużo więcej niezbędnych czasem funkcji.
  7. WP Page Numbers – prosta w obsłudze wtyczka tworząca system numerowania stron na blogu.
  8. Yet Another Related Posts Plugin  - świetna wtyczka dodająca do bloga podaną ilość wpisów podobnych. Można umieścić ją w dowolnym miejscu.
  9. WP-Syntax – wtyczka umożliwiająca dodawanie skryptów różnych języków, jej zastosowanie widać w tym poście.
  10. Easing Slider - prosty w obsłudze slider. Zastosowanie widać powyżej.

Myślę, że znalazło się tu kilka nowych pozycji, oprócz tych, które wg mnie są oczywiste. W razie pytań zapraszam do komentowania.

CSS Sprites – grafika strony w jednym pliku

css sprites

css spritesCSS Sprites to bardzo użyteczna sztuczka, wykorzystywana na stronach z dużą ilością ikonek i małych grafik, których osobne i każdorazowe ładowanie się znacznie spowalnia działanie strony.

Na wstępie szybko wyjaśnię na czym polega ta metoda. Tworzymy jeden plik graficzny, w którym umieścimy ikonki dla naszej strony, jako przykład wezmę te obok. Następnie utworzymy divy które odnosić się będą do pozycji w naszym obrazku. Jest to bardzo użyteczne, gdy korzystamy z zmiany grafiki po najechaniu na nią [ :hover ]. Podczas pospolitego wykorzystania :hover zdarza się, że grafika nie ładuje się natychmiastowo [ jest zbyt duża wagowo ] i wygląda to dość nieatrakcyjnie.

Więc do rzeczy:

W pliku html umieszczamy nasze przykładowe divy:

<div class="img1"></div>
<div class="img2"></div>

A w kodzie CSS wykorzystujemy CSS Sprites:

.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;}
.img1:hover{background: url(./img.jpg) -128px 0 no-repeat;}
 
.img2{background: url(./img.jpg) -128px 0px no-repeat; width: 125px; height: 125px;}
.img2:hover{background: url(./img.jpg) 0 0 no-repeat;}

W efekcie img1 będzie pierwszą ikonką zmieniającą się na tą obok niej. A img2 będzie ikonką nr2 zmieniającą się na tą pierwszą.

Wszystko to za sprawą części -128px 0px:

.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;}

Jest ona odpowiedzialna za przesunięcie w pliku i trzeba jej nadać wartość ujemną. -128px oznacza przesunięcie w prawo o 125px, więc jest to oś X. 0px oznacza brak przesunięcia na osi Y.

CSS Sprites

Powered by WordPress | Designed by: NewWpThemes | Thanks to Free WordPress Themes