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



Podobné dokumenty
WAP. Jirka Kosek. IZI228 tvorba webových stránek a aplikací. Poslední modifikace: $Date: 2004/09/30 09:02:59 $ Copyright Jiří Kosek

Uspořádání klient-server. Standardy pro Web

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT

APLIKACE XML PRO INTERNET

HTML Hypertext Markup Language

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

Vývoj Internetových Aplikací

WWW a HTML. Základní pojmy. Ivo Peterka

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Úvod do aplikací internetu a přehled možností při tvorbě webu

Inovace výuky prostřednictvím šablon pro SŠ

Tvorba WWW stránek. Mojmír Volf

Tvorba webu. Úvod a základní principy. Martin Urza

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

HTML - Úvod. Zpracoval: Petr Lasák

Úvod do tvorby internetových aplikací

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Internet 2 css, skriptování, dynamické prvky

(X)HTML, CSS a jquery

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy WWW publikování

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

13. Vytváření webových stránek

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

NSWI096 - INTERNET. Úvod do HTML

KIV/PIA 2012 Ing. Jan Tichava

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1

Internetové technologie, cvičení č. 5

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

MODERNÍ WEB SNADNO A RYCHLE

Obsah. Stručná historie World Wide Webu 7

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

22. Tvorba webových stránek

Mgr. Vlastislav Kučera lekce č. 2

Tvorba webových stránek

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita

Internet 1 vývoj, html, css

Jazyky pro popis dat

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

Tvorba webových stránek

rychlý vývoj webových aplikací nezávislých na platformě Jiří Kosek

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Návrh a tvorba WWW stránek 1/8. Formuláře

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

Úvod do tvorby internetových stránek v jazyce HTML

Webová stránka. Matěj Klenka

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

IE1 jazyk HTML a kaskádové styly

Internetové publikování

Obsah prezentace. Co je to XML? Vlastnosti. Validita

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

IE1 jazyk HTML a kaskádové styly

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ

Tvorba webu v HTML. Redakční systém. CMS Joomla! Co je Joomla

Registrační číslo projektu: Škola adresa:

Platební systém XPAY [

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Mgr. Stěpan Stěpanov, 2013

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý

INFORMAČNÍ SYSTÉMY NA WEBU

Tvorba webových stránek

Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

Tvorba jednoduchých WWW stránek

DUM 14 téma: Interakce s uživatelem

Connection Manager - Uživatelská příručka

(X)HTML a CSS. VOŠ a SŠT Česká Třebová

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Tvorba jednoduchých WWW stránek

CSS Stylování stránek. Zpracoval: Petr Lasák

Tvorba webových stránek

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Mgr. Vlastislav Kučera přednáška č. 2

Protokol HTTP 4IZ228 tvorba webových stránek a aplikací

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Tvorba stránek v HTML ve Wordu

Syntaxe XML XML teorie a praxe značkovacích jazyků (4IZ238)

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty

CZ.1.07/1.5.00/

Kaskádové styly základy grafiky

Základy HTML. Autor: Palito

Bottle -- příklad. Databáze. Testovací data. id Jedinečný identifikátor řádku: Bude typu INT s AUTO_INCREMENT a nastavíme ho jako primární klíč

Úvod do jazyka HTML (Hypertext Markup Language)

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy XML struktura dokumentu (včetně testových otázek)

PHP. Čtvrtek 8. září. Čtvrtek 15. září. Anonymní test znalostí

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Stránka se dá otevřít dvěma způsoby

Základní práce v souborovém manažeru

Redakční systém Joomla. Prokop Zelený

Transkript:

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 www.mysiemens.cz/ms/software.php?k=5) Pokročilým pak doporučuji např. vývojový nástroj a zároveň simulátor Nokia Mobile Internet Toolkit (download na http://www.forum.nokia.com/main/0,,034-13,00.html) 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.

Mobilní telefon, podporující WAP WAP browser (WML prohlížeč) pro PC - doporučuji např. WinWAP (download opět na www.mysiemens.cz/ms/software.php?k=5) Webový on-line emulátor WAPu: český Smith (www.ceskywap.cz/smith), nebo ccwap-browser (http://217.115.141.136:8002/) či TTemulator (www.inetis.com/ttemulator.asp) a Opera mini simulátor (www.opera.com/mini/demo) WML validátor (např. W3Schools na www.w3schools.com/wap/wml_validate.asp) WAP vyhledávač (www.google.com/xhtml) 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 www.pf.jcu.cz/pepe/wap/, 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 www.mysiemens.cz/ms/software.php?k=5) 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

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 http://www.wapforum.org/dtd/. 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 10646 (Unicode 2.0) a podporuje jakékoliv podsady znaků sady Unicode (např. US-ASCII, ISO-8859-1, nebo UTF-8, pro české entity ISO-8859-2). 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

</wml> </p> Poznámka: velikost souborů, které tvoří jednotlivé dokumenty WAPu, by neměla přesáhnout doporučenou hranici 1 397 bajtů, i když nejnovější mobilní telefony jsou schopné zobrazit stránky o velikosti až do 3 000 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" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs"> <head> <title>wap s CSS a formularem</title> <link rel="stylesheet" href="style.css" type="text/css"

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 http://interval.cz/serialy/wap-2-0-nove-moznosti-s-xhtml/, http://www.wapforum.org/tech/documents/wap-277-xhtmlmp-20011029-a.pdf a http://developer.openwave.com/documentation/xhtml_mp_css_reference/. 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ů ě ě Ě Ě š š Š Š č č Č Č ř ř Ř Ř ž ž Ž Ž ý ý Ý Ý á á Á Á í í Í Í

É é É É ú ú Ú Ú ů ů Ů Ů ó ó Ó Ó ť ť Ť Ť ň ň Ň Ň ď ď Ď Ď 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 http://www.kosek.cz/sw/convert/. 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-8859-2, 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-8859-2. 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-8859-2"> <p align="left">příliš žluťoučký kůň úpěl ďábelské ódy.</p> </wml> Příklad wapu (tuto ukázku najdete také na www.pf.jcu.cz/pepe/wap/prvky.wml): <wml> <card id="prvky" title="ukazky Wap prvku">

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

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

</p> <!-- Dalsi karty --> <card id="druha_karta" title="kontakt"> <p align="left"> <small> <b>kontakt:</b><br /> Domu: +42-038-5344470<br /> Prace: +42-038-7773075<br /> Mobil: +42-0603-327457<br /> E-mail: pepe@pf.jcu.cz<br /> http://www.pf.jcu.cz/pepe </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>