Viimeisellä luennolla käsitellään hypermedian laadukkuutta yleensä ja verkkopalvelujen laatua erikseen: Vertauskuvat: metaforat, analogiat ja vertaukset. Hypermedia, taide ja muotoilu. HCI. Iteratiivinen suunnittelu. Käyttäjän ja suunnittelijan käsitemallit. Esimerkki: kaupungin bussi. Esimerkki: selkeä vuorovaikutus ja Mystery Meat Navigation (esimerkki). Eksyminen ja kognitiivinen kuormitus. W3c: saavutettavuus. W3C: laadukas Web-hypermedia. Verkkopalvelun käyttökelpoisuus ja laatu.
Kalvot: Luento 6 (PDF-muodossa)
Linkkejä ja lisälukemista:
- Yleistä
- Suunnittelu, käytettävyys ja käyttökelpoisuus
- W3C, standardit ja saavutettavuus
- Esimerkkejä:
Luennon nro 5 aiheina ovat videokuva ja videomateriaalien käyttö verkossa. Luentojen sisältö tarkemmin: videon käyttökohteita verkossa, videomateriaalin tuottaminen ja julkaiseminen verkossa sekä verkkovideoformaatit. Luennolla käydään läpi myös käytännön esimerkki videoleikkeen pakkaamisesta ja julkaisemisesta omilla verkkosivuilla.
Luentokalvot: Luento 5: Videokuva ja videomateriaalin käyttö verkossa
Esimerkkejä verkkovideoiden laadusta:
Lisälukemista:
Käytiin multimedian elementtejä webissä, erityisesti syvennyttiin kuvan, mutta myös äänen ja osittain myös animaation esittämiseen.
Luento 4: Multimedian elementit webissä
Täydennystä prujuun ja muita huomioita luennolta:
- Bittikarttagrafiikka = kuva esitetään pikseleittäin
- Häviöttömät bittikarttamuodot (PNG, GIF, TIFF)
- Soveltuvat pikselintarkkaan tiedon taltioitiin, säilyttävät kaiken informaation
- Häviölliset bittikarttamuodot (JPG, myös uudempi JPG2000)
- Soveltuvat erityisesti valokuvien taltiointiin, mutta hävittävät yksityiskohtia
- Vektorigrafiikka = kuva esitetään geometrisina muotoina (SVG)
- Ikonien, logojen, myös animaatioiden tuotantomuodoksi
- SVG sopii myös web-julkaisuun, mutta sen tuki selaimissa on hieman puutteellinen
- Ääni webissä
- Ydinasia: mieti kahdesti, ennen kuin julkaiset ääntä webissä. On erityisen tärkeää miettiä motivaatio äänen käytölle:
- Mitä haluan viestiä äänellä? Tuoko äänenkäyttö jotain lisäarvoa?
- Kuinka sijoitan äänitiedoston webbiin? Soiko se heti, kun avaan selaimella sivun vai löytyykö se linkin takaa?
- Hyviä formaatteja: MP3, OGG Vorbis on kiva, mutta vähemmän tuettu
- AAC ja erityisesti WMA ovat pitkälti sovellusriippuvia
Nettijatkoja kiinnostuksen mukaan:
Luennolla torstaina 5. kesäkuuta käsiteltäviä teemoja: CSS-tyylien perusteet. Valitsimet ja ominaisuudet. Tyylien liittäminen HTML-dokumenttiin. Miksi CSS-tyylejä kannattaa käyttää? Mitä tyylien tehokas soveltaminen edellyttää? CSS-taitto. Esimerkkejä toimivista käytännöistä.
Lataa kalvot: luento 3 (PDF)
Linkkejä ja lisälukemista:
Toisella luennolla syvennyttiin HTML:ään ja sen kautta myös hieman rakenteiseen merkkaukseen.
Linkki luentokalvoihin: Kalvot, luento 2 (PDF)
Muutamia huomioita:
- Kuvaileva vs. formatoiva merkkaus. Kuvaileva merkkaus pyrkii esittämään tiedon rakennetta, formatoiva merkkaus pyrkii esittämään tiedon esitystapaa.
- XHTML vai HTML? XHTML on XML-pohjainen, kun taas HTML on SGML-pohjainen. XHTML hyötyy mm. XML:n tarjoamista laajennusmekanismeista. Katso esim [1].
- XHTML pyrkii kuvailevaan merkkaukseen. Tavoitteena, että XHTML-kieltä käytetään ainoastaan dokumentin rakenteen merkkaukseen, tyyli määritellään sitten erikseen esimerkiksi CSS:n avulla. Kun tyylittelyyn liittyvä problematiikka ulkoistetaan, voidaan XHTML-kielessä keskittyä dokumentin rakenteistamiseen.
Avausluennolla käytiin läpi kurssin suorittamiseen liittyvät asiat. Harjoituksissa on luvassa porkkanapisteitä: tarkennetut tiedot täydennetään alkuviikon aikana kotisivuille.
Kalvot, luento 1 (PDF)
Huomioita:
- Hyperteksti: Tekstiä, joka on epälineaarista ja jossa on assosiaatioita
- Hypermedia: Assosiatiivinen, epälineaarinen jäsennys alkioista (teksti, kuva, …)
- Hypermedia kontekstissa: tiedon ja palveluiden mallinnus, jäsennys ja esittäminen siten, että käyttäjän ja käyttötilanteen erityispiirteet tulevat huomioiduksi
- Hypermedian tuotannossa sisällön rooli on korostunut: toisin kuin vaikkapa ohjelmistotuotannossa, tuotantotyö liittyy tiiviisti sovellusalueeseen (esim. musiikkikaupan toteutus, auton markkinointi)
- Usein hypermediaa sovelletaan webissä, mutta muitakin esimerkkejä on (esim. lähdekoodit, tietämyskannat, Windowsin help. Huomaa myös, että kaikki web-sisältö ei pakosti ole hypermediaa.
- Mutta kuinkas WWW syntyi? Lue lisää artikkelista “How the Web was Born”