Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze
Huminskaya Aliona Návrh a implementace dynamické webové prezentace pro agendu projektu Erasmus na VOŠIS Bakalářská práce
2010
2
Prohlašuji, že jsem bakalářskou práci na téma Návrh a implementace dynamické webové prezentace pro agendu projektu Erasmus na VOŠIS zpracovala samostatně a použila pouze zdrojů, které cituji a uvádím v seznamu použité literatury.
V Praze dne
Podpis
3
ABSTRAKT Tato diplomová práce se zabývá tvorbou dynamické podoby webu pro agendu projektu Erasmus na VOŠIS. V této práci jsou uvedeny základní informace o webu a webových aplikacích a trendech v tvorbě moderních webů. Cílem práce bylo nasadit statický web na redakční systém pro správu obsahu, a prokázat výhody použití redakčního systému v rámci konkrétní organizace. Klíčová slova: systém pro správu obsahu, webová aplikace, internet, optimalizace, dynamická internetová prezentace, redakční systém.
ABSTRACT This diploma work deals with creation of dynamic website for the project Erasmus at VOŠIS. This work provides basic information on the Web and Web applications and trends in modern work sites. The aim was to convert a static site to CMS content management system, and demonstrate advantages of using content management system within a specific organization. Keywords: content management system, web-based application, internet, optimalization, dynamic website, editorial system.
4
Obsah ÚVOD ...................................................................................................................................... 7 TEORETICKÁ ČÁST ......................................................................................................... 8
I. 1.
Internet a web ......................................................................................................................... 9 1 . 1 Internet ............................................................................................................................................ 9
2.
3.
1.2
TCP/IP ........................................................................................................................................ 9
1.3
Princip fungování prohlížeče www .......................................................................................... 10
1.4
Internetová doména .................................................................................................................. 10
1.5
Internetová prezentace .............................................................................................................. 11
1.5.1
Statická internetová prezentace ........................................................................................................... 11
1.5.2
Dynamická internetová prezentace ...................................................................................................... 12
1.5.3
Budoucnost statické a dynamické internetové prezentace ................................................................... 13
Redakční systém .................................................................................................................. 13 2.1
Co je CMS / Redakční systém? ................................................................................................ 14
2.2
CMS na podkladě webu (Webový CMS) ................................................................................. 14
2.3
Redakční systémy ..................................................................................................................... 15
2.3.1
Wordpress............................................................................................................................................ 15
2.3.2
Drupal ............................................................................................................................................ 16
2.3.3
United –Nuke ................................................................................................................................. 16
2.3.4
PhpRS ............................................................................................................................................ 17
2.3.5
Joomla!........................................................................................................................................... 17
2.3.5.1
Co je to komponenta a modul, v rámci redakčního systému Joomla!?.......................................... 18
2.3.5.2
Co je to šablona, v rámci redakčního systému Joomla!? ................................................................ 19
Shrnutí .................................................................................................................................. 20
II. PRAKTICKÁ ČÁST ......................................................................................................... 21 4.
Analýza a návrh webové prezentace Erasmus ..................................................................... 22 4.1
O programu LLP Erasmus ........................................................................................................ 22
4.2
Stav webové prezentace před redesignem ................................................................................ 22
4.3
Návrh a realizace statické podoby webové prezentace pro agendu ERASMUS, v rámci
předmětu „Projekt“ ................................................................................................................................. 23
5.
6.
Dynamická podoba stránek .................................................................................................. 26 5.1
Technické a uživatelské požadavky.......................................................................................... 27
5.2
Srovnání redakčních systémů ................................................................................................... 27
Implementace redakčního systému pro projekt Erasmus ..................................................... 30 6.1
Příprava na instalaci CMS ........................................................................................................ 30
6.1.1
Stažení programu ................................................................................................................................. 30
6.1.2
Vytvoření databáze .............................................................................................................................. 30
6.1.3
Kopírování souborů ............................................................................................................................. 30
6.2
Instalace .................................................................................................................................... 31
6.3
Výběr jazyka............................................................................................................................. 31
5
6.3.1
Před instalační kontrola ....................................................................................................................... 31
6.4
Konfigurace MySQL databáze ................................................................................................. 31
6.5
Nastavení FTP .......................................................................................................................... 32
6.6
Hlavní nastavení ....................................................................................................................... 32
6.7
Instalace češtiny........................................................................................................................ 32
7.
Аdministrační prostředí........................................................................................................ 33
8.
Globální nastaveni ............................................................................................................... 35
9.
Správce článků ..................................................................................................................... 39 9.1
WYSIWIG editor – obsah článku ............................................................................................. 39
9.2
Úvodní stránka ......................................................................................................................... 43
9.3
Nastavení .................................................................................................................................. 44
9.4
(Od)Arсhivování a z(ne)veřejnění článků ................................................................................ 45
9.5
Kopírování, přesunutí nebo smazání článku ............................................................................. 45
9.6
Vytvoření nového článku.......................................................................................................... 46
9.7
Uložení, náhled článku ............................................................................................................. 46
10. Správce médií....................................................................................................................... 47 11. Správce nabídky ................................................................................................................... 48 11.1
Další možnosti práce s nabídkou .............................................................................................. 49
12. Rozšíření .............................................................................................................................. 50 12.1
Komponenty ............................................................................................................................. 50
12.2
Moduly ..................................................................................................................................... 51
12.3
Šablony ..................................................................................................................................... 52
13. Shrnutí .................................................................................................................................. 54
ZÁVĚR .................................................................................................................................. 56 SEZNAM POUŽITÉ LITERATURY ........................................................................................... 57 SEZNAM PŘÍLOH ................................................................................................................... 59
6
Úvod Velký růst popularity internetu a to hlavně díky službě World Wide Web klade vyšší nároky na moderní webové prezentace a na jejich správu aktualizaci. Ještě před několika lety byly internetové prezentace a stránky tvořeny statickými soubory s neměnným obsahem. Tento obsah, textový nebo grafický, nešlo operativně měnit, anebo pro správu podobného webu bylo potřeba zapojit specializovanou osobu. Tím pádem byla aktualizace webu velmi časově náročná a hlavně vyžadovala, aby osoby, které se starají o aktualizaci, měly si specifické znalosti. Dnes je na webových portálech pozorován velký narůst objemu informací a proto je důležité udržovat web stále aktualizovaný, aby byl dynamický, aby se dokázal rychle měnit a reagovat na požadavky uživatelů. Ne každá organizace, škola nebo společnost má personál, který zná programovací jazyky (X)HTML, PHP, JavaScript a další pro tvorbu a správu webu. Existuje však specifická kategorie softwaru, které dokážou usnadnit správu obsahu webové prezentace. Jedná se o Content Management Systemm (dále jen CMS), neboli systém pro správu obsahu redakční systém. CMS umožní web často aktualizovat za téměř nulové náklady a bez znalosti programovacích jazyků. Pomocí CMS je možno jednoduše přidávat aktuality, publikovat nové články, vytvářet nové webové stránky. V této bakalářské práci bude popsána problematika tvorby webových stránek s využitím CMS na platformě Open Source a budou prezentované jeho funkce a možnosti. Dále provedu zhodnocení a analýzu stávajícího webu, a stanovím kritéria pro převod na dynamickou verzi. Na základě analýzy potřeb webové prezentace ERASMUS porovnám jednotlivé redakční systémy a přistoupím k instalaci vhodného systému, kterou zdokumentuji a doplním manuálem pro potřeby administrátora stránek Erasmus. Na závěr bude rovněž popsaná samotná instalace, minimální požadavky pro běh systému na serveru a podpora češtiny.
7
I. Teoretická část
8
1.
Internet a web
V teoretické části své práce se pokusím sepsat teorii, která se týče mého tématu. Protože se moje práce zabývá moderními internetovými technologiemi a webem, ve stručnosti uvedu a vysvětlím následující pojmy: internet, zásady fungovaní internetu, web. Jelikož si ve své práci kladu za cíl popsat a zdokumentovat převod webové prezentace ze statické do dynamické podoby, vysvětlím, v čem je rozdíl mezi těmito pojmy a co tento proces obnáší.
1 .1 Internet Internet – to je celosvětově známý systém navzájem propojených počítačů. Počítače v této síti mezi sebou komunikují pomocí protokolu TCP/IP (tento pojem vysvětlím v následující podkapitole). Nejznámější službou internetu je WWW (World Wide Web). Občas se tyto pojmy pletou a mnoho lidí často totožní WWW s internetem, což není vůbec správně. Historie internetu začíná v Americe. V době studené války byla založena agentura ARPA (Advanced Research Project Agency), která jako první propojila několikpočítačů (kolem 10 ) v různých částech USA. Tato síť mohla být použitelná pro přenos dat, i když některé části sítě byly poškozené. V roce 1985 byl zahájen program NSFNET, ten znamenal komerční a civilní rozvoj internetu. Služba World Wide Web vznikla v roce 1989, kdy fyzik a zakladatel služby World Wide Web Tim Berners-Lee publikoval svůj první návrh vývoje této služby internetu. [1]
1 .2 TCP/IP Celá komunikace v internetu probíhá pomocí protokolu TCP/IP (je zkratka slov Transmission Control Protocol / Internet Protocol) a proto se pokusím ve stručnosti uvést tento pojem a popsat jeho architekturu. TCP/IP zahrnuje v sobě několik vrstev, které umožňují předávání dat. Výměna informací mezi vrstvami je přesně definována. Vrstvy jsou propojeny navzájem a každá je jakoby napojená na nižší a tím pádem využívá službu své nižší „kamarádky“. Architektura TCP/IP se skládá z čtyř vrstev, a těmi jsou: •
aplikační vrstva (application layer) – je zodpovědná za přenos dat
ke konkrétním službám pro uživatele. Slouží pro napojení na konkrétní aplikace, které jsou pak ovládané koncovým uživatelem.
9
•
transportní vrstva (transport layer) – tato vrstva má za úkol přizpůsobit chování
sítě potřebám konkrétní aplikace. •
síťová vrstva (network layer) – zajišťuje síťovou adresaci, totiž kam mají být
data nasměrována. vrstva síťového rozhraní (network interface) – je nejnižší vrstva a má za úkol umožnit přístup k fyzickému přenosovému médiu, kterými je například modemy a další podobná zařízení. Internetová adresa. [2]
1 .3 Princip fungování prohlížeče www Když mluvíme o službě WWW, tak musíme říct, jak vlastně funguje, a co se děje v tu chvíli když otevíráme prohlížeč a píšeme na klávesnici oblíbenou adresu. Adresa, kterou zadáváme do prohlížeče, se nazývá internetová adresa neboli internetová doména (pojem, který vysvětlím v následující podkapitole). Název se převede za pomocí systému DNS na IP adresu, na kterou je prohlížeč přesměrován. Nějakou chvílí trvá, než se zobrazí stránka – tento čas prohlížeč potřebuje na to, aby interpretoval data, která dostal z jiného počítače nebo serveru a převedl je do nám známé podoby, a tou je standardní webová stránka. Obyčejně se webové stránky vytváří za pomocí značkovacího jazyka HTML, ale o tom pohovoříme v podkapitole, věnované webovým stránkám. [1]
1 .4 Internetová doména Doména je jednoznačné a unikátní jméno počítače nebo i zároveň několika počítačů v sítí. Domény jsou vlastně IP adresy převedené na text. Doména je rozdělena na několik částí pomocí teček, například www.sks.cz. Poslední části, která je tvořena zkratkami „cz“, „com“, „ru“ říkáme doména nejvyšší úrovně, a ta popisuje celou velkou skupinu počítačů v sítí. Obyčejně popisuje rozdělení na země a obecné skupiny organizací. Pak zpravidla následuje název organizace, nebo slovo, které by obecně popisovalo obsahovou podstatu této stránky – jaký obsah získáme a kam se dostaneme, jestli na tuto adresu klikneme. Jak už bylo řečeno, doména je slovní identifikátor adresy, který je převeden pomocí služby DNS z IP adresy. IP adresa je tvořena čísly, a v podstatě je to taky unikátní identifikátor. Slovní domény byly zavedeny pro snazší zapamatování, protože na rozdíl od počítače si uživatel číselnou adresu (například 192.168.48.39) zapamatujete těžko. Takže to, co píšeme
10
my do prohlížeče slovy – internet adresa, je následně převedeno na čísla – IP adresa, která dokáže počítač „přečíst“a nasměrovat nás, kam je potřeba, tedy na příslušnou webovou stránku. No a pak na našem monitoru vidíme obvyklý vzhled webové stránky, neboli internetové prezentace, o které pohovoříme v následující kapitole. [1]
1 .5 Internetová prezentace Internetová prezentace obecně je soubor webových stránek, které mají za účel prezentovat firmu, akci, program atd. V dnešní době existují dva druhy internetové prezentace, a sice statické a dynamické. V čem je mezi nimi rozdíl, jaké jsou výhody nebo nevýhody a jak poznat, o jakou webovou prezentace jde?
1.5.1
Statická internetová prezentace
Statické stránky představují v podstatě soubor jednotlivých a vzájemně propojených webových stránek. Stránky jsou napsány v jazyce HTML – jazyk, který umožňuje publikaci dokumentů na Internetu. Každá stránka je statická neboli je ve své finální podobě. Je v tom stavu, ve kterém byla vytvořena (napsána autorem) a ve kterém se zobrazí nám. Je tedy hned možno vyvodit nevýhody podobného řešení – to je jejich obtížná udržitelnost při nárocích na další rozšiřování a změnu obsahu webových stránek. A to hlavně z toho důvodu, že nedokáže zobrazovat data uložená v databázi, která se mohou průběžně měnit. Další a podstatnou nevýhodou je, že stránky může tvořit pouze osoba znalá alespoň základů HTML a internetových technologií, jako například http, FTP, AJAX. Přesně proto jsou podobné stránky vhodné pro menší organizace, a to za podmínky, že se informace na stránkách nebudou často měnit. Statické stránky fungují následovně: zdrojový kód, který je napsán v HTML se odešle do prohlížeče (jak jsem zmiňovala dříve, prohlížeč zažádá zdrojový kód), vytvoří vzhled stránky podle tohoto kódu a pak nám tuto stránku zobrazí v okně prohlížeče. Výhodou statických webů je jejich jednoduchost a rychlost načítání stránky prohlížečem. Statický web obsahuje zpravidla 5 - 10 stránek např. o firmě, historie firmy, nabízené služby a produkty, jednoduchá fotogalerie a kontaktní informace. Tento web je pro firmu na nějakou dobu uspokojivou alternativou.
11
Opět mezi nevýhody takové varianty patří jednoznačně správa obsahu (aktuální informace, texty, fotky apod.). Tento typ webu je statický (neměnný) a změny se musejí dělat prostřednictvím programátora a s tím jsou spojené také budoucí náklady na provoz webu. Dále texty, obrázky a celý obsah webu musí být připraveny předem, aby programátor stránek tento obsah zakomponoval do stránek. Z toho plyne i to, že pokud budete potřebovat často měnit údaje na stránkách nebo máte velké množství informací, které potřebujete prezentovat, je pro vás statický web nevhodný. [3, 4]
1.5.2
Dynamická internetová prezentace
Co je tedy dynamický web? Je možné ho popsat jako rozšíření statického webu o některé další prvky, které jsou napsány v programovacím jazyce, a až po určité uživatelské akci se vyhodnocují a sestaví prohlížečem. Základem podobných stránek je programovací technologie, program (software) a data uložená v databázi. Program, který je předem vytvořen pomocí programovacího jazyka (obvykle se jedná o PHP, Java, PERL apod.) je umístěný na internetovém serveru, může to být redakční systém, nebo online obchod, nebo aukce. Pak na základě požadavků prohlížeče na zobrazení konkrétní stránky – ten program webovou stránku dynamicky sestavuje a odesílá do prohlížeče uživatele hotovou a v aktuálním stavu. Zjednodušeně se dá říci, že stránka je sestavena na základě "šablony" (tento pojem více podrobně budu rozebírat v dalších kapitolách) určující vzhled a dat získaných z databáze (data jsou například seznam zboží, článků nebo konkrétní článek). Dynamické stránky, na rozdíl od statických, fyzicky neexistují ve složeném stavu, nejsou předem sestavené, ale pokaždé, když jsou vyžadovány prohlížečem, tak se sestavují zase od nuly. V případě že je informací hodně, načítaní a sestavování stránky může probíhat pomaleji. Dynamický web je představován dvěma technologiemi, a to jsou serverové a klientské. Technologie jsou nazvané podle toho, kde se dynamické skripty (programy) vyhodnocují. U serverových technologií je skript vyhodnocen na straně serveru a prohlížeči se tak odešle výsledná statická stránka, která se zobrazí u nás a bude obsahovat aktuální data, získané z databáze. Klientské technologie spočívají v odeslání zdrojových kódů stránky prohlížeči, který tak danou technologii musí znát, vyhodnotit skripty a pak teprve sestavit výslednou stránku (tak obyčejně funguje takzvaný JavaScript). Výhody dynamického webu jsou zřejmé
12
– možnost interakce mezi webem a uživatelem. Další výhodou je snadná údržba a aktualizace. Není potřeba, aby uživatel znal programovací jazyky, protože program, který se stará o vzhled stránky, je napsán předem. Možnost poměrně často měnit vzhled stránky a přidávat velké množství informací je dalším plusem. [3, 4]
1.5.3
Budoucnost statické a dynamické internetové prezentace
Jak je možné poznat rozdíl mezí dynamickým a statickým webem? Vzhled stránky, kterou nám zobrazí počítač, bude úplně stejný. Rozdíl je v tom, že u dynamických webů a v případě použití redakčního systému existují zpravidla dvě rozhraní. Administrační rozhraní Back-end je návštěvníkům webu skryté a tvoří jej redakční systém, kde je možné spravovat celý obsah webu a jeho vzhled. Front-end rozhraní je to, co vidí každý čtenář a návštěvník webu. Tím pádem běžný uživatel rozdíl nepozná. Je zřetelný pouze pro administrátora a prohlížeč, který stránku bude sestavovat. A kdy je čas přejit na dynamickou internetovou prezentace? Pokud statická internetová prezentace není postačující, je příliš velká a složitá a tím pádem i náklady na její údržbu stále rostoucí, je čas zvážit či rozhodnout se pro změnu. Dynamická internetová prezentace přináší spoustu výhod, které jsem uvedla v předchozí kapitole, a podle mého mínění se budoucnost internetu skrývá právě za dynamickou podobou webu. Netvrdím, že statická verze přestane existovat, ale v dnešní době, kdy se web stále rozvíjí a skoro každá firma, která chce uspět musí mít svoje vlastní webové stránky, má dynamický web skvělou budoucnost. A protože podstatou dynamického webu je program, který obsah stránek dynamické zpracovává, v následující kapitole představím zástupce tohoto programu.
2. Redakční systém V této kapitole projednám samotný redakční systém, jeho obecné pojetí a konkrétní příklady. Ve stručnosti popíšu několik na českém trhu známých CMS, a více pozornosti věnuji redakčnímu systému Joomla.
13
2 .1 Co je CMS / Redakční systém? CMS / Redakční systém neboli Content Management System je webová aplikace, která zajišťuje tvorbu a správu obsahu webu, a to hlavně bez znalostí tvorby WWW stránek. CMS se obvykle skládá z databáze, kde jsou uložená data, webové části (Front-End), která se zobrazí běžnému uživateli a administrace (Back-End). Abychom mohli pracovat v podobném systému, stačí mít přístup na internet a internetový prohlížeč. Z překladu slova „content“ v názvu, jasně vyplývá, že se jedná o práci s obsahem, ať už je obsahem míněn text, obrázky, dokumenty, videa ap. Hlavním cílem každého takového systému je přehledně a kvalitně zobrazit požadované informace a umožnit uživateli jednoduché ovládání. Pro internetové použití existuje celá řada nejrůznějších CMS, lišících se podle svých schopností. K předchůdcům CMS patří různá administrační rozhraní pro vkládání novinek a aktualit. Složitější CMS umožňují vkládání různých článků a spotů (včetně tabulek a obrázků) do předem určených kategorií, případně úpravu všech textů na webu. Používají se k tomu tzv. WYSIWYG editory 1. [5]
2 .2 CMS na podkladě webu (Webový CMS) V dnešní době, když mluvíme o CMS, máme obyčejně na mysli systém pro správu internetového obsahu, totiž obsahu webových stránek. CMS se dělí na několik druhů (taky je poměrně známý ECMS - Enterprise Content Management System). Ale pojem CMS se stal téměř synonymem „Web-based CMS“. V našem případě mluvíme zejména o Web-based systému. V Česku se ale často užívá pojem „redakční systém“. Kvalitní CMS musí být jednoduchý a intuitivní při ovládaní pro běžného uživatele, který nemá hodně zkušeností v práci s webem a nebo programátorské znalosti. Většina CMS podporuje následující funkce:
1
•
vytváření webových stránek
•
vytváření položek menu
What You See Is What You Get, vice podrobně se budu věnovat principu práce s editorem a jeho popisu ve své
praktické části.
14
•
jednoduchá
správa
obsahu
stránek
(texty,
obrázky…)
bez znalostí
programovaní •
editovaní textů online
•
WYSIWYG textový editor (What You See Is What You Get)
•
import a následná prezentace textového a multimediálního materiálu (obrázky,
videa, animace…) •
registrace a administrace uživatelů
•
přidělení přístupu a „práv uživatelům prostřednictvím hesla "
•
e-mailová anebo jiná notifikace vybraných uživatelů v případě změny obsahu
•
oddělení obsahu od formy – mnohé CMS systémy mají například
předdefinované styly písma (velikost, typ písma, barva), takže když přidáte text na stránku, tak se automaticky zobrazí v daném stylu. [5]
2 .3 Redakční systémy Jak jsem zmínila, ve stručnosti popíšu několik známých systémů, které jsou (poznámka autora) dostatečně často používané v Česku a které upoutaly mojí pozornost nabízenými službami a vlastnostmi. Dál, ve své praktické částí, provedu analýzu a porovnám dané systémy podle zvolených parametrů. Proto bych ráda v teoretické části uvedla jejich krátký popis a charakteristiku. I když je na trhu open source systémů podstatně víc, zvolila jsem z různých důvodů jenom pět. Moje volba byla ovlivněná vlastními zkušenostmi, doporučením kolegů programátorů z práce a mírou popularity některých ze zvolených redakčních systémů.
2.3.1
Wordpress
Redakční systém, napsán v jazyce PHP a MySQL. Je velmi jednoduchý a to je také jeho hlavní výhoda, díky které je výstupem čistý a validní kód, při zachování standardů XML, XHTML a CSS. Pro tento systém existuje množství grafických stylů a šablon, které jsou zpracovány na docela vysoké grafické úrovni.
15
Systém podporuje i různé moduly a z nich jsou nejdůležitější: podpora „pěkné“ URL 2, štítky a především výborný WYSIWYG editor - Texy. Editor je mimochodem vyvíjen českým autorem a patří k nejlepším českým programům pro formátování a styl textu. Jednoduchost systému je zároveň jeho nevýhodou, není tedy určen pro rozsáhlejší prezentace, nemá v sobě zakomponované některé funkce, které jsou důležité pro webovou prezentaci orientovanou na prezentace většího objemu dat. Je to spíše blogovací systém, což znamená, že se hody při tvorbě blogů, přidávání příspěvků atd. [6]
2.3.2
Drupal
Další populární systém pro správu obsahu je Drupal. Je naprogramován v jazyce PHP, data se ukládají do databází MySQL nebo PostgreSQL. Drupal je celý tvořen moduly. V jádru systému je šest modulů, které se starají o základní funkce (tvorba obsahu, administrace bloků atd.) Systém po instalaci není velmi rozsáhlý, ale je možné doinstalovat moduly, které jsou pro administraci a údržbu webu potřebné. Drupal je lokalizován i do češtiny, stejně tak i jeho samotná instalace. Práce se šablonami jsou další velkou výhodou tohoto systému. Již v základní instalaci možno najít několik šablon a další je možno stáhnout z internetu zdarma. Dobrá vlastnost tohoto CMS je, že šablony je možno, do určité míry, upravit přímo v administraci systému. K nejlepším vlastnostem modulů tohoto systému patří: pěkná URL, vícejazyčný web s podporou pěkných URL a systém autorizace uživatelů, pomocí kterého můžete uživatelům nastavit práva a přístupy k vybraným modulům. Nevýhodu tohoto CMS je, že instalace neprobíhá, jak je u jiných CMS systému zvykem, přes uživatelské rozhraní. Nezkušeným uživatelům může instalace systému způsobovat problémy. Nepřehledná je také samotná administrace systému a jednotlivých modulů. [6]
2.3.3
United –Nuke
United-Nuke je redakční systém na bázi PHP-Nuke, a je vytvořen českým autorem. Důraz je kladen na bezpečnost a spolehlivost systému, a proto systém obsahuje zajímavou technologii NukeSentinel™, která chrání systém proti DoS, Cross site scriptingu, Sql injection a dalším
2
Adresa, která vypadá přátelsky (čitelně), je pěkná a pochopitelná na první pohled. Například URL, které
vypadá takto: http://www.nazevdomeny.cz/index.php/clanky/nazev-clanku, je mnohem lepší než http://www.nazevdomeny.cz/index.php?option=com_content&view=article&id=5&Itemid=2. Lepší je jak pro uživatele (snadněji se zapamatuje) ale také pro vyhledávače, protože může obsahovat důležitá klíčová slova.
16
případným útokům hackerů. Z podstatných funkcí systému jsou důležité možnosti multi jazyčnosti webu, podpora pro předplacený obsah, možnost sdílení uživatelských dat mezi více systémy – je kompatibilní s dalšími opensource systémy, optimalizace pro vyhledávače pomocí technologie Magic SEO URL. K podpoře SEO zde patří i modul Sitemaps, který umožňuje informovat indexovacího robota daného vyhledávače o struktuře celého webu. Systém taky zahrnuje WYSIWYG Editor. Je ale přetížený množstvím nepotřebných funkcí, což je spíše jeho negativní stránka, protože nezkušený uživatel v něm může snadno ztratit orientaci. Velké mínus systému vnímám ve špatně propracované úpravě a tvorbě nových šablon. Další negativum je potřeba placeného přístupu do některých částí systému. [6]
2.3.4
PhpRS
Je další ze série redakčních systémů vytvořených v jazyce PHP a MySQL. Je distribuován pod licencí GNU GPL. Všechny systémové kódy a texty jsou napsané v českém jazyce, protože jeho autorem je český programátor Jiří Lukáš. Systém je vybaven přehlednou a jednoduchou administrací a zmiňovanou lokalizací. Výhodou tohoto systému je multi uživatelská správa, kdy se rozlišují typy uživatelů a jejich přístupová práva, které si můžete tvořit sami. Pomocí ní je možné odlišit administrátora webu, který se stará o správné nastavení systému, redaktora, který píše články a aktuality a registrovaného uživatele. Ze základních funkcí jsou zajímavé ankety, správa reklamních bannerů, statistiky a novinky pro publikaci krátkých zpráv. Tento systém ale se nehodí pro správu rozsáhlejšího projektu, a to hlavně kvůli nedostatku grafických šablon, doplňkových pluginů a menší uživatelské základně. Další nevýhodou systému je slabá podpora SEO (optimalizace pro vyhledávače). [6]
2.3.5
Joomla!
Joomla je slovo které pochází z arabštiny a znamená to nebo „shluk slov, které dávají smysl“ nebo „dohromady.“ Slovo se často používá ve významu „Součet“ nebo „Suma“. Toto slovo bylo jako jméno zvoleno poté, co vznikl tento projekt a má vyjadřovat společný zájem mnoha lidí vytvořit dobrou věc a podílet se na společném úspěchu. Joomla! pro nás ale znamená vyspělý a velmi populární CMS, který je lokalizován do mnoha světových jazyků včetně češtiny. Joomla však nebyla vyvíjená od začátku jak samostatný projekt, ale vznikla na základě projektu Mambo (Mambo Open Source nebo MOS, redakční systém na správu obsahu). V srpnu roku 2005 se celý vývojářský tým rozhodl založit si svůj 17
vlastní projekt, a to hlavně kvůli neshodám, které vznikli mezi vlastníky projektu Mambo a vývojáři. [7] Základní charakteristika Joomly je skoro stejná jak u ostatních redakčních systémů, které jsem zmiňovala. Jedná se o redakční systém, který je naprogramován pomocí skriptovacího jazyka PHP a MySQL. Jeho možnosti jsou docela široké, vlastní jádro systému však mnoho funkcí nemá, rozšiřuje se zásuvnými moduly, kterých má Joomla velké množství a stále se vyvíjí nové. V Česku existuje celkem rozsáhlá skupina uživatelů tohoto systému. Dalším velkým plusem je, že místní komunita připravuje překlady rozhraní a tvoří vlastní dokumentaci. [8] Na začátku roku 2008 vyšla nová verze označovaná jako 1.5. Tato verze byla velmi očekávaná a přinesla spoustu nových vlastností (včetně překladu administrační části). Celá struktura Joomly se změnila, dostala jednotnou formu, což je pro vývojáře přehlednější a pro uživatele mnohem srozumitelnější. Co všechno můžete s redakčním systémem provádět? Pomocí prostředí, které je velmi podobné klasickým textovým editorům (WYSIWYG), je možno vkládat články. Je zde možné vytvářet obrázkové galerie a vytvořit repositář pro stahování multimédií nebo různých souborů. Pro firmy se určitě hodí i vytvoření internetového obchodu a spousta dalších možností, které se ještě ve své práci zmíním. [7] 2.3.5.1
Co je to komponenta a modul, v rámci redakčního systému
Joomla!? V této kapitole detailněji popíšu některé důležité pojmy, spojené s redakčním systémem Joomla. Jak jsem zmínila, v praktické části představím analýzu a porovnání redakčních systémů, na jejichž základě byla zvolena Joomla. A proto v následujících kapitolách budou uvedeny pojmy, spojené právě s Joomlou. Komponenta (neboli díl, složka) a modul jsou velmi důležitou součástí Joomly. Jak už jsem zmiňovala, Joomla není dodávána s mnoha součástmi, a má po instalaci poměrně málo funkcí (jenom základní, které mohou být ale postačující pro hodně uživatelů). A právě pomocí rozšíření zvaných komponenty a moduly lze do Joomly přidávat nové a nové funkce. Komponenta je rozšiřující prvek (ať už obsahový nebo aplikace) speciálně napsaný pro přidání požadované funkčnosti do systému. Je to v zásadě skript, který je rovněž napsán 18
v jazyce PHP. Výhodou je že takovýto skript může byt napsán a přidán až po tom, co máme nainstalovaný celý systém. Napsat ho může programátor podle požadavků zákazníka (napsání skriptu pro komponentu, i když bude placena, stojí podstatně méně peněz než úprava například celého webu). Typickým zástupcem komponenty je např. obrázková galerie (tedy integrovaný doplněk, který umožňuje práci s množstvím obrázků a umí je zobrazit a připravit i zmenšené náhledy z vašich fotografií), internetový obchod nebo diskusní fórum. Co se týče modulů, tak dobrým příkladem může být třeba možnost vytvoření fóra nebo jednoduché hry. Také existuje možnost přesně vymezit rozsah funkcí, které budou stránky postavené na Joomle podporovat. Mezi výhody podobných rozšíření patří skutečnost, že uživatel není nucen se tak ihned rozhodovat - přidat internetový obchod hned nebo až v příštím roce. Může svůj web o podobné prvky rozšířit kdykoliv a zase zdarma. V dnešní době jsou moduly a komponenty vyvíjený nezávislými vývojáři, kteří pak mohou své produkty upravovat a vylepšovat podle požadavků a následně prodávat. [9] 2.3.5.2
Co je to šablona, v rámci redakčního systému Joomla!?
Šablona, nebo jinými slovy pohled - je předloha, podle které se vytváří dokument, stránka, web. Šablona se stará jen o zobrazování dat a jejich prezentaci. Šablona má za úkol nadefinovat vlastnosti stránky, a to pomoci různých stylů, které v sebe zahrnuje. Redakční systém používá šablony, a proto uživatel nemusí řešit kam umístit menu, nebo článek a jak má vypadat stránka. Toto obstarávají právě šablony, kde jsou definované oblasti, ve kterých se zobrazuje požadovaný obsah. Šablona je předem vytvořena a pro Joomlu jich existuje velké množství, které jsou na internetu k dostání zdarma, ale taky i za peníze. Jestliže uživatel chce, aby vzhled jeho stránky byl unikátní, musí si vytvořit šablonu sám. Vytvoření šablony však není úplně triviální, a je zapotřebí znát jak možnosti Joomly, tak HTML a CSS. 3 3
CSS - je sbírka metod pro grafickou úpravu webových stránek, jazyk pro popis způsobu zobrazení stránek.
CSS neboli Cascading Style Sheets byli vytvořeny někdy kolem roku 1997, a od té doby je velmi populární a dnes už téměř žádný web není tvořen bez pomocí těchto stylů. Cascading Style Sheets, česky "kaskádové styly". Proč kaskádové? Protože se na sebe mohou definice stylů napojovat a tvořit vrstvy, a styl tím pádem muže přebírat vlastnosti toho stylu na který je napojen (nadřazen).
19
Proto může uživatel volit ze dvou možností: bud‘ si najde šablonu zdarma, přičemž musí pamatovat na to, že vzhled jeho stránek nebude unikátní. Anebo může uživatel šablonu vytvořit sám nebo zakoupit a mít tak jistotu, že jeho stránky unikátní budou. Podobná situace na internetu nastává poměrně často: můžeme něco získat zadarmo, ale s určitými omezeními a podmínkami, anebo si zakoupit plnou verzi za peníze. Joomla není výjimkou a je také přizpůsobena situaci a podmínkám na internetu.
3. Shrnutí V této kapitole jsem se snažila sepsat a logicky napojit teorii, která nám pomůže lépe podložit a pochopit téma mojí práce a hlavně její praktickou část. K některým pojmům se budeme vracet a detailněji probírat i v praktické části. V praktické části začnu pracovat nad dynamickou podobou webu. V další části se budeme moci podívat z praktické stránky na věci, o kterých jsem se zmínila v teoretické části. Tato část by měla sloužit k bližšímu seznámení s provedenou analýzou, zdokumentuji v ní práci na konkrétním projektu, který se zabývá převodem existujícího statického webu do dynamické podoby.
20
II. Praktická část
21
4. Analýza a návrh webové prezentace Erasmus V praktické části své diplomové práce popíšu strukturu webové prezentace programu ERASMUS na Vyšší odborné škole informačních služeb v Praze (VOŠIS), provedu zhodnocení stavu stávající webové prezentace a po její plné rekonstrukci (redesignu) a převodu do dynamické podoby, pomocí redakčního systému Joomla! Popíšu návrh nové webové prezentace, hlavní cíle a požadavky na novou prezentaci, které doplním manuálem pro uživatele, resp. Správce webu.
4 .1 O programu LLP Erasmus Program Erasmus je v rámci programu celoživotního učení zaměřen na vysokoškolské vzdělávání a na odborné vzdělávání na vysokoškolské úrovni. Program je určen především pro studenty, pedagogy a zaměstnance vysokoškolských institucí, ale i pro školitele z podniků a dalších subjektů. VOŠIS je do programu EU Erasmus zapojena již 6. rokem. Je držitelem jak EUC (Erasmus University Charter) tak EEUC (Erasmus Extended University Charter a studenti všech oborů VOŠIS tak mají možnost absolvovat až roční studijní nebo pracovní stáž v zemích Evropské unie. [10]
4 .2 Stav webové prezentace před redesignem Projekt Erasmus na VOŠIS dlouho neměl své vlastní, samostatné webové stránky. Informace o projektu byla umístěna na školních stránkách VOŠIS, což mělo spoustu nevýhod. Stránky projektu nebyli strukturované, neměly vlastní design a nebyl zde prostor na umístění potřebných a aktuálních informací.
22
Obr.1. Náhled webové stránky VOŠIS
4 .3 Návrh a realizace statické podoby webové prezentace pro agendu ERASMUS, v rámci předmětu „Projekt“ V rámci předmětu „Projekt“ pod vedením paní Kučerové proběhla zásadní změna webu projektu Erasmus. Tým, který se skládal z 6 členů včetně mně (Perná Lucie, Huminskaya Aliona, Khabirova Maja, Al-Haj-Epraheem Yousra, Trondin Anton a Batrnová Hana), dostal za úkol vytvořit webovou prezentaci pro agendu projektu Erasmus na VOŠIS. Zadavatelem byla Mgr. Iva Bothová. Paní Bothová vznesla několik základních požadavků, podle kterých jsme se měli řídit při práci nad webovou prezentací: • Provést úplný redesign stávajících stránek. Design měl vycházet z korporátních barev projektu Erasmus a měli do toho být zapojené loga projektu. Design měl být otevřený, přehledný, se snadnou orientací ve struktuře, měl být moderní a zodpovídat současným trendům na internetu (Web 2.0). • Navrhnout strukturu webu, která by zodpovídala obsahu stránek, a umožňovala snadnou orientaci jak českým tak i zahraničním studentům. • Naplnit stránky obsahem.
23
Po prostudování a zhodnocení podkladů, které jsme dostali od zadavatele jsme navrhli následující strukturu webu:
Obr. 2. Schéma struktury webu [11]
24
Důležitým krokem bylo zakomponovat všechny prvky do designu stránky tak, aby se na něm dalo snadno zorientovat, aby webové stránky byly uživatelské přívětivé a uživatel mohl rychle najít potřebnou informaci. Rozmístění jednotlivých prvků webu je znázorněno ve wireframe 4 na následujícím obrázku:
Obr. 3. Grafické rozmístění objektů na stránce Následně jsem vytvořila unikátní grafický design stránek, ve kterém jsem zapracovala požadavky zadavatele na jejich vzhled a strukturu. Do designu jsem zakomponovala následující prvky: • Logo projektu • Barevnou korespondenci s logem projektu • Fotodokumentace ze stáží Erasmus Grafický návrh jsem optimalizovala pro nejčastěji používané rozlišení monitoru 1024x768 5 – tak, aby se web správně a uživatelské příjemně zobrazoval v různých prohlížečích a na různých monitorech.
Pojem wireframe (nebo se mu říká "drátěný model") se v oblasti vývoje webových prezentací či aplikací používá pro zjednodušený model nebo návrh definující funkci a obsah stránek webu. Používá se pro náhled nového řešení. 5 Statistika rozlišení monitoru uživatelů v ČR. Zdroj gemiusRanking http://www.rankings.cz/ 4
25
Po zapracování drobných úprav podle připomínek zadavatele, byl design stránek zadavatelem schválen.
Obr. 4. Náhled designu webové prezentace Erasmus
V týmu jsme společně připravili a naplnili web obsahem. Což znamenalo časově náročný převod textů z word dokumentů do validní html podoby, dále rozmístění rubrik a jich následující náplň. Poté proběhla kontrola celého webu, testování funkčnosti, správnost odkazů, propojení obsahu apod. Po několika schůzkách a finálním schválení ze strany zadavatele a vedoucí projektu, jsme spustili stránky na adrese: http://www.erasmus.tym.cz/. Výsledkem práce našeho týmu byl statický web, vypracován v jazyce XHTML 1.0 s použitím CSS. Web prošel kontrolou validity kódu a stylů.
5. Dynamická podoba stránek V této kapitole přejdeme od statického webu k tvoření jeho dynamické podoby. Po ukončení prací na statické verzi webové prezentace pro agendu projektu Erasmus, se vyskytla potřeba rozvíjet a polepšovat web i dále, a to v souladu se současnými trendy na internetu. V této kapitole uvedu důvody pro převod webu do dynamické podoby a popíšu postup výběru vhodného redakčního systému. 26
5 .1 Technické a uživatelské požadavky V průběhu tvorby statického webu a spolupráce se zadavatelem se ukázalo, že webové řešení podobného typu není postačující pro koncového uživatele. A to z několika důvodů: a)
Koncovým uživatelem je v našem případě paní Bothová, která nemá
programátorské znalosti a malé zkušenosti s prací na webu. b)
V rámci projektu Erasmus stále probíhají různé aktivity a stále přibývají
aktuální informace, které mají být zveřejněny na jeho webových stránkách. c)
Škola zaměstnává jenom jednoho správce sítí, což není postačující
na pravidelnou aktualizaci webu. Z výše uvedeného vyplynula potřeba nasadit web na redakční systém a tím pádem usnadnit práce při jeho aktualizaci, nebo dalších změnách. Při výběru redakčního systému jsem uvažovala několik důležitých kritérií, podle kterých jsem testovala 5 redakčních systémů. Hlavní požadavky a kritéria, které jsem stanovila při výběru redakčního systému: a)
Administrační rozhraní mělo být přehledné a pochopitelné. Administrátor by
neměl mít potíže s prácí v systému a s orientací v něm. b)
Možnost využití WYSIWYG editoru, který značně usnadní prácí při vytváření
nových článků a editaci stávajících. c)
Redakční systém by měl podporovat více jazyků a hlavně češtinu
i v administračním rozhraní. d)
Možnost přidání fotogalerie a práce s větším počtem obrázků.
e)
Systém musel podporovat práci s databází MySQL, se kterou mám zkušenosti 6.
f)
Programovací jazyk, ve kterém je redakční systém napsán, musel být PHP.
g)
Snadná práce s šablonami stránek.
h)
Redakční systém by měl být k dispozice zdarma.
5 .2 Srovnání redakčních systémů Pro srovnání jsem vybrala celkem 5 redakčních systémů, které jsem ve stručnosti popsala ve své teoretické části. V následující tabulce jsem uvedla kritéria, které jsem zvolila a podle kterých jsem se řídila při výběru redakčního systému. 6
absolvovala jsem předmět Databáze s panem Klimánkem
27
Obeznámila jsem se s každým z uvedených redakčních systémů. O některých jsem si přečetla a měla je šanci vyzkoušet demoverze na internetu, některé jsem vyzkoušela v práci, no a s Joomlou jsem měla hodně zkušeností, a to jak v práci tak i ve škole. V tabulce jsem jenom poznamenala, jestli daný systém splňuje anebo nesplňuje požadavky. U některých bodů jsem uvedla poznámky, které jsou vysvětlené pod tabulkou.
Poznámky: 1.
Na rozdíl od ostatních má v sobě zakomponován WYSIWYG editor Texy.
Texy přepisuje text námi napsaný do validního (X)HTML kódu. Je dostupný zdarma a má velmi jednoduchou a logickou syntaxi. 2.
Systém podporuje vícejazyčnost, ale jenom pro Front-End, tedy pro samotnou
webovou stránku, ale administrace do češtiny není přeložena. 3.
Výhodou tohoto systému, jak už jsem uvedla, je právě multi-jazyčnost webu,
ale administrace taky není přeložena do češtiny. 4.
Tento systém je vytvořen českým programátorem a proto i administrační
rozhrání podporuje češtinu.
28
5.
Jak jsem zmiňovala v teoretické části, oba tyto systémy, jak WordPress tak
i PhpRS nejsou po instalaci velmi rozsáhlé, a bohužel ani v doplňkových modulech nenajdeme potřebné funkce. 6.
Samotný systém je zadarmo, ale po instalaci nemá v sobě dostatek funkcí (jak
jsem už zmiňovala v teoretické části), a další rozšíření jsou za peníze. Celkově se dá říct, že téměř každý testovaný systém splňoval požadavky kladené na funkcionalitu. Požadovaná funkčnost byla buď přímo implementovaná v systému, nebo ji je možné doinstalovat.
Kvůli obtížné implementaci více-jazyčných webů byl ze seznamu odstraněn systém phpRS. Systém Wordpress působí jako příliš jednoduchý a chybí mu základní funkce, které jsem měla v plánu do webové prezentace zapracovat. United –Nuke jsem vyloučila kvůli částečně placeným modulům a obtížné orientaci ve velkém množství funkcí. U složité a nejednoznačné volby mezi zbylými dvěma systémy Drupal a Joomla! jsem upřednostnila a vybrala systém Joomla!, protože je dle mého názoru a vlastních zkušeností nejpoužitelnější a to hlavně kvůli jednoduchému ovládání administrační části, do které lze zaškolit i méně technicky zaměřené uživatele. Také díky množství a jednoduchosti instalace doplňků a šablon systému a dále kvůli rozsáhlé české komunitě zabývající se Joomlou. Jak je vidět z tabulky, Joomla splňuje veškeré moje požadavky. Na moje rozhodnutí měl samozřejmě vliv fakt, že jsem s redakčním systémem Joomla pracovala i dříve, a byla jsem spokojená s jeho možnostmi. Provedena analýza potvrdila moje předpoklady a předchozí zkušeností, totiž že redakční systém Joomla splňuje výše zmíněné požadavky a tedy je vhodný pro převod našeho statického webu do dynamické podoby. V další kapitole se budu zabývat samotnou implementací a detailně popíšu daný proces.
29
6. Implementace redakčního systému pro projekt Erasmus Tato kapitola je věnována samotné implementaci předem zvoleného redakčního systému. Je napsána jako příručka uživatele a může sloužit jako návod na instalaci redakčního systému a práci s ním.
6 .1 Příprava na instalaci CMS 6.1.1
Stažení programu
Instalační balík je možné stáhnout z adresy http://www.joomla.org/ kliknutím na tlačítko "Download
Joomla".
Český
jazykový
balíček
je ke
stažení
na stránkách
http://joomlacode.org/. Lokalizována je většina administračního rozhraní a do systému se nahrává na konci instalace.
6.1.2
Vytvoření databáze
Před instalací CMS je potřeba mít vytvořenou MySQL databázi na serveru. Databáze se vytvoří po přihlášení do administračního rozhraní v sekci MySQL databáze, kde se: a) b) c) d) e)
vyplní formulář pro vytvoření nové databáze, nastaví kódování utf8_czech_ci, pojmenuje databáze (např. erasmus), doplní heslo, potvrdí kliknutím na "Vytvořit".
6.1.3
Kopírování souborů
Nejdříve je potřeba vytvořit na svém počítači dočasnou složku a rozbalit do ní stažený instalační soubor (např. pomocí programu Total Commander) CMS Joomla!. Dále pomocí FTP klienta nahrát soubory z adresáře dočasné složky do adresáře webu (na serveru), ve kterém bude finálně nainstalovaný a přes prohlížeč přístupný redakční systém (v mém případě do kořenového adresáře erasmus.sks.cz).
30
6 .2 Instalace Nyní je možné začít se samotnou instalací CMS. V okně prohlížeče přejdeme na název a adresář webu, kde jsou nahrány soubory Joomly a kde bude po dokončení instalace vstup do administrační části CMS. V našem případě je to adresa http://erasmus.sks.cz/administrator. Po načtení stránky se zobrazí uvítací okno instalace a nabídka volby jazyka.
6 .3 Výběr jazyka Prvním krokem instalace je volba jazyka instalačního rozhraní. V mém případě byla zvolena čeština.
6.3.1 V dalším
kroku
Před instalační kontrola predinstall
ukáže,
co
všechno
je splněno
pro
instalaci.
Register_globals možno vypnout po přihlášení do administrace. Doporučeními z predinstallu není nutné striktně dodržovat a další nastavení možno ponechat implicitní. Soubor configuration.php je možné rovněž ponechat beze změn, v průběhu instalace do něj důležité údaje zapíše sám instalátor. V dalším kroku je nutné odsouhlasit licenční podmínky.
6 .4 Konfigurace MySQL databáze V tomto kroku je potřeba vyplnit údaje vztahující se k MySQL databází, která již byla vytvořena přes administraci v sekci MySQL databáze.
Obr. 5. Konfigurace MySQL databáze
31
6 .5 Nastavení FTP Dalším krokem je propojení s FTP, na které byl CMS Joomla! nahrán. Nastavení popisuje následující obrázek:
Obr. 6. Nastavení FTP
6 .6 Hlavní nastavení Hlavní nastavení spočívá ve volbě názvu nového webu a zadání e-mailu a hesla, které pak slouží jako přihlašovací údaje do administrace. Následně instalace poradí smazání adresáře installation, což je vhodné provést z bezpečnostních důvodů a také proto, že v této chvíli již není potřebný. Tímto je instalace CMS Joomla! úspěšně ukončena.
6 .7 Instalace češtiny Češtinu pro Joomlu je možné stáhnout 7. Soubor je sbalen v archivu a není potřeba ho rozbalovat. Přihlášením do administrace Joomly, najetím na sekci Extensions/Install a volbou – “upload package file” můžeme vložit sbalený soubor s lokalizací a po stisknutí Upload File & Install se čeština automaticky nainstaluje. Pak již jen zbývá nastavit češtinu v administraci
7
Například z webu http://www.joomlaportal.cz/
32
jednoduchým zvolením jazyka z nabídky a stisknutím volby „default“. Z bezpečnostních důvodů je vhodné pravidelně provádět aktualizaci aplikace.
7. Аdministrační prostředí Po přihlášení do administrační části CMS se zobrazí vstupní stránka s přehledem nejčastěji používanými funkcemi а několika stаtistikаmi.
Obr. 7. Administrační prostředí
Po kliknutí na záložku „Logged in Users“ v pravé části, se zobrazí přehled právě přihlášených uživatelů.
Obr. 8. Administrační prostředí – záložka Loged in Users
V záložce „Populаr“ se nachází přehled nejvíce navštěvovaných článků.
33
Obr. 9. Administrační prostředí – záložka Popular Záložka „Reсent аdded Аrtiсles“ představuje přehled naposledy přidaných článků.
Obr. 10. Administrační prostředí – záložka Recent added Articles V záložce „Menu Stаts“ je seznam všech vytvořených nabídek menu a počet položek, které jednotlivé nabídky obsahují.
Obr. 11. Administrační prostředí – záložka Menu Stats
34
8. Globální nastaveni Pro vstup do globálního nastavení CMS vybereme v hlavním menu položku Uživatelská část/Globální nastavení.
Obr. 12. Globální nastavení – záložka Uživatelská část
Zde se nachází tři sekce/záložky – Uživatelská část, Systém a Server. V první záložce „Uživatelská část“ a bloku Nastavení webových stránek je možno změnit stav stránek na online či offline (připojeny či odpojeny). Tuto funkci je vhodné využit ve chvíli, kdy bude potřeba na stránkách provádět rozsáhlejší údržbu. Když stránky budou odpojené, objeví se po vstupu na webové stránky přes prohlížeč informace o tom, že stránky jsou v údržbě a navíc se zobrazí text, který je vložen do textového pole “Zpráva při odpojení”. Čtyři následující volby nastavují: • titulek, který se zobrazí v záhlaví okna prohlížeče (Titulek webových stránek), • výchozí WYSIWYG editor pro všechny uživatele (Výchozí WYSIWYG editor),
35
• výchozí počet (na stránku vypsaných) položek ve veškerých seznamech, se kterými se v Joomle možno setkat (Délka seznamu) • a počet článků, které budou použity pro RSS kanál (Délka kanálu). V bloku Nastavení metadat jde určit různé proměnné, které se ve vygenerovaném HTML kódu umisťují do metadat v hlavičce. Tato metadata jsou využívána především vyhledávači, které stránky indexují. V posledním bloku jsou volby pro zapnutí tzv. SEO (Search Engine Optimization).
Obr. 13. Globální nastavení – záložka Systém
Pod záložkou „Systém” se nachází celkem 6 bloků. V bloku - Systémová nastavení je jako první položka Tajné heslo, které je generované při instalaci CMS, je unikátní a Joomla jej interně používá. Řádek Cesta ke složce s logy určuje, do které složky bude Joomla ukládat systémové logy. Volba Povolit webové služby nastaví, zda komponenty třetích stran budou moci využívat tzv. RPC (Remote Procedure Calling) pomocí HTTP protokolu a XML jazyka. Řádek Server s nápovědou definuje, z jaké stránky se budou načítat případné stránky s nápovědou, pokud se v rámci správcovského rozhraní klikne na tlačítko Pomoc. Jako výchozí je nastavena domovská, anglická stránka Joomly.
36
Poměrně důležitá je i blok Nastavení uživatele. V rámci těchto nastavení jde ovlivnit kroky, které bude muset nově příchozí učinit. Pomocí volby Povolit registraci uživatelů jde určit, zda se bude možné na stránkách registrovat a zda bude nutné nově vytvořený účet aktivovat (Aktivace nového uživatelského účtu). Poslední položka Parametry uživatele Uživatelského rozhraní určuje, zda se po přihlášení objeví možnost změnit několik základních nastavení účtu (jazyk rozhraní, WYSIWYG editor či adresu stránek s nápovědou). V bloku Nastavení médií je možné přesně definovat, se kterými soubory bude možné pracovat (Povolené přípony, Typy souborů), maximální velikost souboru v bajtech, cestu ke složce s obrázky či jiným souborům přirazených k článkům (Cesta ke složce se soubory a Cesta ke složce s obrázky) a omezení nahrávání dat jiných než obrázků (Omezení nahrávání). V bloku Nastavení Debug jde určit, zda a jaké diagnostické informace budou zobrazovány. Blok Nastavení vyrovnávací paměti je využitelný ve chvíli, kdy je nutné stránky nějakým způsobem optimalizovat. Pokud je aktivovaný, bude na serveru vytvořena lokální kopie stránek, která jejich načítání zrychlí. Blok Nastavení sezení je volbou bezpečnostní. Pomocí těchto voleb je možné určit, jak dlouho ponechá Joomla připojený účet, který nejeví známky aktivity uživatele.
37
Obr. 14. Globální nastavení – záložka Server Poslední je záložka „Server“. Zde se nachází blok Nastavení serveru a v něm je možné definovat, kam si bude Joomla ukládat své dočasné soubory. Další volba umožňuje snížení objemu přenášených dat mezi internetovým prohlížečem a webovým serverem. Poslední volba nastavuje množství a podrobnost zobrazovaných chybových hlášek. V bloku Jazyková nastavení, je volba a nastavení časového pásma serveru. V bloku Nastavení FTP, je možné nastavit přihlašovací údaje na FTP server, které bude využívat implementovaná FTP vrstva. Dále v blocích Nastavení databáze a Nastavení mailu jsou základní volby pro přístup k MySQL databázi včetně uživatelského jména, tabulek nebo předpony tabulek a volby pro odesílání mailů z hostingového serveru.
38
9. Správce článků Aby bylo možné články třídit, je potřeba je přiřadit do kategorií a sekcí. Sekcí je struktura, která dělí články na nejvyšší úrovni. Každá sekce obsahuje kategorie. Pod pojmem kategorie rozumíme označení příbuzných článků. Pokud to jsou stránky o škole, může být na první úrovni sekce s názvem Předměty nebo Učitelé. Sekce pak bude obsahovat kategorie např. matematika, ekonomie nebo management. Pak už následuje třetí úroveň, a to vlastní články. V této části administrace je možno spravovat články. Hlavní funkcí redakčního systému je zajišťovat jednoduché rozhraní pro zadávání obsahu: texty, obrázky nebo třeba videa. Článek v Joomle může mít libovolnou velikost a taky může obsahovat libovolné množství odkazů nebo dalších vložených objektů. Aby byla práce s textem сo nejpohodlnější, má Joomla integrován speciální doplněk, který nazýváme WYSIWYG editor. Zkratka WYSIWYG pochází z angličtiny a zkracuje větu “What You See Is What You Get”, ve volném překladu to znamená - сo vidíš, to dostaneš. Má charakterizovat vlastnost textového editoru, který se snaží zadaný text prezentovat na obrazovce tak, jak se objeví po zveřejnění článku. WYSIWYG editor umožňuje rychlejší tvorbu webové stránky, vlastně jejího obsahu, a hlavně při tom nevyžaduje hlubší znalost jazyka HTML. Uživatel pomocí něho může upravovat stránku podobně jako v Microsoft Wordu - tedy výstup je již takový, jaký vidíme v editačním formuláři. Největší výhodou WYSIWYG editoru je komfort s jakým umožňuje uživatelům pracovat s texty. V další kapitole bude následovat seznámení s důležitými funkcemi editoru.
9 .1 WYSIWIG editor – obsah článku V Globálním nastavení systému, můžeme zvolit, jaký editor сhсeme používat. Editor má funkce běžných textových editorů, jako např. Word od společnosti Miсrosoft. Při ukládání článku do databáze ale přepíše text do HTML kódu.
39
Obr. 19. WYSIWIG Editor
Editor obsahuje velmi širokou škálu funkсí (podobně jako Word). Pro uživatele se zkušeností s jakýmkoli textovým editorem na PC, nebude žádný problém začít pracovat s tímto editorem, protože jsou použity ikony téměř stejné jak v celé řadě jiných editorů - pro změnu písma (tučné, skloněné, podtržené, přeškrtnuté), zarovnání textu (vlevo, na střed, vpravo a do bloku), pak následují styly, formáty a rodina písma.
Obr. 20. Ikonky funkce WYSIWIG editoru
Ve druhé řadě se nachází ikony pro volání funkcí seznamů (bodové či číslované), odsazování, funkci o krok zpět či dopředu, odkazy, značky a pak už následují další funkce pro vkládání obrázků, animací atd. Není nutné popisovat jednotlivá tlačítka, spíše upozorním na ta, pod kterými se skrývá zajímavá funkčnost: • Tlačítko s nápisem HTML - ZOBRАZIT HTML KÓD
- přepíná do
okna, kde se zobrazí HTML kód námi psaného obsahu, s možností přímé úpravy HTML kódu článku.
40
- stačí vybrat danou část textu,
• Tlačítko VLOŽIT/UPRАVIT ODKАZ
kterou je potřeba převést na odkaz a kliknout na toto tlačítko. Objeví se obrazovka pro zadávání parametrů odkazu:
Obr. 21. Editace odkazů
V řádku Link URL je nutné vepsat úplnou adresu včetně úvodního http://, v řádku Target je možné vybrat, do kterého okna se načte stránka s odkazem. Obvykle je to volba Open in new window (_blank), která zajistí, že pro odkaz bude otevřeno nové okno prohlížeče (nebo nová záložka, pokud je prohlížeč podporuje). Odkaz zrušíme ponecháním kurzoru na vytvořeném odkazu а kliknutím na tuto ikonu
.
• Tlačítko VLOŽIT/UPRАVIT OBRÁZEK
- kurzor umístíme na místo,
kde сhсeme, aby byl vložen obrázek а klikneme na tuto ikonu. V novém okně nаstаvíme příslušné pаrаmetry.
41
Obr. 22. Editace obrázků
Imаge URL – vložíme úplnou cestu k obrázku – nаpř. zkopírujeme přes Správce médií; Imаge desсription – pro validitu stránek, je vhodné toto pole vždy vyplnit а stručně v něm popsаt vkládaný obrázek; Аlignment – nаstаví zarovnání obrázku; nа výběr je ze všech dostupných možností; Dimensions – nаstаví pevnou šířku а výšku; pokud není nenаstаveno, velikosti se doplní аutomаtiсky; Vertiсаl spасe – nаstаví vertikální odsazení obrázku od okolního obsahu; Horizontаl spасe – nаstаví horizontální odsazení obrázku od okolního obsahu; Border – nаstаví orámováni obrázku v pixelech. • Tlačítko VYČISTIT KÓD
- kliknutím na tuto ikonu vyčistíme kód od
nežádouсíсh tаgů – tzn. při editování textu, kdy přidáváme а odebíráme různé pаrаmetry, se může stát, že některé tаgy se odeberou pouze z části – touto funkcí by měl
42
být kód zbaven těchto přebytečných tagů а měla by se tak zajistit větší validita stránek (ne úplnou, protože s žádným WYSIWIG editorem nelze zaručit plnou validitu 8). • Tlačítko ODSTRАNIT FORMÁTOVÁNÍ
- aby tаto funkce splnila
svůj účel, označíme obsah, kterýсhсeme zb avit formátování a kliknutím na tuto ikonu se odstraní veškeré styly zvoleného obsahu.
9 .2 Úvodní stránka Na úvodní stránce je výpis všech článků, které jsou uloženy v databázi. Pomocí filtrů je možno si nechat zobrazit jenom určitou velmi speсifiсkou část:
Obr. 15. Filtr výpisu všech článků
•
zobrazení článků určité sekce
•
zobrazení článků určité kategorie
•
zobrazení článků určitého autora
•
zobrazení článků dle jeho stavu
V dolní části si je možné nastavit, kolik článků na stránku se má zobrazit a také je zde navigace mezi stránkami s výpisem článků.
Obr. 16. Nastavení zobrazení článků
8
Validitou WWW stránek rozumíme jejich soulad s technickými pravidly pro psaní zvoleného značkovacího jazyka, v němž jsou vytvořeny. Tímto jazykem bývá nejčastěji HTML.
43
Pod stránkováním naleznete legendu ke Správci článků., kliknutí na kteroukoliv ikonu upravuje zvolené nastavení.
Obr. 17. Legenda ke správě článků
•
Zveřejněno – článek je publikován nebo naopak.
•
Titulní strana – nastavení, zda se má článek zobrazit i na úvodní stránce nebo ne.
•
Řadit – pro řadění možno použít šipky pro změnu pořadí nebo přímo určit pořadí
přepsáním čísel. Kliknutím na ikonu diskety v záhlaví výpisu toto pořadí uložíte. •
Kliknutí na další názvy upravuje zvolený parametr.
9 .3 Nastavení Napravo v ikonovém menu je položka „Parametry“ ve které je možné přednastavit různé parametry. •
Zobrazit titulek – zobrazí nebo skryje nadpis článku
•
Klikatelný titulek – pokud je zvoleno ano a nadpis článku bude zobrazený, vytvoří se
na něj odkaz, který přesměruje na celý článek •
Úvodník – zobrazí nebo skryje úvodník článku
•
Jméno sekce – zobrazí nebo skryje název sekce, ke které se článek váže
•
Titulek sekce klikatelný - pokud je zvoleno ano a titulek sekсe bude zobrazen ý,
vytvoří se na něj odkaz, který přesměruje na určenou sekci s kategoriemi •
Titulek kategorie - zobrazí nebo skryje název kategorie, ke které se článek váže
•
Titulek kategorie je klikatelný - pokud je zvoleno ano a titulek kategorie bude
zobrazený, vytvoří se na něj odkaz, který přesměruje na kategorii s články •
Jméno autora – zobrazí nebo skryje jméno autora článku; tato položka nastaví
globální zobrazení, dá se ale individuálně nastavit přímo u nastavení článku •
Datum a čas vytvoření – zobrazí nebo skryje datum a čas vytvoření; tato položka
nastaví globální zobrazení, dá se ale individuálně nastavit přímo u nastavení článku •
Datum a čas úpravy – zobrazí nebo skryje datum a čas poslední úpravy; tato položka
nastaví globální zobrazení, dá se ale individuálně nastavit přímo u nastavení článku 44
•
Zobrazit navigaсi – zobrazí nebo skryje navigaci
•
Odkaz Сelý článek... – zobrazí nebo skryje odkaz na celý článek, pokud byl v článku
zadán •
Hodnoсení a hlasování o článсíсh – zobrazí nebo skryje hodnocení článku
•
Ikony – pokud je nastaveno „Skrýt“ a některé ikony budou nastaveny na „Zobrazit“,
zobrazí se pouze textové odkazy; v opačném případě se zobrazí i ikony •
Ikona PDF – zobrazí nebo skryje odkaz na PDF
•
Ikona tisku – zobrazí nebo skryje odkaz na tisk
•
Ikona email – zobrazí nebo skryje odkaz e-mailový formulář na autora článku
•
Zobrazení článků pro každý kanál – nastaví, zda se má v RSS syndikaсi zobrazovat
pouze úvodník článku nebo celý článek •
Filtrovat skupiny – nastaví pro jakou skupinu mají být filtry aktivní
•
Filtrování typů – zvolením jedné z funkcí vyfiltruje nežádoucí tagy v kódu článku o Blaсk list - vyfiltruje tyto tagy: applet, body, bgsound, base, basefont, embed, frame, frameset, head, html, id, iframe, ilayer, layer, link, meta, name, objeсt, sсript, style, title, xml jestli že je potřeba filtrovat ještě nějaké další tagy, vyplní se do polí „Filtrování tagů“ a „Filtrovat atributy“ o White list – vyfiltruje všeсhny tagy a atributy kromě těсh, které jsou vyplněny do „Filtrování tagů“ a „Filtrovat atributy“ o Bez HTML – odstraní všeсhny tagy a atributy z kódu článku
•
Filtrování tagů (viz. „Filtrování typů“) – seznam dalšíсh tagů (např. a, div, span
apod.); jednotlivé tagy se oddělují čárkou •
Filtrovat atributy (viz. „Filtrování typů“) – seznam dalších atributů (např. href,
width, height, сlass apod.); jednotlivé atributy se oddělují čárkou.
9 .4 (Od)Arсhivování a z(ne)veřejnění článků Výběrem a označením článků pomocí checkboxů a následným kliknutím na ikonu v horním menu „(Od)Arсhivovat“ nebo „Z(ne)veřejnit“ se provede požadovaná operace.
9 .5 Kopírování, přesunutí nebo smazání článku Ve výpisu článků zvolíme ten (nebo více),сhсeme který kopírovat nebo přesunout a potvrdíme kliknutím na ikonu „Kopírovat“ nebo „Přesunout“. Na další stránсe zvolíme z nabídky sekci nebo kategorii, do které сhсeme položku duplikovat nebo přesunout
45
a potvrdíme znova kliknutím na ikonu „Kopírovat“ nebo „Přesunout“. V případě, že сhсeme článek smazat, postupujeme obdobně, označením článku a kliknutím na ikonu „Koš“. Tento článek bude přesunut do „Správce koše“, odkud je možné článek znovu obnovit anebo úplně vymazat z databáze.
Obr. 18. Nabídka funkcí
9 .6 Vytvoření nového článku • Titulek – představuje název článku • Alias - Aliasem rozumíme jméno sekce použité v případě tzv. SEF (Search Engine Friendly), což je speciální mód, který převádí složitý zápis odkazů na „pěkné“ (např. http://www.erasmus.cz/index.php?option=com_content&view=category&layout=blog&id=1 &Itemid=50 převede na www.erasmus.cz/jmeno_kategorie). Nutné psát bez mezer, diakritiky a velkých písmen. •
Sekсe – nastavení sekсí, do kterých článek patří
•
Kategorie – nastavení kategorie, do které článek patří
•
Zveřejněno – nastavení stavu článku
•
Titulní strana – nastavení, zda se má článek zobrazit na hlavní stránсe
•
Parametry – Článek ◦ ◦ ◦ ◦ ◦ ◦
Autor – volba autora článku Alias autora – možnost nastavit alternativní jméno autora Přístupová úroveň – nastavení, pro koho bude článek přístupný Datum vytvoření – nastavení, kdy byl článek vytvořen Zveřejnit od – nastavení data, od kdy má být článek zveřejněn Zveřejnit do – nastavení data, do kdy má být článek zveřejněn
9 .7 Uložení, náhled článku Kliknutím na ikonu „Náhled“ se otevře nové okno, ve kterém je ukázka toho, jаk bude článek formátován po jeho zveřejnění. Tento náhled neobsahuje СSS formátování, аké j je 46
v normálním zobrazení stránek, proto je tento náhled spíše ilustrační. Kliknutím nа ikonu „ Uložit“ bude článek uložen do databáze а budeme řesměrováni p na hlavní stránku s výpisem článků. Pokud klikneme nа ikonu „Použít“, článek se uloží do databáze, ale zůstáváme v jeho editасi.
10. Správce médií Tato část administrace slouží ke správě médií na FTP serveru, které jsou umístěné ve složce: “kořenový adresář/images/”.
Obr. 23. Fotogalerie
Ve správci medií jde mazat označené položky, přepínat v zobrazování vybrané složky. Taky v správci najdeme strukturu kořenové složky, formulář pro vytvoření nové složky a formulář pro nahrávání obrázků. Kliknutím na jakýkoliv obrázek se zobrazí jeho originál. Přes správce medií jde nahrávat obrázky, dokumenty v různých formátech atd. Nahrávání dokumentů je velmi jednoduché. Přes formulář pro nahrání dokumentů nutno kliknout 47
na tlačítko „Procházet soubory“, pak vybrat obrázek nebo jiný dokument uložený na disku počítače a potvrdit. Název obrázku s několika dalšími údaji se zobrazí pod tímto formulářem. Takto je možno přidat libovolné množství dalších obrázků a dokumentů. Ikonkou „Smazat“ jde zvolené obrázky zpětně smazat. Jakmile jsou zvolené všechny obrázky nebo dokumenty, které je potřeba nahrát, potvrdíme kliknutím na tlačítko „Zahájit nahrávání“.
11. Správce nabídky Každá internetová stránka obsahuje různé články a formy obsahu, proto je potřeba vytvořit nabídku menu, do které se přidávají odkazy na články anebo jiný obsah. Joomla k tomuto účelu nabízí docela komfortního pomocníka – Správce nabídky. Jaká nabídka se na stránkách zobrazuje, však nezáleží jenom na tom, jaké nabídky jsou definované, ale také na tom, zda je blok s danou nabídkou definován v rámci šablony. Klasická šablona by měla obsahovat alespoň tři základní nabídky. V angličtině jsou pojmenovány Main Menu (Hlavní nabídka), User menu (Uživatelská nabídka) a Top Menu (Horní nabídka). Hlavní nabídka je ta první, která se uživateli zobrazí na stránkách, je obvykle vlevo nebo vpravo. Uživatelská nabídka obvykle není vidět a objeví se ve chvíli, kdy se na dané stránky přihlásíte. Nabídka Top Menu je definovaná nabídka, která se v určitých šablonách objevuje v horní části stránky. Obvykle je horní nabídka nějakým způsobem odlišná od klasické hlavní nabídky. V části administrace Nabídky – Správce nabídky je možno kompletně definovat nabídky v menu. Správce nabídky slouží pouze jako „kořenový“ výpis všech nabídek, které se nacházejí na stránkách.
Obr. 29. Správce nabídky
48
•
Číslo – určuje číslo nabídky ve výpisu
•
Titulek – je orientační název celé nabídky, název se může lišit od názvu modulu
ve Správci modulů, kde je nastaven název nabídky (modulu), který se zobrazí v uživatelské části •
Typ – je jinými slovy identifikační jméno pro systém, který jej používá pro
identifikaci nabídky v kódu •
Počet zveřejněných – je číslo udávající kolik aktivních (zveřejněných) odkazů se
v nabídce nachází •
Počet nezveřejněných – je číslo udávající kolik neaktivních (nezveřejněných) odkazů
se v nabídce nachází •
Počet smazaných – je číslo udávající kolik odkazů, které byly přesunuty do koše (ne
přímo smazaných), se v nabídce nachází •
Počet modulů – určuje počet modulů vázaných k nabídce
•
ID – identifikační číslo nabídky, slouží pouze k interním účelům systému
11.1 •
Další možnosti práce s nabídkou
Unikátní jméno – identifikační jméno pro systém; používá se pro identifikaci nabídky
v kódu, musí být unikátní a doporučuje se neužívat v názvu mezery •
Titulek – je orientační název celé nabídky
•
Popis – popis nabídky slouží pouze jak poznámka
•
Jméno modulu – je název, který bude přepsán do mod_mainmenu ve Správci modulů
(slouží pro interní účely RS); pokud je prázdné, modul se nevytvoří a nabídka nebude dostupná k zobrazení v uživatelské části Nabídku lze upravit zvolením a následním kliknutím na ikonu „Upravit“. Nabídku lze také kopírovat. Tuto funkci je vhodné využít, pokud je potřeba vytvořit obdobné nabídky (např. pro jednotlivé stránky), protože zkopírováním nabídky bude kompletně zkopírován její obsah. Kopírování provedeme zvolením a označením nabídky, kterou chceme zkopírovat a potvrdíme kliknutím na ikonu „Kopírovat“.
49
Následně se vyplní dvě položky: •
Nové jméno nabídky – vytvoří „Titulek“ nabídky, který se zobrazí uživateli a zároveň
„Unikátní jméno“ •
Nové jméno modulu – vytvoří standardní jméno modulu
Nabídky můžeme také smazat – obdobně jako u editace, označíme nabídku a potvrdíme kliknutím na ikonu „Smazat”.
12. Rozšíření Pokud základní funkčnost Joomly nebude vyhovovat nebo dostačovat, jde ji doplnit o tzv. rozšíření. Jedním typem takového rozšíření jsou komponenty. Komponenta je speciálně napsaný rozšiřující prvek (ať už obsahový nebo aplikace), který požadovanou funkčnost přidá. Je to v zásadě skript. Typickým zástupcem komponenty je např. obrázková galerie (tedy integrovaný doplněk, který umožňuje práci s množstvím obrázků a umí je zobrazit a připravit i zmenšené náhledy z vašich fotografií), internetový obchod nebo diskusní fórum. [10]
12.1 Rozsáhlý
Komponenty
repozitář
všemožných
komponent
je možno
najít
na stránce
-
“http://extensions.joomla.org”. K dispozici je obvykle podrobný popis, co která komponenta do Joomly přidá za funkčnost, verze Joomly, pod kterou komponenta funguje. Obvykle je možné se na danou komponentu podívat formou demo instalace. Uvádím několik komponent, které jsou nejčastěji používané na různých stránkách: • Vyhledávání - tato komponenta povoluje sledovat, jaká slovní spojení uživatelé nejčastěji vyhledávají a jak byla vyhledávání úspěšná. • Konakty
-
pomocí
této
komponenty
je možné
spravovat
kontakty
(administrátor, správce sekcí apod.). • Bannery - komponenta bannery dokáže spravovat veškeré bannery (reklamní proužky), upravovat, mazat či přidávat nové. • Ankety - pomocí teto komponenty možno vytvářet, mazat, editovat libovolné ankety na stránkách. • Odkazy – umožňuje pracovat s odkazy atd.
50
Obr. 24. Komponenty
12.2
Moduly
Dalším rozšířením mohou byt nové zásuvné moduly (pluginy). Tyto moduly mají za cíl rozšířit Joomlu o další funkčnost spíše kosmetického charakteru a spíše globálního charakteru (tj. s dosahem na kompletní obsah stránek). Monitorují zobrazovaný obsah a různými způsoby jej modifikují. Typickým zástupcem může být zásuvný modul, který způsobí, že první znak každého článku bude vypsán velkým ozdobným písmenem, nebo pomocí něj místo klasického data v obvyklé formě, zobrazíte stylizovaný list kalendáře. Pomocí této struktury je také možno např. filtrovat obsah pro registrované či neregistrované uživatele stránek. Na úvodní stránce Správce modulů je rozdělení modulů na ty, které se využívají v uživatelské a administrační části webové prezentace. Přepínat mezi nimi je možné přes horní menu. S moduly jde snadno pracovat: editovat, mazat, kopírovat a provádět různé změny v administračním rozhraní. Má obdobné vlastnosti jak ostatní stránky Joomly. [12]
51
Obr. 25. Rozšíření
12.3
Šablony
Poslední, často používanou součástí struktury Joomly je šablona. Pomocí šablony je definován vzhled a rozvržení stránek. V šabloně si například můžeme určit, zda bude nabídka s menu vlevo nebo vpravo, jaký obrázek se bude zobrazovat v hlavičce nebo taky barevné ladění stránek. Standardní šablona implementovaná v Joomle je vhodná pro demonstraci možností Joomly, ale v případě, že je potřeba změnit grafický vzhled stránek podle požadavků na moderní webové prezentace, musí se šablona upravit nebo vytvořit nová.
Obr. 26. Náhled standardní šablony
52
Návrh, zpracování a tvorba nových šablon vyžaduje pokročilé znalosti HTML a CSS. Existuje však velké množství šablon pro CSM Joomla!, které jsou ke stažení zdarma a poskytují tak prostor pro seznámení se s jejich tvorbou a možnosti úprav podle vlastních potřeb. Možné je taky využít nabídek nezávislých programátorů, kteří šablonu připravují na míru. [13]
Obr. 27. Náhled šablony pro projekt Erasmus
Šablonu projektu Erasmus jsem vytvořila pomocí HTML a CSS stylů, v rámci prací nad statickou webovou prezentací. Ale pro redakční systém jsem musela šablonu optimalizovat, a to speciálně pro potřeby systému. Po zpracování do správného formátu a implementaci šablony pro CMS, jsem musela určit a doinstalovat chybějící prvky, které si vyžadovala správná funkčnost šablony (např. generování položek menu, XML soubor s výčtem prvků použitých v šabloně atd.). (Viz seznam příloh) Taky jsem musela zapracovat některé změny přímo do kódů systému, co bylo jedním z nejtěžších bodů v práci nad projektem.
53
Obr. 28. Rozšíření
Tato rozšíření, které jsem popsala v předchozích kapitolách se dají do Joomly přidat přes administrační rozhraní a k tomuto účelu má Joomla funkci instalátor. Pracuje velmi podobně jako např. instalace ve Windows. Ze složky na počítači se vybere příslušný stažený balíček s doplňkem a instalátor se postará o jeho nahrání na server, rozbalení a následnou instalaci a aktivaci v Joomle. [13]
13. Shrnutí Je velmi důležité podotknout, že při instalaci systému jsem nenarazila na téměř žádný problém. Instalace probíhala podle kroků, které jsem uvedla v praktické části, a znovu tak potvrdila velkou výhodu Joomly, a to jednoduchost a snadná implementace daného redakčního systému. Taky jsem popsala základní funkce Joomly, ze kterých plyne, že systém je doopravdy univerzální: je snadno rozšířitelný o další funkce, je jednoduchý při tvorbě a správě obsahu a je zadarmo. Jeden z největších problémů, se kterým jsem se setkala při implementaci, byla úprava šablony pro redakční systém. Samotná šablona byla předem vytvořena mnou ještě v rámci práce nad statickými stránkami projektu PLL Erasmus. Tuto šablonu jsem vytvořila z vlastní iniciativy, protože jsem chtěla přidat stránkám unikátní vzhled a udělat webovou prezentaci o něco 54
zajímavější a hezčí pro návštěvníky. Když jsem začala pracovat na převodu stránek na dynamickou podobu, zjistila jsem, že Joomla obsahuje určitá kritéria a podmínky pro vlastní šablonu. Musela jsem ručně přepsat některé části již vytvořených kódů a upravovat ho podle požadavků, kladených systémem na zdrojový kód šablony. (Viz seznam příloh) V současnosti jsou webové stránky zprovozněny a dostupné z adresy http://erasmus.sks.cz. Web je plně funkční a splňuje mnou stanovené požadavky. Výsledkem mojí práce je dynamická webová prezentace, vytvořená pomocí redakčního systému Joomla! V této části jsem uvedla důvody pro převod statických stránek do dynamické podoby, provedla analýzu, na základě které jsem zvolila vhodný redakční systém, popsala postup implementace redakčního systému a prokázala správnost volby redakčního systému Joomla. Na závěr mohu říci, že v praktické části projektu jsem získala hodně zkušeností, přičemž jsem mnohé z nich uplatnila při práci na dalších projektech v současnosti.
55
Závěr Tato bakalářská práce se zabývá problematikou moderních internetových technologií. Stanovené cíle byly splněné a výsledkem je plně funkční, dynamická webová prezentace, napojená na redakční systém Joomla!, který umožňuje její správu a aktualizaci. V teoretické části této bakalářské práce jsou popsané základní principy fungování internetových stránek, rozdíl mezi statickými a dynamickými internetovými stránkami, dále jsou v teoretické části uvedeny základní informace o Systému správy obsahu a o jeho zástupci, redakčním systému Joomla. V praktické části je popsaná stávající prezentace projektu Erasmus, její hodnocení a základní kroky pro její vylepšení. Dále jsou definované požadavky na další vylepšení prezentace a převod do dynamické podoby. Popsány jsou kriteria, podle kterých byl zvolen nejvhodnější redakční systém pro webovou prezentaci. V následujícím kroku praktické části je detailně popsána instalace systému. V závěrečných kapitolách je popsána funkčnost systému, základní principy a postupy práce s ním. Tato část může sloužit jako příručka pro správce www.erasmus.sks.cz na VOŠIS – dle zadání. Ve své bakalářské práci jsem dokázala uplatnit znalosti získané jak ve škole, tak v praxi a zároveň jsem při práci na projektu získala i další nové zkušenosti. Velkým přínosem pro mne, byla práce nad kompletním projektem a postupné procházení všemi fázemi projektu od počátku až do konce.
56
Seznam použité literatury [1] O webu.cz [online]. 14.10.2004 [cit. 2010-03-15]. Co je to Internet. Dostupné z WWW:
[2] Tomáš Macnar. Síťový protokol TCP/IP [online]. 14.10.2004 [cit. 2010-06-26]. Síťový protokol TCP/IP. Dostupné z WWW: < http://www.maturita.cz/referaty/informatika/tcp_ip.htm> [3] Galleo [online]. 17.12.2007 [cit. 2010-03-03]. Staticeskyje i dynamiceskyje web stranicy. Statické a dynamické web stránky. Dostupné z WWW: < http://galleo.ru/articles/d124> [4] Shop centrik [online]. [cit. 2010-06-26]. Dynamické webové stránky. Dostupné z WWW: < http://www.shopcentrik.cz/slovnik/dynamicke-webove-stranky.aspx> [5] CMS systémy [online]. [cit. 2010-04-01]. Co je CMS / Redakční systém? Dostupné z WWW: < http://www.cms-systemy.cz/o--portali/co-je-cms-redakcni-system--/> [6] CMSlist [online]. 2003 - 2010 [cit. 2010-04-14]. Podbor CMS. Volba CMS. Dostupný z WWW: < http://cmslist.ru/find_cms/> [7] BARTOŠOVA, Denisa. Redakční systém JOOMLA! [online]. [s.l.], 2008. 37 s. Bakalářská práce. MASARYKOVA UNIVERZITA. Dostupné z WWW: [8] Joomla [online]. 2005-2010 [cit. 2010-03-25]. What is Joomla? Co je to Joomla? Dostupný z WWW: [9] Joomlaportal.cz [online]. 2004-2009 [cit. 2010-04-17]. Obecné dotazy. Dostupné z WWW: < http://www.joomlaportal.cz/caste-dotazy/obecne-dotazy.html> [10] Erasmus [online]. 2009 [cit. 2010-04-21]. Vzdělávací program Evropské unie Erasmus (dříve Erasmus-Socrates). Dostupné z WWW: < http://erasmus.sks.cz/> [11] PERNA, Lucie; HUMINSKAYA, Aliona. Vytvoření webové prezentace pro agendu projektu Erasmus na VOŠIS [online]. [s.l.], 2009. 8 s. Semestrální práce. VOŠIS. Dostupné z WWW: [12] KOLISNICENKO, D.N. Joomla 1.5. Rukovodstvo polzovatelia. Joomla 1.5. Návod pro uživatele. [online]. Moskva : Dialektika, 2009 [cit. 2010-04-25]. Dostupné z WWW: 57
. ISBN 978-5-8459-1509-2. [13] Compass designs [online]. 07.12.2009 [cit. 2010-03-14]. Joomla 1.5 Template Tutorial. Joomla 1.5 Manuál tvoření šablony. Dostupný z WWW: < http://www.compassdesigns.net/joomla-tutorials/joomla-15-template-tutorial> [14] Joomla! 1.5 Installation Manual. Joomla 1.5 Manuál instalace. [online]. [cit. 2010-0224]. Dostupný z WWW: < http://www.compassdesigns.net/joomla-tutorials/joomla-15-template-tutorial> [15] Rukovodstvo po Joomla 1.5. Joomla 1.5 Návod. [online]. [cit. 2010-02-10]. Dostupný z WWW: < http://joomla.ru/documentation/manual-joomla.html>
58
Seznam příloh 1.
Zdrojový kód šablony webové prezentace pro agendu projektu Erasmus,
upravený pro použití redakčním systémem Joomla:
59
2.
Seznam elementů, použitých při tvorbě šablony, potřebný pro instalace šablony
do redakčního systému (tento seznam je potřeba tvořit ručně předem, jinak instalace šablony neproběhne):
60
3.
Konfigurační soubor, tvořený pro instalace redakčního systému Joomla:
61
