XML ja WWW - Luento 11
- Luentotaltiointi
- Harjoitustyö (toteutusosuus)
- Mikä on XML?
- Nimiavaruudet
- Scalable Vector Graphics (SVG)
- MathML
- Synchronized Multimedia Integration Language (SMIL)
- VoiceXML
- RSS (Really Simple Syndication)
- XForms 1.1
- HTML5
- 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 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ää:
- DTD (Document Type Definition)
- DTD määritellään omalla kielellään.
- DTD:n avulla voi tarkistaa XML-tiedostojensa oikeellisuuden.
- XHTML 1.0 Strict
- XHTML 1.1
- XHTML Basic
- XML Schema
- Skeema (schema) on DTD:tä vastaava malli, jolla kuvataan dokumentin rakenne.
- Skeemat määritellään XML:llä.
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ää tai
- 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-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-elementti saa esiintyä vain head-elementin sisällä.
- link-elementillä määritellään dokumentin suhde muihin dokumentteihin.
<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ä
- Semantic Web Activity
- MuseoSuomi
- Semanttinen Web ja oppiminen
- Microsummaries - "Dynaaminen title"
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 3:sen tai Opera 11:sen (Opera 10 osaa näyttää SVG-osuuden)
- Mozilla SVG samples - toimivat myös Opera 10:llä
- hazor1e.xml (toimii Firefoxilla ja Operalla)
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ä:
- SVG+MathML-esimerkki - vaatii esim. Firefox 3:sen tai Opera 11:sen (Opera 10 osaa näyttää SVG-osuuden)
- Esimerkki - toimii Firefox ja Opera 11 -selaimilla
- W3C MathML Presentational -esimerkki - toimii Firefoxilla ja IE 7-8:lla, Operalla (versiot 10-11) osittain
- 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 ei ole noussut suosioon, sillä multimediaesityksiä tehdään enemmän muilla tekniikoilla (esim. Flash).
- SMIL-esimerkkejä, toimivat IE:llä
- Synchronized Multimedia Integration Language (SMIL) (LuK-tutkielma)
- Miten teen verkkoluennon - SMIL
- The CWI SMIL Page
- Streaming Media Wordl: SMIL
- SMIL - Wikibooks
- A Realist'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. 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.
- RSS 2.0 (Really Simple Syndication) Specification
- RSS 1.0 (RDF Site Summary) Specification
- RSS 0.91 (Rich Site Summary) Specification
- RSS:n eri versiot
- Sage - Firefoxin RSS-lisäosa
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:
- Eriytetyt osat:
- esitystapa,
- datan muoto ja
- 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.
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:
- Plug-in/extension (ladattava laajennos) selaimeen:
- Firefox 2.x-3.x-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 (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
- OpenOffice.org 3.0 - 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.x-smiles.org/demo/demos.xhtml - esimerkkejä XForms-lomakkeita tukevalle selaimelle
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ä):
- Firefox 3.6.13: 139+4
- Firefox 4.0b11: 197+9
- Opera 10.63: 159+7
- Opera 11.01: 177+7
- Internet Explorer 8.0.7600.16385: 27+0
- Internet Explorer 9 Beta: 96+5
- Safari 5.0.3: 207+7
- Google Chrome 9.0.597.98: 242+13
Uusia elementtejä, joita HTML5 tuo mukanaan ovat mm. seuraavat:
- article
- canvas
- figure
- header
- nav
- section
- footer
- audio
- video
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
- HTML5 - Wikipedia
- HTML5 differences from HTML4
- Dive Into HTML5
- Esimerkkejä HTML5-sivuista
- The HTML5 test - testaa selaimen HTML5 tuki
Käyttäjien kommentit