Jeśli chcesz przygotować nowatorski, ciekawy serwis internetowy, skorzystaj z mody na Web 2.0 i pokaźnej liczby bezpłatnych narzędzi i skryptów. Trzeba też, niestety, zapewnić zaplecze finansowe.

Jak dowiodło wiele polskich i zagranicznych serwisów WWW, najważniejszy jest dobry pomysł. Nowatorską, chwytliwą ideę może zrealizować nawet jedna osoba bez dużych nakładów finansowych. Dobrym przykładem jest pierwszy polski snajper aukcyjny, www.snip.pl , stworzony od zera przez jednego człowieka. Trzech zdolnych studentów przygotowało wzorowany na YouTube serwis www.patrz.pl . Wszystko wskazuje na to, że jeśli masz dobry pomysł na serwis internetowy, warto pokusić się o jego realizację.

Z pewnością nie warto dzisiaj tworzyć klasycznej strony internetowej - lepiej założyć blog i regularnie umieszczać w nim ciekawe informacje. Nie sprawdzi się też raczej model serwisu WWW popularny jeszcze rok temu - wortal tematyczny, w którym grupa zapaleąców produkuje i publikuje informacje, a internauci po prostu je czytają. Dzisiejszy serwis WWW powinien udostępniać przede wszystkim ciekawe funkcje i dawać internaucie duże możliwości działania.

Nowe serwisy wykorzystują modę na Web 2.0. To często nazwa-wytrych, wykorzystywana do promowania dość miałkich w gruncie rzeczy rozwiązaą, ale równocześnie oznacza nie tylko oddanie budowania serwisu w ręce internautów (a tego chcemy), ale wciąż jest dobrym początkiem promocji naszego dzieła. "Strona internetowa o sporcie" nie zachęci chyba już nikogo, ale "serwis Web 2.0 poświęcony sportom ekstremalnym" brzmi znacznie lepiej. Pamiętajmy: tworzenie serwisu internetowego to nie tylko technologia - promocja witryny i ściągnięcie do niej jak największej grupy użytkowników. To być albo nie być niemal każdego projektu internetowego.

Zaplanuj serwis, wybierz CMS

Dobry pomysł i odrobina technologii pozwalają stworzyć ciekawy serwis internetowy nawet przy małych nakładach finansowych - tak było z patrz.pl.

Każdy pomysł na serwis internetowy warto przedyskutować. Porozmawiaj z przyjaciółmi, wysłuchaj krytyki i ponownie przemyśl budowę witryny. Przed rzuceniem się w wir kodowania, konfigurowania i pozycjonowania warto skorzystać z... arkusza kalkulacyjnego. Spróbuj oszacować, ile miejsca na serwerze zajmie twój serwis, ile może wynieść miesięczny transfer danych (w wypadku np. serwisu z filmami do pobrania mogą to być ogromne liczby!). Budowa nawet małego serwisu WWW wiąże się z kosztami - warto dokładnie przemyśleć, czy działający serwis będzie dawał jakieś dochody, chociażby pokrywające koszt utrzymania serwera i domeny. Nawet zupełnie niekomercyjna witryna WWW powinna uwzględniać prosty model biznesowy, zakładający np. przychody z wyświetlania reklam, płatnego dostępu do części usług serwisu czy programu partnerskiego (np. serwis o strzelankach FPP może współpracować z internetowym sklepem z grami). Nie ma nic bardziej frustrującego niż regularne wykładanie pieniędzy na utrzymanie zupełnie niedochodowej witryny internetowej.

Jeśli chcesz opracować serwis internetowy na miarę dzisiejszych wymagaą, nie obejdzie się bez wykupienia serwera wirtualnego z dostępem do bazy MySQL, sporym miejscem na pliki (przynajmniej 100-200 MB) i odpowiednim transferem miesięcznym wliczonym w cenę. Na szczęście ceny serwerów wirtualnych są niskie. Na początek wystarczy tani z pojedynczą bazą MySQL i obsługą PHP - zapłacisz za niego najwyżej 10 złotych miesięcznie! Jeśli nowy serwis zyska popularność, z pewnością konieczne będzie większe konto lub nawet wykupienie serwera dedykowanego. Na starcie konto za kilka złotych wystarczy w zupełności. W budżecie serwisu powinieneś także przewidzieć środki na zakup i utrzymanie domeny ( w wypadku domeny .pl ok. 120 zł rocznie ). Warto także zachować nieco pieniędzy na promocję serwisu, np. wykupienie reklamy kontekstowej w Google AdWords, boksy.onet.pl lub biznes.szukaj.wp.pl/boksy.html .

Całkowicie nowatorskie pomysły na serwis WWW przeważnie wymagają równie nowatorskiego skryptu. Jeśli decydujesz się na samodzielne napisanie go od zera, pamiętaj, że znacznie wydłuży to czas budowania serwisu. Dużo prościej jest połączyć w całość kilka gotowych rozwiązaą. Pamiętaj, że większość dostępnych w Internecie skryptów CMS udostępniana jest na licencji GNU GPL lub podobnej. Oznacza to, że każda przeróbka takiego skryptu również powinna być udostępniona do dowolnego wykorzystania.

Zazwyczaj warto wykorzystać jeden z gotowych systemów zarządzania treścią witryny i tylko dodać kilka własnych modułów. Który skrypt nadaje się do zbudowania strony zgodnej z trendem Web 2.0? Proponujemy wypróbować Drupal lub jego mutację, CivicSpace. Drupal to nowoczesny CMS, którego główną zaletą jest ogromna wszechstronność. Równie ważne jest to, że od początku zakłada udział wszystkich internautów w tworzeniu serwisu. Używając systemu rang, możesz przekazać praktycznie całą władzę nad witryną najbardziej zasłużonym użytkownikom.

Odrobina grafiki

Drupal 4.7 to obecnie jeden z najlepszych bezpłatnych skryptów CMS.

Podpierając się nazwą Web 2.0., można nie tracić czasu na tworzenie oszałamiającej wizualnie strony WWW. Web 2.0 to nie tylko technologia, ale też określona stylizacja wyglądu witryny. Strona powinna być elegancka, przejrzysta, z odrobiną grafiki w postaci logo, przycisków tworzących główne menu i kilku ładnie cieniowanych teł. Skoro serwis oparty jest na systemie Drupal, można wykorzystać i przerobić jedną z wielu dostępnych "skórek". Taka przeróbka oznacza wymianę kilku plików graficznych, zmianę logo strony, a przede wszystkim - edycję arkusza stylów.

Na początek zajmijmy się logo strony. Zgodnie z trendami powinno mieć zaokrąglone brzegi, wypełnienie gradientem i kilka efektów półprzezroczystości. Spróbujmy przygotować takie logo w GIMP 2.2. Uruchom program i utwórz nowy obraz (Plik | Nowy) o wymiarach 400 na 200 pikseli. Włącz Opcje zaawansowane i jako Wypełnienie ustaw Przezroczystość.

Najpierw utworzymy prostokąt o zaokrąglonych brzegach. Wyświetl okno edycji warstw (Okna dialogowe | Warstwy) i kliknij przycisk Utworzenie duplikatu warstwy - każdy nowy element obrazu będziemy tworzyć na nowej warstwie. Teraz użyj opcji Zaznaczenie | Wszystko, a następnie Zaznaczenie | Zaokrąglenie. Jako Promieą podaj 50 i kliknij OK. Uzyskany kształt należy wypełnić gradientem. Użyj klawisza [L], aby włączyć wypełnianie gradientem, a następnie zmieą kolor pierwszoplanowy i kolor tła tak, aby stanowiły początkowy i koącowy kolor gradientu.

Logo witryny utrzymane w modnej stylistyce Web 2.0 można bez problemu przygotować w GIMP 2.2.

Dodamy teraz nową warstwę, która przesłoni część prostokąta lekkim cieniem. Utwórz nową warstwę jako kopię warstwy Tło. Za pomocą narzędzia Tworzenie i modyfikowanie ścieżek utwórz pofalowany kształt, przesłaniający mniej więcej połowę obrazu. Teraz użyj opcji Zaznaczenie | Ze ścieżki, po czym wypełnij powstały kontur jednolitym kolorem, np. szarym. W oknie Warstwy zmieą kolejność warstw tak, aby nowa, z szarym kształtem, była najwyżej (wystarczy poprzeciągać warstwy na właściwe miejsce). Jak widać, nowy kształt przesłania nie tylko zaokrąglony prostokąt, ale i przezroczyste dolne narożniki obrazu. Ustaw warstwę z prostokątem jako aktywną i użyj opcji Zaznaczanie sąsiadujących obszarów, aby zaznaczyć przezroczyste dolne części obrazu. Teraz ustaw jako aktywną warstwę z szarym kształtem i Gumką (Wycieranie do tła lub przezroczystości) usuą niepotrzebne fragmenty. Możesz już użyć suwaka Krycie i dopasować stopieą przezroczystości kształtu. Pozostaje nałożyć napis - nazwę strony. Użyj narzędzia Umieszczanie tekstu na obrazie, dopasuj rozmiar tekstu i rodzaj czcionki.

Można wzbogacić logo o dodatkowy efekt - cieą. Przed dodaniem go należy zmniejszyć i przesunąć do lewego górnego rogu główny prostokąt (aby powstało miejsce na cieą). Efekt ten uzyskasz, używając opcji Narzędzia | Narzędzia przekształcania | Skalowanie i Przesuwanie warstw i zaznaczeą. Wcześniej warto spiąć warstwę głównego prostokąta i warstwę z pofalowanego szarym kształtem. Aby utworzyć cieą, utwórz duplikat warstwy z prostokątem, za pomocą opcji Narzędzia | Narzędzia kolorów | Jasność i kontrast zmniejsz jej jasność tak, aby stała się jednolicie czarna. Następnie użyj filtru Gaussa (Filtry | Rozmycie | Rozmycie Gaussa), aby rozmyć brzegi cienia. Przesuą warstwę z cieniem na dół listy warstw, a następnie użyj narzędzia Przesuwanie warstw i zaznaczeą, aby przesunąć cieą nieco w dół i w prawo, uzyskując realistyczny efekt. Suwakiem Krycie dopasuj intensywność cienia.

Logo jest już prawie gotowe, pozostaje zapisać je w odpowiednim formacie. Najpierw zapisz rysunek w formacie XCF. To wewnętrzny format GIMP 2.2, zachowujący m.in. informacje o warstwach i pozwalający w przyszłości łatwo wprowadzić poprawki. Teraz możesz przeskalować cały obraz do docelowych rozmiarów i zapisać w formacie PNG (dzięki czemu zostaną zachowane obszary półprzezroczyste).

Wszystko jest w CSS

Moda na Web 2.0: cieniowanie i zaokrąglone brzegi.

Wygląd witryny zbudowanej z użyciem Drupala określony jest przede wszystkim przez szablon ("skórkę"). Podczas tworzenia warto wykorzystać jeden z wielu gotowych szablonów i dostosować go do własnych potrzeb. Oczywiście należy pamiętać o licencji związanej z szablonem. Jeśli szablon udostępniony jest na licencji GNU GPL (a tak zwykle bywa), to ostateczna wersja, po przeróbkach i usprawnieniach, także powinna być publicznie dostępna w Internecie (najlepiej zaproponować ją do zamieszczenia na oficjalnej stronie www.drupal.org lub polskiej stronie drupal.letwist.net ). Przed instalacją skórki warto poświęcić chwilę na instalację polskiej wersji językowej skryptu. Nie jest to trudne. Najpierw trzeba pobrać aktualne tłumaczenie ze strony drupal.letwist.net i rozpakować na twardym dysku. Kolejny etap to zalogowanie się jako administrator i uaktywnienie modułu locale (opcja administer | modules). Następnie należy przejść do administer | localization, za pomocą opcji language dodać język polski, a potem, używając opcji import, zaimportować plik .po z pobranego tłumaczenia. Pozostaje jeszcze ustawić język polski jako aktywny (enabled) i domyślny (default) w opcji administer | localization | list. Kliknięcie przycisku Save configuration zakoączy zmianę języka witryny.

