Lidé komunikují prostřednictvím dokumentů připravovaných elektronicky.

PB029 Elektronická příprava dokumentů Anyone who would letterspace the lowercase would steal sheep. Frederick Goudy (1865 1947), when looking on a prize winner certificate You cannot not communicate. Paul Watzlawick (1921 2007), in Pragmatics of Human Communication Lidé komunikují prostřednictvím dokumentů připravovaných elektronicky. Petr Sojka PB029 Od autora ke čtenáři podzim 2017 1 / 210

PB029 Elektronická příprava dokumentů PB029 Elektronická příprava dokumentů Petr Sojka podzim 2017 Petr Sojka PB029 Od autora ke čtenáři podzim 2017 2 / 210

Osnova dnešní přednášky a demopřednášky Agenda Možnost získání prémiových bodů v soutěži o nalezení chyb na novém webu FI. Rozcvičky, velká půlsemestrální vnitrorozcvička příští týden. Prémiové úkoly, program děkana či rektora, bakalářské, diplomové či doktorské práce,... ). Přednáška Webový design. Kuchařka webového designu (Jan Řezáč). Dogma W4D. Specifika návrhu webových stránek a publikování na Internetu. Technologie a platformy pro webový design ve třetím tisíciletí: CSS, XSL, XSLT, XSL-FO... Demopřednáška Jazyky CSS a JavaScript Petr Sojka PB029 Design knih podzim 2017 107 / 210

WWW design I Já věřím tomu, co je vytištěno černou barvou na papíře. Média jsou pro okultisty. František Štorm, 1. střešovická písmolijna Design dokumentu je závislý na přenosovém médiu (pravidla pro knižní design pro WWW design vesměs neplatí). Nutno proto mít různé verze dokumentů pro různá média. Petr Sojka PB029 Design knih podzim 2017 108 / 210

WWW design II Specifika WWW: čtení na obrazovce počítače (poměr stran, rozlišení), různé oči (prohlížeče), různá viditelnost/osvětlení (tloušťka/rychlost linky síťového připojení), snadnost vyjádření struktury, vazeb (hypertext, nelineárnost). Informační prezentační web. Petr Sojka PB029 Design knih podzim 2017 109 / 210

Kuchařka dobrého WWW designu (Satrapa) Web není WYSIWYG (návrhář nezná předem čtenářova nastavení). Klíčem k úspěchu je originální obsah. Vytvář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 funkční zrak. Většina skvělých triků není až tak skvělá, zmenšují čtenářskou obec. Důležité je časování, čtenář a jeho konektivita se mění, špičkové věci rychle zastarávají. Dodržování standardů statistika není argument pro nekorektní stránky. Uživatelé mají rádi rychlé stránky. Kontrolujte se. Petr Sojka PB029 Design webu podzim 2017 110 / 210

Kuchařka dobrého WWW designu (Řezáč) https://houseofrezac.com/grafika Lidé chodí na weby kvůli obsahu a ne grafice. Web musí respektovat principy grafického designu. Web musí respektovat specifika svého média. Web ostrý jako břitva. Petr Sojka PB029 Design webu podzim 2017 111 / 210

Desatero WWW designu I 1. Thou shalt put no page element before Content, for Content is thy lord and It is a jealous lord. 2. Thou shalt make thy webpages to load quickly. 3. Thou shalt respect the trademarks, copyrights, and reputation of thy neighbor. 4. Thou shalt use graphics and animations that are relevant and meaningful, and thou shalt not scatter them carelessly as birds scatter seeds on hard ground. Petr Sojka PB029 Design webu podzim 2017 112 / 210

Desatero WWW designu II 5. Thou shalt not resize thy neighbor s browser window nor shall thou disrupt the function of thy neighbor s "back" button nor shall thou force text to a size that is unreadably small on thy neighbor s 1280 1024 display. 6. If thou art inspired to create a webpage of lasting value, then thou shalt make it in such a manner so that thy neighbor may bookmark or print it. Twould be even better if he could do both. 7. Thou shalt make the elements which must be seen and comprehended first so that they load first. Petr Sojka PB029 Design webu podzim 2017 113 / 210

Desatero WWW designu III 8. Thou shalt use text for text and graphics for graphics and never graphics where text is appropriate, under threat of banishment to the pit of darkness where searches and indexes are unknown. 9. Thou shalt make thy pages to be both standards compliant and backwards compatible, but where backward compatibility shall cause the page to load slowly, thou shalt leave those with weak and old browsers in the wilderness they have chosen for their home. 10. Thou shalt not steal bandwidth by including images or other objects housed on thy neighbor s website on thy own pages, nor shalt thou place thy neighbor s website in a frame on thy page. In all things remember to treat thy neighbor s website as thou wouldst have him or her treat thine. Petr Sojka PB029 Design webu podzim 2017 114 / 210

Chyby návrhu WWW stránek I 1. Chybějící navigační podpora. 2. Nekonzistence (nejednotnost) a přeplácanost. 3. Příliš pomalá doprava. 4. Osiřelé stránky. 5. Dlouhé, těžké stránky. 6. Zastaralé informace. 7. Nadužívání nejmodernějších technologií. 8. Pohyb bez příčiny. Petr Sojka PB029 Design webu podzim 2017 115 / 210

Chyby návrhu WWW stránek II 9. Složitá URL. 10. Nestandardní barvy odkazů. 11. Používání rámů. Petr Sojka PB029 Design webu podzim 2017 116 / 210

Dogma WWWW: Worth world wide web 1. 13 zásad pro vytváření hodnotného webu: Dogma W4? 2. Dodržení těchto postupů má zajistit všeobecně přístupné, bezbariérové a přehledné dokumenty. 3. Užití pro zápočtový dokument. Petr Sojka PB029 Design webu podzim 2017 117 / 210

CSS kaskádové styly I The Web is Ruined and I Ruined It! David Siegel 1. Informační web výhody strikního oddělení obsahu a formy: CSS Zen Garden 2. Kaskádové styly. CSS, CSS2 (1998), CSS3. 3. Jazyk stylů má formální gramatiku, proto je možná validace CSS. Petr Sojka PB029 Design webu podzim 2017 118 / 210

Zpracování dokumentu s kaskádovými styly I 1. Parsing a vytvoření stromu dokumentu. 2. Identifikace výstupního zařízení. 3. Stažení všech stylů souvisejících s vybraným výstupním zařízením. 4. Přiřazení hodnot všem vlastnostem výstupního zařízení, použitím pravidel dědičnosti a kaskádování. 5. Pravidlo: selektor a deklarace. BODY { font-size: 10pt } H1 { font-size: 120% } Petr Sojka PB029 Design webu podzim 2017 119 / 210

Zpracování dokumentu s kaskádovými styly II 6. Kaskáda pravidel: autor (ve stránce), uživatel, uživatelův agent (nejnižší váha). 7. Nejvyšší váhu má implicitně autor, uživatel ji ale může přebít (!important). Petr Sojka PB029 Design webu podzim 2017 120 / 210

Vytváření kaskádového stylu I 1. Koskův článek o dynamickém HTML. 2. Kuchařka Dave Raggetta. 3. Příklady webů protagonistů W4D, např. pana Staníčka. Petr Sojka PB029 Design webu podzim 2017 121 / 210

