}w !"#$%&'()+,-./012345
M ASARYKOVA UNIVERZITA FAKULTA INFORMATIKY
Podpora pohybovatelných pozicovatelných sekcí s HTML obsahem ˇ B AKALÁ RSKÁ PRÁCE
Iveta Ecksteinová
Brno, jaro 2011
Prohlášení Prohlašuji, že tato bakaláˇrská práce je mým puvodním ˚ autorským dílem, které jsem vypracovala samostatnˇe. Všechny zdroje, prameny a literaturu, které jsem pˇri vypracování používala nebo z nich cˇ erpala, v práci rˇ ádnˇe cituji s uvedením úplného odkazu na pˇríslušný zdroj.
Iveta Ecksteinová
Vedoucí práce: Mgr. Hana Bydžovská ii
Podˇekování Tímto bych chtˇela podˇekovat hlavnˇe své vedoucí práce, Hance Bydžovské, za trpˇelivost, pomoc a rady. Dále svým rodiˇcum, ˚ kteˇrí mi umožnili dostat se tam, kde jsem nyní. A všem ostatním, kteˇrí mi byli nápomocní a podpoˇrili mˇe.
iii
Shrnutí Tato bakaláˇrská práce se zaobírá aktuální nabídkou dostupných editoru˚ na tvorbu webových stránek, webovými službami, které poskytnou webový prostor pro stránky a v neposlední rˇ adˇe dává možnost uživateli vytvoˇrit si vlastní webové stránky. První cˇ ást práce shrnuje ruzné ˚ typy editoru, ˚ kterými lze vytvoˇrit HTML stránky. Druhá cˇ ást se zabývá webovými službami Google Sites a Webnode.cz, které umožnují ˇ tvorbu webu a jeho hosting. V další cˇ ásti jsou popsány duležité ˚ technologie pro tvorbu HTML stránek, jejich historie, nynˇejší vývoj a použití. Záveˇreˇcná cˇ ást se vˇenuje vlastnímu vytvoˇrenému webovému rozhraní a knihovnˇe, která obsahuje všechny potˇrebné funkce.
iv
Klíˇcová slova Editor, WYSIWYG, WYSIWYM, Google Sites, HTML, CSS, jQuery
v
Obsah 1 2
3
4
5
6
Úvod . . . . . . . . . . . . . . . . . . Editory . . . . . . . . . . . . . . . . . 2.1 Strukturní editor . . . . . . . . 2.1.1 BlueFish . . . . . . . . . 2.1.2 PSPad . . . . . . . . . . 2.2 WYSIWYG editor . . . . . . . . 2.2.1 TinyMCE . . . . . . . . 2.2.2 FCKeditor a CKEditor . 2.3 WYSIWYM editor . . . . . . . . 2.3.1 WYMeditor . . . . . . . 2.3.2 WebCS Editor . . . . . . Webová rozhraní . . . . . . . . . . . 3.1 Weby Google Sites . . . . . . . 3.2 Webnode.cz . . . . . . . . . . . Použité technologie . . . . . . . . . 4.1 HTML . . . . . . . . . . . . . . 4.1.1 Historie a vývoj HTML 4.1.2 HTML tagy . . . . . . . 4.2 CSS . . . . . . . . . . . . . . . . 4.2.1 Historie a vývoj CSS . . 4.2.2 Vytváˇrení stylu . . . . . Knihovna a rozhraní jMoevy . . . . 5.1 Rozhraní jMoevy . . . . . . . . 5.2 Knihovna jMoevy . . . . . . . . 5.2.1 Funkce . . . . . . . . . . Závˇer . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
1 2 2 2 3 4 4 6 7 8 9 10 10 11 12 12 12 13 13 13 16 17 17 19 20 21
vi
1 Úvod Jazyk HTML byl puvodnˇ ˚ e vytvoˇren pro pˇrenos textových informací malého objemu dat, jelikož rychlost intenetu nebyla vysoká. S rozmachem internetu jako takového, se zrychlením pˇrenosové rychlosti a hlavnˇe dostupnosti pˇripojení k síti, pˇrišla i ruznorodost ˚ typu˚ souboru, ˚ které lze v digitálním svˇetˇe internetu nalézt. Zprvu se zaˇcali objevovat stránky s jednoduchými obrázky, pozdˇeji se však zvyšovala kvalita a objem dat – digitální fotografie, písniˇcky, krátká videa, klipy a filmy. Ve svˇetˇe internetu se v souˇcasnosti pohybuje snad už každý - v podobˇe osobních stránek, blogu, ˚ pracovních profilu, ˚ ruzných ˚ fór zamˇerˇ ených na urˇcitou oblast zájmu, ruzných ˚ sociálních sítí jako Faceboook cˇ i Twitter, emailu˚ a chatovacích služeb Icq, Jabber a Skype... Mladý cˇ lovˇek si už dnes bez internetu nedokáže pˇredstavit svou existenci. Samozˇrejmˇe ne každý je tak zkušený nebo má dostatek cˇ asu na to, aby se nauˇcil minimálnˇe HTML a CSS jazyk, který by mu umožnil vytvoˇrit si své vlastní stránky. Nemluvˇe o nákladech za získání domény a pronájem serveru. Proto existují ruzné ˚ editory a služby, které pomohou uživatelum ˚ vypoˇrádat se s tˇemito pˇrekážkamy. Nevýhoda nˇekterých editoru˚ spoˇcívá v tom, že vypadají a fungují na principu textových editoru˚ typu Microsoft Word nebo OpenOffice, a pozicování netextových objektu˚ je složité, nepˇresné, zdlouhavé a neobratné. Úkolem mé bakaláˇrské práce bylo vytvoˇrení editoru a napsání potˇrebných funkcí, které by výhody tˇechto neohrabaných editoru˚ skloubily s jednoduchostí a lehkostí snadného pozicování prvku˚ pomocí tahu myši.
1
2 Editory Pojmem editor oznaˇcujeme program, neboli aplikaci, která slouží k úpravˇe textu, zejména prostého textu, který neobsahuje žádné formátovací znaˇcky. Slovo pochází z anglického slovesa to edit, tedy upravovat. V dnešní dobˇe existuje nˇekolik druhu˚ editoru, ˚ s jejichž pomocí se dají www stránky vytváˇret a následnˇe mˇenit. Editory lze rozdˇelit do nˇekolika kategorií: •
strukturní (textové) editory
•
WYSIWYG editory
•
WYSIWYM editory
2.1
Strukturní editor
Nˇekdy také oznaˇcován jako textový nebo zdrojový editor. Tento typ je urˇcen výhradnˇe pro vytváˇrení a úpravu HTML kódu a je tedy nutné znát jazyk HTML, jeho syntaxi a samozˇrejmˇe jakékoli další technologie, které budou použity. Jeho pracovní prostˇredí vypadá jako bˇežný textový editor s tím rozdílem, že je o nˇeco více sofistikovanˇejší. Muže ˚ podporovat zvýraznování ˇ syntaxe nejen HTML, ale i jiných programovacích cˇ i skriptovacích jazyku, ˚ obsahovat funkci pro automatické doplnování ˇ kódu, ruzné ˚ šablony, pruvodce ˚ a nápovˇedy, nástroje pro kontrolu odkazu˚ a pravopisu, ovˇerˇ ení a kontrolu validnosti kódu a v neposlední rˇ adˇe formátování kódu pro lepší pˇrehlednost a cˇ itelnost. Dále muže ˚ umožnovat ˇ propojení s FTP1 serverem a verzování2 (version control), což je vhodné pro týmovou spolupráci. Tyto editory používají zejména profesionální tvurci ˚ webových stránek, kde je nutné mít naprostou a stoprocentní kontrolu nad vytvoˇreným zdrojovým kódem. 2.1.1 BlueFish BlueFish je open source projekt vydaný pod licencí GNU GPL. Aplikace se dá spustit na vˇetšinˇe POSIX3 kompatibilních operaˇcních systému˚ vˇcetnˇe Unixu/Linuxu, FreeBSD, MacOS-X, OpenBSD a Solaris a navíc i na MS Windows. Poslední stabilní verze je 2.0.3.[1] Tento výkonný editor je cílený hlavnˇe na programátory a webdesignery, jelikož podporuje mnoho programovacích a znaˇckovacích jazyku˚ a je zamˇerˇ en na editaci dynamických a interaktivních webových stránek. Editor bˇehem psaní nabízí ruzné ˚ možnosti automatického doplnˇení znaˇcek, což ulehˇcuje programátorovi práci. Bohužel nenabízí doplnˇení vlastních definovaných promˇenných. Výborný je na psaní PHP souboru, jelikož nabízí kompletní funkce se vstupními promˇennými a zobrazí i krátké vysvˇetlení, co daná funkce znamená. BlueFish má v nabídce desítky pˇredpˇripravených metod cˇ i cˇ ástí kódu pro ruzné ˚ jazyky, které jsou nejvíce využívány, a ušetˇrí tedy cˇ as. 1. FTP je protokol pro pˇrenos souboru. ˚ Více na
. 2. Verzování je zpusob ˚ uchovávání historie veškerých provedených zmˇen obecnˇe u jakékoliv digitální informace. 3. POSIX je zkratka z Portable Operating System Interface for Unix, což oznaˇcuje pˇrenositelné rozhraní pro operaˇcní systémy, specifikované standardy IEEE. Více na .
2
2. E DITORY 2.1.2 PSPad Editor vznikl nˇekdy koncem roku 2001 pod rukou Ing. Jana Fialy a jeho funkce jsou stále vylepšovány. Poslední aktuální verze je 4.5.4 (2356) z 12.07.2009, beta verze 4.5.5 (2417) vyšla v roce 2011. [2] PSPad je cˇ eský univerzální freeware editor pro operaˇcní systémy MS Windows, který ocení pˇredevším ti, kteˇrí pracují s prostým textem, vytváˇrí webové stránky nebo jen chtˇejí grafické rozhraní pro svuj ˚ pˇrekladaˇc, jelikož nabízí ruzné ˚ možnosti formátování textu, rˇ adu funkcí pro ušetˇrení cˇ asu a zautomatizování rutinních úkolu˚ a mnohé další. Taktéž podporuje mnoho typu˚ souboru˚ a jazyku˚ se zvýraznˇením syntaxe. Pˇríjemným doplnkem ˇ editoru jsou relace, neboli stavy editoru. Otevˇrené soubory se pˇri uložení relace zaznamenají, a pˇri obnovˇe se všechny soubory otevˇrou. To je velmi výhodné pˇri dlouhodobé práci s vˇetším poˇctem souboru. ˚ Další vlastností je propojení s FTP serverem, takže pˇri tvorbˇe stránek není nutné použít další program. Samozˇrejmˇe obsahuje automatické doplnování ˇ znaˇcek a šablony pro HTML znaˇcky se všemy možnými atributy. Dalo by se rˇ íci, že PSPad je jeden z nejlepších editoru, ˚ jedinou nevýhodou je omezení na MS Windows.
Obrázek 1: Ukázka prostˇredí PSPad editoru 3
2. E DITORY
2.2
WYSIWYG editor
Informace v této podkapitole byly pˇrevzaty z následujících zdroju: ˚ [3] [4] Zkratka WYSIWYG znamená v angliˇctinˇe What You See Is What You Get, tedy "Co vidíte, dostanete". Použití WYSIWYG editoru je nejjednodušší cesta, jak vytvoˇrit webovou stránku bez vyžadování znalosti HTML jazyka i pro prumˇ ˚ erného uživatele. WYSIWYG editor poskytuje grafické editaˇcní rozhraní, které zobrazí stránku pˇresnˇe tak, jak se zobrazí ve webovém prohlížeˇci. Nˇekteré editory umožnují ˇ i editaci stránky ve webovém prohlížeˇci. Zobrazení stránky je docíleno implementací tzv. layout engine (renderovacího jádra), který je použit právˇe ve webových prohlížeˇcích. Toto jádro je navíc rozšíˇreno o další funkce tak, aby umožnovalo ˇ vytváˇrení, vkládání, mazání a pˇresouvání obsahu. Cílem editoru samozˇrejmˇe je, že po celou dobu editace by mˇel poskytnutý výsledek pˇredstavovat to, co bude pozdˇeji vidˇet v typickém webovém prohlížeˇci. Pˇrestože tento typ editoru muže ˚ zjednodušit a urychlit tvorbu web designu, vˇetšina profesionálních tvurc ˚ u˚ stránek stále používá textové editory, i když mnohé editory umožnují ˇ pˇrímou editaci HTML kódu, jelikož WYSIWYG editory pˇridávají zbyteˇcnˇe mnoho elementu, ˚ které do HTML vubec ˚ nepatˇrí nebo jsou nevhodnˇe umístˇeny. To vede k nárustu ˚ objemu kódu a ne vždy je význam správný (napˇríklad písmena ve slovˇe jsou rozdˇelena mezerami místo stylem). Kvuli ˚ tˇemto vadám obˇcas dochází k drobným chybám a uživatel nedostane, co vidí. Proto nˇekteˇrí odpurci ˚ tento typ editoru˚ nazývají WYSIWYNG, tedy What You See Is What You Never Get (Co vidíš, je to, co nikdy nedostaneš). WYSIWYG editory mohou být dvojího typu: •
Desktopové editory Nevýhodou vˇetšiny desktopových editoru˚ je samotná instalace a omezení na daný typ operaˇcního systému. Známé desktopové WYSIWYG editory jsou napˇríklad Microsoft FrontPage a Adobe Dreamweaver.
•
Webové editory Tyto editory slouží k vytváˇrení a editování cˇ ástí HTML, kromˇe tagu˚ , a . Tˇechto editoru˚ je nˇekolik desítek, z nichž je vˇetší cˇ ást volnˇe k dispozici. Výhoda spoˇcívá v tom, že není nutná instalace, pouze se na server nahrají pˇríslušné zdrojové kódy programu. Takovýmto typem editoru je napˇríklad TinyMCE nebo CKEditor.
2.2.1 TinyMCE Informace v této podkapitole byly pˇrevzaty z následujících zdroju: ˚ [5] [6] TinyMCE, neboli Tiny Moxiecode Content Editor je vydaný jako software s otevˇreným zdrojovým kódem pod licencí LGPL4 spoleˇcností Moxiecode Systems AB. Je to robustní nezávislý webový HTML WYSIWYG editor psaný v JavaScriptu. Je schopen pˇrevést HTML znaˇcku
