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.

Użycie funkcji include [php]

inkludowanie plików php

inkludowanie plików php

Poprzednio skupiłem się nieco na sprawach związanych z pozycjonowaniem stron WWW, dziś radykalnie zmienię temat i poruszę całkiem nowy, o którym jeszcze nie było mowy.

Wielu projektantów stron internetowych nie znających w ogóle dynamicznego języka programowania widząc .php na końcu pliku od razu się zniechęca.

Też kiedyś do nich należałem, jednakże zacząłem używać języka PHP nie znając go prawie wcale. Po pierwsze miałem zamiar umieścić formularz kontaktowy na moim dawnym portfolio. Jak każdy dobrze wie, nie można zrobić tego w pospolitym języku HTML. Wtedy po raz pierwszy musiałem się zmierzyć z moim niewidzialnym przeciwnikiem, który okazał się jednak moim dobrym przyjacielem.

Przyniósł mi on wiele korzyści idących z używania go:

  1. Zmniejszenie wielkości plików.
  2. Optymalizacja moich witryn.
  3. Brak uciążliwego kopiowania stałych elementów strony.
  4. Więcej przyjemności z kodowania strony WWW.

A wszystko za sprawą jednej, banalnie prostej funkcji:

<?php 
include ('./head.html')
?>

Nie robi on nic innego jak wczytuje zawartość pliku podanego w nawiasach. Myślę, że już przez myśl przewinęło Ci się kilka pomysłów na jego wykorzystanie.

Dla mnie stanowi on nieodłączną część w projektowaniu stron WWW. Używam go do inkludowania stałych elementów takich jak:

  1. Top strony.
  2. Sekcja head strony.
  3. Przyciski strony.
  4. Panele boczne.
  5. Stopka.
  6. I inne większe części kodu, które wykorzystuję na stronię więcej niż 2-3 razy.

Przykładowy plik top.html wygląda tak:

<meta name="description" content="Opis strony." />
<meta name="keywords" content="Słowa kluczowe strony"/>
 
<meta name="Author" content="Grzegorz Bielak" />
<meta name="copyright" content="Grzegorz Bielak, http://grzegorzbielak.pl/" />
<meta http-equiv="content-language" content="pl" />
 
<link rel="shortcut icon" href="./images/favicon.ico" />

Mam nadzieję, że wiele osób zrobi pożytek z tej funkcji.

Lista wartościowych precli

precle lista zbiór

precle lista zbiórW marketingu internetowym coraz większe znaczenie zaczynają mieć tak zwane precle, czyli katalogi artykułów pozycjonujących.

Postanowiłem w związku z tym stworzyć listę precli z uwzględnieniem pagerank’u danej strony.

Będę je listować od najwyższego pagerank’u, który umieszczę za linkiem po myślniku.

Istnieje system, który dodaje artykuły automatycznie po wymieszaniu słów kluczowych. Niestety nie jest on dość skuteczny, bo w większości stron tego typu należy się najpierw zarejestrować, a następnie pobrać hasło z poczty e-mail. Jest to zbyt skomplikowany zabieg dla robota napisanego jakimkolwiek języku programowania.

A oto lista precli:

  1. http://artelis.pl/ – 4
  2. http://artykuly.com.pl/ – 4
  3. http://sbart.pl/ – 4
  4. http://www.webshock.com.pl/ – 3
  5. http://www.artykuly.net.pl/ – 3
  6. http://www.pomaton.com.pl/ – 3
  7. http://www.shout.pl/ – 3
  8. http://www.fachwissen-katalog.de/ - 3
  9. http://www.publikuj.org/ – 3
  10. http://www.lip.pl/ - 2
  11. http://www.najlepsza-pozyczka.pl/ - 2
  12. http://seoreklama.pl/katalog/ - 2

Lista precli będzie aktualizowana. Byłbym wdzięczny za podsyłanie nowych adresów w komentarzach.

SEO Adder – narzędzie do pozycjonowania

pozyskiwanie linków na stronę

pozyskiwanie linków na stronęOd pewnego czasu mam dostęp do świetnego narzędzia służącego do pozycjonowania stron WWW.

