Archiwum tagu: strona www

Prosty licznik odwiedzin w jQuery

Licznik odwiedzin to miarodajna wartość, która pozwala nam stwierdzić, jaką popularnością cieszy się nasza strona internetowa.

Jak to zrobić? … Hmm

Ilość odwiedzin naszej strony internetowej możemy zliczać korzystając z bazy danych. W takim razie w naszej bazie tworzymy 3-kolumnową tabelę, np. ‘counter’ z kolumnami: ‘click’, ‘unique’, ‘updated’. Każda z nich jest polem typu INT (liczba całkowita).

Następnie, tworzymy w tej tabeli nowy rekord z wartościami “0″ (zero) w każdej kolumnie. Wartości te będą aktualizowane przez króciutki skrypt w PHP podczas odświeżania strony. Aby wykonać zliczanie, aktualizację i wyświetlenie licznika odwiedzin i unikalnych wizyt zastosujemy m.in. COOKIES. Kolumna ‘updated’ może np. posłużyć do wyświetlania ostatniej aktywności na stronie. W przypadku pierwszej wizyty (nowy gość) ciasteczko nie istnieje, więc inkrementujemy wartość w licznku wizyt i odwiedzin. Jak już ciasteczko istnieje, dodajemy jedynie wartość do pola odwiedzin. Wizyta pozostaje taka sama.

Skrypt wygląda następująco:

<?php
session_start();
$result = mysql_query("SELECT `click`, `unique` FROM `counter`");
$row = mysql_fetch_assoc($result);
$click = $row['click'];
$unique = $row['unique'];
if(!isset($_COOKIE["visited"])){
        setcookie("visited", "1", time()+3*3600);
        mysql_query("UPDATE `counter` SET `click`=".++$click.",
        `unique`=".++$unique.", `updated`=".time());
}elseif(isset($_COOKIE["visited"])){
    mysql_query("UPDATE `counter` SET `click`=".++$click.",
    `updated`=".time());
}
print "Wizyt: $unique, odwiedzin: $click";
ob_end_flush();
?>

Bardzo proste :) Powodzenia :)

źródło: designend.net


Kilka zasad pisania w XHTML

Podczas tworzenia stron WWW trafisz na wiele niedogodności. Ponieważ istnieje kilkanaście przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka XHTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez jakąś przeglądarkę. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku, przeglądać w telefonach komórkowych. O wszystkich potrzebach użytkownika musisz pomyśleć!

Pisząc w XHTML większość elementów to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <title> i </title>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <b> i </b> zostanie on pogrubiony (b to skrót od angielskiego słowa bold).

Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <polecenie></polecenie> lub ewentualnie <polecenie />, czyli forma zamknięcia elementów, które w starszym HTMLu nie miały pary, np. <br />.

Elementy XHTML mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do elementu a dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<a href="http://www.projektowanie-stron.szczecin.pl/">
odnośnik do www.projektowanie-stron.szczecin.pl</a>

Polecenia i atrybuty muszą być pisane małymi literami. Wymaga tego język XHTML. W niezalecanym już języku HTML 4.01 i we wcześniejszych, wielkość znaków nie miała znaczenia.

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, jaki obrazek ma wstawić. Element img odpowiada za obrazki (img to skrót od słowa image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich ustalając od razu wymiary obrazka (atrybut width i height) oraz opis alternatywny (atrybut alt)…

<img src="/g/logo.gif" width="120" height="60"
alt="logo serwisu"/>

I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chcesz mieć “klikalny” obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:

<a href="http://www.projektowanie-stron.szczecin.pl"><img
src="/g/logo.gif" width="120" height="60"
alt="logo serwisu" border="0" /></a>

Nie jest to skomplikowane, choć pojawił się kolejny atrybut: border=”0″, który powoduje, że znika ramka otaczająca obrazek (oznaczająca, że obrazek jest odnośnikiem). Nie chcę ramki, bo szpeci logo - dlatego prawie zawsze element img w odnośnikach ma wyłączoną ramkę…

Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego:

<i>kilka <b>przykładowych</i> wyrazów</b>

Element i definiuje przekreślenie, ale zanim został on zamknięty, otwarto element b (pogrubienie), a następnie zamknięto i zamiast b. Są one założone “na krzyż”. Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka może pokazać efekt dobrze… Oto prawidłowa kolejność:

<i>kilka</i> <b><i>przykładowych</i> wyrazów</b>

To nic, że trzeba było użyć kilka razy i, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wielu autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli tworząc stronę…

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) określa polecenie p. Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Jednak, aby poznać wszystkie elementy i atrybuty języka XHTML, potrzeba bardzo dużo czasu. Dobrym treningiem jest podglądanie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem różnych efektów. Ucząc się na przykładach poznasz wiele technik i metod tworzenia stron.

