Fakulta mechatroniky a mezioborovy´ch inzˇeny´rsky´ch studiı´
Studijnı´ program: B 2612 – Elektrotechnika a informatika Studijnı´ obor: 1802R022 – Informatika a logistika
WYSIWYG editor pro sazbu validnı´ho XHTML WYSIWYG editor for typesetting valid XHTML
Bakala´rˇska´ pra´ce
Autor: Petr Hamtil
Vedoucı´ pra´ce: Ing. Pavel Tyl Konzultant: Ing. Jirˇı´ Ty´rˇ
V Liberci 13. 5. 2008
2
POZOR du˚ lezˇite´!!!
Tato stra´nka musı´ by´t prˇed vytvorˇenı´m vazby nahrazena origina´lnı´m zada´nı´m!
Origina´l zada´nı´ pra´ce Obsahuje zada´nı´ pra´ce s origina´lem podpisu˚ (vedoucı´ u´stavu a deˇkan fakulty). Zada´nı´ DP a BP je oboustranne´, v prˇı´padeˇ jednostranne´ho tisku se pocˇı´ta´
jako jedina´ stra´nka (cˇı´slo 2), v prˇı´padeˇ oboustranne´ho tisku je pocˇı´ta´me jako dveˇ strany (3 a 4).
Prohla´sˇenı´
Byl jsem sezna´men s tı´m, zˇe na mou bakala´rˇskou pra´ci se plneˇ vztahuje za´kon cˇ. 121/2000 o pra´vu autorske´m, zejme´na § 60 (sˇkolnı´ dı´lo).
Beru na veˇdomı´, zˇe TUL ma´ pra´vo na uzavrˇenı´ licencˇnı´ smlouvy o uzˇitı´ me´ BP a prohlasˇuji, zˇe s o u h l a s ı´ m s prˇı´padny´m uzˇitı´m me´ bakala´rˇske´ pra´ce (prodej, zapu˚jcˇenı´ apod.).
Jsem si veˇdom toho, zˇe uzˇı´t sve´ bakala´rˇske´ pra´ce cˇi poskytnout licenci k jejı´mu vyuzˇitı´
mohu jen se souhlasem TUL, ktera´ ma´ pra´vo ode mne pozˇadovat prˇimeˇrˇeny´ prˇı´speˇvek na u´hradu na´kladu˚, vynalozˇeny´ch univerzitou na vytvorˇenı´ dı´la (azˇ do jejich skutecˇne´
vy´sˇe).
Bakala´rˇskou pra´ci jsem vypracoval samostatneˇ s pouzˇitı´m uvedene´ literatury a na za´- kladeˇ konzultacı´ s vedoucı´m bakala´rˇske´ pra´ce a konzultantem.
Datum
Podpis
4
Podeˇkova´nı´
Na tomto mı´steˇ bych ra´d podeˇkoval vedoucı´mu bakala´rˇske´ pra´ce Ing. Pavlu Tylovi a konzultantovi Ing. Jirˇı´mu Ty´rˇovi za prˇipomı´nky a cenne´ rady prˇi vypracova´va´nı´ bakala´rˇske´
pra´ce.
Take´ chci podeˇkoval rodineˇ a prˇa´telu˚m za vesˇkerou podporu prˇi pra´ci na tomto projektu a psanı´ pra´ce.
Abstrakt
Cı´lem bakala´rˇske´ pra´ce je sezna´mit se hloubeˇji s problematikou tvorby XHTML webo- vy´ch stra´nek prostrˇednictvı´m WYSIWYG editoru˚ vytvorˇeny´ch v programovacı´m jazyce JavaScript a dalsˇı´mi prˇı´slusˇny´mi technologiemi, da´le prozkoumat sta´vajı´cı´ rˇesˇenı´ a pokusit se vytvorˇit a otestovat vlastnı´ WYSIWYG editor.
Prˇi studiu technologiı´ vyuzˇitelny´ch pro WYSIWYG editor jsem se zameˇrˇil na pro- zkouma´nı´ modernı´ch metod a technologiı´, ktere´ jsou vytvorˇeny´m editorem vyuzˇı´va´ny.
Prˇi popisu WYSIWYG editoru˚ jsem se zameˇrˇil prˇedevsˇı´m na popsa´nı´ principu, na kte- re´m pracujı´.
Vytvorˇeny´ WYSIWYG editor byl koncipova´n pro snadnou rozsˇı´rˇitelnost o nove´ funkce a kompatibilitu s nejpouzˇı´vaneˇjsˇı´mi prohlı´zˇecˇi.
Abstract
The goal of this work is to familiarize with the issues of XHTML web pages creating by WYSIWYG editors programmed in JavaScript language and other appropriate technolo- gies, to analyze existing solutions and to create and test own WYSIWYG editor.
Among tasks related to WYSIWYG editors I focused on analysis of state of the art methods and technologies used by these editors.
Within describing WYSIWYG editors I focused especially on their work principles.
Final WYSIWYG editor was conceived for a simple extension of new functions and maximal compatibility with nowadays most frequently used browsers.
Klı´cˇova´ slova
WYSIWYG editor, JavaScript, WWW, XHTML.
Keywords
WYSIWYG editor, JavaScript, WWW, XHTML.
6
Obsah
1 Technologie, metody a na´stroje 11
1.1 WYSIWYG editor . . . 11
1.1.1 WYSIWYG prˇi tvorbeˇ webu . . . 11
1.1.2 Vy´hody a nevy´hody . . . 12
1.1.3 Alternativa TEX . . . 12
1.2 XHTML – hypertextovy´ znacˇkovacı´ jazyk . . . 13
1.3 CSS – kaska´dove´ styly dokumentu . . . 15
1.4 JavaScript – klientsky´ programovacı´ jazyk . . . 16
1.5 PHP – serverovy´ programovacı´ jazyk . . . 17
1.6 AJAX – novy´ prˇı´stup pro webove´ aplikace . . . 18
1.7 TDD – programova´nı´ rˇı´zene´ testy . . . 19
1.8 Webove´ prohlı´zˇecˇe . . . 20
1.8.1 Ja´dro Trident . . . 21
1.8.2 Ja´dro Gecko . . . 22
1.8.3 Ja´dro Presto . . . 22
1.8.4 Ja´dro KHTML a WebKit . . . 23
2 WYSIWYG XHTML editory 24 2.1 Soucˇasne´ open source editory . . . 24
2.1.1 TinyMCE . . . 24
2.1.2 FCKeditor . . . 25
2.1.3 widgEditor . . . 26
2.1.4 Bronziho editor . . . 27
2.2 Princip JavaScriptovy´ch WYSIWYG editoru˚ . . . 29
2.2.1 Zacˇleneˇnı´ editoru do stra´nek . . . 29
2.2.2 Modifikace ko´du dokumentu . . . 29
2.2.3 Validita ko´du . . . 30
2.2.4 Graficke´ rozhranı´ . . . 30
2.2.5 Ukla´da´nı´ vy´sledku . . . 32
2.2.6 Omezenı´ JavaScriptovy´ch WYSIWYG editoru˚ . . . 33
3 Vy´voj aplikace 34
3.1 Konfigurace . . . 34
3.2 Inicializace editoru . . . 35
3.2.1 Funkce inicializuj . . . 35
3.2.2 Funkce generuj . . . 36
3.3 Konstruktor editoru . . . 37
3.3.1 Vizua´lnı´ prvky . . . 38
3.3.2 Generova´nı´ menu . . . 38
3.3.3 Styly . . . 38
3.3.4 Nacˇı´ta´nı´ a odesı´la´nı´ ko´du pomocı´ AJAXu . . . 38
3.3.5 Specia´lnı´ tlacˇı´tka . . . 39
3.4 Parser . . . 39
4 Testova´nı´ 40 4.1 Grafika a vy´stup . . . 40
4.2 Konqueror a ostatnı´ prohlı´zˇecˇe . . . 40
5 Za´veˇr 41
Seznam obra´zku ˚
1 Zasla´nı´ pozˇadavku na PHP stra´nku klienta na server . . . 172 Zna´zorneˇnı´ posı´la´nı´ pozˇadavku˚ klienta na server pomocı´ AJAXu . . . 19
3 Snı´zˇenı´ pameˇt’ove´ na´rocˇnosti poslednı´ verze Firefox 3 . . . 23
4 WYSIWYG editor TinyMCE . . . 25
5 WYSIWYG editor FCKeditor . . . 26
6 WYSIWYG editor widgEditor . . . 27
7 WYSIWYG editor Bronzi . . . 28
8 Vzhled Microsoft Word 2007 . . . 28
9 Graficke´ ovla´dacı´ rozhranı´ aplikace OpenOffice.org Writer 2.3.0 . . . 31
10 Vytvorˇeny´ WYSIWYG editor . . . 39
8
Seznam termı´nu ˚ a zkratek
CSS Cascading Style Sheets – jazyk pro popis zpu˚sobu zobrazenı´ stra´nek napsany´ch v jazycı´ch HTML, XHTML nebo XML.
DOM Document Object Model – objektoveˇ orientovana´ reprezentace XML nebo HTML dokumentu.
DTD Document Type Definition – jazyk pro popis struktury XML prˇı´padneˇ SGML dokumentu. Omezuje mnozˇinu prˇı´pustny´ch dokumentu˚ spadajı´cı´ch do dane´ho typu nebo trˇı´dy.
GPL GNU General Public License – licence pro svobodny´ software.
HTTP HyperText Transfer Protocol – internetovy´ protokol urcˇeny´ pu˚vodneˇ pro vy´meˇnu hypertextovy´ch dokumentu˚ ve forma´tu HTML.
LGPL GNU Lesser General Public License – varianta licence pro svobodny´ software GNU GPL, ktera´ ale na rozdı´l od GPL umozˇnˇuje spojova´nı´ s nesvobodny´m ko´dem.
MPL Mozilla Public License – licence pro svobodny´ software pouzˇı´va´na pro zdrojovy´
ko´d vyda´vany´ Mozilla Corporation.
MSIE(IE) Microsoft Internet Explorer (Internet Explorer) – proprieta´rnı´ graficky´ webovy´
prohlı´zˇecˇ spolecˇnosti Microsoft.
OS(S) Open Source (Software) – pocˇı´tacˇovy´ software s otevrˇeny´m zdrojovy´m ko´dem.
PDF Portable Document Format – souborovy´ forma´t vyvinuty´ firmou Adobe pro ukla´- da´nı´ dokumentu˚ neza´visle na softwaru i hardwaru, na ktere´m byly porˇı´zeny.
PHP Rekurzivnı´ zkratka PHP: Hypertext Preprocessor (pu˚vodneˇ Personal Home Page) – skriptovacı´ programovacı´ jazyk urcˇeny´ prˇedevsˇı´m pro programova´nı´ dynamicky´ch internetovy´ch stra´nek.
TDD Test-Driven Development – programova´nı´ rˇı´zene´ testy, cozˇ je jedna z metod pro- gramova´nı´.
W3C World Wide Web Consortium – mezina´rodnı´ konsorcium jehozˇ cˇlenove´ spolecˇneˇ s verˇejnostı´ vyvı´jejı´ webove´ standardy pro World Wide Web.
WHATWG The Web Hypertext Application Technology Working Group – pracovnı´ sku- pina snazˇı´cı´ se o na´vrh novy´ch technologiı´ umozˇnˇujı´cı´ch autoru˚m psa´t a nasazovat webove´ aplikace mnohem snadneˇji pomocı´ rozsˇı´rˇenı´ existujı´cı´ch technologiı´.
WML Wireless Markup Language – znacˇkovacı´ jazyk zalozˇeny´ na jazyce XML umozˇ- nˇujı´cı´ tvorbu online dokumentu˚ pro mobilnı´ zarˇı´zenı´.
WWW World Wide Web – oznacˇenı´ pro aplikace internetove´ho protokolu HTTP.
WYSIWYG What You See Is What You Get – oznacˇuje zpu˚sob editace dokumentu˚ v po- cˇı´tacˇi, prˇi ktere´m je verze zobrazena´ na obrazovce vzhledoveˇ totozˇna´ s vy´slednou verzı´ dokumentu.
XHTML eXtensible HyperText Markup Language – znacˇkovacı´ jazyk pro tvorbu hyper- textovy´ch dokumentu˚ v prostrˇedı´ WWW vyvinuty´ W3C.
XML eXtensible Markup Language – obecny´ znacˇkovacı´ jazyk, ktery´ byl vyvinut a standardizova´n konsorciem W3C.
10
U ´ vod
Je 21. stoletı´ a neexistuje nikdo, kdo by dnes nebyl at’prˇı´mo cˇi neprˇı´mo za´visly´ na jednom z nejrozsa´hlejsˇı´ch informacˇnı´ch me´diı´ zvane´m Internet. Tato celosveˇtova´ sı´t’ poskytuje snadnou a rychlou mozˇnost, jak zı´ska´vat a poskytovat informace, komunikovat s prˇa´teli nebo organizacemi a to prakticky odkudkoliv na sveˇteˇ.
Jednou z nejoblı´beneˇjsˇı´ch sluzˇeb Internetu je World Wide Web nebo take´ WWW cˇi jed- nodusˇe web. Pro tuto sluzˇbu se pouzˇı´vajı´ webove´ prohlı´zˇecˇe, ktere´ se prˇipojujı´ k serveru˚m a zı´ska´vajı´ ko´d webovy´ch stra´nek, jenzˇ na´sledneˇ sve´mu uzˇivateli interpretujı´ do srozumi- telneˇjsˇı´ nadefinovane´ podoby. Pokud chce ovsˇem uzˇivatel neˇjake´ webove´ stra´nky vytvorˇit a prˇispeˇt do celosveˇtove´ informacˇnı´ sı´teˇ, situace je pro neˇho komplikovaneˇjsˇı´.
Aby uzˇivatel nemusel veˇnovat neˇkolik dnı´ cˇi ty´dnu˚ studiu problematiky tvorby webo- vy´ch prezentacı´, je pro neˇho nezbytne´ mı´t kromeˇ na´stroje pro zobrazenı´ webovy´ch stra´nek take´ na´stroj pro jejich vytva´rˇenı´. V idea´lnı´m prˇı´padeˇ by tento na´stroj meˇl by´t soucˇa´stı´
webove´ho prohlı´zˇecˇe, aby nebylo potrˇeba doinstalova´vat dodatecˇny´ software. Za´rovenˇ by take´ meˇl mı´t pro uzˇivatele snadne´ ovla´da´nı´ a meˇlo by by´t hned videˇt, jak bude ve vy´sledku vy´tvor vypadat.
Bakala´rˇska´ pra´ce se skla´da´ ze cˇtyrˇ cˇa´stı´. Zprvu jsou popsa´ny technologie, metody a na´stroje pouzˇite´ prˇi pra´ci na editoru. V druhe´ cˇa´sti jsou vybra´ny neˇktere´ existujı´cı´
a pouzˇı´vane´ JavaScriptove´ WYSIWYG editory a vysveˇtlen princip na jake´m takove´to editory fungujı´. Trˇetı´ a cˇtvrta´ cˇa´st je veˇnova´na prakticke´ stra´nce bakala´rˇske´ pra´ce, vy´voji a otestova´nı´ vlastnı´ho JavaScriptove´ho WYSIWYG editoru.
1 Technologie, metody a na´stroje
1.1 WYSIWYG editor
Zkratka WYSIWYG je akronym anglicke´ veˇty „What you see is what you get“, neboli v cˇesˇtineˇ „Co vidı´sˇ, to dostanesˇ“.
Tı´mto akronymem se oznacˇuje metoda pro pra´ci s dokumenty na pocˇı´tacˇi, ktera´ umozˇ- nˇuje uzˇivateli snadno upravovat dokument v podobeˇ, v jake´ bude vypadat vy´sledek inter- pretovany´ na vy´stupu z dane´ho programu. Naprˇı´klad u nejcˇasteˇjsˇı´ch WYSIWYG editoru˚, textovy´ch procesoru˚, se obvykle jedna´ o vy´slednou podobu stra´nky, ktera´ bude vytisˇteˇna na tiska´rneˇ. Prˇı´kladem takove´ho editoru by mohl by´t velmi popula´rnı´ otevrˇeny´ open source projekt OpenOffice.org, ktery´ je jednou z hlavnı´ch konkurencı´ proprieta´rnı´ho produktu Microsoft Word, silneˇ sva´zane´ho s monopolnı´mi operacˇnı´mi syste´my MS Windows.
1.1.1 WYSIWYG prˇi tvorbeˇ webu
WYSIWYG editor pro sazbu validnı´ho XHTML1tedy uzˇivateli umozˇnı´ zna´my´m jednodu- chy´m a intuitivnı´m zpu˚sobem vytvorˇit webovou stra´nku ve znacˇkovacı´m jazyce XHTML.
Mnoho dokumentu˚ vytvorˇeny´ch pomocı´ WYSIWYG editoru˚ cˇasto trpı´ neprˇimeˇrˇenou velikostı´ a nekompatibilitou s neˇktery´mi me´neˇ pouzˇı´vany´mi prohlı´zˇecˇi. Takto generovany´
ko´d je sice mozˇne´ posle´ze editovat a opravit rucˇneˇ, ale pote´ editor ztra´cı´ svou nejveˇtsˇı´
vy´hodu.
Proble´my s neprˇimeˇrˇenou velikostı´ a nekompatibilitou je zpu˚soben na´vrhem webu.
Pu˚vodneˇ web nebyl navrzˇen jako vizua´lnı´ medium, a proto prˇi rozvoji Internetu byly ucˇi- neˇny ru˚zne´ pokusy, jak da´t autoru˚m vı´ce kontroly nad vzhledem webove´ stra´nky, naprˇı´klad pomocı´ CSS2. Bohuzˇel se kazˇdy´ webovy´ prohlı´zˇecˇ pokousˇel vyrˇesˇit proble´m po sve´m a mnohe´ veˇci, ktere´ perfektneˇ fungovaly v jednom prohlı´zˇecˇi, byly jen slabeˇ podporo- va´ny v prohlı´zˇecˇi jine´m. Du˚sledkem toho musely by´t WYSIWYG editory optimalizova´ny pro neˇkolik ru˚zny´ch prohlı´zˇecˇu˚, rˇesˇily mnoho proble´mu˚ a byly velmi komplikovane´.
1Znacˇkovacı´ jazyk pro tvorbu hypertextovy´ch dokumentu˚.
2Jazyk pro popis zpu˚sobu zobrazenı´ stra´nek napsany´ch v jazycı´ch HTML, XHTML nebo XML.
1 Technologie, metody a na´stroje 12
1.1.2 Vy´hody a nevy´hody
Vy´hodou teˇchto editoru˚ pro samotne´ho uzˇivatele je fakt, zˇe uzˇivatel nemusı´ veˇdeˇt, jak vypada´ samotny´ zdrojovy´ text dokumentu a jaky´ jazyk pro popis dat je v dokumentu pouzˇı´va´n. Proto je pro veˇtsˇinu uzˇivatelu˚, kterˇı´ majı´ za´jem o vytvorˇenı´ neˇjake´ho dokumentu, tento prˇı´stup tvorby dokumentu z hlediska cˇasove´ na´rocˇnosti a na pochopenı´ nejvhodneˇjsˇı´.
WYSIWYG editory ovsˇem nejsou vsˇemi uctı´va´ny a majı´ mnoho odpu˚rcu˚, zejme´na mezi odborneˇjsˇı´ verˇejnostı´. Du˚vod je prosty´, tyto editory jsou zameˇrˇeny na vizua´lnı´ ovla´- da´nı´, jednoduchost a snadnost pochopenı´. V neˇktery´ch prˇı´padech, kdyzˇ cˇloveˇk potrˇebuje kvalitnı´ sazbu dokumentu nebo vyuzˇı´t vesˇkere´ mozˇnosti pro urcˇity´ forma´t dokumentu, WYSIWYG editory nestacˇı´. Cˇı´m slozˇiteˇjsˇı´ a na´rocˇneˇjsˇı´ projekt, tı´m vı´ce ovla´dacı´ch prvku˚
je potrˇeba, a cˇı´m vı´ce ovla´dacı´ch prvku˚ nashroma´zˇdeˇny´ch ve hlavnı´ch menu a podmenu, tı´m se pra´ce sta´va´ slozˇiteˇjsˇı´, nepohodlnou a na´rocˇnou. WYSIWYG editory take´ nejsou schopny zpracova´vat kvanta dat pro idea´lnı´ vykreslenı´ a rozmı´steˇnı´ textu v rea´lne´m cˇase.
1.1.3 Alternativa TEX
Prˇestozˇe WYSIWYG editory cˇasto usnadnˇujı´ a urychlujı´ pra´ci s psanı´m textu, mnoho profesiona´lu˚ sta´le pouzˇı´va´ alternativnı´ zpu˚soby pro vytva´rˇenı´ textovy´ch dokumentu˚.
Jedna z nejkvalitneˇjsˇı´ch a nejpropracovaneˇjsˇı´ch alternativ je typograficky´ syste´m TEX naprogramovany´ Donaldem Knuthem, ktery´ byl zhruba prˇed trˇiceti lety nespokojen s na- bı´zenou nekvalitnı´ sazbou jeho matematicke´ knihy. TeX se prosadil zejme´na pro psanı´
veˇdecky´ch, zvla´sˇteˇ matematicky´ch, textu˚ a stal se standardnı´m forma´tem pro mnoho zna´my´ch veˇdecky´ch cˇasopisu˚.
Du˚vodu˚, procˇ psa´t v TeXu je mnoho. V jednom z mnoha cˇla´nku˚ o TeXu na webove´
stra´nce www.root.cz je vypsa´n seznam neˇkolika za´kladnı´ch du˚vodu˚ [9].
Procˇ tedy psa´t v TeXu?
• Skveˇly´ typograficky´ vy´stup.
• Vasˇe dokumenty pu˚jdou kdykoliv prˇecˇı´st, nemu˚zˇe se sta´t, zˇe se jejich obsah posˇkodı´
a nepu˚jdou otevrˇı´t (cozˇ se velmi cˇasto sta´valo se starsˇı´mi verzemi MS Office).
• Vede uzˇivatele k dobry´m na´vyku˚m strukturova´nı´ dokumentu.
• Mu˚zˇete pouzˇı´t svu˚j oblı´beny´ editor.
• TeX je multiplatformnı´, existujı´ implementace pro MS Windows, Linux, Mac OS X, BSD syste´my a dalsˇı´ operacˇnı´ syste´my.
• Existuje pro neˇj spousta sˇablon, ale take´ dokumentace.
• TeX je u´zˇasneˇ prˇizpu˚sobitelny´ a programovatelny´, nebude va´m bra´nit v rozletu, azˇ se stanete pokrocˇily´m uzˇivatelem.
Na rozdı´l od WYSIWYG editoru˚, ktere´ zpracova´vajı´ a zobrazujı´ text v rea´lne´m cˇase, se TeX kompiluje. Po napsa´nı´ dokumentu˚ je pouzˇit program pro prˇevod textu s TeXovsky´mi prˇı´kazy do pozˇadovane´ho forma´tu, naprˇı´klad prˇenosny´ forma´t dokumentu˚ PDF3. To da´va´
TeXu prostor pro mnohem kvalitneˇjsˇı´ a propracovaneˇjsˇı´ aplikaci ru˚znorody´ch pravidel.
Zvla´da´ obrovske´ mnozˇstvı´ ligatur a dalsˇı´ch typograficky´ch technik, ktere´ se aplikujı´
trˇeba pro zarovna´va´nı´ do bloku textu, kdy u WYSIWYG editoru˚ je vy´sledek mnohdy nepouzˇitelny´. TeX zarovna´va´ do bloku defaultneˇ a urcˇuje nejoptima´lneˇjsˇı´ rozlozˇenı´ textu v odstavci a prˇı´padneˇ sa´m rozdeˇlı´ slovo na konci rˇa´dku.
TeXove´ soubory se ukla´dajı´ do obycˇejny´ch textovy´ch souboru˚, ktere´ jsou prˇeva´zˇneˇ tvorˇeny textem ve znakove´ sadeˇ ASCII, Unicode, nebo ISO-8859-2. Cozˇ je velka´ vy´- hoda pro vy´voja´rˇe, kterˇı´ mohou velmi snadno zpracova´vat tyto soubory programem cˇi skriptem a vzhledem k tomu, zˇe TeX nenı´ interaktivnı´, je mozˇno jej pouzˇı´vat v programu pro generova´nı´ PDF souboru˚.
TeX je velmi dobrˇe rozsˇirˇitelny´ pomocı´ mnoha knihoven a take´ je pro neˇj k dispozici mnoho sˇablon a stylu˚.
TeX sa´m o sobeˇ je velmi nı´zkou´rovnˇovy´, proto Donald Knuth zahrnul do svy´ch pla´nu˚
makrobalı´ky, ktere´ umozˇnˇujı´ psa´t dokument a nezaby´vat se proble´my s implementacı´
obsahu, rejstrˇı´ku˚ a podobneˇ. Tato makra jsou vlastneˇ dalsˇı´ prˇı´kazy TeXu.
Jednı´m z nejpouzˇı´vaneˇjsˇı´ch balı´ku˚, ktery´ je pouzˇı´va´n i prˇi psanı´ te´to bakala´rˇske´ pra´ci, je LaTeX.
1.2 XHTML – hypertextovy´ znacˇkovacı´ jazyk
XHTML, neboli „eXtensible HyperText Markup Language“, cozˇ je cˇesky prˇelozˇitelne´
jako „rozsˇirˇitelny´ hypertextovy´ znacˇkovacı´ jazyk“, je znacˇkovacı´ jazyk pro tvorbu hyper-
3Souborovy´ forma´t vyvinuty´ firmou Adobe pro ukla´da´nı´ dokumentu˚ neza´visle na softwaru i hardwaru, na ktere´m byly porˇı´zeny.
1 Technologie, metody a na´stroje 14
textovy´ch dokumentu˚ v prostrˇedı´ WWW vyvinuty´ konsorciem W3C (World Wide Web Consortium).
Tento znacˇkovacı´ jazyk je na´sledovnı´kem jazyka HTML (HyperText Markup Langu- age), ktery´ byl navrzˇen v roce 1990 spolecˇneˇ s protokolem HTTP (HyperText Transfer Protocol – prˇenosovy´ protokol hypertextu) pro jeho prˇenos po pocˇı´tacˇovy´ch sı´tı´ch. V te´
dobeˇ byl take´ napsa´n prvnı´ webovy´ prohlı´zˇecˇ, ktery´ se jmenoval WorldWideWeb. (Zdro- jovy´ ko´d programu byl v roce 1993 uvolneˇn jako volne´ dı´lo, cozˇ z neˇj deˇla´ svobodny´
software.)
Vy´voj jazyka HTML byl ukoncˇen ve verzi 4.01, ktere´ bylo vydane´ 24. prosince 1999 a meˇla by´t na´sledneˇ nahrazena verzemi XHTML zalozˇene´m na jazyce XML4.
Tento za´meˇr konsorcia W3C se vsˇak nesetkal s dostatecˇnou kladnou odezvou a negativnı´ hlasy se projevili v nedostatecˇne´m prˇijetı´ XHTML. Byla zalozˇena iniciativa WHATWG, ktera´ si dala za cı´l vytvorˇit novou verzi HTML, oznacˇovanou jako HTML 5.
V reakci na to, 7. brˇezna 2007, byla konsorciem W3C zalozˇena pracovnı´ skupina HTML, ktera´ ma´ za cı´l v roce 2010 uvolnit novou verzi HTML, oznacˇovanou jako HTML 5 a tak nava´zat na ukoncˇeny´ vy´voj HTML 4.01. V kveˇtnu 2007 se pote´ W3C dohodla s WHATWG o prˇevzetı´ doposud vytvorˇeny´ch novy´ch na´vrhu˚ Web Applications 1.0 a Web Forms 2.0.
Konsorcium W3C tedy momenta´lneˇ paralelneˇ vyvı´jı´ dva smeˇry a to znacˇkovacı´ jazyk HTML 5 a XHTML 2.
XHTML ve verzi 1.0 je prvnı´ specifikace konsorcia W3C, ktera´ si klade za cı´l prˇeve´st starsˇı´ znacˇkovacı´ jazyk HTML do podoby, ktera´ bude vyhovovat podmı´nka´m vytva´rˇenı´
XML dokumentu˚m prˇi zachova´nı´ zpeˇtne´ kompatibility. Tato verze existuje ve trˇech vari- anta´ch.
Tou nejstriktneˇjsˇı´ a nejprˇı´sneˇjsˇı´ verzı´ je XHTML 1.0 Strict. Hlavnı´ du˚raz je kladen na osvobozenı´ dokumentu˚ od forma´tovacı´ch znacˇek pro rozvrzˇenı´ stra´nky. Pro potrˇeby graficky´ch efektu˚ a rozvrzˇenı´ stra´nky se prˇedpokla´da´ pouzˇitı´ kaska´dovy´ch stylu˚ oznacˇo- vany´ch jako CSS.
Pro snadneˇjsˇı´ prˇechod z HTML existuje verze XHTML 1.0 Transitional, ktera´ umozˇ- nˇuje pouzˇı´vat prˇekonane´ tagy a forma´tovacı´ prvky zaka´zane´ ve striktnı´ verzi. Tato verze je vhodna´ pro me´neˇ na´silny´ prˇechod na XHTML standardy.
Poslednı´ (trˇetı´) verze je XHTML 1.0 Frameset. Kromeˇ mensˇı´ striktnosti (jako u Tran-
4Obecny´ rozsˇirˇitelny´ znacˇkovacı´ jazyk.
sitional verze) prˇida´va´ podporu ra´mcu˚. Ra´mce jsou jizˇ v dnesˇnı´ dobeˇ z mnohy´ch du˚vodu˚
zavrhova´ny a nahrazova´ny noveˇjsˇı´mi metodami pro rozvrzˇenı´ obsahu na stra´nce.
Pro rozlisˇenı´ verze XHTML cˇi HTML dokumentu se pouzˇı´va´ definice typu dokumentu DOCTYPE na zacˇa´tku dokumentu, ktery´ obsahuje informaci o pouzˇite´m znacˇkovacı´m jazyce a odkaz na soubor jeho pravidel.
Hlavnı´m rozdı´lem za´pisu HTML a XHTML je nutnost, aby vsˇechny tagy byly v jazyce XHTML ukoncˇene´. U nepa´rovy´ch tagu˚ jsou definova´ny trˇi zpu˚soby ukoncˇenı´, z nichzˇ se prˇeva´zˇneˇ z du˚vodu zpeˇtne´ kompatibility doporucˇuje za´pis mezery s lomı´tkem prˇed kon- cove´ zname´nko „veˇtsˇı´ nezˇ“. Naprˇı´klad za´pis pro novy´ rˇa´dek v HTML se zapisuje jako
<br> a v XHTML jako <br />.
Dalsˇı´m za´sadnı´m pravidlem je nutnost za´pisu vsˇech tagu˚ a atributu˚ maly´mi pı´smeny, jelikozˇ je jazyk XHTML citlivy´ na velikost pı´sma a musı´ se dodrzˇovat za´pis v deklaraci DTD5.
V XHTML je take´ nutno dodrzˇovat spra´vnou syntaxi a zapisovat atributy tagu˚ do uvo- zovek. Kazˇdy´ atribut take´ musı´ mı´t definovanou hodnotu, pokud je uveden. Kromeˇ teˇchto za´sadnı´ch rozdı´lu˚ jsou jesˇteˇ dalsˇı´ doporucˇenı´ a me´neˇ cˇasta´ pravidla.
1.3 CSS – kaska´dove´ styly dokumentu
Zkratka CSS z anglicke´ho Cascading Style Sheets, cˇesky tabulky kaska´dovy´ch stylu˚ nebo pouze kaska´dove´ styly, je pouzˇı´va´na pro oznacˇenı´ jazyku pro popis zpu˚sobu zobrazova´nı´
dokumentu˚ HTML, XHTML cˇi XML. Tento jazyk opeˇt navrhlo a da´le vyvı´jı´ konsorcium W3C. V soucˇasnosti jsou pouzˇı´va´ny ve verzi 1 a 2, prˇı´padneˇ 2.1.
Cı´lem a hlavnı´m du˚vodem existence kaska´dovy´ch stylu˚ je u´plne´ oddeˇlenı´ obsahu a struktury dokumentu od jeho zpu˚sobu prezentace. Oddeˇlenost definice vzhledu od ob- sahu a struktury umozˇnˇuje jednodusˇsˇı´ upravova´nı´ obsahu bez rizika posˇkozenı´ vzhledu dokumentu, mozˇnost spolupra´ce vı´ce lidı´ na jednom projektu, kdy se jeden zaby´va´ cˇisteˇ obsahovou stra´nkou a druhy´ jen grafickou.
Jednou z velky´ch vy´hod, hlavneˇ pro uzˇivatele, je mozˇnost neza´visle na obsahu kom- pletneˇ zmeˇnit celkovy´ vzhled dokumentu a tak mu˚zˇe autor stra´nek da´t uzˇivateli na vy´beˇr mezi neˇkolika vzhledy nebo urcˇit ru˚zna´ zobrazenı´ pro ru˚zna´ vy´stupnı´ zarˇı´zenı´. Naprˇı´klad vzhled pro zobrazenı´ na monitoru nemusı´ by´t idea´lnı´ pro tisˇteˇnou verzi apod.
5Definice typu dokumentu pro popis struktury XML (prˇı´padneˇ SGML) dokumentu.
1 Technologie, metody a na´stroje 16
Pro tvu˚rce dokumentu CSS prˇina´sˇı´ prˇedevsˇı´m rozsa´hlejsˇı´ mozˇnosti u´prav vzhledu, dynamickou pra´ci se vzhledem a konzistentnı´ vzhled vsˇech dokumentu˚ vyuzˇı´vajı´cı´ch stejny´ kaska´dovy´ styl.
1.4 JavaScript – klientsky´ programovacı´ jazyk
JavaScript vytvorˇeny´ Brendanem Eichem z tehdejsˇı´ spolecˇnosti Netscape je objektoveˇ orientovany´ skriptovacı´ jazyk pouzˇı´vany´ tvu˚rci webovy´ch stra´nek nebo aplikacı´ za u´cˇelem zvy´sˇenı´ interakce s uzˇivatelem prˇedevsˇı´m na klientske´m stroji.
Svu˚j na´zev zı´skal tento jazyk prˇedevsˇı´m z marketingovy´ch du˚vodu˚. To se vyplatilo a mnoho lidı´ si plete programovacı´ jazyk Java se skriptovacı´m jazykem JavaScript, dı´ky cˇemuzˇ se JavaScript rychle dostal do poveˇdomı´ internetove´ komunity a postupneˇ se propracoval prakticky na vsˇechny webove´ prohlı´zˇecˇe. Kromeˇ na´zvu spojuje JavaScript a Javu, ale take´ jazyky C, C++ podobna´ syntaxe.
V roce 1997 byl JavaScript standardizova´n asociacı´ ECMA (Europen Computer Manu- facturers Association) a o rok na to ISO (International Organization for Standardisation).
Standardizovana´ verze JavaScriptu byla pojmenova´na ECMAScript.
Vzhledem k tomu, zˇe je tento skriptovacı´ jazyk spousˇteˇn prˇeva´zˇneˇ azˇ na straneˇ kli- enta prˇi nacˇı´ta´nı´ WWW stra´nky do prohlı´zˇecˇe, musı´ by´t respektova´na urcˇita´ bezpecˇnostnı´
omezenı´. Prˇedevsˇı´m se jedna´ o nemozˇnost pracovat se soubory na klientske´m stroji, aby se zabra´nilo nezˇa´doucı´mu upravova´nı´, cˇtenı´ citlivy´ch souboru˚ (at’uzˇ osobnı´ch nebo sys- te´movy´ch) a nedosˇlo tak k narusˇenı´ soukromı´ uzˇivatele nebo nebyla narusˇena bezpecˇnost uzˇivatelova pocˇı´tacˇe.
Kromeˇ za´kladnı´ syntaxe podobne´ klasicky´m programovacı´m jazyku˚m ma´ JavaScript specia´lnı´ rozhranı´ nazy´vane´ DOM, cozˇ je akronym anglicke´ho Document Object Mo- del, cˇesky objektovy´ model dokumentu, ktere´ umozˇnˇuje prˇistupovat, modifikovat nebo vytva´rˇet obsah, strukturu cˇi styl dokumentu. Nanesˇteˇstı´ se pra´veˇ zde nejvı´ce projevuje jedna z velky´ch proble´mu˚ tvorby webovy´ch stra´nek a tou je kompatibilita mezi prohlı´- zˇecˇi. Ze zacˇa´tku meˇl kazˇdy´ webovy´ prohlı´zˇecˇ vlastnı´ specia´lnı´ rozhranı´ pro manipulaci s HTML elementy v JavaScriptu, ktere´ byly navza´jem nekompatibilnı´. Nebohy´ webmas- ter, tvu˚rce webovy´ch stra´nek, proto musel vzˇdy oveˇrˇovat ru˚zny´mi klicˇkami verzi a typ prohlı´zˇecˇe, aby mohl pro dany´ prohlı´zˇecˇ spustit specia´lnı´ ko´d (pro neˇho optimalizovany´).
Proto se konsorcium W3C odhodlalo ke standardizaci tohoto rozhranı´ a vznikla specifikace
W3C DOM, ktera´ je platformeˇ i jazykoveˇ neza´visla´.
Specifikace W3C DOM je pro snadneˇjsˇı´ implementaci do webovy´ch prohlı´zˇecˇu˚ rozdeˇ- lena do neˇkolika u´rovnı´ oznacˇovany´ch jako DOM. Da´le za´rovenˇ jesˇteˇ kazˇda´ DOM vrstva obsahuje povinne´ a volitelne´ moduly. Pro splneˇnı´ urcˇite´ u´rovneˇ DOM je zapotrˇebı´ splnit u´rovneˇ prˇedesˇle´ a za´rovenˇ tu, ktera´ ma´ by´t splneˇna a tak bude moci by´t aplikace oznacˇena, zˇe podporuje urcˇity´ DOM level. V dobeˇ psanı´ te´to pra´ce existujı´ trˇi stupneˇ a to level 1, level 2 a level 3.
1.5 PHP – serverovy´ programovacı´ jazyk
Obra´zek 1: Zasla´nı´ pozˇadavku na PHP stra´nku klienta na server
PHP je rekurzivnı´ zkratka PHP: Hypertext Preprocessor, pu˚vodneˇ Personal Home Page. Oznacˇuje skriptovacı´ programovacı´ jazyk, urcˇeny´ prˇedevsˇı´m pro programova´nı´
dynamicky´ch webovy´ch stra´nek. Zacˇlenˇuje se prˇı´mo do struktury jazyku˚ HTML, XHTML cˇi WML6, cozˇ je velmi vy´hodne´ pro tvorbu internetovy´ch aplikacı´. Skripty napsane´
v PHP jsou prova´deˇny na straneˇ serveru a klient nema´ poveˇdomı´, jestli byl prˇi vytva´rˇenı´
dokumentu tento jazyk pouzˇit cˇi nikoliv. Uzˇivatel na klientske´ straneˇ dostane pouze vy´sledek cˇinnosti PHP skriptu˚. Syntaxe jazyka PHP je jako v prˇı´padeˇ JavaScriptu opeˇt podobna´ jazyku˚m C a Java. Jazyk je neza´visly´ na platformeˇ a umozˇnˇuje pouzˇı´vat rozsa´hle´
knihovny funkcı´ pro zpracova´nı´ textu, grafiky, pra´ci s databa´zı´ a soubory.
6Znacˇkovacı´ jazyk zalozˇeny´ na jazyce XML zameˇrˇeny´ na tvorbu dokumentu˚ pro mobilnı´ zarˇı´zenı´.
1 Technologie, metody a na´stroje 18
1.6 AJAX – novy´ prˇı´stup pro webove´ aplikace
AJAX neboli „Asynchronous JavaScript and XML“ je novou ikonou na poli webove´ho inzˇeny´rstvı´. Avsˇak nenı´ to zˇa´dny´ samostatny´ jazyk nebo nova´ technologie. AJAX je spı´sˇe novy´ prˇı´stup, se ktery´m prˇisˇel jako prvnı´ v cˇla´nku AJAX: A New Approach to Web Applications neboli „AJAX: Novy´ prˇı´stup k webovy´m aplikacı´m“ v dubnu 2005 Jesse James Garretta.
Prapu˚vod AJAXu saha´ do roku 1998, kdy spolecˇnost Microsoft prˇedstavila novou technologii nazvanou Remote Scripting, ve ktere´ v klientske´m prohlı´zˇecˇi beˇzˇel Java ap- plet7 komunikujı´cı´ se serverem, prˇicˇemzˇ tento applet poskytoval sluzˇby JavaScriptovy´m funkcı´m. Tato technika spolupra´ce serveru s klientsky´m prohlı´zˇecˇem zacˇala fungovat v MSIE od verze 4 a take´ v Netscape Navigatoru od verze 4. Microsoft ve svojı´ pa´te´
verzi prohlı´zˇecˇe Internet Explorer prˇedstavil objekt XMLHttpRequest, ktery´ v roce 2000 vyuzˇil v nove´m programu Outlook Web Access, ktery´ poskytuje webove´ rozhranı´ pro prˇı´- stup k emailu˚m na Microsoft Exchange Server. Objekt XMLHttpRequest je za´kladnı´m stavebnı´m kamenem AJAXu.
Nejveˇtsˇı´ za´sluhu na zpopularizova´nı´ a rozsˇı´rˇenı´ AJAXu lze prˇipsat spolecˇnosti Google, ktera´ vlastnı´ jeden z nejzna´meˇjsˇı´ch a nejpouzˇı´vaneˇjsˇı´ch vyhleda´vacˇu˚ a ktera´ AJAX zacˇala vyuzˇı´vat ve svy´ch produktech. Zprvu u online emailove´ sluzˇby Gmail, posle´ze tomu bylo u celosveˇtovy´ch map se sluzˇbou Google Maps a plno dalsˇı´ch.
Jednou z hlavnı´ch vy´hod a du˚sledkem, procˇ se AJAX tak rychle zacˇal rozvı´jet a pouzˇı´vat, je odstraneˇnı´ nutnosti znovu nacˇtenı´ a prˇekreslenı´ cele´ webove´ stra´nky prˇi kazˇde´
akci nebo operacı´ch souvisejı´cı´ch s prohlı´zˇenı´m a pouzˇı´va´nı´m webovy´ch stra´nek. Na rozdı´l od klasicke´ho modelu WWW stra´nek se tedy stra´nky vyuzˇı´vajı´cı´ AJAX nemusı´ cele´ znovu nacˇı´tat.
AJAX totizˇ umozˇnˇuje odesla´nı´ informacı´ na server, odkud zı´ska´ potrˇebnou odpoveˇd’.
Na´sledneˇ je pomocı´ JavaScriptu modifikova´n obsah zobrazovany´ch stra´nek. Uzˇivatel tak nenı´ nucen cˇekat na opeˇtovne´ nacˇı´ta´nı´ stra´nky a cela´ operace zobrazenı´ zˇa´dany´ch informacı´
se tak zrychlı´. Odesı´la´nı´ a prˇijı´ma´nı´ dat probı´ha´ na pozadı´. Uzˇivatel ma´ pocit mnohem veˇtsˇı´ plynulosti pra´ce, ktera´ se dokonce blı´zˇı´ beˇzˇny´m desktopovy´m aplikacı´m.
Dı´ky tomuto vylepsˇenı´ a zmeˇneˇ prˇı´stupu se snizˇuje za´teˇzˇ na webove´ servery a celou sı´t’
mezi klienty a serverem, prˇes ktere´ se museli posı´lat mnohem veˇtsˇı´ kvanta dat. AJAX vsˇak
7Softwarova´ komponenta, ktera´ beˇzˇı´ v kontextu jine´ho programu.
mu˚zˇe zvy´sˇit pocˇet vymeˇnˇovany´ch HTTP pozˇadavku˚, trˇebazˇe prˇena´sˇejı´ nizˇsˇı´ mnozˇstvı´ dat, proto prˇi nevhodne´ implementaci za´teˇzˇ neklesne.
Obra´zek 2: Zna´zorneˇnı´ posı´la´nı´ pozˇadavku˚ klienta na server pomocı´ AJAXu Mezi hlavnı´ nevy´hody patrˇı´ zmeˇny v paradigmatu pouzˇı´va´nı´ webu. Tedy zmeˇna cho- va´nı´ webove´ stra´nky. Web se chova´ jako plnohodnotna´ aplikace se slozˇitou vnitrˇnı´ logikou a nikoliv jako posloupnost stra´nek, mezi ktery´mi se lze navigovat. Nejveˇtsˇı´ vliv je videˇt prˇi pouzˇitı´ tlacˇı´tek „Zpeˇt“ a „Dalsˇı´“. Modernı´ AJAXove´ aplikace jsou vsˇak schopny tyto funkce tlacˇı´tek upravit a nasimulovat tak kompatibilnı´ funkcˇnost se standardnı´m modelem webovy´ch stra´nek.
1.7 TDD – programova´nı´ rˇı´zene´ testy
TDD je zkratkou z anglicke´ho „Test-Driven Development“, tedy „programova´nı´ rˇı´zene´
testy“. Tato technika vy´voje rˇı´zene´ho testy je soucˇa´stı´ agilnı´ metody vy´voje softwaru nazy´vane´ jako extre´mnı´ programova´nı´.
Hlavnı´m rozdı´lem oproti klasicke´mu cyklu vy´voje softwaru, kdy se stanovı´ pozˇadavky, na´vrh architektury, pote´ se prˇistoupı´ ke ko´dova´nı´ a na´sledneˇ k testova´nı´, je vytva´rˇenı´ testu˚
jesˇteˇ prˇed samotny´m ko´dova´nı´m.
Klasicky´ prˇı´stup vy´voje aplikace prˇedpokla´da´ existenci neˇjake´ho ko´du˚ programu˚, ktery´ se na´sledneˇ testuje a kontroluje. Pouzˇite´ testy kontrolujı´, jestli se projekt neodchy´lil
1 Technologie, metody a na´stroje 20
od zada´nı´ a pokud ano, musı´ se chyba napravit. Nalezenı´ a opravenı´ chyb v pozdeˇjsˇı´ch fa´zı´ch vy´voje, kdy je projekt mnohem rozsa´hlejsˇı´, mu˚zˇe zpu˚sobit nemale´ proble´my.
Oproti tomu TDD vytva´rˇı´ testy prˇed samotny´m napsa´nı´m ko´du, ktery´ by testy prosˇel.
Testy v TDD nemajı´ za cı´l kontrolovat ko´d, ale spı´sˇe prˇedstavujı´ na´stroj pro na´vrh syste´mu.
Na zacˇa´tku programova´nı´ se napı´sˇe test, ktery´ specifikuje u´kol dane´ cˇa´sti programu.
Test musı´ selhat nebo vu˚bec neprobeˇhnout, protozˇe zatı´m nebyl napsa´n zˇa´dny´ ko´d. Na´- sledneˇ se naprogramuje logika programu, tak aby test alesponˇ probeˇhl. Postupny´mi men- sˇı´mi u´pravami ko´du a spousˇteˇnı´m testu˚ dojde k upravenı´ ko´du do prˇijatelne´ podoby, kdy testy projdou. Pokud jesˇteˇ nenı´ program hotovy´, napı´sˇe se dalsˇı´ test a pokracˇuje se v programova´nı´. Pokud jsou vsˇechny testy u´speˇsˇne´ a jizˇ nenı´ potrˇeba vytva´rˇet dalsˇı´ testy, program je hotovy´, funkcˇnı´ a nemusı´ se jizˇ testovat.
Nevy´hodou je, zˇe programova´nı´ rˇı´zene´ho testu se da´ uplatnit jen pro cˇa´sti ko´du neza- by´vajı´cı´ se grafikou a je tedy vhodne´ prˇedevsˇı´m pro programova´nı´ aplikacı´ cˇi cˇa´stı´ ko´du prˇina´sˇejı´cı´ neˇjaky´ negraficky´ vy´sledek.
1.8 Webove´ prohlı´zˇecˇe
Webove´ prohlı´zˇecˇe, te´zˇ nazy´vane´ jako browsery jsou pocˇı´tacˇove´ programy, sı´dlı´cı´ na kli- entske´m stroji. Kdyzˇ se uzˇivatel rozhodne prohlı´zˇet World Wide Webu nebo neˇjaky´ do- kument v podporovane´m forma´tu jako naprˇı´klad HTML, XHTML, XML, spustı´ jeden z teˇchto programu˚ a on mu podle svy´ch mozˇnostı´ a podporovany´ch standardu˚ zforma´tuje a zobrazı´ dokument.
Prohlı´zˇecˇe umozˇnˇujı´ komunikaci se servery sı´dlı´cı´mi na Internetu pomocı´ protokolu HTTP, dı´ky neˇmuzˇ webovy´ prohlı´zˇecˇ prˇistupuje ke vzda´leny´m dokumentu˚m, trˇeba na dru- he´m konci sveˇta.
Mohli bychom je rozdeˇlit do dvou skupin a to na prohlı´zˇecˇe textove´ a prohlı´zˇecˇe graficke´. Textove´ prohlı´zˇecˇe zobrazujı´ dokumenty jako text a to obvykle s velmi jedno- duchy´m forma´tova´nı´m. Takovy´mi programy jsou naprˇı´klad Links nebo Lynx. Na rozdı´l od textovy´ch umozˇnˇujı´ graficke´ prohlı´zˇecˇe slozˇiteˇjsˇı´ forma´tova´nı´ stra´nky vcˇetneˇ zobrazenı´
obra´zku˚. Lze v nich zobrazit neˇktere´ externı´ soucˇa´stı´ stra´nky jako jsou Flashove´ animace nebo Javove´ applety, pro ktere´ je potrˇeba do prohlı´zˇecˇe doplnit specializovane´ za´suvne´
moduly. Mezi nejzna´meˇjsˇı´ graficke´ webove´ prohlı´zˇecˇe patrˇı´ Internet Explorer, Mozilla Firefox, Opera, SeaMonkey, Konqueror a Safari.
Jednou z nejdu˚lezˇiteˇjsˇı´ch cˇa´stı´ webovy´ch prohlı´zˇecˇu˚ je ja´dro, take´ oznacˇovane´ jako renderovacı´ ja´dro. Jeho u´cˇel v prohlı´zˇecˇi je vykreslovat webove´ stra´nky a je napsa´no ve vysˇsˇı´ch programovacı´ch jazycı´ch, jako je naprˇı´klad jazyk C++. V soucˇasnosti nejpou- zˇı´vaneˇjsˇı´ ja´dra jsou Trident, Gecko a KHTML.
1.8.1 Ja´dro Trident
Na ja´drˇe Trident, drˇı´ve zna´my´ pod na´zvem MSHTML, jsou postaveny prohlı´zˇecˇe Micro- soft Internet Explorer, ktere´ jsou doda´va´ny spolecˇneˇ s operacˇnı´m syste´mem Microsoft Windows. Z tohoto du˚vodu je take´ toto ja´dro jedno z nejpouzˇı´vaneˇjsˇı´ch na cele´m sveˇteˇ.
Poprve´ se objevilo roku 1997 v Internet Exploreru 4.0 a v soucˇasnosti je ve verzi 5 soucˇa´stı´
Internet Exploreru 7.0.
Da´le se toto ja´dro nacha´zı´ v prohlı´zˇecˇi Maxthon, ktery´ se stal velmi oblı´benou alter- nativou k Internet Exloreru 6. Maxthon si nasˇel prˇı´zenˇ mezi uzˇivateli prˇedevsˇı´m pro sve´
dodatecˇne´ vlastnosti jako jsou za´lozˇky, ale hlavneˇ pro sve´ lepsˇı´ zabezpecˇenı´ nezˇ bylo u Internet Exploreru 6.
Jesˇteˇ bych zmı´nil prohlı´zˇecˇ Netscape Browser 8.0, ktery´ je vy´jimecˇny´ a zajı´mavy´
prˇedevsˇı´m pro svou schopnost prˇepı´nat mezi renderovacı´m ja´drem Gecko, ktere´ pouzˇı´vajı´
prohlı´zˇecˇe postavene´ na Mozille a ja´drem Trident.
Jako veˇtsˇina produktu˚ spolecˇnosti Microsoft je i ja´dro Trident proprieta´rnı´ nesvobodny´
software a proto jeho ko´dy jsou uzavrˇeny. Zna´me´ a pro mnohe´ vy´voja´rˇe nemile´ vlastnosti Tridentu jsou slabsˇı´ podpora webovy´ch standardu˚, existence neˇktery´ch nestandardnı´ch rozsˇı´rˇenı´ a prˇedevsˇı´m u starsˇı´ch verzı´ slabsˇı´ zabezpecˇenı´.
Kromeˇ webovy´ch prohlı´zˇecˇu˚ se ja´dro Trident, dı´ky sve´ integraci do operacˇnı´ho sys- te´mu Windows, pouzˇı´va´ jako renderovacı´ ja´dro v mnoha dalsˇı´ch komponenta´ch syste´mu.
Naprˇı´klad je vyuzˇito pro na´poveˇdu v syste´mu Windows, kancela´rˇsky´ balı´k Microsoft Of- fice a Windows Explorer. Mu˚zˇe jej vyuzˇı´vat a take´ jej vyuzˇı´va´ rˇada instalovany´ch aplikacı´
nepocha´zejı´cı´ch od spolecˇnosti Microsoft.
Aktua´lneˇ je vyvı´jen Internet Explorer 8, ktery´ by meˇl by´t vyda´n ve stabilnı´ verzi koncem roku 2009 a meˇl by by´t kladen veˇtsˇı´ du˚raz na bezpecˇnost a webove´ standardy.
1 Technologie, metody a na´stroje 22
1.8.2 Ja´dro Gecko
Gecko je druhe´ nejpouzˇı´vaneˇjsˇı´ ja´dro hned po ja´drˇe Trident a jeho obliba neusta´le roste i dı´ky tomu, zˇe na rozdı´l od ja´dra Trident se Gecko rˇadı´ mezi open source projekty a je pouzˇı´va´no v mnoha dalsˇı´ch open source projektech. Bylo napsa´no v programovacı´m jazyce C++, pod licencemi MPL, GPL a LGPL. Toto ja´dro bylo pu˚vodneˇ vytvorˇeno firmou Netscape Communications Corporation, ale nynı´ je vyvı´jeno spolecˇnostı´ Mozilla Corporation.
Gecko nenabı´zı´ pouze mozˇnost renderova´nı´ webovy´ch stra´nek, ale dı´ky sve´mu boha- te´mu API slouzˇı´ i k vykreslova´nı´ graficke´ho rozhranı´ (XUL), vyuzˇı´vane´ho Firefoxem cˇi Thunderbirdem. Nenı´ zameˇrˇeno pouze na urcˇity´ syste´m, ale jedna´ se o multiplatformnı´
ja´dro. K dispozici je pro Microsoft Windows, Linux, Mac OS X a dalsˇı´.
Z du˚vodu˚ zpeˇtne´ kompatibility a podpory webovy´ch stra´nek optimalizovane´ pro stare´
verze prohlı´zˇecˇu˚ Netscape Navigator a Internet Explorer podporuje Gecko dva rezˇimy vykreslova´nı´. Pokud je v dokumentu nalezena definice Doctype, vykresluje se stra´nka
„v rezˇimu platny´ch standardu˚“. V opacˇne´m prˇı´padeˇ vyuzˇije tzv. „rezˇim zpeˇtne´ kompati- bility“, ktere´mu se take´ rˇı´ka´ quirks mo´d.
Mezi vy´znamneˇjsˇı´ programy vyuzˇı´vajı´cı´ ja´dro gecko patrˇı´ prohlı´zˇecˇe Epiphany, Ga- leon, prohlı´zˇecˇ Camino urcˇen pro Mac OS, multimedia´lnı´ prˇehra´vacˇ Songbird, posˇtovnı´
klient Mozilla Thunderbird nebo balı´k internetove´ch aplikacı´ SeaMonkey.
Aktua´lnı´ verzı´ je Gecko 1.9. Toto ja´dro je obsazˇene´ v prohlı´zˇecˇi Mozilla Firefox 3.0, ktera´ by meˇla by´t vyda´n oproti pu˚vodnı´mu pla´nu v cˇervnu. Vy´voja´rˇi Firefoxu se v poslednı´
verzi ja´dra zameˇrˇili prˇedevsˇı´m na snı´zˇenı´ pameˇt’ove´ na´rocˇnosti prohlı´zˇecˇe, cozˇ se jim meˇlo pove´st oproti starsˇı´m verzı´m o jednu trˇetinu.8
1.8.3 Ja´dro Presto
Renderovacı´ ja´dro Presto se poprve´ objevilo 28. ledna 2003 ve webove´m prohlı´zˇecˇi Opera 7.0 od firmy Opera Software, pro operacˇnı´ syste´m Windows a nahradilo tak do- savadnı´ starsˇı´ ja´dro Elektra. Je licencova´no obchodnı´m partnerem Adobe Systems a take´
integrova´no do produktu Adobe Creative Suite. Opera je distribuova´na jako freeware.
Nejveˇtsˇı´ prˇednostı´ tohoto ja´dra a tedy take´ Opery je snaha du˚sledneˇ dodrzˇovat stan- dardy konsorcia W3C. Spolu s dodrzˇova´nı´m standardu˚, dobry´m zabezpecˇenı´m, rychlostı´
8zdroj: http://blog.pavlov.net/2008/03/11/firefox-3-memory-usage/
Obra´zek 3: Snı´zˇenı´ pameˇt’ove´ na´rocˇnosti poslednı´ verze Firefox 3
a technologiı´ Small Screen Rendering se prohlı´zˇecˇ Opera (ve specia´lneˇ upravene´ podobeˇ) dostal na vedoucı´ pozici jako prohlı´zˇecˇ pro „chytre´“ mobilnı´ telefony a PDA.
1.8.4 Ja´dro KHTML a WebKit
KHTML je renderovacı´ ja´dro, ktere´ je vyvı´jene´ v ra´mci projektu KDE, cozˇ je desktopove´
prostrˇedı´ pro operacˇnı´ syste´m Linux. Napsa´no je v jazyce C++. Uvolneˇno je pod licencı´
LGPL a v KDE se nacha´zı´ od verze 2.
Vyuzˇı´va´ jej webovy´ prohlı´zˇecˇ Konqueror, cozˇ je hlavnı´ prohlı´zˇecˇ pouzˇı´vany´ v deskto- pove´m prostrˇedı´ KDE a je na neˇm zalozˇen take´ prohlı´zˇecˇ Swift a RSS cˇtecˇka Akregator.
Na za´kladeˇ ja´dra KHTML bylo cˇa´stecˇneˇ vytvorˇeno spolecˇnostı´ Apple ja´dro WebKit, konkre´tneˇ renderovacı´ engine WebCore, a je pouzˇito pro webovy´ prohlı´zˇecˇ Safari urcˇeny´
prˇedevsˇı´m pro operacˇnı´ syste´my Mac OS X a Apple iPhone. Jako KHTML je napsa´n v jazyce C++ a pouzˇı´va´ licenci LGPL.
2 WYSIWYG XHTML editory 24
2 WYSIWYG XHTML editory
Mysˇlenka na vytvorˇenı´ WYSIWYG editoru, ktery´ by byl soucˇa´stı´ webovy´ch prohlı´zˇecˇu˚
nenı´ nova´. Ve skutecˇnosti byl WYSIWYG HTML editor soucˇa´stı´ jizˇ v prvnı´m internetove´m prohlı´zˇecˇi umozˇnˇujı´cı´m HTTP, ktery´ se jmenoval WorldWideWeb (pozdeˇji Nexus).
2.1 Soucˇasne´ open source editory
Dnesˇnı´ situace je o neˇco slozˇiteˇjsˇı´. Soucˇasne´ prohlı´zˇecˇe se staly postupem cˇasu mnohem rozsa´hlejsˇı´, slozˇiteˇjsˇı´ a pouzˇı´vaneˇjsˇı´. Z tohoto du˚vodu jsou i dnesˇnı´ na´roky na WYSIWYG editory veˇtsˇı´.
Za´kladnı´ podmı´nkou u nı´zˇe popsany´ch editoru˚ je GPL nebo LGPL licence, tedy aby WYSIWYG editor byl volneˇ sˇirˇitelny´ a libovolneˇ modifikovatelny´.
Vzhledem k existenci neˇkolika pouzˇı´vany´ch prohlı´zˇecˇu˚ je jednı´m z du˚lezˇity´ch faktoru˚, aby byl WYSIWYG editor kompatibilnı´ a choval se v kazˇde´m editoru stejneˇ. To je vzhledem k faktu, zˇe prohlı´zˇecˇe nejsou mezi sebou kompatibilnı´, na´rocˇny´ u´kol.
Pro webmastery a webove´ vy´voja´rˇe aplikacı´ je du˚lezˇite´, aby se ko´d aplikace dal snadno modifikovat dle jejich prˇa´nı´, vylepsˇovat o specificke´ za´lezˇitosti a v neposlednı´ rˇadeˇ byl snadno integrovatelny´.
Dnesˇnı´ open source JavaScriptove´ WYSIWYG editory jsou velmi oblı´bene´ dı´ky sve´
dobre´ funkcionaliteˇ a nulovy´m porˇizovacı´m na´kladu˚m. Ty nejlepsˇı´ projekty dosahujı´ kvalit komercˇnı´ch projektu˚ jako EditOnPro1.
2.1.1 TinyMCE
Jednı´m z nejpopula´rneˇjsˇı´ch a nejpropracovaneˇjsˇı´ch WYSIWYG XHTML editoru˚ psany´ch v JavaScriptu je produkt TinyMCE vyvı´jeny´ spolecˇnosti Moxiecode systems.
Vzhledem k licenci LGPL je tento opensource projekt mozˇno libovolneˇ pouzˇı´vat.
Modifikace jsou rˇesˇeny pomocı´ pluginu˚ a te´mat. K dispozici je i cˇesky´ prˇeklad.
Je mozˇne´ ho sta´hnout na stra´nka´ch http://tinymce.moxiecode.com/ v sekci download.
Integrace je velmi snadna´. Po stazˇenı´ souboru a rozbalenı´ na mı´sto, odkud bude aplikace vola´na stacˇı´ v cı´love´m dokumentu, kde ma´ by´t editor pouzˇit, vlozˇit externı´ Ja- vaScriptovy´ soubor s editorem a do hlavicˇky dokumentu vlozˇit inicializacˇnı´ ko´d, ve ktere´m
1zdroj: http://www.standards-schmandards.com/2007/WYSIWYG-editor-test-2/
Obra´zek 4: WYSIWYG editor TinyMCE
se provedou potrˇebna´ nastavenı´ editoru. Nastavenı´ inicializacˇnı´ cˇa´sti editoru jizˇ vsˇak tak snadne´ nenı´, a pokud je potrˇeba vyrˇesˇit neˇjake´ specificke´ nastavenı´, je trˇeba se sezna´mit s dokumentacı´ a spra´vneˇ vsˇe nakonfigurovat. Spolu s editorem se rozbalı´ i neˇkolik prˇı´kladu˚
pro snadneˇjsˇı´ pochopenı´ funkcˇnosti, a dobra´ podpora je take´ na domovsky´ch stra´nka´ch.
Spolecˇnost Moxiecode kromeˇ editoru nabı´zı´ i plugin pro pra´ci se soubory MCFile- Manager a plugin pro pra´ci s obra´zky MCImageManager. Tyto pluginy vsˇak jizˇ nejsou dostupne´ zdarma a je nutne´ za neˇ zaplatit.
Mezi prˇednosti TinyMCE patrˇı´ mozˇnost ulozˇenı´ vy´sledny´ch dokumentu˚ pomocı´ tech- nologie AJAX.
Nevy´hodou je prˇedevsˇı´m placeny´ souborovy´ a obra´zkovy´ manager. Editor je velmi robustnı´, rozsa´hly´ a vnitrˇneˇ komplikovany´ z du˚vodu uspokojenı´ uzˇivatelu˚ po co nejveˇtsˇı´m mnozˇstvı´ funkcı´ a mozˇnostı´, proto nenı´ vhodny´ pro me´neˇ na´rocˇne´ webove´ stra´nky nebo pro studium struktury, jak takovy´ editor funguje.
2.1.2 FCKeditor
Jednou z velky´ch konkurencı´ popula´rnı´ho TinyMCE je editoru FCKeditor, ktery´ byl podle pocˇı´tadla umı´steˇne´m na stra´nce sta´hnut vı´ce jak dva a pu˚l milionkra´t.
Tento editor nabı´zı´ rozsa´hlejsˇı´ rˇadu licencı´ a tak umozˇnˇuje vybrat si tu nejvhodneˇjsˇı´.
Editor je distribuova´n pod GPL, LGPL a MPL open source licencemi a navı´c pod komercˇnı´
licencı´ Closed Distribution License, ktera´ je urcˇena pro spolecˇnosti a produkty, ktery´m
2 WYSIWYG XHTML editory 26
Obra´zek 5: WYSIWYG editor FCKeditor nevyhovujı´ open source licence. Tato komercˇnı´ licence je zpoplatneˇna.
Je mozˇne´ ho sta´hnout na stra´nka´ch http://www.fckeditor.net/ v sekci download.
Integrace editoru do webovy´ch stra´nek je o neˇco obtı´zˇneˇjsˇı´, nezˇ u editoru TinyMCE, cozˇ mu˚zˇe mı´t souvislost s mozˇnostı´ placene´ podpory. Po stazˇenı´ a rozbalenı´ souboru jsou v adresa´rˇi slozˇky editor a samples s neˇkolika soubory. Pomocı´ prˇı´kladu˚ vsˇak lze snadno odvodit, jak dany´ editor zakomponovat do stra´nek.
Na rozdı´l od TinyMCE ma´ FCKeditor pouze souborovy´ manager, proto mnoho webo- vy´ch vy´voja´rˇu˚, kterˇı´ potrˇebujı´ do sve´ho redakcˇnı´ho syste´mu komplexneˇjsˇı´ rˇesˇenı´, zu˚sta´vajı´
u TinyMCE i prˇes me´neˇ vy´hodne´ licencˇnı´ podmı´nky a zpoplatneˇne´ pluginy.
Mezi prˇednosti tohoto editoru patrˇı´ automaticka´ detekce jazyka, nemusı´ se tedy spe- cia´lneˇ stahovat a nastavovat jazykova´ mutace.
Specialitou je rˇesˇenı´ nekompatibility prohlı´zˇecˇu˚ Internet Explorer a Firefox. FCKeditor ma´ pro kazˇdy´ prohlı´zˇecˇ zvla´sˇtnı´ ja´dro.
2.1.3 widgEditor
Mezi robustnı´mi WYSIWYG editory se skry´va´ nena´padny´, ale oblı´beny´ editor widg- Editor, ktery´ mnohe´ zaujal svou jednoduchostı´, rychlostı´ a na rozdı´l od TinyMCE nebo FCKeditoru svou datoveˇ mnohem mensˇı´ velikostı´.
Autor uvolnil editor pod licencı´ GPL a da´le jej prˇestal vyvı´jet. Dı´ky licenci a prˇehled- nosti ko´du si jej oblı´bilo mnoho webmasteru˚ a vy´voja´rˇu˚. Stoupajı´cı´ obliba widgEditoru donutila autora po trˇech letech k vyda´nı´ nove´ verze s opravami chyb, ktere´ se v pru˚beˇhu cˇasu objevili. Byl take´ prˇislı´ben vy´voj nove´ verze editoru.
Za´kladnı´ vlastnosti editoru jsou oproti vy´sˇe zmı´neˇny´m editoru˚m strohe´. Editor umı´
pouzˇı´vat tucˇny´ text, kurzı´vu, vkla´dat odkazy, obra´zky, seznamy, odstavce, nadpisy a
Obra´zek 6: WYSIWYG editor widgEditor
zobrazit zdrojovy´ ko´d, cozˇ vsˇak mnoha lidem vyhovuje a dı´ky jednoduchosti a prˇehlednosti je mozˇne´ editor vcelku snadno modifikovat.
Je ho mozˇne´ sta´hnout na adrese http://themaninblue.com/experiment/widgEditor/.
Implementace do webovy´ch stra´nek je velmi jednoducha´. Po stazˇenı´ a rozbalenı´ sou- boru stacˇı´ v cı´love´m webove´m dokumentu do hlavicˇky vlozˇit externı´ JavaScriptovy´ sou- bor s editorem a na´sledneˇ budou vsˇechna textova´ pole <textarea> nahrazena WYSIWYG editorem. To sice vzˇdy nemusı´ vyhovovat, ale na druhou stranu nenı´ potrˇeba zˇa´dna´ dalsˇı´
nastavenı´.
Dı´ky svojı´ prˇehlednosti a dobrˇe cˇitelne´mu zdrojove´mu ko´du je tento editor vhodny´
ke studijnı´m u´cˇelu˚m.
2.1.4 Bronziho editor
Poslednı´ editor, o ktere´m bych se ra´d zmı´nil, je Bronziho editor, ktery´ je jeden z velmi nadeˇjny´ch a jeden z prvnı´ch cˇesky´ch projektu˚ zameˇrˇeny´ch na vytva´rˇenı´ validnı´ho HTML a XHTML obsahu pro webove´ stra´nky pomocı´ JavaScriptove´ho WYSIWYG editoru.
Za´meˇrem autora je svobodne´ sˇı´rˇenı´ a modifikace aplikace podle potrˇeb uzˇivatele a proto je program uvolneˇn pod licencı´ GPL a LGPL.
Je mozˇne´ ho sta´hnout na stra´nka´ch http://www.bronzi.cz/ spolu s dalsˇı´mi projekty.
Podle autorova na´zoru se veˇtsˇina online WYSIWYG editoru˚ pouzˇı´vajı´cı´ch v redakcˇ- nı´ch syste´mech snazˇı´ o implementaci mnoha funkcı´, ktere´ vsˇak nemajı´ velkou vyuzˇitelnost.
Proto se snazˇı´ vyhnout situaci, kdy tvu˚rci webovy´ch stra´nek pracneˇ omezujı´ funkce edi- toru za u´cˇelem zabra´neˇnı´ znehodnocenı´ designu stra´nek nezkusˇeny´mi uzˇivateli, kterˇı´ by
2 WYSIWYG XHTML editory 28
Obra´zek 7: WYSIWYG editor Bronzi
Obra´zek 8: Vzhled Microsoft Word 2007 se pokousˇeli vylepsˇit svu˚j prˇı´speˇvek ru˚zny´mi nevhodny´mi vylepsˇenı´mi.
Aktivace editoru je velice snadna´ a dobrˇe vysveˇtlena´ a zna´zorneˇna´ na webovy´ch stra´n- ka´ch autora. Pro stazˇenı´ a rozbalenı´ stacˇı´ do dokumentu, kde se ma´ nacha´zet editor vlozˇit odkaz na externı´ soubor se samotny´m skriptem, na´sledneˇ vlozˇit jednoduchou konfiguraci a nakonec nastavit elementu <textarea>, ktery´ ma´ by´t prˇekonvertova´n na WYSIWYG editor, identifika´tor „textarea“.
Graficke´ rozhranı´ bylo znatelneˇ inspirova´no nejnoveˇjsˇı´mi verzemi aplikace Microsoft Word1a proto bude pro mnoho uzˇivatelu˚ velky´m prˇı´nosem jeho velmi lı´bivy´ a poveˇdomy´
vzhled.
Autor da´le take´ pracuje na vlastnı´m souborove´m a obra´zkove´m manazˇeru.
1Obra´zek cˇ. 8, zdroj: http://myego.cz/item/microsoft-office-2007-o-deset-let-pred-konkurenci
2.2 Princip JavaScriptovy´ch WYSIWYG editoru ˚
Za´kladnı´m principem, na ktere´m jsou postaveny JavaScriptove´ WYSIWYG editory, je vyuzˇitı´ renderovacı´ho ja´dra prohlı´zˇecˇe pro zobrazenı´ editovane´ nebo tvorˇene´ webove´
stra´nky a za´rovenˇ vyuzˇitı´ specia´lnı´ch funkcı´ ja´dra pro mozˇnost editace dokumentu.
Vy´sledkem je pak rozhranı´, ve ktere´m je mozˇno za´rovenˇ videˇt na´hled dokumentu a soucˇasneˇ jej editovat. Dı´ky tomu je na´hled generova´n renderovacı´m ja´drem prohlı´zˇecˇe, cozˇ zajisˇt’uje pozdeˇjsˇı´ shodne´ zobrazenı´ stra´nky v norma´lnı´m webove´m rezˇimu prohlı´zˇecˇe.
2.2.1 Zacˇleneˇnı´ editoru do stra´nek
Aby bylo mozˇne´ editor pouzˇı´t pouze v urcˇene´ oblasti vyhrazene´ editoru, je nutno edito- vanou oblast uzavrˇı´t do urcˇite´ho elementu. Editaci pouze vybrane´ho elementu je mozˇne´
docı´lit s pouzˇı´tı´m atributu contenteditable vytvorˇene´m spolecˇnostı´ Microsoft a zakompo- novane´m od prohlı´zˇecˇe Microsoft Internet Explorer 5.5. Tento atribut vsˇak nenı´ podpo- rova´n ja´drem Gecko. Neexistenci tohoto atributu vsˇak v tomto ja´drˇe nahrazuje vlastnost designMode, ktera´ nabı´zı´ obdobnou funkcionalitu jako atribut contenteditable.
Z tohoto du˚vodu musı´ vsˇechny nejpouzˇı´vaneˇjsˇı´ editory tento proble´m specia´lneˇ ob- cha´zet. Vytvorˇı´ se pomocna´ webova´ stra´nka s minima´lnı´m obsahem, u ktere´ se zapne editacˇnı´ mo´d. Na´sledneˇ v cı´love´m dokumentu s WYSIWYG editorem je pouzˇit element
<frame>, <iframe> nebo <object> podporujı´cı´ vkla´da´nı´ externı´ho dokumentu jako svu˚j obsah, cˇı´mzˇ vznikne vy´sledny´ efekt vyhrazene´ editovatelne´ oblasti.
Mozˇnost editova´nı´ proste´ho textu vsˇak nenı´ nic vy´jimecˇne´ho a tuto vlastnost umozˇnˇuje i tag <textarea> . Proto je nutno na klientske´ straneˇ vytvorˇit urcˇitou nadstavbu ovla´dacı´ch prvku˚, ktere´ umozˇnı´ modifikovat HTML ko´d.
2.2.2 Modifikace ko´du dokumentu
Modifikace HTML ko´du dokumentu se prova´dı´ pomocı´ funkce execCommand, ktera´ se vola´ na vzda´lene´m souboru se zapnutou mozˇnostı´ editova´nı´. Jako prˇı´klad bych uvedl prˇı´kaz bold, ktery´ do dokumentu vlozˇı´ znacˇky pro tucˇny´ text, prˇı´padneˇ obklopı´ text oznacˇeny´.
Tato funkce ma´ trˇi parametry, z toho prvnı´ je povinny´ a prˇeda´va´ se jı´m na´zev prˇı´kazu, ktery´ se ma´ prove´st.
Druhy´ nepovinny´ parametr naby´vajı´cı´ booleovsky´ch hodnot „true“ nebo „false“ urcˇuje mozˇnost, zda ma´ by´t uzˇivatel vyzva´n k zada´nı´ dodatecˇny´ch informacı´. Implicitnı´ hodnota
2 WYSIWYG XHTML editory 30
tohoto parametru je „false“ a tato funkce zatı´m nenı´ prohlı´zˇecˇi podporova´na a nefunguje.
S jejı´m vyuzˇitı´m se pocˇı´ta´ do budoucna.
Trˇetı´ a opeˇt nepovinny´ parametr se pouzˇı´va´ spolu s neˇktery´mi prˇı´kazy, ktere´ vyzˇa- dujı´ prˇeda´nı´ dodatecˇny´ch informacı´ ke spra´vne´mu provedenı´ dane´ho prˇı´kazu. Naprˇı´klad prˇi vkla´da´nı´ odkazu je potrˇeba funkci informovat o adrese, kam ma´ odkaz odkazovat, cozˇ by meˇl norma´lneˇ zajisˇt’ovat druhy´ nepovinny´ parametr. Vzhledem k nefunkcˇnosti druhe´ho parametru je nutne´ zjistit potrˇebne´ informace rucˇneˇ. Mozˇnostı´ je neˇkolik, od JavaScripto- ve´ho prˇı´kazu prompt, ktery´ pomocı´ dialogove´ho okna pozˇa´da´ uzˇivatele o zada´nı´ urcˇity´ch informacı´, po neˇktery´ vstupnı´ dialogovy´ formula´rˇovy´ prvek. Takto zı´skana´ data se jesˇteˇ musı´ oveˇrˇit. Pokud uzˇivatel zadal korektnı´ data, jsou prˇeda´na jako trˇetı´ parametr funkce execCommand.
2.2.3 Validita ko´du
Bohuzˇel kazˇdy´ webovy´ prohlı´zˇecˇ ma´ odlisˇnou implementaci funkce execCommand, kdy naprˇı´klad Internet Explorer a Opera vkla´da´ vsˇechny znacˇky velky´mi pı´smeny a Firefox pouzˇı´va´ rˇa´dkovy´ tag span s vlozˇeny´m stylem. Aby pra´ce s funkcı´ execCommand nebyla azˇ tak snadna´, prohlı´zˇecˇe nepodporujı´ stejne´ prˇı´kazy nebo jejich vykona´va´nı´ neprova´deˇjı´
u´plneˇ stejneˇ. To znamena´, zˇe neˇktere´ prˇı´kazy nelze pouzˇı´t, pokud chceme docı´lit jednot- ne´ho rozhranı´ ve vsˇech optimalizovany´ch prohlı´zˇecˇı´ch. Prˇehledne´ porovna´nı´ kompatibility prˇı´kazu˚ v jednotlivy´ch prohlı´zˇecˇı´ch poskytuje server www.quirksmode.org2.
Funkce execCommand nenı´ jedinou prˇeka´zˇkou prˇi modifikaci zdrojove´ho ko´du doku- mentu. Velky´m proble´mem jsou samotne´ webove´ prohlı´zˇecˇe, ktere´ si prˇi rucˇnı´m vkla´da´nı´
ko´du bez pouzˇitı´ funkce execCommand, prˇeva´deˇjı´ zdrojovy´ ko´d do sve´ vlastnı´ vnitrˇnı´
srozumitelne´ syntaxe. To je prˇı´cˇinou, procˇ se musı´ ko´d vytva´rˇene´ webove´ stra´nky prˇi prˇe- pnutı´ do textove´ho mo´du nebo odesı´la´nı´ na server prˇevalidovat. Du˚vod, procˇ webove´
prohlı´zˇecˇe prˇizpu˚sobujı´ modifikovany´ obsah, pramenı´ ze snahy opravenı´ chyb v ko´du a snahou umozˇnit zobrazenı´ i nevalidnı´m a sˇpatneˇ napsany´m dokumentu˚m.
2.2.4 Graficke´ rozhranı´
Z du˚vodu˚ uzˇivatelske´ prˇı´veˇtivosti a jednoduchosti ovla´da´nı´ je potrˇeba, aby webove´ WY- SIWYG editory meˇly prˇı´veˇtive´ graficke´ rozhranı´. Vzhledem k prakticky monopolnı´mu
2http://www.quirksmode.org/dom/execCommand.html
Obra´zek 9: Graficke´ ovla´dacı´ rozhranı´ aplikace OpenOffice.org Writer 2.3.0 postavenı´ komercˇnı´ch produktu˚ spolecˇnosti Microsoft se stalo jı´m pouzˇı´vane´ graficke´
ovla´da´nı´ nepsanou podmı´nkou, pro vesˇkere´ graficke´ aplikace.
Prˇı´klad takove´ho graficke´ho rozhranı´ je mozˇne´ videˇt na obra´zku cˇ. 9 aplikace Open- Office.org Writer ve verzi 2.3.0. Je zde patrne´ rozdeˇlenı´ na trˇi cˇa´sti.
Prvnı´ cˇa´st je urcˇena pro rozsa´hla´ menu a podmenu, ktera´ umozˇnˇujı´ komplexnı´ ovla´- da´nı´ nebo prˇizpu˚sobenı´ aplikace. Tato nabı´dka je vsˇak pro mnohe´ uzˇivatele z pocˇa´tku znacˇneˇ neprˇehledna´, a pokud uzˇivatel nepotrˇebuje vyuzˇı´t komplexnost cele´ho programu, je pro neˇho zbytecˇne´ zna´t dopodrobna vsˇechna jejı´ za´koutı´. Z tohoto du˚vodu existuje panel na´stroju˚ a hlavnı´ menu uzˇivatel prakticky nepotrˇebuje vyuzˇı´vat. Obra´tı´ se na neˇj jen pokud potrˇebuje prˇenastavit program nebo pouzˇı´t neˇkterou z pokrocˇilejsˇı´ch funkcı´, kterou mu nenabı´zı´ panel na´stroju˚.
Druha´ cˇa´st, ktere´ se rˇı´ka´ panel na´stroju˚, se skla´da´ z te´maticky´ch podnabı´dek na´stroju˚
pro rozlicˇne´ cˇinnosti. Kazˇdy´ na´stroj ma´ svou vlastnı´ ikonku nebo nabı´dku a cely´ panel umozˇnˇuje za´kladnı´ pra´ci s dokumentem, jeho nacˇtenı´, ulozˇenı´ nebo tisk. Neˇktera´ tlacˇı´tka jsou pouze dvoustavova´ a vztahujı´ se k editovane´mu textu a jeho forma´tova´nı´. Ukazujı´, v jake´m forma´tova´nı´ se nacha´zı´ oznacˇeny´ text, prˇı´padneˇ text nacha´zejı´cı´ se pod aktivnı´m kurzorem. Prˇi pouzˇitı´ teˇchto prvku˚ se zmeˇnı´ jejich stav i forma´tova´nı´ textu. Dı´ky sve´
prˇı´veˇtivosti, na´zornosti a rychle´ dosazˇitelnosti se na´stroje hojneˇ vyuzˇı´vajı´, a proto je jejich pouzˇitı´ ve WYSIWYG editorech nutnostı´.
Ve trˇetı´ cˇa´sti, kterou zmı´nı´m, se nacha´zı´ editacˇnı´ oblast, kde je mozˇne´ sepisovat svu˚j dokument ve WYSIWYG mo´du bez nutnosti znalosti vnitrˇnı´ ko´dove´ struktury dokumentu cˇi syntaxe.
2 WYSIWYG XHTML editory 32
2.2.5 Ukla´da´nı´ vy´sledku
Kdyby nesˇlo v JavaScriptove´m WYSIWYG editoru vytvorˇeny´ dokument ulozˇit, byl by takovy´ editor zbytecˇny´ a nepouzˇitelny´. Hlavnı´m prˇedpokladem pro ulozˇenı´ vy´sledku je podpora programovacı´ho jazyka pro pra´ci se soubory. JavaScript, ktery´ je pouzˇı´va´n u JavaScriptovy´ch WYSIWYG editoru˚ vsˇak z prakticky´ch du˚vodu˚ tuto funkcionalitu nema´ vu˚bec integrovanou a nepodporuje ji.
Du˚vodem, procˇ JavaScript neumozˇnˇuje pra´ci se soubory je prˇedevsˇı´m bezpecˇnost pro uzˇivatele, jeho osobnı´ data a syste´m. Jelikozˇ se JavaScript prova´dı´ na klientoveˇ pocˇı´- tacˇi, ale skripty se nacˇı´tajı´ ze vzda´lene´ho serveru, neˇkdy i nebezpecˇne´ho a infikovane´ho viry, nenı´ mozˇne´ zarucˇit neza´vadnost nacˇı´tane´ho skriptu. I kdyby tato funkcionalita byla osˇetrˇena neˇjaky´mi bezpecˇnostnı´mi prvky, sta´le by zde bylo velke´ riziko prˇi odhalenı´ chyb v zabezpecˇenı´ a naboura´nı´ se do velke´ho mnozˇstvı´ pocˇı´tacˇu˚ prˇes za´vadny´ JavaScriptovy´
ko´d. Z teˇchto du˚vodu˚ se autorˇi JavaScriptu rozhodli vu˚bec neimplementovat podporu pra´ce se soubory a tak plneˇ eliminovat rizika spojene´ se zneuzˇitı´m dane´ funkcionality.
Pro WYSIWYG editory to vsˇak znamena´ dalsˇı´ proble´m a to jak vyrˇesˇit ukla´da´nı´ sou- boru˚. Jednou z mozˇnostı´ je zobrazit na´hled dokumentu v nove´m okneˇ prohlı´zˇecˇe a vyuzˇı´t mozˇnosti ulozˇenı´ webove´ stra´nky prostrˇednictvı´m samotne´ho webove´ho prohlı´zˇecˇe. Tento zpu˚sob vsˇak nenı´ prˇı´lisˇ vhodny´ naprˇı´klad pro redakcˇnı´ syste´my nebo pro upravova´nı´ cˇa´sti obsahu webove´ stra´nky kdesi na Internetu, protozˇe by uzˇivatel musel pomocı´ prohlı´zˇecˇe pracneˇ ukla´dat svu˚j vy´tvor na loka´lnı´ disk a na´sledneˇ se prˇipojovat prˇes FTP protokol a nahra´vat modifikovane´ soubory na vzda´leny´ server.
Proto se pro ukla´da´nı´ nebo spı´sˇe odesı´la´nı´ dokumentu˚ pouzˇı´va´ element <form> umozˇ- nˇujı´cı´ seskupit neˇkolik ovla´dacı´ch polı´ do jednoho formula´rˇe, ktery´ je mozˇne´ najednou odeslat metodami post nebo get na libovolnou adresu, ktera´ s teˇmito u´daji da´le pracuje.
Veˇtsˇinou se jedna´ o soubor umı´steˇny´ na serveru obsahujı´cı´ PHP skript, ktery´ prˇijme po- slana´ data a mu˚zˇe s nimi da´le pracovat, naprˇı´klad ulozˇit do databa´ze nebo poslat klientovi vygenerovany´ dokument se specia´lnı´ hlavicˇkou, ktera´ vyzve uzˇivatele k ulozˇenı´ jeho pra´ce na loka´lnı´ disk.
Dalsˇı´m rˇesˇenı´m je pouzˇı´t velmi popula´rnı´ technologii AJAX, pomocı´ nı´zˇ je zdrojovy´
ko´d, jako v prˇı´padeˇ formula´rˇove´ho elementu, odesla´n na specia´lnı´ soubor naprˇı´klad s PHP skriptem. PHP soubor pro zpracova´nı´ dat na serverove´ straneˇ se pro pouzˇitı´ formula´rˇe a technologie AJAX shoduje. Vy´hodou AJAXu oproti formula´rˇove´mu odesı´la´nı´ je prˇe-
devsˇı´m v mozˇnosti ponecha´nı´ sta´vajı´cı´ stra´nky a rozepsane´ho textu anizˇ by se stra´nka musela znovu nacˇı´tat nebo se musela pracneˇ posı´lana´ data na server odesı´lat zpeˇt klien- tovi pro zobrazenı´ na noveˇ nacˇı´tany´ch stra´nka´ch. V prˇı´padeˇ AJAXu tedy skript pouze odesˇle data na server a vycˇka´va´ na odpoveˇd’. Pokud server bude zrovna neaktivnı´, mu˚zˇe WYSIWYG editor na tento stav upozornit.
Nevy´hodou AJAXove´ho a formula´rˇove´ho rˇesˇenı´ je nutnost pouzˇitı´ serveru.
2.2.6 Omezenı´ JavaScriptovy´ch WYSIWYG editoru˚
Jeden z hlavnı´ch proble´mu˚ a omezenı´ JavaScriptovy´ch WYSIWYG editoru˚ je specia- lizace pouze na urcˇitou skupinu jader umozˇnˇujı´cı´ pouzˇı´t vlastnosti pro editova´nı´ doku- mentu prˇı´mo ve webove´m prohlı´zˇecˇi. Z tohoto du˚vodu jsou neˇkterˇı´ uzˇivatele´ zameˇrˇenı´
na exoticˇteˇjsˇı´ graficke´ nebo textove´ prohlı´zˇecˇe znevy´hodneˇni a WYSIWYG editor jim pravdeˇpodobneˇ nebude fungovat nebo nebude fungovat optima´lneˇ.
Souvisejı´cı´m omezenı´m je pouzˇitelnost na mobilnı´ch, PDA a jiny´ch specia´lnı´ch zarˇı´- zenı´ch. Tato vcelku mala´ a specia´lnı´ zarˇı´zenı´ jsou omezena svou velikostı´ a tudı´zˇ velikostı´
pameˇti, vy´konem procesoru apod. Proto majı´ veˇtsˇinou znacˇneˇ omezene´ a upravene´ pro- hlı´zˇecˇe z du˚vodu snı´zˇenı´ na´rocˇnosti a jejich ja´dro nemusı´ podporovat vsˇechny specia´lnı´
funkce vyzˇadovane´ WYSIWYG editorem.
3 Vy´voj aplikace 34
3 Vy´voj aplikace
Za´kladnı´ principy WYSIWYG JavaScriptovy´ch editoru˚ vypadajı´ jednodusˇe, ale samotny´
vy´voj aplikace je mnohem slozˇiteˇjsˇı´ a obtı´zˇneˇjsˇı´, nezˇ se zprvu mohlo zda´t.
Nejveˇtsˇı´m proble´mem prˇi vy´voji aplikace se stala nekompatibilita a rozdı´lne´ chova´nı´
webovy´ch prohlı´zˇecˇu˚. Mnohdy urcˇita´ funkcionalita bezchybneˇ fungovala v prohlı´zˇecˇi Firefox nebo Opera, avsˇak jizˇ nikoliv v prohlı´zˇecˇi Internet Explorer. Mnohe´ opravy chyb takovy´chto nekompatibilit a rozdı´lu˚ trvaly neˇkdy pa´r hodin nebo dokonce i cely´ den, kdy byla prˇepsa´na polovicˇka ko´du.
Jizˇ prˇed zapocˇetı´m programu jsem veˇdeˇl, zˇe se program musı´ da´t snadno konfigurovat a prˇizpu˚sobit dle aktua´lnı´ch potrˇeb webmastera cˇi uzˇivatele. Z tohoto du˚vodu jsem se rozhodl, aby bylo mozˇno nakonfigurovat vı´ce editoru˚ s ru˚zny´mi menu za´rovenˇ na jedne´
stra´nce, cesty k souboru˚m a obsahy jednotlivy´ch menu.
Aby se navza´jem ru˚zne´ a prˇedem nezna´me´ kopie editoru v jedne´ stra´nce neovlivnˇovaly nebo nebyly ovlivneˇny jiny´m ko´dem umı´steˇny´m na stra´nce, bylo potrˇeba jej uzavrˇı´t do objektove´ho modelu. Proto je editor rozdeˇlen do cˇtyrˇ za´kladnı´ch cˇa´stı´.
3.1 Konfigurace
Prvnı´ ze cˇtyrˇ za´kladnı´ch cˇa´stı´ je pole editory, ktere´ slouzˇı´ pro za´kladnı´ konfiguraci jednotlivy´ch editoru˚. Jednotlive´ editory se do pole prˇida´vacı´ pomocı´ prˇı´kazu:
editory.push([”id”, ”menu”, ”umı´steˇnı´ editoru”, ”typ”]);
Tı´mto prˇı´kazem se do pole editory prˇida´vajı´ za´znamy s polem obsahujı´cı´ cˇtyrˇi para- metry, na za´kladeˇ ktery´ch je pak generova´n WYSIWYG editor.
Prvnı´ parametr „id“ identifikuje element, mı´sto ktere´ho se ma´ vlozˇit WYSIWYG editor. Je nutne´, aby byl vyplneˇn. Vkla´da´nı´ editoru nenı´ omezeno pouze na elementy
<textarea> jako u mnoha jiny´ch editoru˚, ale je mozˇne´ jej pouzˇı´t i na jine´ tagy. Naprˇı´klad pro div obsahujı´cı´ provizornı´ jednodusˇsˇı´ editor tvorˇeny´ formula´rˇem. Identifika´tor musı´
by´t na stra´nce unika´tnı´ a v elementu se zapisuje jako atribut id. Pokud takovy´to element s identifika´torem na stra´nce nenı´, dany´ editor nebude vytvorˇen a pokracˇuje se dalsˇı´m za´znamem.
Druhy´m parametrem je „menu“ slouzˇı´cı´ pro identifikaci nabı´dky, ktera´ ma´ by´t pro dany´
editor pouzˇita. Tato nabı´dka se nastavuje v konfiguraci konstruktoru a je zde mozˇne´ si
jednodusˇe vytvorˇit libovolne´ menu z jednotlivy´ch funkcı´ editoru. Du˚vodem, procˇ se musı´
definovat menu, je variabilita aplikace. Takto je mozˇne´ kazˇde´mu editoru na stra´nce prˇirˇadit odlisˇne´ menu dle specificky´ch pozˇadavku˚.
Trˇetı´ parametr slouzˇı´ pro informova´nı´ genera´toru editoru˚, kde se nacha´zı´ soubor temp.html, ktery´ je pouzˇı´va´n jako hlavnı´ soucˇa´st ve WYSIWYG rozhranı´ a nad ktery´m se aktivuje editacˇnı´ mo´d ja´dra.
Cˇtvrty´ a nepovinny´ parametr je urcˇen prˇedevsˇı´m k testovacı´m u´cˇelu˚m. Urcˇuje, jaky´
element se ma´ pouzˇı´t pro WYSIWYG rozhranı´. V poslednı´ verzi jsou implemento- va´ny dveˇ, ale je mozˇne´ snadno do budoucna prˇidat i dalsˇı´. Jako prvnı´ a za´kladnı´ je nastaven element <iframe>, jelikozˇ druha´ mozˇnost pouzˇı´t element <object> nenabı´zı´
tak rozsa´hle´ mozˇnosti kvu˚li sˇpatne´ kompatibiliteˇ prohlı´zˇecˇu˚ a prˇedevsˇı´m velmi chabe´
podporˇe ze strany Internet Exploreru. Zatı´mco <iframe> je generova´n pomocı´ funkce document.createElement, u objectu se musı´ obdobnou funkcı´ nejprve vytvorˇit obal z elementu <div> a azˇ pote´ se do neˇho pomocı´ funkce innerHTML vlozˇı´ ko´d ele- mentu <object>. Tento postup je nutny´, jelikozˇ pokud se vkla´da´ dany´ ko´d prˇed element
<textarea>, cozˇ je nejcˇasteˇjsˇı´ pouzˇitı´, Internet Explorer vypı´sˇe chybovou hla´sˇku „Ne- zna´ma´ chyba prˇi beˇhu programu“ a editor v tomto prohlı´zˇecˇi nebude fungovat. V ostatnı´ch prohlı´zˇecˇı´ch proble´m nenastal. I po pracne´m rˇesˇenı´ tohoto proble´mu se pozdeˇji uka´zaly dalsˇı´ nevy´hody a proble´my, procˇ mı´sto perspektivnı´ho elementu <object> pouzˇı´t jizˇ ne- modernı´ <iframe>, ktery´ se pouzˇı´va´ ve vsˇech ostatnı´ch JavaScriptovy´ch WYSIWYG editorech. Jednou z dalsˇı´ch mozˇnostı´ je pouzˇitı´ element <div> se zapnutou vlastnostı´
contenteditable, avsˇak vzhledem k nemozˇnosti pouzˇitı´ te´to vlastnosti v ja´drech Gecko nebyla zatı´m tato mozˇnost implementova´na a odzkousˇena.
3.2 Inicializace editoru
Druha´ ze za´kladnı´ch cˇa´stı´ WYSIWYG editoru je inicializace editoru. Inicializace pro- gramu se nacha´zı´ v objectu editor ini, ktera´ obsahuje dveˇ funkce, a to funkci inicializuja generuj.
3.2.1 Funkce inicializuj
Funkce inicializuj ma´ za cı´l zajistit spusˇteˇnı´ druhe´ inicializacˇnı´ cˇa´sti v okamzˇiku, kdy bude webova´ stra´nka plneˇ nacˇtena. Jedna´ se prˇedevsˇı´m o proble´m, kdy webove´ stra´nky nejsou
