“You cannot not communicate”1sojka/PB029/edp.pdf · Petr Sojka: Elektronická pˇríprava dokumentu˚ 1.pˇrednáška PB029, 19.9.2011, Brno c Petr Sojka, 2000–2011 “You cannot

Petr Sojka: Elektronická příprava dokumentů1. přednáška PB029, 19. 9. 2011, Brno c© Petr Sojka, 2000–2011

1

“You cannot not communicate”Paul Watzlawick (1921– )

Lidé komunikují prostřednictvímdokumentů připravovanýchelektronicky

Petr Sojka: Materiály k výuce předmětu Elektronickápříprava dokumentů (PB029) na FI MU.

Verze z December 5, 2011 formátovanák úspornému tisku.


2PB029

Elektronická příprava dokumentůElectronic Preparation of Documents

❑ Petr Sojka1, mailto://[email protected]

❑ Materiály k předmětu budou průběžně zveřejňovány nawebové stránce předmětu2, případně v IS MU.

❑ Aktuální sylabus předmětu3 je na IS MUNI4.

❑ Doporučená komunikace: diskuzní fórum předmětu naISu.

❑ Konzultační hodiny na podzim 2011:středa 13:00–13:50 (v C523|522, 5. patro C, Botanická68a)pátek 10:00–11:30 tamtéž, po domluvě emailem i jindy.

1http://www.fi.muni.cz/usr/sojka/2http://www.fi.muni.cz/˜sojka/PB029/3https://is.muni.cz/auth/predmety/uplny vypis?fakulta=1433;obdobi=5364;predmet=6325414http://is.muni.cz


3❑ Cvičení jednohodinová, účast povinná. Kromě

přednášejícího cvičí Michal Růžička5. Na cvičení seregistrujte!

❑ Kredity: tři plus ukončení.

5http://www.fi.muni.cz/˜xruzick7/


4Obsah dnešní p řednášky

❑ Základní pojmy.

❑ Cyklus přípravy dokumentů.

❑ Sylabus kursu.

❑ Doporučená literatura.

❑ Test – korektura.

❑ Anketa.

❑ Logické a vizuální značkování.

❑ Dotazy, agenda (cvičení, rozdělení do skupin), brožurkaZačínáme s TEXem na FI.


5Základní pojmy

☞ Informatika – „Nauka o vzniku, oběhu a působeníinformací.“

☞ Informace, její předávání – dokument : “A document isone or more official pieces of paper with writing onthem.” (Collins Cobuild)

☞ Příprava dokumentů: obsah a forma dokumentů

☞ Prezentace informací a její důležitost, stále častějielektronicky : “An electronic process or activityinvolves the use of electronic devices.”

☞ Stále vyšší požadavky na přípravu dokumentů:“Preparation is the process of getting something readyfor use or for a particular purpose.”


6Cyklus lad ění dokumentu

“A man who would letterspace lower case would stealsheep.”

Frederick Goudy, (1894–1945)

“If this wisdom needs updating, it is chiefly to add thatA woman who would . . . ”

Robert Bringhurst, (1946–)

☞ Autor −→ čtenář

☞ Cyklus ladění dokumentu: paralela s laděním programu(waterfall diagram)


7

➀ Pořízení textu, značkování logických částí➁ Design – návrh dokumentu➂ Sazba, typografie➃ Korektury➄ Vytvoření předlohy/matrice➅ Tisk (vystavení) dokumentu


8☞ Dynamické a odvozené „dokumenty“ −→ hypertext,

interaktivní texty, e-learning, virtuální realita, . . .


9Sylabus p řednášky

Předmětem výuky tohoto předmětu je výklad základníchprincipů, algoritmů a technik tvorby dokumentů, s ohledemna jejich využití při publikační činnosti (příprava skript,prezentačních materiálů, psaní diplomové, dizertačnípráce, dokumentace programu ap.), se zaměřením nasystém TEX.

➀ Postup při přípravě dokumentů; základní pojmy aterminologie.

➁ Logická struktura dokumentu; značkování, značkovacíjazyky, SGML, HTML, XHTML, XML, WML. Gramatikydokumentů, DTD, validace. NSGMLS.

➂ Návrh. Principy knižního designu. Návrhstrukturovaných dokumentů.

➃ Publikace na síti Internet (WWW) a specifika návrhu avytváření těchto dokumentů. CSS, XSL, HTML5.

➄ Základy typografie, specifika sazby českých textů.


10➅ Písma, typy písem, způsoby reprezentace a designu

písem. Rastrovací algoritmy, techniky redukcí tvarupísem. Formáty písem.

➆ Sázecí systémy. TEX jako příklad dávkového sázecíhosystému a jeho principy. Sazba. LATEX. Styly sazby ajejich implementace (makroprogramování).

➇ Algoritmy řádkového a stránkového zlomu,hz-algoritmus.

➈ Jazyky pro popis stránek. PostScript. Bézierovy křivky.

➉ Výstupní zařízení, charakteristiky výstupních zařízení.Osvit, tisk a vazba.

➊ Hypertext, hypertextové systémy. Portable DocumentFormat, technologie Adobe Acrobat, pdfTEX.

➋ Paralelní publikace na papíře a na síti. Publikacedatabází. Konverze mezi různými formáty. LATEX2html.Dynamické dokumenty.

➌ Závěrečné shrnutí, sdílení zkušeností. Vyhodnocenípříkladů. Test.


11„Dokumenty v TEXu jsou mstou akademiků studentům,takže přežijí do té doby, dokud budou přežívat zatvrzelci

v akademických sborech (řádově několik tisíciletí).“Jiří Hlavenka, (1964– )

:-( Naproti tomu:„Rozhodně, prosím, opust’te vody nepoučených

’nalévačů

textu‘ či’myšařů‘ a začněte vyrábět sazbu, již je nejen

radost číst, ale na níž i oko se zalíbením spočinouti může.“Michal Ptáček

“TEX in Schools? Just Say No!” (Konrad Neuwirth)


12Shrnutí – Dokumenty a VT

☞ Použití výpočetní techniky při celém cyklu práces dokumenty (vytváření, testování a údržbadokumentů – nosičů informací).

☞ Dokumenty tištěné; zaměření na technické,strukturované (DP, odborné publikace, články, přípravy).

☞ Hypertext: „dokumenty“ elektronické, jejich značkování,vytváření, validace, konverze, šíření.

☞ Přednášky – „teorie“, důraz na principy; cvičení –„praxe“, sdílení zkušeností se softwarovými systémy ael. vytvářením dokumentů, TEX.

☞ Hodnocení – bodovací systém: závěrečný testsestávající se z korektury (10 %) a testu (40 %).Vytvoření dokumentů tištěného (strukturovaného,alespoň 4 strany, např. životopis) a elektronického(WWW či WAP domovská stránka), domácí úlohy adokumenty (50 %). Prémiové body.


13Relevantní kurzy na FI

☞ PA178 – Digital Typography and Visualization

☞ PV212 – Seminar on Dig. Typography

☞ ?PV126 Typographic programming (Hans Hagen,blokově)

☞ PV123 – Základy vizuální komunikace

☞ PB138 – Moderní značkovací jazyky

☞ PV066, PV067, PV099 – Typografie I, II, III

☞ PV078, PV083, PV100 – Grafický design I, II, III

☞ PV084, PV085, PV101 – Písmo I, II, III

☞ PB009 – Základy počítačové grafiky

☞ PB182 – Komunikace člověka s počítačem


14☞ nebo i PV030 – Textové informační systémy

☞ příbuzné kurzy (počítačová lingvistika, multimédia,Java)

☞ bohatá knihovna (ssh knihovna.muni.cz ), poličkapředmětu v knihovně s materiály

☞ brožurka Začínáme s TEXem na fi.muni.cz6

☞ DVD TEXlive 2011, modul texlive-2011 (-2010, -2008,2003, -2005a, -6), stránky CSTUG

6http://www.fi.muni.cz/˜sojka/PB029/zaciname.html


15Literatura

➀ Donald Knuth: Digital Typography, Addison-Wesley,1999.

➁ Vladimír Beran a kol.: Aktualizovaný Typografickýmanuál, Kafka, 2000.

➂ Jean-Luc Dusong, Fabienne Siegwartová: Typografieod olova k počítačům, Svojtka, Vašut, 1997.

➃ Petr Olšák: Typografický systém TEX, Konvoj&CSTUG,2000.

➄ Jiří Kosek: XML pro každého, Grada, 2000.

➅ Pavel Satrapa: WWW pro čtenáře, autory a misionáře.

➆ Petr Olšák: TEXbook naruby, Konvoj, 1998.

➇ P. Taylor, J. Zlatuška: Book design, sborník SOFSEM1993, Zpravodaj CSTUG 1–4/95.

➈ P. Pop a kol.: Sazba I, SPN 1984.


16➉ Jiří Rybička: LATEX pro začátečníky, Konvoj 2003, 3.

vydání.

➊ Zdenka Dvořáková: DTP a předtisková příprava,CPress 2008.

➋ Časopisy Typografia, Font, Electronic Publishing, PCWorld, ročník 94.

➌ Studijní materiály v ISu, odpovědníky.

➍ Safari Bookshelf online7.

➎ Odkazy na WWW stránce předmětu a dokumentechpředmětu (slidy), na www.kosek.cz8, www.CSTUG.cz9.

➏ http://www.fi.muni.cz/~sojka/PB029/typobib.pdf10.

➐ knihovna.muni.cz11.

7http://proquest.safaribooksonline.com/home8http://www.kosek.cz9http://www.cstug.cz

10http://www.fi.muni.cz/~sojka/PB029/typobib.pdf11http://knihovna.muni.cz


17Anketa

➀ Dosavadní praxe vytváření tištěných dokumentů(zejména technických, i pracovních):

(a) rozsah a typ dokumentů (odb. lit., eseje, dopisy, . . . )(b) jaký software používáte?(c) v čem jste s dosavadním stavem nespokojeni?

➁ Totéž pro elektronické/multimediální dokumenty (HTML,PDF, případně alespoň elektronická pošta apod.)

➂ Proč jste si předmět zapsali (co si slibujete od jehoabsolvování) – kromě kreditů?

➃ Návrhy, připomínky k zaměření, obsahu apod.?

➄ Jak hodláte zúročit informace z předmětu v praxi?

➅ Jakou vlastníte relevantní literaturu a jaké příbuznépředměty jste absolvovali respektive máte zapsány?

➆ Oblast expertízy, zkušeností s publikováním, používanésoftwarové systémy (o čem byste chtěli referovat)?


18Minitest – korektura

➀ Najděte během deseti minut samostatně v přiloženémtextu deset typografických chyb.

➁ Spočtěte si počet úspěšně nalezených.


19Osnova dnešní p řednášky

☞ Anketa a agenda.

☞ Logické a vizuální značkování.

☞ Značkovací jazyky. Formální dokumenty a principyznačkování – SGML.

☞ Gramatiky dokumentů, DTD.

☞ Validace a vytváření SGML dokumentů.

☞ Výměna dokumentů na Internetu, URI/URL/URN.

☞ Aplikace SGML: HTML, XHTML.


20Agenda

☞ Zhodnocení ankety.

☞ Domácí úlohy – logické/vizuální značkování: noste docvičení.

☞ Domácí a prémiové úlohy sledujte pravidelně na webupředmětu! Aktuální je např. prémiová úloha z Invexu.

☞ Body a prezence na cvičení je ve vystavenýchzáznamnících na IS (kontrolujte si).


21Vizuální a logická struktura dokumentu

“Algorithms + Data = Program”Niklaus Wirth

„Forma + Obsah = Dokument“Petr Sojka

☞ Přenos informace – raison d’être dokumentu

☞ Obsah – stylistika, jazyková správnost, koheze

☞ Forma

❑ jednotnost❑ přenos informace❑ struktura

typografie

literatura=

interpretace

kompoziceskladby

☞ Obsah −→ Forma; vizuální prvky musí podporovatvnitřní obsah a strukturu a být s ní konzistentní.

☞ Značkovací jazyky (Markup Languages): SGML, HTML,WML, XML, LATEX umožňují oddělit obsah a formu tam,kde je to možné.


22☞ Značky logické struktury × vizuální.

☞ Někdy oddělit nelze (Trychtýř12 ChristianaMorgensterna).

12http://www.alb-neckar-schwarzwald.de/morgenstern/morgenstern poems.html


23Cyklus vývoje dokumentu v L ATEXu

TFM HYP CLS POOL

?��

��INITEX

? ?

LOG FMT TEX STY CLS TFM

?��

��(pdf)TEX

? ? ? ?

DVI LOG IDX AUX

6

BIB BST

?��

��BIBTEX

? ?

BLG BBL

6

IST

?��

��MakeIndex

? ?

ILG IND 6

�

FNT

?��

��DVI ovladač

?

��

��

výstup


24Použití p řípon souborů

SOUBOR POPIS IDENTIFIKACE(SUFFIX, EXTENZE, ETC.)

TEX textový vstup tex , ltxDVI výstup (pdf)TEXu, zformátovaný text dviLOG log soubor (pdf)TEXu log , lis , listHYP vzory dělení slov texTFM metriky fontů tfm

POOL chybová hlášení pool , poo , polFMT format file fmtCLS TEXové styly tex , cls , dtxSTY TEXové pom. styly file sty , tex , docAUX pomocné soubory aux , toc , lot , lof ,

glo , tmp , texIDX neutříděný rejstřík idxIST styl sazby rejstříku istILG MakeIndex log soubor ilgIND utříděný rejstřík indBIB bibliografické záznamy bibBBL seznamy citací bblBLG BIBTEX log soubor blgBST BIBTEX style soubor bst


25Z hlavy autora do elektronické podoby

“Data cannot be used at a finer grainthan it is marked up at.”

R. Jelliffe

☞ Autor, jeho interní model problematiky v hlavě a jeho(neustálá) reorganizace. Lineární zápis v časovémokamžiku formou textu (psaní). O

☞ Tentýž text může mít více interpretací.

☞ Pro uchopení obsahu a automatizaci zpracování jenutný značkovací jazyk : text je obohacen azjednoznačněn značkami .

☞ Příklady značek: :-) (ze slovníčku smileys) či... .

☞ Značka je kód přidávaný k (elektronicky) vytvářenémutextu, který definuje strukturu textu (logická zna čka )nebo formát textu (vizuální zna čka ).


26☞ Značka explicitně určuje interpretaci (víceznačného)

textu. Dříve sazeč určoval interpretaci implicitněz kontextu a sémantiky textu (holý text v přirozenémjazyce ve strojopise je víceznačný).

☞ Procedurální (jména pro zpracování) versusdeskriptivní zna čkování (jména pro kategorizaci).

☞ Výhody deskriptivního značkování:

❑ Nezávislé zpracování označených dat různýmizpůsoby a programy. Tedy například umožňujegenerování různých výstupů z jednoho zdroje(databáze, dobře označkovaný text) pro elektronickou(XML, HTML, PDF, Hypercard, . . . ) nebo tištěnouverzi (PS, PDF z LATEXu).

❑ Oddělení obsahu a formy (ohledně formy mározhodující slovo nakladatel).

❑ Je snazší výměna a komunikace obsahu:komunikace mezi (spolu)autory, redakcí (přesInternet).

❑ Datová nezávislost: textové soubory, dlouhodobáarchivace trvalých hodnot [papír (500 let) versus bity(k nové verzi programu)].

→ lingua franca značkovacích jazyků?


27Jaký zna čkovací jazyk?

☞ Nevýhody proprietárních formátů (Word, WordPerfect):účelově se mění, jsou nestabilní. Hrozí babylonskézmatení jazyků nebo monopol nevhodného formátu.

☞ Organizace ISO13 (International StandardsOrganization), vydává známé normy jako ISO 8859-2,10646-1 (Unicode), . . .

☞ Norma ISO 8879:1986 Information processing – Textand office systems – Standard Generalized MarkupLanguage (SGML), vydaná 15. 10. 1986 po dlouhémprocesu standardizace na základě návrhu CharleseGoldfarba a jeho GML. Počátky již na konci šedesátýchlet při návrhu informačního systému právnických textův IBM.

☞ Celá sada standardů ISO: kromě SGML, DSSSL(Document Style Semantics and SpecificationLanguage, ISO/IEC DIS 10179.2:1994), SPDL(Standard Page Description Language, ISO/IEC DIS10180:1991) a HyTime (Hypermedia/Time-basedStructuring Language, ISO/IEC 10744:1992). O

13http://www.iso.org/


28☞ S odstupem času: nesporný úspěch SGML, základ pro

další značkovací jazyky (XML), ale například neúspěchSPDL oproti proprietárnímu PostScriptu.


29SGML – historie a motivace

☞ Výhody: znovupoužívání částí dokumentů, kvalita aotevřenost systému, obecnost, nezávislost na konkrétníformě (WWW konsorcium), rozšiřitelnost dletechnologických možností (hypertext), snížení nákladů,možnost validace (ověření korektnosti dokumentu nazákladě formální definice jazyka dokumentu).

☞ Nevýhody: za obecnost se platí složitostí, i po šestnáctiletech jsou nejlepší systémy na plné SGML drahé,změna s rozšířením HTML, přesto přechod k XML(složitost).

☞ Uživatelé SGML (zpočátku velké instituce, elektronickýa letecký průmysl, nakladatelé): AAP, OUP, Boeing,Lufthansa, British Patent Office, Association of Germaneditors, TEI, McGraw-Hill, LDC, . . . viz stránkyOrganization for the Advancement of StructuredInformation Standards14 .

☞ Dnes přesnější a relevantnější vyhledávání naInternetu.

14http://www.oasis-open.org/cover/


30Metajazyk SGML – definice

☞ SGML je mezinárodní standard pro popis značkovacíchjazyků.

☞ Formálněji je to syntaktický metajazyk pro definici tříddokumentů (deskriptivních značkovacích jazyků),nezávislých na abecedě.

☞ Formální definice typu dokumentu se nazývá DTD –Document Type Definition, definice typu dokumentu(gramatika třídy dokumentů). SGML parser (validátor)pak čte na vstupu DTD a kontroluje formální správnost.

☞ Instance SGML dokumentu (dále jen SGML dokument)sestává z deklarace (pokynů pro parser), gramatiky(DTD) a vlastního popisně označkovaného textu.


31SGML deklarace

☞ „Pokyny pro parser“ s definicemi abeced (analogiepopisu BNF):

❑ role oddělovačů;❑ rezervovaná jména;❑ zakázané znaky, typicky kontrolní ASCII;❑ pravidla pro pojmenovávání, citlivost na malá a velká

písmena;❑ velikosti délek, značek, . . . ;❑ komentáře;❑ parametry chování, které vlastnosti kontrolovat

(OMITTAG).

