TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA

1. TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA

2. JOOMLA Joomla! - rozprowadzany na zasadach wolnego oprogramowania system zarządzania treścią napisany w języku PHP, wykorzystujący bazę danych MySQL. Joomla! jest pochodną systemu Mambo.

3. CMS System zarządzania treścią (ang. Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły.

4. Języki z jakich jest zbudowana Joomla • HTML- Hyper Text Markup Language • CSS Casscade Style Sheet • PHP – Power Hypertext Preprocessor • MySQL- Structural Query Language • Javascript

5. Co potrzebne jest do używania Joomla lokalnie na komputerze • XAMPP- program działający w środowisku MAC Windows Linux zawierający pakiety PHP Mysql PHPMyAdmin i Apache • Dowolna przeglądarka internetowa

6. INSTALACJA PROGRAMU XAMPP • XAMPP jest darmowym wieloplatformowym pakietem, składającym się głównie z serwera Apache, bazy danych MySQL i interpreterów dla skryptów napisanych w PHP i Perlu. Nazwa XAMPP jest akronimem dla X (Cross-platform), Apache, MySQL, PHP, Perl. • Program jest wydawany na licencji GNU General Public License jako darmowy serwer WWW do obsługi dynamicznych stron. Obecnie XAMPP jest dostępny na cztery platformy: Microsoft Windows, Linux, Sun Solaris oraz Mac OS X.

7. Joomla w internecie • Potrzebny hosting z php i mysql (czyli udostępnianie części zasobów komputera, który jest stale 24h na dobę podłączony do internetu i możliwy do zarządzania przez użytkownika np. poprzez przeglądarkę internetową np. 1and1.pl, nazwa.pl, home.pl, cba.pl

8. Zmiany w Joomla 1.6 Najważniejsze funkcje w Joomla 1.6 -System kontroli dostępu - daje administratorom witryny i redaktorom możliwość określania, kto może oglądać i zarządzać treścią. -Nieograniczony model zagnieżdżania - umożliwia administratorom oraz twórcom treści definiowanie wielopoziomowych kategorii o dowolnie zagnieżdżonej strukturze. -Prosta aktualizacja rozszerzeń - dostarcza użytkownikowi lepszego sposobu utrzymania bezpieczeństwa witryny przez uproszczony proces aktualizacji rozszerzeń -Szablony zgodne z semantyką XHTML - zapewnia lepszą podstawę do prezentacji treści -Wielojęzyczność - pozwala w podstawowy sposób na stworzenie witryny wielojęzycznej.

9. Instalowanie Joomla na hostingu CBA.PL 1. Wchodzimy na stronę cba.pl i klikamy „Zarejestruj” 2. Wpisujemy pożądaną nazwę subdomeny na domenie cba.pl np. twain83.cba.pl 3. podajemy wszystkie potrzebne informacje jak hasło (dwa razy takie samo), email i kod capcha (ten z obrazka) akceptujemy regulamin i klikamy „Załóż konto” 4. otwieramy swoją pocztę i klikamy na link aktywacyjny 5. logujemy się za pomocą wcześniej podanego loginu i hasła 6. pobieramy program filezilla client (NIE SERVER!) http://filezilla-project.org/download.php?type=client pobieramy wersje dla windows z rozszrzeniem exe (nie zip) 7. instalujemy program filezilla

10. Instalacja joomla na hosting cba.pl cd.. 8. otwieramy program filezilla i podajemy nazwę hosta np.. cba.pl login admin@twain83.cba.pl i hasło podane przy rejestracji (można zmienić hasło w panelu administracyjnym) 9. wchodzimy na stronę http://joomlacode.org/gf/project/joomla/frs/?action=FrsReleaseBrowse&frs_package_id=5969 i pobieramy wersję 1.6.5 o nazwie „Joomla_1.6.5-Stable-Full_Package.zip”

11. Instalacja Joomla na hostingu cba.pl cd. 10. Rozpakowujemy (wyodrębnij wszystkie) pliki Joomla 11. Usuwamy na serwerze plik index.html 12.Wrzucamy pliki Joomla na serwer poprzez Filezilla bezpośrednio na do głównego katalogu (zajmie to około 15 minut) 12. Tworzymy bazę MySQL w panelu administracyjnym będzie potrzebna do instalacji 13. Wpisujemy do przeglądarki adres naszej strony np. twain83.cba.pl (twain83 to nazwa naszej subdomeny) i przystępujemy do instalacji

12. Instalacja Joomla na hostingu cba.pl cd. 14. Wybieramy wersję językową i klikamy dalej 15. Sprawdzanie wersji środowiska klikamy dalej :) 16. Akceptujemy licencję i klikamy dalej :) 17.Konfugurujemy połączenie z bazą danych w polu nazwa bazy danych podajemy mysql.cba.pl podajemy nazwę użytkownika nt twain83 w polu nazwa bazy danych np.. twain83_cba_pl i podajemy nasze hasło do bazy danych i klikamy dalej 18. Konfiguracja ftp klikamy dalej 19. Konfiguracja główna wpisujemy nazwę wirtyny login superadministratora i jego hasło podajemy adres mail 20. Ważne! Klikamy załaduj przykładowe dane in klikamy daje

13. Instalacja joomla cd.. 21.Usuwamy katalog instalacyjny i klikamy „Zaplecze” 22. Podajemy wcześniej zapisany login i hasło i gotowe 23. Jesteśmy już w panelu administracyjnym witryny klikając „View site” widzimy naszą stronę internetową możemy zobaczyc naszą stronę również pod adresem nasza_subdonema.cba.pl 24. Na koniec warto też zainstalować polską wersję językową KONIEC

14. Pierwsze spojrzenie na panel administracyjny • Panel administracyjny jest zawsze dostępny pod adresem http://moja_domena/administrator/ • Instalujemy spolszczenie panelu administracyjnego: • Pobieramy plik ze strony http://www.joomla.pl/index.php/pobierz-joomla.html (pakiet językowy do Joomla 1.6.5) Wchodzimy w zakładkę Extensions ->extensions manager • Klikamy obok Upload Package File i szukamy na dysku wczesniej pobranego spolszczenia i klikamy Upload and Install • Przechodzimy do zakładki language manager i zaznaczamy polish i klikamy default to samo robimy dla panelu administracyjnego czyli klikamy Filter location administrator i zaznaczamy polish i klikamy panel administracyjny powinien już być wyświetlany po polsku

15. Profil użytkownika • Możemy zmienić swoją nazwę użytkownika opis użytkownika hasło używany edytor serwis pomocy strefę czasową itp

16. Konfiguracja globalna • Możemy zmienić nazwę naszej witryny (odpowiednik title w html) • Możemy zamknąć ją przed nieuprawnionymi użytkownikami na czas prac i poinformować o tym odpowiednim komunikatem • Możemy zmienić domyślny edytor (można to zmienić też na poziomie użytkownika) • Możemy wybrać ile pozycji będzie się standardowo pojawiać podczas administracji • Wpisujemy dane potrzebne do SEO czyli wypozycjonowania strony przez wyszukiwarkę Google czyli opis witryny i słowa kluczowe (im mniej słów kluczowych tym są bardziej ważne dla wyszukiwarki) • Możemy też wybrać czy tytuły i czy autor ma być w metadanych strony

17. Przyjazne linki • Pobieramy plik htaccess.txt i otwieramy go w jakimś edytorze tekstu • Usuwamy komentarz rewrite Basa (linia 57) • Wrzucamy plik na serwer i zmnieniały jego nazwę na .htaccess • Możemy też zmienić adresy z /adres/ na adres.html zaznaczając adresy z przyrostkiem

18. Konfiguracja globalna system • Możemy włączyć cachowanie strony w celu odciążenia serwera wtedy serwer zapisuje kopie stron w postaci html które przechowuje udostępniając uzytkownikom. • Analiza systemu i analiza języka pomocne dla zaawansowanych administratorów przy sprawdzaniu błędów MySQl i PHP

19. Konfiguracja globalna Serwer • Możemy edytować plik configuration.php przez podanie nazwy hosta nazwy użytkownika nazwy bazy danych i hasła i przedrostka tabel • Możemy też włączyć serwer ftp oraz skonfigurować serwer pocztowy

