XHTML

3. XHTML

3.1 YLEISKATSAUS

WAP Forumin kehittämät Mobile Internet -standardit ovat yhteneviä World Wide Web Consortiumin luomien Internet-standardien kanssa. Talouselämän kannalta tästä on merkittäviä etuja:

Olemassaoleva HTML-sisältö on helppo muuttaa WAP 2.0:n mukaiseksi XHTML-sisällöksi, joten muutostyö on nopeaa ja vaivatonta, eikä tule niin kalliiksi kuin kaiken aloittaminen 'puhtaalta pöydältä'.

XHTML ja CSS tarjoavat mahdollisuuden tekstin, grafiikan ja muiden elementtien tarkkaan asemointiin, joten kaikkien mobiililaitteiden pitäisi kyetä näyttämään sisältö yhdenmukaisesti. Näin sisällön tuottaminen ei törmää niin moniin yleiskäyttöisyyden puutteisiin kuin yksin WML:n keinoin tuotettujen palveluiden laita oli.

Sovelluskehittäjillä on jo entuudestaan ainakin jonkin verran kokemusta XHTML:n ja CSS:n käytöstä. Toisaalta myös Web-työkalut ja palvelinohjelmat tukevat jo näitä standardeja.

Web-standardien tulevaisuuden kehitys tulee sisältämään sekä perinteisen että langattoman Internetin tekniikat.

Tämä oppijakso tarkastelee XHTML:n käyttöä mobiilissa ympäristössä ja käyttää siitä termiä XHTML MP, missä MP on lyhenne sanoista Mobile Profile. WAP CSS ilmaistaan lyhyemmin WCSS. Jakso kuvailee mobiilin sisällön ohjelmointia, joka poikkeaa melkoisesti perinteisen Web-sisällön kehittämisestä suuremmille näytöille. Jaksossa tarkastellaan myös muiden kielten ja WAP 2.0:n eroja, mikä auttanee sellaisia sovelluskehittäjiä, joilla on kokemusta Web- ja WML-kehityksestä. Lopuksi tarkastellaan muutamaa WAP 2.0 sovellusesimerkkiä, joista on apua alkuunpääsyssä ja jotka toivottavasti rohkaisevat kohti haasteellisempia mobiilisovelluksia.

Erittäin helppo esimerkki

Aluksi yksinkertainen XHTML-esimerkki:

1. Avaa Nokia Mobile Internet Toolkit.

2. Avaa uusi XHTML MP dokumentti.

3. Lisää otsikko (ks. Title -elementti).

4. Lisää tekstikappale (ks. Teksti ja Lista -elementit).

5. Lisää linkki tiedostoon munfile2.xhtml (ks. Ankkuri -elementit).

6. Tallenna tiedosto nimellä munfile1.xhtml

7. Klikkaa Show ja katso tulos Toolkitin puhelinsimulaattorista.

8. Avaa uusi XHTML MP dokumentti.

9. Tallenna tiedosto nimellä munfile2.xhtml

10. Klikkaa Show ja katso uudelleen munfile1.xhtml Toolkitin puhelinsimulaattorista. Valitse sitten linkki tiedostoon munfile2.xhtml; tarkista, että toinen sivu näkyy.

11. Lisää tiedostoon munfile1.xhtml toinen linkki, joka soittaa määrittelemääsi puhelinnumeroon rutiinilla wtai://wp/mc; (ks. Ankkurit puhelinsoitoille).

Luomasi 1. dokumentin (munfile1.xhtml) listaus, esimerkiksi:

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<!--

Muuta alla oleva href="style.css" tiedostonimi ja

relatiivinen polku tai URL oman ulkoisen tyylitiedostosi mukaiseksi.

-->

<!--

-->

</head>

<body>

<p>

Tervetuloa sivuilleni! <br/>

1. <a href="munfile2.xhtml" accesskey="1">Seuraava sivu</a><br/>

2. <a href="wtai://wp/mc;123456789" accesskey="2">Soita äiskälle</a><br/>

</p>

</center>

</body>

</html>

Ja munfile2.xhtml listaus, esimerkiksi:

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

</head>

<body>

<strong>Se näemmä toimi!</strong><br/>

Takaisin <a href="munfile1.xhtml" accesskey="1">ekasivulle</a><br/>

</p>

</center>

</body>

</html>

3.1.1 Merkintäkielet

SGML (Standard Generalized Markup Language) oli ensimmäinen yleiseen käyttöön tarkoitettu merkintäkieli dokumenttien rakenteen kuvaamiseen tietokoneympäristössä. Se muodostuu joukosta merkintätageja, elementtejä, jotka yksilöivät sisällön luonnetta tai tarkoitusta. Tagien määritykset kirjoitetaan "<" ja ">" -merkkien sisään erotukseksi muusta sisällöstä.

SGML antoi mahdollisuuden muotoilla ja määrätä dokumentin rakennetta vakiinnuttamalla säännöt eri elemettien käytölle dokumentissa. Document Type Definition (DTD) on dokumenttimääritys, joka erityistä syntaksia käyttäen määrittää, mitä elementtejä dokumentissa voidaan käyttää ja missä järjestyksessä elementit voivat esiintyä. Tämä loi pohjan myös mm. sisäkkäisten elemettien käytölle jne.

SGML on yleinen merkintäkieli ja antaa siten mahdollisuuden luoda eri tyyppisiä dokumentteja erilaisia DTD:itä käyttäen. Joten esimerkiksi tietokoneohjelmiston käyttöohjetta varten voi olla erillinen DTD, samoin matemaattista dokumenttia, tarjousasiakirjaa jne.

HTML on SGML:ään perustuva merkintäkieli, jolla voidaan kirjoittaa sisältöä Web-selaimella esitettäväksi. Tämä varsin laajasti käytetty, suosittu merkintäkieli ei tarkkaan ottaen kuitenkaan ole ilmentymä SGML:stä, koska se ei vaadi DTD:n käyttöä eikä tiukkaa SGML:n määritysten noudattamista elementtien käytössä. HTML sallii esimerkiksi avointen elementtien (kuten <p>) käytön ilman lopetustagia (</p>).

Kun ajan myötä ilmeni tarve kehittyneemmälle merkintäkielelle kuin HTML - joka itse asiassa soveltuu hyvin vain sisällön esittämiseen- keksittiin XML (Extensible Markup Language). XML on täsmällinen ja samalla joustava merkintäkieli, joka soveltuu mainiosti esimerkiksi sähköisen kaupan tarpeisiin, palvelinpään tietokantapohjaisiin sovelluksiin ja moniin muihin käyttötarkoituksiin.

XHTML edustaa seuraavaa kehitysaskelta HTML:stä eteenpäin ja tuo siihen XML-kielille ominaista tarkkuutta ja säännönmukaisuutta. WML (Wireless Markup Language) on niinikään XML-kieli. Sillä on oma DTD ja se on kehitetty sisällön kirjoittamiseen langattomissa päätelaitteissa esitettäväksi.

3.1.2 WAP ja WML

Wireless Application Protocol on joukko globaaleja standardeja, joiden mukaan määritettyjä protokollia, merkintätapoja ja komponentteja käytetään langattoman Internetin sovelluskehityksessä ja näyttämisessä. WAP on suunniteltu mukautumaan kannettavien päätelaitteiden pienen muistin ja näytön rajoituksiin. Vuonna 1998 WAP Forum kehitti uuden merkintäkielen nimeltä Wireless Markup Language 1.1 (WML) ja verkkoprotokollan nimeltä Wireless Protocol Stack (WPS). Sittemmin WML 1.1 on tullut päivitetyksi aina versioon 1.3.

Vaikka WAP 1.x toimiikin kohtuullisen hyvin -ainakin GPRS yhteydellä- on WAPin kaupallinen menestys kuitenkin ollut toistaiseksi vaatimatonta, osittain koska mobiilien sovellusten kehitystyö ei uuden kielen ja työkalujen takia ole ollut aivan helppoa. Toisaalta Web-palvelimet ovat vaatineet konfigurointia tukemaan uutta sisältötyyppiä, mikä ei sekään ole aivan yksinkertaista. Lisäksi WML:n mahdollisuudet kontrolloida sisällön asettelua ja eräitä muitakin ominaisuuksia ovat rajalliset. Tuloksena on ollut lähinnä Webin ensimmäisen sukupolven sivuja muistuttavia, mustavalkoisia ja näytön vasempaan reunaan takertuvia tuotoksia, joiden käytettävyyskin on ollut turhan vaikeaa.

Vakavin WML:n puute on, että määrittely ei sisällä sääntöjä visuaalisten elementtien näyttämiseksi sivulla. Näin jokaisen päätelaitevalmistajan selain näyttää saman WML-sisällön dramaattisesti eri tavoin, vaikka koodi olisi kuinka tarkkaan WML-määritysten mukaista. Tämä on johtanut pahoihin yleiskäyttöisyyden puutteisiin ja turhauttanut sovelluskehittäjiä, joiden on täytynyt jäljittää eri esitysympäristöt ja käytännössä räätälöidä koodit eri WML:n ilmentymille. XHTML MP ja WCSS tuovat merkittäviä parannuksia ja yhdenmukaisuutta layoutin johdonmukaiseen hallintaan.

3.1.3 XHTML Basic

W3C:n (World Wide Web Consortium) XHTML-määrityksen mukainen XHTML Basic DTD on dokumenttityyppinä kyllin monipuolinen ja layoutiltaan täsmällinen sisällön tuotantoon ja jakeluun eri tyyppisille päätelaitteille: työasema-, PDA-, TV- ja käsipuhelinkäyttöön. XHTML Basic on mobiili mukaelma XHTML 1.0:stä ja sisältää kaikki samat ominaisuudet kuin XHTML 1.0 paitsi niitä, mitkä eivät sovellu sellaisille laitteille, joissa on pieni näyttö. Esimerkiksi kehysten (frames) käyttöä ei XHTML Basic-koodissa tueta. WAP Forum on määritellyt XHTML MP:n, joka parantaa XHTML Basicin valmiuksia lisäämällä seitsemän käyttökelpoista elementtiä ja attribuuttia täysimittaisesta XHTML:stä.

XHTML itse on ensimmäinen suurempi kehitysaskel HTML:stä eteenpäin sitten vuoden 1997, jolloin HTML 4.0 julkaistiin. Itse asiassa yleisimmät XHTML:n tagimääritykset ja syntaksi ovat samoja kuin HTML:n uusimmassa versiossa 4.1. XHTML vain tuo kieleen lisää modulaarisuutta ja tiukempaa yhtenevyyttä XML-kielen sääntöihin. Tulos on, että XHTML tuo puhtautta Web-sivujen rakenteeseen, mikä on varsin tervetullutta ja tärkeää laitteille, joissa on pieni näyttö ja rajoitetusti akkukapasiteettia. W3C suositteleekin XHTML:n käyttöä kaikkeen tulevaisuuden Web-sovelluskehitykseen, olipa kysymys työasemasovelluksesta tai mobiilisivusta.

XHTML on kulmakivi W3C:n pyrkimyksissä luoda standardit, jotka takaavat monikäyttöisen Web-sisällön yhä laajenevalle laitealustojen ja päätelaitteiden kirjolle. XHML:n avulla palveluntarjoajien on helpompi tuottaa sisältöä laajalle laitealustavalikoimalle, kun on varmuus siitä, miltä sisältö näyttää päätelaitteissa.

Muutama XHTML:n lisäetu HTML:ään verrattuna:

· Dokumentit voidaan validoida huomattavasti helpommin.

· Dokumentit voidaan muuttaa tietyillä työkaluilla -kuten XSLT- mobiililaitteiden käyttöön.

· Dokumenttien virheet saadaan jäljitetyksi nopeammin.

· Tekstit voidaan varastoida tehokkaammin objektiorientoituun tietokantaan.

3.1.4 XHTML Mobile Profile

WAP Forum on ottanut XHTML Basicin pohjaksi W3C:n DTD:n ja spesialisoinut sen mobiiliselainten käyttöön lisäämällä siihen seuraavat elementit ja elementeissä käytettävät tyylitattribuutit:

· <hr>

· <b>

· <i>

· <big>

· <small>

· <style>

XHTML MP:n avulla dokumentti voidaan esittää maksimimäärälle Web-asiakkaita, kuten erilaisilla näyttöominaisuuksilla ja kapasiteeteilla varustetuille mobiililaitteille. Ja koska XHTML MP on sekä W3C:n että WAP Forumin hyväksymä, se on kiinteä osa koko Internetin käsittäviä standardeja, mikä puolestaan varmistaa sen kattavan hyväksynnän niin nyt kuin näköpiirissä olevassa tulevaisuudessakin.

3.1.5 WAP CSS

XHTML MP:n ydin on sen tuki CSS:lle (Cascading Style Sheets), joka kuvaa, miten sisältö esitetään selaimen ikkunassa. W3C on varsin aktiivisesti suositellut CSS:n käyttöä Webissä, olipa sovellukset tehty pöytäkoneiden tai kännyköiden selaimille. Käyttämällä CSS:iä dokumentin tekijät voivat valvoa sisällön esitystä menettämättä laiteriippumattomuutta tai lisäämättä koodiin muiden merkintäkielten tageja, kuten piti tehdä WML 1.x:n aikaan.

WAP CSS (WCSS) on CSS:n osajoukko ja tarkennettu pienille mobiililaitteille sopivaksi. WAP Forum on jättänyt määrityksistä pois ominaisuudet, jotka eivät sovellu pienille laitteille.

Käyttämällä CSS:iä dokumentin tekijä voi määritellä koko Web-sovelluksen esitystavan yhdessä paikassa: tyylitiedostossa. Jos tekijän tarvitsee joskus muuttaa sovelluksen esitystapaa, hän voi tehdä sen yksinkertaisesti editoimalla tyylitiedostoa. Muutos näkyy välittömästi kaikilla niillä sovelluksen sivuilla, joita asianomainen tyylitiedosto koskee.

CSS erottaa dokumentin tai sovelluksen sisällön sen esitysasusta eli ulkonäöstä. Tämä helpottaa sovelluskehittäjien vaivaa tehdä selainsidonnaisia versioita samasta sisällöstä yksinkertaisesti kirjoittamalla kuhunkin käyttöön sopiva tyylitiedosto. Esimerkiksi kun käyttäjän selaimelta tulee dokumenttipyyntö, palvelin pystyy tunnistamaan laitteen käyttämän selaimen ja palauttamaan sen mukaisen tyylitiedoston. Kun tyylitiedosto on ladattu selaimen välimuistiin, se on kaikkien alasivujenkin käytettävissä ja selaaminen sujuu jouheasti.

CSS:n voima sovelluskehittäjien kannalta on sen täsmällisessä kontrollissa, ja helppoudessa jolla sovelluksia voidaan optimoida erilaisille laiteympäristöille. Kaikki dokumentin esitysasun eri tekijät - asettelut, fontit, tekstin ominaisuudet, rajaukset, marginaalit, sisennykset - voidaan määrittää tyylitiedostossa. Laajankin sivuston minkä tahansa esitysasun tekijän muutos tarvitsee tehdä vain kerran.

3.1.6 WML- ja XHTML-siirtoprotokollat

Suurin osa nykyisistä mobiilisivuista on koodattu WML-kielellä, joka vaatii palvelimen ja selaimen väliin WAP Gateway:n muuntamaan WML- ja WML Script-sisällön binäärimuotoon.

XHTML-sisältö sen sijaan ei vaadi gatewayta vaan välitetään HTML:n tapaan palvelimelta selaimeen. Mutta koska olemassa oleva WML-sisältökin on edelleen käyttökelpoista ja sitä voi hyvinkin esiintyä vielä jonkin aikaa, osaavat WAP 2.0 standardin mukaiset selaimet näyttää sekä XHTML MP- että WML-sisältöä. Tällaisia kaksitoimisia selaimia käytetään, kunnes WML-sisältö on väistynyt XHTML MP:n tieltä.

3.2 SUUNNITTELUPERIAATTEITA

Tässä luvussa käsitellään aluksi yleisiä periaatteita hyvien mobiilisivujen suunnittelemiseksi ja jäljempänä esitetään yksityiskohtaisempia huomioita XHTML:n ilmentymistä ja elementeistä.

Ennen sivusuunnittelun aloitusta

Suunniteltaessa sovellusta, jonka on tarkoitus toimia sekä PC:ssä että mobiililaitteissa, kannattaa lähtökohdaksi asettaa hyvä käyttöliittymä mobiililaitteissa. Yleensä on helpompaa laajentaa mobiilisovellusta PC-ympäristöön sopivaksi kuin päinvastoin.

Jos PC-sovellus on kuitenkin suunnittelun lähtökohtana, kannattaa se pilkkoa osiin. Kun sovellusta konvertoidaan myöhemmin mobiiliympäristöön, on helppo ottaa käsittelyyn vain ne palaset, jotka ovat mobiililaitteiden kannalta ydinosia. Muutostyö on fokusoitavissa helposti ydinosiin.

Markkinoilla olevien erilaisten mobiiliselainten fyysisiä luonteenominaisuuksia kannattaa tutkia tehokkaan XHTML- ja CSS-suunnittelun pohjaksi. On tunnettava esimerkiksi dokumenttien ja kuvien suurin sallittu koko, näytön fyysisen tilan määrä sisällön esittämiseksi, näytön varaama tila otsikoille, ikoneille, symboleille jne.

Käyttökelpoisia testausympäristöjä löytyy esimerkiksi Internetistä. Yksi kätevimpiä työkaluja on Nokia Mobile Internet Toolkit, joka löytyy osoitteesta http://www.forum.nokia.com/ asiaan liittyvine ohjeineen ja linkkeineen. Toolkitiin on saatavana erilaisia Nokian puhelinsimulaattoreita, joilla voi testata sovelluksen käytettävyyttä.

XHTML MP ja CSS tuovat valinnanmahdollisuuksia käyttöliittymän rakenteen suunnitteluun. XHTML MP sisältää enemmän elementtejä kuin WML ja visuaalisten elementtien esittämistä näytöllä voi nyt modifioida monin tavoin CSS:n avulla. Palveluntarjoajille XHTML MP antaa mahdollisuuden tehdä sovelluksista entistä houkuttelevampia.

3.2.1 Valaiseva navigointimalli

Sovelluksen pitää tarjota käyttäjälle helppokäyttöinen käyttöliittymä, joka on varustettu johdonmukaisella, selkeällä navigointijärjestelmällä. Tämä on huomattavasti tärkeämpää kuin kikkailla XHTML:n suomilla uusilla näyttömahdollisuuksilla.

Mobiilikäyttäjän odotukset ja tarve poikkeavat PC-käyttäjän tottumuksista. Tyypillinen mobiilikäyttäjä ei ole niinkään selailija. Hän haluaa välitöntä ja helppoa pääsyä etsimäänsä informaatioon. Siksi mobiilikäyttäjälle kannattaa tarjota suppea, täsmällinen ja nopea tietopaketti, johon on helppo päästä käsiksi.

Varsinaista sisällön ydintä ei kannata hukuttaa liian prameaan pakettiin eli esimerkiksi useiden säkenöivien ruutujen taakse. Pieni ikoni tai logo brandin tunnistamiseksi riittää tuomaan tuttuuden tunnetta. Sovelluksen tarjoama olennainen informaatio kannattaa esittää käyttäjälle heti kun hän sitä pyytää.

Valintatilanteissa käyttäjälle kannattaa tarjota mieluummin oletusvaihtoehtoja esimerkiksi valintalistojen, valintalaatikoiden ja radionappien muodossa kuin pyytää häntä esimerkiksi kirjoittamaan valintansa tekstilaatikkoon.

Datan syöttö mobiiliympäristössä on merkittävästi vaikeampaa ja vie huomattavasti enemmän aikaa kuin PC-ympäristössä, joten sivut kannattaa suunnitella siten, että käyttäjän huoleksi jää tehdä mahdollisimman vähän syötteitä, varsinkin tekstin syöttöä. Jos on pakko pyytää syötettä, kannattaa käyttää -wap-input-format ominaisuutta asettamaan syöttömaski; ks. huomautus alla.

-wap-input-format:

CSS-ominaisuus -wap-input-format määrittää käyttäjän syöttämälle datalle syöttömaskin, joka eliminoi tarpeen vaihtaa teksti- ja numerosyötön välillä. Koska kuitenkin on vielä käytössä joitakin vanhoja selainversioita, jotka eivät tue em. ominaisuutta vaan tukevat vanhaa format="-" attribuuttia, on syytä määrittää sekä -wap-input-format CSS-ominaisuus että format -attribuutti varustettuna samalla string -arvolla (esimerkiksi N numeeriselle syötölle). WAP Format input maskin syntaksit löytyvät WAP June 2000-määrityksestä (WML) tai WAP Overview (WAPOver) -määrityksestä.

Monet käyttäjät maksavat vielä yhteydestään minuuttiveloituksen mukaan, joten jos he eivät pääse suoraan käsiksi etsimäänsä informaatioon, he poistuvat palvelusta. Tämä on toinen varteenotettava syy uhrata aikaa hyvän käytettävyyden ja selkeän navigoinnin eteen. Pääsy sovelluksen olennaiseen asiaan tulee olla mutkatonta ja nopeaa.

3.2.2 Navigoinnin hierarkia

Navigointimalli on se tapa, jolla käyttäjä kulkee läpi sovellusta edustavien XHTML-sivujen. Kulku perustuu pitkälle vuorovaikutukseen sovelluksen kanssa mm. linkkien, valikkojen ja datasyötön muodossa. Kun päätetään navigointimallista, on hyvä pitää mielessä muutama näkökohta:

· Navigointi kannattaa säilyttää yhtenäisenä läpi koko palvelun.

· XHTML-palveluissa on harvoin tarvetta linkittää edelliselle sivulle, koska nykyaikaisissa päätelaitteissa on paluunappi tätä tarkoitusta varten.

· Palveluun ei kannata suunnitella liian 'syvää' rakennetta. Useimpien käyttäjien on vaikea muodostaa selkeää kuvaa palvelusta, jos siinä on enemmän kuin neljä - viisi tasoa.

· Palvelun jokainen taso kannattaa linkittää selkeästi aloitussivulle. Näin käyttäjä pääsee koska tahansa takaisin lähtökohtaan. Mitä syvempi rakenne, sitä tärkeämpää on suora paluu alkuun.

3.2.3 Suunnittelu pienelle näytölle

Ennusteet osoittavat, että mobiililaitteiden määrä tulee maailmassa ohittamaan lähiaikoina työasemalaitteiden määrän. Mobiiliympäristö tarjoaakin valtaisat markkinat hyvin suunnitelluille, käyttäjäystävällisille sovelluksille, jotka on räätälöity nimenomaan pieninäyttöisille mobiililaitteille. Luova suunnittelu pienelle näytölle on kuitenkin haastavampaa kuin suurelle työasemanäytölle, mutta ei suinkaan mahdotonta. Käyttöliittymältään houkuttelevia sovelluksia on toki mahdollista suunnitella myös mobiililaitteille, kun pitää mielessään muutaman perusperiaatteen:

Aloitussivun on syytä olla kevyt, selkeä ja nopeasti latautuva.

Lyhyen sivuotsikon määrittämiseksi kannattaa käyttää <head> elementin sisällä <title> elementtiä joka sivulla. Yleensä otsikon tulisi mahtua korkeintaan viiteentoista merkkiin, ellei sivua olla räätälöimässä käyttäjien tietyille erikoislaitteille.

Sivut kannattaa pitää korkeintaan neljän - viiden näytön pituisina.

Yhtenäinen tyyli läpi koko palvelun on eduksi, yhtenäisyys parantaa sisällön oppimista ja rohkaisee palaamaan palveluun.

Sivun vaakasuuntaisen vierityksen minimoiminen on tärkeää. Paitsi että käyttäjän on vaikea hahmottaa sisällön yhteyttä muuhun sivuun, vaakasuuntainen vieritys kuluttaa paljon aikaa. Eikä pystysuuntainenkaan vieritys mobiililaitteen näytöllä järin miellyttävää ole. Itse asiassa sivun olisi hyvä mahtua yhdelle näytölle.

Linjausominaisuuksien (vasen, keskitetty, oikea) käyttö elementeissä parantaa luettavuutta, mutta toisaalta liian runsas käyttö heikentää hahmottamaan sivun rakennetta.

Hukkatila -varsinkin pitkien, kapeiden kuvien vieressä- kannattaa hyödyntää käyttämällä align attribuuttia <img> elementissä, esimerkiksi: <img align="left" src="taivas.gif" alt="Kuva taivaasta"/> Lisäksi CSS:ssä voi määritellä mm. float ominaisuuden <img> elementille, mikä sallii tekstin sijoittua kuvan viereen, joten kuva ei valtaa koko näytön leveyttä.

Tekstin korostamista (bold, italic, underline) kannattaa käyttää harkiten, koska sen liiallinen käyttö heikentää luettavuutta pienellä näytöllä.

Ylipitkien, vaikealukuisten sanojen käyttöä kannattaa välttää, jos lyhyempi vaihtoehto asian ilmaisemiseksi täsmällisesti on käytettävissä.

Liian monien eri värien käyttöä samalla sivulla kannattaa niinikään välttää. Vaikka värit antavat 'elämää' palvelulle, niiden ylikäyttö vie helposti tehon ja antaa mauttoman vaikutelman. Yhdenmukaisuus koko palvelun alueella on värien käytössäkin valttia. Esimerkiksi yhtenevän värin käyttö samassa XHTML-elementissä palvelun kaikilla sivuilla antaa harkitun, viimeistellyn vaikutelman.

Värien nimien mainitsemista -esimerkiksi: 'Paina punaista painiketta'- kannattaa välttää; osa päätelaitteista voi olla näytöltään vielä mustavalkoisia.

3.2.4 Dokumenttikoko pienenä

Koska mobiililaitteiden muistikapasiteetti on monin tavoin rajoittunut, kannattaa pyrkiä pitämään dokumenttien koko niin pienenä kuin mahdollista. Muutama käyttökelpoinen rutiini auttaa pyrkimyksessä:

Kannattaa välttää pitkien kommenttien sisällyttämistä koodiin. Vaikka perusteltu kommenttien käyttö kuuluu yleensä hyvään ohjelmointitapaan, mobiililaitteille ohjelmoitaessa siitä ei ole hyötyä.

Sisennyksissä kannattaa käyttää välilyöntien sijasta tabulaattoria tai välttää sisennysten käyttöä kokonaan. Suuri joukko turhia välilyöntejä kasvattaa dokumenttikokoa nopeasti.

Lyhyet tiedostonimet ja tyylinimitykset auttavat pitämään dokumenttia pienenä.

Kannattaa käyttää ulkoista tyylitiedostoa, joka on useamman dokumentin käytössä. Kun esimerkiksi käyttää tiettyä tyyliä monissa elementeissä, ja määrittelee käytetyn tyylin erillisessä tyylitiedostossa, tilaa säästyy huomattavasti.

Jos mahdollista, on edullisempaa määritellä tyylejä CSS-sääntöinä kuin class- tai id-attribuutteina elementtikohtaisesti. Esimerkiksi WCSS-tyylitiedosto voi käyttää seuraavaa sääntöä: p {color:red} mieluummin kuin class-ominaisuutta:.red {color:red} . Tämä poistaa tarpeen kirjoittaa jokaiselle dokumentin <p> elementille määritystä: class="red" . Se puolestaan säästää lyhyessäkin dokumentissa huomattavasti tilaa.

3.3 XHTML-KOODIN KIRJOITTAMINEN

Tässä kappaleessa esitetään esimerkki XHTML MP-mallisivusta ja kuvataan mallisivun vaatimat elementit. Seuraavissa alaluvuissa kuvataan dokumentin body-osassa käytettäviä elemettejä.

Esimerkki 1: XHTML MP-mallisivu

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>XHTML MP-malli</title>

href="oman-tyylitiedostoni-url.css" type="text/css"/>

body {font-size:small;}

</style>

</head>

<body>

<h1>Sopiva sivuotsikko</h1>

<p>

Dokumentin sisältö tähän...

</p>

</body>

</html>

3.3.1 MIME - tyypit & tiedostopäätteet

XHTML MP-määritysten mukaisten päätelaiteselainten täytyy tukea dokumentteja, joiden tunnisteena on MIME-tyyppi application/vnd.wap.xhtml+xml ja pitäisi tukea MIME-tyyppejä application/xhtml+xml ja text/html.

XHTML MP dokumentteihin ei kuitenkaan välttämättä tarvitse kirjoittaa juuri MIME-tyyppiä

application/vnd.wap.xhtml+xml. On jopa edullisempaa antaa tyyppi text/html, koska se soveltuu tunnisteeksi niin HTML- kuin XHTML-tiedostoihinkin, jotka voi avata sekä mobiiliselaimella että pöytäkoneselaimella. Tarkempi MIME-tyyppiluettelo löytyy palvelin-osiosta.

3.3.2 XHTML:n head -elementit

XML-määritys

XHTML MP on XML-kieli, joten jokaisen dokumentin tulee alkaa seuraavalla XML-määrityksellä:

<?xml version="1.0"?> .

3.3.2.1 DOCTYPE -elementti

Seuraava XML-määritys on DOCTYPE -elementti, joka määrittää dokumentissa käytettävän DTD:n. Tämän elementin esiintyminen ilmoittaa, että dokumentti noudattaa DTD:ssä määriteltyjä yhdenmukaisia sääntöjä eli on yhdenmukainen dokumentti. Tällaisessa dokumentissa esiintyy vain DTD:ssä määritellyt elementit ja attribuutit tietyn rakenteen mukaisesti.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

DOCTYPE elementin ensimmäinen lainausmerkeissä oleva merkkijono on public name; toinen on URL, josta DTD löytyy.

3.3.2.2 html -juurielementti

Seuraavana on dokumentin juurielementti html, joka täytyy määrittää xmlns attribuutilla, jotta dokumentti olisi yhdenmukainen.

Tämän attribuutin arvona on URL, joka osoittaa W3C.n namespace -validaattorisivulle. Jos xmlns attribuuttia ei sisällytetä, dokumentti ei välttämättä ole hyvänmuotoinen (well formed), vaikka se olisikin yhdenmukainen.

<body> elementtiin kirjoitetaan dokumentin varsinainen sisältö ja se on pakollinen elementti.

Se seuraa <html> -juurielementtiä. Body-elementin sisällä kaiken tekstin täytyy olla <p> elementin sisällä.

3.3.2.3 head -elementti

<head> elementti sisältää tietoa dokumentista, kuten nimen, avainsanoja hakukoneita varten, viittaukset muihin sivuihin -esimerkiksi ulkoiseen tyylitiedostoon- jne. <head> elementin käyttö XHTML-koodissa on varsin tärkeää, koska se on elementin sisällä, jossa määritetään dokumentin nimi ja koko dukomenttia koskevat tyylitiedot.

3.3.2.4 title -elementti

<title> elementti on pakollinen, <head> elementin sisään kuuluva elementti, jonka arvo näkyy yleensä jokaisen selaimen nimipalkissa näytön yläreunassa. Tässä elementissä on hyvä tilaisuus esimerkiksi tarjota käyttäjälle tietoa siitä, missä hän on menossa palvelun hierarkiassa antamalla navigointiviitteitä. Seuraavassa muutama suositus <title> elementin käytölle:

Nimi kannattaa pitää korkeintaan 12 - 14 merkissä, välilyönnit mukaanlukien. Jos nimi ylittää sallitun pituuden, se yksinkertaisesti typistetään niin, että se mahtuu nimipalkkiin.

Nimessä tulisi välttää toistamasta asiaa, joka kuuluisi varsinaiseen dokumentin sisältöosaan. Esimerkiksi teksti 'Salasana:' nimiosassa ja itse salasanakenttä sisältöosassa on huono ratkaisu.

Kaikkein tärkeimmän tekstin sijoittamista nimikenttään tulisi välttää; esimerkiksi mobiilitekniikan vasta-alkajat eivät välttämättä edes huomaa nimikenttää.

CSS-tyylejä ei voi määritellä <title> elementissä. Niinikään pelkkien suurten kirjaimien käyttöä kannattaa välttää, koska se heikentää luettavuutta. Sen sijaan isot alkukirjaimet edesauttavat luettavuutta.

Itse keksittyjä lyhenteitä tulisi välttää, koska monikaan ei niitä kuitenkaan ymmärrä. Jos lyhenteitä on käytettävä, standardit lyhenteet toimivat varmimmin.

Nimen oikea näkyvyys kannattaa testata erilaisilla päätelaitesimulaattoreilla.

3.3.2.5 Tyylitiedostojen määritykset

XHTML Mobile Specificationin mukaan valinnaisia ulkoisia tyylitiedostoja voidaan määrittää XHTML-dokumentille kahdella tavalla:

1. XML-lauseena (<?xml>), jota seuraa XML-prosessointiohje, mutta ei <head> elementin sisällä. Esimerkiksi:

<?xml-stylesheet href="muntyylitiedosto.css" media="handheld"

type="text/css" ?> .

Huom.: uuden “handheld” mediatyypin määritys on suositeltavaa!

2. Yhtenä tai useampana <link> elementtimäärityksenä <head> elementin sisällä, esimerkiksi:

On myös mahdollista luoda dokumentin sisäinen tyylimääritys kirjoittamalla tyyliominaisuudet <style> elementtiin, joka on <head> elementin sisällä. Näin määritetyt tyylitiedot koskevat koko dokumenttia. Lisäksi kannattaa muistaa, että tyylitietoja voi laatia myös yksittäisille elementeille käyttämällä style -attribuuttia.

3.3.2.6 Rakenne, Meta-tieto, Link, Base

XHTML MP:ssä <link> elementti tukee uutta attribuutti-arvoa: media="handheld".

Samoin XHTML MP tukee <style> elementtiä, joten koodaajan on mahdollista määrittää dokumenttikohtaiset tyylitiedot tarvitsematta tehdä erillistä tyylitiedostoa. (Vanhempi XHTML Basic DTD ei kuitenkaan tue <style> elementtiä. Ja toisaalta <style> elementin käyttö voi sotia sitä vastaan, mitä edellä sanottiin dokumenttikoon pitämisestä pienenä.)

<base> elementti tukee href -attribuuttia juuren määrityksessä kaikille relatiivisille URL-osoitteille dokumentissa.

3.3.3 XHTML body -elementit

Kuten edellä html-juurielementin yhteydessä todettiin, XHTML-dokumentin täytyy sisältää body elementti. XHTML ei tue WML:n card elementtiä. (Ks. lisätietoja linkit -elementin käytöstä XHTML-viittauksissa WML-osiosta.)

XHTML MP:ssä <body> elementti ei tue myöskään bgcolor, text, tai link attribuutteja. Kuten kaikki XHTML MP elementit, myös body-elementti tukee sen sijaan class, id ja style attribuutteja CSS-ominaisuuksien määrittämisessä, samoin kuin xml:lang ja title attribuutteja, joskaan nämä eivät ole niin yleisesti käytössä.

Seuraavissa osissa kuvataan elementtejä, jotka voivat esiintyä XHTML-dokumentin <body> elementissä.

3.3.3.1 Teksti- ja lista -elementit

Kaikki teksti XHTML MP:ssä täytyy sisällyttää <p> elementtiin tai johonkin muuhun XHTML MP:n elementtiin, kuten otsikoihin, listoihin, taulukoihin jne.

Määritettäessä tekstisisältöä WAP-sovellukselle ohjeistus noudattaa pitkälle linkkejä ja XHTML-sivuotsikkoa koskevia sääntöjä. CSS-ohjeistus avaa laajat tekstin muotoilumahdollisuudet, vaikka kaikki sen säännöt eivät täydellisesti pädekään pieninäyttöisiin mobiililaitteisiin. Tekstisisältöä luodessa on syytä pitää mielessä muutamia nyrkkisääntöjä:

Käytä yksinkertaisia, lyhyitä ja täsmällisiä ilmaisuja.

Vältä useammasta tyhjästä rivistä muodostuvia suuria välejä tekstin osien välillä XHTML-sivulla. Tyhjät rivit vaativat enemmän vieritystä, ja jotkut käyttäjät lopettavat vierityksen luullessaan tulleensa sivun loppuun, jos väli on liian suuri.

Automaattista rivitystä ei kannata estää, jotta ei pakottaisi käyttäjää vierittämään näyttöä vaakasuunnassa.

Yleisimmissä mobiiliselaimissa teksti rivittyy automaattisesti näytön mukaan, ellei nowrap attribuuttia ole määrätty elementissä ja ellei Text Wrap -ominaisuutta ole otettu selaimen asetuksissa pois päältä. Esimerkiksi Nokia Mobile Browserissa automaattirivitys on oletuksena päällä, mikä kumoaa koodin nowrap attribuutin.

Kannattaa välttää liian monien erilaisten tekstityylien ja -kokojen käyttöä samalla XHTML-sivulla. Kaksi tai kolme erilaista tekstityyliä ja -kokoa on suositeltu maksimi.

Fonttityylejä ja -kokoja ei kannata varioida ylenmäärin, mobiililaitteissa on rajallinen määrä muistia, joten sallittu valikoima on pienempi kuin pc:ssä. Yleisimpien selainten tukemaan fonttivalikoimaan kannattaa tutustua, jotta ei tulisi ripotelleeksi koodiin turhia erikoisfonttimäärityksiä.

Informaation toistamista turhaan on syytä välttää. Jos esimerkiksi otsikossa on linkki uutiseen, itse uutisessa on turha toistaa otsikon asiaa. Sopiva paikka lyhyelle versiolle otsikosta on title tagissa.

Alleviivausta leipätekstissä kannattaa välttää. Se muistuttaa linkkiä, ja käyttäjä saattaa ihmetellä, miksei "linkki toimi".

Pelkkien isojen kirjainten käyttö tekstissä ei ole hyvä ratkaisu. Se heikentää luettavuutta, ja on tulkittavissa huutamiseksi tai muuten provokatiiviseksi.

3.3.3.2 Tekstin layout-elementit

Seuraavat elementit ovat tuettuja tekstin layoutin määräämiseksi:

Teksti-elementit XHTML MP:ssä

<cite>

Kaikkien näiden on oltava <p> elementin sisällä, paitsi <blockquote> ja <pre> ,

joiden kuuluu olla <body> elementissä.

Esimerkki 2 kuvaa XHTML MP -tekstin muotoiluelementtejä.

Esimerkki 2: Tekstiesimerkki

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile

1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<head>

<title>XHTML teksti</title>

</head>

<body>

<p>

<em>Painotettu.</em>

<strong>Lihavoitu teksti.</strong>

<var>Muuttuja.</var>

<kbd>Kirjoituskoneteksti.</kbd>

<samp>Esimerkki.</samp>

<code>Koodi.</code>

<dfn>Määritys.</dfn>

Kuten <cite>Holkeri</cite> sanoi:</p>

<p>Minä juon nyt kahvia!</p>

</blockquote>

<p><cite>Vennamo</cite> päätti usein puheensa:

<q>Kyllä kansa tietää</q>.

<acronym title="Hypertext Markup

Langugage">HTML</acronym> on akronyymi.<br/>

<abbr title="Abbreviation">Abbr.</abbr> on lyhenne.</p>

<pre>

Ja tämä on esimuotoiltua.</pre>

</body> </html>

3.3.3.3 Listat

Ordered lista <ol> järjestää listan tiedot numeroiden mukaan. Unordered lista <ul> on vastaava, mutta käyttää numeroiden sijasta bullet-kuulia, pyörylöitä. Molemmat sisältävät yhden tai useampia <li> elementtejä.

Definition lista <dl> muodostaa listatietoja tai määrityksiä, tyypillisesti sisennyksiä. <dl> sisältää pareja <dt>..</dt> <dd>..</dd> elementeistä.

XHTML MP:ssä <ol>, <ul>, ja <li> elementit eivät tue type attribuuttia. Sen sijaan on käytettävä tyylimäärityksiä.

Esimerkki 3 havainnollistaa lista-elementin käyttöä XHTML MP:ssä.

Esimerkki 3: Lista-elementit

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile

1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<head>

<title>Listat</title>

</head>

<body>

<h2>Mä äritetty lista</h2>

<dl>

<dd>muodostuu senteistä</dd>

<dt>Sentti</dt>

<dd>on osa euroa</dd>

</dl>

<h2>Numeroitu lista</h2>

<ol>

<li>Ensimmäinen</li>

<li>Ja toinen</li>

</ol>

<h2>Numeroimaton lista</h2>

<ul>

<li>Omenat</li>

<li>Luumut</li>

</ul>

</body> </html>

3.3.4 Elementtien muotoilu

Esimerkki 4 havainnollistaa fontin muotoiluelementtien käyttöä XHTML MP:ssä.

Esimerkki 4: Fontti-elementit

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD

XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtmlmobile10.dtd">

<head>

<title>XHTML MP Muotoilu</title>

</head>

<body>

<h2>Muotoilun elementit</h2>

<p><big>Julmetun iso</big><br/>

<small>Pikkuista piiperrystä</small><br/>

<b>Lihavoitu</b> <i>Kursiivi</i>

</p>

<hr/>

</body> </html>

3.3.4.1 Muotoilueroja XHTML Basicin ja XHTML MP:n välillä

Seuraavat elementit eivät kuuluneet XHTML Basiciin, mutta on lisätty XHTML MP:hen. Attribuutteja näissä elementeissä ei tueta, paitsi align="left|right|center" -attribuuttia hr -elementissä.

Elementit XHTML MP:ssä mutta ei XHTML Basicissä

3.3.4.2 Laajennusten muotoilu XHTML MP:ssä

Seuraavat HTML-elementit eivät ole osana XHTML MP:tä. Asteriksilla * merkityt tagit ovat kuitenkin tuettuja esimerkiksi Nokia Mobile Browserissa ja muissa Compact HTML -yhteensopivissa selaimissa (CHTML-selaimissa).

XHTML MP:hen kuulumattomat fontti-sidonnaiset elementit

3.3.4.3 Muotoilun rajoitukset CHTML -selaimissa

CHTML-yhteensopivissa selaimissa font elementti tukee ainoastaan color attribuuttia:

Tilanteissa, joissa ei ole käytetty teksti-tyyli -sidonnaisia elementtejä, voidaan pysyä tarkasti XHTML MP:ssä ja käyttää elementtien tyylimäärityksiä. Esimerkiksi vanhentumassa olevan <center> elementin sijasta voidaan määrittää:

tai vielä mieluummin:

<p class="cntr">,

missä <style> elementin tai ulkoisen tyylitiedoston class määritetään:

.cntr {text-align:center}.

3.3.4.4 Muotoilun rajoitukset XHTML MP:ssä

XHTML MP:ssä <br/> elementti ei tue clear attribuuttia*. Samoin <div>, <h1>

... <h6>, ja <p> elementit eivät tue align -attribuuttia*.

XHTML MP ei tue myöskään <blink> elementtiä*. On käytettävä WCSS -tyyliominaisuuksia näyttämään vilkkuvaa tekstiä:

<span style="text-decoration: blink">tämä vilkkuu</span>,

Tai vielä mieluummin:

<span class="blink">,

missä <style> elementin tai ulkoisen tyylitiedoston class määritetään:

.blink { text-decoration:blink } .

(Asteriksilla * merkityt ovat kuitenkin tuettuja esimerkiksi Nokia Mobile Browserissa ja muissa CHTML -yhteensopivissa selaimissa.)

3.3.5 anchor -elementti

<anchor> (tai <a>) elementillä määritetään hypertekstilinkki joko toiseen resurssiin (dokumenttiin, kuvaan jne.), saman dokumentin toiseen elementtiin (ns.kirjanmerkki), tai toiseen mobiililaitteeseen puhelinsoiton tai sähköpostin avulla. Ankkuroidut linkit ovat laajasti käytettyjä Webissä ja yhtä lailla tehokkaita myös mobiililaitteissa. Ne ovat suositeltava ja paras tapa määritellä palvelun navigointi.

XHTML MP:n <a> elementti tukee kaikkia muita HTML:n attribuutteja paitsi coords, button, name, shape ja target attribuutteja. Lisäksi name elementti on tuettu Nokia Mobile Browserissa CHTML-yhteensopivuuden vuoksi.

3.3.5.1 Sisäiset viittaukset vastaavat WML:n "kortteja"

XHTML MP tukee dokumentin sisäisiä viittauksia. Tällaiset ovat tuttuja Web-sivuilta mm. linkeistä "takaisin sivun alkuun" tai sivun alussa olevaista viittauksista suoraan tiettyihin kohtiin pitkää sivua. Esimerkiksi allaoleva ensimmäinen linkki osoittaa kohtaan Tietoja. Kun linkki valitaan, näyttöön tulee dokumentin osa, joka on merkitty ankkurilla t:

<a href="#t">Tietoja</a>

...

<a name="t">Tietoja asiasta</a>

Sisäinen ankkuri voi olla ns. tyhjän elementin tapaan myös itsepäättävä tagi:

<a name="t"/>Tietoja asiasta

Pelkällä name attribuutilla varustetut ankkurit (ilman href attribuuttia) eivät ole alleviivattuja normaalien linkkien tapaan, eivätkä ole valittavissa. Niiden ankkuriominaisuus on näkymätön kohde linkeille, jotka on merkitty href="#anchor-name" attribuutilla.

Sisäiset linkit toimivat XHTML MP:ssä kuten WML:ssä useammasta "kortista" muodostuva WML-dekki, "korttipakka", jonka puitteissa sovelluksen sisältöä voidaan jakaa useille korteille. Pitkä XHTML- sivu voi sisältää esimerkiksi linketetyn luettelon käsiteltävistä asioista; luettelon otsikkosanan valinta aiheuttaa hyppäyksen asianomaiseen kohtaan sivua. Tai sivun lopussa voi olla erillinen Lisätietoja-osio, johon käyttäjä pääsee suoraan tekstissä olevan lisätietoja-sanan valitsemalla. Ja sieltä taas pääsee "takaisin"-linkillä tekstin kohtaan, josta hyppäys lisätietoihin tehtiin, kuten Web-sivuilla on nähty.

Seuraavassa sisäinen linkki, joka sisältää hakuavaimen "5" :

5 <a href="#t" accesskey="5">Tietoja</a>

3.3.5.2 Linkit puhelinsoitoille

<a> elementin sisällä voi määritellä arvon href attribuutille, joka aktivoi WMLScript-kirjaston funktion wtai://wp/mc;NNN, missä NNN on puhelinnumero, johon soitetaan. Tämä saa laitteen soittamaan tiettyyn numeroon. Esimerkiksi:

<a href="wtai://wp/mc;007999999">Soita 007 J.Bondille</a>

Linkki on normaalin linkin näköinen, mutta kun sen valitsee, käyttäjää pyydetään vahvistamaan tapahtuma. Kun vahvistus on saatu, laite soittaa kyseiseen numeroon.

Monet XHTML MP -selaimet tukevat myös i-mode:n tel: skeemaa, sovelluskohtaista laajennusta. Sen valinnainen cti=".." attribuutti, jos sitä on käytetty, valitsee numeron, lähettää DTMF “valintaäänet” taukoineen (,), ja odottaa käyttäjän OK (/) -hyväksyntää.

Kaikki yhdistelmät attribuuteista href="tel:..", telbook="..", tai email=".." <a> tagin sisällä aktivoivat puhelimen Save to Phonebook -toiminnon käytetyllä datan esisyötöllä varustettuna. Esimerkiksi:

<a href="tel:007999999" telbook="J.Bond"email="j.bond@goldfinger.com"

cti="007999999/007">Soita Jamekselle</a> .

Linkin käyttö valitsee numeron 007999999, odottaa käyttäjän vahvistusta, kun OK:ta on painettu lähettää DTMF-lähivalinnat 007. Lisäksi linkin käyttö antaa mahdollisuuden tallentaa käytetyn puhelinnumeron puhelinmuistioon nimelle J.Bond sähköpostiosoitteen kera, jos käytetyn päätelaitteen puhelinmuistio tukee sähköpostiosoitteen tallennusta.

3.3.5.3 Tallennus puhelinmuistioon

Linkki, joka tallentaa nimen ja puhelinnumeron käyttäjän puhelinmuistioon:

Käytetään WMLScript libraryn funktiota wtai://wp/ap;NNN;aaa missä NNN on puhelinnumero johon soitetaan, ja aaa on nimestä muodostuva merkkijono. Esimerkiksi;

<a href="wtai://wp/ap;007999999;James Bond">Tallenna James Bond</a>

3.3.5.4 Sähköpostin lähetys

Monet laitteet, jotka tukevat sähköpostin lähetystä (joko SMS-, MMS-, tai muissa muodoissa) tukevat mailto: skeemaa. Esimerkiksi:

<a href="mailto:jussi.juonio@firma.com">Viesti Jussille</a>

On myös mahdollista määrittää viestin oletus-otsikko ja/tai viesti URL-parametreina:

<a href="mailto:jussi.juonio@firma.com?subject=Viestin%20

aihe&body=ei%20kovin%20mullistava%20viesti">Viesti Jussille</a>

Kaikki erikoismerkit URL:ssä on ilmaistava "URL-koodein". (Ks. yksityiskohtaisemmin [HTTP]).

3.3.5.5 Linkkien pikavalinta (accesskey)

Linkit ovat käteviä, jopa välttämättömiä, navigoitaessa pitkän dokumentin eri osien välillä. Linkeistä huolimatta näyttöä joutuu usein vierittämään, jos ei muuten niin saadakseen esiin linkin pitkältä sivulta. Käyttäjä joutuu turvautumaan joskus toistuviin näppäinpainalluksiin saadakseen linkin esiin.

Linkkien pikavalinnat tarjoavat käyttäjälle mahdollisuuden aktivoida minkä tahansa linkin sivulla yhdellä näppäinpainalluksella, tarvitsematta vierittää näyttöä päästäkseen linkkiin käsiksi. Linkkien pikavalinnat määritetään käyttämällä accesskey attribuuttia <a> elementissä. Attribuutin arvo määrää näppäimen, jolla linkki aktivoidaan.

Jotta käyttäjä tietäisi, millä näppäimellä mikäkin linkki on aktivoitavissa, on välttämätöntä ilmoittaa asia selväkielisenä tekstinä (<p> elementissä juuri ennen <a> elementtiä). Näin käyttäjä näkee käytännössä, mikä accesskey attribuutti aktivoi minkäkin linkin. Esimerkiksi seuraava koodirivi

1 <a href="eka.html" accesskey="1">Ensimmäinen</a> näkyy päätelaitteen näytössä: 1 Ensimmäinen

Esimerkki 5 kuvaa accesskey attribuutin käyttöä.

Esimerkki 5: Linkkien pikavalinnat (accesskey attribuutit)

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile

1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<head>

<title>XHTML 1</title>

</head>

<body>

<h2>Pikalinkit</h2>

<p>

<a href="#loppu">Loppuun</a><br/>

1 <a href="file2.xhtml" accesskey="1">

Tiedosto</a><br/>

2 <a href="wtai://wp/mc;9005551212"

accesskey="2">Soita pomolle</a><br/>

3 <a href="mailto:pomo@firma.com?

subject=Viestin%20Aihe&

body=ei%20niin%20kovin%20mullistavaa" accesskey="3">

Viesti pomolle</a><br/>

<a href="#top">Sivun alkuun</a><br/>

</p>

</body> </html>

3.3.5.6 Linkitysvinkkejä

Muistilistaksi suosituksia linkkien määritykseen:

Pitkiä linkkitekstejä tulisi välttää. Tekstin olisi hyvä mahtua yhdelle riville; kahdelle tai useammalle riville jatkuvan alleviivatun tekstin luettavuus ei ole paras mahdollinen.

Linkin tyyliä ei kannata muuttaa kovin etäälle oletustyylistä (alleviivatusta ja normaalifontista). Esimerkiksi alleviivauksen poistaminen saattaa hämmentää käyttäjää.

Automaattirivitystä ei tulisi estää CSS-määrityksellä. Monet selaimet jakavat linkkitekstin automaattisesti kahdelle riville, ellei se mahdu yhdelle riville.

Näytön alareunassa yleensä näkyvän "Back" -pikalinkin otsikkoa ja toiminnallisuutta ei kannata toistaa linkissä. Käyttäjää voi turhauttaa useamman paluu-linkin kokeileminen, varsinkin jos niiden toiminnallisuus ei ole yhtenevä.

Linkkiotsikon tulisi olla niin selkeä ja informatiivinen kuin mahdollista. Esimerkiksi uutispalvelun linkkinä "Lisää otsikoita" on huomattavasti selkeämpi kuin "Seuraava sivu". Käyttäjän on saatava ennakkokäsitys, mitä tapahtuu, kun linkki valitaan.

3.3.6 Lomakkeet

Verrattuna WML:ään tarjoaa XHTML MP palvelujen kehittäjille paremmat mahdollisuudet syötekenttien layoutin määrittämiseen. Tekstinsyöttölaatikoille voidaan antaa täsmälliset mitat ja niiden kehyksille haluttu tyyli.

Lomakkeita käytetään syötteiden käsittelyyn input tai textarea elementeillä. Samoin lomakkeissa käytetään select ja option listoja valintojen suorittamiseen.

XHTML-lomakkeet toimitetaan palvelimelle Lähetä (Submit) painikkeella, toisin kuin WML:ssä, jossa käytetään linkkejä postfield elementeillä varustettuna.

Lomakkeen elementtien paikoitukseen voidaan käyttää myös CSS:n padding ja margin määrityksiä.

XHTML MP:n tukemat lomake-elementit

form input optgroup

select option Textarea

label

3.3.6.1 form -elementti

<form> elementissä määritetään lomakkeen datan lähetys palvelimelle action ja method attribuuteilla. action attribuutti ilmaisee palvelimen URL:n. method attribuutti voi olla joko get tai post -muotoa.

method="get" lähettää lomakkeen datan liittämällä URL-osoitteen perään kysymysmerkin ja merkkijono-arvon. Esimerkiksi:

Nimi: <input type="text" name="totanoin"/><br/>

Salasana: <input type="password" name="salainen"/>

</form>

pyytää tuloste-sivua käyttäen URL:ia

http://lomake-prosessori.cgi?totanoin=Jussi&salainen=niinjuu

olettaen, että käyttäjä syötti "Jussi" ja "niinjuu" asianomaisiin kenttiin.

get metodin ominaisuuksiin kuuluu, että käyttäjä voi tehdä kirjanmerkin lomakepyynnölle ja käyttää lomaketta toistekin samoilla arvoilla, tai hän voi käyttää kirjanmerkkiä myös muuttaakseen arvoja. Haittapuoliin kuuluu, että get metodilla ei voi lähettää suurta datamäärää palvelimelle (koska URL:n sallittu pituus on rajallinen), ja että lomakkeen arvot ja nimet ovat näkyvissä. Esimerkiksi edellisen esimerkkimme salasana näkyisi mahdolliselle sivullisellekin, joka pääsisi laitteeseen käsiksi ja hoksaisi katsoa kirjanmerkin tiedot.

method="post" lähettää lomakkeen datan HTTP-pyynnön otsikkotiedoissa. Tämä sopii suurempienkin datamäärien lähetykseen, ja pitkiä "risuaitarivistöjä" on käyttäjän vaikeampi tulkita selkokielelle, eikä niitä voi tallettaa kirjanmerkiksi.

Kun sivupyyntö lähetetään post metodilla, lomakkeen kenttien tiedot ladataan aina palvelimelta, ei selaimen välimuistista. Poikkeuksen muodostaa luonnollisesti Back-pikalinkillä sivulle paluu; silloin tiedot ovat täsmälleen samat, mitkä käyttäjä näki aikaisemmin sivulla käydessään ( ellei sivulla ollut no-cache asetusta tai välimuistin karttumisaika juuri umpeutunut).

3.3.6.2 input -elementti

Input-elementtiä käytetään lyhyen tekstin (alle rivin mittaisen) syöttöön. Tyypillisiä käyttökohteita ovat käyttäjätunnus- ja salasanakentät, sähköpostiosoitteet, puhelinnumerot jne.

Määritettäessä input-elementtiä on syytä pitää mielessä pari asiaa:

· Otsikko tai nimitys <input> -elementin edessä kertoo käyttäjälle, minkä luonteisesta kentästä on kysymys, ja auttaa syöttämään kenttään oikean tyyppistä tietoa.

· Rivinvaihto (<br/>) <input> -elementin perässä estää seuraavan sisällön kiinnittymästä heti kentän kylkeen ja tekemästä layoutista ahtaan ja sekavan näköistä.

XHTML MP:ssä tuetut input elementin tyypit

text password checkbox

submit radio reset

image hidden

HTML- attribuutit, joita ei tueta XHTML MP:n input elementissä

accept align alt

disabled ismap readonly

usemap

Esimerkki <input> elementin käytöstä <form> elementissä.

Esimerkki 6:

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtmlmobile10.dtd" >

<head>

</head>

<body>

<h1>Iiron sivu</h1>

<p>

Kotipaikan luonnehdinta:

<input type="text"

name="kpaikka" title="Kotipaikka"

style="-wap-input-format:rauma"/><br/>

</form>

</p>

</body> </html>

3.3.6.2.1 Teksti- ja salasanakentät

Tekstinsyöttöön tarkoitetut kentät <input type="text|password" name="salasana"/> sallivat lyhyiden tekstien syötön. Muutama huomio näiden kenttien käytöstä:

Tekstinsyöttökentille on syytä välttää määrittelemästä liian pitkiä oletusarvoja. Yleisimmät selaimet eivät näytä kenttiä yhtä riviä pidempinä, vaan katkaisevat kentän näytön leveyden mukaan.

Kentille kannattaa määritellä title attribuutti, jotta käyttäjä näkee, mitä hänen pitäisi kenttään kirjoittaa. Jos kysymys on erikoisformaatista, lisätieto selventää asiaa. Esimerkiksi: title="pv/kk/vvvv"

Jos syötettävän merkkijonon muoto on määrätty (kuten esimerkiksi postinumero tai luottokortin numero), on selvintä käyttää -wap-input-format ominaisuutta asettamaan syöttömaski.

Koska pienissä mobiililaitteissa tekstinsyöttö ei ole aivan niin helppoa kuin PC-laitteissa, käyttäjälle kannattaa tarjota mahdollisuus tehdä valinta oletuslistasta tekstinsyötön sijaan, jos se on mahdollista. Myös oletusvaihtoehtojen ja syöttökentän yhdistelmä on parempi kuin pelkkä syöttökenttä.

3.3.6.2.2 Valintaruudut

Valintaruutu-funktiot toimivat kuten valintalistoissa, joissa on mahdollista valita useammasta vaihtoehdosta. Valintaruudut ovat ihanneratkaisu tapauksissa, joissa käyttäjän täytyy valita yksi tai useampi (1...4) vaihtoehto suuremmasta joukosta, tai osoittaa kyllä/ei (myös on/off) -valinta lomakkeella.

Valintaruutuja voi luoda <input> elementtiä käyttäen:

<input type="checkbox" name="valintaruutu"/>.

Valintaruudut ovat käyttökelpoisimpia, kun on valittavissa enemmän kuin yksi vaihtoehto esitetyistä vaihtoehdoista. Jos vaihtoehdoista voi valita vain yhden, kannattaa käyttää radionappia.

Valintaruutu ja sen tekstiotsikko olisi mahdollisuuksien mukaan saatava mahtumaan yhdelle riville.

Valintaruutu kannattaa sijoittaa riville ensimmäiseksi, ennen tekstiä, jotta käyttäjän ei tarvitse vierittää näyttöä vaakasuunnassa tehdäkseen valinnan.

Jokaisen valintaruudun tekstiotsikon perään kannattaa määrittää rivinvaihto (<br/>), jotta kahta valintaruutua ei pakkautuisi samalle riville. Pienellä näytöllä on vaikea erottaa, mikä teksti tarkoittaa mitäkin valintaruutua, jos niitä on useampi samalla rivillä.

Silloin kun se on tarkoituksenmukaista, valintaruutu kannattaa määrittää oletusarvoisesti valituksi checked="checked" attribuutilla. Uhraamalla ajatuksen kohderyhmälle, jolle palvelua ollaan rakentamassa, on käyttäjien valtaosan valinnoille mahdollista päätellä tietty todennäköisyys, onko valintaruutu syytä määrittää valmiiksi valituksi vai ei. (XHTML:ssä jokainen attribuutti täytyy olla lainausmerkeissä, toisin kuin HTML:ssä, missä boolean-arvo voi kumota attribuutin.)

Esimerkki 7 havainnollistaa valintaruudun käyttöä.

Esimerkki 7: Valintaruudut

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<head>

<title>Valintaruudut</title>

</head>

<body>

<p>

<input type="checkbox" name="vteksti"

title="Vastaa viestiin" checked="checked"/> Vastaa viestiin<br/>

<input type="checkbox" name="ktext"

title="Kruksaa luetuksi"/> Kruksaa luetuksi<br/>

</form> </body>

</html>

3.3.6.2.3 Radionapit

Radionappien käyttösuositukset ovat pääosin samat kuin valintaruuduille, yhdellä lisäyksellä:

On varmistettava, että samassa lomakkeessa name -attribuutti määritetään samaksi jokaisessa radionapissa. Muussa tapauksessa on mahdollista valita useampi vaihtoehto.

Radionapit <input type="radio" name="valintanappi"/> ovat käyttökelpoisia, kun käyttäjän on valittava tasan yksi vaihtoehto useammasta (yleensä kahdesta neljään).

Esimerkki 8 havainnollistaa radionapin käyttöä.

Esimerkki 8: Radionapit

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtmlmobile10.dtd" >

<head>

<title>Radionapit</title>

</head>

<body>

<p>

<input type="radio" name="vastaa"

value="vteksti" title="Vastaa viestiin"

checked="checked"/> Vastaa viestiin<br/>

<input type="radio" name="vastaa"

value="ktexti" title="Kruksaa luetuksi"/> Kruksaa luetuksi<br/>

</p>

</form> </body>

</html>

3.3.6.2.4 Lähetys- ja tyhjennyspainikkeet

Lomakkeelle syötetyt tiedot ja tehdyt valinnat lähetetään painikkeella, joka luodaan elementillä<input type="submit"/>. Hyvän tavan mukaan käyttäjälle annetaan myös mahdollisuus perua syötteensä ja tyhjentää antamansa tiedot painikkeella, joka luodaan XHTML:ssä elementillä <input type="reset"/>.

Painikkeille voidaan antaa halutut nimitekstit käyttämällä value attribuuttia, jos halutaan joku muu kuin oletusarvoinen Submit ja Reset. Usein on viisasta määrittää painikkeelle nimi, josta on pääteltävissä, mitä tapahtuu kun lomake lähetetään. Esimerkiksi: value="Etsi" tai value="Osta".

Pitempiä nimiä kuin 10 - 12 merkkiä ei kannata käyttää, koska ne saattavat ylittää näytön leveyden ja tulevat tylysti katkaistuksi. Painike ei yleensä jatku seuraavalle riville. Jos lähetyskäytäntö vaatii selvitystä, se kannattaa kirjoittaa erikseen tavallisena tekstinä, ei painikeotsokkona.

Lähetys- ja tyhjennyspainikkeet on syytä sijoittaa välittömästi asianomaisen lomakkeen alle. Näin käyttäjän on helppo nähdä, että lomake ja painikkeet kuuluvat yhteen.

3.3.6.3 textarea - elementti

Tekstialuetta käytetään, kun halutaan tekstille tilaa enemmän kuin yksi rivi. Tyypillinen tekstialueen käyttökohde on esimerkiksi sähköpostiviesti, kotiosoite jne.

Ohjeet ja muistisäännöt tekstialueille ovat jokseenkin input-elementin ohjeiden mukaiset, yhdellä lisäyksellä:

Tekstialueen korkeutta ei kannata määrittää näyttöä suuremmaksi, vaikka mahdollinen tekstin mitta ylittäisikin tekstialueen rajat. Mitä suurempi tekstialue on, sitä enemmän käyttäjä joutuu vierittämään näyttöä tarkastellakseen kirjoittamaansa tekstiä.

3.3.6.4 select - elementti

Valintalista on käyttökelpoinen, kun käyttäjän täytyy valita useammasta ennalta määritellystä vaihtoehdosta. Valintalista on tehokas ja nopea tapa, kun pyydetään käyttäjältä syötettä. Muutama näkökohta valintalistan suunnitteluun:

On eduksi määrittää oletusvaihtoehdot valituksi (selected="selected") aina kun se on mahdollista. Miettimällä kohderyhmää, jolle palvelua ollaan rakentamassa, on käyttäjien valtaosan valinnoille mahdollista päätellä tietty todennäköisyys, mitkä oletusvaihtoehdot on syytä määrittää valmiiksi valituiksi. Todennäköisin oletusvaihtoehto kannattaa sijoittaa listan ensimmäiseksi, ellei ole perusteltua syytä (esim. aakkosjärjestys) muulle järjestykselle.

Yhden valinnan listassa, jossa ei käytetä (multiple="multiple") attribuuttia, listan ensimmäinen vaihtoehto tulee automaattisesti oletusvaihtoehdoksi, ellei muissa ole käytetty (selected="selected") määritystä.

Määrityksellä multiple="multiple" varustetussa monivalintalistassa, jossa ei ole käytetty yhtäkään selected="selected" attribuuttia, mikään vaihtoehto ei ole oletusarvoisesti valittuna.

Selventävä tekstiotsikko valintalistan edessä auttaa käyttäjää hahmottamaan, millaisista vaihtoehdoista on kysymys.

Esimerkki 9 havainnollistaa <select> ja <option> elementtien käyttöä.

Esimerkki 9: Option elementeillä varustettu valintalista

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtmlmobile10.dtd" >

<head>

<title>Vaihtoehtoja</title>

</head>

<body>

<p>Valitse kaupunki:<br/>

<option value="Rauma">Rauma</option>

<option value="Turku">Turku</option>

</select>

<br/>

</p>

</form> </body>

</html>

3.3.6.5 Piilotetut kentät

Lomakkeessa voi käyttää myös piilotettuja kenttiä <input type="hidden"/> palauttamaan tiettyjä arvoja palvelimelle. Piilotetut kentät eivät luonnollisestikaan näy käyttäjälle. Niitä käytetään tavallisesti esimerkiksi yhteyden dokumentointiin tai vastaaviin arvoihin, joita tarvitaan sivupyyntöjen välillä.

Jos sivun skriptiin tulee kirjoitetuksi useampia piilotettuja kenttiä, kannattaa miettiä, onko se liian tarkkaa käyttäjän seurantaa, sillä XHTML-sivun ja lomakepyyntöjen yhteiskoko kasvaa helposti suuremmaksi kuin olisi välttämätöntä. Tällaisessa tapauksessa on syytä harkita, olisiko useimpien Web-palvelinten tarjoama "session" ominaisuus (joka tallentaa käyttäjän toimenpiteet palvelimen yhteystietokantaan) tarkoitukseen parempi ratkaisu.

XHTML-lomakkeen piilotettu kenttä on kätevä tapa hallita sessiotunnistetta (session ID), joka lähetetään palvelimelle jokaisen lomakepyynnön yhteydessä.

3.3.7 Taulukot

Vaikka käytännössä lähes mikä tahansa sisällön asettelu on mahdollista XHTML:n <p>, <div>, ja <span> elementtejä käyttäen ja WCSS:n tyyliominaisuuksia hyödyntäen, taulukoiden käytöllä saadaan kuitenkin layoutiin lisää selkeyttä ja tehokkuutta.

Verrattuna WML:ään, tyylimäärityksillä terästetty XHTML MP tarjoaa taulukoiden käytölle selkeästi paremmat mahdollisuudet. Esimerkiksi taulukon kehyksiä ei WML:ssä voinut modifioida tai poistaa. XHTML:n ja WCSS:n yhdistelmällä se on nyt mahdollista.

Taulukoita voi käyttää kokonaisen XHTML-sivun layoutin määrittämiseen. Tätä etua onkin jo laajasti sovellettu World Wide Webissä, koska se on helppo tapa asemoida sisältöä. Kaikki mobiiliselaimet eivät kuitenkaan automaattisesti laske taulukon solujen korkeuksia ja leveyksiä solun sisällön mukaan, joten jos haluaa olla varma rinnakkaisten sarakerivien osumisesta täsmälleen linjaan, on määritettävä taulukon solujen korkeus ja leveys (height="" ja width="") pikseleissä.

Taulukoita käytetään näyttämään sisältö selkeästi erottuvina sarakkeina, mutta on tärkeää suunnitella taulukko mahtumaan näytön leveyteen, koska mobiililaitteissa vaakasuuntainen näytön vieritys ei ole kovin luontevaa. Taulukoiden suunnittelussa on lisäksi syytä ottaa huomioon seuraavia näkökohtia:

Taulukon soluja ei kannata määrittää korkeammiksi kuin näytön korkeus. Käyttäjä voi tuntea itsensä eksyneeksi ja menettää kosketuksen taulukon asiayhteyteen, jos solu on korkeampi kuin näyttö.

Jos käytetään kehyksiä, taulukon kaikissa soluissa kannattaa käyttää saman tyyppistä kehystä. Toisistaan poikkeavat kehykset saman taulukon eri soluilla saattavat antaa sekavan vaikutelman kokonaisuudesta. Käyttäjän huomio tulisi kiinnittää taulukon sisältöön, ei taulukon ominaisuuksiin.

Sisällön selkeydelle on usein eduksi käyttää taulukon otsikkoa (<caption>) ja myös sarakkeiden otsikoita (<th>). Jos sarakkeiden sisältö on kuitenkin itsestäänselvyys tai käy ilmi jo taulukon otsikosta, sarakeotsikot vievät vain turhaan tilaa ja aiheuttavat ylimääräistä näytön vieritystä.

Sisäkkäisiä taulukoita ei tueta, kuten ei seuraavassa taulukossa esitettyjä attribuuttejakaan:

Taulukkoattribuutit, joita ei tueta XHTML MP:ssä

align cellpadding cellspacing

border

XHTML MP:n kanssa käytetyt WCSS-tyyliominaisuudet sallivat sisällön loitonnuksen taulukon solun reunasta (padding), marginaalit, tekstin suuntauksen solun sisällä sekä kehykset. WCSS:n avulla voidaan myös määrittää kehysten paksuus ja väri (laitteille, joissa on värinäyttö).

XHTML MP:ssä elementit <td> ja <th> eivät tue width tai height attribuutteja.

Esimerkki 10 havainnollistaa taulukon sisällön esittämistä sarakemuodossa ja esimerkki 11 kuvien asettelua taulukon avulla.

Esimerkki 10: Sisällön esittäminen sarakkeina

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Taulukko</title>

</head>

<body>

<tr>

<th>1. sarake</th>

<th>2. sarake</th>

</tr>

<tr>

</tr>

<tr>

<td>Kolmas</td>

<td>Neljäs</td>

</tr>

<tr>

<td>Viides</td>

<td>Kuudes</td>

</tr>

</table></center>

</body>

</html>

Esimerkki 11: Kuvien esittäminen taulukkona

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html>

<head>

<title>Kuvataulukko</title>

table,tr,td { padding:0px; margin:0px;

border:none; }

img { margin:0px; padding:0px;

border:none; }

</style>

</head>

<body>

<p>

<br/>

</p>

<tr>

</tr>

<tr>

</tr>

</table> </body>

</html>

3.3.8 Kuvat

Kuten World Wide Webissä, kuvilla on tärkeä asema myös WAP-palveluissa, koska niillä voidaan ilmaista joskus enemmän kuin saman muistitilan vaativalla tekstillä. Kuvilla voidaan lisäksi helposti elävöittää pitkiä tekstikenttiä. On kuitenkin syytä käyttää kuvia harkiten, jotta ei tulisi heikentäneeksi palvelun käytettävyyttä.

WAP-palveluissa tulee käyttää joko wbmp tai gif muotoisia kuvia. Useimmat mobiiliselaimet tukevat näitä kuvamuotoja. Gif-kuvien etuna voidaan pitää sitä, että myös Web-selaimet tukevat niitä, mutta wbmp-kuvia eivät.

Näytön koon ylittäviä kuvia kannattaa välttää. Kuvan on syytä olla niin pysty- kuin vaakasuunnassakin näyttöä pienempi, koska jotkut mobiiliselaimet eivät tue vaakasuuntaista vieritystä.

Kuvien reunoille kannattaa tehdä muutaman pikselin verran tyhjää tilaa. Tämä on kätevä tapa estää toisten kuvien tai ympäröivän tekstin "puhkomasta" kuvien reunoja. WCSS:n margin ominaisuus antaa mahdollisuuden tehdä tyhjää tilaa kuvan ympärille.

WCSS:n ominaisuus float:left tai float:right ohjaa tekstin kiertämään kuvaa, jos kuvan leveys on alle puolet näytön leveydestä. Kun teksti kiertää kuvaa, se vie vähemmän tilaa kuin jos se alkaisi uudelta riviltä kuvan jälkeen. Tämä puolestaan vähentää käyttäjän tarvetta vierittää näyttöä.

Kannattaa välttää määrittämästä kuville kehyksiä, koska käyttäjän on tällöin vaikeampi erottaa niitä kuvalinkeistä. Yleisimmät mobiiliselaimet näyttävät linkkikuvat kehystettyinä.

On viisasta käyttää alt attribuuttia <img> elementissä. Se näyttää vaihtoehtoisen tekstin useimmissa selaimissa, jos kuva ei esimerkiksi lataudu. alt attribuuttia kannattaa käyttää myös linkkikuvissa.

Kun määritetään kuvalinkki ( <a> elementti, jossa <img> elementti ensimmäisenä sisältönä), kannattaa määrittää myös accesskey attribuutti, jos linkki on tärkeä navigoinnin kannalta. Kaikki accesskey-attribuutilla varustetut linkit lisätään automaattisesti Options menuun. (Options-menuun lisätään alt-attribuutissa määritelty arvo. Teksti typistetään, jos se ylittää Options menun leveyden.)

Koko näytön kokoisia aloituskuvia kannattaa välttää. Tällaiset splash skreenit sisältävät yleensä firman tai palvelun suurikokoisen logon, jonka lataamisesta käyttäjä ei välttämättä ole kovin innostunut. WAP-yhteyksillä haetaan tyypillisesti välitöntä pääsyä palvelun oleelliseen informaatioon. Pieni firman logo tai palvelun tunnus alkusivulla riittää hyvin palvelun brandiksi. Hyvä käytettävyys muistetaan paremmin kuin suuri kuva ja huono toimivuus.

Kuvat on viisasta sovittaa palvelun kohderyhmän mukaan. Esimerkiksi animaatiot ja pilakuvat voivat sopia hyvin nuorisolle suunnattuun palveluun, mutta harvemmin business-sovellukseen.

XHTML MP:n <img> elementti ei tue align, border, hspace, vspace tai usemap attribuutteja.

3.3.9 Muita XHTML-tietoja

3.3.9.1 Pikalinkit

Yleisimmissä mobiiliselaimissa, kuten Nokia Mobile Browserin versiossa 3.0.1, pikalinkit ovat kiinteitä eikä niitä voi koodilla ylikirjoittaa. Vasen on Options (tai OK tekstisyöttötilassa) ja oikea Back (tai Clear tekstisyöttötilassa).

Options pikalinkki tarjoaa käyttäjälle mahdollisuuden saada helposti esiin kaikki selainkohtaiset valinnat milloin tahansa selausistunnon aikana. Back pikalinkki puolestaan vie edelliselle XHTML-sivulle, jolla käyttäjä on käynyt.

Yleensä kaikki linkit ja Submit painikkeet, jotka sisältävät accesskey attribuutin, lisätään automaattisesti Options-valikkoon. (Palauta mieleen luku "Linkkien pikanäppäimet (accesskey)")

3.3.9.2 Skriptit

XHTML MP:ssä <script> elementti ja script attribuutti eivät ole tuettuja missään elementissä.

XHTML MP ei sisällä myöskään <object> ja <param> elementtejä. Yleisimmät mobiiliselaimet eivät tue mitään objektityyppejä.

3.3.9.3 Keksit (Cookies)

Mobiiliselaimista ainakin Nokia Mobile Browser v3.0.1 tukee standardeja HTTP-keksejä Nokia Activ Server Gateway:n kautta, mahdollisesti myös muiden yhdyskäytävien kautta.

3.3.9.4 Kehykset (Frames)

Kehykset eivät ole tuettuja XHTML MP:ssä.

3.3.9.5 Laajennukset

Yleisimmät mobiiliselaimet tukevat XHTML MP-laajennuksia yhteensopivuuden vuoksi Compact HTML:n kanssa:

Tuetut Compact HTML attribuutit

<dir> <menu> tel: URI scheema, cti, telbook

ja email attribuutit

3.4 XHTML VERRATTUNA HTML:ÄÄN JA WML:ÄÄN

Tässä luvussa kuvaillaan yleisesti otsikossa mainittujen XML-kielten tärkeimpien elementtien vastaavuuksia ja etuja niitä ohjelmoijia silmälläpitäen, jotka haluavat siirtyä HTML:n tai WML:n käytöstä XHTML:n pariin. Tarkastelussa keskitytään niihin elementteihin ja rakenteisiin, joissa on eroja.

3.4.1 XHTML:n ja HTML:n välisiä eroja

XHTML on tarkasti yhdenmukainen XML-kielen syntaksin ja sääntöjen kanssa, kun HTML taas ei ole. Koska HTML ei edellytä täsmällistä XML:n koodauskäytännön noudattamista, siitä seuraa, että sisältö voi näkyä eri tavalla eri selaimissa. XHTML puolestaan pakottaa koodaamaan sisältöä täsmällisesti XML:n syntaksin mukaan, josta seuraa, että sisältö toistuu yhdenmukaisesti valtaosassa selaimia ja laitteita. XHTML:n ansiosta koodi on myös sekä hyvänmuotoista että yhdenmukaista, joten sen muuntamiseen, käsittelyyn ja virheentarkastukseen voidaan käyttää standardeja XML-työkaluohjelmia.

Seuraavassa taulukossa on joitakin esimerkkejä XML -säännöistä, joiden noudattamista vaaditaan XHTML:ssä mutta ei HTML:ssä.

HTML XHTML MP

<li><B><I>kohta</b> <li class="i">

yksi</i> <span class="b">kohta</span>yksi</li>

<LI>kohta 2</li> </ul> <li>kohta2</li>

linkki</a> <a href="dokumentti.xhtml">linkki</a>

Esimerkin XHTML-osassa käytetään aitoja CSS tyylimäärityksiä, millä vältetään vanhentuvien <b> ja <i> elementtien käyttö. (Ja oletetaan, että CSS luokat b ja i on määritelty tyylitiedostossa, johon on lisätty vastaavat CSS ominaisuudet font-style:italic ja font-weight:bold). Käytännössä XHTML MP sisältää <b>, <i>, <big> ja <small> elementit tekstin muotoilun helpottamiseksi.

Muistilista HTML:n ja XHTML MP:n eroista:

HTML ei ole kirjainherkkä. XHTML on kirjainherkkä kaikkien elementtien ja attribuuttien suhteen. Elementtien nimet merkitään XHTML MP:ssä pienin kirjaimin.

HTML:n <li> tagi ei välttämättä vaadi lopetustagia </li>. XHTML puolestaan vaatii kaikille elementeille sulkevan tagin.

HTML-koodissa <b> ja <I> tagit voivat olla virheellisesti myös ristikkäin; XHTML MP:ssä ristikkäiset tagit eivät toimi.

HTML-koodissa attribuutin arvoa ei tarvitse merkitä lainausmerkkeihin href attribuutissa. XHTML vaatii aina lainausmerkit attribuutin arvon ympärille href attribuutissa.

Kaikki tyhjät tagit täytyy XHTML:ssä merkitä "itsepäättäviksi"; esimerkiksi <br/> tagilla on / kauttaviiva sen merkiksi, että koodissa ei ole vastaavaa </br> tagia. Itsepäättävää merkintää käytetään <br/>, <hr/>, <input_/> ja vastaavissa tageissa.

XHTML-koodissa attribuutti-arvopareja ei voi minimoida, kuten HTML:ssä, missä on mahdollista kirjoittaa esimerkiksi <form> elementtiin seuraavaa:

<option value="jokuarvo" selected> , jossa "selected" attribuutti on minimoitu.

HTML-selain tulkitsee edellisen koodin, että option on näytettävä muodossa "selected". XHTML:n oikeellisuus vaatii, että molemmat on merkittävä -sekä attribuutin nimi että sen arvo- vaikka vain yksi arvo ilmoitetaan:

Sama koskee myös seuraavia (ja muitakin) elementtejä:

HTML-selaimen on selvittävä koodin monimielisyydestä parhaansa mukaan, koska HTML:ltä ei vaadita hyvänmuotoisuutta. XHTML on yksiselitteistä, koska siltä vaaditaan täsmällistä XML-syntaksin sääntöjen noudattamista.

XHTML:ssä tekstinsyöttökentät tukevat CSS-ominaisuutta -wap-input-format, millä saadaan aikaan syöttömaski. (Käsittelimme -wap-input-format asiaa mm. edellisen luvun esimerkissä 6.)

3.4.2 XHTML:n ja WML 1.x:n eroja

Muutamia eroja XHTML MP:n ja WML 1.3:n välillä:

XML:n nimiavaruudet eivät olleet käytössä WML 1.3:ssa, mutta ovat XHTML:ssä. Oletusnimiavaruus on XHTML.

XHTML MP:ssä WML:n <wml> juurielementti on poistettu. Sen sijaan juurielementtinä on aina XHTML-elementti <html> .

XHTML:n moduuleista seuraavat ovat käytössä:

· Kaikki XHTML Basic:sta.

· <hr> elementti.

· Sisäinen style attribuutti.

· <style> elementti.

· <b>, <big>, <i> ja <small> elementit.

<head> elementti, joka oli valinnainen WML 1.3:ssa, on pakollinen XHTML MP:ssä.

WML:n <template> elementti on poistettu XHTML MP:stä.

Samoin WML:n <card> elementti on poistettu XHTML MP:stä. Sen sijaan käytetään <body> elementtiä. Tiedostossa saa olla vain yksi <body> elementti (toisin kuin WML:n <card> elementtejä, joita oli yleensä useita).

XHTML:ssä voidaan käyttää sivun sisäistä linkkiä, jolla hypätään toiseen asiayhteyteen samalla sivulla. Käyttäjä pääsee selaimen back pikalinkillä takaisin kohtaan, josta hyppäsi. (Käsittelimme asiaa edellisen luvun "Sisäiset viittaukset vastaavat WML:n kortteja" -osassa.)

WML:n ordered attribuutti on poistettu XHTML MP:stä.

WML-tapahtumat eivät ole tuettuja XHTML MP:ssä; esimerkiksi: <do>, <ontimer>,

<onenterforward>, <onenterbackward>, <onevent>, <onpick>, <go>, <prev>, <noop> ja <postfield>.

WML:n <do> elementtiä ei voi käyttää XHTML MP:ssä.

Input-elementit eivät tue WML:n format attribuutteja. Sen sijaan voidaan käyttää CSS-ominaisuutta -wap-input-format , jolla on sama syntaksi kuin WML:n format -attribuutilla.

On aina hyvä käytäntö suorittaa lomakkeen arvot palvelimella, ja jos niissä on virheitä, palauttaa lomake käyttäjälle syötettyine tietoineen, varustettuna kehotuksella korjata virheelliset arvot.

XHTML MP:ssä accesskey attribuutti on tuettu elementeissä <a>, <input>, <label> ja

<textarea> . On kuitenkin mahdollista, että accesskey ei ole tuettu kaikissa laitteissa.

WML:n muotoiluelementti <u> ei ole tuettu XHTML MP:ssä. Suositeltu tapa ilmaista sama asia XHTML MP:ssä on käyttää CSS-luokkaa ja määritellä tyyli ulkoisessa tyylitiedostossa seuraavasti:

.u {text-decoration:underline}

Sen jälkeen käytetään span elementtiä ja luokkaa määrittämään tyyli, esimerkiksi:

<span class="u"> Tämä on alleviivattu </span>

Muut WML 1.x elementit eivät ole tuettuja XHTML MP:ssä. WAP Forum on määrittänyt XHTML MP:n laajennuksen nimeltään WML 2.0. Se sisältää WML 1.x “yhteensopivia” elementtejä (esimerkiksi <wml:card>, <wml:do>, jne.) automatisoimaan tulkkausta WML1.x:sta WML 2.0:ksi WAP-yhdyskäytävässä (Gateway).

3.5 WAP CSS

Dramaattisin XHTML MP:n tuoma kehitys WML 1.x:een ja muihin mobiilimerkkauskieliin verrattuna on tuki tyylimäärityksille (Cascading Style Sheets).

CSS on täydellisesti dokumentoitu kirjoissa ja Internetissä. Tässä luvussa tarkastellaan lähinnä WCSS:n ja täysimittaisen CSS1:n eroja, sekä esitetään muutamia suosituksia tyylien tehokkaalle käytölle mobiiliohjelmissa. WAP CSS on varsin hyvä osa CSS1:tä.

CSS tarjoaa mahdollisuuden täsmälliseen sisällön hallintaan ja sen esittämisen optimointiin kaikissa laitteissa. Valtaosa ulkoasuun vaikuttavista tekijöistä -sisällön asemointi, fontit, tekstin attribuutit, kehykset, marginaalien linjaus, sisällön kulku- voidaan määrätä käyttämällä tyylejä. Dokumentin sivusuhteiden muuttaminen vaatii muutoksen vain yhteen paikkaan, tyylimääritykseen. Itse asiassa koko sivuston kaikkien dokumenttien tietyn ominaisuuden muuttamiseen riittää korjaus yhteen paikkaan, kun käytetään ulkoista tyylitiedostoa.

CSS:n tarjoama laaja kontrollimahdollisuus helpottaa myös sisällön edelleenkehitystä eri mobiililaitteille sopivaksi. Esitys, sen tyyli ja navigointi on helposti räätälöitävissä eri selaimille. CSS:n mahdollisuuksia käyttäen voidaan listamerkeiksi määritellä esimerkiksi numeroita, järjestyslukuja, ympyröitä ja neliöitä.

li {list-style-type:disc} li {list-style-type:square;

a {text-decoration:underline} color:red}

a {text-decoration:underline}

Lista tyyleillä hallittavista tekijöistä

· Välistykset, (tyhjät) täytteet ja marginaalit.

· Linjaukset ja sisällön virtaus (flow).

· Fontit ja tekstin määritteet, attribuutit.

· Reunukset

· Värit

· Käänteinen teksti- ja taustaväri laitteille, joissa on rajoitettu värikapasiteetti.

· Tekstinsyöttömaski käyttäen -wap-input-format ominaisuutta.

3.5.1 Tyylien lisääminen koodiin

Jokainen selain käyttää oletustyyliä, joka määrää, miten XHTML-sisältö esitetään laitteen näytöllä. Siis vaikka tyylejä ei koodissa määritettäisikään, dokumentin kokonaisuus näytetään oletustyylin mukaisesti. Oletustyylissä määritellyt arvot ovat kuitenkin alhaisimmalla tasolla arvojärjestyksessä, joten kaikki koodissa määritellyt tyylitiedot ohittavat oletustyylin.

3.5.1.1 Ulkoinen tyylitiedosto

Dokumentin head elementissä voidaan määrittää yksi tai useampia link elementtejä, joilla ilmoitetaan URLt, mistä löytyvät dokumentin tyylimäärityksiä sisältävät ulkoiset tyylitiedostot. Esimerkiksi seuraava määritys kertoo, että tyylitiedosto muntyyli.css sijaitsee samassa hakemistossa kuin itse dokumenttitiedosto:

3.5.1.2 Sisäinen tyylimääritys

Tyylitiedot voidaan määrittää myös sisäisesti itse dokumentin <head> elementin sisällä, <style> elementissä, jolloin tyylimääritykset koskevat koko dokumenttia. Seuraava <style> elementti ilmoittaa, että dokumentin kaikki teksti, joka on kirjoitettu kappale -elementteihin, näytetään sinisenä:

3.5.1.3 Tyylimääritykset Body-elementissä

Tyyli voidaan määrittää <style> elementillä myös missä tahansa dokumentin rungossa <body> ja </body> elementtien välissä. Tällä tavalla määritetty tyyli ohittaa kaikki muut saman elementin tyylimääritykset, jotka on mahdollisesti jo määritetty muualla (niin ulkoisessa tyylitiedostossa kuin <head> elementin <style> elementissäkin). Näin siksi, että paikallinen tyylidirektiivi on prosessointijärjestyksessä viimeisenä. (Eli kun luvun alussa puhuttiin arvojärjestyksestä, se ei ole tietenkään sama asia, päinvastoin; arvojärjestys ja käsittelyjärjestys ovat käänteisiä. Siis ensin käsitellään oletustyyli, seuraavaksi ulkoinen tiedosto, sitten <head> elementin <style> määritykset ja viimeiseksi paikalliset määritykset. Tästä tarkemmin seuraavassa kappaleessa.)

3.5.1.4 Tyylielementtien tasosääntöjä

Englanninkielinen tyyli-idea, Cascading Style Sheets, on varsin fiksu keksintö ja sen käytännöllisyys huomattiin jo HTML-koodauksessa (vaikkakin eri selainten kyvyssä toistaa määrityksiä täsmällisesti oli eroja). Laajankin sivuston tyylimääritykset voidaan kirjoittaa yhteen tyylitiedostoon, johon viitataan eri sivujen <head> elementissä. Mahdollisista muutoksista selvitään korjauksilla yhteen tiedostoon.

Jos kuitenkin jollakin sivulla halutaan noudattaa poikkeavaa tyyliä, se kirjoitetaan <style> elementtiin kyseisen sivun <head> elementissä ennen <link> elementtiä, jolloin tyyli on voimassa sillä sivulla ja ohittaa tyylitiedostossa määritellyt säännöt. Mutta jos kuitenkin...

Edelleen saattaa tulla tilanteita, että kyseisellä sivulla jokin kohta halutaan toisen tyyliseksi. Joten kirjoitetaan paikallinen tyylielementti sivun runko-osassa. Sen määritykset puolestaan ohittavat dokumenttikohtaiset tyylimääritykset. Siinä limittäisten tyylitasojen voima ja joustavuus.

Se, millä tasolla mitkäkin tyylisäännöt määritellään, on myös merkitsevä tekijä. Oletetaan esimerkiksi, että XHTML MP dokumentti sisältää linkin ulkoiseen tyylitiedostoon seuraavasti:

ja viitattu tyylitiedosto sisältää seuraavat määritykset:

p {font-family: arial; color: black}

Jos nyt seuraavanlainen <style> -elementti kirjoitetaankin dokumentin <head> -osassa <link> -elementin jälkeen:

on kaikki <p> -elementeissä oleva teksti edelleen tyyppiä font-family arial, mutta tekstin väri on sininen.

Entä jos järjestys on päinvastainen? Eli <style> -elementti on määritelty ennen <link> -elementtiä, kuten seuraavassa:

Kyllä, teksti on mustaa.

Käyttämällä kahta <style> -elementtiä, joista ensimmäinen on ennen <link> -elementtiä ja toinen sen jälkeen, on siis mahdollista varioida tyylimääritysten vaikutusta dokumentissa (kunnes koodaaja on itsekin niin sekaisin, että tuupertuu kanveesiin).

3.5.1.5 XHTML:n style -attribuutti

style attribuutilla on mahdollista asettaa tyylimääritys yksittäiselle elementille siinä kohtaa dokumentissa, missä se määritetään. Ominaisuus, jota voidaan nimittää "sisäiseksi tyyliksi", on XHTML:n laajennus. Se sallii tyyliominaisuuksien määrityksen yksittäisille elementeille, joten se ohittaa mahdollisesti aikaisemmin määritellyt <style> elementit ja ulkoisen tyylitiedoston. Esimerkiksi: <p style="color:red">punaista tekstiä</p>, vaikka olisimme määritelleet dokumentin muun tekstin mustaksi ja siniseksi edellä esitetyillä määrityksillä.

3.5.1.6 XHTML:n class -attribuutti

Yksi sisäisten tyylien hankaluuksista on, että tyylimääritysten esiintymistä koodissa on vaikeampi löytää ja niiden muuttamisessa on enemmän työtä. Niiden käyttö saattaa myös kasvattaa dokumentin kokoa huomaamatta, jos lisäyksiä tehdään aika-ajoin eri paikkoihin samaan dokumenttiin.

Parempi ratkaisu on käyttää class attribuuttia, jos samat määritykset soveltuvat useammalle elementille. Esimerkiksi:

.class1 {padding-bottom:4px}

Nyt on mahdollista lisätä muotoilu tarvittaville elementeille, ja määritys kuitenkin pysyy yhdessä paikassa (esim. ulkoisessa tiedostossa). Jos haluamme lisätä tämän tyylin vaikka yksittäiselle kappaleelle, käytämme class -attribuuttia kyseisen kappaleen elementin sisällä ja kirjoitamme attribuutin arvoksi "class1”, esimerkiksi: <p class="class1">Tämän kappaleen jälkeen on tyhjää tilaa 4px.</p>

3.5.1.7 XHTML:n id -attribuutti

Yhdessä WAP CSS:n kanssa XHTML MP tarjoaa mahdollisuuden keskittää tyylimääritykset yhteen paikkaan (joko ulkoiseen tiedostoon tai tyyliosioon <head> elementin sisällä), vaikka haluttaisiin lisätä tyylimääritys yksittäiselle elementille, mutta ei dokumentin muille saman tyypin elementeille.

Esimerkiksi yksittäiselle <h1> -elementille voitaisiin kirjoittaa <head> -elementin <style> -osiossa seuraava määritys:

<head>

<style>

#omaid {border-width: 1; border: solid; text-align: center}

</style>

</head>

Ja sitten lisätä tämä tyyli <h1> elementille seuraavasti:

<h1 id="omaid" >Otsikolla on kiinteä reunus.</h1>

3.5.1.8 XHTML:n div ja span -elementit

Edellä käsiteltyjen menetelmien lisäksi tyylejä voidaan määritellä myös peräkkäisille elementeille div elementtiä käyttäen tai merkkijonoille span -elementin avulle. Jos esimerkiksi tyylielementti dokumentin <head> -osassa sisältää seuraavaa:

div.testi-tapaus {text-align: center; color: blue}

span.testi-id {color: red}

</style>

Dokumentin rungossa voidaan nyt määrittää div -elementillä tyylit kappaleryhmälle ja span -elementillä merkkijonolle, esimerkiksi:

<p>Tämä kappale on sininen.</p>

<p>Tässä on <span class="testi-id">Testi99 ja Testi100</span> speksit.</p>

</div>

Yllä olevalla koodinpätkällä saadaan molempien kappaleiden sisältö keskitetyksi ja käyttämään sinistä fonttia, paitsi merkkijono “Testi99 ja Testi100”, joka käyttää punaista fonttia.

3.5.2 Huonon tyylin välttämisestä

XHTML-sisällön rivin katkaiseminen ei ole järkevää. Toisin sanoen kannattaa välttää white-space -ominaisuuden nowrap -arvon käyttöä. Oletusarvoinen rivinvaihto on vahvasti suositeltu tapa; sen ansiosta pienen laitteen näytölle mahtuu enemmän sisältöä eikä käyttäjä joudu turhaan vierittämään näyttöä.

Linkkien alleviivausta (<a> -elementeissä) ei kannata estää. Toisin sanoen on hyvä välttää tyylin text-decoration:none käyttöä. Alleviivaamatonta linkkiä on vaikea huomata muun tekstin joukosta ennen kuin fokus on linkin päällä. Alleviivattu teksti on käyttäjille vanhastaan tuttu synonyymi linkille ja alleviivauksen poistaminen vain hidastaa ja vaikeuttaa palvelussa navigointia.

Leipätekstin eli normaalin tekstin alleviivaaminen text-decoration:underline -ominaisuutta käyttäen ei kannata. Alleviivaukset lähinnä hämmentävät ja turhauttavat käyttäjiä, koska ne on totuttu mieltämään linkeiksi. Parempi tapa korostaa lyhyttä tekstin osaa on käyttää esimerkiksi lihavointia. Toisaalta myös vilkkuva teksti heikentää luettavuutta ja joidenkin mielestä vilkkuvan tekstin ympärillä olevaa sisältöä on vaikea hahmottaa. Kuten sanottu lihavointi on varsin hyvä ja helppo keino korostaa tiettyä asiaa tekstissä (<b>Tämä on lihavoitua.</b>).

Tekstin ylenmääräinen korostaminen esimerkiksi font-style ja font-variant -ominaisuuksin saman XHTML-sivun puitteissa on turhaa. Liiallisen ja monenlaisten korostusten käyttö yleensä heikentää sisällön luettavuutta. Tehokkaimmin korostus toimii, kun sitä käytetään vain muutamiin sanoihin sivulla.

