WAP-ra fel!

 

Üdv mindenkinek! Talán gondolkodtatok már azon, hogy legyen egy WAP-oldalatok amit a mobiltelefonodról, PDA-ról,.... is elérhetnétek. Ha tetszene az ötlet akkor neked készült ez a cikk. Az elején az alapdolgokkal fogunk foglalkozni (szóval a kezdők is bátran nekiállhatnak), de később belemegyünk a nehezebb dolgokba is (adatbáziskezelés, WAP-PHP, WML scriptek,....). Annyit még elárulok, hogy a legvégén amikor már az utolsó fázison is túl vagyunk, akkor csinálunk egy ... de ez maradjon titok (de nem egy komplett oldalt, valami sokkalta jobbat tervezek J). Azt már most megígérem, hogy nagyon érdekes lessz ez a közös kalandozásunk a WAP országában.

 

 

1.:Mi is kell a kirándulásunkhoz?

 

Először is valamilyen szerkesztő. A már-már professzionálisJ(!) szintű Notepad nekünk tökéletesen megfelel . Ha ez nem volna az ínyetekre, bármilyen más editor megteszi.

Nekem a kedvencem a Golden HTML Editor, ez bármilyen WAP-WEB szerkesztésre jó. Igaz nekem a cseh nyelvű van meg, de lehet hogy akad angol is. Itt egy kép róla:

 

  1. kép: Golden HTML Editor

 

 

Ezt letölthetitek a http://golden.zde.cz címről.

 

Még valami: ha php-ben akartok programozni akkor ez az editor tartalmaz egy olyan plugint is, amivel megnézhetitek az oldalt webszerver nélkül is.

 

Jó. Megírtuk a kódot, de mivel próbáljuk ki? Nos az 1. lehetőség az, ha feltöltitek egy szerverre (van ingyenes és fizetős, később írok róla), a 2. az, ha beszerzünk egy mobiltelefon szimulátort. Itt is van fizetős és nem fizetős. Én persze az ingyenesekről írok:

 

Kezdjük is mindjárt egy igazán nagymenővel:

 

Nokia WAP TOOLKIT

 

Nekem az 1.2-es verzió van meg, de van már újabb is. Ez egy eléggé öreg darab, de mindenre jó. Itt egy kép róla:

 

  1. kép: A  Nokia Wap Toolkit fejlesztői környezet

 

 

 

És két telefont is tud szimulálni:

 

 

 

Javaslat: Töltsétek le lehetőleg a legújabb verziót, mert mondjuk a 2.0-ás tudja szimulálni a Nokia 7110-t (WAP 1.1 böngésző) és a telefon prototípusát (WAP 1.2 böngészővel). A szimulátoron kívül van még benne WML szerkesztő, WML szkript szerkesztő és WBMP-képszerkesztő (csak a 2.0-tól), meg még sok egyéb.

Egy szó mint száz: minél újabb annál jobb(!)

Tippek:

Ha azt akarjuk, hogy ékezetes betűknél ne kapjunk hibaüzenetet akkor állítsuk át:

Toolkit ==> Preferences ==> keressük meg, hogy hol lehet megváltoztatni a betűkészletet: Az 1.2 verziónál kattintsunk az Encoding fülre majd a legördülő menüből választjuk ki a Latin1 betűkészletet.

Megjegyzés:

 Ez senkinek az eszköztárából sem maradhat ki.

Letöltés:  Nokia WAP Toolkit

 

Mérete: kb. 7MB

 

UP.SDK 4.0

A Phone.com által kibocsátott fejlesztői környezet jóval szegényebb, mint a Nokia fejlesztői környezete, mert csak egy telefon szimulátort találhatunk benne. Biztos, hogy az oldalainkat ki tudjuk próbálni benne/rajta, mert a Phone.com majdnem az összes (!) telefonnak tudja szimulálni a WAP-böngészőjét a Nokiával és az Ericssonnal ellentétben.

3. kép: UP.SDK 4.0

 

Az egyik negatívum, hogy az UP.Simulator az oldalakat csak a webszerverről tudja beolvasni, nem pedig a merevlemezről. Ha mégis benne szeretnénk az oldalainkat kipróbálni, muszáj lesz egy webszervert feltennünk (pl. Apache). A későbbiekben majd bemutatom, hogy hogyan kell egy ilyen webszervert beállítani és ez hogyan működjön együtt a WAP oldalainkkal.

 

Ericsson WapIDE SDK 2.1

Ez egy igazi nagyágyú! A WapIDE-nek az Ericssontól igazán sok funkciója van (rengeteg). A böngészőn kívül tartalmazza az AppDesigner-t , ami egy igazán könnyen kezelhető fejlesztői környezet, egy forráskód szerkesztőből és egy telefon szimulátorból áll.

4. kép: Az AppDesigner az Ericssontól - ha letöltöd nem bánod meg!

Az Ericsson továbbá terjeszt egy önálló R380-as telefon szimulátort is, de ezenkívül még jó sok modellt.

5. kép: Wap - szimulálása Ericsson R380 - modellen.

 

Letöltés: Minden eszközt le lehet tölteni az Ericsson fejlesztői oldaláról

Aztán még vannak egyéb kisebb-nagyobb szerkesztők is:

WAPtor 3.0

A WAPtor egy cseh fejlesztésű WML szerkesztő, amely megkönnyíti a forráskód szerkesztését - a fenti eszköztárból kiválasztjuk, hogy mit akarunk beszúrni, és máris ott terem a forráskódban. Tartalmaz még egy egyszerű böngészőt is. Ami megkülönbözteti a többitől az a mérete. Nem falja a merevlemezt - még jó:) - a letöltött állomány mindössze 1,15 MB, és kicsomagolva sem haladja meg a 4,8 MB-ot. Ebben minden tulajdonság meg van amit eddig vagy még csak most fogunk használni (tábla beszúrása, kép beszúrása, hivatkozás, vastag betű, aláhúzott, stb.). A programhoz le lehet tölteni a magyar menüt is. Továbbá képes a következő telefonokat szimulálni: Nokia 7110, Siemens S35i, Ericsson R320 , Ericsson R380, Motorola T7389 és még Palm-ot is tud szimulálni – PalmPilot

6 kép: WAPtor – kicsi, de nagyon ügyes, nem hiányozhat senkinek az eszköztárából

A szimulátor része:

 

WapDev WapToolkit

 

Ez egy profi kis wapoldal szerkesztő. Tud képet is csinálni WAP-ra (wbmp formátum), és rengeteg egyéb dolgot tud mellette.

 

7. kép: WapDev WapToolkit

 

 

Sokkalta jobb mint a Waptor, igaz ez egy kicsit nagyobb.

Nagyjából ugyanazt tudja mint a Waptor csak profibbnak látszik és valóban az is. Csak a wap-böngészője nem az igazi (nem tud telefont szimulálni). Mindenkinek be kell szerezni J

 

Letöltés: www.wapdev.sk

 

Ha nem tudnátok szlovákul és ezért nem tudnátok letölteni, akkor nyugodtan írjatok.

Ezeken kívül még rengeteg wap-szerkesztőt találhattok a weben, „aki keres az lehet, hogy talál“- az idézet tőlem.

 

Az első oldal

Aki már programozott html-ben annak ismerős lesz ez a nyelv is, nézzük meg, hogyan lehet létrehozni működő oldalakat.

A legegyszerűbb forráskód így néz(het) ki:

1. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card>

    <p>Az első oldalunk.</p>

  </card>

</wml>

Az első 3 sort minden oldalunknak kell tartalmaznia, mert a wap verzióját adjuk meg vele.

Ezután a <wml> elem következik, mindig ezek közé zárjuk a wap oldalainkat. Következzen a <card> elem. Itt megállunk egy pillanatra: Ez az első oldalunk, egy  „kártyából” áll. Mi is ez a „kártya”? Az oldalunk egy kártyából és egy bekezdésből áll, új bekezdést a <p> elemmel nyithatunk.

 

Az oldalak kipróbálása

Az oldal elkészítése után valamin meg kell néznünk az oldalt. Nem muszáj egyből keresnünk egy telefont amiben benne van egy WAP böngésző és fizetni a drága összegeket a WAP használat miatt. Léteznek speciális böngészők, amelyek meg tudják jeleníteni a WAP oldalakat (pl.: WinWAP). Az első teszteléseknél ez elég . Még jobb használni úgynevezett szoftveres szimulátorokat, amelyek valamilyen mobiltelefon gyártó cégek(pl. Nokia , Ericsson) mobiljait szimulálják, hogy mi a számítógépükön tudjuk tesztelni az oldalakat. A legjobbak közé tartozik a Nokia WAP Toolkit nevű program (lásd feljebb), amely a szimulátoron kívül tartalmaz még fejlesztői környezetet: szerkesztőt és további kisebb dolgokat. A képen meg lehet nézni ,hogy hogyan néz ki a mi első oldalunk amit készítettünk .

8. kép: Az első oldalunk

