XML ja WWW - Luento 11

Tällä luennolla tutustutaan XML:n käyttämiseen WWW:ssä. Tutustutaan yleistyviin WWW:ssä käytettäviin XML-pohjaisiin kieliin. Lisäksi käydään läpi harjoitustyön toteutusosuutta ja XForms-lomakkeita.

Luentotaltiointi

Ongelmia videon katselussa?

Harjoitustyö (toteutusosuus)

Mikä on XML?

Extensible Markup Language (XML) on yksinkertainen ja joustava metakieli, jolla määritellään rakenteellisia merkkauskieliä.

XML-pohjaisen dokumentin on oltava validi, eli sen on noudatettava jotakin dokumenttityyppiä. Dokumentin kieliopin määrittää:

XML-dokumentin on oltava hyvin muodostettu (well-formed). Vertaa esimerkiksi vanhempien HTML-versioiden tagisoppaan (engl. tagsoup):

XHTML

XHTML on XML-sovellus. XHTML on merkkauskieli.

Semanttinen Web

Jos haemme esimerkiksi tietoa WWW:stä, niin joudumme usein turvautumaan hakukoneisiin. Hakukoneet kaivavat ja järjestävät tekstitietoa sanaesiintymien ja linkkikytköksien perusteella, mutta eivät kuitenkaan ymmärrä tiedon merkitystä. Millaisia tuloksia saamme, jos kysymme hakukoneelta esimerkiksi mistä saan halvimmalla 32" laajakuva-tv:n? Hakukone ei luultavastikaan ymmärrä, että sivulta löytyvä luku on hinta tai tuotekoodi on televisio.

Semanttinen Web on normaalin WWW:n "laajennos", jossa kaikki tieto on yhtä hyvin ihmisen kuin koneenkin ymmärrettävissä. Tämä vaatii sen, että tiedolle annetaan formaalissa muodossa sen merkitys.

Semanttinen Web edellyttää riittävää määrää metatietoa eli dokumentin kuvailutietoa muodossa, jonka myös tietokone ymmärtää.

Metatieto voi olla esimerkiksi:

Merkityksien ja tiedon suhteiden kuvailemiseksi on kehitetty RDF- ja OWL-kielet, mutta perehdymme vain lyhyesti XHTML:n tarjoamiin metatietoa kuvaileviin elementteihin:

meta

meta-elementillä XHTML:ssä määritellään dokumenttiin liittyvää metatietoa. meta-elementti laitetaan head-elementin sisään.

<meta name="description"
  content="WWW-julkaiseminen - Tietotekniikan kurssi Jyväskylän yliopistossa 
           tietotekniikan laitoksen ja avoimen yliopiston yhteisopetuksena" />
<meta name="keywords"
  content="tietotekniikka, jyväskylän yliopisto, avoin yliopisto,
           tietotekniikan laitos, informaatioteknologia, opetus, kurssi" />
<meta name="author" content="Antti Ekonoja" />

Linkkielementti - link

<link title="Oletustyyli" rel="StyleSheet" href="/appro2008.css" type="text/css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="Copyright" href="/copyright.html" title="Copyright Notice" />
<link rel="Prev" href="../luento10/" title="Edellinen" />
<link rel="Next" href="../luento12/" title="Seuraava" />
<link rel="Start" href="../../" title="WWW-julkaiseminen" />
<link rel="Contents" href="../" title="Sisällys" />
<link rel="Parent" href="../" title="Edellinen taso" />
<link rel="First" href="../luento1/" title="Ensimmäinen" />
<link rel="Last" href="../luento12/" title="Viimeinen" />
<link rel="Search" href="/haku/" title="Haku" />

Lisätietoja ja esimerkkejä

Nimiavaruudet

Nimiavaruuksien avulla voidaan samassa dokumentissa käyttää useampaa erilaista dokumenttityyppiä ilman, että ne sotkevat toisiaan.

Scalable Vector Graphics (SVG)

SVG on vektorigrafiikan määrittelyyn tarkoitettu kieli.

Esimerkkejä:

Lisätietoa:

MathML

MathML on matemaattisen ja tieteellisen tekstin tuottamiseen tarkoitettu kieli. MathML perustuu XML:ään samalla tavalla kuin XHTML:kin.

MathML:ää tukee selaimista tällä hetkellä Firefox ja IE 7-8 (ainakin osittain). Operankin tuki on paranemassa, mutta vielä matemaattiset merkinnät eivät pääsääntöisesti näy Operassa ihan oikein. Muita MathML-ohjelmistoja löytyy jo paljon.

MathML jakautuu kahteen osaan:

Esimerkkejä:

Synchronized Multimedia Integration Language (SMIL)

SMIL on XML:ään perustuva standardoitu kieli, jolla voidaan määritellä synkronoituja multimediaesityksiä kuvien, tekstin, videon ja äänen avulla.

VoiceXML

Strukturoitu merkintäkieli tietokoneen ja ihmisen väliseen interaktioon puheen välityksellä. Tukee muun muassa puheendialogeja, äänimerkkikommunikointia, digitoidun äänen välittämistä, puheen äänittämistä ja sen tunnistamista. Operassa on mukana toimiva puheohjaus (Tools | Preferences | Advanced | Voice).

RSS (Really Simple Syndication)

RSS on XML-sovellus, jonka avulla on helppo jakaa uutisia tai mitä tahansa tietoa.

WWW-sivuston uutiset tai muut muutokset listataan RSS-tiedostossa, jonka sisältöä seurataan RSS-formaattia ymmärtävällä ohjelmalla.

Mikä on RSS?

Appro-sivuston RSS-feed

XForms 1.0

Tavallisten lomakkeiden rajoitukset tulevat hyvin nopeasti vastaan, kun aletaan tekemään hiemankin monimutkaisempia lomakkeita ja dynaamisia sivustoja. Tyypillinen ongelma tavallisissa lomakkeissa on staattisuus ja monimutkainen käsittely, esimerkiksi verkkokauppojen ostoskoria ei voida toteuttaa nykyisillä lomakkeilla ilman WWW-ohjelmointikieliä. Lomake on aina tietynlainen tietyillä alkuarvoilla ja varsinainen toiminnallisuus ja syötteiden tarkistukset on tehtävä palvelinpuolella ohjelmallisesti.

XForms-spesifikaation löydät osoitteesta http://www.w3.org/TR/xforms/.

Hyödyt

XForms tarjoaa W3C:n mukaan seuraavia etuja verrattuna perinteisiin lomakkeisiin:

Nykytoteutukset

XForms-tyyppisiä lomakkeita tullaan luultavasti tukemaan tulevaisuuden selainversioissa suoraan. Nykyisellään XForms-lomakkeita voidaan käyttää seuraavantyyppisillä ratkaisuilla:

XForms-esimerkkejä

XForms-demo

Esimerkkivideo XForms-lomakkeista (wmv)

Yksinkertaisen XForms-lomakkeen koodi:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- Oletusnimiavaruutena käytetään xhtml:n nimiavaruutta, mutta jos etuliitteeksi laitetaan xf, niin
     tällöin viitataan XForms-spesifikaation elementteihin -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xml:lang="fi">
<head>
  <style type="text/css">
  <!--
  /* Yleensä tyylejä ei kannata laittaa XHTML-koodin sekaan! */

  /* Määritellään input-elementit lohkoiksi, jolloin ne rivittyvät eivätkä mene putkeen */
  xf\:input {
    display: block;
    width: 20%;
  } 
  
  /* Jos syötekenttä ei ole määrityksen mukainen, niin reunustetaan se punaisella */
  xf\:input.invalid {
    border: 1px dotted red;
  }
  -->
</style>
<xf:model>
  <!-- Määritellään kerättävän tiedon tyyppi -->
  <xf:instance>
    <henkilo xmlns="">
      <nimi/>
      <email/>
      <sukupuoli>N</sukupuoli>
    </henkilo>
  </xf:instance>
  <!-- Määritellään sovelluslogiikka -->
  <xf:bind id="nimivaatimus" required="true()" nodeset="/henkilo/nimi">
  <xf:submission action="http://palvelin/kasittelija" method="post"
   includenamespaceprefixes="#default" id="laheta"/>
</xf:model>
</head>
<body>
<h1>Täytä lomake <xf:output ref="/henkilo/nimi"/></h1>
<!-- Määritellään lomakkeen käyttöliittymä -->
<xf:input ref="nimi" bind="nimivaatimus">
  <xf:label>Nimi:</xf:label>
  <xf:hint>Anna koko nimesi tähän</xf:hint>
</xf:input>
<xf:input ref="email">
  <xf:label>E-mail:</xf:label>
</xf:input>
<xf:select1 ref="sukupuoli">
  <xf:label>Valitse sukupuoli:</xf:label>
  <xf:item>
    <xf:label>Nainen</xf:label>
    <xf:value>n</xf:value>
  </xf:item>
  <xf:item>
    <xf:label>Mies</xf:label>
    <xf:value>m</value>
  </xf:item>
</xf:select1>
<xf:submit submission="laheta">
  <xf:label>Lähetä</xf:label>
</xf:submit>
</body>
</html>

Esimerkki lähetetyistä tiedoista:

<henkilo>
  <nimi>Antti Ekonoja</nimi>
  <email>antti.j.ekonoja@jyu.fi</email>
  <sukupuoli>M</sukupuoli>
</henkilo>

Lisää XForms-lomakkeista

Lisää XForms-esimerkkejä

Lisätietoa

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento11/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2010-02-23 12:01:19
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto