Obrázky a animace

Obrázky

Stránky se dají obohatit o nějaký obrázek, který ovšem musí splňovat určitá kriteria vzhledem k daným omezením. Současná mobilní zařízení podporují pouze formát WBMP, který umožňuje ukládání pouze černobílých obrázků. V blízké budoucnosti by měl WAP podporovat i barevné obrázky jako je tomu na Japonských ostrovech (i-mode např. podporuje formát GIF).
Jak ale vytvořit, převést obrázek do formátu WBMP? Odpovědí se nabízí několik. Pokud má uživatel nainstalované vývojové prostředí Nokia WAP Toolkit 3, má o starost méně. V tomto prostředí si můžete nakreslit svůj vlastní obrázek, nebo zkonvertujete již existující s příponou jpg a gif. Na internetu lze naleznout mnoho programů pro konverzi, jako je WAP pictus a k většině grafických editorů se dá doinstalovat plug-in s podporou pro WBMP

<?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="telefon" src="telefon.wbmp"
height="50" width="37"/>
</p>
</card>
</wml>

Příklad v emulátoru zde


pomocí <img> vložíme obrázek, atribut alt slouží k pojmenování obrázku, zobrazí se pokud nemůže prohlížeč zobrazit obrázek. Atribut src určuje zdroj obrázku, umístění obrázku. Další položky width a heigh nastaví rozměr obrázku.

Musíme dbát na velikost obrázků. Většina mobilních telefonů je schopná zobrazit obrázky, jejichž šířka je okolo 95 pixelů a výška mezi 40 a 60 pixely.
Pro vložení do wapové stránky slouží element img. se dvěma atributy – src a alt, které jsou povinné. První určuje URL adresu obrázku a druhý textový popis. Je dobré uvést i atributy určující šířku a výšku obrázku (height a width), díky nimž může prohlížeč vynechat pro obrázek dostatečný prostor.

Animace na WAPu

Animovaného obrázku ve WAPu dosáhneme pomocí triku z časovačem. Jedná se o velice primitivní a nedokonalý způsob animace. Přesto může pomoci při tvorbě dynamických stránek.
Celý trik spočívá v postupném nahrávání obrázků jednoho za druhým. K tomu použijeme tagu TIMER a ONTIMER. Využití časovače při animaci popisuje následující zdrojový kód:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN\"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<!-Animace pomocí záměny souboru -->
<wml>
<card id=“obr1“ ontimer=“#obr2“>
<timer value="9"/>
<p align=“center“>
<a href="#c3">VSTUP</a>
<img src=“srdce1.wbmp“ alt=“srdce1“/>
</p>
</card>
<card id=“obr2“ ontimer=“#obr1“>
<timer value="10"/>
<p align=“center“>
<a href="#c3">VSTUP</a>
<img src= “srdce2.wbmp“ alt=“srdce2“/>
</p>
</card>
<card id=“c3“ name=“Konec“>
<p align=“center“>
Konec animace.
</p>
</card>
</wml>

 

Uživatel může narazit na problém s některými telefony (např. Nokia 7110), protože načítání stránky prokládají nápisem "Připojuji službu...". Tento nápis, pokud je zobrazen při načítání, pak přirozeně efekt celé animace kazí.