XHTML

1
XHTML MP

• Doc. Ing. Juraj Vaculík, PhD.
• Mail juvac_at_fpedas.utc.sk

2
Vývoj technológií WAP
zmeny
3
Zmeny vo filozofii WAP-u

• Zmena obsahu
• Zmena štruktúry dokumentu
• Zmena protokolov
• Zmena bezpecnosti

obsah
4
Zmena obsahu
gateway
5
Zmena protokolov
Xhtml mp
6
XHTML MP

• eXtensible HyperText Markup Language Mobile
  Profile) je znackovací jazyk definovaný pre WAP
  2.0. WAP 2.0 protokol je otvorený globálny
  štandard pre komunikáciu medzi mobilným
  prístrojom a Internetom, alebo inou pocítacovou
  aplikáciou vytvorený alianciou WAP Fórum (teraz
  Open Mobile Alliance (OMA)).
• prináša možnost spojit vzájomne technológie pre
  mobilné Internetové prehliadanie a taktiež pre
  WWW.
• Pred príchodom XHTML Mobile Profile, WAP
  programátori používali WML a WMLScript pre tvorbu
  WAP stránok, zatial co programátori Web stránok
  používali HTML/XHTML a CSS pre tvorbu Web
  stránok.

schéma
7
Prostredie ...

• HTML - HyperText Markup Language je znackovací
  jazyk používaný pre tvorbu Web stránok. Postupný
  vývoj technológií a používaných štandardov pri
  tvorbe Web stránok umožnil priniest WWW aj na
  bezdrôtové zariadenia. Preto nie prekvapujúco sú
  novo vznikajúce štandardy casto rozširenou
  technológiou, ktorej základ tvorí znacná cast
  HTML. To je aj dôvodom, preco špecifikácia
  znackovacích jazykov pre WAP (WML a XHTML Mobile
  Profile), sú tak blízke HTML.
• WML 1.x - Wireless Markup Language je znackovací
  jazyk definovaný pre WAP 1.x.Ide o prvý
  znackovací jazyk pre bezdrôtové zariadenia,
  používaný po tom, ako najväcší výrobcovia
  bezdrôtových zariadení vytvorili vlastné
  štandardy, napr. Openwave, Nokia a Ericsson. WML
  špecifikácia bola vytvorená WAP Fórom, ktoré
  vytvorili výrobcovia ako Ericsson, Motorola,
  Nokia a Openwave v roku 1997.

Prostredie ...
8
Prostredie ...

• XHTML - eXtensible HyperText Markup Language je
  reformuláciou HTML v XML (eXtensible Markup
  Language). Tagy v XHTML sú totožné s tagmi v
  HTML. XHTML má striktnejšiu štruktúru dokumentu
  ako HTML, co je dôležitou vlastnostou pre
  bezdrôtovú, ciže mobilnú komunikáciu. XHTML v
  budúcnosti úplne nahradí HTML.
• XHTML Basic - je základnou verziou XHTML. Je
  navrhnutý pre zariadenia z obmedzenou možnostou
  procesov a kapacity ako mobilné telefóny, PDA
  atd. Napríklad neobsahuje podporu CSS, rámcov a
  skriptovania.
• XHTML Mobile Profile - je oficiálny znackovací
  jazyk pre špecifikáciu WAP 2.0. WAP Fórum
  vytvorilo XHTML Mobile Profile založené na XHTML
  Basic, z pridaním niektorých elementov a
  atribútov z plnej verzie XHTML, ako napr. WAP CSS.

prostredie
9
XHTML Mobile Profile
XHTML Mobile Profile tvorí podmnožinu XHTML,
ktorá je striktnou verziou HTML s prvkami XML.
XHTML Mobile Profile je tvorený XHTML Basic plus
niektorých dalších elementov a atribútov plnej
verzie XHTML.
Prostredie ...
10
Prostredie

• WAP CSS - je zjednodušenou podobou CSS2 s
  doplnkami niektorých súcastí pre WAP. Je
  definovaná pre špecifikáciu WAP 2.0. Ak chceme
  zmenit vzhlad prezentácie XHTML MP stránok,
  postací modifikovat dokument css bez zásahu do
  XHTML MP dokumentu.
• WML 2.0 - bol vytvorené pre spätnú kompatibilitu
  a nie je urcená pre tvorbu.

história
11
Prehlad vývoja
výhody
12
Výhody XHTML MP

