73270 Hypermedian perusteet - harjoitus 5

1. Metaforat ja suunnittelu

Mieti luontevat (käyttöliittymä)metaforat seuraavantyyppisille sovelluksille ja ehdota vähintään kolme käsitettä, joiden avulla sovelluksen toimintaa ja käyttöä kannattaisi loppukäyttäjille kuvata:

Sovelluksessa käsitellään valokuvista digitoituja JPG-tiedostoja. Jokaiseen kuvaan on liitetty otsikkoteksti sekä attribuuttitietoja. Sovellusta käytetään pääasiassa kuvien säilytyspaikkana, kuvia voidaan etsiä joko attribuutteihin kohdistuvan avainsanahaun perusteella tai suoraan kuvatiedostoja selaamalla.
Sovelluksen tarkoituksena on toimia kodintarvikkeita myyvän yrityksen sähköisen kaupankäynnin välineenä (asiakkaat voivat ostaa tuotteita verkon läpi; tuotteet toimitetaan asiakkaille fyysisesti postipaketteina). Tietokantaan on kerätty jokaisesta kodintarvikkeesta kuva, hinta sekä tuotetiedot. Asiakkailla on mahdollisuus tutustua tuotteisiin, valita ostettavien tuotteiden joukko, sekä tilata tuotteet.
Järvikylän peruskoululle kehitetään WWW-sivuja käytettäväksi äidinkielen ainekirjoituksen opetuksen esimerkkimateriaaliksi. Koulun verkkosivuille kerätään muutaman sivun mittaisia kirjoitelmamuotoisia tekstidokumentteja. Itse kirjoitelmat ovat yhteisesti valitun aihepiiriin tiimoilta keksittyjä fiktiivisiä tarinoita. Tarkoituksena on, että kaikki oppilaat kirjoittavat vuosittain kaksi kirjoitelmaa, jotka kootaan tietokantaan. Tiedot ryhmitellään siten, että kunkin luokan (n. 15 opiskelijaa) yhtenä vuonna kirjoittamat tarinat kootaan yhteen ja otsikoidaan yleisotsikon alle. Kukin oppilas kirjoittaa itse valitsemallaan salanimellä. Myöhemmin tietoja käytetään koulussa opetuksen esimerkkiaineistona. Oppilaat voivat tietokannan avulla myös seurata omaa kehittymistään kirjoittajana.
Sovelluksen ideana on tarjota Eikan Bussilinja OY:n asiakkaille tietoa yrityksen järjestämistä vakiokuljetusvuoroista kaupunkien Tampere, Turku, Helsinki ja Rovaniemi väleillä. Bussien lähtö- ja saapumisaikojen lisäksi asiakkaat voivat halutessaan yksityiskohtaisesti tutkia bussien ajoreittejä.

Miten kohdissa a-d ehdottamasi metaforat käytännössä esitetään/näkyvät käyttäjälle?
Miten eri tapauksissa ne mielestäsi vaikuttavat sovellusten oletettuun toimintaan?
Mieti, millaista eri sovellusten käyttäminen olisi, mikäli metaforaa ei erikseen (tai suunnittelijan toimesta alitajuisesti!) olisi mietitty ja sovellusten käyttöliittymät perustuisivat kaikki esim. komentorivipohjaiseen kyselykieleen tai vaikkapa hierarkkisesti koottuihin, sisällysluettelon avulla jäsennettyihin HTML-sivuihin.

2. Metaforat ja selittäminen

Kirjoita lyhyt kuvaus sähköpostin käytöstä suomalaiselle, joka ei ole koskaan käyttänyt itse tietokonetta, eikä tiedä mikä Internet on. Huomioi sähköpostin tyypilliset piirteet (viestillä voi olla monta vastaanottajaa, liitetiedostot, ja merkistöjen koodaukseen liittyvät ongelmat). Kuvaus saa olla enintään "muutaman kymmenen A4-rivin" mittainen.
Tunnista käyttämistäsi metaforista (tai kielikuvista) tärkeimmät.
Mitä oikeita tai vääriä olettamuksia kuvauksesi (voi) välittää?

