1 TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA

2 JOOMLA Joomla! - rozprowadzany na zasadach wolnegooprogramowania 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 JoomlaHTML- 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 komputerzeXAMPP- program działający w środowisku MAC Windows Linux zawierający pakiety PHP Mysql PHPMyAdmin i Apache Dowolna przeglądarka internetowa

6 INSTALACJA PROGRAMU XAMPPXAMPP 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 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.PL1. 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), 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!) 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 i hasło podane przy rejestracji (można zmienić hasło w panelu administracyjnym) 9. wchodzimy na stronę i pobieramy wersję 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.. KONIEC21.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 administracyjnyPanel administracyjny jest zawsze dostępny pod adresem Instalujemy spolszczenie panelu administracyjnego: Pobieramy plik ze strony (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 globalnaMoż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 systemMoż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 SerwerMoż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 UprawnieniaMoż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 systemieInformacje dla zaawansowanych administratorów mniędzy innymi werjsa Joomla nazwa serwera wersja PHP i MySQL itp..

23 Użytkownicy → utwórz konto użytkownikaTworzy 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 menuPojedynczy 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

26 Pojedynczy artykuł Alias – adres strony np. wpisując adres 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 menuAtrybut 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 stronyTytuł 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łyOpis 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 kategoriiWyszukiwanie 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 RSSKontakty: 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 wbudowaneMenu – 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

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

44 Zagnieżdżanie znacznikówZnaczniki można w sobie zagnieżdżać np. to jest pogrubione a to jeszcze pokreślone

Lub pierwsza
linia druga linia

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 tekstPrzeglą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.

tekst

48 XHTML cd. Zapisuj kod małymi literamiPamiętaj aby twoje znaczniki były poprawnie zagnieżdżone Np.

tekst