Příklad CSS2 I BODY { padding: 8px; line-height: 1.33 } H1 { font-size: 2em; margin:.67em 0 } H2 { font-size: 1.5em; margin:.83em 0 } H3 { font-size: 1.17em; margin: 1em 0 } H4, P, BLOCKQUOTE, UL, FIELDSET, FORM, OL, DL, DIR, MENU { margin: 1.33em 0 } H5 { font-size:.83em; line-height: 1.17em; margin: 1.67em H6 { font-size:.67em; margin: 2.33em 0 } H1, H2, H3, H4, H5, H6, B, STRONG { font-weight: bolder } BLOCKQUOTE { margin-left: 40px; margin-right: 40px } I, CITE, EM, VAR, ADDRESS { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } Petr Sojka PB029 Design webu podzim 2017 122 / 210

Příklad CSS2 II BIG { font-size: 1.17em } SMALL, SUB, SUP { font-size:.83em } SUB { vertical-align: sub } SUP { vertical-align: super } S, STRIKE, DEL { text-decoration: line-through } HR { border: 1px inset } OL, UL, DIR, MENU, DD { margin-left: 40px } OL { list-style-type: decimal } OL UL, UL OL, UL UL, OL OL { margin-top: 0; margin-bottom: 0 } U, INS { text-decoration: underline } CENTER { text-align: center } BR:before { content: "A" } Petr Sojka PB029 Design webu podzim 2017 123 / 210

Příklad CSS2 III /* An example of style for HTML 4.0 s ABBR/ACRONYM elements */ ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } A[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: avoid } BLOCKQUOTE, PRE { page-break-inside: avoid } UL, OL, DL { page-break-before: avoid } } @media speech { H1, H2, H3, Petr Sojka PB029 Design webu podzim 2017 124 / 210

Příklad CSS2 IV PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 } H1 { pitch: x-low; pitch-range: 90 } H2 { pitch: x-low; pitch-range: 80 } H3 { pitch: low; pitch-range: 70 } LI, DT, DD { pitch: medium; richness: 60 } DT { stress: 80 } EM { pitch: medium; pitch-range: 60; stress: 60; richness: STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: DFN { pitch: high; pitch-range: 60; stress: 60 } S, STRIKE { richness: 0 } I { pitch: medium; pitch-range: 60; stress: 60; richness: B { pitch: medium; pitch-range: 60; stress: 90; richness: U { richness: 0 } A:link { voice-family: harry, male } A:visited { voice-family: betty, female } A:active high } } { voice-family: betty, female; pitch-range: 80; pitch: x Petr Sojka PB029 Design webu podzim 2017 125 / 210

CSS rozlišení vs. hardwarové rozlišení Hardwarový CSS pixel v responzivním designu @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {... } Petr Sojka PB029 Design webu podzim 2017 126 / 210

XSL, XSLT, XSL-FO Use CSS when you can, use XSL when you must. W3C 1. Proč XSL? CSS nebo XSL? 2. XSLT transformační jazyk XSL. 3. XSL-FO formátovací objekty XSL. Petr Sojka PB029 Design webu podzim 2017 127 / 210

Big transformation picture (XSL, XSLT, XSL-FO) Petr Sojka PB029 Design webu podzim 2017 128 / 210

Příklad vlastního XML jazyka <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="seznam-software.xsl"?> <programs title="programy" xmlns="" xsi:nonamespaceschemalocation="seznam-software.xsd" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"> <program-group name="ghostscript"> <program> <name>ghostscript</name> <filename>gs904w64.exe</filename> <version>9.04 (x86_64)</version> <homepage>http://www.ghostscript.com/</homepage> <description>softwarový renderer PostScript souborů. </program>... </program-group> </programs> Petr Sojka PB029 Design webu podzim 2017 129 / 210

Příklad schématu dat seznam-software.xsd <xsd:schema> <xsd:element name="programs"> <xsd:complextype> <xsd:choice minoccurs="0" maxoccurs="unbounded"> <xsd:element name="program" type="program-type"/> <xsd:element name="program-group" type="program-group-type"/> </xsd:choice> <xsd:attribute name="title" type="xsd:string" use="required"/> </xsd:complextype> </xsd:element> <xsd:complextype name="program-type"> <xsd:all> <xsd:element name="name" type="xsd:string"/> <xsd:element name="filename" type="xsd:string"/> <xsd:element name="version" type="xsd:string" minoccurs="0"/> <xsd:element name="homepage" type="xsd:string" minoccurs="0"/> <xsd:element name="description" type="xsd:string" minoccurs="0"/> </xsd:all> </xsd:complextype> Petr Sojka PB029 Design webu podzim 2017 130 / 210

Příklad transformace <xsl:template match="name"> <h3><span class="program-name"><xsl:value-of select="text()"/></span></h3> </xsl:template> <xsl:template match="filename"> <em>instalační soubor:</em> <xsl:text> </xsl:text> <a> <xsl:attribute name="href"> <xsl:for-each select="ancestor::program-group"> <xsl:value-of select="@name"/>/</xsl:for-each> <xsl:value-of select="../name"/>/<xsl:value-of select="../filename"/> </xsl:attribute> <xsl:choose> <xsl:when test="boolean(../filename/text())"> <xsl:value-of select="../filename"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="../name"/> </xsl:otherwise> </xsl:choose> </a> <br/> </xsl:template> Petr Sojka PB029 Design webu podzim 2017 131 / 210

XSL: EXtensible StyleSheet Language I 1. validace dle XML Schema: xmllint --noout -- schema seznam-software.xsd programy.xml 2. transformace XML dokumentu pomocí stylesheetu: xsltproc seznam-software.xsl programy.xml 3. více viz http://www.w3schools.com/xsl/ a na cvičení Petr Sojka PB029 Design webu podzim 2017 132 / 210

XSL-FO I 1. Speciální značkovací jazyk pro popis vzhledu dokumentů. 2. Dokument označkovaný XSL-FO pak většinou konvertován do PDF FOP procesorem. saxon -o clanek.fo clanek.xml clanek.xsl xep -fo clanek.fo 3. http://www.w3schools.com/xslfo/ 4. http://www.kosek.cz/xml/xslt/xsl-fo.html Petr Sojka PB029 Design webu podzim 2017 133 / 210

Odkazy k technologiím na webu I 1. Weby W3C, OASIS, W3Schools. 2. V češtině například Koskovy články. 3. Knihy Jacoba Nielsena, Davida Siegela, Pavla Satrapy či Petra Staníčka. Petr Sojka PB029 Design webu podzim 2017 134 / 210

Budoucnost WWW designu I 1.??? 2. Podpora mobilních zařízení, responzivní design, multimodalita, JavaScript. 3. Standardy W3C: CSS3, XSL, XSLT,... 4. Různá kódování (češtiny) Unicode. 5. Závislosti časové (SMIL?). 6. Závislosti na výstupním zařízení (640 260 4K, multimédia)! 7. Velikost dat (obrázky, rozlišení), rychlost linek. 8. Push pull. Petr Sojka PB029 Design webu podzim 2017 135 / 210