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, HTML5:sta 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 laitoksella" />
<meta name="keywords"
  content="tietotekniikka, jyväskylän 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 jo melko hyvä versiossa 11, mutta vielä versiossa 10 matemaattiset merkinnät eivät pääsääntöisesti näy 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. SMIL ei ole noussut suosioon, sillä multimediaesityksiä tehdään enemmän muilla tekniikoilla (esim. Flash).

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.1

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:

HTML5 tuo samantyyppisiä hyötyjä myös tavallisiin lomakkeisiin, joten XFormsin tulevaisuuden kehitys voi mahdollisesti jäädä HTML5:sen jalkoihin.

Nykytoteutukset

XForms-tyyppisiä lomakkeita tullaan mahdollisesti 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ä

HTML5

HTML5 on kehitteillä oleva kuvauskieli WWW-sivujen rakentamiseen. Se tulee korvaamaan vanhentuneen HTML4:sen sekä XHTML:n. HTML5-kielessä pyritään yhdistämään HTML:n ja XHTML:n hyvät puolet.

Tällä hetkellä (helmikuu 2011) HTML5 on vielä Working Draft -vaiheessa, mutta Last Call -vaihe on tulossa jo toukokuussa 2011. Suosituksen asema vahvistunee vasta 2014, mutta HTML5:sta voi toki alkaa käyttää jo huomattavasti aiemmin - heti kun selaimista löytyy riittävästi tukea, eli käytännössä jo vuoden 2011 aikana.

Uusimmissa selaimissa (Internet Explorer 9, Firefox 4, Opera 11, Safari 5, Chrome 9) HTML5-tuki alkaa olla jo erittäin hyvällä tasolla.

Selaimien HTML5-testin tuloksia (max. 300 pistettä):

Uusia elementtejä, joita HTML5 tuo mukanaan ovat mm. seuraavat:

Uusia HTML5:sen lomakeominaisuuksia puolestaan käsiteltiin jo luennolla 7.

Esimerkkisivu - kokeile sivua esim. Google Chromella. Katso käytetyt HTML5-elementit sivun lähdekoodista.

Lisätietoa

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/>
2011-02-21 14:53:59
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta