Pre začiatočníkov
Pre tých z vás, ktorí nemajú žiadne skúsenosti s programovaním existuje na internete viacero možností na vytvorenie vlastnej WAPovej stránky bez akejkoľvek znalosti jazyka WML. Už zákazníci mobilného operátora Orange pri objednaní niektorého z dátových balíkov Orange World, získajú možnosť vytvoriť si jednoduchú WAP stránku (www.orangeportal.sk > sekcia Môj mobil > Osobná WAP stránka) do veľkosti 500 Kb. Jednoducho stačí vyplniť preddefinované polia vo formulári a vaša WAP stránka je hotová. Zložitejšie a krajšie prezentácie si podobným spôsobom môžete vytvoriť na internetových stránkach www.mobilomania.sk, www.freewap.cz , www.wlist.sk a zo zahraničných napríklad http://www.mcommunity.biz.
Značkovací jazyk WML
Hypertextový značkovací jazyk WML je veľmi podobný jazyku HTML, využíva rovnaký systém ukazovania na zdroje (URL), obsahuje značky pre vytváranie odkazov a navyše umožňuje pracovať s premennými. Je založený na XML. Oproti HTML je WML zložitejší v tom, že musíte vždy dbať aby boli párové (napr. <b></b>) a nepárové (napr. <br/>) značky vždy ukončené a nepomiešané, lebo sa stránka jednoducho na mobilnom telefóne nezobrazí. Taktiež všetky názvy elementov by mali byť napísané malými písmenami.
Hlavička
Aby server vôbec rozoznal, že sa jedná o WAPovú stránku, je potrebné na začiatku dokumentu zadefinovať hlavičku.
Najskôr uvedieme XML deklaráciu:
<?xml version="1.0"?>Ďalej definíciu typu dokumentu a SGML identifikátor:
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml"> Karty
Obsah celého dokumentu je vložený podobne ako v HTML <html></html> medzi značkami <wml> a </wml>. WML dokument sa skladá z takzvaných kariet. Element <card> nám vymedzuje obsah jednej karty v ktorej sa nachádza obsah stránky (text, obrázky ..atď.). Kariet v jednom dokumente môže byť viacero, pričom prehliadač si ich načíta všetky, takže prechod medzi jednotlivými kartami je potom rýchly. Element <card> môže obsahovať atribúty id, title, newcontext, onenterforward, onenterbackward a ontimer.
id=“meno_karty“ – atribút id musí mať v jednom dokumente vždy jedinečné meno, aby sme mohli pomocou odkazov (napr. index.wml#dalsiakarta) prechádzaťmedzi jednotlivými kartami.
title=“nazov_stranky“ – pomocou atribútu title špecifikujeme titulok stránky, ktorý sa zobrazuje v hornej časti prehliadača mobilného telefónu.
newcontext=“true/false“ – ak je atribút newcontext nastavený na true vymaže sa história navigácie a vyčistia sa všetky premenné. Je to vhodné používať najmä pri formulároch, aby pri opätovnom návrate na stránku neostali vyplnené polia.
onenterforward/onenterbackward =“URL“ – Návštevníka odošle na miesto špecifikované v URL. Pri onenterforward, ak sa návštevník dostal na kartu úlohou go, pri onenterbackward, ak sa návštevník dostal na kartu úlohou prev.
ontimer =“URL“ – Návštevníka odošle na miesto špecifikované v URL po uplynutí určitého času, ktorý sa definuje značkou timer.
Ukážka použitia kariet:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="uvod" title="Inet.sk" newcontext="true">
<p>
<a href="#inet">Vstupte</a>
</p>
</card>
<card id="inet" title="Prva karta" ontimer="#uvod">
<timer value="30"/>
<p>O chvilu sa vratite na uvodnu stranku!</p>
</card>
</wml>
Odstavce
Celý obsah kariet (texty, fotky, tabuľka, formulár ...) musí byť vložení medzi odstavcami. Vtedy sa stránka korektne zobrazí na väčšine typov mobilných telefónov. Odstavec používa rovnako ako v HTML atribút align.
<p> - zarovnanie doľava
<p align=“right“> - zarovnanie doprava
<p align=“center“> - zarovnanie na stred
Praktické je ukončovať odstavec elementom <br/>
Formátovanie textu
Formátovanie textu vo WML dokumentoch funguje rovnako ako v HTML, ale žiaľ nie všetky prehliadače zobrazujú formátovaný text rovnako (napr. niektoré mobilné telefóny zn. Nokia ignorujú šikmé a podčiarknuté písmo).
Na WML stránkach môžeme použiť nasledujúce formátovanie:
| <strong> | výrazné písmo |
ukážka |
| <em> | zvýraznené písmo |
ukážka |
| <b> | tučné písmo |
ukážka |
| <i> | kurzíva | ukážka |
| <u> | podčiarknuté | ukážka |
| <big> | veľké písmo |
ukážka |
| <small> | malé písmo |
ukážka |
Tabuľky:
Tabuľky vo WML sú oproti HTML chudobnejšie o zlučovanie buniek, nastavenie medzier medzi bunkami a okrajom bunky a nastavenia orámovania. Tabuľku môžeme nastaviť pomocou atribútov columms (nadefinujeme počet stĺpcov) a title (titulok tabuľky).
Ukážka:
<table columns="2" title="Webhosting Inet.sk">
<tr>
<td>Start</td>
<td>31,-Sk</td>
</tr>
<tr>
<td>Basic</td>
<td>57,-Sk</td>
</tr>
<tr>
<td>Standard</td>
<td>99,-Sk</td>
</tr>
</table>
Odkazy a obrázky
Odkazy vo WML poznáme interné a externé, ktoré sa tvoria podobne ako v HTML.
Interné nám odkazujú na ďalšiu kartu v tom istom dokumente napr.:
<a href="#karta1">odkaz</a>Externé nám odkazujú na ďalší súbor napr.:
<a href="druha_stranka.wml">odkaz</a>Samozrejme WAP stránky si môžeme spestriť obrázkami, musíme ale brať do úvahy technické parametre mobilného telefónu, platí tu porekadlo menej je niekedy viac. Keďže technológia mobilných telefónov postúpila dopredu, nemusíme sa obmedzovať len formátom wbmp (wireless bitmap), ale môžme už použiť aj obrázky formátu gif, jpg a png. Samozrejme treba dbať, aby veľkosť obrázku bola čím najmenšia. Obrázok sa vkladá pomocou elementu <img>, ktorý musí byť ukončený.
Príklad:
<img src="inet.gif" alt="Inet.sk"/>Prvá WAPová stránka
Zosumarizujeme si predchádzajúce informácie a na ich základe si vytvoríme jednoduchú WAPovú stránku.
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">
<wml>
<card id="uvod" title="Inet.sk" newcontext="true">
<p align="center">
<small>Vitajte na stranke</small><br/>
<img src="inet.gif" alt="Inet.sk"/><br/>
<a href="#inet">Kto sme?</a>
<a href="#hosting">Webhosting</a>
</p>
</card>
<card id="inet" title="Kto sme?">
<p align="center">
<b>INET.sk</b><br/>
<i>je internetovy dennik o:</i><br/>
internete<br/>
pripojeni do internetu<br/>
biznise na internete<br/>
softveri<br/>
tvorbe web stranok<br/>
programovani<br/><br/> <a href="#uvod">Navrat</a>
</p>
</card>
<card id="hosting" title="Webhosting">
<p align="center">
<b>Webhosting INET.sk</b><br/>
<table columns="2" title="Webhosting Inet.sk">
<tr>
<td>Start</td>
<td>31,-Sk</td>
</tr>
<tr>
<td>Basic</td>
<td>57,-Sk</td>
</tr>
<tr>
<td>Standard</td>
<td>99,-Sk</td>
</tr>
</table><br/>
<a href="#uvod">Navrat</a>
</p>
</card>
</wml>
Stránku uložíme na server ako index.wml, pozrieme si ju cez mobilný telefón, prípadne cez emulátory, ktoré som uviedol v predchádzajúcom článku a mala by vyzerať nasledovne:
Vitajte na stranke Kto sme? Webhosting |
Inet.sk Je internetovy dennik o: internete pripojeni do internetu biznise na internete softveri tvorbe web stranok programovani Navrat |
Webhosting Inet.sk
Navrat |
Nabudúce
V ďalšej časti seriálu sa pozrieme na zuby diakritike vo WML dokumentoch, prácou s premennými a formulármi.
Jaroslav Pitoňák