Mielőtt kitennénk az oldalt a hálóra, muszáj legalább egyszer megnéznünk valamilyen mobiltelefonon, vagy legalább egy szimulátorban. Minden telefonnak különbözik a kijelzője és a szoftvere, amellyel a WML oldalt megjeleníti. Előzzük meg tehát azt a kellemetlen meglepetést , hogy valamelyik felhasználónak az oldal furcsán jelenjen meg , vagy rosszabb esetben sehogy sem jeleníti meg az adott oldalt. A web programozók ezt a lépést jól ismerik, ellenőrzik az oldal végső kinézetét Internet Explorerben és Netscape Navigatorban.

 

Betűk és stílusok

A mobiltelefonok nem rendelkeznek semmilyen különleges kijelzővel ezért a betűk választéka igencsak korlátozva van. Mindenesetre nem választhatunk egy konkrét betűtípust valamilyen mérettel, amilyet választottunk a számítógépükön. Ezekben a Wap-böngészőkben megtekinthetjük, hogy hogyan fog kinézni a valóságban a kiválasztott betűtípusunk.

Ha valamit meg akarunk jeleníteni, használjuk az em és a strong objektumokat. Rendszerint dőlt és kövér :) betűkkel jelennek meg, de ez nem feltétel.

Dőlt betűt még úgy is kapunk, ha valamilyen szöveget az i objektum közé zárunk. A kövér betűtípust úgy kapjuk, ha a b objektum közé zárunk, és aláhúzott szöveget pedig úgy kapunk, ha a szöveget a u objektum közé zárunk.

Figyelem:  Szándékosan nem írtam ki az ékezeteket! Néhány telefon nem támogatja az ékezeteket. De ha ez neked nem számít akkor nyugodtan írd úgy.  A későbbiekben majd írok róla, megmutatom hogy-hogyan kell ékezetekkel bánni.

3. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

                     "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card>

<p>Sima, <em>kiemelt</em>, <strong>erosen kiemelt</strong>.</p>

<p><i>Dolt</i>, <b>kover betu</b> és <u>alahuzott</u>.</p>

<p><small>Kis betu</small> es <big>nagy betu</big>.</p>

      </card>

</wml>

 

A példában még szerepel a small és a big objektum, amelyek arra szolgálnak, hogy átkapcsoljunk kis illetve nagy betűre.

 

9. kép: Betűstílusok

Egy kicsit más kategóriába tartozik a br objektum. Ott azon a helyen ahová beszúrjuk befejezi az adott sort. Úgy használjuk, hogy a sor végére amit törni akarunk beszúrjuk egy / jellel –  <br/>. Tehát, a br objektumnak üres a tartalma ,és nem tartalmaz semmi továbbit. Egy kis példa:

3. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

                     "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card>

    <p>Mit kell vennem:<br/>

      - tej<br/>

      - bor<br/>

      - sajt</p>

  </card>

</wml>

 

10. kép: A <br/> objektumot -általában- az áttekinthetőségre használjuk

Minden oldalnak(“kártyának”) érdemes adni egy rövid feliratot, hogy tudjuk hol járunk. Ez olyan mint a HTML-programozásban a <title> objektum. A WML-nyelvben a card objektumot használjuk az oldalunk “fejlécéhez”. Most nézzünk egy példát erre is:

4. példa:

<?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="Proba oldal">

    <p>Hello.</p>

  </card>

</wml>

Az objektum értéke (lásd fejléc szövege) mindig: APOSZTRÓF(' '),vagy MACSKAKÖRMÖK(“ “) között kell hogy legyen!

 

11. kép: Minden oldalnak legyen fejléce

Utószó:

Azt hiszem ennyi elég lesz mára. Gyakoroljátok az eddigieket, állítsátok fel a fejlesztő rendszereteteket, és keressetek a weben wapos programokat. Ha rábukkantatok valami érdekesre, akkor írjátok meg nekem. Ha segítségre van szükségetek akkor írjatok. Ha lesznek érdekes levelek, majd a cikkbe/cikkekbe azokat is beleépítem. A következőkben majd ismét tovább megyünk, egyre nehezebb és nehezebb (!) dolgokkal ismerkedünk majd meg. Terveim szerint a következő témákkal fogunk foglalkozni:

1.:Hivatkozások…

2.: Több kártya egy oldalon

3.: Navigáció a kártyák között

Aztán jön a tulajdonképpeni Wap oldal készítés:

Táblák, képek, ékezetek, ….és még rengeteg sok minden. Komolyan.

A forráskódokat is elérheted a wap.zip letöltésével

 

Mihálko Adrián - adriankoooo@orangemail.sk