czwartek, 16 czerwca 2011

Sprytna galeria czyli Lightbox 2.0

Dzisiaj chciałbym przedstawić małą sprytną galerię. Nazywa się Lightbox (nazwa pochodzi zapewne od sposobu wyświetlania zdjęć - o tym za chwilę). Pewnie spotkałeś się nie raz z tym, że jeśli klikasz miniaturkę zdjęcia na stronie internetowej to w efektowny sposób pojawia się duże zdjęcie.



Przykład działania skryptu na stronie www.tokwiaciarnia.pl

Najprawdopodobniej webmaster tej strony zastosował galerię lightbox. Na jej temat zdania są podzielone. Niektórzy mówią, że jest to wspaniały skrypt, inni że jest denerwujący i nie powinien być stosowany. Nie mniej jednak jest to ciekawy przykład zastosowania javy, który w prosty sposób możesz zaimplementować do własnej strony. Dalej pokażę Ci jak to zrobić.

Krok 1.
Pobierz skrypt Lightbox ze strony: http://www.huddletogether.com/projects/lightbox2/#download

Rozpakuj i umieść pliki na serwerze w katalogu głównym naszej strony.
Ważne: katalogi images oraz js muszą pozostać w katalogu głównym to znaczy tam gdzie znajduje się strona na której ma być zainstalowana galeria.

Krok 2.
W sekcji <HEAD> swojej strony wstawiasz następujący kod:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Krok 3.
Również w sekcji <HEAD> wstawiasz kod:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

lub jeśli twoja strona korzysta z kaskadowych arkuszy styli (CSS) możesz skopiować zawartość pliku lightbox.css do swoich styli.

Krok 4.
Dodaj atrybut rel="lightbox" do linku w którym chcesz wykorzystać galerię lightbox. Na przykład:

<a href="images/zdjecie_1.jpg" rel="lightbox">zdjęcie 1</a>

lub z miniaturką:

<a href="images/zdjecie_1.jpg" rel="lightbox"><img src="images/miniaturka_1.gif"></a>

Możesz również dodać atrybut title="tytuł zdjęcia" który wyświetli się na dole ramki wyświetlonego zdjęcia np.:

<a href="images/zdjecie_1.jpg" rel="lightbox" title="zdjęcie 1" ><img src="images/miniaturka_1.gif"></a>

Krok 5.
Możesz stworzyć relacje między zdjęciami w atrybut rel wpisując nazwę grupy między kwadratowymi nawiasami np. rel=lightbox[samochody]:

<a href="images/honda.jpg" rel="lightbox[samochody]">Honda</a>
<a href="images/jaguar.jpg" rel="lightbox[samochody]">Jaguar</a>
<a href="images/porsche.jpg" rel="lightbox[samochody]">Porsche</a>

W ten sposób po kliknięciu np. zdjęcia Honda będzie można przejść do następnych zdjęć z grupy [samochody], ale jeśli na tej samej stronie będzie umieszczona galeria innej grupy np. [rowery] nie będzie można do niej przejść przez wyświetlenie zdjęcia z grupy [samochody] i kliknięcie następne zdjęcie. Przejście do grupy [rowery] będzie możliwe tylko przez zamknięcie zdjęcia z grupy [samochody] i kliknięcie zdjęcia z grupy [rowery].

Nie ma limitu ilości grup oraz zdjęć w danej grupie na jednej stronie.

Krok 6.
Możesz zmodyfikować zawartość styli lightbox:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} // pozycja lightbox'a na ekranie
#lightbox img{ width: auto; height: auto;} // szerokość i wysokość ramki (domyślnie dopasowana do zdjęcia
#lightbox a img{ border: none; } // czy zdjęcie ma być w dodatkowej ramce? (domyślnie nie)

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } // pozycja paska postępu logowania
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } // pozycja nawigacji
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } // zakres działania i wygląd przycisków Previous (poprzednie) i Next (następne)
#prevLink { left: 0; float: left;} // pozycja przycisku Previous (poprzednie)
#nextLink { right: 0; float: right;} // pozycja przycisku Next (następne)
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } // wygląd opisu zdjęcia

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } // szczegóły zdjęcia wygląd
#imageData #caption{ font-weight: bold; } // czcionka tytułu
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } // wygląd numerowania zdjęć
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} // wygląd i umiejscowienie przycisku Close (zamknij)

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } // wygląd ramki zdjęcia (oraz cienia pod ramką)

Jeśli chodzi o przyciski, które są w języku angielskim to można je przerobić na polski. Trzeba tylko pamiętać aby nie zmieniać ich położenia ani nazwy bo mogą przestać działać.

Uwaga: skrypt może nie działać poprawnie na niektórych przeglądarkach. Z tego co mi wiadomo to dobrze radzi sobie na IE oraz Firefoxie. Jednak ma problemy np. na Google Chrome.

środa, 1 czerwca 2011

Webserv Manual czyli jak uruchomić własny serwer www

Jak uruchomić serwer www i własną stronę www?

W tym artykule postaram się odpowiedzieć na powyższe pytanie. Posłużę się programem Webserv. Dzięki temu programowi można uruchomić serwer na własnym komputerze. Posiadając własny serwer mamy możliwość uruchomienia na nim strony internetowej. Pokażę także jak uruchomić na tym serwerze system zarządzania treścią o nazwie Joomla.

1. Informacje

Program WebServ jest serwerem www obsługującym język PHP oraz bazy danych MySql. Program można pobrać ze strony www.webserv.pl

W skład programu wchodzą:
- moduł CesarFTP, który jest serwerem FTP i umożliwia udostępnianie urzytkownikom plików w sieci.
- moduł No-IP, który umożliwia ustanowienie stałego adresu sieciowego dla zmiennego dynamicznego adresu. Jest on klientem serwisu no-ip.com w którym możemy założyć konto i utworzyć domenę.
- moduł phpMyAdmin, który służy do zarządzania bazami danych MySql
- opcjonalnie możemy zainstalować moduł(klienta) do zdalnego sterowania serwerem.

2. Konfiguracja

Po zainstalowaniu programu i uruchomieniu go pojawia się kreator konfiguracji.



1. Klikamy Dalej.



2. Możemy zaznaczyć opcję Uruchamiaj program przy stracie systemu jeśli będziemy często korzystać z serwera. Również możemy wybrać jakie informacje program będzie wyświetlał a także dowiedzieć się co oznaczają różne komunikaty. Klikamy Dalej.



3. Mamy teraz możliwość włączenia zdalnego sterowania serwerem. Jest to bardzo przydatna funkcja, która pozwala na odległość zarządzać programem. Aby zdalne sterowanie było możliwe trzeba pobrać klienta ze strony www.webserv.pl/pobierz-klient.php Klikamy Dalej.



4. W tym etapie możemy zdefiniować adres serwera (w większości przypadków powinien zostać domyślny localhost), e-mail admina oraz port (zostawiamy domyślny). Mamy także możliwość zmiany folderu udostępniania w HTTP oraz folderu z kontami użytkowników do udostępniania w HTTP. Klikamy Dalej.



5. Na tym etapie mamy możliwość włączenia opcji zmienne globalne (zostawiamy domyślne) oraz wyświetlanie błędów składni. Możemy zdefiniować rozmiar danych przesyłanych w formularzach. Na koniec możemy wpisać nazwę serwera SMTP do obsługi maili oraz własny adres e-mail. Klikamy Dalej.



6. Wybieramy rodzaj bazy danych. Dla naszych potrzeb wystarczy domyślna.



7. Tutaj mamy opcję włączenia naszego serwera FTP. Jeśli chcemy udostępniać pliki zaznaczmy opcję Uruchamiaj serwer FTP podczas startu WebServa. Klikamy Dalej.



8. Jeśli korzystamy np. z neostrady lub innej usługi dostępu do Internetu ze zmiennym adresem IP to potrzebujemy moduł No-IP, żeby utworzyć stały adres domenowy. Zaznaczamy opcję Uruchamiaj program No-IP podczas startu WebServa. W dalszej części przedstawię jak używać tego modułu. Klikamy Dalej.



9. Pojawia się okno informujące o zakończeniu kreatora. Gdy klikniemy Zakończ uruchomi się program WebServ i zostaniemy poinformowani komunikatem w prawym dlanym rogu ekrany, że program działa.


3. Moduł No-IP
Gdy korzystamy z usługi neostrada tp lub innej o zmiennym adresie sieciowym wtedy przydatnym narzędziem okazuje się No-IP. Czym jest ta usługa/program?
WebServ posiada wbudowanego klienta No-IP, który komunikuje się z serwisem No-IP.com. Aby skorzystać z usługi musimy zarejestrować się na stronie www.no-ip.com i zdefiniować swoją nazwę domeny dla której zostanie przyporządkowany nasz zmienny adres IP. Potem wpisujemy swoje dane do programu(klienta). Natomiast on łącząc się z serwisem No-IP.com przekazuje mu dane o naszym aktualnym adresie IP, który jest przyporządkowywany do naszej domeny. Opiszę teraz krok po kroku jak uruchomić tę usługę.

1. Wchodzimy na stronę www.no-ip.com, klikamy w zakładkę Services i wybieramy No-IP Free.
2. Wypełniamy formularz rejestracyjny.
3. Odbieramy e-mail i klikamy w link aktywacyjny.
4. Po zalogowaniu klikamy w zakładkę Hosts/Redirects > Add Host aby dodać przekierowanie na nasz adres IP.





5. Następnie wpisujemy nazwę domeny(hosta) w polu Hostname: i wybieramy z listy dalszą nazwę np. no-ip.info. Dalsze pola pozostawiamy bez zmian i klikamy na dole strony przycisk .



6. Jak widzimy na liście domen pojawiła się nasza domena. Jej adres IP będzie się zmieniał tak aby zawsze był aktualny. W tym celu musimy wpisać nasze dane do klienta No-IP, który jest wbudowany w WebServ.
7. Jeśli mamy już uruchomiony WebServ to klikamy podwójnie na ikonkę No-IP i w oknie wybieramy Edit.



8. W okienku które się pojawiło wpisujemy swój login i hasło do serwisu No-IP.com. Klikamy Ok. Następnie zaznaczamy ] przy nazwie domeny aby IP się zaktualizowało. Zamykamy okno No-IP.



9. Aby sprawdzić czy nasze przekierowanie rzeczywiście działa uruchamiamy przeglądarkę i wpisujemy nazwę naszej domeny (tej którą stworzyliśmy w serwisie No-IP.com). Jeśli ukaże nam się strona webserv (powyżej) oznacza to, iż połączenie działa.


4. Udostępnienie strony Internetowej
Aby udostępnić własną stronę internetową pod domeną, którą już utworzyliśmy należy stworzyć plik w języku HTML. Można go stworzyć w notatniku. Oto prosty przykład:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
Moja pierwsza strona na wlasnym serwerze
</body>
</html>

Zapisujemy plik jako index.html i kopiujemy do katalogu httpd w WebServie. Domyślnie jest to katalog C:\Program Files\WebServ\httpd\. Tym samym zastępujemy oryginalny plik index.html z logiem programu webserv.

Aby sprawdzić czy wszystko działa jak należy wpisujemy ponownie nazwę naszej domeny w przeglądarce. Efekt powinien być taki:




5. Konta użytkowników
W programie WebServ jest możliwość tworzenia kont użytkowników i udostępniania i przestrzeni dyskowej np. na strony internetowe. W folderze httpd-users znajdują się foldery oznaczające konta użytkowników. Domyślnie jest konto bartek. Teraz możemy utworzyć stronę www w języku HTML tak jak w poprzednim punkcie z treścią np. strona bartka:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
Strona Bartka
</body>
</html>

Tak jak poprzednio zapisujemy plik jako index.html i przenosimy do katalogu httpd-users\bartek\ usuwając wczśniej wszystkie pliki które się tam znajdują. Efekt po wpisaniu adresu: http://nowa-nazwa.no-ip.info/~bartek/ powinien być następujący:



Możemy oczywiście stworzyć wielu różnych użytkowników, z których każdy będzie miał swój folder i miejsce na naszym serwerze.


6. Instalacja Joomli
Joomla jest tzw. CMS'em czyli systemem zarządzania treścią. W prosty sposób możemy stworzyć własną stronę, nie znając się nawet na języku HTML. Po zalogowaniu możemy dodawać własne artykuły pisząc je tak jak w edytorze tekstowym.

1. Aby zainstalować system Joomla pobieramy ją ze strony http://www.joomla.pl/ i rozpakowujemy plik winrarem. UWAGA! Najnowsza wersja Joomli 1.6 wymaga PHP w wersji 5.2.4 lub wyższej które jest dostępne w WebServ 2.0. Na WebServ 1.3 trzeba wybrać starszą wersję Joomli, która wymaga co najwyżej PHP w wersji 5.1.5.
2. Zanim jednak zainstalujemy CMS Joomla musimy utworzyć bazę danych dla niego. W tym celu uruchamiamy moduł phpMyAdmin do zarządzania bazą danych. Wpisujemy login i hasło (domyślnie login: root, brak hasła).



3. Wybieramy/wpisujemy tak jak powyżej w pola (czerwona ramka) i klikamy Utwórz.



4. Otrzymamy komunikat, że baza danych została utworzona.
5. Teraz przechodzimy z powrotem do strony głównej naszego hosta klikając

6. Utworzymy nowego użytkownika bazy klikając w a następnie
7. Następnie wypełniamy formularz:



8. Nadajemy użytkownikowi wszystkie uprawnienia:



9. Klikamy . Pojawi się komunikat .
Trzeba zapamiętać dane wpisane w formularz, ponieważ będą nam potrzebne do instalacji Joomli.

10. Przenosimy pliki do folderu WebServ\httpd\ (usuwając wcześniej całą zawartość tego folderu) i wpisujemy adres naszej domeny przeglądarce. W tym momencie powinniśmy ujrzeć ekran instalacyjny Joomli.


11. Wybieramy język polski i klikamy



12. Teraz Joomla sprawdza czy mamy spełnione wszystkie wymagania. Jeśli wszystko jest na Tak klikamy , jeśli nie to sprawdźmy i usuńmy ewentualne przeszkody a potem kliknijmy .

13. Następny krok to licencja, którą musumy zatwierdzić, klikamy .



14. Potem wprowadzamy dane potrzebne do komunikacji Joomli z bazą danych MySql i klikamy .

15. Następny krok to Konfiguracja FTP. Nie potrzebujemy konta ftp dla Joomli więc klikamy .



16. Teraz wpisujemy nazwę naszej strony oraz dane: e-mail, hasło i login administratora. Następnie klikamy na przycisk . To pomoże nam w początkowej organizacji serwisu aczkolwiek nie jest wymagane do poprawnego działania. Gdy nie użyjemy tego przycisku nasza strona będzie po prostu jak czysta tablica bez przykładowych artykułów itd. Klikamy .



17. W ostatnim kroku jesteśmy proszeni o usunięcie katalogu instalacyjnego o nazwie INSTALLATION. Jest to konieczne do dalszej pracy z Joomlą. Klikamy .

18. Następnie przechodzimy do panelu sterowania klikając .



19. Logujemy się korzystając z wcześniej zapisanego loginu i hasła.



