MHP & Superteksti-tv - Loppuraportti

Oiva Eskola, Paula Minni © 2007

Johdanto

Tämä dokumentti keskittyy dokumentoimaan harjoitustyön eri vaiheet ja tulokset, sekä siihen liittyvät ongelmat ja havainnot. Harjoitustyön varsinainen suunnitteluosuus löytyy esiselvityksestä ja työsuunnitelmasta.

Lopullinen palautus

Tekemämme superteksti-tv -palvelu löytyy osoitteesta:
http://bobs.fi/mmtekn/index.xhtml

Palvelu ei toimi tavallisessa selaimessa, vaan vaatii joko MHP-emulaattorin tai MHP-digiboksin. Harjoitustyön toimivuus on testattu Sofia Digitalin Backstage Emulatorilla.

Sisältö

Harjoitustyössä toteutettiin yksinkertainen superteksti-tv -palvelu Las Vegas -televisiosarjalle. Palvelu sisältää lyhyet kuvaukset sarjan jaksoista ja sarjan hahmojen esittelyn. Resurssien rajallisuuden vuoksi episodikuvaukset eivät ole yhtä pitkiä kuin mitä ne voisivat oikeassa kaupallisessa palvelussa olla.

Hahmojen esittelyssä on listattu sarjan näyttelijöiden nimet ja näiden esittämät hahmot. Jokaisesta hahmosta on oma lyhyt kuvailunsa.

Tietovisa

Tietovisa sisältää yhteensä kaksikymmentä sarjaan liittyvää kysymystä, joista kerralla arvotaan kymmenen katsojan vastattavaksi. Jokaiseen kysymykseen annetaan kolme vastausvaihtoehtoa, joista yksi on oikein. Tietovisaa voi pelata yksi tai kaksi pelaajaa, jolloin pelaajat vastaavat samoihin kysymyksiin vuorotellen. Tietovisan lopuksi pelaaja saa tietää oikeiden vastausten lukumäärän, ja hän pääsee katsomaan oikeat vastaukset kuhunkin kysymykseen. Oikean vastauksen lisäksi kysymyksen kohdalla voi olla lyhyt kommentti, joka selvittää kysymyksen taustoja.

Black Jack -peli

Palvelun varsinainen vetonaula on Black Jack -peli, jossa pelaaja pelaa leikkirahasta jakajaa vastaan. Black Jack sopii hyvin Las Vegas -teemaan, sillä se on yksi suosituimmista kasinopeleistä. Pelissä pelaaja voi pelata lähes samalla tavalla kuin kasinollakin, päättämällä panoksen, ottamalla kortteja tai jäämällä haluamaansa tulokseen. Pelin voi lopettaa milloin tahansa, ja hyvin pärjännyt pelaaja voi päästä high score -listalle.

Black Jack -peli. Jakajan kortit ylhäällä, pelaajan alarivissä.

Sisällöntuotanto

Tietoa Las Vegas -sarjasta kerättiin sarjan katsomisen lisäksi mm. sarjan viralliselta kotisivulta, Wikipedia-artikkelista ja TV.com:sta. Sopivaa kuvamateriaalia etsittiin sarjan kotisivuilta, mutta käytännössä Googlen kuvahaku osoittautui parhaimmaksi kuvalähteeksi.

Sisällöntuotanto koostui mm. episodikuvausten ja hahmoesittelyjen kirjoittamisesta sekä tietovisakysymysten keksimisestä.

Käytetyt tekniikat

XHTML

MHP-digiboksien selain tukee XHTML:ää, jolle on määritelty oma dokumenttityyppi, doctype. Käytännössä tämä XHTML ei eroa juurikaan Internetissä käytetystä XHTML:stä. Eri elementit sijoitetaan <div> -elementtien sisään.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html SYSTEM "http://sofiadigital.tv/stagebrowser-1-58.dtd">
<html>
<head>
	<title>Las Vegas - Tietovisa</title>
	<link rel="stylesheet" href="index.css"/>
	<meta name="nav-method" content="4-way"/>
</head>
<body>
	<div id="header">Las Vegas<br/>
	<h2>Tietovisa</h2>
	</div>

Sivujen HEAD-osiossa pitää ottaa huomioon kaukosäätimellä tapahtuva navigointi asettamalla <meta name="nav-method" content="4-way"/>. Tämä sääntö mahdollistaa linkkien välillä liikkumisen myös vasen-oikea -suunnassa normaalin ylös-alas -navigoinnnin lisäksi.

CSS

Kunkin sivun tyyli on määritetty erillisessä CSS-tyylitiedostossa. Tyylit sisältävät mm. taustakuvien ja tekstityylin määrittelyt. Tässä tapauksessa CSS:ää käytettiin myös eri elementtien täsmälliseen sijoittamiseen ruudulla. Käytännössä esimerkiksi sivuvalikolle annettiin etäisyys sekä ylälaidasta, että vasemmasta laidasta. Tämä käytäntö poikkeaa normaalista web-käytännöstä, missä kaikkien elementtien sijainteja ei yleensä määritellä kiinteästi. TV-kuvan resoluutio pysyy kuitenkin koko ajan samana, joten tämä käytäntö on perusteltu.

Ote tietovisan tyylitiedostosta:

BODY{
	background-color: black;
	background-image: url(las_vegas_bg.dtvp);
}

@redmenu {
	name: a);
	label: item1;
	target: url("quiz.php?players=1&question=1&answer=1&turn=1");
}

#header{
	top: 100;
	left: 65;
	color: #ffc;
	font-size: 36;
	font-weight: bold;
}

...

DIV.text{
	color: white;
	left: 240;
	top: 244;
	font-size: 22;
	width: 400;
	position: fixed;
}

CSS:n avulla määritetään myös alareunan värinappien toiminnot (pun - vihr - kelt - sin). Nappien taakse voi periaatteessa määrittää yksittäisen toiminnon lisäksi myös valikoita, mutta niitä ei nähty tarpeelliseksi tämän harjoitustyön kannalta. CSS:n voidaan myös määrittää muita erikoistoimintoja, kuten @clock, joka piirtää ruudulle päivämäärän ja ajan.

PHP

Lähes kaikki palvelun osa-alueet toimivat ainakin osittain PHP:n avulla. Episodilista ja hahmokuvaukset haetaan erillisistä tiedostoista, jotta niiden päivittäminen olisi helpmopaa. Tietovisa ja Black Jack tukeutuvat myös vahvasti PHP:n.

PHP on tähän harjoitustyöhön hyvin sopiva ratkaisu. Se mahdollistaa dynaamisten elementtien rakentamisen palvelimelle, jolloin asiakkaan tehtäväksi jää vain lähettää ja vastaanottaa dataa. Dynaamisia elementtejä olisi ollut mahdollista toteuttaa myös asiakaspäässä skriptikielellä, tässä tapauksessa Ecmascriptillä, mutta tästä luovuttiin liian haasteellisuuden vuoksi. MHP:n skriptikielelle oli vaikea löytää kunnon dokumentaatiota tai toimivia esimerkkejä. PHP oli siihen nähden huomattavasti helpompi vaihtoehto.

PHP:n käyttö helpotti myös rutiininomaisia tehtäviä, kuten uusien sivujen luomista. Tätä varten luotiin PHP:llä erillinen sivuluokka, joka huolehtii mm. otsaketietojen täyttämisestä ja sivun piirtämisestä ruudulle. Tämän ansiosta esimerkiksi meta-tagien lisääminen oli helppoa, sillä muutos tarvitsi tehdä vain yhteen tiedostoon.

Kuvatiedostot

Osa kuvatiedostoista pakattiin .dtvp-muotoon Sofia Digitalin Imager -ohjelmalla. Yksittäiset kuvat, esimerkiksi pelikortit, ovat kuitenkin .png-muotoisia. Pakattaessa kuvia .dtvp-muotoon huomattiin, että pienemmät pakkausprosentit aiheuttivat nopeasti ainakin tietokoneruudulla näkyviä pakkausjälkiä. Tämän takia kuvat ovatkin alkuperäisessä koossaan. Todellisessa tuotteessa palvelun vaatima lähetyskapasiteetti saattaisi olla rajoitettu, jolloin kuvien pakkaaminen pitäisi ottaa paremmin huomioon. Pakkausjälkien näkymistä oikeassa ympäristössä TV-ruudulla ei kokeiltu.

Las Vegas -sarjan henkilöhahmoesittely

Työkalut

Sofia Digitalin Backstage Editor

Ohjelma auttoi merkittävästi alkuun pääsemisessä. Ohjelma tarjoaa muutamia eri template-projekteja, joista näkee suhteellisen hyvin miten eri ominaisuuksia, kuten värinappeja käytetään. Ohjelma tarjoaa myös tiedostojen editoinnin ja emulaattorin, jolla tulosta pääsee tarkastelemaan "oikeassa" muodossa.

Backstagen digi-tv -emulaattori osoittautui erittäin hyödylliseksi, sillä se tarjoaa melko todenmukaisen testausympäristön.

Pico

Käytännössä suurin osa eri sivuista tehtiin käsin Pico-tekstieditorilla, sillä niiden vaatiman XHTML:n tuottaminen oli kohtuullisen helppoa.

Adobe Photoshop

Graafiset elementit toteutettiin Adobe Photoshop:lla.

PostgreSQL

Black Jackin high score -listaa varten luotiin yksinkertainen tietokanta, johon tulokset tallennetaan.

Column	Type	Modifiers
credit	integer	not null
name	text	not null
date	date	default now()

Havainnot

Tiedon löytäminen MHP:stä osoittautui yllättävän hankalaksi. Superteksti-tv -palveluista ja niiden toteuttamisesta löytyy erittäin vähän tietoa Internetistä, ja löytyvä tietoa on hajallaan ja usein hyvin piilotettua. Syynä voi olla se, että MHP ei ole yleistynyt kovin laajalti, vaikka se onkin ollut elomassa jo jonkin aikaa.

