BLASSENweb - the future of your web !

Wap stránky - tworba

<?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>


     

<?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>
     

<?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:

<?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:

<?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:

<?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/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/20#prvni">na prvni kartu</a>.</p>
  </card>
</wml>