20. Tak wygląda panel administracyjny systemu Joomla. Aby zobaczyć jak teraz wygląda strona wystarczy kliknąć .



21. Oto efekt naszej pracy. Oczywiście jest możliwość zainstalowania polskiego pakietu językowego a także dodanie odpowiednich wtyczek, zmiana wyglądu itd., ale to już temat na następny manual. Pomoc można znaleźć na polskiej stronie www.joomla.pl .

Mam nadzieję, że powyższy manual był pomocny. Zapraszam na następne.

Pozdrawiam
MIchał Krusiewicz

Własna strona www w 5 minut!

Witaj.

Dzisiaj pokażę jak w prosty sposób możesz stworzyć własną stronę. Do tego celu nie potrzebujesz żadnych programów. Nie musisz też posiadać umiejętności webmastera. Jedyne co musisz posiadać to około 5 minut wolnego czasu i chęć posiadania własnej witryny, bloga lub innego rodzaju strony. Wszystkiego dowiesz się czytając dalej ten post.

Zaczynamy!

Krok 1. Usługi CBA.pl
Wchodzimy na stronę www.cba.pl i rejestrujemy konto. W CBA.pl możemy założyć konto o dosyć dobrych parametrach jak na darmowy hosting. Oto one:
- nieograniczona ilość kont FTP;
- nieograniczona ilość subdomen;
- baza danych MySQL bez limitu wielkości!
- nieograniczony transfer miesięczny;
- aż 1 GB miejsca na Twoją stronę!;
- 2 GB miejsca na skrzynki pocztowe;
- PHP 5.2;
- tryb safe mode wyłączony;
- dostępna funkcja mail();
- baza danych SQLite;
- dostęp do .htaccess;
Posiadacze konta w tym serwisie mogą również skorzystać w wielu darmowych modułów i udogodnień, ale o tym później.

Klikamy w Zarejestruj pod panelem logowania.



Wpisujemy nazwę oraz wybieramy domenę: .cba.pl, c0.pl, y0.pl. Klikamy Dalej.

Krok 2. Rejestracja
Wypełniamy formularz rejestracyjny i klikamy Załóż konto.



Krok 3. Konto utworzone
Zostajemy poinformowani, że konto zostało założone i musimy je aktywować przez e-mail.



Odbieramy pocztę i klikamy w link atywacyjny.



Krok 4. Aktywacja
Logujemy się za pomocą strony podanej w komunikacie. Nazwa użytkownika to nazwa utworzonego adresu www np. forwebs.cba.pl.



Krok 5. Obsługa FTP (można pominąć)
W tym momencie posiadamy już własną domenę, lecz pod jej adresem jest na razie strona usługodawcy. Aby to zmienić logujemy się na tzw. FTP aby wysłać na serwer pliki w języku html, które będą widoczne pod założonym adresem.

W panelu administracyjnym wybieramy Konta FTP. Jak widać posiadamy aktualnie jedno konto o nazwie admin@nazwa.cba.pl. Aby mieć możliwość wysyłania plików na serwer wybieramy Menedżer plików.



W nowym oknie otwiera się klient FTP. Logujemy się używając nazwy konta ftp: admin@nazwa.cba.pl.



Obecnie nasz katalog wygląda tak:



Aby wgrać plik na serwer możemy skorzystać z 3 różnych funkcji: Przyślij (zwykłe), Przyślij Java (upload za pomocą skryptu java), Flash Upload (upload za pomocą skryptu flash). Trzeba pamiętać, że plik index.html (ewentualnie index.php) jest główną stroną która wyświetli się po wpisaniu naszego adresu.

Krok 6. Wybór oprogramowania
Jak już na samym wstępie napisałem, aby mieć własną stronę www w 5 minut nie trzeba być webmasterem. Nie trzeba też czytać Kroku 5, jeśli nie będziemy sami tworzyć kodu strony. Możemy posłużyć się przykładowymi modułami (skryptami), które są dostępne w panelu administracyjnym w zakładce Oprogramowanie.



Jak widać możemy wybrać spośród wielu systemów zarządzania treścią. Popularne systemy to np.:
- Blog Wordpress,
- CMS (systemy zarządzania treścią): Drupal, extreme-fusion, joomla, php-fusion, i wiele innych,
- Forum: phpBB, MyBB, smf i inne,
- Galeria: coppermine, 4images, gallery, cpg,
- Wiki (system wikipedii): dokuwiki, mediawiki.

Krok 7. Instalacja Wordpressa
Postaram się pokazać teraz jak zainstalować najpopularniejsze oprogramowanie dla blogów czyli Wordpress. Jest to system zarządzania treścią bardzo intuicyjny w obsłudze.

Przed instalacją bloga musimy utworzyć tzw. bazę danych SQL, ponieważ praktycznie wszystkie przedstawione powyżej systemy opierają się na zapisywaniu i odczytywaniu informacji z baz danych SQL. Jeśli jest to dla Ciebie niezrozumiałe nie przejmuj się. Nie musisz tego wiedzieć.

Jedyne co musisz zrobić to wybrać opcję Zarządzaj SQL i dodać bazę danych.
Hosting CBA.pl zapewnia nielimitowaną wielkość bazy danych więc, póżniej nie powinno być problemu z przepełnieniem co zdarza się jeśli używamy hostingu, który np. dopuszcza wielkość bazy do 25MB. Zależy to oczywiście od ilości wprowadzonych do bazy informacji.



Klikamy Dodaj bazę SQL i wpisujemy Nazwę użytkownika oraz hasło i klikamy Dodaj. Nazwa naszej bazy to forwebs_cba_pl. Te dane będą potrzebne potem przy instalacji Wordpressa. Otrzymujemy komuniakat Baza SQL pomyślnie utworzona!

Teraz możemy przejść jeszcze raz do zakładki Oprogramowanie. Z listy wybieramy wordpress (lub inny system) i klikamy Dodaj w kolumnie Akcja.



Następnie wybieramy domenę do instalacji Wordpressa. Pole Wprowadź katalog pozostawiamy puste, bo chcemy aby nasz blog wyświetlał się od razu po wpisaniu wybranego adresu. Klikamy Dodaj.



Pojawia się komunikat, który informuje nas, że w tym katalogu został znaleziony plik index.html, który domyślnie jest stroną główną. Wybieramy tak, aby usunąć ten plik i zainstalować Worpressa.



Pojawia się komunikat o instalacji. Oznacza on, że pliki Wordpressa są właśnie kopiowane na serwer. Odczekaj chwilę i kliknij w link pod komunikatem. Po kliknięciu otwiera się screen startowy. Klikamy Zaczynajmy!



Wpisujemy nazwębazy danych (np.forwebs_cba_pl), User Name czyli Nazwę Użytkownika (np.forwebs) oraz hasło. Pozostałe pola zostawiamy bez zmian.



Jeśli wszystkie dane wpiszemy poprawnie wyświetli się powyższy ekran co oznacza, że zostało nawiązane połączenie z bazą danych i możemy przystąpić do instalacji. Klikamy Uruchomienie instalacji.



Na następnym ekranie instalacji wpisujemy Tytuł witryny oraz dane do logowania do konta administratora. Opcjonalnie możemy wpisać e-mail. Klikamy Zainstaluj Wordpressa.



Kiedy otrzymamy powyższy komunikat oznacza to, że Wordpress został zainstalowany i możemy się zalogować klikając Zaloguj się. Potem będziemy się logowac z adresu: forwebs.cba.pl/wp-admin/

Myślę, że większość użytkowników, powinna odnaleźć się wśród opcji Wordpressa. W jednym z następnych manuali pokażę jak z niego korzystać.

Pozdrawiam
Michał Krusiewicz