20. Konfiguracja globalna Uprawnienia • Możemy zdecydować jakie uprawnienia dostaną poszczególni użytkownicy • Istnieją poszczególne role różnych użytkowników. Standardowo podczas instalacji tworzony jest użytkownik superadministrator którego „może wszystko”, w miarę prac nad witryną można utworzyć innych użytkowników z innymi uprawnieniami, można też dynamicznie przydzielać użytkownikom ich uprawniania niezależnie od ustawień globalnych • Możemy też utworzyć grupę użytkowników i dla wszystkich osób w grupie zdefiniować uprawnienia

21. Witryna → Konserwacja • Jeżeli zaznaczyliśmy opcję cachowania witryny możemy wyczyścić plik cache a także usunąć przestarzałe pliki

22. Witryna informacja o systemie • Informacje dla zaawansowanych administratorów mniędzy innymi werjsa Joomla nazwa serwera wersja PHP i MySQL itp..

23. Użytkownicy → utwórz konto użytkownika • Tworzy konto użytkownika z określonymi uprawnianiami • Utwórz grupę użytkowników – tworzy grupę użytkowników z określonymi uprawnieniami • Korespondencja -umożliwia wysłanie wiadomości do poszczególnych grup użytkowników

24. Menu • Każda pojedyncza strona lub zbiór stron internetowych aby być widoczna musi być przypisana do jakiegoś menu • Istnieje co najmniej jedno menu podstawowe którego nie można usunąć • Menu to moduł umieszczony wewnątrz templatki (szablonu) • Można przypisać kilka menu to tego samego miejsca w templatce • Menu można wyłaczyć poprzed wyłaczenie modułu

25. Najważniejsze rodzaje menu • Pojedynczy artykuł – odpowiednik statycznej strony HTML (najczęściej używany) • Kategoria przegląd artykułów- wyświetla linki do oszczególnych artykułów • Kategoria lista artuykułów – Lista artykułów w tabelce • Kategoria lista kategorii • Lista kanałów informacyjnych kanały RSS • Pojedynczy kanał RSS • Zakładki Lista zakładek • Artykuły Archiwalne • Logowanie • Profil użytkownika • WPINACZ- Wrzuca ramke iframe na podany adres http://

26. Pojedynczy artykuł • Alias – adres strony np. wpisując adres http://joomla/adres.html • Status: opublikowano- link będzie widoczny • Dostęp: Publiczny – widowczny dla wszystkich Registered- dla zarejestrowanych użytkowników Special-dostęp ograniczony specjalny: kategoria i umieszczone w niej artykuły będą dostępne tylko dla zalogowanych użytkowników z uprawnieniami specjalnymi - autorów, redaktorów, wydawców, operatorów i administratorów. Autorzy będą mogli edytować swoje artykuły, redaktorzy wszystkie artykuły, a wydawcy redagować wszystkie artykuły i decydować o ich publikacji

27. Pojedynczy artykuł cd. • Pokaz w menu- wybieramy menu w jakim ma być dany link • Pozycja macierzysta kolejność w którym ma być opublikowany dany link • Otwórz w: opcje jak ma się wyświetlać dany link • Strona domyślna otwiera się domyślnie po wpisaniu adresu naszej domeny np. po otwarciu twain83.cba.pl (musi być przypięta do menu domyślnego) • Styl szablonu- domyślny szablon jaki ma zostać użyty do wyświetlania strony • Wybierz artykuł: wybieramy wcześniej utworzony artykuł • Opcje artykułu: jeżeli wcześniej tego nie zdefiniowaliśmy ogólnie to wybieramy ustawienia dla konkretnego artykułu albo definiujemy zgodnie z ogólnymi ustawieniami dla wszystkich artykułów

28. Pojedynczy akrtykuł opcje pozycji menu • Opcje pozycji menu: Atrybut title w łączu- opcja pod SEO • Styl CSS łącza – definiujemy konkretny styl dla konkretnego łącza • Grafika w menu – dodajemy grafikę jako łącze do menu • Dodaj tytuł menu- opcja pod seo domyślnie włączona

29. Pojedynczy artykul opcje wyglądu strony • Tytuł strony dla przeglądarki-opcja seo • Pokaż nagłówek strony- opcja seo • Nagłówek strony-można zdefiniować własny nagłówek • Klasa CSS strony-page class suffix definiowanie własnej klasy css w templatce

30. Opcje metadanych i przypisane moduły • Opis streszczenie – definiowanie opisu pod SEO • Słowa kluczowe- pod SEO • Wyszukiwarki – definiowanie co mają indeksować wyszukiwarki • Możliwość zdefiniowania przypisanych modułów które mają być wyświetlane razem z linkiem

31. Artykuły • Wyszukiwanie artykułów według kategorii • Wyszukiwanie artykułów wyróżnionych • Utwórz artykuł- tworzy artykuł, który następnie trzeba przypisać do menu • Dostosuj- edycja wybranego artykułu • Opublikuj/Wycofaj- zmiana widoczności artykułu na stronie • Archiwizuj- przenosi artykuły do archiwum • Odblokuj – odblokowuje artykuły stworzone przez redaktorów przez osoby do tego uprawnione • Filtrowanie i sortowanie artykułów • Kosz – przeniesienie artykułów do kosza (dopiero w koszu można je definitywnie usunąć)

32. Opcje artykułów • Filtrowanie tekstu - • Czarna lista- lista zabronionych tagów np.. iframe jest standardowo zablokowane • Biała lista- lista dozwolonych tagów • Bez HTML -usuwa wszystkie znaczniki HTML • Nie filtruj- umożliwia osadzanie wszystkich znaczników HTML ale nie PHP i Javascript do tego wymagany jest plugin np. Jumi

33. Rozszerzenia joomla Istnieją trzy podstawowe rodzaje rozszerzeń do Joomla są to moduły, komponenty i dodatki (components, modules, plugins). • Komponent – instaluje się jako menu w panelu administracyjnym • Instaluje się w jako element strony głównej • Plugin jest najczęściej osadzany w artykule strony

34. Komponenty wbudowane • Doniesienia: kategorie i kanały RSS • Kontakty: krótki opis podobny do komponetu sobi2 Można je porządkować w kategorie • Powiadomienia: umożliwia wysyłanie użytkownikom wiadomości które są odczytywane po zalogowaniu danego użytkownika • Przekierowania: umożliwiają przekierowania ze starych nieużywanych adresów na nowe np. adres twain83.cba.pl/index.php wpisujemy index.php • Reklamy – umożliwia publikowanie banerów reklamowych i zliczanie kliknięć a także losowe ich wyświetlanie oraz definiowanie specyficzne dla danego użytkownika można śledzić kliknięcia i potem wyeksportować to do pliku CVS i otworzyć np. w excelu czy w notatniku.

35. Komponenty wbudowane • Statystyki wyszukiwania: najpierw trzeba zbierać statystyki następnie można wyniki wyszukiwania wyświetlić • Zakładki: linki do innych stron wraz z opisem które można wyświetlać łącznie wszystkie w danej kategorii

36. Roszerzenia-> moduły wbudowane • Menu – tworzenie standardowego menu do którego można przypisywać linki • Własny HTML – możliwość osadzenia w kodzie dowolnego kodu HTML • Moduł Ścieżka powrotu – umożliwia nawigację na stronie • Wpinacz – wrzuca za pomocą ramki iframe inną stronę lokalną bądź zdalną • Szukaj – prosta wyszukiwarka

37. Dodatki (plugins) Dodatki nieaktywne standardowo: • Geshi – code highlighter – podświetlacz kodu • Filtr języków dodatek filtruje wyświetlanie treści w zależności od języka, dodatek ma być włączony tylko wtedy, gdy opublikowany jest moduł Przełącznik języka. • Pamięć podręczna – umożliwia cachowanie stron w celu zmniejszenia obciążenia serwera i ich szybszego wyświetlania • Użytkownik profil – umożliwia zmuszenie użytkownika do podania większej ilości danych o osobie (w praktyce można wpisywać dowolne dane)

38. Szablony • Poprzez szablony możemy zarządzać zainstalowanymi templatkami z katalogu joomla/templates można przypisywać poszczególne templatki do konkretnych pozycji menu • Opcja edycji kodu templatki z pozycji menu została wycofana w wersji 1.6, nie ma też możliwości podejrzenia dostępnych punktów zaczepienia w szablonie graficznych

39. Artykuł edycja • Podstawową treścią strony internetowej na bazie joomla są zazwyczaj artykuły • Artykuły można edytować poprzez edytor tekstu JCE JCK TinyMCE CodeMirror lub też bez edytora bezpośrednio w kodzie witryny. Można też przełączać edytor w tryb wyświetlania kodu. • Edytory generują kod HTML i Kaskadowych Arkuszy Stylów CSS • Kod generowany przez edytory może zawierać blędy ponadto mogą występować niezgodności między poszczególnymi przeglądarkami oraz struktura strony może nie być w pełni prawidłowa dlatego potrzeba jest znajomość HTML/CSS.

40. HTML • HTML czyli język znaczników hipertekstowych przy jego pomocy pisze się strony internetowe czyli dokumenty, które następnie można przeglądać i czytać za pomocą tzn. przeglądarki internetowej.

41. HTML cd. • Język HTML jest prosty w nauce, składa się z niewielkiej ilości słów tzn. tagów, znaczników za pomocą których można dowolnie manipulować grafiką i tekstem na stronie.

42. Znaczniki • Język HTML składa się ze znaczników (tagów). Każdy znacznik ma określone znaczenie. Przeglądarka po napotkaniu na znacznik odpowiednio go interpretuje. • Wszystkie znaczniki objęte są nawiasami trójkątnymi. Przekładowe znaczniki • <html> • <head> • <body> • <br>

43. Znaczniki cd. • Większość znaczników otwiera się i zamyka, obejmując jakąś partię tekstu. • Zamknięcieznacznika polega na umieszczeniu przez jego nazwą, ale po otwierającym nawiasie trójkątnym slasha. • Oto przykład • </html> • <b> Ten tekst będzie pogrubiony</b>

44. Zagnieżdżanie znaczników • Znaczniki można w sobie zagnieżdżać • np. • <b> to jest pogrubione <u> a to jeszcze pokreślone </u></b> • <p> Lub pierwsza <br/> linia druga linia </p>

45. Narzędzia webmastera • By tworzyć strony internetowe wystarczy windowsowy notatnik, oczywiście istnieją specjalne programy, które ten proces znacznie ułatwiają. Podczas naszych warsztatów używać będziemy programu bluefish.

46. Sposób w jaki przeglądarka analizuje tekst • Przeglądarka analizuje kod od lewej do prawej i od góry do dołu, dlatego nie ma znaczenia czy cała strona utworzona jest w jednej linijce czy każde słowo będzie w osobnej linii. • Podczas analizy przeglądarka wyłapuje każdy znacznik i nie wyświetla go na stronie, zamiast tego sprawdza jakie każdy znacznik ma znaczenie i odpowiednio konfiguruje sposób wyświetlania danych.

47. XHTML następca HTML • Na co należy zwrócić uwagę: 1. Zawsze dołaczaj znaczniki zamykające Np. <p> tekst </p> 2. Puste elementy muszą zawierać zamykający ukośnik np.: <br/> 3. Zawsze dołączaj do atrybutu jego wartość Umieszczaj wszystkie atrybuty w znakach cudzysłowia

48. XHTML cd. • Zapisuj kod małymi literami • Pamiętaj aby twoje znaczniki były poprawnie zagnieżdżone Np. <h1><b>tekst</b></h1> • Do każdego dokumentu dołączaj deklarację <!DOCTYPE> używaj CSS dla stylów • Zaprzestań używania niezalecanych elementów i atrybutów

49. Komentarze HTML • Dodawanie komentarzy jest proste po prostu umieść komentarz pomiędzy znacznikami komentarza <!-- tutaj dodaj swój komentarz -->

50. Znacznik nowej linii i spacji • Przeglądarka ignoruje spacje i przejścia do nowej linii aby je utworzyć wpisujemy • <br/> Oznacza przejście do nowej linii • Np.: • To jest przykładowy tekst, <br/> który będzie wyświetlany na naszej stronie • Znacznik &nbsp tworzy tzw. twardą spację czyli normalna spację w programie typu word