Sova v síti - 2/9 - vydáno 26.8.2002 Dobrý den, je zde další číslo Sovy v síti :-) OBSAH -- Úvodník -- Učíme se číst definici typu dokumentu (DTD), část II. -- Jak na v Internet Exploreru ÚVODNÍK V minulém čísle jsem slíbil, že dnes vystavím návrhy došlé do soutěže o nový design stránek Sovy v síti. Zatím jsem to nestihl a těm, co nad svou účastí v soutěži dosud váhají jsem tak zajistil dvoutýdenní odklad. Připomínám, že soutěž je otevřena každému; jedinou vstupní podmínkou je uplatnění všeho, co jste se na Sově o webdesignu naučili a jedinou odměnou pro vítězný návrh je to, že bude skutečně použit. Samozřejmě s oslavným uvedním autora a odkazu na jeho stránky. ... Na příště si nechám i dotazy náměty, které jste poslali a za které všem moc děkuji. ... Hlavní náplní tohoto čísla je závěrečné pokračování seriálu Martina Kopty o DTD neboli definici typu dokumentu. Věřím, že se z něj zejména pokročilejší čtenáři opět naučí něco nového. ... Pro ty, kteří nesledují weblog Sovy v síti, nebo si nejsou jisti v angličtině, zařazuji do dnešního vydání českou verzi svého sobotního článku o stylování prvku v Internet Exploreru. Ačkoli se jedná o velmi jednoduchý trik, vzbudil kupodivu značný ohlas. Zejména mne potěšily pochvaly od dvou znalců CSS světového formátu, Craiga Saily a Erica Meyra. Krásný den vám přeje, Marek Prokop ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Denně aktualizované novinky, odkazy na články, zajímavé stránky: Weblog Sovy v síti -- http://www.sovavsiti.cz/weblog/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ UČÍME SE ČÍST DEFINICI TYPU DOKUMENTU (dtd), ČÁST II. Martin Kopta Před dvěma týdny jsme otevřeli téma čtení v DTD. Dnes je vhodná doba článek dokončit a splnit sliby z minulého vydání. Věnovat se tedy budeme těmto kapitolám: ENTITY (parametrické, znakové, zabudované, externí, binární) NOTACE PODMÍNĚNÉ SEKCE Tím vyčerpáme vše, co potřebujete znát o struktuře DTD, abyste mohli psát platné dokumenty HTML nebo XML. + ENTITY (parametrické) Už je nejvyšší čas představit entity. Existují dva druhy: parametrické -- uplatní se jako proměnné v DTD znakové -- používají se v definovaném typu dokumentu Parametrické hodnoty už jsme potkali během ukázek definice prvků a jejich vlastností. Entita funguje jako proměnná, může obsahovat naprosto jakýkoli řetězec, a ten se uplatní v místě, kde potom entitu použijeme. Pokud se tedy podíváte zpět nahoru, jak jsem definoval obsah

a srovnáte můj zápis se zápisem v DTD XHTML 1.0 Strict, zjistíte, že ve skutečném DTD autoři použili entity: Obsah parametrické entity %Inline; je předtím definován takto: A takto bychom mohli sledovat obsah entit dál, až bychom došli k definici

, kterou jsem použil výše. Všimněte si, že za návěstím ENTITY následuje znak procenta (%), tím se liší parametrické entity od znakových. Parametrickou entitu použijeme výhradně v rámci DTD, pomůže nám vyhnout se zbytečnému opisování stále se opakujících řetězců. Za názvem entity (pozor, je závislý na velikosti!) je v uvozovkách uvedena její hodnota. Jak vidíte, může obsahovat další entity. + ENTITY (znakové) Znaková entita se od parametrické liší tím, že ji nepoužijeme k usnadnění práce v DTD, ale až v dokumentu, který definujeme. Odlišují se znakem ampersand (&): V MathML je například entita № pro slitek "No", který označuje číslici, definován následovně: Za návěstím ENTITY nenásleduje procento (%) ani ampersand (&), ale přímo název znakové entity. Za ní v v uvozovkách je pak hodnota entity. Znaková entita může obsahovat opět naprosto jakýkoli řetězec, včetně dalších entit. Pokud tedy často používáte v dokumentech moje jméno, můžete na začátek dokumentu dopsat: ]> A v dokumentu pak místo mého jména můžete psát jen entitu:

Setkání Sovy v Nuslích se zůčastnil i &mrk;.

+ ENTITY (zabudované) V XML jsou už předem zabudované entity číselné. Ty odkazují na pozici znaku v tabulce Unicode, a to buď v decimální nebo hexadecimální soustavě: û û V HTML do verze 4.0 odkazovaly předdefinované znakové entity k ISO 8859-1 (Latin1). Narozdíl od HTML je pro XML předdefinováno ještě pět dalších entit, a to následující: + ENTITY (externí) Všimněte si, že v DTD pro HTML ani XHTML entity obvykle definovány nejsou. Na jejich definici pouze odkazují entity: %HTMLlat1; Entita tedy může odkazovat i na externí soubor. Opět si všimněte, že stejně jako pře deklaraci DTD v dokumentu, i tady můžeme použít buď odkaz s veřejným identifikátorem PUBLIC, nebo entitu načteme ze souboru pomocí systémového odkazu SYSTEM: S tímto typem znakové entity se v HTML nesetkáte, mnoho prohlížečů je nepodporuje. Externí entitou mohou být jak parametrické, tak i znakové. + ENTITY (binární) Entita ovšem nemusí odkazovat jen na textový řetězec; obsahovat může i odkaz na binární soubor (aplikaci, obrázek a pod.). U takové entity je vhodné ještě pomocí klíčového slova NDATA definovat typ dat, který odkazuje k definici notace. Tento typ entity se často používá jako hodnota vlastnosti prvku. Ani s takovou entitou se v HTML nesetkáte. + NOTATION Notace jsem si nechal na konec, protože se s nimi v HTML nesetkáte. O notacích jsme se zmínili před chvilkou u externích binárních entit, kde se na ně odvoláváme pomocí NDATA, a předtím v minulém díle jsme o notacích tvrdili, že se na ně může odkazovat vlastnost prvku. Notace se používají k odkázání na aplikaci, která umí obsloužit daný datový typ. Odkázat se na aplikaci můžeme buď veřejným (PUBLIC), nebo systémovým (SYSTEM) identifikátorem. Problém notací je ten, že málokdy si můžeme být jisti, že na určeném umístění opravdu je aplikace nainstalovaná, a veřejné identifikátory pro aplikace ještě nejsou běžně podporovány. Notace se tedy obvykle používají spíše v uzavřených systémech. Zápis je prostý: + PODMÍNĚNÉ SEKCE I v DTD se používají podmínky. Obvykle se hodí v těch případech, kdy jsou DTD generovány dynamicky, nebo když jsou ke stálé DTD dynamicky přidány nové entity přímo v dokumentu. Cokoli se objeví uvnitř sekce INCLUDE, bude součástí DTD: ]]> Naopak obsah IGNORE součástí DTD při zpracování nebude: ]]> Podmíněné sekce se obvykle používají ve spojení s entitami: ]]> ]]> Při deklaraci DTD se pak na začátku dokumentu můžete pokusit ovlivnit znění DTD: ] > Nemusíte pak psát více DTD, stačí vám jedna a o jejím sestavení rozhodnete až při volání z dokumentu. Pokud zároveň pracujete se serverovými skripty, můžete s DTD dělat divy: "> "> ] > A to je přátelé ode mne z pražského studia pro dnešek o DTD vše. Věřím, že pokud jste četli pozorně, budete od nynějška schopni číst v DTD a posléze i psát platné dokumenty, které vyhovují standardům. Jestliže zjistíte, že něčemu v DTD nerozumíte, můžeme vaše dotazy zodpovědět na konci příštího vydání Sovy v síti. Copyright (c) 2002, Martin Kopta Martin Kopta je copywriter na volné noze. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo, nebo použijte formulář na http://www.sovavsiti.cz/recommend.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JAK NA V INTERNET EXPLORERU Marek Prokop + Úvod Internet Explorer pro Windows nepodporuje prvek , kterým by se na webových stránkách měly vyznačovat zkratky [1], [2]. Zatímco prvek v IE stylovat lze, prvek nikoli. Navíc u prvku IE zobrazí jeho atribut "title" v bublině, kdežto zcela ignoruje. Tato chyba (či vlastnost) IE vede k tomu, že mnozí webmasteři význam značky podceňují. Přitom Mozilla i Opera ji podporují správně a veliký význam má i pro přístupnost stránek. Proto jsem hledal způsob, jak v IE "rozchodit". + Řešení Řešení je založeno na velmi jednoduchém principu. IE sice ignoruje prvek , avšak respektuje jiné prvky v něm vnořené. Obalil jsem tedy obsah prvku prvkem , jeho atributu "title" jsem přiřadil stejnou hodnotu, jako u a doplnil CSS třídu. A vida, se začal chovat stejně jako . + Vzorový kód Podívejte se na následující kód obsahující jednoduchou zkratku: CSS A nyní ho porovnejte s kódem po úpravě: CSS + Automatizace Není ale rozumné vkládat do každého . Bylo by to dost únavné a navíc pro Mozillu i Operu nadbytečné. Naštěstí existuje automatizované řešení pomocí klientského skriptování. Když se podíváte na stránku původní verze článku [3], zjistíte, že v jejím zdrojovém kódu žádné značky nejsou. Přesto však i v IE uvidíte zkratky označené přerušovaným podtržením a zastavíte-li se nad nimi kursorem myši, otevře se bublina s významem zkratky. Je to způsobeno JavaScriptem, který je ke stránce připojen, a který vypadá takto: function styleAbbr() { var oldBodyText, newBodyText, reg if (isIE) { oldBodyText = document.body.innerHTML; reg = /]*)>([^<]*)<\/ABBR>/g; newBodyText = oldBodyText.replace(reg, '$2'); document.body.innerHTML = newBodyText; } } window.onload = function(){ styleAbbr() }; isIE = (document.all) ? true:false; Skript zkontroluje, zda běží v IE a pak nahradí všechny výskyty prvku upravenou verzí s vloženým prvkem . Skript používá regulární výrazy a propritární vlastnost innerHTML namísto standardního DOM (document object model), protože IE má s DOM u nepodporovaných prvků problémy. + Stylování Nakonec se ještě podívejme na stylový předpis (style sheet), který je pro stylování (a také ) vhodný a který je použit i na stránce s původní verzí článku [3]. Je velmi jednoduchý: abbr, acronym, span.abbr { cursor: help; border-bottom: 1px dashed #000; } Mozilla a Opera využijí selektory abbr a acronym, kdežto IE použije selektory acronym a span.abbr. Ve všech případech jsou prvky i stylovány kursorem "otazník" (při přechodu myši) a přerušovaným podtržením (přesněji dolním orámováním). + Poznámky a poděkování Na tomto místě bych chtěl poděkovat Michaelu Kusynovi, který mi prostřednictví konference Intervalu,cz pomohl s uveřejněnou verzí JavaScriptu (přesněji řečeno ho celý napsal). Dále děkuji Martinovi Pichlíkovi a Ondreji Ivaničovi, kteří mi poslali upravenou verzi skriptu využívající standardní vlastnosti a metody DOM. Předpokládám, že tyto další verze skriptu po otestování doplním do webového vydání článku. + Odkazy 1. Craig Saila: HTML is not an acronym... (Evolt) http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ 2. Marek Prokop: Tagy se zvláštním významem (Sova v síti, 9/2001) http://www.sovavsiti.cz/c01231.html 3. Marek Prokop: Styling in IE (CSS Workshop, 8/2002) http://www.sovavsiti.cz/css/abbr.html ... A to je pro dnešek vše. Příště si povíme něco o velikosti písma a Roman Pichlík pro vás připravil stručnou historii JavaScriptu. Užívejte si poslední dny léta :-) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Nechcete, nebo naopak chcete dostávat Sovu v síti? Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz. Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo formulářem na adrese http://www.sovavsiti.cz/. Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky, kritiku, atd. na adrese mailto:redakce@sovavsiti.cz. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Není-li v konkrétním případě uvedeno jinak, je autorem všech publikovaných článků Marek Prokop. Tento ezin, nebo jeho libovolnou část můžete volně šířit dále, pokud současně uvedete zdroj následujícím způsobem: _________________________________________________________________ Sova v síti -- (c) 2002 Marek Prokop -- http://www.sovavsiti.cz/