3. HTML-dokumenttien merkkaaminen

HTML-spesifikaation esittelemiä elementtejä ja attribuuttejaa kutsutaan HTML:n sanastoksi. Jos (ja kun) HTML:ää käytetään ensisijaisesti rakenteisten dokumenttien merkkauskielenä, tarkoituksena on että (teksti)dokumentin osien (esim. kappaleotsikko) merkitystä luonnehditaan esittämällä ne sopivan tyyppisinä HTML-elementteinä. Tällaista merkkaustapaa kutsutaan kuvailevaksi eli deskriptiiviseksi merkkaukseksi.

Mieti vastauksia seuraaviin:

Onnistuuko kuvaileva HTML-merkkaus koko sanastoa tuntematta? Perustele vastauksesi.
Minkälaisiin virheisiin HTML-merkkaaja voi yleisesti ottaen syyllistyä?
Miten merkkauksessa tapahtuneet virheet huomataan? Miten virheiltä voisi välttyä?

4. HTML-kielen kieliopin koneellinen tarkistaminen

Formaalista peruslähtökohdastaan huolimatta HTML-dokumenttien kirjoittaminen on toisinaan suurpiirteistä puuhaa koska yleisesti käytössä olevat selaimet eivät ole merkkauksen kieliopin tai sanaston kieliopin suhteen turhan tarkkoja (mikä oikeastaan on vähän harmi).

Joissain tilanteissa HTML-dokumentin merkkauksen kieliopin oikeellisuus on kuitenkin yhtä tärkeää kuin sen asiasisältökin (missä?).

Kirjoita ("käsin" koodaamalla) seuraava yksinkertainen HTML-dokumentti ja kokeile dokumenttia selaimessa. Toimiiko?

Moi maailma!

Tämä on ensimmäinen HTML-dokumentti, jonka syntaksin ja rakenteen oikeellisuuden 
aion testata. Merkkasin otsikon <h1>-koodilla ja tämän kappaleen <p>-koodilla.

Jottei tämä menisi pelkäksi hypeksi, kerrotaan nyt edes yhdessä harjoituksessa myös
matemaattinen totuus -- sopivin oletuksin pitää näet paikkansa että 1 + 2 < 4

World Wide Web Consortiumin (W3C) kotisivuilta löytyy HTML-validaattoripalvelu osoitteesta http://validator.w3.org/.

Kokeile validoida, ts. tarkistaa, että kirjoittamasi HTML-dokumentti on sekä merkkauksen kieliopin että käytetyn HTML-sanaston puitteissa kunnossa (jonkin tietyn HTML-spesifikaation mukainen).

Vinkki: Dokumentin tarkastamiseen on kaksi tapaa; voit ladata sivusi suoraan validoitavaksi palvelun http://validator.w3.org/file-upload.html avulla tai validoida URI-viittauksen päässä olevan tiedoston. (Jälkimmäisessä tapauksessa kopioi tiedosto unix-kotihakemistoosi, sinulle osoitetun http-alihakemiston alle (allekirjoittaneella ko. hakemiston nimi on ~/onykane/public_html) ja anna validaattorille parametrinä dokumentillesi muodostuva URL-osoite).

Korjaa ;-) HTML-dokumentistasi löytyvät virheet kunnes se on jonkin HTML-tyyppimäärityksen mukainen.

5. HTML-pähkinöitä

Toteuta seuraavat HTML-merkkausta (HTML4) käyttäen

Suomenkielisessä tekstissä esiintyy usein pitkiä yhdyssanoja. Halutaan että sana käyttöliittymämetaforaspesifikaatio tarvittaessa tavutetaan muodossa käyttö-liittymä-metafora-spesifikaatio.
HTML-dokumentin taustaväri halutaan pakottaa valkoiseksi. (Onnistuuko edes?)
Dokumenttiin halutaan liittää euro-merkki (se hassu pikku-e).
HTML-dokumentin sisään halutaan upottaa toinen kokonainen HTML-elementti (kuvan tapaisena objektina).

Vinkki: Helpoin tapa ratkaista pulmat on etsiä niihin vastausta suoraan HTML 4.01 -spesifikaatiosta