Powodzenia!


Tworzenie strony www

Tworzenie stron internetowych jest zajęciem stosunkowo prostym i bardzo przyjemnym. Podstaw języka XHTML można nauczyć się w kilka godzin, a dosłownie po chwili zbudować najprostszą witrynę. Trzeba tylko pamiętać o przestrzeganiu kilku podstawowych zasad.

Aktualnie obowiązującym językiem służącym do tworzenia stron www jest język XHTML. Język XHTML to po prostu nowsza, aktualnie zalecana wersja języka HTML. Nie jest on ani trudniejszy ani bardziej skomplikowany niż HTML, choć występuje między nimi kilka różnic.

Aby tworzyć strony www nie musisz mieć dostępu do Internetu. Wystarczy przeglądarka stron zainstalowana na Twoim komputerze, np. Internet Explorer. Do pisania stron nadaje się każdy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows aż do specjalistycznych edytorów XHTML/HTML. Dokument zawierający stronę XHTML/HTML powinien mieć rozszerzenie.html lub .htm. Przyjęło się, że główna strona serwisu ma zwykle nazwę index.html (a czasem inaczej, np. default.html). Pozostałe strony, do których można dotrzeć z index.html mogą mieć dowolne nazwy. Jednak muszą być one czytelne i niezbyt długie. W nazwach stron ważna jest wielkość liter. Najlepiej stosuj tylko małe litery, koniecznie bez polskich znaków. Uważaj też na znaki specjalne (np. %^#$@). Nie stosuj również spacji.

Oto szablon strony ww, który można modyfikować w zależności od  potrzeb. Mając prostego “gotowca” szybko stworzysz dowolną stronę.

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-2" />
<title>tytuł strony</title>
</head>
<body>
 
  <p>
  Moja pierwsza strona WWW!
  </p>
 
</body>
</html>

Powyższy szablon to niezbędne minimum, a dla większości wszystkich polskich witryn w Internecie wspomniana konstrukcja jest standardem.

Pierwsza linijka informuje przeglądarkę, że strona jest zgodna z językiem XHTML kodowanym w standardzie ISO-8859-2. !DOCTYPE określa wariant języka XHTML (standardem jest wersja XHTML 1.1). Następnie informujemy przeglądarkę, że jest to dokument XHTML/HTML umieszczając całą treść dokumentu w parze elementów: <html> i </html>.

Każda strona ma nagłówek znajdujący się pomiędzy elementami <head> i </head>. Umieszczamy w nim tytuł strony w elementach <title> i </title> i ponownie informację o kodowaniu polskich znaków w ISO-8859-2. Po nagłówku znajduje się część, którą widzimy w oknie przeglądarki - określają ją elementy <body> i </body>. Tu znajduje się tekst, grafika, odnośniki, tabele i inne rzeczy.

Skopiuj zawartość do edytora tekstu, zapisz wszystko na dysku pod nazwą index.html i zobacz, jak wygląda strona w przeglądarce. W zasadzie już masz swoją pierwszą stronę…

Jednak, aby wprawnie posługiwać się językiem XHTML niezbędna jest  praktyka. Takie same strony można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć je lepiej i szybciej, tak, aby dobrze prezentowały się w każdej przeglądarce i były proste do modyfikowania. Polecam, więc eksperymentowanie, testowanie, sprawdzanie efektów w różnych przeglądarkach i ciągłe podnoszenie swoich umiejętności.

Więcej na temat tworzenia stron www i pisania w XHTML w następnym artykule.