• Najväcšou výhodou zavedenia XHTML MP je, že
  programátori môžu použit rovnaký štandard pre
  tvorbu Web a WAP stránok. Tento prínos v rozvoji
  WAP aplikácií prináša nasledujúce výhody
• Ak tvoríme Web stránky pomocou HTML, XHTML, a
  CSS, môžme okamžite zacat tvorbu WAP stránok
  použitím XHTML MP.
• Rovnaké vývojové prostredie môže byt použité pri
  tvorbe Web aj WAP stránok. Môžme použit
  programové vybavenie pre tvorbu Web stránok na
  tvorbu mobilných aplikácií.
• Štandardné Web prehliadace môžu byt použité na
  prezeranie stránok v procese vývoja. WAP stránky
  taktiež môžme testovat aj na rôznych emulátoroch,
  napr. pre porovnanie velkosti zobrazenia,
  použitých farieb...
• Web stránky môžu byt konvertované do XHTML MP v
  krátkom case.

vývoj
13

pravidlá
14
Pravidlá tvorby XHTML MP

• Tagy musia byt uzatvorené.
• Tagy a atribúty musia byt písané malým písmom.
• Všetky hodnoty atribútov sa musia nachádzat v
  úvodzovkách.
• Tagy musia byt vkladané v poradí.

Xhtml-mp
15
Štruktúra XHTML MP dokumentu

• lt?xml version"1.0"?gt lt!DOCTYPE html PUBLIC
  "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
  "http//www.wapforum.org/DTD/xhtml-mobile10.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtXHTML MP Tutoriallt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHello world. Welcome to our XHTML MP
  tutorial.lt/pgt
• lt/bodygt
• lt/htmlgt

xml
16
XML deklarácia

• Všetky XHTML MP dokumenty sú aj XML dokumentmi,
  takže zacínajú XML deklaráciou.
• XML deklarácia špecifikuje XML verziu dokumentu.
  Taktiež aj použité kódovanie môže byt
  špecifikované v deklaráciilt?xml version"1.0"
  encoding"UTF-8"?gt Ak nie je špecifikovaný druh
  kódovania, tak sa implicitne použije "UTF-8".

doctype
17
DOCTYPE deklarácia

• Všetky XHTML MP dokumenty musia obsahovat DOCTYPE
  deklaráciu.
• lt!DOCTYPE html PUBLIC
• "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
• "http//www.wapforum.org/DTD/xhtml-mobile10.d
  td"gt
• DOCTYPE deklarácia špecifikuje meno DTD (Document
  Type Definition) a URL na DTD.
• DTD obsahuje informácie o používaných znackách a
  syntaxe znackovacieho jazyka.

prvky
18
Základné prvky

• štruktúra dokumentu
• text
• hypertext
• zoznamy
• formulár
• tabulka
• obrázky
• objekt
• meta informácie
• link
• base
• štýly

• Spolocné atribúty
• class
• id
• title
• style

štruktúra
19
Štruktúra dokumentu

• lthtml version xmlns ...
• lthead
• lttitle
• ltbase href
• ltstyle media title type ...
• ltbody background color ...
• ltframe name src ..

html
20
Element lthtmlgtlt/htmlgt

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• Xmlns atribút špecifikuje tzv. súbor názvov
  "namespace" jazyka XML.
• Ide o názvy všetkých znaciek jazyka XML a názvy
  všetkých atribútov týchto znaciek pre XHTML MP.

head
21
Hlavicka a telo dokumentu

• Medzi tagmi tvoriacimi hlavicku dokumentu
  ltheadgt..lt/headgt sa nachádzajú informácie o
  dokumente ako nadpis lttitlegt..lt/titlegt, tagy
  ltlink /gt, ktorý obsahuje cestu na CSS dokument a
  taktiež obsahuje meta informácie, ktoré slúžia
  pre vyhladávace.
• Nasledujú tagy ltbodygt...lt/bodygt, medzi ktorými sa
  nachádza telo dokumentu zobrazované v
  prehliadacoch.

meta
22
Meta informácie

• ltmeta content http-equiv
• refresh
• content-type
• expires
• pragma

metadata
23
Metadata

• V hlavicke dokumentu môžeme špecifikovat meta
  informácie, ktoré slúžia pre potreby
  prehliadacov, ako klúcové slová atd., ale aj
  rôzne iné informácie ako napr. meno autora
  stránok atd. Slúži k tomu nepárový tag ltmeta /gt.
• lt?xml version"1.0"?gtlt!DOCTYPE html PUBLIC
  "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
  "http//www.wapforum.org/DTD/xhtml-mobile10.dtd"gt
  lthtml xmlns"http//www.w3.org/1999/xhtml"gt  lthe
  adgt    lttitlegtXHTML MP Tutoriállt/titlegt     ltmet
  a name"author" contentmeno autora"
  /gt   lt/headgt  ltbodygt   ltpgtNazdar, vítajte pri
  výucbe XHTML MP ...lt/pgt lt/bodygtlt/htmlgt

cache
24
Kontrola pamäte Cache

• lt?xml version"1.0"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile
• 1.0//EN" "http//www.wapforum.org/DTD/xhtml-mobile
  10.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtXHTML MP Tutoriallt/titlegt
•    ltmeta http-equiv"Cache-Control"
  content"no-cache" /gt
• lt/headgt
•  ltbodygt
•    ltpgtHello world. Welcome to our XHTML MP
  tutorial.lt/pgt
•  lt/bodygt
• lt/htmlgt

Refresh ...
25
Periodické obnovovanie stránok

• lt?xml version"1.0"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile
• 1.0//EN" "http//www.wapforum.org/DTD/xhtml-mobile
  10.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
•   ltheadgt
•     lttitlegtXHTML MP Tutoriallt/titlegt
•     ltmeta http-equiv"refresh" content"15" /gt
•   lt/headgt
•   ltbodygt
•     ltpgtHello world. Welcome to our XHTML MP
  tutorial.lt/pgt
•   lt/bodygt
• lt/htmlgt

refresh
26
Presmerovanie na stránku

• lt?xml version"1.0"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile
• 1.0//EN" "http//www.wapforum.org/DTD/xhtml-mobi
  le10.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
•   ltheadgt
•     lttitlegtNázov stránkylt/titlegt
•   ltmeta http-equiv"refresh" content"15URLsub.
  xhtml" /gt
•  lt/headgt
•  ltbodygt
•    ltpgtVitajte ....lt/pgt
•  lt/bodygt
• lt/htmlgt

text
27
Text

• ltabbr
• ltacronym
• ltaddress
• ltblockquote cite
• ltbr clear
• ltcite
• ltcode
• ltdfn
• ltdiv align
• ltem

• lthx (1-6)
• ltkbd
• ltp align
• ltpre
• ltq cite
• ltsamp
• ltspan
• ltstrong
• ltvar

prezent
28
Text - prezentácia

• ltb - bold
• ltbig - velké
• lthr align noshade size width
• ltI - italic
• ltsmall - malé
• ltu - podciarknutie

ukážka
29
Písanie textu

•  ltheadgt  lttitlegtFont Stylelt/titlegt lt/headgt ltbo
  dygt  ltpgt   ltbgtBoldlt/bgtltbr /gt   ltigtItaliclt/igtltbr
  /gt   ltbgtltigtBold italiclt/igtlt/bgtltbr
  /gt   ltsmallgtSmalllt/smallgtltbr /gt   ltbiggtBiglt/biggt
  ltbr /gt   ltemgtEmphasislt/emgtltbr /gt   ltstronggtStron
  glt/stronggt   lt/pgt lt/bodygtlt/htmlgt

link
30
Hypertext - prepojenie

• lta anchor
• href
• accesskey
• charset
• directkey
• memoryname

accesskey
31
Odkaz pomocou rýchlej volby

• Atribút "accesskey" je urcený k definovaniu
  rýchlej volby odkazov. Atribút môže mat tieto
  hodnoty ", , 0, 1, 2, 3, 4, 5, 6, 7, 8, a 9".
•  ltpgtThis is page 1.ltbr /gt
•   lta accesskey"1" href"links7.xhtml"gt
• ltimg src"to2.gif" alt"Go to links7" /gtlt/agt
•  lt/pgt

zoznamy
32
Zoznamy

• ltdl
• ltdt
• ltdd
• ltol
• ltul
• ltli value type
• udalosti -gt

• onClick
• onDblclick
• onKeydown
• onKeypress
• onMousedown
• onMouseover
• onMouseout
• onMousemove
• onMouseup

