MASARYKOVA UNIVERZITA F}w¡¢£¤¥¦§¨ AKULTA INFORMATIKY !"#$%&'()+,-./012345 Podpora pohybovatelných pozicovatelných sekcí s HTML obsahem BAKALÁRSKÁPRÁCEˇ Iveta Ecksteinová Brno, jaro 2011 Prohlášení Prohlašuji, že tato bakaláˇrskápráce je mým p ˚uvodnímautorským dílem, které jsem vypra- covala samostatnˇe.Všechny zdroje, prameny a literaturu, které jsem pˇrivypracování pou- žívala nebo z nich ˇcerpala,v práci ˇrádnˇecituji 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ˇelapodˇekovathlavnˇesvé vedoucí práce, Hance Bydžovské, za trpˇelivost, pomoc a rady. Dále svým rodiˇc˚um,kteˇrími umožnili dostat se tam, kde jsem nyní. A všem ostatním, kteˇrími byli nápomocní a podpoˇrilimˇe. iii Shrnutí Tato bakaláˇrskápráce se zaobírá aktuální nabídkou dostupných editor ˚una tvorbu webových stránek, webovými službami, které poskytnou webový prostor pro stránky a v neposlední ˇradˇedává možnost uživateli vytvoˇritsi vlastní webové stránky. První ˇcástpráce shrnuje r ˚uznétypy editor ˚u,kterými lze vytvoˇritHTML stránky. Druhá ˇcástse zabývá webovými službami Google Sites a Webnode.cz, které umožˇnují tvorbu webu a jeho hosting. V další ˇcástijsou popsány d ˚uležitétechnologie pro tvorbu HTML stránek, jejich historie, nynˇejšívývoj a použití. Záveˇreˇcnáˇcástse vˇenujevlastnímu vytvoˇrenémuwebové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 Úvod ...... 1 2 Editory ...... 2 2.1 Strukturní editor ...... 2 2.1.1 BlueFish ...... 2 2.1.2 PSPad ...... 3 2.2 WYSIWYG editor ...... 4 2.2.1 TinyMCE ...... 4 2.2.2 FCKeditor a CKEditor ...... 6 2.3 WYSIWYM editor ...... 7 2.3.1 WYMeditor ...... 8 2.3.2 WebCS Editor ...... 9 3 Webová rozhraní ...... 10 3.1 Weby Google Sites ...... 10 3.2 Webnode.cz ...... 11 4 Použité technologie ...... 12 4.1 HTML ...... 12 4.1.1 Historie a vývoj HTML ...... 12 4.1.2 HTML tagy ...... 13 4.2 CSS ...... 13 4.2.1 Historie a vývoj CSS ...... 13 4.2.2 Vytváˇrenístylu ...... 16 5 Knihovna a rozhraní jMoevy ...... 17 5.1 Rozhraní jMoevy ...... 17 5.2 Knihovna jMoevy ...... 19 5.2.1 Funkce ...... 20 6 Závˇer ...... 21 vi 1 Úvod Jazyk HTML byl p ˚uvodnˇevytvoˇrenpro pˇrenostextových informací malého objemu dat, je- likož rychlost intenetu nebyla vysoká. S rozmachem internetu jako takového, se zrychlením pˇrenosovérychlosti a hlavnˇedostupnosti pˇripojeník síti, pˇrišlai r ˚uznorodost typ ˚usoubor ˚u, které lze v digitálním svˇetˇeinternetu nalézt. Zprvu se zaˇcaliobjevovat stránky s jednodu- chými obrázky, pozdˇejise však zvyšovala kvalita a objem dat – digitální fotografie, písniˇcky, krátká videa, klipy a filmy. Ve svˇetˇeinternetu se v souˇcasnostipohybuje snad už každý - v podobˇeosobních strá- nek, blog ˚u,pracovních profil ˚u,r ˚uznýchfór zamˇeˇrenýchna urˇcitouoblast zájmu, r ˚uzných sociálních sítí jako Faceboook ˇciTwitter, email ˚ua chatovacích služeb Icq, Jabber a Skype... Mladý ˇclovˇeksi už dnes bez internetu nedokáže pˇredstavitsvou existenci. Samozˇrejmˇe ne každý je tak zkušený nebo má dostatek ˇcasuna to, aby se nauˇcilminimálnˇeHTML a CSS jazyk, který by mu umožnil vytvoˇritsi své vlastní stránky. Nemluvˇeo nákladech za získání domény a pronájem serveru. Proto existují r ˚uznéeditory a služby, které pomohou uživatel ˚umvypoˇrádatse s tˇemitopˇrekážkamy. Nevýhoda nˇekterýcheditor ˚uspoˇcíváv tom, že vypadají a fungují na principu textových editor ˚utypu Microsoft Word nebo OpenOffice, a pozicování netextových objekt ˚uje složité, nepˇresné,zdlouhavé a neobratné. Úkolem mé bakaláˇrsképráce bylo vytvoˇreníeditoru a napsání potˇrebnýchfunkcí, které by výhody tˇechtoneohrabaných editor ˚uskloubily s jednoduchostí a lehkostí snadného po- zicování prvk ˚upomocí tahu myši. 1 2 Editory Pojmem editor oznaˇcujemeprogram, neboli aplikaci, která slouží k úpravˇetextu, zejména prostého textu, který neobsahuje žádné formátovací znaˇcky. Slovo pochází z anglického slo- vesa to edit, tedy upravovat. V dnešní dobˇeexistuje nˇekolikdruh ˚ueditor ˚u,s jejichž pomocí se dají www stránky vytváˇreta následnˇemˇenit.Editory lze rozdˇelitdo nˇekolikakategorií: • strukturní (textové) editory • WYSIWYG editory • WYSIWYM editory 2.1 Strukturní editor Nˇekdytaké oznaˇcovánjako textový nebo zdrojový editor. Tento typ je urˇcenvýhradnˇepro 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ˇecovíce sofistikovanˇejší. M ˚užepodporovat zvýrazˇnovánísyntaxe nejen HTML, ale i jiných programovacích ˇci skriptovacích jazyk ˚u,obsahovat funkci pro automatické doplˇnováníkódu, r ˚uznéšablony, pr ˚uvodcea nápovˇedy, nástroje pro kontrolu odkaz ˚ua pravopisu, ovˇeˇrenía kontrolu valid- nosti kódu a v neposlední ˇradˇeformátování kódu pro lepší pˇrehlednosta ˇcitelnost.Dále m ˚užeumožˇnovatpropojení 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í tv ˚urci webových strá- nek, kde je nutné mít naprostou a stoprocentní kontrolu nad vytvoˇrenýmzdrojový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ˇePOSIX3 kompatibilních operaˇcníchsystém ˚uvˇcetnˇeUnixu/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ˇena programátory a webdesignery, jelikož podpo- ruje mnoho programovacích a znaˇckovacíchjazyk ˚ua je zamˇeˇrenna editaci dynamických a interaktivních webových stránek. Editor bˇehempsaní nabízí r ˚uzné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ˇred- pˇripravenýchmetod ˇciˇcástíkódu pro r ˚uznéjazyky, které jsou nejvíce využívány, a ušetˇrí tedy ˇcas. 1. FTP je protokol pro pˇrenossoubor ˚u.Více na 2 2. EDITORY 2.1.2 PSPad Editor vznikl nˇekdykoncem 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 ˇceskýuniverzální freeware editor pro operaˇcnísystémy MS Windows, který ocení pˇredevšímti, kteˇrípracují s prostým textem, vytváˇríwebové stránky nebo jen chtˇejí grafické rozhraní pro sv ˚ujpˇrekladaˇc,jelikož nabízí r ˚uznémožnosti formátování textu, ˇradu funkcí pro ušetˇreníˇcasua zautomatizování rutinních úkol ˚ua mnohé další. Taktéž podporuje mnoho typ ˚usoubor ˚ua jazyk ˚use zvýraznˇenímsyntaxe. Pˇríjemnýmdoplˇnkemeditoru jsou relace, neboli stavy editoru. Otevˇrenésoubory se pˇri uložení relace zaznamenají, a pˇriobnovˇese všechny soubory otevˇrou.To je velmi výhodné pˇridlouhodobé práci s vˇetšímpoˇctemsoubor ˚u.Další vlastností je propojení s FTP serverem, takže pˇritvorbˇestránek není nutné použít další program. Samozˇrejmˇeobsahuje automatické doplˇnováníznaˇceka šablony pro HTML znaˇckyse všemy možnými atributy. Dalo by se ˇríci, že PSPad je jeden z nejlepších editor ˚u,jedinou nevýhodou je omezení na MS Windows. Obrázek 1: Ukázka prostˇredíPSPad editoru 3 2. EDITORY 2.2 WYSIWYG editor Informace v této podkapitole byly pˇrevzatyz následujících zdroj ˚u:[3] [4] Zkratka WYSIWYG znamená v angliˇctinˇeWhat You See Is What You Get, tedy "Co vidíte, dostanete". Použití WYSIWYG editoru je nejjednodušší cesta, jak vytvoˇritwebovou stránku bez vyžadování znalosti HTML jazyka i pro pr ˚umˇernéhouživatele. WYSIWYG editor poskytuje grafické editaˇcnírozhraní, které zobrazí stránku pˇresnˇetak, jak se zobrazí ve webovém prohlížeˇci.Nˇekteréeditory umožˇnujíi editaci stránky ve webo- vém prohlížeˇci.Zobrazení stránky je docíleno implementací tzv. layout engine (renderova- cího jádra), který je použit právˇeve webových prohlížeˇcích.Toto jádro je navíc rozšíˇrenoo další funkce tak, aby umožˇnovalovytváˇrení,vkládání, mazání a pˇresouváníobsahu. Cílem editoru samozˇrejmˇeje, že po celou dobu editace by mˇelposkytnutý výsledek pˇredstavovat to, co bude pozdˇejividˇetv typickém webovém prohlížeˇci. Pˇrestožetento typ editoru m ˚užezjednodušit a urychlit tvorbu web designu, vˇetšinapro- fesionálních tv ˚urc ˚ustránek stále používá textové editory, i když mnohé editory umožˇnují pˇrímoueditaci HTML kódu, jelikož WYSIWYG editory pˇridávajízbyteˇcnˇemnoho element ˚u, které do HTML v ˚ubecnepatˇrínebo jsou nevhodnˇeumístˇeny. To vede k nár ˚ustuobjemu kódu a ne vždy je význam správný (napˇríklad písmena ve slovˇejsou rozdˇelenamezerami místo stylem). Kv ˚uli tˇemtovadám obˇcasdochází k drobným chybám a uživatel nedostane, co vidí. Proto nˇekteˇríodp ˚urci tento typ editor ˚unazý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šinydesktopových editor ˚uje samotná instalace a omezení na daný typ operaˇcníhosystému. Známé desktopové WYSIWYG editory jsou napˇríkladMicrosoft FrontPage a Adobe Dreamweaver. • Webové editory Tyto editory slouží k vytváˇrenía editování ˇcástíHTML, kromˇetag ˚u,
2.2.1 TinyMCE Informace v této podkapitole byly pˇrevzatyz následujících zdroj ˚u:[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í ne- závislý webový HTML WYSIWYG editor psaný v JavaScriptu. Je schopen pˇrevéstHTML znaˇcku