Palvelua testatessa huomattiin ettei digi-tv -emulaattori aivan vastaa oikeaa digi-tv -boksia. Oikea boksi tuntui olevan herkempi koodissa oleville virheille. Television kanssa ilmeni myös pieniä ongelmia kuvan turva-alueiden kanssa. Televisioon ei mahtunut aivan niin paljon kuin olisi voinut kuvitella. Tämä tosin luultavasti vaihtelee eri televisioiden välillä.

Ongelmat

Teknisistä ongelmista pahimmat liittyivät HTTP-otsakkeisiin. Otsakkeiden avulla selain voidaan esimerkiksi ohjata sivulta toiselle automaattisesti. Emulaattorissa hyvin toiminut

Header("Location: URL")

-PHP-komento ei kuitenkaan toiminut oikeassa digit-tv -boksissa, sillä URL:n olisi tässä tapauksessa pitänyt olla absoluuttinen, eli sisältää myös palvelimen osoite. Sama ongelma koski ilmeisesti myös

Header("Refresh timeout;URL")

-komentoa.

Kaikkia Black Jackin ominaisuuksia ei pystytty toteuttamaan. Tärkein näistä olisi ehkä ollut Split, eli kahden samanarvoisen kortin jakaminen kahdeksi eri kädeksi. Kahden pelattavan käden toteuttaminen osoittautui liian vaativaksi. Ongelmia syntyi myös siitä, että osa Black Jackin säännöistä on melko hankalia, ja toisaalta monet säännöt vaihtelevat kasinon mukaan.

Työskentelyn kannalta ongelmaksi nousi se, että työ oli testattavissa vain koululla. Digi-tv -emulaattori löytyi vain koulun koneilta, eikä muita vastaavia tuotteita ollut saatavilla. Tämä rajoitti työskentelyä jossain määrin.

Validointi ei ollut aivan niin helppoa kuin aluksi kuviteltiin. W3C:n validaattori yrittää parsia sivuja SGML-moodissa XML:n sijaan, mikä ei anna järkeviä tuloksia. Eniten validointivirheitä aiheuttavat erilaiset erikoismerkit, esimerkiksi < ja >, jotka käytännössä kuitenkin toimivat sekä emulaattorilla, että digiboksilla.

Mahdollisuudet

Muutamia harjoitustyön ominaisuuksia jäi toteuttamatta sekä ajanpuutteen, että puutteellisen osaamisen takia.

Graafisia elementtejä olisi voinut tehdä paljon enemmän. Oma taustakuva jokaiselle sivulle olisi luonut tarvittavaa vaihtelua yleisilmeeseen. Myös hahmoesittelyt olisivat hyötyneet paljon valokuvista. Televisio on erittäin visuaalinen media, ja tätä seikkaa olisi pitänyt hyödyntää paremmin.
Black Jackin huipputuloksia pystyisi helposti hyödyntämään monipuolisesti, esimerkiksi keräämällä listan viikon parhaista tuloksista.
Liikkuvan kuvan käyttö, esimerkiksi video-otteina sarjasta, tai tv-kuvan upottaminen palveluun.
Ohjelmakohtaisten eventtien hyödyntäminen olisi voinut tarjota hauskoja mahdollisuuksia. Tämä olisi luultavasti ollut kuitenkin hyvin työlästä, ja vaikeaa testata

Toteutunut työmäärä

Oiva

Ohjelmointi: 21h
Grafiikka: 3h
Dokumentaatio: 8h
Yhteensä: 32h

Paula

Ohjelmointi: 5h
Sisällöntuotanto: 12h
Dokumentaatio: 6h
Yhteensä: 23h

Työmäärä yhteensä: 55h

Yhteenveto

Työsuunnitelmassa asetetut tavoitteet saavutettiin pääosin. Palvelun tärkeimmät ominaisuudet, sarjan esittely, tietovisa ja Black Jack toimivat kuten alunperin oli tarkoitus. Kehitettävää jäi kuitenkin vielä. Seuraavat 50 tuntia olisi luultavasti käytetty ulkoasun ja sisällön hiomiseen. Harjoitustyö tarjoaa rungon, jonka päälle uutta sisältöä olisi helppo kehittää.

Työmäärä oli lähellä suunniteltua, mutta se painottui enemmän tekniseen työhön ja harjoitustyön dokumentointiin. Harjoitustyön aikana ei kuitenkaan tullut suuria viivytyksiä, mikä oli vähintäänkin onnekasta.

Harjoitustyö tarjosi nopean tutustumisen MHP:n maailmaan, mikä ei ollut ryhmällemme tuttu. MHP ei aivan vakuuttanut tarpeellisuudestaan: potentiaaliset palvelut ovat monilta osin päällekkäisiää Internetin kanssa, ja MHP-spesifikaatio on joiltain osin turhankin monimutkainen. Harjoitustyön aiheena MHP oli kuitenkin "OK", sillä se mahdollisti nopean kehitystyön ja näyttäviä tuloksia. Projekti opetti myös löytämään tietoa tilanteessa, missä sitä ei ole paljoa saatavilla. Se tarjosi myös hyvän mahdollisuuden käyttää ryhmän kuvankäsittely- ja PHP-taitoja ja Las Vegas-tietämystä.