Program pozyskuje ogromną ilość linków do naszej strony internetowej oraz monitoruje jej pozycję w najpopularniejszej wyszukiwarce w Polsce, jaką jest Google.

Ponadto istnieje możliwość dodawania wpisów do precli, a jest to jeden z najskuteczniejszych sposobów podnoszenia pozycji naszej witryny w wynikach wyszukiwania, dlatego, że artykuł taki nasycić możemy ogromną ilością słów kluczowych a dozwolona ilość linków z atrybutem dofollow to aż 3.

Ponadto rozbudowany on jest o takie narzędzia jak walidacja kodu HTML/CSS czy sprawdzanie pagerank’u strony i budowanie mapy witryn.

Chciałbym po krótce powiedzieć z czego składają się poszczególne zakładki programu SEO Adder.

  1. Na stronie głównej znajdują się na niej komunikaty o poprawności konfiguracji stron, nowości w programie SEO Adder i ogólne statystyki dotyczące działań oprogramowania. Warto dodać, że pojawiła się wersja mobilna strony, więc możemy już śledzić wyniki naszych witryn za pomocą telefonu komórkowego.
  2. Zakładka „Twoje strony” jest jedną z najistotniejszych. To tutaj znajduje się lista naszych stron wraz z ilością dodanych wpisów do katalogów. Ponadto, z tego właśnie miejsca przechodzimy do „Monitoringu” witryn, w którym znajdują się szczegółowe informacje dotyczące naszych stron internetowych.
  3. Następną podstroną jest „Strefa SEM” czyli ogół działań związanych z optymalizacją, pozycjonowaniem oraz kampaniami
    marketingowymi
    w Internecie.
  4. W zakładce „elzba” znajdują się opcje dla przedsiębiorstw.
  5. Natomiast w „Zasoby” znajdziemy listę wszystkich katalogów, precli, wyszukiwarek czy serwerów pingujących.
  6. „Ustawienia” dają nam możliwość zmiany naszych informacji, zarządzania bazą danych Addera oraz ustawienia automatycznego uruchamiana się zadań.

Każdy grafik freelancer i projektant stron WWW powinien zainteresować się tym oprogramowaniem. Jest ono skuteczne i znacznie podnosi pozycję strony WWW.

Promocja mojego portfolio

Grzegorz Bielak - logo

Grzegorz Bielak - logoChciałbym dziś wypromować nieco moje portfolio, którego aktualny wygląd stworzyłem ponad rok temu. Od tamtego czasu nabrało ono wiele funkcjonalności a przede wszystkim doszło wiele nowych prac. W sekcji ukończonych projektów znaleźć możemy kilka ukończonych stron WWW. Dużo prac pojawiło się również na podstronie grafika komputerowa.

Oprócz tego zapraszam również na moją świeżo utworzoną stronę na Facebook’u, znajdziesz ją tu:
http://www.facebook.com/grzegorzbielakdesign

Poniżej przedstawić bym chciał kilka ostatnio utworzonych prac – kilka layotów stron WWW, kilka prac graficznych oraz wczoraj zaprojektowaną wizytówkę. Mam nadzieję, że się spodobają.

grafik freelancer - grafika

grafik freelancer - strona WWW dla klanu CSgrafik freelancer, tworzenie stron - grafika, fotomontaż

wizytówki - grafik freelancer

wizytówki - grafik freelancer

Schemat strony WWW zgodnej z W3C

standardy w3c

standardy w3cOstatnim razem pisałem o optymalizacji stron WWW, jej inną formą jest zachowanie ówczesnych standardów i co się z tym wiąże identyczne jej wyświetlanie we wszystkich przeglądarkach.

Aby sprawdzić czy nasza strona internetowa ma poprawny kod przeprowadzić musimy walidację kodu HTML. Zrobić to możemy na tej stronie. Arkusz styli kaskadowych CSS sprawdzić możemy natomiast pod tym adresem. Aby spełnić wymagania walidatora oprócz poprawnego kodu musimy również prawidłowo zdefiniować znacznik doctype oraz kodowanie strony. Wielu projektantów stron WWW ma z tym pewne problemy a wystarczy stworzyć sobie jeden schemat i stosować go we wszystkich projektach.

Poniżej przedstawię gotową strukturę strony, która w 100% zgodna jest ze standardami w3c.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
sekcja head naszej strony ...
</head>
 
