Download
1 / 53
530 likes | 694 Views
Aplikace XML pro Internet. Kateřina Ježková, Jaroslav Ráček. Osnova semináře. Co je to XML Kontrola dokumentu pomocí DTD Styly pro XML (CSS a XSLT) WML XHTML MathML. Standard XML.
E N D
Aplikace XML pro Internet Kateřina Ježková, Jaroslav Ráček
Osnova semináře • Co je to XML • Kontrola dokumentu pomocí DTD • Styly pro XML (CSS a XSLT) • WML • XHTML • MathML
Standard XML • XML (eXtensible Markup Language) vznikl v devadesátých letech jako podmnožina jazyka SGML (Standard Generalized Markup Language) • Ze SGML byla vyčleněna jeho nejpoužívanější část • Syntaxe XML je přísnější než syntaxe obecnějšího SGML, což umožňuje snazší vývoj aplikací • Jako znaková sada je v XML podporována 32bitová ISO 10646, která bez problémů pokrývá všechny znaky současných jazyků
Zásady pro tvorbu XML dokumentů • Nekřížit tagy • Uzavírat párové tagy Párový tag: <x> … </x> Nepárový tag: <y/>
DTD • Při dodržení syntaktických pravidel, může být obecný XML dokument vytvořen za použití libovolných elementů • Vznikají tak nové značkovací jazyky, které jsou podmnožinami obecnějšího XML. • Jazyk může být popsán pomocí tzv. Definice Typu Dokumentu (DTD), která obsahuje sadu povolených elementů, jejich atributů a popis vzájemných vztahů, v nichž mohou být jednotlivé elementy použity.
Výhody používání DTD • Strukturu můžeme kontrolovat pomocí parseru. • Pro spoustu standardních DTD existuje množství již vytvořených nástrojů, které můžeme pro daná DTD s úspěchem použít.
Struktura DTD Jazyk, v němž jsou jednotlivá DTD psána, je rovněž odvozen od XML. Vlastní DTD pak lze rozdělit do čtyř základních částí. Jsou to: deklarace elementů deklarace atributů deklarace entit deklarace notací
Deklarace elementu <!ELEMENT <<název_elementu>> obsah_elementu>>> Příklad: <!ELEMENT clanek (nazev, autor?, odstavec+)> <!ELEMENT nazev (#PCDATA)> <!ELEMENT autor (#PCDATA)> <!ELEMENT odstavec (#PCDATA)>
Deklarace atributů <!ATTLIST <<název_elementu>> <deklarace_atributů>>> Příklad: <!ATTLIST clanek autor CDATA jazyk MNTOKEN zarovnani(vlevo|nastred|vpravo) ”vlevo”> Užití: <clanek autor=”Jaroslav Ráček” jazyk=”cz” zarovnani=”nastred”> … </clanek>
Způsoby připojení DTD k dokumentu • <!DOCTYPE clanek SYSTEM ”clanek.dtd”><clanek>...</clanek> • <!DOCTYPE clanek [<!ELEMENT clanek ...> <!ELEMENT ... >... ]><clanek>...</clanek>
Styly a XML Styly se používají v případě, kdy chcemeoddělit obsah dokumentu od jeho vzhledu. • Více stylů pro jeden dokument • Jeden styl pro více dokumentů
Styly a XML Stylových jazyků, které lze použit pro formátování XML dokumentů je poměrně velké množství. Vedle CSS (Cascading Style Sheets) a XSL (eXtensible Stylesheet Language) například ještě DSSSL nebo FOSI.
Připojení stylu k dokumentu <?xml-stylesheethref=”<<URI>>”type=”<<typ>>”?> Příklad: <?xml version=”1.0” encoding=”utf-8”?><?xml-stylesheet href=”styl.css” type=”text/css”?><dokument> ... </dokument>
CSS Cascading Style Sheets = kaskádové styly JavaScript + CSS = DHTML CSS nejlépe podporuje IE 6
Způsob zápisu CSS (1) 1.přímý styl (in-line) - zápis stylu přímo u formátovaného elementu obecně: <tag style="vlastnost1:hodnota1[;hodnota2][další hodnoty]; vlastnost2:hodnota2 ... "> příklad: <p style="color:blue; background-color:yellow; font-size:12pt"> Modrý text na žlutém pozadí velikosti 12, platí pouze pro tento text</p>
Způsob zápisu CSS (2a) 2.pomocí stylopisu (stylesheet) - seznam stylu mezi tagy <style> a </style> v hlavičce stránky obecně: <style> selektor1 {vlastnost1:hodnota1[;hodnota2][další hodnoty]; vlastnost2:hodnota2 ... } selektor2 {vlastnost1:hodnota1[;hodnota2][další hodnoty]; vlastnost2:hodnota2 ... } . . . </style>
Způsob zápisu CSS (2b) příklad: <html> <head> <style> p {color:blue; background-color:yellow; font-size:12pt} </style> </head> <body> <p> Modrý text na žlutém pozadí velikosti 12, platí mezi každými tagy "<p> a </p>". </p> </body> </html>
Způsob zápisu CSS (3a) 3.zápis stylu do externího souboru s příponou .css obecně: selektor1 {vlastnost1:hodnota1[;hodnota2][další hodnoty]; vlastnost2:hodnota2 ... } selektor2 {vlastnost1:hodnota1[;hodnota2][další hodnoty]; vlastnost2:hodnota2 ... } . . . selektor = html tag/tag:pseudotřída/vlastní třída/identifikátor
Způsob zápisu CSS (3b) Příklad: soubor muj_styl.css: p {color:blue; background-color:yellow; font-size:12pt} HTML soubor: <html> <head> <link rel="stylesheet" type="text/css" href="muj_styl.css"> </head> <body> <p>Modrý text na žlutém pozadí velikosti 12, platí mezi každými tagy "<p> a </p>". </p> </body> </html>
Pseudotřídy Jediný tag a má svoje pseudotřídy (různé stavy). Stylopis muže vypadat takto: <style> a {text-decoration:none} ... text odkazu nebude podtržený a:link {color:red} ... nenavštívený odkaz bude červený a:active {color:yellow} ... odkaz na který se zrovna kliklo bude žlutý a:hover {color:blue;text-decoration:underline} ... odkaz, přes který jede myš bude modrý a podtržený a:visited {color:green} ... navštívený odkaz bude zelený </style>
Vlastní třídy (1) <html> <head> <style> .mojetrida{font-weight:bold;color:blue;text-align:center} </style> </head> <body> <p> <span class="mojetrida">Tučný modrý text zarovnaný na střed </span> Normální text </p> </body> </html>
Vlastní třídy (2) Tečka před jménem třídy je důležitá! Atribut class je možné použít u libovolného tagu. Párové tagy <span> a <div> se používají, pokud je potřeba formátovat text, který není omezen žádným tagem. Uvnitř odstavce se používá <span>, u textu obsahujícího více odstavců <div>.
Identifikátory Chovají se podobně jako třídy. V těle dokumentu by se měl vyskytovat jeden element s jedním identifikátorem jen jednou. Rozdíly mezi třídami a identifikátory jsou znatelné ve skriptech. <html> <head> <style> #mujid{font-weight:bold;color:blue;text-align:center} </style> </head> <body> <p><span id="mujid">Tučný modrý text zarovnaný na střed </span> Normální text </p> </body> </html>
Další deklarace Hromadná deklarace pro více selektorů najednou h1, h3, p {color:black} Oddělovací čárka je důležitá. Pokud je nepoužijeme jedná se o kontextovou deklaraci p a {font-weight:bold} Tato deklarace určuje, že všechny odkazy uvnitř odstavce budou tučným písmem. <h1>Normální nadpis <a href= ...>normální odkaz</a></h1> <p>Normální text<a ...>Tučný odkaz</a></p>
XSL eXtensible Stylesheet Language Syntaxe XSL založena na XML • Pro transformaci XML dokumentůje určeno XSLT (XSL Transformations). • Pro abstraktní popis vzhledu dokumentu jsou určeny XSL formátovací objekty.
XSLT Základními stavebními kameny XSLT jsoušablony: <xsl:templatematch=”<<výraz>>”> <<výstup>> </xsl:template> Příklad: <xsl:template match=”<<výraz>>”> <b><xsl:apply-templates/></b> </xsl:template>
XSLT dokument <xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/ Transform”> <<deklarace šablon>> </xsl:stylesheet>
WML WAP = Wireless application protocol WML = Wireless Markup Language Soubor obsahující wml se nazývá deska (angl. DECK), obsahuje jednu nebo více karet (CARD), které se na displeji mobilního telefonu zobrazují jako jednotlivé stránky.
WML soubor WML soubor musí obsahovat následující řádky, definující typ dokumentu: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Poté následují wml tagy: <wml> <card title="Titulek karty" id="nazev"> <p>Prvni pokusna karta</p> </card> </wml>
WML tagy (1) Formátování textu <b>tučné</b> <i>italic</i> <u>podtržené</u> <small>malé</small> <big>velké</big> <strong>silné</strong> <em>kurzíva</em> <p align="left/right/center">nový odstavec</p> <br/> nepárový tag sloužící k zalomení řádku Komentáře <! komentář> Odkazy <a href="http://wapway.cz">Odkaz na wapway.cz</a>
WML tagy (2) Navigace mezi kartami <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Moje prvni karta" id="prvni"> <p>Prvni karta. Muzete skocit se podivat i na <a href="#druha">druhou</a>.</p> </card> <card title="Moje druha karta" id="druha"> <p>Jestli se Vam nelibi, vratte se na <a href="#druha">prvni</a>.</p> </card> </wml>
WML tagy (3) U každé karty je možné použít tag <do> ve kterém lze definovat několik akcí, které se provedou buď vzbráním položky z menu, nebo stiskem speciální klávesy. <do label="popisek" type="accept/prev"> nejake akce </do> accept ... uživatel musí něco akceptovat prev ... skok na předchozí wml stránku
WML tagy (4) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Moje prvni karta" id="prvni"> <do type="accept" label="druha karta"> <go href="#druha"/> </do> <p>Bezte na druhou.</p> </card> <card title="Moje druha karta" id="druha"> <do type="accept" label="zpatky"> <prev/> </do> <p>Vratte se zpatky.</p> </card> </wml>
WMLtagy (5) <prev/> ... skok na předchozí stránku, funguje jako tlačítko zpět <go/> ... skok na kartu nebo URL Pokud chceme u všech karet ve wml souboru používat stejnou akci, například návrat na původní stránku, můžeme použít tag <template>, který je dobré umístit před začátkem první karty.
WML tagy (6) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <temlate> <do type="prev" label="Zpatky"> </prev> </do> </temlate> <card title="Moje prvni karta" id="prvni"> <do type="accept" label="druha karta"> <go href="#druha"/> </do> <p>Bezte na druhou.</p> </card> <card title="Moje druha karta" id="druha"> <p>Vratte se zpatky.</p> </card> </wml>
České znaky ve WML (1) Český text na displeji telefonu: Růžovoučká kytička nebo žluťoučké přáníčko. Zdrojový kód vypadá takto: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="pokus" title="Pokus"> <p> Růžovoučká kytička nebo žluťoučké přáníčko. </p> </card> </wml>
České znaky ve WML (2) ě ě Ě Ě š š Š Š č č Č Č ř ř Ř Ř ž ž Ž Ž ý ý Ý Ý á á Á Á í í Í Í é é É É ú ú Ú Ú ů ů Ů Ů ó ó Ó Ó ť ť Ť Ť ň ň Ň Ň ď ď Ď Ď
České znaky ve WML (3) České znaky ve WML nahrazujeme entitami. Pro usnadnění práce můžeme použít konvertor. On-line konvertor naleznete například na adrese http://www.pcnet.cz/wap2cz.phtml.
Obrázky - ve formátu WBMP - pouze dvoubarevné o maximální velikosti 94x52 pixelů - vkládání do wml stránky pomocí tagu <img/> s atributy: src, alt, width, height, hspace, vspace, align obdobně jako v HTML Stránka s obrázkem <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="obrazek" > <p align="center"> <img src="neco.wbmp" alt="Muj obrazek"/> </p> </card> </wml>
Tabulky (1) Stejně jako v HTML se vkládají tagem <table> s povinným atributem columns, který určuje počet sloupců. Tabulky není vhodné používat, nepodporují je všechny prohlížece. Příklad: a b c d
Tabulky (2) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Karta s tabulkou" id="tabulka"> <p> <table columns="2"> <tr> <td> a </td> <td> b </td> </tr> . . .
Tabulky (3) . . . <tr> <td> c </td> <td> d </td> </tr> </table> </p> </card> </wml>
XHTML eXtensible HyperText Markup Language Jazyk podobný HTML a WML. Asociace WAPForum ve verzi WAP 2.0 přechází na jazyk XHTML, který má podstatně širší možnosti než WML.
Rozdíly mezi XHTML a HTML (1) XHTML je aplikací XML, kdežto HTML vychází z SGMLVelikost písmen, používaných v jednotlivých elementechHTML ... je to jedno XHTML ... trvá na zápisu malými písmenyKřížení tagůHTML ... většina prohlížečů zobrazí i tagy ve špatném pořadí.XHTML ... křížení je nepřípustné např.:<i>Kurzíva<b>tučná</i></b> je v XHTML špatně, ale v HTML to nevadí. Správně v XHTML: <i>Kurzíva<b>tučná</b></i>
Rozdíly mezi XHTML a HTML (2) RozšiřitelnostHTML ... složitější a neefektivníXHTML ... snadná Struktura hlavní části dokumentuHTML ... může obsahovat jen samotný text a prohlížeč jej zobrazíXHTML ... musí obsahovat všechny tyto prvky, pokud ne, prohlížeč stránku nezobrazí<html> <head> <title></title> </head> <body> </body></html>
Rozdíly mezi XHTML a HTML (3) Nepárové tagyHTML ... zápis bez lomítka např <br>XHTML ... zápis s lomítkem na konci <br/>Hlavička definující typ dokumentuHTML ... NepovinnáXHTML ... povinná, jsou 3:<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd”> <!DOCTYPE htmlPUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/html1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN””http://www.w3.org/TR/html1/DTD/xhtml1-frameset.dtd”>
MathML • Aplikace XML (podobně jako XHTML nebo WML) • Podpora konsorcia W3C => velká šance na uchycení ve světě WWW. • Dva způsobyzápisu: • prezentační (vzhled) • sémantický (význam)
x2 + 4x + 4 = 0 pomocí prezentačních tagů: <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>⁢</mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow>
x2 + 4x + 4 = 0 pomocí sémantických tagů: <apply> <plus/> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> <apply> <times/> <cn>4</cn> <ci>x</ci> </apply> <cn>4</cn> </apply>
ó v := x d x ô ô õ Ukázka exportu neurčitého integrálu z Maple 7: > restart; > with( MathML ): > v := Int(sqrt(x),x); > Export( v ): > XMLTools:-Print( % );
