1. WAP Jazyk WML Webserver Nastavení MIME: Co na tvorbu a prohlížení WAPu pot ebujete? Waptor Nokia Mobile Internet Toolkit

Transkript

1 1. WAP WAP - Wireless Application Protocol je standardem pro bezdrátový přenos dat a jejich zobrazování na displeji mobilních telefonů. Tím z nich vytváří komunikační zařízení schopná komunikovat s jinými přístroji a aplikacemi fungujícími na stejném protokolu přes bezdrátovou síť. V případě WAPu se jedná o "end-to-end" aplikační protokol, pomocí něhož probíhá komunikace mezi aplikačním serverem a klientem pomocí browseru (prohlížeče), zabudovaného v mobilním telefonu a podporujícího Wireless Application Protocol. Samotný aplikační server je jakousi WAPgateway (bránou) a obsluhuje na něj vznášené požadavky WAP klientů (mobilních telefonů). Jazyk WML Wireless Markup Language - bezdrátový resp. mobilní značkovací jazyk, který je používaný pro zápis WAPu. Struktura WML souboru je téměř stejná, jako u XHTML. U WML je třeba si (tak jako u XHTML) dávat pozor na syntaxi - především všechny WML značky musí být malými písmeny a pokud je napíšete jinak, nefungují, neboť velikost písmen je rozlišovacím znakem (WML jazyk je také "case-sensitive", tedy citlivý na velikost písmen). Pokud ve WML souboru uděláte syntaktickou chybu, mobilní telefon jej nezobrazí, ale nahlásí chybu, stejně jako velké vývojové nástroje. Dokud není dokument bez chyb, není zobrazen (nemělo by něco podobného fungovat i na webu?) Také většina značek je párových, tedy mají značku označující konec a začátek. Nepárové značky se pak zapisují s lomítkem na konci, aby bylo jasné, že jsou nepárové. Tedy značka pro konec řádku není <br>, ale opět <br/>. Jistě jste tedy pochopili, že jazyk WML je potomkem jazyka XML a sourozencem XHTML. Webserver WAP projekty je možné umístit na standardní webserver, jako je Apache na Linuxu nebo MIIS na Windows. Je ale nutné nastavit MIME typy pro určité koncovky souborů a je také vhodné asociovat soubor typu main.wml nebo index.wml jako implicitní soubor, který webserver vrací, pokud zadáte URL adresáře. Nastavení MIME: text/vnd.wap.wml wml text/vnd.wap.wmlscript wmls image/vnd.wap.wbmp wbmp application/vnd.wap.wmlc wmlc application/vnd.wap.wmlscriptc wmlsc Co na tvorbu a prohlížení WAPu potřebujete? WML editor: začátečníkům doporučuji např. český Waptor (download na Pokročilým pak doporučuji např. vývojový nástroj a zároveň simulátor Nokia Mobile Internet Toolkit (download na s podporou syntaxe WML i XHTML-MP (tedy i WAPu verze 2.0) Grafický editor s podporou formátu *.wbmp (Adobe Photoshop, resp. ImageReady minim. verze 7), neboť WAP 1.0 podporuje pouze tento typ černobílých obrázků (doporučené rozlišení max. 100 x 80 pixelů). Ve specifikaci WAP 2.0 (a na moderních mobilních telefonech s barevným displejem) lze ale již také využívat standardní vícebarevné webové formáty *.jpg, *.gif, či *.png.

2 Mobilní telefon, podporující WAP WAP browser (WML prohlížeč) pro PC - doporučuji např. WinWAP (download opět na Webový on-line emulátor WAPu: český Smith ( nebo ccwap-browser ( či TTemulator ( a Opera mini simulátor ( WML validátor (např. W3Schools na WAP vyhledávač ( Až nainstalujete např. WinWap (ideální je ale sáhnout po webovém emulátoru, pokud chcete navíc ušetřit kredit za připojení na WAP mobilním telefonem), zkuste třeba můj WAP na kde najdete také vše podstatné z českého WAPu. Pro začínající tvůrce WAPu je ideální český editor Waptor (dovnload na 2. JAZYK WML 1.1 Základní jednotkou WML je karta, která specifikuje jednoduchou interakci mezi WAP zařízením a uživatelem. Karty jsou slučovány do tzv. desek (deck), což jsou nejmenší jednotky WML, které web server umí poslat na WAP zařízení. V okamžiku, kdy WAP zařízení obdrží desku, aktivuje automaticky první kartu, kterou tato deska obsahuje. Document Type Definition soubor

3 Document Type Definition (DTD) soubor definuje, stejně jako u HTML či XHTML, všechny elementy použité ve WML. Cesta k vlastnímu DTD souboru musí být definována v úvodu WML desky. DTD soubor může být umístěn buď někde na síti nebo ho můžete mít uložen lokálně pro rychlejší přístup k němu. Všechna WAP zařízení nemusí být schopna rozeznat všechny elementy a atributy obsažené v DTD souboru, v takovém případě bude zařízení fungovat tak, jako by element nebyl přítomen. Poznámka: příklady DTD naleznete na Znakové sady WML používá sadu znaků používaných v dokumentech XML v současnosti Universal Character Set (Univerzální sada znaků) ISO/IEC (Unicode 2.0) a podporuje jakékoliv podsady znaků sady Unicode (např. US-ASCII, ISO , nebo UTF-8, pro české entity ISO ). O konverzi kódování se však z principu stará brána operátora. Všichni čeští operátoři si také poradí i s kódováním obvyklým ve Windows (windows-1250). Hlavička dokumentu Nejdůležitější obsahovou částí je tzv. "hlavička", ve které je definována verze použitého WML standardu a verze XML. Dále pak umožňuje zadat použitou znakovou sadu, podobně jako je tomu v následujícím příkladu. Příklad: Poznámka: dva poslední řádky musí být zapsány na řádek jediný! Základní kostra WML dokumentu <wml> <!-- Prvni karta na desce --> <card id="hlavni_karta" title="wap"> <p align="center"> text

4 </wml> </p> Poznámka: velikost souborů, které tvoří jednotlivé dokumenty WAPu, by neměla přesáhnout doporučenou hranici bajtů, i když nejnovější mobilní telefony jsou schopné zobrazit stránky o velikosti až do kb. 3. WAP 2.0, JAZYK XHTML-MP a WAP CSS Novější mobilní telefony (s nainstalovaným prohlížečem klasických www stránek, např. Opera mini pro mobily s Javou nebo Opera mobil pro operační systémy Windows Mobile a Symbian S60) používají WAP verze 2.0, který umožňuje tvořit wapové projekty nejen pomocí jazyka XHTML-MP (Mobile Profile), ale i technologie WAP CSS (WAP Cascading Style Sheets, některé zdroje uvádějí i zkratku WCSS, Wireless Cascading Style Sheets). Přináší to více možností při formátování stránek pro wapové prohlížeče - můžeme tedy nejen využívat znalost syntaxe "webového" jazyka XHTML, ale pracovat i s kaskádovými styly CSS, a tak vytvářet stránky působivější (i díky možnosti využívat vícebarevné obrázky), můžeme používat např. i seznamy, tabulky a formuláře s tlačítky. Jediné, na co si ve zdrojovém kódu WAP 2.0 dovoluji upozornit (viz následující ukázka), je pouze specifická definice DTD, vše ostatní již znáte z předchozích kapitol o XHTML a CSS. Specifikace WAP 2.0 má ale především vyšší přenosovou rychlost a je také nutné zdůraznit zpětnou kompatibilitu, tedy podporu zobrazování stránek, vytvořených jazykem WML. Wapová brána operátora, která tuto novou technologii podporuje (např. T-Mobile), zabezpečuje i obousměrnou transkripci obsahu wapových stránek, tedy obsah by měl být přizpůsoben konkrétnímu typu mobilního přístroje, s nímž uživatel přistupuje na WAP. Realita je ale zatím pochopitelně trochu jiná především z hlediska problematické implementace XHTML a CSS v mobilních zařízeních (i když na druhé straně již mnohé mají zabudované klasické internetové prohlížeče - např. Nokia 6230i) a tak raději s tvorbou WAPu těmito moderními technologiemi nespěchejme a ještě chvíli zůstaňme věrni jazyku WML. Základní kostra XHTML-MP dokumentu s připojeným CSS a ukázka formuláře: <DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" xml:lang="cs"> <head> <title>wap s CSS a formularem</title> <link rel="stylesheet" href="style.css" type="text/css"

5 media="handheld" /> </head> <body id="main"> <form method="get" action="url adresa"> Jmeno: <input type="text" name="jmeno" /><br /> Heslo: <input type="password" name="heslo" /><br /> <input type="submit" value="odeslat" /> </form> </body> </html> Poznámka: k dalšímu studiu problematiky syntaxe jazyka XHTML-MP doporučuji např. materiály na a 4. ČEŠTINA NA WAPU POUŽITÍ ZÁSTUPNÝCH ENTIT Poměrně často řešeným problémem mezi vývojaři WAP aplikací je práce s českými znaky. Není totiž možné do zdrojového WML kódu napsat text s diakritikou jako do webové stránky. Tento způsob téměř většinou nefunguje, na WAPu je problematika diakritiky totiž poněkud komplikovanější než na webu. Zobrazování českých znaků ve WAPu ovšem v zásadě možné je, ale způsob jejich zápisu do zdrojového kódu stránek je poněkud nepohodlný. Tento nepohodlný způsob totiž spočívá v nutnosti nepsat přímo samotné znaky, ale uvést jejich umístění v tabulkách znaků, tedy formou tzv. zástupných entit (symbolů). Uvedený způsob je otestován přes gateway našich operátorů a prostřednictvím několika mobilních telefonů s WAPem. Do zdrojového WML kódu stránek je tedy třeba místo požadovaných českých znaků umístit řetezce dle následující tabulky. Tabulka zástupných entit českých znaků ě ě Ě Ě š š Š Š č č Č Č ř ř Ř Ř ž ž Ž Ž ý ý Ý Ý á á Á Á í í Í Í

6 É é É É ú ú Ú Ú ů ů Ů Ů ó ó Ó Ó ť ť Ť Ť ň ň Ň Ň ď ď Ď Ď Pro vývojáře je však silně nepraktické veškeré české znaky ve zdrojovém kódu stránky postupně nahrazovat těmito entitami. Konverzi na znakové entity za nás naštěstí může udělat program, jeden takový připravil Jiří Kosek a můžete si ho stáhnout z adresy POUŽITÍ KÓDOVÁNÍ Další možností, jak zobrazit na mobilním telefonu české znaky s diakritikou, je použití správného kódování. Nabízí se tedy použití kódování ISO , které se používá především na unixových systémech, ale podporují ho i některé aplikace pro Windows. Všechny telefony, které jsem měl v ruce, toto kódování zvládly. O konverzi kódování se však z principu stará brána operátora a podle mých zkušeností si všichni čeští operátoři poradí i s kódováním obvyklým ve Windows (windows-1250). Osobně tedy doporučuji stránky vytvářet v kódování ISO Tento způsob je funkční a vyhovuje standardům WML. Použití windows-1250 je také možné, ale WAPfórum nijak oficiálně toto kódování nepodporuje. Jediná změna, která nás na stránkách tedy čeká při použití těchto kódování, je správné uvedení kódu v deklaraci na začátku WML stránky: <wml> <card title="cs v iso "> <p align="left">příliš žluťoučký kůň úpěl ďábelské ódy.</p> </wml> Příklad wapu (tuto ukázku najdete také na <wml> <card id="prvky" title="ukazky Wap prvku">

7 <p align="left"> <small> <b>ukazky Wap prvku:</b><br /><br /> <b>tucny text</b><br /> <i>kurziva</i><br /> <u>podtrzeny text</u><br /> <big>text velkym fontem</big><br /> <small>text malym fontem</small><br /> <strong>silny text</strong><br/><br /> <b>tabulka</b><br /> <table columns="3" align="rcl" border="5"> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> </table> <br/><br/> <b>prvek Input</b><br /> <input type="text" name="vstup"/><br /><br /> <b>vyber ze seznamu</b><br /> <select name="seznam"> <option>hyundai</option> <option>mazda</option> <option>honda</option> </select> <br/><br/> <a href="soubor.php?vstup=$(vstup)">odesli</a> <br/><br/> <a href="soubor.php?vstup=$(vstup)&seznam=$(seznam)"> Odesli </a>

8 <br/><br/> <form method="get" action="stranka.html"> <b>prvek Input - odeslani - 2. varianta</b><br /> <input type="text" name="vstup" /><br /><br /> <b>vyber ze seznamu</b><br /> <select name="seznam"> <option>hyundai</option> <option>mazda</option> <option>honda</option> </select> <br /><br /> <input type="submit" value="odeslat" /> </form> <br /><br /> <b>obrazky</b> (*.wbmp)<br/> <img src="phone.wbmp" alt="obrazek" /> <img src="beer.wbmp" alt="obrazek" /> <img src="mailbox.wbmp" alt="obrazek" /> <br /><br /> <b>tlacitka</b><br /> (zobrazena vzdy dole na displeji nebo v Menu mobilu)<br/> <do type="accept" label="kontakt"> <go href="#druha_karta" /> </do> <do type="accept" label="konzultace"> <go href="#treti_karta" /> </do> <do type="accept" label="odesli" > <go href="adresa_skriptu" method="post" /> </do> </small>

9 </p> <!-- Dalsi karty --> <card id="druha_karta" title="kontakt"> <p align="left"> <small> <b>kontakt:</b><br /> Domu: <br /> Prace: <br /> Mobil: <br /> /> </small> </p> <card id="treti_karta" title="konzultace"> <p align="left"> <small> <b>konzultace:</b><br /> Streda 13:30-15:00<br /> Ctvrtek 13:30-15:30 </small> </p> </wml>