Značkovací jazyky a spol. HTML/XHTML XML JSON YAML Markdown, Texy!

Transkript

1 Značkovací jazyky a spol. HTML/XHTML XML JSON YAML Markdown, Texy!

2 Značkovací jazyky Angl. termín "MARKUP" ("vyznačování") Smyslem je přidat do textu metainformace: formátovací sémantické Výsledek je prostý text, lidsky čitelný. K vytvoření stačí textový editor.

3 Značkovací jazyky vs Programovací jazyky Programovací jazyky slouží k zápisu algoritmů, tedy předpisu činností Značkovací jazyky pouze zapisují (formátovaná) data

4 TeX, LaTeX \paragraph\ifx\pdfoutput\undefined\def\xsc#1 #2 {#2\ }\def\zrc#1{#1}\def\otoc#1{#1}\else\def\xsc#1 #2 {\setbox0=\hbox{#2}\hbox{\pdfliteral{q # cm}\rlap{#2}\pdfliteral{q}\kern#1\wd0} }\def\zrc#1{\setbox0=\hbox{#1}\hbox{\kern\wd0\pdfliteral{q cm}\rlap{#1}\pdfliteral{q}}}\def\otoc#1{\setbox0=\hbox{#1}\hbox{\pdfliteral{q cm}\rlap{#1}\pdfliteral{q}\kern\wd0}}\fivelkou výhodou pdf\tex u je moľnost zapisovat příkazy přímo do pdf~souboru pomocí makra \verb \pdfliteral. Takto je moľné vyuľít vąechny moľnosti, které nabízí formát pdf, například moľnost vloľit zvuk nebo videoklip. Daląí moľností je změna transformační matice pdf~operátorem \verb cm. Tak lze provádět s textem různé afinní transformace, například \otoc{otočení} nebo \zrc{zrcadlení}. Vynásobením $x$-ové souřadnice lze docílit \xsc1.5 zvýraznění textu. Při změně transformační matice a jejím navrácením pdf~operátorem~\verb Q vąak dojde k neľádoucímu posunu daląího textu. To lze vyřeąit tak, ľe se pdf~prohlíľeč oklame makrem \verb \rlap (tento neľádoucí posun bude nulový) a ľe se \TeX{} oklame příkazem \verb \kern (nelze pouľít \verb \hskip, aby nedoąlo k neľádoucímu zalomení). Celý problém je vyřeąen makrem \verb \xsc.\begin{verbatim}\def\xsc#1 #2 {\setbox0=\hbox{#2}\hbox{\pdfliteral{q # cm}\rlap{#2}\pdfliteral{q}\kern#1\wd0} }\end{verbatim}pouľití makra je

5 TeX, LaTeX Čti: [tech]!!! Open source typografický "standard" Zaměřený především na definici vzhledu a na sazbu výsledného dokumentu Velmi oblíbený v akademickém prostředí i přes totální nečitelnost / díky totální nečitelnosti *) Řada nadstaveb usnadňuje psaní *) Sadističtí vyučující trvají na tom, že studenti v TeX-u musí psát diplomové práce

6 XML Obecný značkovací jazyk Lze nadefinovat vlastní sadu elementů, entit a tím přesně určit formát takového dokumentu Pro elementy, atributy a entity využívá stejný zápis jako HTML tedy lomené závorky <element>... </element>, &entity; či atributy, ale má přísnější pravidla: - hodnoty atributů v uvozovkách - elementy musí být uzavřené

7 Pomocné nástroje: DTD (Document Type Definition) definuje entity, elementy a syntaktická pravidla XSLT (extensible Stylesheet Language Transformations) popisuje pravidla transformace dokumentu XML na jiný formát (HTML, PDF atd.) XML XML: extensible Markup Language Velmi komplexní nástroj s přísnými syntaktickými pravidly

8 XML... Pomocné nástroje: XQuery dotazovací jazyk podobný SQL pro práci s XML dokumenty Aplikace: Syndikační formáty RSS, ATOM Grafický formát SVG Serializace HTML: XHTML

9 XML Díky volnosti lze XML aplikovat na jakákoli strukturovaná data: <?xml version="1.0"?> <posluchaci kurz="666"> <posluchac> <jmeno>jan</jmeno> <prijmeni>novak</prijmeni> </posluchac> <posluchac>...

10 XML Existuje podpora snad pro všechny programovací jazyky; XML je tedy ideální pro návrh datových formátů, které budou sloužit pro výměnu dat mezi systémy Nevýhody: - Ukecané: velký podíl "balastních dat" - Pro některé implementace příliš přísná pravidla - Pro některé implementace příliš mocné

11 HTML vs XHTML XHTML1 je HTML4, zapsané v podobě XML

12 JSON JavaScript Object Notation Zápis strukturovaných dat tak, jak jej zapisuje JavaScript. Výhody: Rozumí tomu JavaScript Rozumí tomu programátor Minimum balastních informací (=> rychlost) Nevýhoda: jednoduchost

13 JSON {posluchaci: {kurz:"666", posluchaci: [ {jmeno: "Jan", prijmeni: "Novak"}, {...} ] } }

14 JSON Existují implementace pro všechny jazyky používané na webu Pro velkou část webových aplikací zcela postačující schopnosti

15 YAML Yet Another Markup Language (YAML Ain't Markup Language) Blíží se "přirozenému zápisu struktury" používá odsazování, odrážky apod. Cílem je mít nástroj pro zápis dat v textovém formátu, který by byl intuitivně čitelný a upravovatelný

16 posluchaci: kurz: "666" - jmeno: "Jan" prijmeni: "Novak" - jmeno: "Pepa" prijmeni: "Zdepa" - jmeno: "Jolka" prijmeni: "Krásná" YAML

17 Rekapitulace TeX, LaTeX unixové nástroje, zaměřené na typografii XML univerzální jazyk pro vytváření vlastních formátů JSON jednoduché "programátorské" zapisování strukturovaných dat YAML strukturování běžnými textovými prostředky

18 HTML bez <, > Uživatelsky vytvářený obsah vyžaduje, aby jej uživatelé zapisovali tak, že bude kompatibilní s webem a bude splňovat určité požadavky. Jak mohou obsah psát? 1. V HTML (to neumí) 2. Ve Wordu (problémy s převodem) 3. V online editoru 4. Ve strukturovaném zápise pomocí sémantického jazyka

19 WYSIWYG editory WYSIWYG "What You See Is What You Get"

20 WYSIWYG editory Největší nevýhoda WYSIWYG: Uživatelé jsou "kreativní"! S WYSIWYG se nesoustředí na to, co chtějí sdělit, ale na to, jak to má vypadat. Výsledek je sice validní HTML, ale sémanticky "nanic"

21 WYSIWYG editory...? Mnohem výhodnější je nechat uživatele jednoduše označit, co chtějí říct; čím míň grafických a prezentačních možností mají, tím lépe: soustředí se na strukturu sdělení grafickou kreativitou "nerozkopou" web výsledek se snáz transformuje do potřebné podoby

22 Sémantické značkovací jazyky Intuitivní zápis v podobě prostého textu: Nadpis ====== Kapitola Někdo musel Josefa K. pomluvit, neboť byl, ač neprovedl nic zlého, jednou ráno zatčen.

23 Texy! "Texy! je sexy!" Původní český nástroj výstupem je validní HTML s kvalitní typografií Velké možnosti rozšíření

24 Markdown, Textile,... Texy! není první ani jediný podobný. Další podobné nástroje: Markdown Textile Wikipedia má vlastní značkovací jazyk Liší se pouze v detailech značkování

25 Všechno tohle dohromady... Sémantické značkovací jazyky lze velmi dobře zkonvertovat do validního HTML Výsledek má vysokou sémantickou úroveň (zůstává zachována informace "co to je?") Výsledek mívá i velmi vysokou typografickou úroveň (pomlčky, správné uvozovky, správně odlišený matematický symbol "krát")

26 Všechno tohle dohromady... XML TeX JSON YAML Datové HTML PDF,... Prezentační Texy, Markdown, Textile

27 Zpět k HTML... Jak vytvořit webovou stránku v HTML? 1. textovým editorem (Notepad, PSPad,...) 2. HTML editorem (Hotmetal a spol.) 3. WYSIWYG HTML editorem (Dreamweaver) 4. strojově: - z dokumentu (Word,...) - z databáze apod. - z jinak zapsané strukturované informace

28 Děkuji za pozornost