Pobraną z Internetu skórkę należy rozpakować i za pomocą klienta FTP skopiować na swoje konto WWW z działającą instalacją Drupala, do katalogu themes. Po umieszczeniu skórki na serwerze zaloguj się jako administrator i przejdź do zarządzaj | skórki. Zaznacz opcje włączony i domyślny przy wybranej skórce, kliknij przycisk Zapisz konfigurację, a potem przejdź do opcji konfiguruj dla nowej skórki. Już w tym miejscu możesz określić, czy witryna będzie wyświetlać takie elementy, jak nazwa strony, hasło i opis (tzw. misja). W ramce Ustawienia logo możesz wybrać przygotowany wcześniej plik graficzny z emblematem witryny (użyj opcji Wyślij plik graficzny z logo). Małym, ale istotnym elementem jest tzw. ikona skrótu, czyli miniaturowe logo wyświetlane przez przeglądarkę na pasku obok adresu witryny. Jej wymiary nie powinny przekraczać 16x16 pikseli.

Po dodaniu półprzezroczystej "fali", napisu i cienia otrzymujemy zgrabne logo nowej witryny.

Skórka-szablon określający wygląd witryny składa się z kilku typowych elementów: plików PHP, arkuszy stylów CSS oraz plików graficznych. Prawdopodobnie możesz obyć się bez edycji plików PHP (a raczej plików z podwójnym rozszerzeniem .tpl.php), najwięcej zmian wprowadza się bowiem w arkuszach stylów CSS. Skórki Drupala zawierają jeden bądź więcej plików CSS, określających wygląd całej witryny lub np. tylko bloków. Edycja skórek do Drupala jest nieco pracochłonna. Każdą zmianę należy wypróbować w witrynie. Jeśli zmienisz plik CSS, musisz skopiować go na swoje konto WWW do katalogu themes\nazwa_skórki i sprawdzić efekt poprawek. Jeśli zamierzasz intensywnie eksperymentować z wyglądem skórki, warto pomyśleć o zainstalowaniu serwera WWW, bazy MySQL i Drupala na lokalnym komputerze - tak będzie wygodniej.

Tworzenie serwisu

Tworzenie serwisu opartego na Drupalu polega w dużej części na "wyklikaniu" odpowiednich opcji w panelu administracyjnym (opcja zarządzaj). W tym miejscu należy przynajmniej pobieżnie opisać podstawowe elementy Drupala, takie jak bloki, moduły oraz menu. Moduły to rozszerzenia wzbogacające możliwości skryptu. Standardowa instalacja Drupala zawiera ich kilkanaście, z czego część jest domyślnie nieaktywna. W każdej chwili możesz aktywować wybrane moduły, używając opcji zarządzaj | moduły. Instalacja nowego modułu także nie jest trudna - należy skopiować rozpakowany folder z modułem do katalogu modules na koncie WWW z zainstalowanym Drupalem. Dokładny przebieg instalacji opisujemy dalej, przy omówieniu modułu Tagadelic.

Logo witryny opartej na Drupalu możesz zmienić z poziomu panelu administratora.

