WAP 2.0 - formßtovßnφ textu -- WAP/WML -- Webdesign -- Interval.cz

WAP 2.0 - formßtovßnφ textu

Webovß prezentace by m∞la b²t v e-komerci doprovßzena alternativou WAP verze. V²hoda je jasnß - dostupnost kdekoli pomocφ mobilnφho telefonu. Tedy zprost°edkovßnφ informacφ nßvÜt∞vnφk∙m, kte°φ jsou v terΘnu a nemajφ p°φstup k PC ani jinΘmu za°φzenφ pro Φtenφ b∞₧n²ch WWW strßnek, mohou si vÜak zßkladnφ informace (sortiment firmy, cenφky, kontakty) pohodln∞ p°eΦφst pomocφ mobilnφho telefonu, kter² podporuje WAP technologii. P°enΘst tyto informace na mobil p°ibli₧n∞ v takovΘm podßnφ, jakΘ znßme z klasick²ch internetov²ch strßnek, umo₧≥uje protokol WAP 2.0 pomocφ k≤du napsanΘho v jazyce XHTML (XHTML-MP). Tentokrßt se podφvßme, jak pomoci CSS formßtovat text a vyu₧φt takΘ element blockquote i address.

WML neumφ vÜechno

Zßkladnφ textovΘ informace, kterΘ jsou zve°ejn∞ny na klasickΘ internetovΘ strßnce (prezentace e-komerce, zpravodajstvφ, p°φstup k bankovnφmu ·Φtu, nßkup∙m a podobn∞), musφ webdesigner napsat tak, aby se co nejlΘpe veÜly na displej mobilu. ProblΘm je ovÜem v tom, ₧e v∞tÜina tv∙rc∙ jeÜt∞ pφÜe WAP (Wireless Application Protocol) strßnky v jazyce WML (Wireless Markup Language), kter² nedßvß vφce mo₧nostφ pro formßtovßnφ textu. Je to vid∞t na mnoh²ch wapov²ch strßnkßch, kde je pφsmo zbyteΦn∞ velikΘ, takΘ formßtovßnφ odstavc∙ by mohlo b²t pest°ejÜφ. Nap°φklad na WAP strßnce Kovo d∙m Chloupek. Rovn∞₧ prezentace WAP strßnek AG Shop by mohla mφt v∞tÜφ v²b∞r menÜφho pφsma. Jak by WAP strßnky m∞ly vypadat, ukazuje nap°φklad wapovß strßnka Agentura N-59.cz. ╪eÜenφm je p°ejφt v publikovßnφ ve WAP, kter² dlouhou dobu vyu₧φval znaΦkovacφ jazyk WML, k mnohem zdatn∞jÜφmu a v²konn∞jÜφmu pokraΦovateli.

XHTML je d∙sledn∞jÜφ

V²razn∞ v²hodn∞jÜφ je vyu₧φvat p°i tvorb∞ strßnek pro mobily technologii WAP 2.0 postavenou na znaΦkovacφm jazyce XHTML, p°esn∞ji XHTML-MP (XHTML - Mobile Profile). Oproti WML je toti₧ d∙sledn∞jÜφ a p°esn∞jÜφ obdobou jazyka internetov²ch strßnek. WAP 2.0 podporujφ vÜechny nejnov∞jÜφ mobilnφ telefony. Podstatn∞ ubylo mobilnφch telefon∙ pou₧φvajφcφch starou verzi WAP 1.1, modely od roku 2001 majφ u₧ verzi 1.2 a nabφzφ vyu₧itφ kaskßdov²ch styl∙ CSS (Cascade Style Sheets). Ty zajiÜ¥ujφ vedle dokonalΘ sprßvy barev i v²teΦnΘ formßtovßnφ WAP strßnek a dokß₧φ se p°izp∙sobit rozdφlnΘ velikosti a rozliÜenφ displej∙ mobilnφch telefon∙. V prvnφm p°φkladu si ukß₧eme, jak zm∞nit pomoci CSS velikost pφsma. Pro toho, kdo pracuje p°i tvorb∞ klasick²ch internetov²ch strßnek s klasick²m CSS, to bude velmi jednoduchΘ.

Velikost titulk∙, tedy elementu h2, je urΦena ve stylopisu dokumentu, a to selektorem h2, kter² nßm zajistφ pot°ebnou velikost pφsma.
O zm∞nu velikosti b∞₧nΘho textu se postarß t°φda .pismov, kterß je ulo₧ena rovn∞₧ ve stylopisu dokumentu.
Zarovnßnφ dalÜφho textu v odstavci je provedeno takzvan²m p°φm²m stylem u stylovanΘho elementu, a to prost°ednictvφm atributu style s hodnotou deklarace stylu text-align:right.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
      "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Pouziti CSS</title>
      <style type="text/css">
      h2 { color:blue; text-align:left; font-size:0.6em;}
         .pismov {font-size:1.0em; color:red;}
      </style>
   </head>
   <body>
      <p>
      Ukazka zmeny pisma
      <span class="pismov"> na vetsi velikost</span>
      a zde puvodni velikosti
      </p>
<hr />
      <h2>Zmensene pismo...</h2>
<div style="text-align:right; color:red;">
         <p>Text zarovnßn v pravo...</p>
      </div>
      <hr />
            <h2>Zmensene pismo...</h2>
<div style="text-align:left; color:red;">
         <p>Text zarovnan vlevo...</p>
      </div>
   </body>
</html>

Ukßzka formßtovßnφ textu v emulßtoru Nokia

Formßtovßnφ textu pomoci CSS

Blockquote, address

XHTML nßm umo₧≥uje, na rozdφl od WML, pou₧φvat blokov² sΘmantick² element blockquote, za nφm₧ se automaticky zalamuje °ßdka. Slou₧φ k uzavφrßnφ citacφ. Lze tak jednoduÜe vytvß°et oddφl textu a odstavce, co₧ m∙₧e b²t na displeji mobilu p∙sobivΘ, ani₧ pou₧ijeme ke stejnΘmu efektu CSS styl. V poslednφ dob∞ jej webdesignΘ°i pou₧φvajφ k vyznaΦovßnφ jmen osob, organizacφ a podobn∞. Element blockquote je v²hodn² jako specißlnφ odstavec s v∞tÜφm lev²m a prav²m odsazenφm (voln²m mφstem od okraje).

SouΦasnß specifikace WAPforum Technical WAP 2.0 doporuΦuje rad∞ji pou₧itφ normßlnφho odstavce ;p nebo oddφlu div s deklaracφ stylu margin nebo margin-left, podobn∞ jako v XHTML, element blockquote vÜak nezavrhuje. TotΘ₧ platφ o dalÜφm blokovΘm elementu address, kter² vytvo°φ blok s pφsmeny zobrazen²mi v kurzφv∞ - o zalomenφ °ßdk∙ se vÜak musφme postarat pomocφ elementu <br />.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
      "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Zarovnani do bloku</title>
   </head<
   <body>
      <p>Nadpis:</p>
      <blockquote>
         <p>Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text...Text... Text... Text... Text... Text...</p>
      </blockquote>
<hr/>
<p>Kontakt:</p>
      <address>
         Adresa
         Ulice
         Mesto
         PSC
      </address>
      </body> </html>