WAP 2.0 - seznamy a definice
V dalÜφm Φlßnku o uplat≥ovßnφ protokolu WAP 2.0 a jazyka XHTML-MP v mobilnφch telefonech se podφvßme na zobrazovßnφ seznam∙ s obrßzky (menu, nabφdky) pomocφ kaskßdov²ch styl∙ (CSS). AΦkoli se podpora tΘto technologie zßsadn∞ liÜφ podle druhu telefonu Φi simulßtoru, byla by Ükoda tΘto mo₧nosti nevyu₧φt.
Nejprve krßtkΘ zamyÜlenφ
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):
<!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):
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
Druhß ukßzka (index02.xhtml) vychßzφ se stejnΘho zadßnφ strßnky, od prvnφ se vÜak liÜφ designem. Pod titulkem strßnky jsem pou₧il odd∞lovacφ linku a zm∞nil pφsmo odkaz∙ a jejich barvu:
Simulßtor Nokia MB 4.0 - zobrazenφ druhΘ ukßzky
Simulßtor Openwave SDK 6.2.2 - zobrazenφ druhΘ ukßzky
Seznam definic
TakΘ pro mobilnφ telefony m∙₧eme psßt takzvanΘ definiΦnφ v²Φty, kterΘ slou₧φ pro vysv∞tlovßnφ pojm∙. Jejich struktura je stejnß jako u b∞₧nΘho seznamu, pouze se liÜφ pou₧it²mi elementy. Seznam definic obsahuje obalujφcφ element <dl>, do n∞ho₧ dßvßme element <dt> (pojem, zobrazuje se obvykle na novΘm °ßdku u levΘho okraje strßnky) a element <dd> (vysv∞tlenφ pojmu, zobrazφ se obvykle odsazen zleva). Rovn∞₧ u tohoto typu seznamu lze vyu₧φvat kaskßdov²ch styl∙. A jeliko₧ pφÜeme XHTML, musφ b²t i zde ka₧d² element ukonΦen lomφtkem.
Ukßzka seznamu definic s externφm stylopisem
<title>definice.xhtml</title>
</head>
<body>
<h1>DefiniΦnφ v²Φet</h1>
<dl>
<dt>Pojem 1</dt>
<dd>Definice 1 n∞jakΘho textu</dd>
<dt>Pojem 2</dt>
<dd>Definice 2 n∞jakΘho textu</dd>
<dt>Pojem 3</dt>
<dd>Definice 3 n∞jakΘho textu</dd>
</dl>
</body>
}
h1 {font-weight:bold ;font-size:medium ;font-style:normal;text-align:center;
}
dl {margin:0px; padding:5px; background-color:yellow; border-style:solid; border-color:silver; border-width:medium;
}
dd {margin-left:5px; margin-top:2px;font-size:small; text-align:left;
}
dt {margin-right:2px; margin-top:2px; font-size:medium; text-align:left; background-color:#D2FFFF;
}
- dl - deklarace vlastnosti padding:5px; vytvo°φ p°esah barevnΘho pozadφ. Navφc lze nap°φklad vlastnostmi border-style:solid; Φi border-color:silver; vytvo°it rßmeΦek kolem definiΦnφho seznamu.
- dd - deklarace margin-left:5px; nastavuje velikost odsazenφ °ßdku s definicφ. Implicitn∞ je nastaveno na 40 pixel∙.
- dt - deklarace margin-top:2px; nastavuje odstup mezi °ßdky pozadφ.
Simulßtor Openwave SDK 6.2.2 - seznam definic
Slu₧by pro autory
Nedßvno jsem si posteskl, ₧e slu₧by na sφti tvorbu pro mobilnφ internet, podporujφcφ protokol WAP 2.0 a tudφ₧ jazyk XHTML-MP, jeÜt∞ pln∞ nezaznamenaly. Tu a tam se vÜak ji₧ objevujφ weby usnad≥ujφcφ autor∙m prßci, o kter²ch bych se zde rßd zmφnil, aΦkoli nesouvisφ p°φmo s tΘmatem Φlßnku.
Hodit se vßm m∙₧e nap°φklad validßtor Webcab.de. Podporuje vÜechny pou₧φvanΘ formßty MIME type od text/x-wap.wml (WML 1.0) a₧ po application/vnd.wap.xhtml+xml (XHTML-MP).. JednoduÜe zadßte URL, vyberete MIME, aktivujete zatr₧φtko Validity Check a validßtor vßm ukß₧e k≤d vaÜφ strßnky a upozornφ na p°φpadnΘ chyby.
Validace probφhß velmi rychle, strßnka se zobrazφ b∞hem dvou vte°in. èkoda jen, ₧e na ov∞°ovßnφ CSS stylu nenφ pamatovßno, avÜak nic nßm samoz°ejm∞ nebrßnφ prov∞°it stylovßnφ p°es originßlnφ validßtor CSS od W3C.
Validßtor Webcab.de
Na internetu p°ib²vajφ takΘ strßnky pro mobilnφ p°φstroje, psanΘ v jazyku XHTML/XHTML-MP. K nejnov∞jÜφm pat°φ velmi dobr² WAP Radka Hulßna, kde mimo jinΘ oce≥uji komfort, kter² nabφzφ u₧ivateli pro diskusi.
Mimochodem, v poslednφ dob∞ se velk²mi p°φznivci WAP 2.0 staly takΘ vyhledßvaΦe. Nap°φklad Google spustil projekt prohledßvßnφ mobilnφho webu, kter² sßm detekuje za°φzenφ, s nφm₧ k n∞mu p°istupujete, a podle toho konvertuje do formßtu WAP 1.2 nebo WAP 2.0. WAP vyhledßvaΦ Google si m∙₧ete vyzkouÜet na adrese http://www.google.com/xhtml.
Odkazy a zdroje
- WAPforum XHTML-MP - dokumentace (PDF, elementy, strana 8, oddφl 5)
- Openwave XHTML-MP a CSS
WAP 2.0 - novΘ mo₧nosti s XHTML
Protokol WAP 2.0 umo₧≥uje, mimo jinΘ, pou₧φvat pro tvorbu mobilnφch aplikacφ a prezentacφ standardnφ XHTML (p°esn∞ji XHTML-MP, XHTML Mobile Profile), co₧ zp°φstup≥uje tuto oblast vÜem webdesignΘr∙m znal²m XHTML a zvyÜuje atraktivitu mobilnφho webu. Tato sΘrie Φlßnk∙ dosud nebyla ukonΦena!
- WAP 2.0 - seznamy a definice (prßv∞ Φtete)
- WAP 2.0 - slu₧by pro autory
- WAP 2.0 - formßtovßnφ textu
- WAP 2.0 - lepÜφ design pro mobily
- XHTML v mobilnφch telefonech