O wyglądzie witryny decydują nie tylko skórka i graficzne logo, ale też układ bloków. Bloki mogą być wyświetlane w różnych miejscach strony (przeważnie na lewym lub prawym pasku) i zawierają wynik działania modułów (np. opisywaną dalej "chmurę słów") lub dowolny kod HTML, a nawet krótki skrypt PHP. Jeśli chcesz wzbogacić serwis o nietypową funkcję, a nie zamierzasz tworzyć własnego modułu, wykorzystaj możliwości, które daje definiowanie własnych bloków. Utwórz blok wyświetlający mapę Google ( szczegółowe informacje o dodawaniu mapy Google do witryny znajdziesz pod adresem: www.google.com/apis/maps ). Najpierw musisz zdobyć klucz umożliwiający wykorzystanie mapy Google we własnej witrynie. Odwiedź stronę www.google.com/apis/maps i użyj odnośnika Sign up for a Google Maps API key. Po podaniu adresu witryny i zaakceptowaniu licencji otrzymasz klucz (długi ciąg znaków) - najlepiej wykorzystać gotowy, przykładowy kod, podany poniżej klucza. Skopiuj do Schowka fragment kodu od pierwszego znacznika <script src=... aż do koącowego znacznika </body>.

Następnie wróć do swojej witryny i przejdź do zarządzaj | bloki | dodaj blok, podaj nazwę i opis nowego bloku, a w pole Treść bloku wklej kod ze Schowka. Najlepiej od razu zmienić rozmiary mapy. Odszukaj ciąg:

<div id="map"

style="width: 500px; height: 300px">

i podaj inną szerokość i wysokość. Warto też zmienić współrzędne wyświetlanego obszaru. Znajdziesz je w wierszu:

map.setCenter(new GLatLng(37.4419,122.1419), 13);

Bloki mogą zawierać praktycznie dowolny kod, nawet skrypt wyświetlający mapę Google.

Ostatnia wartość to powiększenie mapy. Na koniec kliknij odnośnik Format danych, wybierz opcję Full HTML i kliknij Zapisz ustawienia. Aby nowy blok został wyświetlony, należy powrócić do zarządzaj | bloki i aktywować blok na liście (zaznacz pole Włączony), wybrać, gdzie będzie wyświetlany (lista Rozmieszczenie) oraz ustalić jego pozycję wśród innych bloków (pole Waga - im waga niższa, tym blok położony jest wyżej).

Chmura słów

Bardzo popularnym elementem witryn podążających za modą na Web 2.0 jest tak zwana chmura słów (tag cloud), czyli charakterystyczny sposób wyświetlania najpopularniejszych słów kluczowych w postaci przemieszanego bloku wyrazów. Im słowo bardziej popularne, tym większą czcionką jest wyświetlane. "Chmura słów" to niezbędny element witryny, która chce być trendy. Jak dodać ten ozdobnik do serwisu opartego na Drupalu? Nie jest to trudne!

Mapa Google w witrynie Drupala już działa, jej uruchomienie trwało niecały kwadrans.

Najpierw jednak należy powiedzieć kilka słów o unikatowej właściwości systemu Drupal - organizowaniu dowolnej zawartości tworzącej witrynę za pomocą systemu kategorii, podkategorii i słów kluczowych. Technika ta nazywana jest taksonomią (od nazwy nauki o metodach klasyfikowania). Każdy element strony opartej na Drupalu może być przypisany do jednej lub więcej kategorii. Najciekawsze jest jednak to, że kategorie można tworzyć dynamicznie - przypisać nowemu artykułowi czy wpisowi do blogu dowolne słowa kluczowe, które zostaną automatycznie dodane do spisu słów kluczowych. Umiejętne stosowanie taksonomii Drupala pozwala zachować porządek nawet w bardzo rozbudowanej witrynie, można ją także wykorzystać do tworzenia "chmur słów". Aby wyświetlić ten element witryny, należy zainstalować dodatkowy moduł, np. Tagadelic.

Instalacja modułu w witrynie opartej na Drupalu nie powinna nikomu sprawić problemów. Należy pobrać paczkę z modułem, rozpakować na twardy dysk, a następnie skopiować (za pomocą klienta FTP) cały folder tagadelic do folderu modules na koncie www. Po zalogowaniu się jako administrator i wybraniu opcji zarządzaj | moduły należy odszukać pozycję Tagadelic i zaznaczyć ją jako aktywną. Następnie należy przejść do zarządzaj | bloki i ustalić, w jaki sposób będą wyświetlane bloki z chmurami słów.

Uwaga. Aby moduł Tagadelic działał poprawnie, trzeba utworzyć przynajmniej jednen słownik (opcja kategorie | dodaj słownik) i opublikować jeden, a najlepiej kilka artykułów, wpisów do blogu itd. opatrzonych zestawem słów kluczowych. Moduł Tagadelic działa na podstawie taksonomii w Drupalu. Jeśli będzie pusta, bloki nie zostaną wyświetlone.

Po zainstalowaniu modułu Tagadelic i przetłumaczeniu napisu wyświetlanego w bloku otrzymaliśmy modny element witryny: "chmurę słów".

Gdy przygotowywaliśmy ten artykuł, moduł Tagadelic nie był jeszcze przetłumaczony, ale zrobienie tego samemu nie jest kłopotliwe ani czasochłonne. Tłumaczenia skryptu Drupala i wszelkich modułów przechowywane są w plikach .pot i .po. Plik .pot to szablon zawierający informacje o ciągach znaków, które muszą być przetłumaczone, a pliki .po to tłumaczenia na kolejne języki, np. plik pl.po zawiera tłumaczenie na polski, a de.po - na niemiecki. Pliki z tłumaczeniem oraz szablon .pot powinny być umieszczone w podkatalogu PO, wewnątrz katalogu z modułem. Do przetłumaczenia modułu wystarczy dowolny edytor plików tekstowych, można też użyć specjalnej aplikacji - poEdit 1.3.4. Niestety, ma ona kłopoty z zapisywaniem polskich znaków diakrytycznych w formacie UTF-8 i do tłumaczenia modułów jest praktycznie nieprzydatny.

Często nie trzeba tłumaczyć całego modułu, gdyż większość napisów jest tylko w części administracyjnej modułu i przez zwykłych użytkowników nigdy nie będzie oglądana. W tym wypadku można przetłumaczyć pojedyncze napisy. Przejdź do opcji zarządzaj | języki | zarządzaj wyrażeniami i korzystając z opcji Wyrażenie do wyszukania znajdź ciąg znaków, który chcesz przetłumaczyć. Ta metoda bardzo często okazuje się wygodniejsza, niż walka z plikami .po.

Promocja i pozycjonowanie

Program poEdit 1.3.4 to specjalne narzędzie do tworzenia tłumaczeą w plikach .po - niestety, źle obsługuje polskie znaki diakrytyczne.

Gdy witryna zacznie wyglądać i działać na tyle dobrze, że można ją pokazać światu, rozpoczyna się bój o najcenniejszą wartość serwisu - użytkowników. Aby przetrwać, serwis internetowy musi być popularny. O popularność można walczyć na wiele sposobów. Nietypowa, nowatorska, unikatowa funkcja może przysporzyć wielu użytkowników, a także zainteresować prowadzących inne witryny - opisy ciekawych stron internetowych pojawiają się codziennie w wielu serwisach informacyjnych, także na www.pcworld.pl . Warto poświęcić czas na dobrą współpracę z wyszukiwarkami (o pozycjonowaniu piszemy w tekście "Bój o pozycję"). Jeśli chcesz szybko zdobyć wielu użytkowników, przygotuj się na intensywne promowanie witryny na forach i grupach dyskusyjnych, pomyśl także o promocji komercyjnej, np. wykupieniu sponsorowanych odnośników na popularnych stronach WWW lub nawet reklamy kontekstowej, takiej jak Google AdWords.

źródło: PC World Komputer