PC-politika.cz - Novinky: WAP: Protokol WAP 2.0 a jazyk XHTML-MP PC-politika

WAP: Protokol WAP 2.0 a jazyk XHTML-MP

Protokol WAP 2.0 pro mobilní telefony umožňuje dosáhnout také v mobilech zobrazování seznamů, např. s obrázků, menu apod. prostřednictvím kaskádových stylů (CSS). Podpora této technologie se u různých typů vyvojářských simulátorů a běžných mobilů liší. Výsledek však stojí za odladění a pak širší použití.

Protokol WAP 2.0 pro mobilní telefony umožňuje dosáhnout také v mobilech zobrazování seznamů, např. s obrázků, menu apod. prostřednictvím kaskádových stylů (CSS). Podpora této technologie se u různých typů vyvojářských simulátorů a běžných mobilů liší. Výsledek však stojí za odladění a pak širší použití.

Za podpory XHTML

Organizace W3C vypracovala specifikaci jazyka XHTML pro webové dokumenty hlavně proto, aby byly "device independent", tedy nezávislé na zařízení, a usnadnily komunikaci na síti i jednodušším zařízením. V dokumentu XHTML byly zachovány názvů elementů, takže bez problémů můžeme všechny vytvořené stránky XHTML prohlížet schopnějšími HTML prohlížeči. Oba formáty se tím pádem zobrazí korektně ve WAP prohlížečích mobilů, emulátorech a rovněž v hlavních internetových browserech.

Zjednodušeně řečeno, pro mobilní prohlížeče můžeme tvořit klasické XHTML dokumenty a do úvodu pouze přidat specifický doctype. Některé mobily dokonce již mají zabudované klasické internetové prohlížeče - třeba Nokia 6230i a Eurotel Smart Phone II (HTML stránku tyto mobily také zobrazí, avšak podpora stylování je tak "napůl").

Odkazy s obrázky na dva způsoby

Jak již bylo řečeno, jazyk XHTML-MP, který podporuje protokol WAP 2.0, lze využít k tvorbě seznamů. Společně s kaskádovými styly (CSS) umožňuje oddělit obsah od prezentace. Stejný obsah lze uplatnit na prohlížečích, mobilních telefonech, PDA a dalších výstupních zařízeních, a to při použití odlišných fontů, barev a dalších prezentačních vlastností. Změny na jednotlivých WAP stránkách vyřešíte u seznamu okamžitě v návaznosti na CSS změnou definice stylů.

V XHTML-MP jsou číslované a nečíslované seznamy vytvářeny elementy ul, ol, li, což je přehledné, úsporné, a tedy výhodné. Seznamy se hodí nejen pro vytvoření menu, ale obecně nejrůznějších odkazů (nabídek). Stylování se provádí pomocí externího stylopisu dle specifikace Wireless Cascading Style Sheets (WCSS). O jejich formalizaci se postarala společnost Open Mobile Alliance (OMA).

Poznamenávám, že v následujících příkladech nejsou ani zdaleka vyčerpány všechny možnosti, je tedy třeba zkoušet, zkoušet a zkoušet...

Ukázka seznamu s externím stylopisem

První ukázka využívá k zobrazení seznamu menu stylopisy, uložené v externím souboru. Zdrojové kódy jsou obdobné klasické stránce XHTML. Je zapotřebí pouze dodržet pro ten účel správný doctype W3C WAPfora (OMA WAPfora) a jak je v běžném XHTML zvykem, na první řádek umístit prolog XML.

Pro spolupráci se stylovou externí předlohou CSS slouží element link. OMA doporučuje pro "linkování" navíc atribut media="handheld". Tato definice (určená pro kapesní počítače) se mi však projevila tak, že při ověřování stránek nebylo v internetových prohlížečích docíleno vykreslení zadaného barevného pozadí, proto tento atribut v příkladu neuvádím. Zobrazování v mobilních telefonech a simulátorech to nikterak neovlivňuje.

Soubor index01.xhtml (tělo stránky):

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="cs">
<head>
<title>index01.xhtml</title>
<link rel="stylesheet" href="wapstyle01.css" type="text/css" />
</head>
<body id="stranka">
<h3>Nabídka</h3>
<ul>
<li><img src="sipka.gif" alt="mapa" /><a class="darkblue" accesskey="1" href="map.xhtml">Mapa</a></li>
<li><img src="shopping.gif" alt="" /><a class="darkblue" accesskey="2" href="xxx.xhtm">Obchody</a></li>
<li><img src="weather.gif" alt="" /><a class="darkblue" accesskey="3" href="xxx.xhtml">Počasí</a></li>
<li><img src="obrx.gif" alt="" /><a class="darkblue" accesskey="4" href="xxx.html">Novinky</a></li>
<li><img src="domu.gif" alt="" /><a href="index01.xhtml">Hlavní stránka</a></li>
</ul>
</body>
</html>

<...xml:lang="cs"> - v kořenu dokumentu určuje jmenný prostor jazyka dokumentu. Přiřazením českého kódování "cs" by měl dokument zobrazovat v mobilním prohlížeči také diakritiku. Je ovšem nutné správně nastavit v některých mobilních telefonech a simulátorech volbu Language.
<link href="style01.css"...> - element link připojuje soubor stylové předlohy.
<h3> - podle vlastnosti definované v externím stylopisu centrovaný nadpis.
<ul> - zakládá nečíslovaný odrážkový seznam (ve spolupráci s elementy <li>).
<li> - položka seznamu, zobrazuje se v návaznosti na <ul> vždy za odrážkou.
<body id="stranka"> - identifikace konkrétní stránky.
<img src="sipka.gif"..> - název a případně cesta k souboru obrázku.
<a class="darkblue"...> - atribut odkazuje třídu obsahující stylopis pro barevné pozadí odkazu.
<...accesskey="číslo"...> - atribut, který přiřazuje zadané číslo klávesy, po jejímž stisknutí bude element aktivován.

Soubor wapstyle01.css (externí stylopis):

body {font-size:medium; color:black; font-family:Arial, sans-serif;
background-image:url("textura.gif");
}
.darkblue {color:blue;
}
h3 {font-weight:bold ; font-size:large; text-align: center;
}
ul {list-style-type:circle; margin-left:1px; list-style-position:outside;
}
li {margin:2px; font-size:large; text-align:left; background-color:#D2FFFF
}

body - zde doporučuji uvést deklaraci font-size:medium, která přizpůsobí velikost základního písma na stránce konkrétnímu typu WAP prohlížeče. Tím usnadníme formátování textu na displeji prohlížeče. Dále je přiřazena deklarace background-image:url('obrazek') pro pozadí WAP stránky. Funguje u různých mobilních telefonů a simulátorů odlišně.
.darkblue - tato třída obarví pozadí řádků s odkazy.
ul - shrnuje vlastnosti seznamu jako celku. Před jednotlivými položkami se vytvoří odrážky. Pro definici vzhledu odrážek jsem použil zápis list-style-type:circle (kolečko). Simulátory i mobilní telefony zobrazují tyto odrážky korektně. Rovněž hodnotu square (čtvereček), mi zobrazovaly WAP prohlížeče správně. Lze také vytvořit seznam s obrázkovou odrážkou, a to pomocí stylu list-style-image: url("obrazek.gif"). Ještě jsem použil deklaraci list-style-position:outside;, která se postará o to, že odrážky jsou umístěny vlevo od textu v odkazech. Pokud použijeme hodnotu inside, bude zarážka součástí dalšího textu.
li - zde jsou aplikovány definice vlastností jednotlivých odrážek (položek) seznamu. Například deklarace margin:2px; nastaví odstup pozadí odrážek mezi sebou. Deklarace vlastnosti s příslušnou hodnotou barvy background-color:#D2FFFF vytvoří pozadí odrážek s odkazy.

Stáhněte a otestujte si balíček zdrojových kódů ve svém simulátoru - všechny soubory pro tento příklad najdete v adresáři "wapukazka1", v dalších adresářích jsou soubory ostatních ukázek.

Simulátor Nokia MB 4.0 - zobrazení první ukázky

Simulátor Openwave SDK 6.2.2 - zobrazení první ukázky

Resumé

Využítí CSS ve zdrojácích pro zobrazování v mobilních telefonech jistě má své přednosti. Stále více tvůrců tento způsob začíná využívat. Displeje mobilních telefonů tak dostávají svěží vítr v podobě graficky upravených mobilních stránek. Postup je opravdu patrný. Záleží tedy i na vás, zda stylování v mobilech použijete také.