Liian monen fonttityypin (font-family) ja fonttikoon (font-weight, font-size) käyttö samalla XHTML-sivulla ei kannata. On suositeltavaa pyrkiä vain parin eri fonttityypin ja -koon käyttöön sivulla. Samoin kannattaa välttää kokonaisten sanojen tai peräti lauseiden kirjoittaminen pelkästään suurin kirjaimin, koska se voidaan tulkita "huutamiseksi" tai muuten provokatiiviseksi. Sitä paitsi se on vaikeammin luettavaa kuin normaali teksti.

Jos informaatio on tarkoitus esittää taulukkomuodossa, kehysten poistaminen taulukon ympäriltä ei ole kovin suositeltavaa. Sen sijaan vain palvelun layout-tarkoitukseen käytettävästä taulukosta nimenomaan kannattaa poistaa kehystys border-style -ominaisuutta soveltaen.

Aina kun se on mahdollista, tyylit kannattaa määritellä limittäisyys-sääntöjen mukaan mieluummin kuin class tai id -attribuuteilla elementeissä. WCSS-tyylitiedoissa suositellaan ilmaisemaan sisällön ominaisuudet esimerkiksi:

p (color:red}

mieluummin kuin class-ominaisuuksina, kuten:

.red {color:red}

Näin merkkijonoa class="red" ei tarvita erikseen dokumentin jokaisessa <p> -elementissä.

3.6 SELAIMET, TYÖKALUT, ASETUKSET

3.6.1 Standardit Web-selaimet

XHTML MP toimii moitteettomasti uudemmissa standardeissa Web-selaimissa ja mobiililaitteissa; koodin esikatselu ja testaus erilaisilla selaimilla käy luontevasti. (Joissakin Web-selaimissa viittaus ulkoisiin resursseihin -lähinnä XML-validaattoriin- saattaa tökkiä, mutta kun poistaa koodista testauksen ajaksi ylimmän rivin <?xml version="1.0"?>, esikatselu onnistuu hyvin.)

Muutamia pikku eroja kuitenkin löytyy.

XHTML MP ei tue cellpadding tai cellspacing attribuutteja table elementissä, eli WAP 2.0 selaimissa ei ole oletusarvoa taulukon cellpadding tai cellspacing ominaisuuksille. Jos haluaa varmistua, että taulukko näyttää täysin samalta niin Web- kuin WAP-selaimissakin, taulukon voi määrittää seuraavasti:

WAP-selaimet ohittavat määritykset, joita ne eivät tunnista, joten on hyväksyttävää käyttää tuollaista taulukkomääritystä tilapäisesti dokumentissa, jonka on tarkoitus näkyä yhtenäisesti sekä Webissä että mobiililaitteissa.

Jos on tarkoitus kirjoittaa XHTML-koodia sekä Web- että mobiiliympäristöön, seuraavanlaisista näkökohdista voi olla hyötyä. Useimmilla HTML-elementeillä on parinsa, esimerkiksi <p></p> tai <li></li>, mutta joillakin taas ei ole:

Elementit ilman erillistä lopetustagia

Joten näitä elementtejä ei voi sulkea erillistä lopetustagia käyttäen. Mutta niin HTML- kuin XHTML- parserikin ovat jokseenkin tyytyväisiä, jos lisää välilyönnin ennen kauttaviivaa (/) itsesulkevassa (ns. tyhjässä) elementissä, esimerkiksi: <br />. HTML-jäsentäjä ohittaa kauttaviivan tässä tapauksessa, XHTML-jäsentäjä puolestaan poistaa tyhjän välin ja tulkitsee elementin oikein.

3.6.1.1 Internet Explorer

Seuraava tyyliasetus saa IE:n näyttämään XHTML-koodin saman kokoisena kuin esimerkiksi Nokia Mobile Browser 3.0.1:

td, body {font-family:arial; font-size:x-small}

Joissakin laitteissa x-small fonttikoko kuitenkin toistuu niin pienenä, että kyseisen tyylin käyttöä kannattaa harkita vain ehdollisena, lähinnä siinä tapauksessa, että sivupyynnöt tulevat standardeilta Web-selaimilta.

Eräs keino tunnistaa, tuleeko sivupyyntö standardilta Web-selaimelta, on testata sisältääkö HTTP_USER_AGENT merkkijonon "Mozilla”. Seuraavassa esimerkki, jossa käytetään Active Server Pages (ASP):tä Microsoftin Internet Information Serverin tapauksessa:

<style>

If InStr(Request.ServerVariables("HTTP_USER_AGENT"), "Mozilla") Then

Response.Write("td, body {font-family:arial; font-size:x-small}")

End If

</style>

Vastaava testikoodi voidaan kirjoittaa muille palvelintyypeille sopivalla skriptikielellä. Monissa Web-palvelimissa on myös sisäinen työkalu user agent (client):ien mahdollisuuksien määrittelyyn.

3.6.1.2 Netscape Navigator

Versiota 6 vanhemmilla Netscape Navigatoreilla on vaikeuksia toistaa CSS-sääntöjä. Seuraavalla tyylimäärityksellä päästään kuitenkin lähimain samaan tulokseen kuin IE:llä x-small fonttia käyttäen:

td, body, p {font-family:arial; font-size:small}

Taulukon kehysten, taustan värin ja muiden tyyliominaisuuksien näyttäminen tuottaa Netscapella vain virheitä. Suositeltavaa onkin käyttää CSS-ominaisuuksien testaukseen Internet Exploreria, tai Netscape Navigatorin uusinta versiota. Myös Operan uusimmat versiot selviytyvät tyylien toistamisesta mallikkaasti.

3.6.2 Nokia Mobile Internet Toolkit

Nokia Mobile Internet Toolkit on Nokian ilmainen IDE mobiilisovellusten kehitykseen. Sen voi ladata osoitteesta: http://www.forum.nokia.com/ rekisteröintiä vastaan. Toolkit sisältää editorit ja simulaattorin, jotka helpottavat mobiilisovellusten koodaamista, esikatselua ja testaamista. Puhelinsimulaattoreita on useita erilaisia ja niitä voi ladata erikseen jälkeenpäin ja liittää toolkitin resursseihin.

NMIT sisältää editorit uusimpien sisältötyyppien tuotantoon, kuten XHTML MP, WCSS, MMS, Push, ja Multipart -sisällöille. Toolkit sisältää myös DTD-perustaisen kelpoisuusjäsentimen, joka tarkastaa dokumentin hyvänmuotoisuuden ja yhdenmukaisuuden. Työkalulla voi niinikään lisätä DTD:itä resursseihin tai tehdä omia DTD:itä.

Toolkit tukee lisäksi varoituksia ylisuurista dokumenteista Nokian puhelinten standardirajoitusten mukaan tai tiedostolle annetun maksimitavukoon mukaan.

Sovelluksia voi testata joko ulkoisen gatewayn tai toolkitin oman palvelinsimulaattorin avulla. Tietoturvamäärityksiä noudattavia testejä varten toolkit tukee sekä WIM että WTLS teknologioita.

Varsin käyttökelpoinen toolkit sisältää myös useita esimerkkisovelluksia, jotka ovat kokeiltavissa kirjanmerkkien tapaan suoraan selaimesta. Toolkitin mukana seuraa käyttäjän manuaali PDF- ja JavaHelp -muodossa. Samoin on viittaukset muihin Nokian ja kolmansien osapuolien kattaviin dokumentaatioihin.

3.6.3 Muut

3.6.3.1 W3C:n XHTML-validaattori

W3C tarjoaa mobiilikehittäjien käyttöön ilmaisen XHTML-kelpoisuuspalvelun [XHTMLValidator]: XHTML dokumentille annetaan URL, ja palvelu palauttaa tiedon koodin kelpoisuudesta. Jos dokumentti on epäkelpo, palvelu yleensä ilmoittaa virheet. Työkalu löytyy osoitteesta: http://validator.w3.org/

3.6.3.2 W3C Tidy

HTML [TIDY] on apuohjelma, jolla HTML-tiedostot voi kääntää hyvänmuotoisiksi, kelvollisiksi XHTML-tiedostoiksi. Ohjelmasta on useita GUI -versioita tai UNIX -lähdetiedostoja HTML:n prosessointiin.

Työkalu löytyy osoitteesta http://tidy.sourceforge.net/

3.6.3.3 CSS-validaattori

W3C:llä on ilmainen kelpoisuustyökalu [CSSValidator], jolla voi tarkastaa CSS:n virheettömyyden. Se ei toistaiseksi tarkasta WCSS:n rajoitteita suhteessa virheettömään CSS:ään. Nokia Mobile Internet Toolkitin CSS-editoria voi myös käyttää niin CSS-tiedostojen kirjoittamiseen kuin kelpoisuustarkastukseenkin. Työkalu löytyy osoitteesta http://jigsaw.w3.org/css-validator/

3.6.4 Palvelinasetukset

3.6.4.1 MIME-tyypit

Web-palvelimelle täytyy tehdä asetukset tiedostojen MIME-tyyppien tunnistamiseksi. Tämä hoidetaan yleensä asetusparametreilla tai taulukolla. Esimerkiksi Microsoft IIS Managerilla se tarkoittaa Web-sivua Properties/HTTP Headers/MIME Map/File Types.

Seuraavissa kahdessa taulukossa on MIME-tyypit WML- ja XHTML-sisällöille:

MIME-tyypit WML 1.x sisällöille

MIME-tyyppi Sivun kuvaus Yleinen tiedostopääte

text/vnd.wap.wml WML-tiedosto .wml

application/vnd.wap.wmlc käännetty WML .wmlc

text/vnd.wap.wmls WML-skripti .wmls

application/vnd.wap.wmlsc käännetty WML-skripti .wmlsc

image/vnd.wap.wbmp WBMP-kuva .wbmp

MIME-tyypit XHTML sisällöille

MIME-tyyppi Sivun kuvaus Yleinen tiedostopääte

text/html XHTML-tiedosto .xhtml, .htm, .html

application/xhtml+xml

application/vnd.wap.xhtml+xml

image/gif GIF-kuva .gif

text/css CSS-tiedosto .css

Yksi etu käytettäessä XHTML-tiedostoille MIME-tyyppiä text/html on, että tällaiset tiedostot ovat ladattavissa myös Web-selaimeen. Muilla kuin mobiiliselaimilla voi olla vaikeuksia tunnistaa MIME-tyyppiä application/* XHTML-tiedostoksi.

3.6.5 Autentikointi- ja auktorisointimekanismit

Yleisimmät mobiiliselaimet tukevat WAP Protocol Stack (WPS) -käytäntöä kaikkine tietoturvaominaisuuksineen. WAP 1.x -dokumentaatiossa kerrotaan yksityiskohtaisesti, miten tietoturva-arkkitehtuuri toimii ja kuinka sitä käytetään. Myös tämän kirjan WML-osassa on tietoa asiasta.

3.7 XHTML-ESIMERKKEJÄ

Tässä luvussa käydään läpi muutama esimerkki:

· XHTML-sivu ja sen CSS-tyylitiedosto kuvitteelliselle Koivusaari-palvelulle. Tulokset esitetään Nokian Toolkitin mobiiliselain-simulaattorilla.

· XHTML MP-juuridokumentti, josta on paikkakuntavalikon muodossa linkit viiteen XHTML MP-dokumenttiin. Kaikki viisi alidokumenttia ovat ohjeellisia ja esittävät variaatioita eri kuvamuotojen käytöstä. Tulokset esitetään Nokian simulaattorilla.

3.7.1 Koivusaari-palvelut CSS-tyylitiedostolla

Esimerkki 12: Koivusaari-palvelut XHTML

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Tyylikäs XHTML-sivu</title>

</head>

<body>

<br/>PALVELUT

</p>

<a href="eisivu.xhtml"> Matkat </a>

</p>

<a href="eisivu.xhtml"> Ajanviete </a>

</p><center>

<a href="eisivu.xhtml">Koti</a> |

<a href="eisivu.xhtml">Tyyli 2</a>

</p></center>

</body>

</html>

Esimerkki 13: Koivusaari-palvelut, ulkoinen tyylitiedosto ja tulos

img { padding-top: 4px;}

.i {font-style:italic}

.koti {margin-top: 6px;margin-right: 6px; padding-right: 6px;}

.ots1 {font-style: bold;text-align: center;}

.boxi {margin: 1px;padding: 1px;border-width: 1px;border-style:solid;

border-color:black;background-color:#ccaaff;text-align: center;}

3.7.2 Sääpalvelun XHTML-sivut

Tämä osio käsittää neljä XHTML MP-sivua, joista ensimmäinen on juuridokumentti ja sisältää linkit alasivuille. Sivut ovat ohjeellisia ja havainnollistavat XHTML-kuvaelementtien perustason käyttöä. Kunkin sivun tulostus simulaattorikuvassa.

Esimerkki 14: Sääpalvelu

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Sä äpalvelu</title>

</head>

<body>

<p><h3>Sä ä ja ennuste:</h3>

<li><a href="saahel.xhtml">Helsinki</a></li>

<li><a href="saatur.xhtml">Turku</a></li>

<li><a href="saarov.xhtml">Rovaniemi</a></li>

</p>

</body>

</html>

Esimerkki 15: Helsingin sää

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Helsingin sää</title>

</head>

<body>

<table><caption>Helsinki</caption><tr>

<th>Vallitseva sää</th>

</tr>

<tr>

<th>Ennuste</th>

</tr>

</table>

<h6>

<a href="saa.xhtml">Paluu</a>

</h6>

</body>

</html>

Esimerkki 16: Turun sää

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Turun sää</title>

</head>

<body>

<table><caption>Turku</caption><tr>

<th>Vallitseva sää</th>

</tr>

<tr>

<th>Ennuste</th>

</tr>

</table>

<h6>

<a href="saa.xhtml">Paluu</a>

</h6>

</body>

</html>

Esimerkki 17: Rovaniemen sää

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

<head>

<title>Rovaniemen sää</title>

</head>

<body>

<table><caption>Rovaniemi</caption><tr>

<th>Vallitseva sää</th>

</tr>

<tr>

<th>Ennuste</th>

</tr>

</table>

<h6>

<a href="saa.xhtml">Paluu</a>

</h6>

</body>

</html>