Twój komputer najlepszym warsztatem

Najprostszy warsztat projektanta to komputer z następującym oprogramowaniem:

• serwer WWW z witryną Joomla! - umożliwia testowanie szablonu,
• edytor stron internetowych - ułatwia tworzenie kodu szablonu,
• walidator CSS - sprawdza poprawność kodu,
• oprogramowanie graficzne - wiadomo, po co,
• przeglądarki internetowe - Internet Explorer, Mozilla Firefox, Opera, Netscape

Serwer WWW i testowa witryna

Szablon dla Joomla nie jest samodzielną stroną WWW. To szkielet. Nie zawiera treści, a jedynie instrukcje dla silnika Joomla. Aby testować zachowanie się szablonu, musi on być umieszczony w Joomla!

W Sieci czy lokalnie?

Możesz wykorzystać do tego celu specjalną witrynę testową uruchomioną na serwerze sieciowym.

Ale to dość uciążliwe, zwłaszcza, jeśli nie dysponujesz stałym i szybkim łączem internetowym. Każdorazowo trzeba bowiem przesyłać zmodyfikowane pliki na serwer za pomocą FTP. Dużo wygodniej jest zainstalować odpowiednie oprogramowanie na komputerze lokalnym. Nie jest to trudne!

Serwer na komputer lokalny

Istnieją specjalne pakiety, które instalację i konfigurację serwera WWW czynią łatwą i przyjemną. Skrótowo nazywane są np. LAMP czy WAMP. Akronimy WAMP, LAMP, XAMPP wskazują na przeznaczenie pakietu i jego zawartość.

Pierwsza z liter sygnalizuje, dla jakiego systemu operacyjnego pakiet jest przeznaczony: W - dla Windows, L - dla Linuksa, F - dla FreeBSD, X - dla różnych systemów operacyjnych.

Każdy z pakietów zawiera m.in. oprogramowanie niezbędne dla działania Joomla: Apache, MySQL i PHP.

Polecamy szczególnie trzy z nich. Bo przygotowane zostały specjalnie dla użytkowników Joomla!. Zawierają wszelkie niezbędne do działania serwera WWW oprogramowanie włącznie z Joomlą, a ich instalacja i obsługa nie sprawi Ci kłopotów.

• pakiet XJ!: oparty na projekcie XAMPP i systematycznie przez autora aktualizowany. Zawiera Apache i jego przyjaciół: PHP, MySQL tudzież innych. A przede wszystkim zawiera zainstalowanego i skonfigurowanego Joomla. Możesz go pobrać z serwisu http://creativecoders.de
• pakiet XJ!-USB: XJ! w wersji na USB. Nie wymaga instalacji na komputerze, a zapewnia w pełni funkcjonalny serwer WWW. Również możesz go pobrać z serwisu http://creativecoders.de. Podobnie jak XJ! instaluje również Joomla, zwykle w najnowszej wersji.
• pakiet JSAS: podobnie jak XJ! zapewni Ci dobre warunki pracy. Możesz go pobrać ze strony projektu Joomla Stand Alone Server: http://jsas.joomlasolutions.com. Instalację JSAS objaśnił Marek Dylewicz w artykule Joomla na własnym komputerze.

Warto również polecić pakiet, który stanowił fundament XJ!:

• pakiet XAMPP: Zawiera wszystkie potrzebne do uruchomienia serwera WWW aplikacje. Dostępny jest w wersjach na różne platformy systemowe. Jest łatwy w obsłudze. Instalacja sprowadza się do uruchomienia pliku setup.exe i udzielenia kilku niezbędnych informacji. Pobierzesz go z witryny projektu www.apachefriends.org. Dobierz pakiet odpowiedni dla Twojego systemu operacyjnego!

Podczas instalacji możesz skorzystać z bardzo przystępnego poradnika.

Popularny jeszcze niedawno polski pakiet Krasnal Serv nie jest od wersji 2.7 aktualizowany, stąd - jeśli nie pojawi się nowa, aktualna wersja, lepiej korzystać z rozwiązań wymienionych wcześniej.

Edytory projektanta

Pliki definiujące szablony można tworzyć nawet zwykłym edytorze tekstu. Warto jednak skorzystać z dobrodziejstw rozwiniętych technologii - edytorów wspomagających projektantów kolorowaniem składni, uzupełnianiem znaczników, pomocą kontekstową, itd.

Edytory PHP, HTML, CSS

Możesz skorzystać z programu Dreamweaver czy nie tak drogiego, a bogatego w możliwości polskiego Pajączka. Profesjonalne oprogramowanie jednak kosztuje. A nie jest to jedyny wybór. Istnieją wyśmienite programy wolnodostępne. Oto kilka propozycji:

