BLASSENweb - Wap stránky

První stránka

Do jednoho souboru se ukládá jedna WML stránka.
Každá stránka se pak skládá z několika kart. Karta je přitom kus stránky, který se najednou zobrazuje v mikroprohlížeči.

Zdrojový kód té nejjednodušší wapové stránky může vypadat třeba takto:

{ Kód }:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
              "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card>
    <p>Prvni WML stranka.</p>
  </card>
</wml>

První tři řádky musí obsahovat každá stránka ve WML.
Označuje se jimi použitá verze jazyka WML.
Následuje element wml, do kterého musí být uzavřena každá stránka.
Ta pak obsahuje jednu nebo více kart, které se označují elementem card.
Naše stránka obsahuje jednu kartu a ta obsahuje jeden odstavec, který se vyznačuje pomocí nám již známého elementu p.

Odkazy na další stránky

WAP je zjednodušenou obdobou Webu, ale zachovává jeho základní vlastnost ? možnost tvorby hypertextových odkazů mezi stránkami. Ve WML se odkazy vytvářejí úplně stejně jako v HTML. Text, který slouží k aktivaci odkazu, se uzavře do elementu a, a URL adresa cílové stránky se zapíše do atributu href.

{ Kód }:

<?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="Stranka s odkazem">
    <p>Az se budete nudit, muzete zkusit 
      <a href="http://albert.wz.cz/wap"> 
      stranky</a> primo na displeji telefonu.</p>
  </card>
</wml>

Tabulky

I když jsou displeje mobilních telefonů malé, je důležité na nich informace přehledně uspořádat.
K tomu lze s výhodou použít právě tabulky.

Tabulka se vkládá do odstavce pomocí elementu table.
U něj ještě musíme pomocí atributu columns určit kolik má tabulka sloupců.
Je to proto, aby pro mikroprohlížeč bylo jednodušší tabulku zformátovat. Jednotlivé buňky tabulky se ve WML zapisují po řádcích.
Každá řádka je uzavřena v elementu tr a každá buňka v elementu td.

S pomocí tabulek je pak velice jednoduché vytvořit např. stránku s jednoduchým kurzovním lístkem:

{ Kód }:

<?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="Kurzovni listek">
    <p>
      <table columns="2">
	<tr>
	  <td>Mena</td>
	  <td>Kurz</td>
	</tr>
	<tr>
	  <td>EUR</td>
	  <td>31.90</td>
	</tr>
	<tr>
	  <td>USD</td>
	  <td>26.60</td>
	</tr>
      </table>
    </p>
  </card>
</wml>

Možnosti formátování tabulek jsou ve WML velice omezené. Jediné co můžeme určit, je způsob zarovnání jednotlivých sloupců. Pro každý sloupec můžeme říci, zda se jeho buňky mají zarovnávat doleva, doprava nebo centrovat. Zarovnání se řídí hodnotou atributu align. Pro každý sloupec obsahuje jedno písmeno, které řídí zarovnávání. Písmeno `L' odpovídá zarovnání doleva, `R' doleva a k vycentrování slouží `C'. Upravená stránka s kurzovním lístkem bude vypadat mnohem lépe, protože kurzy měn budou zarovnány úhledně pod sebou:

{ Kód }:

<?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="Kurzovni listek">
    <p>
      <table align="CR" columns="2">
	<tr>
	  <td>Mena</td>
	  <td>Kurz</td>
	</tr>
	<tr>
	  <td>EUR</td>
	  <td>31.90</td>
	</tr>
	<tr>
	  <td>USD</td>
	  <td>26.60</td>
	</tr>
      </table>
    </p>
  </card>
</wml>

Obrázky

Displej mobilních zařízení je obvykle poměrně malý i pro zobrazování textu, a tak nás může překvapit, že WML nabízí i prostředky pro zobrazování obrázků.
Tuto vlastnost dnes většina stránek využívá pouze k zobrazování firemních log a reklamních bannerů. Existují však i smysluplnější aplikace ? zobrazování plánků měst, grafy, nebo třeba předpověď počasí s ikonkami.
Pro potřeby WAPu byl vytvořen nový formát WBMP. Ten umožňuje ukládání pouze dvoubarevných obrázků. V budoucnu se pro WAP počítá i s novým formátem, který bude podporovat barevné a animované obrázky.
Pro konverzi stávajících obrázků do formátu WBMP existuje mnoho nástrojů. K většině grafických editorů lze doinstalovat plug-in s podporou pro WBMP. Pro první pokusy můžeme použít i program WAP Pictus, který umí nejběžnější formáty převádět do WBMP.
Při přípravě obrázků musíme mít na mysli dvě velká omezení ? velikost displeje a malý počet barev. Většina telefonů je schopná zobrazit obrázky, jejichž šířka nepřesahuje 96 pixelů. Výška displeje se nejčastěji pohybuje mezi 40 a 60 pixely. Naše obrázky by proto neměly přesáhnout rozměry 96×50 pixelů. V opačném případě neuvidí uživatelé obrázek celý najednou.
S konverzí obrázku si musíme chvíli hrát. V barevném obrázku se totiž některé barvy převedou na bílou a některé na černou. Algoritmus použitý při převodu výrazně ovlivní výsledný vzhled obrázku. Lepší je vždy vyzkoušet několik algoritmů, které konverzní programy nabízejí, a vybrat si ten nejlepší výsledek.
Dalším problémem je tvar pixelů na displejích. Některé mobilní telefony mají pixely čtvercové, některé zase obdélníkové. Problém je v tom, že obdélníkové pixely zkreslí proporce obrázku. Z kružnice se na takovém displeji rázem stane elipsa. Na to vše musíme při návrhu grafiky pro WAP stránky myslet.
Když už máme obrázky uloženy ve formátu WBMP, můžeme je vložit do wapové stránky. Slouží k tomu element img. U něj musíme povinně uvést dva atributy ? src a alt. První z nich obsahuje URL adresu souboru s obrázkem. Většinou však stačí uvést samotné jméno souboru, protože je ve stejném adresáři jako stránka. Do atributu alt je pak slušné napsat textový popis obrázku. Ten se zobrazí v případě, že se obrázek nepodaří načíst.

Kód na přidání obrázku vypadá asi takhle:

{ Kód }:

<?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="Stranka s obrazkem">
    <p align="center">
      <img alt="logo" src="logo.wbmp" 
           height="50" width="37"/>
    </p>
  </card>
</wml>

Karty

Většina stránek obsahuje několik kart. Výhoda je především v rychlosti ? při pohybu po kartách v rámci jedné stránky se nemusí mobilní zařízení spojovat se serverem, vše má již uloženo ve své paměti.

Po natažení stránky se vždy zobrazí první karta v pořadí. Pokud chceme, aby se uživatel mohl dostat na další karty, musíme ručně vytvořit odkazy. Mikroprohlížeč totiž umí zobrazovat jen obsah jedné karty najednou.

Abychom mohli vytvářet odkazy mezi kartami, musíme si je jednoznačně pojmenovat. Jméno se zapisuje jako hodnota atributu id karty. Odkaz na kartu se pak vytváří pomocí speciálního URL ve tvaru #název_karty.

Příklad:

{ Kód }:

<?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="Prvni karta" id="prvni">
    <p>Vitejte<br/>
      Informace jsou stejne az <a
      href="http://blassenweb.net/clanky/wap-stranky-tworba/tisknout/20#druha">na druhe karte</a>.</p>
  </card>
  <card title="Druha karta" id="druha">
    <p>Ona to neni uplne pravda. Mozna se radsi vratte 
      <a href="http://blassenweb.net/clanky/wap-stranky-tworba/tisknout/20#prvni">na prvni kartu</a>.</p>
  </card>
</wml>