Digitaalisen median tekniikat (kevät 2009) / harjoitustyö
Kuvaus
Harjoitustyön tarkoituksena on korvata osittain kokeen puhtaasti teknisiä kysymyksiä, ja sen tekemisen on tarkoitus olla kivaa.
Aiheen voi valita valmiista aiheista tai ehdottaa omaa (samankaltaista) aihetta. Myös valmiita aiheita saa rikkoa ja yhdistellä toisiinsa, kunhan laajuus säilyy suunnilleen samana. Riippumatta omasta tai valmiista aiheesta, täytyy jokaisen keskustella harjoitusryhmänsä ohjaajan kanssa aiheestaan. Hyväksyminen hoidetaan mieluiten harjoitustilaisuudessa.
Mitä tahansa teetkin, pitää sen olla uudelleenkäytettävä! (Paitsi jos teet pelin.) Eli esimerkiksi: kuvagalleria omista (valmiista) kuvista ei käy, mutta kuvagaltsu omia vielä ottamattomia kuvia varten käy. CSS-kuvakartan "testailu ja selvitys" ei käy, mutta CSS-kuvakartta paketoituna siistiin helposti uudelleenkäytettävään pakettiin käy. Tarkoituksena on siis erottaa sovellus ja sen käyttämä "syöte" toisistaan
Harjoitustyössä saa käyttää kirjastoja, mutta ei valmista koodia. Kirjastojen käyttö pitää dokumentoida!
Valmis taustajärjestelmä
Harjoitustyössä saa käyttää valmista yksinkertaista taustajärjestelmää. Taustajärjestelmä tarjoaa mahdollisuuden tallentaa ja hakea tallennuksia "avaimen ja arvon" mukaan. Valmiin taustajärjestelmän käyttö johtaa lähes poikkeuksetta siihen, että työn muista osa-alueista tulee tehdä suuremmat.
Järjestelmän alustava (mutta kyllin kattava) kuvaus taustajärjestelmäsivulla.
Aihe
Tarkoituksena on varmistaa, että kaikki harjoitustyöt ovat keskenään vertailtavia.
Aiheen valinta
- Valmis aihe ja tekniset toteutusvaatimukset (lista alempana)
- (Oma) valmis aihe → harjoitusryhmän vetäjä kertoo tekniset vaatimukset.
- (Liian) pienistä teknisistä vaatimuksista seuraa toinen pieni aihe
- Valmiin taustajärjestelmän käyttö aiheuttaa myös lisävaatimuksia, jotka harjoitusryhmän vetäjä määrittelee.
- (Omat) tekniikat määritelty, mutta aihe puuttuu → valitse valmiista aiheista sopiva tai kysy apua harjoitusryhmän vetäjältä
Aihe-ehdotuksia
Aiheet on nyt keinotekoisesti jaettu helppoihin, keski- ja vaikeisiin. Tämän ei varsinaisesti ole tarkoitus vaikuttaa kenenkään aiheen valintaan, vaan vain vähän luokitella eri aiheita yhden mittarin mukaan. Jako koskee samanaikaisesti (muttei välttämättä samaan suuntaan) niin aiheessa opeteltavien asioiden vaikeutta kuin aiheen vaatimaa työmäärää.
Aihe-ehdotuksissa mainitut tekniikat ovat ehdotuksia, niitä ei tarvitse noudattaa! Valitse juuri ne tekniikat, joita itse haluat käyttää. Huomaa, että voit aivan hyvin saada täydet pisteet käyttämättä PHP:tä.
"Ylimääräisen" materiaalin (kuvat yms.) luomisessa voi olla hyötyä online-2.0-generaattoreista. Näitä ei ole testattu, joukossa voi olla hyviäkin!
- Aihe
- aiheen, ehdotetut, ydintekniikat
- Lyhyt kuvaus tai esimerkki aiheen sisällöstä/toteutuksesta.
- Kuvagalleria
- php, html, javascript, ajax
- Palvelin-extrana metatiedot, kommentointi, yms?
- Chat
- php, html, javascript, ajax
- Miten välität viestit palvelimen kautta kaikille?
- Vieraskirja
- php, html, javascript
- Spammauksen esto?
- Lomakegeneraattori
- json-syöte, javascript-validointi
- Vähän kuin tosi tosi pieni E-lomake.
- Lomakevalidaattori
- javascript
- Ihan oma palikka TAI lisäpalikka lomakegeneraattoriin!
- Graafigeneraattori
- svg/css, json-syöte
- Histogrammeja/käyriä/piirakoita annetusta datasta.
- Videogalleria
- flash, html
- YouTube-embed videoseinä tai ehkäpä ihan oma Flash-playeri?
- Sisällönhallintajärjestelmä
- javascript, html, rss-feedi muokkauksista
- Tosi tosi pieni!
- Vaikkapa: tekstikappaletta klikkaamalla se vaihtuu tekstilaatikoksi, jossa kappaleen tekstin voi muokata ja tallentaa.
- RSS-lukija+yhdistäjä
- rss, javascript
- Oma pieni Google Reader!
- Tyylitiedostojen livemuokkain
- css, javascript
- Vähän kuin Firebug, mutta helpompi ja paaaljon pienempi.
- Sivuston "parannuskirjasto"
- javascript
- Dynaamiset ikonit linkkeihin linkin tyypin mukaan (ulkoinen vs. sisäinen vs. kuva vs. yms), sisällysluettelon generointi, ymsyms.
- CSS-kuvakartta
- css, javascript-generointi?
- Siisti paketointi, helppo uudelleenkäyttö.
- http://frankmanno.com/ideas/css-imagemap/
- Piirustusohjelma
- javascript, canvas, svg
- Kannattaako tehdä Canvaksella vai SVG:llä?
- http://webkit.org/blog/122/webkit-3-10-new-things/
- Pieni peli!
- javascript, canvas, svg
- Valmiin fysiikkamoottorin käyttö?
- Jänniä teknisiä vaatumuksia pelin luonteen mukaisesti!
- http://box2d-js.sourceforge.net/
Rakenne
Harjoitustyön aloitussivuna on XHTML-dokumentti, joka dokumentoi koko työn. Aloitussivu on osa työtä, ja arvostellaan samoin arvosteluperustein kuin muu työ. Aloitussivun ulkoasu on määriteltävä CSS:llä. Näin jokaiseen työhön tulee XHTML+CSS -osuus, mikä on kurssin herkullista ydinkauraa.
Dokumentointi sisältää
- Työn toiminnallinen yleiskuvaus (mikä se on, mitä se tekee).
- Lyhyt kuvaus teknisestä toteutuksesta (ei lähdekoodin dokumentointi).
- Mitä kirjastoja tai valmiita komponentteja käytetty ja mihin.
- Selainvaatimukset: jos ei toimi jollain selaimella, niin ei ole pakko toimia, kunhan on selvitetty miksei toimi.
- Mahdollisuus tutustua lähdekoodeihin: linkit PHP-, JavaScript- ym. tiedostoihin).
- Työhön käytetyt lähteet, jos mainitsemisen arvoisia tai oleellisia harjoitustyön arvostelun kannalta.
- Lupa käyttää työtä oppimateriaalina (luvan puuttuminen ei vaikuta arvosteluun).
Arvosteluun vaikuttaa (tärkeysjärjestyksessä)
- Rakenteen, ulkoasun ja toiminnallisuuden erottaminen toisistaan.
- Uudelleenkäytettävyys.
- Standardien noudattaminen (lähdekoodin validointi).
- Lähdekoodin luettavuus, sisentäminen ja kommentointi silloin kun tarpeen.
- Käytettävyys.
- Jos sovellus koostuu useammista näkymistä/sivuista, näiden sivujen looginen jako.
- Tarkistetaanko syötteitä, onko sovellus mahdollista kaataa/saada jumiin yksinkertaisesti (alle minuutissa).
- Onko eri tekniikoita käytetty kattavasti...
- ...ja onko tiettyjen tekniikan käyttö perusteltua.
- Selainriippumattomuus: sovelluksen tulee toimia pääsääntöisesti kaikissa yleisissä selaimissa.
- Esteettömyys, mikäli sovelluksen on tarkoitus tarjota esteetön pääsy sisältöön.
Palautus
TODO: palautusta tarkennetaan vielä!
Palautus tehdään laitoksen Moodleen. Moodlessa on tehtäväpalautin sekä välipalautukselle että lopulliselle. Palautus tapahtuu kopioimalla työn www-osoite tehtäväpalauttimeen. Suosittelemme tekemään erillisen kopion (eri osoitteeseen) välipalautuksesta, jotta työtä voi heti palautuksen jälkeen jatkaa ilman, että rikkoo toimivan väliversion odottaessaan ohjaajan arvostelua. (Lisäksi on kivaa jälkeenpäin nähdä, missä vaiheessa työ oli silloin.)
Välipalautus 5.4.
Välipalautus on työn sen hetkinen (ehjä) tila. Välipalautusta ei arvostella, eikä se siis vaikuta lopulliseen arvosteluun. Saat kuitenkin hyviä kommentteja, joita noudattamalla saa varmasti hyvät pisteet.
Pohdiskele vaikkapa seuraavia perspektiivejä:
- Vesiputous: käliproto→HTML→CSS→JavaScript/DOM→Ajax/PHP. Mihin vedät rajan välipalautukselle?
- Tekniikkademo: minimaalinen HTML (+CSS), mutta toimiva JavaScript(+PHP), niin että sovelluksen toimintaa jo voi testata ja demota.
Lopullinen palautus 29.4.
Harjoitustyö on valmis. Validoi dokumenttisi. Lue teksti kerran läpi. Tarkista muissa selaimissa (IE). Nauti vapusta!