XML ja WWW - Luento 11
- Luentotaltiointi
- Esimerkit
- Mikä on XML?
- Nimiavaruudet
- Scalable Vector Graphics (SVG)
- MathML
- Synchronized Multimedia Integration Language (SMIL)
- VoiceXML
- RSS (Rich Site Summary)
- XForms 1.0
- Lisätietoa
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 XForms-lomakkeita.
Luentotaltiointi
- www11k.wmv 57M
- www11k.avi 122M
- www11k.mp3 12M
Esimerkit
- xforms.wmv 2.1M
- SVG+MathML
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ää:
- DTD (Document Type Definition)
- XML Schema
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:
- Dokumentin sisältöä kuvaavaa
- Dokumentin rakenneosia kuvaavaa
- Dokumentin hallintaan liittyvää
- Dokumentin säilytykseen liittyvää
- Dokumentin käyttöön ja käyttäjiin liittyvää
- Dokumenttien suhteisiin liittyvää
- Dokumenttiin liittyvää teknistä tietoa
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 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-elementti saa esiintyä vain head-elementin sisällä.
- link-elementillä määritellään dokumentin suhde muihin dokumentteihin.
<link title="Oletustyyli" rel="StyleSheet" href="/appro2005.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.
- Nimiavaruudet - W3C Suomen toimisto
- MathML ja XHTML
- XHTML-dokumentti jossa nimiavaruus on määritelty
- XHTML-dokumentti jossa nimiavaruutta ei ole määritelty
Scalable Vector Graphics (SVG)
SVG on vektorigrafiikan määrittelyyn tarkoitettu kieli.
Esimerkkejä:
- SVG+MathML-esimerkki - vaatii esim. Firefox 2:sen
- Mozilla SVG samples
- hazor1e.xml
Lisätietoa:
- SVG Coordinate Systems - W3C SVG
- Mozilla SVG
- Croczilla SVG Samples
- Inline SVG
- Adobe SVG Viewer
- SVG Magic
- SVG esimerkki
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ä vasta Mozilla. Muita MathML-ohjelmistoja löytyy jo paljon.
MathML jakautuu kahteen osaan:
Esimerkkejä:
- SVG+MathML-esimerkki - vaatii esim. Firefox 2:sen
- Esimerkki
- W3C MathML Presentational -esimerkki
- MathML Basics
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 Code Samples - Real
- Green is In XHTML+SMIL-esimerkki, toimii IE:lla
- Synchronized Multimedia Integration Language (SMIL) LuK-tutkielma
- Yle Multiradion SMIL
- Miten teen verkkoluennon - SMIL
- The CWI SMIL Page
- Streaming Media Wordl: SMIL
- SMIL - wikibooks
- A Realists's SMIL Manifesto
- XHTML+SMIL Profile
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.
RSS (Rich Site Summary)
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
- RSS:n eri versiot
- Sage Firefox
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:
- Eriytetyt osat;
- Esitystapa,
- Datan muoto,
- Toiminnallisuus.
- Laitteistoriippumaton.
- Käyttöliittymän ulkoasua ei ole kiinnitetty.
- Tietojen tarkistus kirjoitettaessa.
- Voidaan määritellä pakolliset kentät ja kenttien tietotyypit.
- Tiedon välitys XML-muodossa.
- Tiedon välitys useisiin kohteisiin.
- Lähetettyjä tietoja voidaan hyödyntää toisilla lomakkeilla.
- Kenttien tietojen lataaminen ja tallentaminen tiedostosta.
- Oletusarvojen lataaminen tiedostosta.
- Laskennallisten toimenpiteiden tekeminen ennen lähettämistä.
- Lomakkeen täyttövelhot.
Nykytoteutukset
XForms tulee osaksi XHTML2-spesifikaatiota. XForms-tyyppisiä lomakkeita tullaan luultavasti tukemaan uusissa selainversioissa suoraan. Nykyisellään XForms-lomakkeita voidaan käyttää seuraavantyyppisillä ratkaisuilla:
- Plug-in/extension (ladattava laajennos) selaimeen:
- Firefox 1.5-2.0-versioiden XForms-laajennoksella.
- FormsPlayer IE:lle (vaatii object-elementin käyttöä).
- Erillinen selain, joka tukee XForms-lomakkeita (esim. X-Smiles).
- Flash-animaatioon toteutettavissa sopivilla moduuleilla (esim. DENG).
- Java-applettina tehtävissä lisäkomponenteilla (esim. Chiba).
- Palvelinohjelma, joka muuntaa XForms-elementit HTML:ksi ja JavaScriptiksi (esim. FormFaces).
- Toteutuksista lisää W3C:n Forms-sivuilla.
XForms-esimerkkejä
Esimerkkivideo XForms-lomakkeista (wmv9)
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>anjoekon@jyu.fi</email> <sukupuoli>M</sukupuoli> </henkilo>
Lisää XForms-lomakkeista
- OpenOffice 2.1 - XForms-lomakkeiden luontiin
- http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html
- http://www.devshed.com/c/a/XML/XForms-Basics/
- http://xformsinstitute.com/lesson1.php
Lisää XForms-esimerkkejä
- http://www.formfaces.com/faces/Examples/index.html - JavaScript oltava päällä
- http://www.x-smiles.org/demo/demos.xhtml - esimerkkejä XForms-lomakkeita tukevalle selaimelle


Käyttäjien kommentit