tag:blogger.com,1999:blog-54884098753880226552024-02-08T03:49:14.244-08:00for Webs dla webmasterów - porady, skrypty, wskazówkidla webskich webmasterówMichał Krusiewiczhttp://www.blogger.com/profile/04833551606007818437noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-5488409875388022655.post-9962209659416244892011-06-16T15:13:00.000-07:002011-06-16T15:13:12.691-07:00Sprytna galeria czyli Lightbox 2.0Dzisiaj 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. <br>
<br>
<div align="Center">
<img src="http://mkr9.info/forwebs/img/lightbox/lightbox.jpg" border=0 height=242 width=400><br>
<br>
Przykład działania skryptu na stronie <a href="http://www.tokwiaciarnia.pl" target="_blank">www.tokwiaciarnia.pl</a><br>
</div>
<br>
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ć.<br>
<br>
<b>Krok 1.</b><br>
Pobierz skrypt Lightbox ze strony: <a href="http://www.huddletogether.com/projects/lightbox2/#download" target="_blank">http://www.huddletogether.com/projects/lightbox2/#download</a><br>
<br>
Rozpakuj i umieść pliki na serwerze w katalogu głównym naszej strony. <br>
<b>Ważne:</b> katalogi <b>images</b> oraz <b>js</b> muszą pozostać w katalogu głównym to znaczy tam gdzie znajduje się strona na której ma być zainstalowana galeria. <br>
<br>
<b>Krok 2.</b><br>
W sekcji <b><HEAD></b> swojej strony wstawiasz następujący kod:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<script type="text/javascript" src="js/prototype.js"></script><br>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><br>
<script type="text/javascript" src="js/lightbox.js"></script><br>
</td>
</table>
<br>
<b>Krok 3.</b><br>
Również w sekcji <b><HEAD></b> wstawiasz kod:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><br>
</td>
</table>
<br>
lub jeśli twoja strona korzysta z kaskadowych arkuszy styli (CSS) możesz skopiować zawartość pliku <b>lightbox.css</b> do swoich styli.<br>
<br>
<b>Krok 4.</b><br>
Dodaj atrybut <b>rel="lightbox"</b> do linku w którym chcesz wykorzystać galerię lightbox. Na przykład:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<a href="images/zdjecie_1.jpg" rel="lightbox">zdjęcie 1</a><br>
</td>
</table>
<br>
lub z miniaturką:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<a href="images/zdjecie_1.jpg" rel="lightbox"><img src="images/miniaturka_1.gif"></a><br>
</td>
</table>
<br>
Możesz również dodać atrybut <b>title="tytuł zdjęcia"</b> który wyświetli się na dole ramki wyświetlonego zdjęcia np.:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<a href="images/zdjecie_1.jpg" rel="lightbox" title="zdjęcie 1" ><img src="images/miniaturka_1.gif"></a><br>
</td>
</table>
<br>
<b>Krok 5.</b><br>
Możesz stworzyć relacje między zdjęciami w atrybut rel wpisując nazwę grupy między kwadratowymi nawiasami np. <b>rel=lightbox[samochody]</b>:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
<a href="images/honda.jpg" rel="lightbox[samochody]">Honda</a><br>
<a href="images/jaguar.jpg" rel="lightbox[samochody]">Jaguar</a><br>
<a href="images/porsche.jpg" rel="lightbox[samochody]">Porsche</a><br>
</td>
</table>
<br>
W ten sposób po kliknięciu np. zdjęcia <b>Honda</b> będzie można przejść do następnych zdjęć z grupy <b>[samochody]</b>, ale jeśli na tej samej stronie będzie umieszczona galeria innej grupy np. <b>[rowery]</b> nie będzie można do niej przejść przez wyświetlenie zdjęcia z grupy <b>[samochody]</b> i kliknięcie następne zdjęcie. Przejście do grupy <b>[rowery]</b> będzie możliwe tylko przez zamknięcie zdjęcia z grupy <b>[samochody]</b> i kliknięcie zdjęcia z grupy <b>[rowery]</b>.<br>
<br>
Nie ma limitu ilości grup oraz zdjęć w danej grupie na jednej stronie.<br>
<br>
<b>Krok 6.</b><br>
Możesz zmodyfikować zawartość styli lightbox:<br>
<br>
<table style="color: #9496A3; background-color: #3D3E47">
<td>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} <b>// pozycja lightbox'a na ekranie</b><br>
#lightbox img{ width: auto; height: auto;} <b>// szerokość i wysokość ramki (domyślnie dopasowana do zdjęcia</b><br>
#lightbox a img{ border: none; } <b>// czy zdjęcie ma być w dodatkowej ramce? (domyślnie nie)</b><br>
<br>
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }<br>
#imageContainer{ padding: 10px; }<br>
<br>
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } <b>// pozycja paska postępu logowania</b><br>
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }<b> // pozycja nawigacji</b><br>
#imageContainer>#hoverNav{ left: 0;}<br>
#hoverNav a{ outline: none;}<br>
<br>
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } <b>// zakres działania i wygląd przycisków Previous (poprzednie) i Next (następne)</b><br>
#prevLink { left: 0; float: left;} <b>// pozycja przycisku Previous (poprzednie)</b><br>
#nextLink { right: 0; float: right;} <b>// pozycja przycisku Next (następne)</b><br>
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }<br>
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }<br>
<br>
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }<b> // wygląd opisu zdjęcia</b><br>
<br>
#imageData{ padding:0 10px; color: #666; }<br>
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } <b>// szczegóły zdjęcia wygląd</b> <br>
#imageData #caption{ font-weight: bold; } <b>// czcionka tytułu</b><br>
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } <b>// wygląd numerowania zdjęć </b> <br>
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} <b>// wygląd i umiejscowienie przycisku Close (zamknij)</b><br>
<br>
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } <b>// wygląd ramki zdjęcia (oraz cienia pod ramką)</b><br>
</td>
</table>
<br>
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ć.<br>
<br>
<b>Uwaga:</b> 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.
<br>Michał Krusiewiczhttp://www.blogger.com/profile/04833551606007818437noreply@blogger.com1tag:blogger.com,1999:blog-5488409875388022655.post-78250198787662236632011-06-01T14:58:00.000-07:002011-06-01T14:58:35.025-07:00Webserv Manual czyli jak uruchomić własny serwer www<b>Jak uruchomić serwer www i własną stronę www?</b><br>
<br>
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.<br>
<br>
<b>1. Informacje</b><br>
<br>
Program WebServ jest serwerem www obsługującym język PHP oraz bazy danych MySql. Program można pobrać ze strony <a href="http://www.webserv.pl" target="_blank">www.webserv.pl</a> <br>
<br>
W skład programu wchodzą: <br>
- moduł CesarFTP, który jest serwerem FTP i umożliwia udostępnianie urzytkownikom plików w sieci.<br>
- 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ę.<br>
- moduł phpMyAdmin, który służy do zarządzania bazami danych MySql<br>
- opcjonalnie możemy zainstalować moduł(klienta) do zdalnego sterowania serwerem.<br>
<br>
<b>2. Konfiguracja</b><br>
<br>
Po zainstalowaniu programu i uruchomieniu go pojawia się kreator konfiguracji.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv1.jpg" border=0 height=313 width=500><br>
<br>
1. Klikamy <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv2.jpg" border=0 height=315 width=500><br>
<br>
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 <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv3.jpg" border=0 height=315 width=500><br>
<br>
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 <a href="http://www.webserv.pl/pobierz-klient.php" target="_blank">www.webserv.pl/pobierz-klient.php</a> Klikamy <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv4.jpg" border=0 height=315 width=500><br>
<br>
4. W tym etapie możemy zdefiniować adres serwera (w większości przypadków powinien zostać domyślny <b>localhost</b>), e-mail admina oraz port (zostawiamy domyślny). Mamy także możliwość zmiany <b>folderu udostępniania w HTTP</b> oraz <b>folderu z kontami użytkowników do udostępniania w HTTP</b>. Klikamy <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv5.jpg" border=0 height=312 width=500><br>
<br>
5. Na tym etapie mamy możliwość włączenia opcji <b>zmienne globalne</b> (zostawiamy domyślne) oraz <b>wyświetlanie błędów składni</b>. 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 <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv6.jpg" border=0 height=313 width=500><br>
<br>
6. Wybieramy rodzaj bazy danych. Dla naszych potrzeb wystarczy domyślna.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv7.jpg" border=0 height=315 width=500><br>
<br>
7. Tutaj mamy opcję włączenia naszego serwera FTP. Jeśli chcemy udostępniać pliki zaznaczmy opcję <b>Uruchamiaj serwer FTP podczas startu WebServa</b>. Klikamy <b>Dalej</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv7b.jpg" border=0 height=318 width=500><br>
<br>
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ę <b>Uruchamiaj program No-IP podczas startu WebServa</b>. W dalszej części przedstawię jak używać tego modułu. Klikamy <b>Dalej</b>. <br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8.jpg" border=0 height=312 width=500><br>
<br>
9. Pojawia się okno informujące o zakończeniu kreatora. Gdy klikniemy <b>Zakończ</b> uruchomi się program WebServ i zostaniemy poinformowani komunikatem w prawym dlanym rogu ekrany, że program działa.<br>
<br>
<br>
<b> 3. Moduł No-IP</b><br>
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? <br>
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 <a href="http://www.no-ip.com" target="_blank">www.no-ip.com</a> 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ę.<br>
<br>
1. Wchodzimy na stronę www.no-ip.com, klikamy w zakładkę Services i wybieramy No-IP Free.<br>
2. Wypełniamy formularz rejestracyjny.<br>
3. Odbieramy e-mail i klikamy w link aktywacyjny.<br>
4. Po zalogowaniu klikamy w zakładkę Hosts/Redirects > Add Host aby dodać przekierowanie na nasz adres IP.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8b.jpg" border=0 height=172 width=230>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8c.jpg" border=0 height=188 width=173>
<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8z.jpg" border=0 height=188 width=447><br>
<br>
5. Następnie wpisujemy nazwę domeny(hosta) w polu <b>Hostname</b>: i wybieramy z listy dalszą nazwę np. <b>no-ip.info</b>. Dalsze pola pozostawiamy bez zmian i klikamy na dole strony przycisk <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8e.jpg" border=0 height=25 width=98> .<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8d.jpg" border=0 height=120 width=307><br>
<br>
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.<br>
7. Jeśli mamy już uruchomiony WebServ to klikamy podwójnie na ikonkę No-IP <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8f.jpg" border=0 height=26 width=65> i w oknie wybieramy Edit.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8g.jpg" border=0 height=396 width=340><br>
<br>
8. W okienku które się pojawiło wpisujemy swój login i hasło do serwisu No-IP.com. Klikamy <b>Ok</b>. Następnie zaznaczamy <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8h.jpg" alt="]" border=0 height=17 width=18> przy nazwie domeny aby IP się zaktualizowało. Zamykamy okno No-IP.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8i.jpg" border=0 height=164 width=500><br>
<br>
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.<br>
<br><br>
<b>4. Udostępnienie strony Internetowej</b><br>
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:<br>
<br>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"><br>
<html><br>
<head><br>
</head><br>
<body><br>
Moja pierwsza strona na wlasnym serwerze<br>
</body><br>
</html><br>
<br>
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.<br>
<br>
Aby sprawdzić czy wszystko działa jak należy wpisujemy ponownie nazwę naszej domeny w przeglądarce. Efekt powinien być taki:<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8j.jpg" border=0 height=70 width=287><br>
<br><br>
<b> 5. Konta użytkowników</b><br>
W programie WebServ jest możliwość tworzenia kont użytkowników i udostępniania i przestrzeni dyskowej np. na strony internetowe. W folderze <b>httpd-users</b> 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:<br>
<br>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"><br>
<html><br>
<head><br>
</head><br>
<body><br>
Strona Bartka<br>
</body><br>
</html><br>
<br>
Tak jak poprzednio zapisujemy plik jako <b>index.html</b> i przenosimy do katalogu <b>httpd-users\bartek\</b> 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: <br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8k.jpg" border=0 height=63 width=351><br>
<br>
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.<br>
<br><br>
<b>6. Instalacja Joomli</b><br>
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. <br>
<br>
1. Aby zainstalować system Joomla pobieramy ją ze strony http://www.joomla.pl/ i rozpakowujemy plik winrarem. <b>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.</b><br>
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).<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8l.jpg" border=0 height=279 width=409><br>
<br>
3. Wybieramy/wpisujemy tak jak powyżej w pola (czerwona ramka) i klikamy <b>Utwórz.</b><br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8m.jpg" border=0 height=50 width=309><br>
<br>
4. Otrzymamy komunikat, że baza danych została utworzona.<br>
5. Teraz przechodzimy z powrotem do strony głównej naszego hosta klikając <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8n.jpg" border=0 height=19 width=148><br>
<br>
6. Utworzymy nowego użytkownika bazy klikając w <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8o.jpg" border=0 height=16 width=92> a następnie <img src="http://www.mkr9.info/forwebs/img/webserv/webserv8p.jpg" border=0 height=18 width=186><br>
7. Następnie wypełniamy formularz:<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8r.jpg" border=0 height=223 width=490><br>
<br>
8. Nadajemy użytkownikowi wszystkie uprawnienia:<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv8s.jpg" border=0 height=291 width=500><br>
<br>
9. Klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/wykon.jpg" border=0 height=32 width=82>. Pojawi się komunikat <img src="http://www.mkr9.info/forwebs/img/webserv/new.jpg" border=0 height=47 width=250>. <br>
Trzeba zapamiętać dane wpisane w formularz, ponieważ będą nam potrzebne do instalacji Joomli.<br>
<br>
10. Przenosimy pliki do folderu<b> WebServ\httpd\ </b>(usuwając wcześniej całą zawartość tego folderu) i wpisujemy adres naszej domeny przeglądarce. W tym momencie powinniśmy ujrzeć ekran instalacyjny Joomli.<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv12.jpg" border=0 height=105 width=420><br>
<br>
11. Wybieramy język polski i klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67><br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv13.jpg" border=0 height=191 width=390><br>
<br>
12. Teraz Joomla sprawdza czy mamy spełnione wszystkie wymagania. Jeśli wszystko jest na Tak klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67> , jeśli nie to sprawdźmy i usuńmy ewentualne przeszkody a potem kliknijmy <img src="http://www.mkr9.info/forwebs/img/webserv/try.jpg" border=0 height=29 width=141> .<br>
<br>
13. Następny krok to licencja, którą musumy zatwierdzić, klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67> .<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv14.jpg" border=0 height=368 width=210><br>
<br>
14. Potem wprowadzamy dane potrzebne do komunikacji Joomli z bazą danych MySql i klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67> .<br>
<br>
15. Następny krok to Konfiguracja FTP. Nie potrzebujemy konta ftp dla Joomli więc klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67> .<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv15.jpg" border=0 height=387 width=370><br>
<br>
16. Teraz wpisujemy nazwę naszej strony oraz dane: e-mail, hasło i login administratora. Następnie klikamy na przycisk <img src="http://www.mkr9.info/forwebs/img/webserv/load.jpg" border=0 height=24 width=169> . 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 <img src="http://www.mkr9.info/forwebs/img/webserv/next.jpg" border=0 height=32 width=67>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv16.jpg" border=0 height=214 width=500><br>
<br>
17. W ostatnim kroku jesteśmy proszeni o usunięcie katalogu instalacyjnego o nazwie INSTALLATION. Jest to konieczne do dalszej pracy z Joomlą. Klikamy <img src="http://www.mkr9.info/forwebs/img/webserv/webserv17.jpg" border=0 height=26 width=160>.<br>
<br>
18. Następnie przechodzimy do panelu sterowania klikając <img src="http://www.mkr9.info/forwebs/img/webserv/zapl.jpg" border=0 height=32 width=90> .<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv18.jpg" border=0 height=259 width=500><br>
<br>
19. Logujemy się korzystając z wcześniej zapisanego loginu i hasła.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv19.jpg" border=0 height=374 width=500><br>
<br>
20. Tak wygląda panel administracyjny systemu Joomla. Aby zobaczyć jak teraz wygląda strona wystarczy kliknąć <img src="http://www.mkr9.info/forwebs/img/webserv/webserv20.jpg" border=0 height=18 width=73>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/webserv/webserv21.jpg" border=0 height=260 width=500><br>
<br>
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 <a href="http://www.joomla.pl" target="_blank">www.joomla.pl</a> .<br>
<br>
Mam nadzieję, że powyższy manual był pomocny. Zapraszam na następne.<br>
<br>
Pozdrawiam<br>
MIchał Krusiewicz<br>
<br>Michał Krusiewiczhttp://www.blogger.com/profile/04833551606007818437noreply@blogger.com1tag:blogger.com,1999:blog-5488409875388022655.post-80757899539393382832011-06-01T12:18:00.000-07:002011-06-01T15:02:15.785-07:00Własna strona www w 5 minut!Witaj.<br>
<br>
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.<br>
<br>
Zaczynamy!<br>
<br>
<b>Krok 1. Usługi CBA.pl</b><br>
Wchodzimy na stronę <a href="http://www.cba.pl" target="_blank">www.cba.pl</a> i rejestrujemy konto. W CBA.pl możemy założyć konto o dosyć dobrych parametrach jak na darmowy hosting. Oto one:<br>
- nieograniczona ilość kont FTP;<br>
- nieograniczona ilość subdomen;<br>
- baza danych MySQL bez limitu wielkości!<br>
- nieograniczony transfer miesięczny;<br>
- aż 1 GB miejsca na Twoją stronę!;<br>
- 2 GB miejsca na skrzynki pocztowe;<br>
- PHP 5.2;<br>
- tryb safe mode wyłączony;<br>
- dostępna funkcja mail();<br>
- baza danych SQLite;<br>
- dostęp do .htaccess;<br>
Posiadacze konta w tym serwisie mogą również skorzystać w wielu darmowych modułów i udogodnień, ale o tym później.<br>
<br>
Klikamy w <b>Zarejestruj</b> pod panelem logowania.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/rej1.jpg" border=0 height=153 width=500><br>
<br>
Wpisujemy nazwę oraz wybieramy domenę: .cba.pl, c0.pl, y0.pl. Klikamy <b>Dalej</b>.<br>
<br>
<b>Krok 2. Rejestracja</b><br>
Wypełniamy formularz rejestracyjny i klikamy <b>Załóż konto</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/rej2.jpg" border=0 height=589 width=450><br>
<br>
<b>Krok 3. Konto utworzone</b><br>
Zostajemy poinformowani, że konto zostało założone i musimy je aktywować przez e-mail.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/rej3.jpg" border=0 height=105 width=500><br>
<br>
Odbieramy pocztę i klikamy w link atywacyjny.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/rej4.jpg" border=0 height=189 width=479><br>
<br>
<b>Krok 4. Aktywacja</b><br>
Logujemy się za pomocą strony podanej w komunikacie. Nazwa użytkownika to nazwa utworzonego adresu www np. forwebs.cba.pl.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/rej5.jpg" border=0 height=100 width=500><br>
<br>
<b>Krok 5. Obsługa FTP (można pominąć)</b><br>
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.<br>
<br>
W panelu administracyjnym wybieramy <b>Konta FTP</b>. Jak widać posiadamy aktualnie jedno konto o nazwie admin@nazwa.cba.pl. Aby mieć możliwość wysyłania plików na serwer wybieramy <b>Menedżer plików</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel1.jpg" border=0 height=197 width=471><br>
<br>
W nowym oknie otwiera się klient FTP. Logujemy się używając nazwy konta ftp: admin@nazwa.cba.pl.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel2.jpg" border=0 height=344 width=482><br>
<br>
Obecnie nasz katalog wygląda tak:<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel3.jpg" border=0 height=200 width=382><br>
<br>
Aby wgrać plik na serwer możemy skorzystać z 3 różnych funkcji: <b>Przyślij</b> (zwykłe), <b>Przyślij Java</b> (upload za pomocą skryptu java), <b>Flash Upload</b> (upload za pomocą skryptu flash). Trzeba pamiętać, że plik <b>index.html</b> (ewentualnie index.php) jest główną stroną która wyświetli się po wpisaniu naszego adresu. <br>
<br>
<b>Krok 6. Wybór oprogramowania</b><br>
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 <b>Oprogramowanie</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel4.jpg" border=0 height=202 width=500><br>
<br>
Jak widać możemy wybrać spośród wielu systemów zarządzania treścią. Popularne systemy to np.: <br>
- Blog Wordpress,<br>
- CMS (systemy zarządzania treścią): Drupal, extreme-fusion, joomla, php-fusion, i wiele innych,<br>
- Forum: phpBB, MyBB, smf i inne,<br>
- Galeria: coppermine, 4images, gallery, cpg,<br>
- Wiki (system wikipedii): dokuwiki, mediawiki.<br>
<br>
<b>Krok 7. Instalacja Wordpressa</b><br>
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.<br>
<br>
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ć.<br>
<br>
Jedyne co musisz zrobić to wybrać opcję Zarządzaj SQL i dodać bazę danych. <br>
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.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel5.jpg" border=0 height=188 width=500><br>
<br>
Klikamy <b>Dodaj bazę SQL</b> i wpisujemy <b>Nazwę użytkownika</b> oraz hasło i klikamy <b>Dodaj</b>. Nazwa naszej bazy to <b>forwebs_cba_pl</b>. Te dane będą potrzebne potem przy instalacji Wordpressa. Otrzymujemy komuniakat <b>Baza SQL pomyślnie utworzona!</b><br>
<br>
Teraz możemy przejść jeszcze raz do zakładki <b>Oprogramowanie</b>. Z listy wybieramy <b>wordpress</b> (lub inny system) i klikamy <b>Dodaj</b> w kolumnie <b>Akcja</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel6.jpg" border=0 height=142 width=500><br>
<br>
Następnie wybieramy domenę do instalacji Wordpressa. Pole <b>Wprowadź katalog</b> pozostawiamy puste, bo chcemy aby nasz blog wyświetlał się od razu po wpisaniu wybranego adresu. Klikamy <b>Dodaj</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel7.jpg" border=0 height=97 width=459><br>
<br>
Pojawia się komunikat, który informuje nas, że w tym katalogu został znaleziony plik <b>index.html</b>, który domyślnie jest stroną główną. Wybieramy <b>tak</b>, aby usunąć ten plik i zainstalować Worpressa.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel8.jpg" border=0 height=71 width=500><br>
<br>
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 <b>Zaczynajmy!</b><br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m//panel10.jpg" border=0 height=560 width=506><br>
<br>
Wpisujemy <b>nazwębazy danych</b> (np.forwebs_cba_pl), <b>User Name</b> czyli <b>Nazwę Użytkownika</b> (np.forwebs) oraz hasło. Pozostałe pola zostawiamy bez zmian.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel11.jpg" border=0 height=146 width=500><br>
<br>
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 <b>Uruchomienie instalacji</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel12.jpg" border=0 height=443 width=500><br>
<br>
Na następnym ekranie instalacji wpisujemy <b>Tytuł witryny</b> oraz dane do logowania do konta administratora. Opcjonalnie możemy wpisać e-mail. Klikamy <b>Zainstaluj Wordpressa</b>.<br>
<br>
<img src="http://www.mkr9.info/forwebs/img/wsw5m/panel13.jpg" border=0 height=195 width=500><br>
<br>
Kiedy otrzymamy powyższy komunikat oznacza to, że Wordpress został zainstalowany i możemy się zalogować klikając<b> Zaloguj się</b>. Potem będziemy się logowac z adresu: <b>forwebs.cba.pl/wp-admin/</b><br>
<br>
<b>
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ć.<br>
<br>
Pozdrawiam<br>
Michał Krusiewicz<br>
</b>Michał Krusiewiczhttp://www.blogger.com/profile/04833551606007818437noreply@blogger.com3