<body>
treść naszej strony ...
</body>
</html>

Oprócz tego należy pamiętać o slashu na końcu znaczników meta. Poniżej przedstawię prawidłowy zapis niektórych elementów sekcji nagłówka strony. Najlepsze i niezawodne kodowanie dla stron WWW to UTF-8 (gdy istnieje opcja bez BOM należy ją zaznaczyć – jest tak w np. Notepadzie++).

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- kodowanie UTF-8 -->
 
<meta name="keywords" content="słowa kluczowe"/>
<meta name="Author" content="Grzegorz Bielak" />
<meta name="copyright" content="Grzegorz Bielak, http://webdesign.grzegorzbielak.pl/" />

Warto też zaznaczyć jak należy w tym przypadku stosować znaczniki nowej linii. Poniżej przedstawię ich poprawne zastosowanie.

<br /> <!-- jest to pojedyncze przejście do nowej linii -->
<br></br> <!-- a to jest przejście o 2 linie -->
<!-- nie wolno stosować --> <br><br><br> <!-- gdyż wg walidatora jest to błąd -->

Optymalizacja kodu strony WWW

optymalizacja kodu

optymalizacja koduOstatnim razem pisałem o sposobach pozycjonowania stron WWW, chciałbym nieco cofnąć się w działaniach dotyczących SEO i powiedzieć nieco o tym co możemy zrobić bezpośrednio w naszej witrynie, aby wyniki wyszukiwania były wyższe.

Mowa o niczym innym jak o optymalizacji kodu. Postaram się wyjaśnić najważniejsze sprawy z tym związane.

Powiem o tym, jak wypełnić meta tagi, opis czy tytuł naszej strony. Pokaże kilka opcjonalnych choć niekoniecznych linijek. Oprócz tego omówię po krótce sposoby wyróżniania tekstu w treści, jak tworzyć mapy witryn.

Zacznijmy więc od sekcji head. Należy to skupić się najbardziej na tytule strony [jest on wyświetlany na pasku przeglądarki jak i w nagłówku wyniku Google]. Dobrze umieścić w nim ważne dla strony i SEO słowa kluczowe połączone z nazwą naszej strony, np. TwojeFilmy.org – filmy online, z lektorem, z napisami.

<meta name="keywords" content="części samochodowe, kołpaki, deski rozdzielcze, okna samochodowe, blachy samochodowe" /> <!-- nie stosować zbyt dużej ilośći słów kluczowych -->
<meta name="description" content="www.DobreCzesci.pl - sprzedajemy takie części samochodowe jak: kołpaki, okna, blachy i deski rozdzielcze. Oferujemy niskie ceny i zadowolenie klienta." /> <!-- wyświetlać się będzie w opisie pod linkiem w Google -->
<title>Części samochodowe - blachy, deski rozdzielcze, kołpaki, okna</title>

Oprócz tego zastosować możemy takie atrybuty jak: robots, author, copyright czy content-language:

<meta name="robots" content="index, follow"> <!-- index, follow -->
<meta name="author" content="Jan Kowalski" /> <!-- autor strony -->
<meta name="copyright" content="Jan Kowalski, http://przykladowastrona.pl/" /> <!-- prawa autorskie -->
<meta http-equiv="content-language" content="pl" /> <!-- domyślny język witryny -->

Wyróżnikami w tekście są takie znaczniki jak [wg siły]:

  1. <h1></h1>, <h2></h2> itd. [nagłówki strony - są pogrubione i większe],
  2. <strong></strong> [są pogrubione],
  3. <b></b> [również są pogrubione, lecz dużo słabsze niż 2 powyższe],
  4. <em></em> [pochyła - silniejsze niż ><i></i>],

Oprócz tego ważne jest też linkowanie wewnętrzne, czyli umieszczanie linków do innych podstron serwisu na jak największej ilość wpisów itd.

Ważna jest również mapa witryny, która pomaga Google określić strukturę strony i priorytet dla poszczególnych podstron. Szczegółowo omówię ją w innym wpisie. Więcej o optymalizacji i pozycjonowaniu znajdziesz na mojej stronie dotyczącej tworzenia stron WWW.

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