• Edytor nVu: jest to kompletny system do tworzenia stron WWW, dostępny w wersjach dla Windows, Mac OS X, Linux, FreeBSD. Oferuje graficzny podgląd projektowanych stron, graficzny tryb podglądu kodu i tryb pracy z kodem źródłowym. Ma wbudowany edytor kaskadowych arkuszy stylów CSS oraz moduł synchronizacji z serwerem internetowym. Wspódziała z walidatorem W3C. Dostępny jest w polskiej wersji językowej. Czyż można marzyć o doskonalszym narzędziu za darmo? A dodatkowo możesz pobrać z repozytorium MamboXChange usprawniające pracę rozszerzenie dla Joomla/Mambo. Przejdź na polską stronę projektu.
• Notepad++ 3.5 opracowany dla programistów. Pozwala w jednym oknie wczytać wiele dokumentów. Koloruje składnię. Wyświetla prowadnicę wcięć i numery wierszy. Dostępny jest również w polskiej wersji językowej. Jest w porównaniu z nVu uboższy, ale również posiada wszystko, czego potrzebujesz. Skrypt pobierzesz ze strony projektu.
• PHP Designer 2006 to kompletne studio programisty. Prostotą i wygodą przekonać może do siebie każdego. Wspomaga tworzenie dokumentów PHP, HTML, XHTML, PERL, JavaScript. Obsługuje CSS (CSS1 i CSS2), a także bazę danych MySQL. Sporym atutem programu jest wbudowany klient FTP. Umożliwia wybór znaczników PHP, HTML i CSS z podręcznej listy. Koloruje skladnię. Posiada fukcję autouzupełniania i wiele innych przydatnych narzędzi. Możesz go pobrać z witryny projektu MPSoftware.

I propozycja walidatora CSS:

• CSE HTML Validator pomoże ci sprawdzić zgodność z HTML, xHTML, CSS, a także - np. odnośniki w działającym serwisie. Pełna profesjonalna wersja kosztuje ok. 130$, ale możesz skorzystać z bezpłatnej testowej wersji CSE HTML Validator-Lite. Przejdź na stronę projektu.

Osobom zasobniejszym czy profesjonalnym firmom warto polecić bardzo dobry edytor Style Master CSS Editor dostępny także w wersji demonstracyjnej na stronie http://westciv.com

Programy graficzne

Wprawdzie grafiką tutaj zbytnio zajmować się nie będziemy, ale projektant szablonu bez oprogramowania graficznego się nie obejdzie. Także i tę część warsztatu projektanta można zmontować za darmo, korzystając z wolnego oprogramowania:

• GIMP 2.2.x to najsłynniejszy wolny program graficzny. Od pewnego czasu dostępny niemal na wszystkie platformy systemowe. Porównywany bywa z profesjonalnym Photoshopem i prawdę mówiąc, ustępuje Photoshopowi w sposób, który dla Ciebie będzie pewno bez znaczenia. Oferuje wszystkie funkcje, jakich możesz oczekiwać przy projektowaniu grafiki dla WWW. Podobnie jak poprzednie, dostępny jest w polskiej wersji językowej. Przejdź na polską stronę projektu
• Inkscape jest edytorem grafiki wektorowej, podobnym do Ilustratora czy CorelDraw. Umożliwia pracę na krzywych, obiektach, ścieżkach, wykorzystanie deseni i gradientów, obsługę kanałów alfa, masek przezroczystości. I inne. Wielce przydatny do tworzenie różnych drobiazgów na stronę. I oczywiście nie tylko drobiazgów. Przejdź na stronę projektu

Optymalizacja grafiki

Przygotowane do wykorzystania na stronie grafiki warto poddać optymalizacji, która przynieść może czasem spore oszczędności. Jeśli nie dysponujesz profesjonalnymi narzędziami, warto przetestować i skorzystać z programów:

• GIF Optimizer - prosty, łatwy w użyciu, optymalizuje zarówno gifi statyczne, jak i animowane; dostępny pod adresem: www.flashfxp.com,
• GIFeq - również prosty w obsłudze, a użyteczny tym bardziej, że może służyć do optymalizacji pojedynczych grafik i folderów z wieloma plikami, rozpowszechniany przez: www.wildfiredesign.net,
• JPG Cleaner - pozwala czasem znacznie zredukować objętość plikow JPG, zwłaszcza stworzonych w Photoshopie; udostępniany jest przez www.rainbow-software.org
• OptiPNG: advanced PNG Optimizer - służy do bezstratnej optymalizacji plików PNG. Dostępny jest pod adresem http://optipng.sourceforge.net
• StripFile - mały kombajn, umożliwiający zmniejszenie objętości plików graficznych (GIF, JPEG, PNG) oraz HTML. Usunięcie zbędnych informacji z plików może przynieść znaczne zmniejszenie ich wielkości. Dostępny jest pod adresem: www.nuetools.co.uk

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