☞ Pokud deklarace v dokumentu není uvedena, používáse implicitně referen ční syntaxe Reference ConcreteSyntax (RCS).

☞ příklad deklarace15:15ftp://ftp.ifi.uio.no/pub/SGML/declaration


32

0 9 UNUSED9 2 9 -- TAB, LF --

11 2 UNUSED13 1 13 -- CR --14 18 UNUSED

32 95 32127 1 UNUSED

CAPACITY SGMLREFTOTALCAP 35000

...NAMECASE

GENERAL YESENTITY NO

DELIMGENERAL SGMLREFMDO "" -- markup decl close --DSO "[" -- declaration subset open --DSC "]" -- declaration subset close --MSC "]]" -- marked section close --COM "--" -- comment --RNI "#" -- reserved name indicator --LIT """ -- literal --LITA "’" -- alternative literal --GRPO "(" -- group open --


33

GRPC ")" -- group close --AND "&" -- and connector --OR "|" -- or connector --SEQ "," -- seq connector --OPT "?" -- opt occurrence indicator --REP "* " -- rep occurrence indicator --PLUS "+" -- plus occ ind, inclusion --MINUS "-" -- exclusion, omission flag --CRO "" -- character reference open --ERO "&" -- entity reference open --PERO "%" -- parameter entity reference open --REFC ";" -- reference close --PIO "


34SGML DTD: atributová gramatika

☞ Terminologie teorie formálních jazyků: neterminály(elementy ), terminály (entity ).

☞ Elementy vytvářejí stromovou strukturu, nemohou senavzájem křížit, jeden element je kořenový. Lze použítprázdné elementy.

☞ Elementy mohou mít atributy . O

cislo CDATA #REQUIREDvystaveni CDATA #REQUIREDsplatnost CDATA #REQUIREDvystavil CDATA #IMPLIED>


35Deklarace elementů a atributů

☞ Sekvence, alternativa, ANY, EMPTY, #PCDATA.

☞ Opakování: právě jednou, nejvýše jednou (?), alespoňjednou (+), libovolněkrát (*).

☞ Typy atributů CDATA, NMTOKEN, NMTOKENS, ID , IDREF,IDREFS, ENTITY, ENTITIES , vý čet .

☞ Implicitní hodnoty atributů: "hodnota" , #REQUIRED,#IMPLIED , #FIXED "hodnota" .


36Entity

☞ Vhodné pojmenovat části a fragmenty SGML, některéřetězce (&TeX; v IS) a znaky použité jako oddělovačev gramatice: < , & , " .

☞ Entity interní textové, externí textové, externí binární aparametrické.

☞ Příklad množiny interních textových entit: ISO Latin216.

...

☞ Externí textové entity:

☞ Externí binární entity:16ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/ISOlat2


37


38Další p říklady DTD

☞ DTD diplomové práce O .

☞ DTD informací o studijním předmětu O .

☞ DTD rozvrhu.


39Připojení DTD k instanci dokumentu

☞ Odkazem na soubor:

...

☞ DTD součástí dokumentu:

dodavatel, polozka+)>...]> ...

☞ Veřejný identifikátor PUBLIC s URL:

V případě veřejného identifikátoru je mapování odřetězce k souboru určeno tzv. katalogem (proměnnáokolí SGMLCATALOGFILES či XML CATALOGFILES ).


40Příklad SGML dokumentu

Ferda PistoriusBoubín 772862667777 291-2862667777

Hynek BednaMáchovo jezero 782862467777 291-2862467777

XML editor500


41Pohledy na SGML

☞ Lexikální pohled : SGML dokument je řetěz znaků,z nichž některé jsou data a některé odd ělova če,značky.

Úvod do SGMLSGML: hlavní principyZobecn ěné zna čkování

Základem ......

☞ Syntaktický pohled : SGML dokument má tři části:SGML deklaraci (instrukce pro SGML parser), DTD(gramatiku jazyka) a vlastní instanci dokumentu(v tomto jazyce). Instance dokumentu obsahuje data aznačky vyhovující DTD. Tento pohled vytváří parserz lexikálního pohledu.

☞ Pohled hierarchie objektů : SGML dokument jeuspořádaná hierarchie (obvykle stromová struktura)objektů s obsahem (elementů ). Elementy mají atributy,obsah a další vlastnosti. O


42☞ Entitn ě-strukturní pohled : SGML dokument je

vnořená kolekce entit . Většina entit je pojmenovaných.Textové entity mohou odkazovat na další entity,zatímco datové entity obsahují libovolná data.

☞ Aplika ční pohled : SGML dokument je cokoli, co autorchce aby jím bylo. Data belongs to whoever creates it,and you get to decide what’s important about your owndata.


43SGML – validace a parsing

☞ Validace. Parsery. SP a sgmls/nsgmls Jamese Clarka17.

☞ Výstup parseru: Element Structure Information Set(ESIS) formát.

☞ Ukázky validace, chyb, ladění, ESIS.

☞ Třídy dokumentů. CATALOG./packages/share/sgml-catalogs/

☞ Další příklady DTD – informace o studijnímpředmětu. O

17http://www.jclark.com


44Vytvá ření zna čkovaných dokumentů

☞ Běžný ascii editor (emacs, joe nebo i notepad ).

☞ PSGML mód emacsu: příklad stránky předmětu.

☞ Komerční systémy: Arbortext (Epic), SoftQuad, CorelXMetal . . .

☞ (X)HTML svět: Mozilla/Firefox, MSIE, Amaya,HomeSite, Netscape, FrontPage, . . .


45Značkovací jazyky na Internetu – vývoj

☞ 3/1989: návrh projektu World Wide Web, TimBerners-Lee, CERN

☞ 12/1990: návrh HTML DTD, první Web software podNExT

☞ 1991: první WWW prohlížeč pro omezené užití

☞ 1992: CERN začíná propagovat WWW projekt

☞ 2/1993: NCSA zveřejňuje alfa verzi prohlížeče Mosaic/XMarca Andreesena

☞ 7/1993: HTML 1.0 specifikace (Hypertext MarkupLanguage) (RFC 1866) jako Internet draft pracovnískupinou IETF/IIR (Internet Engineering Task ForceInternet Information Resources): dokumentový jazykdefinovaný pomocí SGML užívaný na WWW.

☞ 9/1993: Mosaic pro PC, MAC a X-Window


46☞ 11/1993: Dave Raggett (HP) navrhuje HTML specifikaci

s formuláři, tabulkami a rovnicemi

☞ 4/1994: HTML DTD test suite (Dan Connolly)

☞ 6/1994: MIT/CERN vytváří organizaci W3

☞ 6/1994: IETF vytváří pracovní skupinu HTML a HTML2.0 specifikaci

☞ 11/1994: volně šířený prohlížeč Netscape 1.0

☞ 4/1995: Netscape Navigator 1.1

☞ 5/1995: Netscape a Sun se dohodli na podpoře Javy

☞ . . . World Wide Web Consortium (W3C).

☞ XML/XHTML, MathML.


47Výměna dokumentů na Internetu

☞ Identifikace dokumentů na Internetu: Uniform ResourceLocator/Identifier/Name (URL/URI/URN18).

☞ URN: URI, kdy organizace zajištuje trvalost odkazů(typicky překladovou službou).

☞ metoda://server[:port]/cesta/soubor[#kotva]

☞ Http, https, mailto, news, file, ftp, gopher, rlogin, telnet,tn3270, wais.

☞ Klient/server; http, https server.

☞ Klienti: Google Chrome, Firefox 6/Mozilla/NetscapeNavigator, MS Internet Explorer, Opera, Galeon,Konqueror, Lynx, Mosaic, Amaya, HotJava, . . .

☞ Různé módy renderování v posledních verzíchprohlížečů: zpětně kompatibilní (quirk mode) astandardy W3C dodržující (standard mode).

☞ Servery: Apache, Netscape Commerce, MS IIS, NCSA.

18http://www.w3.org/Addressing/#terms



➀ Agenda (úkoly do cvičení, prém. úkoly, bak. práce,. . . ).

➁ Aplikace SGML: HTML, XHTML.

➂ XML? XML!

➃ WML.

➄ ISO/IEC 10646, Unicode.

➅ Formáty a normy související s XML (XLink, XPointer,RDF, XTM). AJAX. DOM.

➆ Návrh/design (webový): úvod.


49Dokumentové jazyky založené na SGML

☞ Nejrozšířenější je HTML.

☞ Vývoj HTML – různá fixní DTD (jedné třídy dokumentů).

☞ Koordinace W3C, velké nekompatibilní odchylkyvelkých firem, problémy s validací.

☞ DocBook DTD: svět Linuxu, dokumentace, knihy(O’Reilly, Kosek, Safari online).

☞ Další rozšířené dokumentové jazyky: TEI (TextEncoding Initiative) DTD.

☞ Rainbow DTD: formalizace RTF pro konverze z Wordu.

☞ WML (WAP), CALS, MATHML, TEXML, . . .


50Proč XML? Desatero cílů.

XML (Extensible Markup Language) – zjednodušenáverze SGML optimalizovaná pro použití na Internetuvyvíjená konsorciem W3C19. Desatero cílů:

☞ Přímočaré použití na Internetu.

☞ Široké spektrum použití/aplikací.

☞ Kompatibilita s SGML.

☞ Snadnost vytváření programů pro práci s XML.

☞ Absolutní minimum či absence volitelných rysů XML.

☞ Čitelnost a jasnost.

☞ Rychlost návrhu.

☞ Formální popis a návrh.

☞ Snadnost vytváření XML dokumentů.19http://www.w3.org


51☞ Úsečnost zápisu není důležitá.


52XML? XML! Nikdy není pozd ě!


53Co je to XML?

☞ Doporučení W3C20: rozšiřitelný značkovací (meta)jazyk.

☞ Univerzální a otevřený formát pro reprezentaci (avýměnu) téměř libovolné datové struktury – dat idokumentů. Násobné a opakované použití jakou SGML.

☞ Celá sada technologií a formátů s XML souvisejících(XPointer, XLink, XSL) pro elektronickou výměnu dat (adokumentů).

20http://www.w3.org/TR/REC-xml


54Vymezení XML

☞ Odlišení od HTML: rozšiřitelnost, možnost změnsémantiky značek. XML nespecifikuje ani sémantiku,ani množinu značek, umožňuje však značky definovat adefinovat jejich strukturální závislosti. Sémantiku určujíaplikace (webové prohlížeče jsou jedny z nich).

☞ Odlišení od SGML: zjednodušeně řečeno XML je SGMLs restrikcemi. Odchylky jsou minimální (chovánímezery).

☞ Technický úvod do XML Normana Walshe21.

21http://www.xml.com/xml/


55Syntaxe XML

☞ Slabší pojem než validita: správná strukturovanost(well-formed ).

☞ Správně strukturovaný dokument by měla zpracovatkaždá XML aplikace.

☞ Validátory SGML umí obvykle i XML.

☞ Parsery: nsgmls, msxml, xerces, xmllint, . . .

☞ Sekce CDATA pro pohodlnější psaní části dokumentůobsahujících významné znaky:

(1 < 2) & 2 = 1000 x 1]]>


56XML deklarace

☞ Musí být na prvním řádku dokumentu.

☞ Při standalone yes není třeba číst externí DTD.


57Instrukce pro zpracování

Pokyny (procesní instrukce) pro specifické aplikace:

nebo

či


58XHTML? XHTML!

☞ Postupný přechod z HTML: XHTML22, reformulaceHTML jako modulární XML aplikace.

☞ XHTML čtou všechny XML-kompatibilní aplikace, azároveň je možno psát dob ře zformované(well-formed) dokumenty již nyní.

☞ Příklad XHTML dokumentu:

simple document

a simple paragraph

22http://www.xhtml.org


59MathML: zna čkování matematiky na Webu

☞ MATHML23 2.0 (Mathematical Markup Language) –doporučení W3C. XML slovník/aplikace pro popismatematiky (struktury formulí i prezentačních forem).

☞ Příklad: kubickou křivku formalizovat pro dalšízpracování (vykreslení křivky, integrace, . . . ) na základěXML kódu:

x3

☞ Použití jak pro sazbu, tak pro výpočet v systémech jakoje Mathematica: přímočaré odlišení víceznačností:diferenciál x od proměnné dx a součinu proměnných dx.

23http://www.w3.org/Math/


60☞ Nativní podpora MathML od Mozilly 1.1. Renderovací

stroj MathML pro MSIE: MathPlayer24. TechexplorerIBM25: plug-in pro Navigator a MSIE pro renderováníTEXu, LATEXu a MathML.

☞ Možnosti výpočtů, validace, renderování naMathMLcentral26.

24http://www.dessci.com/webmath/mathplayer/25http://www.ibm.com/software/techexplorer/26http://www.mathmlcentral.com


61WML

☞ WML (Wireless Markup Language) je jazyk dokumentů,které jsou zobrazitelné na displejích mobilních telefonů:jsou dostupná DTD27.

☞ Průmyslová asociace WAPFORUM28. (1997, Nokia,Ericsson, Motorola, Unwired Planet).

☞ WAP (Wireless Application Protocol) – komunikačníprotokol pro přenos informací z Internetu na mobilnízařízení. resp./packages/share/sgml-catalogs/WML .

☞ WAP browsery: CCWAP29, Nokia browser, WINWAP, . . .

☞ Více paměti, silnější procesory: přechod na XHTML?

27http://www.wapforum.org/DTD/28http://www.wapforum.org29http://www.ccwap.com


62Příklad WML dokumentu

I am learning the basics of WML.


63WML – pokra čování

☞ Konfigurace http serveru pro WML: do souboru~/.htaccess je třeba přidat:

addtype text/vnd.wap.wml Wmladdtype Application/vnd.wap.wmlc Wmlcaddtype text/vnd.wap.wmlscript Wmlsaddtype Application/vnd.wap.wmlscriptc Wmlscaddtype image/vnd.wap.wbmp wbmp

☞ Prohlížení většinou pomocí apletů v prohlížeči,vývojová prostředí např. EasyPad Waptor30.

30http://www.yourwap.com


64Domácí úkoly (do cvi čení 4)

☞ Do cvičení 4: Přinést si neznačkovaný text pro sazbutištěného dokumentu do čtyř stran A4, t.j. cca osmnormostran textu.

☞ Dovalidovat český html dokument pomocí nsgmls.

☞ Možná prémiová úloha: navštívit Invex, vystavit na svéstránce předmětu validní stránečku o zajímavostech zesvěta EDP a poreferovat v pěti větách/bodech nacvičení.


65Technologie a formáty související s XML

☞ ISO/IEC 10646-1 Unicode.

☞ XLink, XPointer, XPath. XQuery.

☞ RDF (Resource Description Framework) – metadata naWWW.

☞ CSS.

☞ XSL, XSL-FO.

☞ SVG.


66ISO/IEC 10646-1 standard

☞ Mezinárodní ISO standard ISO/IEC 10646-1, 1993:Universal Multiple-Octet Coded Character Set(UCS).

☞ První standard s ambiciózním cílem obsahovat všechnyznaky používané v psaných jazycích, včetněmatematických a dalších symbolů.

☞ Jednotné kódování, sekvence 16bitové (UCS-2, 65 536pozic), nebo 31bitové (UCS-4, 2 147 483 648 pozic):proto multi-octet .

☞ Jazykově neutrální, zrušení předpokladů ekvivalenceznaků a glyfů, neproporcionality hladkého textu.

☞ Kritériem přidání znaku je odlišnost ve významu i tvaru(CJK unifikace). Výjimky: Latin P, Greek P (capital rho),Cyrillic P (R).

☞ Struktura kódového prostoru UCS-2 (256 skupin po256 buňkách), Basic Multilingual Plane (BMP).


67☞ Privátní zóny pro privátní použití aplikací.

☞ Implementační úrovně 1–3; příklad dánského “A withring above and acute accent”: 01FA reprezentacepoužitá v úrovních 1 a 2: jeden složený znak; 00C50301 “A with ring above” + combining acute accentnebo 0041 030A 0301 “A” + combining ring above +combining acute accent : program implementujícístandard úrovně 3 musí být schopen zpracovat tytokompozitní sekvence stejně jako výše uvedenoureprezentaci.


68Unicode konsorcium, znaková sada Unicode

☞ Unicode Consortium 31 je nevýdělečná organizace,založená 1989 pro vývoj, rozšiřování a podporupoužívání Unicode Standardu. Členové konsorciapředstavují široké spektrum korporací a organizacív průmyslu počítačů a informačních technologií.Konsorcium je finančně podporováno pouze členskýmipoplatky.

☞ Respektuje ISO.

☞ Unicode: sada znaků specifikovaná konsorciemUnicode.

☞ Databáze znaků32 poskytovaná konsorciem (k 10/2009verze Unicode 5.2.0) či přehledné tabulky znaků33.

☞ Znak s libovolným kódem z ISO 10646 můžeme zapsatpomocí entity kod (kod je v desítkové soustavě)nebo kod (kod je šestnáctkově): code points0–10FFFF16.

31htpp://www.unicode.org/32http://www.unicode.org/Public/UNIDATA/33http:/www.unicode.org/charts/


69☞ Jednoznačný trend použití pro rozšíření na WWW, v OS

[cut & paste], značkovacích i programovacích jazycích.


70UCS a přenos znaků

☞ UCS-4 resp. UCS-2 “Universal Character Set coded in4 resp. 2 octets”.

☞ UCS-2 pouze pro BMP (two-octet BMP form).

☞ Problémy s přímým přenosem textů v UCS (prostorověneefektivní) → transformační/kódovací metody UTF-8,UTF-7, UTF-16.

☞ UTF-8: znaky ASCII nahrazeny byty hex 00-7F. Ostatníznaky nahrazeny dvěma až šesti byty hex 80-FF.

☞ UTF-16 16bitové slovo obsahuje kód znaku, rozšíření:1 znak zabere dvě 16bitová slova.

☞ UTF-7: pro SMTP protokol; kódovány i speciální znakyASCII. Specifikovaný IETF, Internet Engineering TaskForce, a formálně nesouvisející s ISO/IEC 10646.Výsledkem je text neobsahující kontrolní znaky a znakynad 7F.

☞ Detaily a přehled34.

34http://www.nada.kth.se/i18n/ucs/unicode-iso10646-oview.html


71XPointer a XLink

“Only connect! That was the whole of the sermon”E. M. Forster, (1879–1970)

Doporučení XLink35 XML Linking Language a draftXPointer36 XML Pointer language pro specifikaci vazebmezi XML dokumenty nebo jejich částmi.

☞ Zobecnění hypertextového odkazu známého z HTML,„zpětná kompatibilita“.

☞ Odkazy mezi více zdroji.

☞ Doplnění odkazů o metadata.

☞ Odkazy je možno uložit mimo odkazované dokumenty.

☞ Xpointer: přesné určení místa ve zdroji, případně výběrjeho části.

☞ Odkazy se vytvářejí pomocí elementů a atributůpatřících do jmenného prostoruhttp://www.w3.org/1999/xlink.

35http://www.w3.org/TR/xlink/36http://www.w3.org/TR/2001/WD-xptr-20010108/


72

Domovina PB029


73RDF

☞ RDF37 (Resource Description Framework) – metadatana WWW.

☞ Model pro reprezentaci pojmenovaných vlastností areprezentaci hodnot.

☞ Krok k sémantickému Webu?

☞ RDF validátor38:

PB029 Elektronická p říprava dokumentůStránky p ředmětu PB029

vyu čovaného Petrem Sojkou na FI MU v Brn ě, CZ.Petr SojkaPetr Sojka2005-10-03text/htmlcs

37http://www.w3.org/RDF/38http://www.w3.org/RDF/Validator/


74Závěrem k etap ě o značkování

Trendy:

☞ Rozhraní a služby na Webu: SOAP, UDDI, WSDL,XLANG/XAML, XKMS.

☞ Sémantický web, ontologie: formální vyjádření sdílenékonceptualizace daného oboru. Použití pro přesnějšívyhledávání, Google.

☞ XML a navazující technologie, Topic Maps (ISO/IEC13250) mapy témat, XTM 1.039. Unicode.

☞ Výměna dokumentů/dat v heterogenním prostředí:B2B, B2C.

☞ SMIL (Synchronized Multimedia Integration Language)pro interaktivní multimédia na Webu.

39http://www.topicmaps.org/xtm/1.0/


75☞ Další zdroje, odkazy a literatura je na stránce předmětu

(Kosek40, xml.com41, zvon.org42, W3C43, . . . ).

40http://www.kosek.cz41http://www.xml.com42http://www.zvon.org43http://www.w3c.org/


76Kaskádové styly

“The Web is Ruined and I Ruined It!44”David Siegel45

☞ Informační web – výhody strikního oddělení obsahu aformy: kaskádové styly 46. CSS, CSS247 (1998),CSS348.

☞ Jazyk stylů má formální gramatiku49, proto je možnávalidace CSS50.

44http://www.webreview.com/1997/04 11/webauthors/04 11 97 1.shtml45http://www.dsiegel.com46http://www.w3.org/Style/47http://www.w3.org/TR/REC-CSS2/48http://www.w3.org/TR/css3-roadmap/49http://www.w3.org/TR/REC-CSS2/grammar.html50http://jigsaw.w3.org/css-validator/


77Zpracování dokumentu s kaskádovými styly

☞ Parsing a vytvoření stromu dokumentu.

☞ Identifikace výstupního za řízení .

☞ Stažení všech stylů souvisejících s vybranýmvýstupním zařízením.

☞ Přiřazení hodnot všem vlastnostem výstupníhozařízení, použitím pravidel dědi čnosti a kaskádování .

☞ Pravidlo: selektor a deklarace .

BODY font-size: 10ptH1 font-size: 120%

☞ Kaskáda pravidel: autor (ve stránce), uživatel,uživatelův agent (nejnižší váha).

☞ Nejvyšší váhu má implicitně autor, uživatel ji ale můžepřebít (!important ).


78Vytvá ření kaskádového stylu

☞ Koskův článek o dynamickém HTML51.

☞ Kuchařka Dave Raggetta52.

☞ Příklady webů pánů Staníčka, Pecháčka53, Řezáče54 čiKacvinského.

51http://www.kosek.cz/clanky/dhtml/styly.html52http://www.w3.org/MarkUp/Guide/Style53http://www.y3k.cz/epd/54http://www.fi.muni.cz/


79Příklad CSS2

BODY padding: 8px; line-height: 1.33H1 font-size: 2em; margin: .67em 0H2 font-size: 1.5em; margin: .83em 0H3 font-size: 1.17em; margin: 1em 0H4, P,BLOCKQUOTE, UL,FIELDSET, FORM,OL, DL, DIR,MENU margin: 1.33em 0H5 font-size: .83em; line-height: 1.17em; margin: 1.67em 0H6 font-size: .67em; margin: 2.33em 0H1, H2, H3, H4,H5, H6, B,STRONG font-weight: bolderBLOCKQUOTE margin-left: 40px; margin-right: 40px

I, CITE, EM,VAR, ADDRESS font-style: italicPRE, TT, CODE,KBD, SAMP font-family: monospacePRE white-space: preBIG font-size: 1.17emSMALL, SUB, SUP font-size: .83emSUB vertical-align: subSUP vertical-align: superS, STRIKE, DEL text-decoration: line-throughHR border: 1px insetOL, UL, DIR,MENU, DD margin-left: 40pxOL list-style-type: decimalOL UL, UL OL,UL UL, OL OL margin-top: 0; margin-bottom: 0U, INS text-decoration: underlineCENTER text-align: centerBR:before content: "\ A"


80

/ * An example of style for HTML 4.0’s ABBR/ACRONYM elements * /

ABBR, ACRONYM font-variant: small-caps; letter-spacing: 0.1emA[href] text-decoration: underline:focus outline: thin dotted invert

@media print@page margin: 10%H1, H2, H3,H4, H5, H6 page-break-after: avoid; page-break-inside: av oidBLOCKQUOTE,PRE page-break-inside: avoidUL, OL, DL page-break-before: avoid

@media speechH1, H2, H3,H4, H5, H6 voice-family: paul, male; stress: 20; richness: 9 0H1 pitch: x-low; pitch-range: 90H2 pitch: x-low; pitch-range: 80H3 pitch: low; pitch-range: 70H4 pitch: medium; pitch-range: 60H5 pitch: medium; pitch-range: 50H6 pitch: medium; pitch-range: 40LI, DT, DD pitch: medium; richness: 60DT stress: 80PRE, CODE, TT pitch: medium; pitch-range: 0; stress: 0; rich ness: 80EM pitch: medium; pitch-range: 60; stress: 60; richness: 50STRONG pitch: medium; pitch-range: 60; stress: 90; richnes s: 90DFN pitch: high; pitch-range: 60; stress: 60S, STRIKE richness: 0I pitch: medium; pitch-range: 60; stress: 60; richness: 50B pitch: medium; pitch-range: 60; stress: 90; richness: 90U richness: 0A:link voice-family: harry, maleA:visited voice-family: betty, femaleA:active voice-family: betty, female; pitch-range: 80; pi tch: x-high


81XSL, XSLT, XSL-FO

“Use CSS when you can, use XSL when you must.”W3C

☞ Proč XSL? CSS nebo XSL55?

☞ XSLT – transformační jazyk XSL.

☞ XSL-FO – formátovací objekty XSL.55http://www.w3.org/Style/CSS-vs-XSL


82


83Dynamické HTML

☞ Skriptování na straně klienta (JavaScript, standardECMAScript; VBScript).

☞ Skriptování na straně serveru. CGI skripty (Perl, PHP).

☞ API: Objektový model dokumentu W3C DOM.

☞ DHTML vs. Java.56

☞ Sada technologií AJAX (Asynchronous JavaScript andXML).

56http://www.kosek.cz/clanky/dhtml/index.html


84WWW design

„Já věřím tomu, co je vytištěno černou barvou na papíře.Média jsou pro okultisty.“

František Štorm, 1. střešovická písmolijna

☞ Design dokumentu je závislý na přenosovém médiu(pravidla pro knižní design pro WWW design vesměsneplatí ). Nutno proto mít různé verze dokumentů prorůzná média.

☞ Specifika WWW: čtení na obrazovce počítače (poměrstran, rozlišení), různé „oči“ (prohlížeče), různá„viditelnost/osvětlení“ (tloušt’ka/rychlost linky sít’ovéhopřipojení), snadnost vyjádření struktury, vazeb(hypertext, nelineárnost).

☞ Informační × prezentační web.


85Kucha řka dobrého WWW designu

☞ Web není WYSIWYG (návrhář nezná předem čtenářovanastavení).

☞ Klíčem k úspěchu je originální obsah.

☞ Vytváření stránek se liší od zpracování textu.

☞ HTML/XHTML/XML je strukturální jazyk.

☞ Ne každý uživatel má grafického klienta nebo funkčnízrak.

☞ Většina skvělých triků není až tak skvělá (zmenšujíčtenářskou obec).

☞ Důležité je časování (čtenář a jeho konektivita se mění,špičkové věci rychle zastarávají).

☞ Dodržování standardů – statistika není argument pronekorektní stránky.

☞ Uživatelé mají rádi rychlé stránky.


86☞ Kontrolujte se.


87Desatero WWW designu

☞ Thou shalt put no page element before Content, forContent is thy lord and It is a jealous lord.

☞ Thou shalt make thy webpages to load quickly.

☞ Thou shalt respect the trademarks, copyrights, andreputation of thy neighbor.

☞ Thou shalt use graphics and animations that arerelevant and meaningful, and thou shalt not scatterthem carelessly as birds scatter seeds on hard ground.

☞ Thou shalt not resize thy neighbor’s browser windownor shall thou disrupt the function of thy neighbor’s"back" button nor shall thou force text to a size that isunreadably small on thy neighbor’s 1280x1024 display.

☞ If thou art inspired to create a webpage of lasting value,then thou shalt make it in such a manner so that thyneighbor may bookmark or print it. Twould be evenbetter if he could do both.


88☞ Thou shalt make the elements which must be seen and

comprehended first so that they load first.

☞ Thou shalt use text for text and graphics for graphicsand never graphics where text is appropriate, underthreat of banishment to the pit of darkness wheresearches and indexes are unknown.

☞ Thou shalt make thy pages to be both standardscompliant and backwards compatible, but wherebackward compatibility shall cause the page to loadslowly, thou shalt leave those with weak and oldbrowsers in the wilderness they have chosen for theirhome.

☞ Thou shalt not steal bandwidth by including images orother objects housed on thy neighbor’s website on thyown pages, nor shalt thou place thy neighbor’s websitein a frame on thy page. In all things remember to treatthy neighbor’s website as thou wouldst have him or hertreat thine.


89Chyby návrhu WWW stránek

☞ Chybějící navigační podpora.

☞ Nekonzistence (nejednotnost) a přeplácanost.

☞ Příliš pomalá doprava.

☞ Osiřelé stránky.

☞ Dlouhé, těžké stránky.

☞ Zastaralé informace.

☞ Nadužívání nejmodernějších technologií.

☞ Pohyb bez příčiny.

☞ Složitá URL.

☞ Nestandardní barvy odkazů.

☞ Používání rámů57.57http://www.useit.com/alertbox/9612.html


90Odkazy k technologiím na webu

☞ Weby W3C58, OASIS59.

☞ V češtině například Koskovy články60, W3Schools61

nebo tutoriály na Živě62.

☞ Knihy Jacoba Nielsena, Davida Siegela, Pavla Satrapyči Petra Staníčka.

58http://www.w3c.com59http://www.oasis-open.org/cover/sgml-xml.html60http://www.kosek.cz61http://www.w3schools.com/62http://www.zive.cz/H/Developerdaily/


91Budoucnost WWW (designu)

☞ ???

☞ Různá kódování (češtiny) −→ Unicode.

☞ Standardy W3C: SVG, XML/RDF, XLink, Xpointer,XTM, . . .

☞ Závislosti časové (SMIL?).

☞ Závislosti na výstupním zařízení (PDA a WAP[640 × 260], multimédia). XSL? XSL!

☞ Dynamické stránky (AJAX, Java, Flash, CGI skripty,výhody a nevýhody).

☞ DOM (Document Object Model).

☞ Napojení na databáze, PHP, ASP.

☞ VRML (Virtual Reality Markup Language),multimodalita.


92☞ Velikost dat (obrázky, rozlišení), rychlost linek.

☞ Worth world wide web: Dogma W463?

63http://www.pixy.cz/dogmaw41/


93Webmastering v praxi (Kacvinský)

☞ Technologie pro webové publikování

☞ Javaskriptové platformy

☞ AJAX, HTML5



☞ Agenda

☞ Design tištěného. Typografické tradice, cyklus přípravydokumentů

☞ Základy návrhu publikací knižního typu

☞ Sazba, základní pojmy, písma

☞ Typografická pravidla pro české texty

☞ Principy návrhu knih

☞ Sazba, sázecí systémy

☞ Základy typografie


95Abstrakt

V první části přednášky budou zmíněny základní zásadyčasto zcela absentující etapy přípravy dokumentů, a tonávrhu (knižních) dokumentů. Jádrem přednášky pakbude přehled typografických pravidel české sazby, které seustálily tradicí v průběhu minulých staletí, ale dnes příliščasto ctěny nejsou, zvláště v publikacích vznikajících nastole (DTP) příležitostných sazečů.„Rozhodně, prosím, opust’te vody nepoučených „nalévačů

textu“ či „myšařů“ a začněte vyrábět sazbu, již je nejenradost číst, ale na níž i oko se zalíbením spočinouti může.“

Michal Ptáček, 1995 (seriál v PC World)


96Principy návrhu knih

“No, Watson, this was not done by accident, but by design.”Sherlock Holmes

☞ Generace návrhářů, typografů samouků; samozvanýchexpertů.

☞ Nejčastější chyba: instantní řešení, absence návrhu(designu ).

☞ Schopnost odlišovat dobrý návrh od špatného.

☞ Černobílost pohledu, protikladnost požadavků, výjimky.„Šaty dělaj’ člověka“.

☞ Knižní design: co je kniha; specifika?

❑ Poctivost obalu (na rozdíl od časopisu).❑ Vazba po blocích (na rozdíl od vazby na stříšku).

☞ Forma

❑ Jednotnost.❑ Přenos informace (raison d’être).❑ Struktura (rejstřík, obsah).


97Jednotnost (makrotypografie)

☞ Pravidelné šedivé mřížky (citlivost oka).

☞ Nezbytnost bílých míst (horror vacui), nesou informaci(oddělují, spojují)!

☞ Dvoustránka (double-spread), vyváženost, příkladvýjimky: zkrácení dvoustránky.

☞ Jednotnost umístění stránky, prvků ve stránce.

☞ Řádkový rejstřík (protisk!).


98Jednotnost (mikrotypografie)

☞ Mezipísmenný proklad.

☞ Mezerování (data, zkratky, sazba telefonních čísel,mezivětné mezery).

☞ Zavěšená interpunkce.

☞ Odstavcová odrážka.

☞ „Zákon malých celých čísel“.


99Přenos informace

“Printing should be invisible.”M. Warde

☞ Spojitost nadpisu s následným textem.

☞ Spojitost popisky s tabulkou, obrázkem.

☞ Způsoby vyjádření vazeb, spojitostí, nebezpečí(duktus/velikost).

☞ Patkové, bezpatkové písmo. Střídmost.

☞ Čitelnost. Počet znaků na řádek.

☞ Velikosti stránek. Souhrn standardů – paskvil.

☞ Volba písem – střední výška písma.


100Struktura

☞ Obsah, seznamy tabulek, obrázků.

☞ Křížové odkazy, jednoúrovňové, dvojúrovňové(nepřímé).

☞ Rejstřík.

☞ Paginace, paginace vakátů.

☞ Spuštěné číslování na úvodních stránkách kapitol.

☞ Živá záhlaví, zápatí, co do nich (která úroveň nadpisů)?

☞ Zkracování nadpisů do záhlaví, číslování.


101Knižní design – praktické rady

Stránka/dvoustránka – maketa

☞ Rozměry stránky: standardní velikosti (řada A, B,kvarto, folio, . . . ).

☞ Aspect ratio: poměr šířky k výšce; důvody:

❑ stabilnost držení v ruce (těžiště blíže než délkadlaně);

❑ počet znaků na řádku 40–70.

☞ Okraje: 1:6:2, 1:8:3, ořez, odpad (montáž), vazba,avantgardní design, marginálie jako prvek designu.

☞ Umístění stránky na listu: světlost záhlaví, zápatí.

☞ Symetrie a asymetrie.

☞ Mřížkový design.


102Písmo a rozpal

☞ Písmo, základní parametr návrhu.

❑ Konotace – klasická (Antikva) × avantgardní(Grotesk) písma.

❑ Čitelnost (patkové × bezpatkové).❑ Velikost (mladí × staří čtenáři).❑ Rodina (Times × Palatino), anamorfní zmenšení

písma (na 24/25 ve vertikálním směru) v případěnutného přizpůsobení Computer Modern (Monotype8a), závisí na výstupním zařízení (kontrast mezitenkými a silnými liniemi).

❑ Základní velikost mezislovní mezery (řeky, řešenívýchodů kapitol).

❑ Jednotnost: řezy téže rodiny, i pro matematiku (zatímmalý výběr).

☞ Rozpal:

❑ 10/12, světlost, sazba na řádek;❑ typ textů (diplomová práce, inzerát).


103

Číslování a řazení v knize

i. patitul

ii. vakát

iii. titul

iv. katalogizace publikace, copyright, [tiráž]

v. předmluva k vydání

vi. obecná předmluva

vii. ditto, pokračování

viii. vakát

ix. obsah

x. ditto, pokračování

xi. slovníček


104xii. vakát

1 první kapitola

. . .

[tiráž]


105Dobrý návrh nek ři čí

“Good typography is not loud. A resonably appliedand readable type style is the first ingredient of goodcomposition. Today, asymmetric composition is certainlyfeasible, however, typography is intrinsically symmetrical.A text block without indents is unclear. Indents help thereader by reinforcing the logical order of the text. The besttypography is invisible to the reader and serves to transmitthe thoughts and intent of the author. Beautiful text, a textwell-composed, is legible. One of the highest virtues ofgood typography is its subtle elegance. It is not the dutyof the typographer to consciously display or emulate thestyle of current trends, nor to reflect the spirit of the times.Typography must be itself, it must be pleasing to the eyeand not tiring. Good typography has absolutely nothing todo with remarkable or exotic type styles. This is the opinionof amateurs. The essence of letterform is not modernity,but readability.”

Jan Tschichold


106Základní typografické pojmy – osnova

☞ Tradice, omezující podmínky, v designu explicitněnespecifikované.

☞ Normy (ON 88 2503,. . . ) a jejich respektování.http://www.typotext.cz/radce7b 1.html64

☞ Znaky.

☞ Písmová osnova.

☞ Kresba písmového znaku.

☞ Měření písma.

☞ Typ písma.

☞ Rodina písma.

☞ Klasifikace tiskových písem.64http://www.typotext.cz/radce7b 1.html

Petr Sojka: Elektronická příprava dokumentů8./9. přednáška PB029, 8.–15. 11. 2011, Brno c© Petr Sojka, 2000–2011

107☞ Fonty.

☞ Mezislovní mezera.

☞ Vyplňování řádků.

☞ Řádkový proklad.

Petr Sojka: Elektronická příprava dokumentů8./9. přednáška PB029, 8.–15. 11. 2011, Brno c© Petr Sojka, 2000–2011

108Základní pravidla sazby – pokra čování,osnova

☞ Odstavec, odstavcová odrážka.

☞ Zarovnaný text.

☞ Nezarovnaný text.

☞ Dělení slov.

☞ Znaménka.

☞ Čísla a zkratky.

☞ Hladká sazba.

☞ Smíšená sazba.

☞ Korekturní znaménka.

☞ Typografické pravítko.


109☞ Příprava textů, rukopis.

☞ Sazební obrazec.

☞ Formáty papíru, počítání rozsahu sazby.

☞ Korekturní znaménka.

☞ Pro detaily předchozích přednášek viz BeranůvAktualizovaný typografický manuál65, příslušné ČSN,Ptáčkův text v PC Worldu 1994.

65http://www.dtpstudio.cz/obchod/promoakce/typomanual.htm



☞ Sazba, sázecí systémy. Co je TEX?

☞ Vznik a vývoj TEXu.

☞ Základní principy, řádkový a stránkový zlom.

☞ Základy digitální typografie, užití pro elektronicképublikování. Pravidla sazby.

☞ Vše, co jste chtěli vědět o TEXu, ale báli jste se zeptat.


111Motivace

„Dokumenty v TEXu jsou mstou akademiků studentům,takže přežijí do té doby, dokud budou přežívat zatvrzelci

v akademických sborech (řádově několik tisíciletí).“Jiří Hlavenka, (1964– )

:-( Naproti tomu:„Rozhodně, prosím, opust’te vody nepoučených

’nalévačů

textu‘ či’myšařů‘ a začněte vyrábět sazbu, již je nejen

radost číst, ale na níž i oko se zalíbením spočinouti může.“Michal Ptáček


112Typografické tradice – řemeslo a um ění

☞ „Dnes, kdy je typografie neprávem potlačována a kdyse typografem cítí každý, kdo dokáže vytvořit napočítači stránku textu, si vám dovolíme přiblížit dobu,kdy typografie byla řemeslem a uměním.“

☞ „Budiž světlo!“

☞ Učební doba čtyřletá až pětiletá.

☞ Po staletí používané zvyky se staly tradiční, vytvořenínárodních typografických zvyklostí. (Vojtěch Preissig1873–1944, Oldřich Menhart 1897–1962, OldřichHlavsa 1909–, František Muzika), Muzeum knihy veŽd’áru nad Sázavou.

“Those old guys stole all our best ideas.”Frederick Goudy


113Digitální revoluce a její důsledky

pro černé řemeslo

☞ Digitální revoluce koncem sedmdesátých let.

“Mathematics books and journals do not lookas beautiful as they used to.”

Donald Ervin Knuth66

☞ Počítač: od imitace psacího stroje po sázecí systémDTP.

☞ Typografie matematiky, matematika/informatika sloužítypografii: místo metalurgie informatika, matematickýpopis křivek (kubické splajny v programu pro návrhpísem METAFONT).

“Go forth and create masterpieces of electronicpublishing art.”

(paraphrase of Donald Knuth [TEXbook, p. 303])

66http://www-cs-faculty.stanford.edu/ knuth/


114Sázecí systémy

“GUIs normally make it simple to accomplish simpleactions and impossible to accomplish complex actions.”

Doug Gwyn

☞ Sazba: realizace návrhu nad značkovanými daty.

☞ WYSIWYG (WYSIAWYG): InDesign, Pagemaker(Adobe67), QuarkXpress (Quark68), 3B2 (AdventPublishing69).

☞ Dávkové systémy: TEX70, troff/groff/nroff/runoff, Lout71

(nutnost kontroly návrhu dokumentů ve finální podobě,ne jen na obrazovce).

☞ Textové procesory Word, AmiPro, . . . sem de factonepatří (nedovedou některé docela zásadní potřebysazeče – nedělitelná roztažitelná mezera, fixace zlomupro různá výstupní zařízení apod.).

67http://www.adobe.com68http://www.quark.com69http://www.3b2.com70http://www.cstug.cz/71http://snark.ptc.spbu.ru/ uwe/lout/


115Programování sazby – T EX

☞ Algoritmy počítačové sazby v sázecím systému TEX

➀ Zlom řádků.➁ Zlom stránky.➂ Dělení slov.➃ Umist’ování obrázků, viditelnost.➄ Umist’ování poznámek pod čarou.➅ Sazba matematických výrazů:

√

√

√

√

(

∫

∞

0

√

x2

2+ 1

)

☞ $$\sqrt{\left(\int_0^\infty\sqrt{\frac{x^2}{2}}+1\right)}$$

☞ (Makro)programování sazby, otevřenost systému.

☞ OSS, CSTUG72, CTAN73, pros & cons.

72http://www.cstug.cz/73http://www.cstug.cz/ctan?


116Co je TEX?

☞ Sázecí autorský systém.

☞ Programovatelný, t.j. s vlastním makrojazykem(s vyjadřovací silou Turingova stroje – byl v němnapříklad pro zábavu implementován interpret jazykaBASIC); výhoda pro cca 2 % populace.

☞ Dávkový: ze vstupu $c=\sqrt{a^2+b^2}$

dostaneme c =√

a2 + b2: http://tex.mendelu.cz74,http://sciencesoft.at/index.jsp?link=latex75.

☞ Otevřený/rozšiřitelný.

☞ Portabilní (od Atari či dvoudisketového PC XT po Cray).

☞ Stabilní ($256 za nalezení chyby), verze −→ π.

☞ Dobře dokumentovaný (vyšel knižně).74ukázka 175ukázka 2


117☞ Volně šiřitelný (vývoj hrazen granty).

☞ S výstupem nezávislým na výstupním zařízení.

☞ Jednoduchý základ pro sazbu: model box, glue, penalty.

☞ “A computer program of which a professor of computerscience might be proud of.” (DEK)

☞ Optimalizovaný, vysoce efektivní, využívajícínejrychlejší algoritmy své doby – při vývoji nalezenynové informatické metody a datové struktury (trie).


118Co TEX není?

❑ Editor.

❑ Program na grafiku (na to slouží komplementárníprogram METAFONT přibližně stejné velikosti).

❑ WYSIWYG (nadstavby jako LyX existují).

❑ Rychle naučitelný (strmější učicí křivka).


119Vznik a vývoj T EXu

❑ 1977, korektura The Art of Computer Programming.

❑ 1978, první verze; TEX82, METAFONT84; osmibitovýTEX 3 (1990); rozšiřování o výstupní formáty(PostScript).

❑ 1992: zmrazení dalšího vývoje, pevný bod, jen opravychyb.

❑ Vznik makrobalíků.

❑ Téměř žádný marketing, uživatele sdružuje TUG alokální sdružení uživatelů – LUG.


120TEX dnes: pro klasickou publika ční činnost

❑ Zejména pro matematiku a všude tam, kde je možnáalgoritmizace zpracování ($$).

❑ Velká nakladatelství technické literatury a časopisůSpringer-Verlag, Elsevier Publishers, Kluwer sázív TEXu časopisy, sborníky.

❑ Databázové publikování: Dopravní podnik města Brna(tabulky jízdních řádů pro zastávky, řidiče, dispečery),rozvrhy FI MU, studijní program FI MU přímoz databáze informačního systému MU.

❑ Slovníky (LEDA76) a první díl encyklopedie (Diderot77).

❑ Jádro TEXu či jeho algoritmy v sázecích systémech3B2, InDesign, troff, Lout či v textovém procesoru Word.

76http://www.leda.cz77http://www.diderot.cz


121TEX dnes I: PDF

❑ Nový formát pro elektronické knihy fy Adobe.

❑ Otevřenost TEXu: pdfTEX78 Hàn Thế Thành.

❑ Kalkulačka v PDF (+JavaScript): dříve než Adobe.

❑ AcroTEX79.

❑ PDF není až tak portabilní jak říká název – místo proDVI3?

78http://www.cstug.cz/pdftex/79http://www.math.uaktorn.edu/˜dpstory/acrotex.html


122TEX dnes II: Internet (HTML/XML/MATHML)

❑ HyperTEX (Los Alamos archiv80).

❑ LATEX2HTML81, konvertor z nejznámějšího makrobalíku

do HTML v Perlu.

❑ TEX4ht, nebo jiné mnohé komerční implementace TEXus alternativním výstupem do HTML jako TEXpider

82

(MicroPress).

❑ eeTEX (pro přímou sazbu SGML).

❑ TTH83: konvertor TEXu do HTML.

❑ IBM techplorer Hypermedia Browser84 – plug-in doNetscape a Internet Exploreru.

❑ MathType85 pro psaní matematiky ve Windows.80http://xxx.lanl.gov81http://www-texdev.mpce.mq.edu.au/l2h/mathdocs/mathdocs/82http://www.micropress-inc.com/webb/wbstart.htm83http://hutchinson.belmont.ma.us/tth/84http://www-4.ibm.com/software/network/techexplorer/85http://www.mathtype.com


123❑ TEXML

86 (Doug Lovell, IBM): XML reprezentace TEXovésyntaxe.

❑ WebEQ87: sada programů včetně Javovského apletupro rastrování matematiky.

❑ Texi2html88: konverze Texinfo formátu do html.

❑ Word2TeX89: konfigurovatelný konvertor z rozšířenéhoměnícího se formátu do stabilního.

❑ ASTER90 systém pro čtení LATEXového zápisu adokumentů pro nevidomé

❑ a mnoho dalších . . .

86http://www.alphaWorks.ibm.com/formula/texml/87http://www.webeq.com/88http://www.mathematik.uni-kl.de/ obachman/Texi2html/89http://www.word2tex.com/90http://www.cs.cornell.edu/Info/People/raman/aster/demo.html


124TEX dnes III: Java, Unicode, OpenType

❑ NTS: reimplementace TEXu bez optimalizací v Javě(Karel Skoupý, FI MU, nyní ÚVT MU), a následnývýzkum.

❑ PDF prohlížeč v Javě91 → vysoce portabilní prvotřídněvysazené dokumenty s minimem přenosu datv dohledu.

❑ Omega92: mnohem více než šestnáctibitový TEX;konverze LATEXu do MathML.

❑ PATLIB93, opatgen, upatgen, . . .

❑ XeTEX94, viz sobotní přednáška CSTUG95.

91http://www.adobe.com/products/acrviewer/main.html92http://omega.cse.unsw.edu.au:8080/index.html93http://www.fi.muni.cz/˜xantos/PATLIB/94http://scripts.sil.org/xetex95http://bulletin.cstug.cz/pozvanka/


125Perspektivy T EXu a jeho následníků

v tomto tisíciletí

❑ TEX pevný bod v chaosu postmoderního světa?

❑ Interaktivní dokumenty: otevřenost umožňuje rychlereagovat na nové formáty a standardy.

❑ Rozšiřování požadavků na autorské systémy.

❑ Bude se opakovat historie s tím, že v TEXové komunitěnavržené a vyzkoumané postupy, algoritmy a přístupyse stanou základem většiny komerčních aplikacív oblasti DTP?

❑ embedded systémy [části] TEXu součástí většíchprojektů.

Petr Sojka: Elektronická příprava dokumentů11. přednáška PB029, 29. 11. 2011 c© Petr Sojka, 2000–2011

126Jak se na to p řipravit?

❑ Instalovat si TEX a učit se ho:

❑ učit se, učit se, učit se.

❑ Stát se členem sdružení CSTUG96 a účastnit se aktivnějeho akcí a projektů.

❑ Úcta k tradicím, osvěta.

❑ Další studium: www.sazba.cz97 (Kapr: Sto a jedna větao knižní úpravě), www.typo.cz98 (písma, PostScript, . . . ),Beranův Typografický manuál99.

“A man who would letterspace lower case would stealsheep.”

Frederick Goudy, 1894–1945

“If this wisdom needs updating, it is chiefly to add thatA woman who would . . . ”

Robert Bringhurst96http://www.cstug.cz97href://www.sazba.cz98href://www.typo.cz99http://www.dtpstudio.cz/obchod/promoakce/typomanual.htm


127Sazba – Algoritmy zlomu a formáty písem

☞ Digitální formáty písem

☞ Algoritmy zlomu

☞ hz rozšíření


128Digitální formáty písem

☞ Formáty METAFONT, PostScript a TrueType(OpenType).

☞ Princip oddělení metrické informace potřebné při sazběod informace o tvarech znaků.

☞ Metrické informace: rozměry jednotlivých znaků,mezipísmenný kerning, ligační programy. Formáty TFMa AFM, program afm2tfm.

☞ Tvary znaků jsou popsány jako bitmapy (optimalizaceznaků pro obrazovku, PostScript Type 3) nebo pomocíkřivek obrysů či per. PostScript Type1 používá propopis obrysů kubické Bézierovy křivky, formát TrueTypevýpočetně méně náročné kvadratické Bézierovy křivkya METAFONT parametrická pera.

☞ Detailní český popis digitálních formátů písem jek nalezení v DP PřF MU Pavla Janíka a DP FI MU JanaVidy.


129Algoritmy řádkového a stránkového zlomu

☞ Algoritmus First fit: sazba po řádcích, výběr prvníhomožného zlomu. Nenáročné na výpočetní kapacitu.

☞ Algoritmus Best fit: zlom po řádcích, výběr nejlepšíhozlomu na řádku bez přihlédnutí k předchozímmožnostem. Míra optimality řádku je měřena mírouodchylky od ideální velikosti mezislovní mezery. V TEXuje míra škaredosti (badness) 100 · |r|3, kde r je poměrrozdílu přirozené a požadované délky řádku ku součturoztažitelných a stlačitelných složek lepidla (glue).

☞ Algoritmus Optimum fit: optimalizace zlomu v rámcicelého odstavce naráz s využitím modelu ‘box, glue apenalty’. Úloha podobná hledání nejkratší cesty v grafu,každé cestě odpovídá škaredost, která se minimalizuje.Stačí zvažovat pouze možnosti hezčí než zadanátolerance.


130Parametry algoritmu řádkového zlomu T EXu

☞ Až tři průchody: první bez dělení slov, limit škaredosti je\pretolerance . Pak jsou rozdělena všechna slovav odstavci a proveden druhý pokus s limitem škaredosti\tolerance .

☞ Pokud je nastaven registr \emergencystretch nakladnou délku (zvětšení roztažitelnosti mezislovnímezery) a jde o TEX3.0 či vyšší, provede se třetí pokuso zlom s těmito limity roztažitelností.

☞ Další parametry ovliviňující algoritmy zlomu: řádkového:\adjdemerits , \linepenalty , \hyphenpenalty ,\exhyphenpenalty , \looseness a stránkového:\interlinepenalty , \clubpenalty ,\widowpenalty , \brokenpenalty , . . .

☞ Ladění parametrů zlomu pro daný projekt (Diderot).

☞ Detailní český popis variant algoritmů zlomu jek nalezení v DP FI MU Jana Pazdziory.


131hz-algoritmus

☞ Motivace: Gutenbergova 42řádková Bible měla 290písmen abecedy proměnné šířky, stejná mezislovnímezera při sazbě do bloku.

☞ Principy: kerning, scaling, composing.

☞ URW, Karrow, Zapf, neúspěch (fonty).

☞ Implementace v pdfTEXu (Thành).

☞ Implementace v InDesignu (Karrow).

☞ Detailní český popis modifikací zlomového algoritmupísem je k nalezení v DP Mirky Misákové a dizertaciHàn Thế Thànha.


132Implementace algoritmu d ělení slov

☞ Dizertace a program PatGen Franka Lianga.

☞ Princip soutěživých vzorů, nezávislost na jazyce.

☞ Vytváření a generování vzorů.

☞ OPatGen, knihovna PatLib, upatgen.

☞ Detailní popis algoritmu dělení slov je k nalezení v DPFI MU Davida Antoše.


133Principy makroprogramování

☞ Makrojazyk TEXu: složité sázecí postupy skládanéz 300 základních příkazů (primitiv).

☞ (Ne)vhodnost makroprogramování (versus detailníznačkování), minimalizace vstupu.

☞ Input procesor: řádky nezávislé na operačním systému.

☞ Token procesor.

☞ Expand procesor.

☞ Hlavní procesor.

☞ Detaily v češtině jsou v Olšákově TeXbooku naruby(TBN).


134Makrobalíky

☞ Znovuobjevování kola většinou není potřeba: tisícebalíků maker na CTAN (Comprehensive TEX ArchiveNetwork).

☞ Katalog balíků na CTAN.

☞ Příklady balíků, kniha LATEX Companion.

☞ DVD s distribucí TEXlive 2011.


135InDesign

☞ Komerční program firmy Adobe pro WYSIWYGpočítačovou sazbu.

☞ Zlomový algoritmus (převzat z TEXu) s pomocí DavidaKarrowa (URW).

☞ Škálování znaků.

☞ Optický proklad (David Kindersley: Optical letterspacing for new printing systems, 1976).

☞ Příklady zlomu a chyb.100

100http://www.fi.muni.cz/˜sojka/PB029/xznamen/


136Jazyky pro popis stránky

☞ PDL – jazyk pro popis stránky, kombinace textus grafikou.

☞ Formát firmy Adobe (Geschke, Warnock, 1982, AppleLaserwriter, Aldus Pagemaker), nyní de facto standard.

☞ Linotronic 1986, svět osvitových jednotek (vysokérozlišení).

☞ Vývoj/podpora – Level1, Level2, (Level3).

☞ Návazné/odvozené/související produkty/standardy:PDF, písma Type1 (vektorový popis), Type3 (bitmapy).

☞ Nově OpenType101.

101http://www.microsoft.com/typography/developers/opentype/default.htm


137PostScript – vlastnosti jazyka

☞ Nezávislost na zařízení (různé rozlišovací schopnostivýstupních zařízení).

☞ Souřadné systémy, prostor uživatele, prostor zařízení.

☞ Interpreter – PostScriptový RIP, hardwarový nebosoftwarový (Ghostscript, Ghostview).

☞ Zásobníkový programovací jazyk, postfixový zápisv reverzní polské notaci.

☞ Podpora různých barevných prostorů (CMYK, RGB),direktní barvy.

☞ Nezávislost na platformě – vytváření/generováníPostScriptu aplikacemi.


138Postscript – p říklad

1 %!PS-Adobe-2.02 %%Title: Priklad Postscript programu3 /Helvetica-Bold findfont4 50 scalefont setfont5 0 0 moveto 200 0 lineto6 200 100 lineto 0 100 lineto7 closepath 0.8 setgray fill8 0 setgray9 30 40 moveto

10 (FI MU)show11 showpage

☞

FI MU

Petr Sojka: