Mobilní web .info

XHTML MP

XHTML MP (XHTML Mobile Profile) Úvod

Co je XHTML MP?

XHTML MP (eXtensible HyperText Markup Language Mobile Profile) je značkovací jazyk označovaný jako WAP 2.0. WAP 2.0 je poslední specifikací mobilního webu od WAP Forum (nyní Open Mobile Alliance [OMA]). Součástí specifikace WAP 2.0 je i WAP CSS (WAP Cascading Style Sheet nebo WCSS). WAP CSS patří k XHTML Mobile Profile a používají se společně. WAP CSS je určené k jednoduchému formátování XHTML MP stránek.

XHTML Mobile patří do rodiny XHTML, striktní verze HTML. XHTML Mobile Profile vychází z XHTML Basic, ale přidává další atributy a tagy z plné verze XHTML.

Výhodou XHTML Mobile Profile je sjednocení mobilního webu a normální. Před XHTML Mobile Profile, se pro vývoj mobilních stránek používalo WML a WMLScript, ale pro normální web HTML / XHTML a CSS styly.

Příchod XHTML Mobile Profile konečně sjednotil technologie pro vývoj mobilního a normálního webu. XHTML Mobile Profile a WAP CSS přinesli širší možnosti pro mobilní webové prezentace. Díky sloučení standardů lze používat normální prohlížeč pro základní vývoj mobilních stránek.

Poslední verze WAPu je 1.2.1, kde se používal jazyk WML a WMLScript. WAP 2.0 je zpětně kompatibilní WAP 1.x, takže zařízení s WAP 2.0 prohlížečem mohou zobrazovat stránky v jak XHTML MP / WCSS, tak ve WML / WMLScriptu.

Vývoj jazyků mobilního webu

HTML

HTML (HyperText Markup Language) je značkovací jazyk pro World Wide Web (WWW). Primárním úkolem vývoje mobilních stránek je přinést web na zařízení jako jsou mobilní telefony a PDA, takže většina vlastností pro mobilní standarty přichází právě z normálního webu. To je důvod, proč jazyky označované jako WAP (WML and XHTML Mobile Profile) jsou tak podobné HTML.

WML 1.x

WML (Wireless Markup Language) je definovaný ve specifikaci WAP 1.x. Je to první standard pro mobilní stránky. Před jeho příchodem hlavní hráči na poli mobilních technologií, jako Openwave, Nokia a Ericsson měli své vlastní značkovací jazyky. Specifikace WML byla vytvořena WAP Forem, které založili Ericsson, Motorola, Nokia a Openwave v roce 1997. V současné době ještě stále stránek bohužel používá původní WML.

XHTML

XHTML (eXtensible HyperText Markup Language) je přepis HTML do XML (eXtensible Markup Language). Značky v XHTML jsou stejné, jako ty v HTML. XHTML je jednoduše HTML zapsané pomocí syntaxe XML. XHTML je čistší a přísnější než HTML, což usnadňuje zpracování dokumentu a právě to je důležité pro mobilní zařízení, protože mají omezené výkonové prostředky. Všechny hlavní prohlížeče XHTML. XHTML by mělo nahradit HTML.

XHTML Basic

XHTML Basic je zjednodušená verze XHTML, vyvinutá speciálně pro zařízení s omezenými výpočetními možnostmi, jako jsou mobilní telefony, PDAčka, chytré hodinky, pagery, atp. XHTML Basic neobsahuje vlastnosti XHTML, které jsou složité na zpracování na těchto zařízeních. Byli vyřazeny CSS styly, framy a scripování. Standard XHTML Basic byl definován W3C (World Wide Web Consortium).

XHTML Mobile Profile

XHTML Mobile Profile je oficiální značkovací jazyk poslední verze specifikace WAP 2.0. WAP Forum vytvořilo XHTML Mobile Profile založené na XHTML Basic přidáním dalších tagů a atributů, jako <i>, <b>, <small>, <big> and <hr>. XHTML Mobile Profile podporuje zjednodušenou verzi kaskádových stylů, označovanou jako WCSS / WAP CSS.

WCSS / WAP CSS

CSS (Cascading Style Sheet) se používá pro definici vzhledu webových stránek. WCSS / WAP CSS je zjednodušená verze CSS2 s některými specifickými rozšířeními pro mobilní web. WAP CSS je definované ve WAP 2.0 specifikaci. Protože WAP CSS je určené pro mobilní zařízení, vlastnosti CSS2, které nejsou pro mobilní zařízení užitečné, nebo nezbytné byly odstraněny. WAP CSS umožňuje oddělení vzhledu od obsahu. Pokud je třeba upravit vzhled mobilní prezentace, stačí upravit její styly . Pomocí WAP CSS je možné jednoduše měnit vzhled stránky pro různá přistupující zařízení.

WML 2.0

O WML 2.0 se nemusíte starat. Tento standard byl vytvořen jen pro zpětnou kompatibilitu a není určen k vývoji mobilního webu. Používejte XHTML Mobile Profile.

Přínosy XHTML MP

Největší výhodou je, že je možné používat stejné (podobné) standardy pro vývoj mobilního i normálního webu. Další výhody jsou:

• Pokud znáte HTML, XHTML, a CSS, nic vám nebrání začít s vývojem stránek pro mobilní web. Pokud tyto technologie neznáte, tak se společně s vývojem stránek pro mobilní web naučíte vytvářet stránky i pro normální web.No, osobně bych byl radši, kdyby se dotyčný nejdříve naučil alespoň základy vytváření stránek pro normální web.
• Pro psaní mobilních stránek můžete používat stejné vývojové nástroje, jako pro vývoj webu. Plus navíc pár drobností, jako emulátory, nebo hromady telefonů na testování …
• Pro vývoj můžete použít obyčejný prohlížeč. (Před nasazením by jste měli otestovat stránky alespoň na emulátorech mobilních telefonů, aby jste si ověřili, že stránky vypadají tak, jak předpokládáte.) No zas taková sranda to není.
• Normální HTML / XHTML stránky se dají předělat na XHTML MP s malými, nebo žádnými úpravami. (Musíte se ale ujistit, že stránky vypadají dobře na malém displayi a že jejich velikost nepřesahuje paměťové možnosti mobilních zařízení.) Osobně jsem ještě neviděl stránku, která by šla tak jednoduše “překlopit”.
• Vývojářů v XHTML je hodně, takže o lidi není nouze.To mě skutečně pobavilo

Další výhody XHTML MP:

• XHTML MP podporuje WAP CSS, který umožňuje oddělení vzhledu od obsahu do samostatných souborů.No ale tak to se snad dělá i na webu, ne? Protože mobilní prohlížeče mají velmi rozdílné vlastnosti, můžete takto naspat obsah jenom jednou a potom měnit jeho vzhled pomocí WCSS. Častěji je potřeba měnit XHTML a CSS zůstávají stejné.
• S XHTML MP a WAP CSS máte lepší přehled o prezentaci stránky. Můžete nastavovat ohraničení, pozadí, vnitřní i vnější odsazení, atp. Můžete také definovat velikosti a řezy písma. Tyto vlastnosti ve WML 1.x nebyli.

Vlastnosti WML, které nejsou v XHTML MP

Některé vlastnosti z WML 1.x nejsou v XHTML MP. V této kapitole budou popsány rozdíly mezi WML 1.x a XHTML MP. Tato kapitola je tedy pro ty, kdo znají WML 1.x a přecházejí na XHTML MP, nebo pro ty, kdo chtějí migrovat z WML 1.x na XHTML MP.

Většinu odstraněných vlastností z WML 1.x je možné udělat jinak. WAP 2.0 je zpětně kompatibilní s WML 1.x, takže WAP 2.0 prohlížeče dovedou zobrazit WML 1.x dokumenty. Pokud existuje vlastnost WML, která není dostupná v XHTML MP, pak radši svůj mobilní web vyvíjejte ve WML 1.x.Nedovedu si dost dobře představit, co by to bylo

XHTML MP nepodporuje Deck a Card

<deck> a <card> nejsou v XHTML MP. Ve WML může jeden soubor obsahovat více podstránek (card), které dohromady tvoří stránku (deck). Výhoda je, že se vše stáhne najednou. WAPové prohlížeče zobrazují jenom jednu podstránku a uživatel se mezi nimi pohybuje pomocí odkazů. Pomocí deck a card se sníží počet dotazů na server. Zlepšení může být znatelné hlavně kvůli prodlevám v mobilním připojení.

K dosažení podobné vlastnosti v XHTML MP lze použít multipart messages (více dokumentů je odesláno v jediné HTTP odpovědi Pořádně to podporuje asi jenom SonyEricsson). Další možnost je používat kotvy Už jsem o tom psal na blogu.

XHTML MP nepodporuje časovač (timer)

Ve WML se pro časovač používá tag <timer> a událost ontimer. Jak tag <timer>, tak událost ontimer nejsou v XHTML MP.

Pro podobnou funkcionalitu v XHTML MP,zkuste HTTP refresh:


...
<head>
...
<meta http-equiv="refresh" content="10;URL=http://www.mobilniweb.info/" />
...
</head>
...

Nebo to pošlete rovnou jako HTTP hlavičku

V tomto příkladu tag <meta> říká prohlížeči, aby přešel na adresu “http://www.mobilniweb.info/” po 10ti sekundách.

XHTML MP nepodporuje události (events)

V XHTML MP nejsou události. WML zná čtyři události: ontimer, onenterbackward, onenterforward a onpick. Jak už bylo ukázáno, HTTP refresh lze jednoduše nasimulovat. Pro ostatní události není v XHTML MP žádná alternativa. Pokud jsou pro vás tyto události opravdu nezbytné, budete muset u WML 1.x Opět mě nenapadá případ, kdy by se bez toho nedalo přežít, nebo kdy by přínos XHTML MP nepředčil drobné problémy s přechodem. Tady se to prostě dělá jinak.

XHTML MP nepodporuje proměnné (variables)

Ve WML je možné definovat proměnné a přiřadit jim hodnoty. Proměnné ve WML jsou globální, takže jsou dostupné na každém deck i card. Běžným použitím je uložením dat napsaných uživatelem, aby je nemusel psát znovu.

V XHTML MP žádné proměnné nejsou. Jedinou alternativou je řešit tyto věci na serveru.

XHTML MP nepodporuje skriptování (client-side scripting)

Ve WML je možné používat skriptovací jazyk WMLScript, který je podobný JavaScriptu. Běžně se používá pro ověřování uživatelského vstupu.

Nic takového v XHTML MP není. Zbývá provádět vše na serveru. V praxi novější WebKit (S60 3rd), IEMobile (Win Mobile) a Opera Mini podporují jednoduché JavaScripty.

V budoucnu by měli zařízení podporovat ECMAScript Mobile Profile (ESMP) vytvořený pro používání s XHTML MP. Ten by přinesl i zpětnou kompatibilitu s WMLScriptem.

XHTML MP nepodporuje nastavení Softkeys

Nastavitelná softkey tlačítka je jedna z nejlepších funkcí WML. (Softkeys jsou levé a pravé funkční tlačítko) Ve WML se k tomu používá tag <do> a události mohou být vyvolané stiskem levého, nebo pravého funkčního tlačítka.

V XHTML MP není možné nastavit softkeys, ale je tu alternativa v atributu accesskey, pomocí kterého se nastavuje klávesová zkratka. Accesskey je možné nastavit u odkazů a tlačítek. Příklad:


<a accesskey="1" href="part1.xhtml">XHTML MP Tutoriál Část 1</a><br/>
<a accesskey="2" href="part2.xhtml">XHTML MP Tutoriál Část 2</a><br/>
<a accesskey="3" href="part3.xhtml">XHTML MP Tutoriál Část 3</a>


Pokud uživatel zmáčkne tlačítko “1″, okamžitě přejde na stránku “part1.xhtml”. Pomocí atributu accesskey může uživatel vyvolat událost jedním stiskem tlačítka, což je dost podobné WML.

Jako alternativa k accesskey může být použita CSS vlastnost -wap-accesskey.

V některých mobilních prohlížečích Nokia se automaticky vytvoří menu složené z odkazů a tlačítek, které mají přidělený accesskey. Toto menu je dostupné přes softkey. Název položky v menu je text odkazu, v případě obrázku je to alt atribut tohoto obrázku. V případě tlačítka se použije atribut value. Například:


<a accesskey="1" href="part1.xhtml">XHTML MP Tutorial Part 1</a><br/>
<a accesskey=”2″ href=”part2.xhtml”><img src=”icon.gif” height=”40″ width=”40″ alt=”XHTML MP Tutorial Part 2” /></a><br/>

<form action=”xhtml_mp_tutorial_proc.asp” method=”get”>
<p>
Which part of our XHTML MP tutorial do you like most?<br/>
<input type=”text” name=”tutorial_part” title=”Edit” /><br/>
<input accesskey=”3″ type=”submit” value=”Submit Form” />
</p>
</form>


Zvýrazněné položky v tomto příkladu ukazují, které texty se stanou součástí menu. Pokud je text příliš dlouhý, bude zkrácen.

Tato funkcionalita není dostupné na jiných mobilních prohlížečích, než Nokia. Popravdě řečeno se jedná jenom o Nokia Series40 1st a 2nd edition.

XHTML MP nepodporuje tag <u>

Ve WML slouží <u> k podtržení textu.

Tento tag v XHTML MP není. K podtržení nějakého textu v XHTML MP je potřeba použít vlastnost text-decoration ve WAP CSS. Například pro podtržení menu první úrovně můžete zapsat následující WCSS:


h1 {
text-decoration: underline;
}


XHTML MP nepodporuje atribut “format” pro vstupní pole

Ve WML je možné nastavit atribut “format” pro tag <input> a tím omezit druh a počet znaků, které uživatel zadá do vstupního pole.

V XHTML MP byl atribut format odstraněn u tagu <input>. Jako alternativa je použití WAP CSS vlastnosti -wap-input-format. Vlastnost -wap-input-format bere stejnou vstupní masku, která se zadával do atributu format. Například pro omezení vstupního pole pouze na pět čísel, můžete použít následující definici CSS:


input {
-wap-input-format: "5N";
}


Některým telefonům je třeba stále zadávat masku v atributu format i když podporují WCSS.

XHTML MP nepodporuje odesílání formulářů odkazem

XHTML MP nepodporuje odesílání formuláře pomocí odkazu. Pro potvrzování formulářů se mají používat tlačítka.

Syntaktická pravidla XHTML MP

XHTML MP patří do rodiny jazyků XHTML. Pravidla syntaxe XHTML MP jsou stejná jako u XHTML.

Jak už zde bylo řečeno, XHTML je přísnější a čistší forma HTML. Pokud znáte HTML, nebudete mít problém XHTML MP s dodržením těchto XHTML MP pravidel syntaxe.

XHTML MP Pravidlo 1: Tagy musejí být správně uzavřeny

Všechny tagy v XHTML MP musí být správně uzavřeny. Například následující kód NEní správně, protože </p> chybí. (<p></p> slouží k uzavření textu do odstavce.)


<p>XHTML MP tutoriál - odstavec 1
<p>XHTML MP tutoriál - odstavec 2
<p>XHTML MP tutoriál - odstavec 3


Správně podle XHTML Mobile Profile je to:


<p>XHTML MP tutoriál - odstavec 1</p>
<p>XHTML MP tutoriál - odstavec 2</p>
<p>XHTML MP tutoriál - odstavec 3</p>


Některé tagy XHTML MP nemají žádný obsah, který by uzavíraly, jsou nepárové. Jasným příkladem je <br>, který slouží k zalomení řádku. Tyto nepárové tagy se uzavírají umístěním “/” na konec názvu tagu před “>”. Uzavřená verze tagu <br> tedy bude <br />.

Následující kód NEní správně pro neuzavřený tag <br>.


Nový řárek <br>


Správně to tedy bude:


Nový řárek <br/>


Pro zachování kompatibility se staršími prohlížeči se ještě přidává mezera. Takto:


Nový řárek <br />


XHTML MP Pravidlo 2: Atributy tagů musejí být malým písmem

Zápis XHTML MP je case-sensitive, tedy na velikosti písmen záleží. Všechny tagy a atributy musejí být malým písmem. Následující kód není správně, protože tagy (<P></P>) a atributy (ID) jsou velkým písmem.


<P ID="p1">XHTML MP tutoriál - odstavec 1 </P>
<P ID="p2">XHTML MP tutoriál - odstavec 2 </P>
<P ID="p3">XHTML MP tutoriál - odstavec 3 </P>


Správně to bude:


<p id="p1">XHTML MP tutoriál - odstavec 1 </p>
<p id="p2">XHTML MP tutoriál - odstavec 2 </p>
<p id="p3">XHTML MP tutoriál - odstavec 3 </p>


XHTML MP Pravidlo 3: Hodnoty atributů musejí být v uvozovkách

Všechny hodnoty musí být v jednoduchých (apostrofech), nebo dvojitých uvozovkách. Následující příklad je špatně:


<p id=p1>XHTML MP tutoriál - odstavec 1 </p>
<p id=p2>XHTML MP tutoriál - odstavec 2 </p>
<p id=p3>XHTML MP tutoriál - odstavec 3 </p>


Správně:


<p id="p1">XHTML MP tutoriál - odstavec 1 </p>
<p id="p2">XHTML MP tutoriál - odstavec 2 </p>
<p id="p3">XHTML MP tutoriál - odstavec 3 </p>


Nebo s apostrofy:


<p id='p1'>XHTML MP tutoriál - odstavec 1 </p>
<p id='p2'>XHTML MP tutoriál - odstavec 2 </p>
<p id='p3'>XHTML MP tutoriál - odstavec 3 </p>


XHTML MP Pravidlo 4: Zkracování atributů není povolené

Některé atributy mohou mít jen jednu hodnotu. V HTML je možné uvést jen tuto hodnotu. Následující příklad ukazuje zaškrtnutý checkbox. Stačí uvést atribut “checked” a HTML prohlížeč pozná, že jeho hodnota má být také “checked”.


<input type="checkbox" checked />


Každopádně v XHTML Mobile Profile stejně jako XHTML není možné zkracovat atributy. Správně je to takto:


<input type="checkbox" checked="checked" />


Další příklad. Následující kód definuje roletkové menu se třemi položkami a druhou zaškrtnutou. V HTML 4 by to vypadalo následovně:


<select multiple>
<option>XHTML MP Tutorial Part 1</option>
<option selected>XHTML MP Tutorial Part 2</option>
<option>XHTML MP Tutorial Part 3</option>
</select>


Správně podle XHTML MP to bude takto:


<select multiple="multiple">
<option>XHTML MP Tutorial Part 1</option>
<option selected="selected">XHTML MP Tutorial Part 2</option>
<option>XHTML MP Tutorial Part 3</option>
</select>


XHTML MP Pravidlo 5: Tagy musejí být správně vnořené

Správné vnořování tagů je v XHTML důležité. Překrývání tagů není dovolené jako u HTML. Následující příklad je špatně, protože tagy nejsou správně vnořené:


<p><b>XHTML MP tutoriál - odstavec 1 </p></b>
<i><p>XHTML MP tutoriál - odstavec 2 </i></p>
<p><b><i>XHTML MP tutoriál - odstavec 3 <p><i></b>


Tagy nesmějí být v XHTML překřížené, takže správně je to takto:


<p><b>XHTML MP tutoriál - odstavec 1 </b></p>
<p><i>XHTML MP tutoriál - odstavec 2 </i></p>
<p><b><i>XHTML MP tutoriál - odstavec 3 <i><b></p>


Jenom dodám, že ani uzavírání blokového <p> do řádkového (inline) <i> není správně.

XHTML MP MIME typy a přípony souborů

MIME Typy

Následující MIME typy je možné použít pro XHTML Mobile Profile

1. application/vnd.wap.xhtml+xml
2. application/xhtml+xml
3. text/html

MIME typ specifikovaný Open Mobile Alliance [OMA] pro XHTML MP dokument je “application/vnd.wap.xhtml+xml”. Některé mobilní prohlížeče tento MIME vyžadují (například některé Nokia Series60 ) pro správné vykreslení XHTML MP stránky.

Další volba je “application/xhtml+xml” MIME typ. Tento MIME se používá pro XHTML dokumenty.

MIME “text/html” je také možné použít. Tento MIME je pro HTML dokumenty. Použitím “text/html” pro XHTML MP získáte tu výhodu, že můžete prohlížet XHTML MP stránky v obyčejném prohlížeči. (Některé prohlížeče jako IE 6 nezobrazují dokumenty s MIME typem “application/vnd.wap.xhtml+xml” i “application/xhtml+xml”, ale ukáží dialog k uložení souboru.) Nevýhoda je, že pokud použijete HTML MIME, normální prohlížeče nemusejí zpracovávat stránku jako striktní XHTML dokument.

Dynamický výběr MIME Typu

Další možnost je rozpoznávat prohlížeč a posílat příslušný MIME v závislosti na prohlížeči. Pokud prohlížeč umí “application/vnd.wap.xhtml+xml” MIME typ, pak mu všechny XHTML MP budou posílány jako “application/vnd.wap.xhtml+xml”.

K výběru MIME typu dynamicky je potřeba na serveru napsat pár řádek v nějaké programovacím jazyku, jako je Python, ASP, JSP, Perl, PHP, Ruby, nebo cokoliv, co se vám líbí.

Z HTTP requestu musíte získat hlavičku accept, která obsahuje seznam všech MIME typů, které prohlížeč podporuje.

• Pokud hlavička accept obsahuje “application/vnd.wap.xhtml+xml”, nastavte MIME XHTML MP dokumentu na “application/vnd.wap.xhtml+xml”.
• Jinak když accept hlavička obsahuje “application/xhtml+xml”, nastavte content-type na “application/xhtml+xml”.
• Jinak jako content-type nastavte “text/html”.

Pro Python a mod_python třeba takto:


accept = req.headers_in['Accept'].split(’,')
req.content_type=’text/html’
for mime in ['application/vnd.wap.xhtml+xml', 'application/xhtml+xml']:
      if mime in accept:
            req.content_type=mime


Napsal jsem jednodušší příklad v Pythonu. Má to poloviční počet řádek :-). Originální příklad v ASP najdete pod tímto odkazem

Přípona souboru

Přípona souboru statického XHTML MP dokumentu může být “.xhtml”, “.html” i “.htm”. Můžete použít kteroukoliv příponu, pokud k ní bude nastaven správný MIME typ v konfiguraci web serveru.

XHTML MP Struktura dokumentu

Příklad “Hello World” v XHTML MP

První příklad, který ukazuje klasickou strukturu XHTML MP dokumentu.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p>Hello world. Welcome to our XHTML MP tutorial.</p>
</body>
</html>


XHTML Mobile Profile dokument musí začínat definicí XML a DTD.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">


Tyto prvky v XML hlavičce se neuzavírají pomocí “/>” jako normální tagy.

Po této hlavičce XML dokumentu už následuje standardní XHTML obsah.

XML Deklarace a kódování znaků

Všechny dokumenty XHTML MP jsou XML dokumenty, takže na jejich začátku musí být deklarace XML, která specifikuje verzi XML dokumentu a znakovou sadu použitou v daném dokumentu. Vypadá asi takto:


<?xml version="1.0" encoding="UTF-8"?>


Tento řádek říká, že XML verze dokumentu XHTML MP je 1.0 a znaková sada UTF-8. Pokud je znaková sada UTF-8 nebo UTF-16, není nutné tento atribut uvádět.

Tato XML deklarace není v XHTML MP dokumentu povinná. Mohou ale nastat problémy u některých mobilních prohlížečů, pokud není uvedena. Například některé prohlížeče v telefonech SonyEricsson rozlišují podle XML deklarace rozdíl mezi XHTML MP dokumentem a IHTML (proprietární jazyk vyvinutý NTT DoCoMo) dokumentem, pokud je MIME type nastaven jako text/html: Pokud dokument obsahuje XML definici, považuje se za XHTML MP dokument, v opačném případě za IHTML dokument.

Deklarace DOCTYPE

Všechny XHTML MP dokumenty musí mít DOCTYPE deklaraci. Měla by být umístěna před definicí XML a <html> elementem. Následující definici DOCTYPE můžete jednoduše zkopírovat a vložit do svého dokumentu. Kromě DTD pro XHTML MP 1.0 jsou ještě další DTD pro mobilní web. Píšu o tom tady.


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">


Definice DOCTYPE říká název DTD (Document Type Definition) a URL k DTD. DTD obsahuje informace o syntaxi značkovacího jazyku. Definuje tagy a atribute, které smějí být v jazyku použity a další pravidla. Pro kontrolu jestli váš XHTML MP dokument vyhovuje pravidlům XHTML MP je možné použít validační nástroje. V některých vývojových prostředích (IDE) jsou tyto nástroje integrované.

Element <html>

<html> je kořenovým tagem celého XHTML MP. Všechny ostatní elementy musejí být uzavřeny mezi <html> </html>.

Atribut xmlns slouží k definici jmenného prostoru XHTML MP. Momentálně mu může být přidělena jen jedna hodnota a to “http://www.w3.org/1999/xhtml”. Pro správné zobrazení XHTML MP dokumentu musíte správně uvést xmlns atribut, protože jinak některé prohlížeče nezobrazí stránku správně.

Element <head>

Tagy <head> a </head> se používají pro vyznačení začátku a konce hlavičky dokumentu. Informatice o dokumentu jsou umístěny právě v hlavičce. Element <head> slouží jako kontejner pro tagy jako <title> a <link>. Element <title> se používá pro definici názvu dokumentu a element <link> například pro uvedení cesty k CSS stylům. Metainformace o XHTML MP jsou také umístěny v hlavičce a to v <meta> elementu.

Element <title>

Element <title> slouží pro zápis nadpisu dokumentu a měl by být uzavřen mezi <head></head>. Většina mobilních prohlížečů zobrazí titulek na vršku displaye. Pokud je titulek moc dlouhý, prohlížeč ho ořízne tak, aby se vešel do uřčeného proužku. Titulek není možné stylovat pomocí WAP CSS

Element <body>

Tag <body> obklopuje obsah stránky. V jednom XHTML MP souboru může být jen jendou elementu <body>.

Text nemůže být umístěn přímo mezi <body></body> tagy. Následující příklad tedy NEní správně:


<body>
Povídání o pejskovi a kočičce v XHTML MP.
</body>


Aby byl dokument validní, je nutné uzavřít text do nějakých jiných elementů jako odstavce ( <p> </p>), seznamy ( <ul><li></li></ul> nebo <ol><li></li></ol>), nadpisy (<h1></h1>, <h2></h2>…), atp. Následující kód je už správně:


<body>
<p>Povídání o pejskovi a kočičce v XHTML MP.</p>
</body>


Element <p>

Element <p> slouží k uzavření odstavce textu. Kromě textu může tag <p> obsahovat věci jako odkazy a obrázky.Prohlížeče vždy vykreslují odstavec na nový řádek.

V HTML i WML 1.x je možné pomocí atributu u elementu <p> měnit horizontální zarovnání odstavce. Tyto vlastnosti byly v XHTML MP odstraněny. Pro zarovnání je potřeba použít vlastnosti WAP CSS text-align. Například následující ukázka v CSS způsobí zarovnání všech odstavců doprava.


p {
text-align: right
}


XHTML MP obecné meta-informace

Pomocí tagu <meta /> je možné specifikovat nějaké dodatečné metainformace ke stránce. Tag <meta /> by měl být uzavřen mezi <head> a </head>. Mobilní prohlížeč bude ignorovat informaci, které nerozumí. Můžete specifikovat jakékoliv metainformace, aniž by jste ovlivnili vzhled stránky. Například pokud chcete uvést autora XHTML MP dokumentu, aniž by se zobrazil na stránce.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
<meta name="author" content="Lukoko" />
</head>

<body>
<p>Hello world. Welcome to our XHTML MP tutorial.</p>
</body>
</html>


XHTML MP Cachování

Další použití tagu <meta /> je pro řízení doby expirace dokumentu ve vyrovnávací paměti prohlížeče. Cache je prostor v paměti mobilního prohlížeče, určená k dočasnému ukládání XHTML MP stažených souborů. Pokud prohlížeč při dotazu na nějakou stránku najde v cachi již dříve uloženou verzi stránky, která ještě nevypršela, tak se ji ani nepokouší stahovat a tím se ušetří doba načítání stránky a peníze uživatele. Pokud vaše stránka obsahuje často se měnící informace, pak nastavte dobu expirace/vypršení platností na co nejnižší. Následující příklad ukazuje použití tagu <meta /> k nastavení doby expirace XHTML MP stránky na nula.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="no-cache" />
</head>

<body>
<p>Hello world. Welcome to our XHTML MP tutorial.</p>
</body>
</html>


Jak napovídá atribut http-eqiv, stejného výsledku je možné dosáhnout rovnou pomocí HTTP hlaviček

Následující příklad ukazuje, jak nastavit dobu expirace na 300 sekund:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="max-age=300" />
</head>

<body>
<p>Hello world. Welcome to our XHTML MP tutorial.</p>
</body>
</html>


Řádek:


<meta http-equiv="Cache-Control" content="max-age=0" />


Má stejný význam jako:


<meta http-equiv="Cache-Control" content="no-cache" />


Je nutné poznamenat, že tato funkcionalita je závislá na zařízení. Některé wapové prohlížeče nepodporují řízení doby expirace stránky a některé prohlížeče dokonce ani cache nemají. Každopádně pokud tomu prohlížeč nerozumí, tak to jednoduše ignoruje.

Periodické obnovení stránky v XHTML MP

K periodickému obnovení stránky je možné použít HTTP refresh. Je to velice užitečná funkce pro stránky s aktuálními informacemi. Následující ukázka obnoví stránku každých 15 sekund. Pro správnou funkčnost musí být cache hlavička nastavena takto: <meta http-equiv=”Cache-Control” content=”max-age=0″ />, tedy bez cache. Pokud není cache vypnutá, prohlížeč může prostě zobrazit starou kopii stránky z paměti cache.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta http-equiv="refresh" content="15" />
</head>

<body>
<p>Tato stránka se obnoví každých 15 vteřin.</p>
</body>
</html>


HTTP refresh je také možné použít k automatickému přechodu na jinou stránku po uplynutí určité doby. Je to možné využít jako vlastnost stránky, nebo pomocí této vlastnosti vytvořit slideshow. Následující příklad ukazuje přesměrování na stránku “helloWorldEg1.xhtml” po 15 vteřinách.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="refresh" content="15;URL=helloWorldEg1.xhtml" />
</head>

<body>
<p>Za 15 vteřin se stránka přesměruje na jiný dokument.</p>
</body>
</html>


HTTP refresh nepodporují všechny mobilní prohlížeče. Například to funguje dobře na Openwave Mobile Browser 6.2.2, ale ne na Nokia Mobile Browser 4.0, Sony Ericsson T610 a T68i emulátorech mobilních telefonů.

Komentáře XHTML MP

Komentáře jsou v XHTML MP umístěny mezi <!– –>. Je to stejné jako u XML, HTML i WML 1.x. Prohlížeče komentáře ignorují.


<!-- Komentář -->

<!-- Víceřádkový
komentář -->


Lámání řádků XHTML MP

<br/> v XHTML MP je značka pro zalomení řádku, znamená to samé i HTML a WML 1.x. Následuje příklad:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p>
První řádek<br/>
druhý řádek<br/><br/>
třetí řádek
</p>
</body>
</html>


XHTML MP Nadpisy

Elementy <h1>, <h2>, <h3>, <h4>, <h5> a <h6> slouží v XHTML MP stránce k vyznačení nadpisů (od úrovně 1 do úrovně 6). Mobilní prohlížeče se pokusí je zobrazit s rozdílnou velikostí a písmem. Každopádně některá zařízení nemají dost fontů, takže některé napdisy mohou vypadat stejně. Nadpisy fungují většinou tak, jak mají, jedinou výjimkou jsou prohlížeče od OpenWave, které si velikost H1 představují tak, že se vám nevejde ani jedno slovo na řádek, tak je písmo velké.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p>
<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
<h3>Nadpis třetí úrovně</h3>
<h4>Nadpis čtvrté úrovně</h4>
<h5>Nadpis páté úrovně</h5>
<h6>Nadpis šesté úrovně</h6>
</p>
</body>
</html>


Tuto stránku doporučuji použít jako testovací pro přípravu vhodného CSS tak, aby to bylo na všech telefonech stejné. V některých případech se nevyhnete generování CSS v závislosti na přistupujícím prohlížeči.

Fonty v XHTML MP

V XHTML MP se dají použít tagy pro změnu písma. Některé mobilní prohlížeče podporují jen malou část z těchto elementů, protože prohlížeče mohou zobrazovat pouze písma, která jsou dostupná v telefonu. Takže pokud chybí v telefonu kurzíva, nebude podporovaná ani prohlížečem. Nepodporované formátovací značky prohlížeč ignoruje.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p>
<b>Tučně</b><br/>
<i>Kurzíva</i><br/>
<b><i>Tučná italika</i></b><br/>
<small>Malé</small><br/>
<big>Velké</big><br/>
<em>Důraz (Emphasis)</em><br/>
<strong>Silné</strong>
</p>
</body>
</html>


Tag <b> znamená tučně a <i> kurzívu (italiku). Tag <small> zmenší velikost písma. Element <big> zase zvýší velikost textu. Elementy <em> a <strong> mají podobný styl. Mobilní prohlížeč zobrazí důraz (emphasis - <em>) a silně (<strong>) na různých zařízeních různě.

V XHTML MP není tag <u>. K podtržení textu je tedy nutné použít WCSS.

Původní autor, jak se zdá, to s tím písmem bere nějak zvláštně. U písem doporučuji brát v potaz sémantická pravidla XHTML a úpravy písma stylovat pomocí CSS.

Za zmínku ještě stojí, že na některých zařízeních je možné použít i různé rodiny písem, jako patkové, bezpatkové a proporcionální. Na SonyEricssonech zase jsou problémy se zobrazením českých znaků v kurzívě.

XHTML MP Předformátovaný text

V XHTML se nezobrazují bílé znaky (mezera, tabelátor, nový řádek) na začátku a na konci obsahu tagu. Více než jeden bílý znak se sleje do jednoho znaku.

Pro použití bílých znaku k formátování textu,je nutné použít element <pre>, jako v tomto příkladu:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<pre>
Tento text
se
vykreslí tak,
jak je napsaný
</pre>
</body>
</html>


Vzhledem k nízké podpoře proporcionálního fontu mezi prohlížeči není možné zaručit, že to bude vypadat vždy dobře.

XHTML MP Seznamy

Pro vytváření seznamů se v XHTML MP používají tagy <ul>, <ol> a <li>.

Pro vytvoření nečíslovaného seznamu použijte element <ul>. Každá položka v nečíslovaném seznamu začína odrážkou. Tagy <li></li> se používají k uzavření obsahu jedné položky. Nečíslovaný seznam je v následujícím příkladu:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<ul>
<li>Něco</li>
<li>Něco jiného</li>
<li>Tamto</li>
</ul>
</body>
</html>


Pro vytvoření číslovaného seznamu se používá element <ol>. U číslovaného seznamu se ke každé položce automaticky přidá číslo. Položky seznamu jsou uzavřeny mezi tagy <li> a </li>. Číslovaný seznam je v následujícím příkladu.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<ol start="3">
<li>třetí</li>
<li>čtvrtá</li>
<li>pátá položka</li>
</ol>
</body>
</html>


Pomocí WAP CSS je možné kontrolovat vzhled seznamů. Je tam možné definovat vzhled odrážek, ale i číslování (například změnit číslování z “1, 2, 3…” na “i, ii, iii…”).

XHTML MP Obrázky

Zobrazení obrázku v XHTML MP

Tag
<img> slouží v XHTML MP k zobrazení obrázku, je to stejné jako v HTML. Pokud mobilní prohlížeč nemůže obrázek zobrazit (nebo je má uživatel vypnuté), nebo nepodporuje jeho formát, zobrazí textový obsah atributu alt. Atributy width a height slouží k uvedení výšky a šířky obrázku (v pixelech). Pomocí těchto parametrů můžete měnit velikost obrázku.Doporučuji přidávat ke každému obrázku parametry width i height, protože stránka se potom mnohem rychleji vykresluje.)

Starý formát WBMP se už na mobilním webu nepoužívá. Můžete používat normální formáty obrázků, které se používají na normálním webu. Pozor na různé způsoby uložení PNG a JPG

Dobrý způsob, jak zjistit, jaký obrázek můžete poslat je ověřovat accept hlavičku z HTTP dotazu. Pokud obsahuje například "image/gif",
"image/jpg" a "image/png", znamená to, že mobilní prohlížeč podporuje formáty GIF, JPG a PNG.

Na následujícím příkladu je stránka s obrázkem


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image in XHTML MP</title>
</head>

<body>
<p>
<img src="smile.gif" alt="Smilík" height="62" width="60" /><br/>
Text pod obrázkem.
</p>
</body>
</html>


Problémy s velkými obrázky u XHTML MP

Mnoho mobilních prohlížečů nemá možnost horizontálního posouvání Dneska už má, ale je to uživatelsky hodně nepříjemné. Takže pokud je obrázek moc velký, tak ho prohlížeč ořízne a potom to nevypadá profesionálně.

Uvědomte si, že změna atributu width a height nezmění velikost obrázku, který prohlížeč stahuje, takže s velkými obrázky se bude stránka načítat hodně dlouho.

Pak je také si uvědomit, že kromě času platí uživatel za velké obrázky hlavně penězi, protože poplatky za mobilní připojení jsou bohužel pořád poměrně vysoké.