Ul, li
33
Neoznacený zoznam

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt lthead
  gt  lttitlegtXHTML MP Tutoriallt/titlegt lt/headgt ltb
  odygt  ltpgtTable of Contentslt/pgt  ltulgt   ltligtPar
  t 1 XHTML MP Introductionlt/ligt   ltligtPart 2
  Development of Wireless Markup Languageslt/ligt   lt
  ligtPart 3 Advantages of XHTML MPlt/ligt   ltligtPart
  4 WML Features Lost in XHTML MPlt/ligt  lt/ulgt lt/bo
  dygtlt/htmlgt

Ukážka
34
Ukážka ul, image, none
Ol, li
35
Zoznam s urcením poradia

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt lthead
  gt  lttitlegtXHTML MP Tutoriallt/titlegt lt/headgt ltb
  odygt  ltpgtTable of Contentslt/pgt  ltolgt   ltligtPar
  t 1 XHTML MP Introductionlt/ligt   ltligtPart 2
  Development of Wireless Markup Languageslt/ligt   lt
  ligtPart 3 Advantages of XHTML MPlt/ligt   ltligtPart
  4 WML Features Lost in XHTML MPlt/ligt  lt/olgt lt/bo
  dygtlt/htmlgt

Type1
36
Ukážka type1, a
Dl, dt, dd
37
Zoznam skratiek DL, DT, DD

• ltdlgtltdtgtCHTML lt/dtgtltddgtCompact Hypertext Markup
  Languagelt/ddgt
• ltdtgtCSD lt/dtgtltddgtCircuit Switched Datalt/ddgt
• ltdtgtCSS lt/dtgtltddgtCascading Style Sheetlt/ddgt
• ltdtgtGPRS lt/dtgtltddgtGeneral Packet Radio
  Servicelt/ddgt
• ltdtgtHDML lt/dtgtltddgtHandheld Device Markup
  Languagelt/ddgt
• ltdtgtHTML lt/dtgtltddgtHypertext Markup Languagelt/ddgt
• ltdtgtMIDP lt/dtgtltddgtMobile Information Device
  Profilelt/ddgt
• ltdtgtMIME lt/dtgtltddgtMultipurpose Internet Mail
  Extensionlt/ddgt
• ltdtgtMMS lt/dtgtltddgtMultimedia Messaging
  Servicelt/ddgt
• ltdtgtUI lt/dtgtltddgtUser Interfacelt/ddgt
• ltdtgtWAP lt/dtgtltddgtWireless Application
  Protocollt/ddgt
• ltdtgtWAP CSS lt/dtgtltddgtWAP Cascading Style
  Sheetlt/ddgt
• ltdtgtWML lt/dtgtltddgtWireless Markup Languagelt/ddgt
• ltdtgtWTAI lt/dtgtltddgtWireless Telephony Application
  Interfacelt/ddgt
• ltdtgtXHTMLlt/dtgtltddgt Extensible Hypertext Markup
  Languagelt/ddgt
• ltdtgtXHTML MPlt/dtgtltddgt XHTML Mobile Profilelt/ddgt
  lt/dlgt

ukážka
38
Ukážka zoznamu skratiek
formular
39
Formulár

• ltform action enctype methotd accept-charset
• ltinput accesskey checked maxlength name size src
  tabindex value type istyle directkey mode
• ltlabel
• ltselect multiple name value
• ltoption selected value
• lttextarea accesskey cols name rows tabindex
  istyle mode

input
40
Formulár - input

• Všetky prvky
• ltfieldset
• Element select/option
• ltoptgroup
• disabled label

• Type
• text
• password
• checkbox
• radio
• submit
• reset
• hidden
• image
• file

príklad
41
Príklad formulára
select
42
Select option / optgroup

• ltselect name"selectionList"gt
• ltoptgroup label"Cast 1"gt
• ltoption value"tutorial_1A"gtPart 1Alt/optiongt
• ltoption value"tutorial_1B"gtPart
  1Blt/optiongt...
• lt/optgroupgt
• ltoptgroup label"Cast 2"gt
• ltoption value"tutorial_2A"gtPart
  2Alt/optiongt....
• lt/optgroupgt
• ltoptgroup label"Cast 3"gt
• ltoption value"tutorial_3A"gtPart
  3Alt/optiongt....
• lt/optgroupgt
• lt/selectgt

príklad
43
Select option / optgroup
tabulka
44
Tabulka

• ltcaption
• lttable summary width bgcolor
• cellpadding bordercolor
• lttd abbr align axis colspan rowspan
• headres scope valign bgcolor
• ltth abbr align axis colspan rowspan
• headres scope valign
• lttr valign align bgcolor

príklad
45
Príklad tabulky

• td border thick dashed blue
• lttablegt
• lttrgtlttdgtbunka Alt/tdgt lttdgtbunka Blt/tdgt
• lttdgtbunka Clt/tdgt lt/trgt
• lttrgtlttdgtbunka Dlt/tdgt lttdgtbunka Elt/tdgt
• lttd rowspan"2"gtbunka Flt/tdgtlt/trgt
• lttrgtlttd colspan"2"gtbunka G lt/tdgtlt/trgt
• lt/tablegt

orámovanie
46
Orámovanie solid/dashed
img
47
Obrázky

• ltimg alt height longsrc src width
• border hspace vspace usemap longdesc
• ltmap name
• ltarea accesskey, alt, coords, shape, href

zobrazovanie
48
Zobrazovanie obrázkov

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt lthead
  gt  lttitlegtImage in XHTML MPlt/titlegt lt/headgt ltb
  odygt  ltpgt   ltimg src"smile.gif" alt"Smile"
  height"62"
• width"60" /gt
• ltbr /gtHello, welcome to our XHTML MP
  tutorial.  lt/pgt lt/bodygtlt/htmlgt

objekty
49
Objekty

• ltobject
• accesskey, align, border, data, height,
• hspace, name, standby, type vspace, width
• classid, codebase, codetype declare
• ltparam (id, name, type, value, valuetype)
• ltembed align border, name, src, type, height,
  width, vspace, hspace, accesskey

link
50
Link

• ltlink
• charset
• href
• hreflang
• media
• rel
• rev
• typebase

CSS
51
WAP CSS kaskádový štýl
funkcia
52
Ako funguje CSS
prehlad
53
WAP CSS

• font-
• text-
• backgroung-
• border-
• margin-
• padding-
• list-style-
• marquee-
• others -gt

• display
• visibility
• align
• vertical-align
• color
• width
• height
• clear
• float

font
54
WAP CSS font-

• -family generic-family (serif, sans-serif,
• monospace, fantasy), specific-font-family
• -size xx-x-smal/medium/large,
• velkost, percento
• -style normal, italic, obligue
• -variant normal, small-caps
• -weight normal bold-er lighter, 100-900
• P font-weightbold font-size12mmcolorred

text
55
WAP CSS text-

• -align left, right, center, justify
• -decoration none, underline, blink
• -indent velkost, percento
• -transform
• capitalize, uppercase, lowercase, none
• p text-aligncenter text-ident10px

border
56
WAP CSS border-

• -width, border-bottom-width, left, right, top
• velkost, thin, thick, medium
• -color bottom-color, left, top, right
• farba
• -style -bottom-style, left, top, right
• none, solid, hidden, dotted, dashed,
• double, groove, ridge, inset, outset

background
57
WAP CSS background-

• -color color
• -image url()
• -repeat
• repeat, no-repeat, repeat-x, repeat-y
• -attachment scroll, fixed
• -position
• císlo, percento,
• top, center, bottom, left, right

List-item
58
WAP CSS list-style-

• -images url()
• -position inside, outside
• -type disc, circle, square,
• decimal, upper-roman, lower-roman,
• lower-aplha, upper-aplha, none
• ol list-style-imagesurl(obr.gif)
• list-style-positionoutside

margin
59
WAP CSS margin-, padding-

• margin-
• -bottom, left, top, right
• velkost, percento, auto
• padding-
• -bottom, left, top, rigth
• velkost, percento

marquee
60
WAP CSS -wap-marquee-

• -dir ltr, rtl
• -loop integer, infinite
• -style scroll, slide, alternate
• -speed slow, normal, fast
• marq -wap-marquee-dirltr
• -wap-marquee-loopinfinite
• -wap-marquee-style alternate

ostatné
61
WAP CSS ostatné

• clear left, rigth, both, none
• display inline, block, list-item, none
• float left, right, none
• foreground-color color
• height velkost, percento, auto
• vertical-align baseline, top, bottom,
• middle, sub, super
• visibility visible, hidden, collapse
• white-space normal, pre, nowrap
• width velkost, percento, auto

Koniec ...
62
Dakujem za pozornost

• Dalšia téma
• JavaScript