Další způsob, jak zrychlit načítání stránky je použít multipart. Když uživatel načte normální stránku, tak dostane nejdřív XHTML MP dokument a na základě něj se potom dotazuje na ostatní obsah, jako jsou právě obrázky. Pokud použijete multipart, tak pošlete všechna data, která bude prohlížeč pro načtení stránky potřebovat najednou a tím hodně ušetříte dobu načítání stránky.

XHTML MP tabulky

K vytvoření tabulky se v XHTML MP používají tagy <table>, <tr>
a <td>. Data v buňkách jsou uzavřeny mezi<td> a </td>
elementy. Buňky na jednom řádkou jsou seskupeny pomocí tagů <tr> a </tr>. Všechny řádky se musejí nacházet mezi elemetny <table> a </table>. Takže,
<td> a </td> by měly být uzavřeny mezi <tr> a </tr> a
<tr> a </tr> by měly být mezi <table> a </table>.
Následující příklad ukazuje vytvoření tabulky:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table in XHTML MP</title>
</head>

<body>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>

<tr>
<td>Cell D</td>
<td>Cell E</td>
<td rowspan="2">Cell F</td>
</tr>

<tr>
<td colspan="2">Cell G</td>
</tr>
</table>
</body>
</html>


Pro ovládání vzhledu tabulek se používá WAP CSS (WCSS). Pokuch chcete definovat ohraničení buňky v tabulce, nebo její barvu, musíte použít právě WCSS. Ohraničená buňky tabulky je možné nadefinovat třeba takto:


td {
border: thin solid black
}


XHTML MP a odkazy

Odkaz slouží k navigaci. Odkaz slouží k přechodu na jiný dokument, nebo k posunutí stránky na dané místo. K vytvoření odkazu se používá párový tag
<a></a>.

Atribut href u <a> definuje URL
(Uniform Resource Locator) k cíli odkazu. Používá se protokol
HTTP a URL ve formátu:


http://server.cz/cesta/soubor.py#kotva?parametr1=hodnota1&parametr2=hodnota2...


Je to stejné jako ve WML.

Kotvy na stránce

Jak už bylo zmíněno je možné dělat odkazy, které posunou stránku (pohled prohlížeče) na vyznačené místo. Aby jste toho docílili, musíte nejdříve vyznačit v dokumentu stanovené místo (kotvu). Jako další krok musíte spojit kotvu a odkaz.

Pro nastavení místa, kam se má přesunout pohled prohlížeče - kotvy slouží v XHTML MP atribut id. Většina XHTML Mobile Profile tagů může mít atribut id. Zde jsou nějaké příklady:


<a id="id_cile"></a>

<a id="id_cile_b" />

<h1 id="id_cile_c">XHTML MP Tutoriál</h1>

<p id="id_cile_d">Nějaký text v odstavci</p>


Aby jste se odkazovali na kotvu, musíte vytvořit URL s parametrem offset (začína # na začátku), a umístit jí jako parametr href u odkazu:


<a href="#id_cile">Odkaz na kotvu v tomto dokumentu</a>


Pokud se jedná o stejný dokument, není nutné specifikovat cestu k souboru. Stačí jen mřížka a název kotvy.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p><a id="vrsek">Obsah:</a></p>
<ul>
<li>První část</li>
<li>Druhá část</li>
<li>Třetí část</li>
</ul>
<p><a href="#vrsek">Zpět nahoru</a></p>
</body>
</html>


POZOR: hodnoty atributu id musí být v celém dokumentu unikátní. Nemůžete tedy použít stejný název pro kotvu dvakrát

Odkazy na jinou XHTML MP stránku

Přejít na jinou stránku je jednoduché. Stačí vytvořit odkaz a jako href parametr uvést URL dokumentu, na který chcete přejít.

Podle mě k tomu není nutné psát něco dalšího, ale originální text je zde

Používání krátké URL pro WAPovou Home Page

Jak všichni víme, psaní textu na klávesnici mobilního telefonu je velice zdlouhavé, takže se vždy musíme snažit připravit URL tak, aby byly co nejkratší:

• Rozumné domény třetího řádu: www.stranka.cz je matoucí, wap.stranka.cz je mnohem lepší volba. m.stranka.cz bude asi nejlepší volba.
• Pokud je to možné, používejte stejnou url pro normální i mobilní verzi stránek. Jednak to bude lepší pro uživatele a jednak pak bude možné přistupovat rovnou na stranka.cz
• Nezapomeňte nastavit defaultní dokument pro webserver, aby nebylo nutné vypisovat věci jako www.stranka.cz/index.html

XHTML MP obrázkové odkazy

Obrázkové odkazy jsou někdy užitečným nástrojem, ale je potřeba si dát pozor na problémy s vykreslováním u některých prohlížečů a také tím podstatně naroste objem přenesených dat k uživateli.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<a href="/tamto"><img src="imgs/obrazek_tamtoho.png" alt="Tamto" /></a>
</body>
</html>


Nastavení klávesové zkratky pro odkaz v XHTML MP

Nastavením atributu accesskey u elementu <a> dosáhneme možnosti použít klávesnici telefonu pro navigaci na stránce. K dispozici máme tlačítka 0, 1, 2, 4, 5, 6, 7, 8, 9, 0, * a #. Tyto klávesy je většinou dobré uvádět k odkazu do na konec jeho obsahu do závorky. (Pozor: jsou prohlížeče, které k odkazu je accesskey přidávají automaticky)


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<a href="/tamto" accesskey="0">Navigace (0)</a>
</body>
</html>


K dosažení stejného cíle je také možné použít CSS atribut -wap-accesskey