Pahvi pääsi testiin

Kahden viikon kehityssprintti alkaa olla lopuillaan. Kehitystahti on ollut erittäin hyvä.

Eilen pääsimme Pahvin kanssa jo ensimmäiseen tulikokeeseen, kun sitä testasi yksi yläkoulun oppilasryhmä maantiedon ryhmätyössä. Ohjeistusta Pahvin käyttöön ei juurikaan annettu ja oppilaat aloittivat vain käyttämään sovellusta opettajan ohjeistuksen jälkeen. Muutaman yritys-erehdys-ketjun jälkeen käyttö sujui oppilailta leikiten, vaikuttavaa :)

Emme valitettavasti saaneet selainten välistä synkronointia vielä niin vakaaksi, että samaa Pahvia olisi voinut muokata usealta koneelta samanaikaisesti, mutta muuten Pahvi toimi varsin hyvin. Palautekin oli pääosin positiivista ja rakentavaa. Tässä muutamia poimintoja:

• "Idea oli hyvää, se toimi ihan hyvin, mutta olisi parempi jos useampi voisi muokata sitä samaan aikaan."
• "Pahvi näytti kivalta, ja zoomaus oli hauska, mutta se pätki aika paljon ja oli vähän monimutkainen. Olisi ollut kiva jos olisi voinut muuttaa fontin väriä, kokoa ja tyyliä helposti. Oli aika vähän tilaa."
• "pahvi oli helppokäyttöinen, mutta se vaati totuttelua."
• "Se oli aluksi hieman monimutkainen, mutta sitten sitten sitä jo osasi käyttää."
• "ohjelma oli helppokäyttöinen ja moderni. Valokuvien siirtäminen oli kylläkin vaikeaa. Muita vikoja en huomannut. Voisin käyttää myöhemminkin."
• "Pahvissa oli oikein hauska idea, joka oli hyvin toteutettu; pahviin mahtui paljon tekstiä ja myös monia kuvia. Oli myös mukavaa, kun kuvia ja tekstejä sai sommiteltua monipuolisesti käännellen ja väännellen. Teksti myös pysyy nettiosoitteessa eikä tarvinnut erikseen tallennella. Käytössäkään ei ilmennyt ongelmia."

Oppilaat saivat antaa Pahville myös arvosanan 1-5 -tähteä, keskiarvoksi tuli 3,6! Ei paha vajaan kahden viikon ikäiseltä prototyypiltä :)

Palautteessa kysyttiin myös, mitä muita ominaisuuksia Pahviin haluttaisiin. Eniten esiin tuli värivalintojen lisääminen, fontin koon muuttaminen ja kuvien lisäämisen helpottaminen. Näihin asioihin tullaankin varmasti kiinnittämään huomiota jatkokehityksessä.

Tästä on siis varmasti hyvä jatkaa kehitystä. Uusimmassa versiossa synkronointikin alkaa olemaan jo kohdillaan ja usealta koneelta samanaikainen muokkaaminen pitäisi onnistua. Bugejakin vielä varmasti löytyy, parhaiten Pahvi toimii uusimilla Webkit- ja Firefox-selaimilla. Tableteilla Pahvia ei voi vielä käyttää, paitsi esitysmoodissa.

Muistin virkistykseksi vielä Pahvin demosivuston osoite: http://pahvidemo.opinsys.fi. Myös omia "huoneita" tai "pahveja" on nyt mahdollista luoda lisäämällä vain osoitteen perään haluamansa nimi ilman erikoismerkkejä tai ääkkösiä eli esim.  http://pahvidemo.opinsys.fi/minun_pahvi.

Mihin suuntaan kehitystä pitäisi sinun mielestäsi viedä? Entä millaisia käyttötarkoituksia näkisit Pahvin kaltaiselle sovellukselle? Kaikki palaute on erittäin tervetullutta.

Tänään suuntaan vielä Educa-messuille, joita odotan ihan mielenkiinnolla. Sitten alkaakin opinnäytetyön kaksi viimeistä viikkoa, joiden aikana työ pitäisi hioa lopulliseen muotoonsa. Vähiin käy, ennen kuin loppuu :)

Mukavaa viikonloppua kaikille!

Sovelluskehitystä: Pahvidemo online

Viikko sovelluskehitystä on takana ja Pahvi on edistynyt varsin nopeasti.

Tällä hetkellä Pahvissa toimii (tavalla tai toisella) tekstilaatikoiden ja tyhjien taustalaatikoiden lisäys, niiden koon muutos, raahaaminen, poistaminen, syvyystason määrittäminen, tekstin muokkaus sekä laatikoiden taustavärin ja tekstin värin muuttaminen. Lisäksi esitysmoodi on toiminnassa.

Pahvia on testattu Chrome-, Firefox-, Safari- ja Opera-selaimien uusimilla tai uudehkoilla versioilla, ja niillä kaikilla sovellus toimii varsin hyvin. Eniten ongelmia edellä luetelluista selaimista tuottaa Opera. Internet Explorerilla Pahvia ei ole vielä testattu, joten IE-yhteensopivuudesta ei ole toistaiseksi tietoa. Oletan, että IE9 saattaa toimia ainakin osittain. Esitystilassa käytössä oleva plugin zoomooz tukee myös IE9-selainta.

Kaikki kommentit ja palaute Pahvista on erittäin tervetullutta, joko tänne blogiin tai sähköpostitse janne.saarela(AT)opinsys.fi. Ja muistattehan, että sovellusta on kehitetty vasta viikon ajan, joten se on vielä varsin "alpha-asteella" :)

Pahvia pääsee kokeilemaan käytännössä täällä:
http://pahvidemo.opinsys.fi/

Sovelluskehitystä: Pahvi kehittyy

Kolme päivää vauhdikasta sovelluskehitystä on nyt takana. Pahviin on tullut tässä ajassa jo varsin mukavasti toiminnallisuutta.
Tekstilaatikon:

• muokkaus
• poisto
• koon muuttaminen
• syvyystason (z-index) säätö
• siirtäminen pahvilla eri paikkaan

sekä layers-valikko, jossa voi tällä hetkellä vaihtaa elementtien syvyystasoa, ovat tällä hetkellä jo Pahvissa.

Muutimme hieman mediavalikon perusajatusta, ja nyt siinä on vain lisää(+)- ja layers-näkymät. Ajatuksena on, että lisää-näkymästä raahataan muokkausalueelle eri mediaelementtejä ja kaikki lisätyt mediaelementit näkyvät sitten layers-näkymässä.


Layers-valikkoon tulee myöhemmin enemmänkin valittuun objektiin liittyviä toimintoja.
Alla olevassa kuvassa on havainnolistettuna ajatus siitä (Layer properties-kohta).

Pahvin muokkaustilan perusnäkymä tällä hetkellä

Mediavalikon voi piilottaa näkyvistä muokkaustilassa.

Esitysnäkymässä mediavalikko häviää näkyvistä ja
elementit muuttuvat "zoomautuviksi"
(http://janne.aukia.com/zoomooz/).

Jos haluat kokeilla Pahvia, ja Git on tuttu, niin suuntaa Pahvin GitHub-sivulle ja forkkaa :)
Pahvin virallinen demosivu tullee jo tämän viikon loppuun menessä, mutta viimeistään ensi viikon alussa.

Sovelluskehitystä: Pahvi pystyyn

Viikoilla 3-4 on vuorossa opinnäytetyön sovelluskehitysvaihe. Kuten aiemmin olen maininnut, kehityksen kohteeksi päätyi "Pahvi" - yhteistoiminnallinen mediaesitysten koontisovellus.

Pyrin blogaamaan lyhyesti joka päivän tuloksista tai aina kun mainitsemisen arvoista kehitystä on tapahtunut. Demosivusto on tarkoitus myös aukaista mahdollisimman pian, eli heti kun sovellus on siinä vaiheessa, että sitä on edes jossain määrin järkevää käyttää.

Pahvin kehitys aloitettiin siis eilen varsin mukavalla tohinalla. Kahden viikon sprintin tavoitteena on saada aikaan toimintakelpoinen prototyyppi, jolla voi koota tekstiä ja kuvia sekä julkaista niitä zoomooz.js-kirjaston mahdollistamalla tavalla. Kaikki muu sen päälle on tietysti plussaa.

Luultavasti tärkeimpänä lisänä minimivaatimusten lisäksi voisi pitää sovelluksen reaaliaikaisuutta. Toisin sanoen sitä, että samaa "Pahvia" eri laitteilla muokkaamassa olevat henkilöt näkevät toistensa tekemät muutokset samanaikaisesti. Muita Pahviin pohdittuja ominaisuuksia voi tarkastella GitHubissa, lisäksi siellä voi seurata sovelluksen teknistä kehitystä tai miksipä ei myös osallistua siihen :)

Itse kehitän lähinnä Pahvin ulkoasua ja käytettävyyttä. Esa-Matti ja Jouni taas keskittyvät enemmän taustatekniikkaan ja sen koodaukseen.

Eilisen ja tämän päivän jälkeen sovelluksen ulkoasun pohja on jo ihan hyvällä mallilla. Lisäksi tekstin muokkaaminen, tekstilaatikoiden raahaminen ja poistaminen muokkausalueella sekä niiden syvyystason säätö toimivat. Pahvissa on toiminnassa myös esityksen muokkaus- ja esitystilat.

Tällä hetkellä Pahvi näyttää tältä:

Perusnäkymä, hiiri toisen tekstilaatikon päällä

Esitysmoodi päällä, tekstilaatikon zoomaus aktiivinen

Herättääkö tämän hetkinen ulkoasu ajatuksia tai tuleeko mieleen jotain muuta kommentoitavaa?

Opinnäytetyön versiokatsaus

En ole julkaissut uutta versiota opinnäytetyöstä vielä tämän vuoden puolella. Nyt sain sen kuitenkin vihdoin ja viimein aikaiseksi ja se löytyy täältä: https://etherpad.opinsys.fi/p/opinnaytetyo-vko2.

Tämän vuoden aikana olen kirjoittanut lähinnä sovelluskehitykseen liittyviä osuuksia. Seuraavat kaksi viikkoa (viiko 3-4) onkin tarkoitus käyttää varsinaiseen sovelluskehitykseen. Toteutettavaksi prototyypiksi valikoitui aiemmin esittelemäni ajatus Pahvi-nimisestä web-sovelluksesta.

Sovelluskehityksen aikana tulen luultavasti blogaamaan lyhyitä tilannepäivityksiä lähes päivittäin. Kerron myös, missä soveluksen prototyyppiä pääsee testaamaan, heti kun saamme kehityksen siihen pisteeseen. Projektista löytyy myös GitHub-repo, jossa voi seurata sovelluskehitystä.

Opinnäytetyön palautuspäivähän on 10.2., joten vielä on muutama viikko aikaa vaikuttaa lopulliseen työhön :) Otan kaikki ideat, ajatukset ja kommentit ilomielin vastaan.

Sovellusideointia osa 2

Nyt on vuorossa toinen sovelluskehitys-aiheinen teksti. Tällä kertaa esittelen hieman laajemman ajatuksen mahdollisesti kehitettävästä web-sovelluksesta.

Alunperin sain ajatuksen tästä törmättyäni Storify-nimiseen palveluun. Storifyssä perusajatus on luoda helposti ja nopeasti "tarinoita" haluamistaan tietolähteistä, joita on integroituna palveluun (mm. Twitter, YouTube ja Google-haku). Storify on mielestäni varsin helppokäyttöinen, "just search and drag & drop", ja samaan ajatukseen liittyy myös Pahvi.

Nimi, "Pahvi", tulee kouluilla ryhmätöissä käytetyistä pahveista, joihin kasataan esityksiä esim. maantiedon tunnilla eri valtioista.

Pahvin ideana on koostaa mediatiedostoja helposti HTML-pohjaisiksi esityksiksi. Kyseessä on siis web-selaimessa toimiva sovellus. Samaa Pahvia voi työstää samaan aikaan usea henkilö eri tietokoneilta (muutokset näkyvät reaaliaikaisesti kaikille), joten sitä voi käyttää myös yhteistoiminnallisesti esim. ryhmätyön tekemiseen. Lopputuotoksena olisi esimerkiksi impress.js-tyylinen esitys (eli samantyyppinen idea kuin Prezissä).

Mielessä on ollut muitakin käyttötapauksia, mutta jätän ne tässä vaiheessa vielä mainitsematta, koska täytyy huomioda, että opinnäytetyön puitteissa sovelluskehitykseen on tarkoitus käyttää aikaa pari viikkoa kolmen henkilön voimin, joten suuria asioita ei ehditä tekemään. Tarkoitus on kuitenkin saada aikaan toimiva prototyyppi.

(Toki opinnäytetyön tarkoituksena on myös ideoida "kaikkea mahdollista" kehitettävää, jota saatetaan toteuttaa myöhemmin. Kirjoitan ehkä myöhemmin laajemman tekstin "kaikista" mieleen tulleista ideoista.)

Pahvin avulla on tarkoitus integroida (sovelluksen alkuvaiheessa) jo aiemmin mainittu yhteistoiminnallinen piirtoalusta Walma, ja opinnäytetyössäkin käyttämäni tekstinmuokkaussovellus etherpad lite. Eli piirrosten ja tekstin lisääminen. Myöhemmin Pahviin on tietysti mahdollista lisätä paljon muitakin ominaisuuksia, esimerkiksi ryhmä-chat sekä kuvien, linkkien, videon ja audion lisääminen esitykseen on ollut mielessä.

Pahvin käyttöliittymä

Sovelluksen perusnäkymä ja
muokkausalueen raahaaminen Pahville

Vasemmalla olevassa kuvassa (klikkaa suuremmaksi) on Pahvin käyttöliittymän ensimmäinen hahmotelma. Hyödynsin siinä varsin suoraan ajatuksia Storifyn käyttöliittymästä, koska pidän sitä toimivana. Mitä mieltä muut ovat?

Ideana on, että Pahville – joka on koko esitelmän pohja – raahataan muokkausalueita, joiden kokoa voi muuttaa mielensä mukaan. Muokkausalueen sisään voi lisätä "drag&drop"-periaatteella piirroksia (Walma) ja tekstiä (etherpad lite) haluamiinsa kohtiin.

Piirroksen raahaaminen
muokkausalueelle

Tässä kuvassa muokkausalueelle raahataan piirros, joka löytyy Walmasta ja piirroksen kokoa muutetaan.

Muokkausalueelle voi raahata myös uuden piirroksen, jonka jälkeen sitä pääsee tekemään Walmaan. Piirroksia voi aina muokata myös jälkikäteen piirtoalustassa ja uusi versio päivittyy automaattisesti Pahviin.

Tekstilaatikon raahaaminen
muokkausalueelle ja tekstin lisääminen

Tässä kuvassa muokkausalueelle raahataan tekstilaatikko ja siihen kirjoitetaan tekstiä. (Huomaa että mediavalikon valinta on muuttunut tekstityökaluksi)

Tekstin fonttikoko on aina niin suuri, kuin mahdollista tekstilaatikon koon ja tekstin määrän puitteissa.

Tekstilaatikon siirtäminen
muokkausalueella

Kun tekstilaatikon (tai piirroksen) päälle vie hiiren, sitä voi raahata eri paikkaan muokkausalueen sisällä. Samalla tekstilaatikon ylälaitaan ilmestyy muokkaa- ja poista-painikkeet.

Teksti ja piirros voivat olla myös päällekkäin. Tekstillä voi näin ollen korostaa myös piirroksessa esiintyviä kohtia. (Käyttö esim. biologian kurssilla)

Pahvin julkaiseminen

Pahvin julkaiseminen tapahtuisi yksinkertaisesti. Mediavalikosta valitaan julkaisu-välilehti ja muokkausalueita klikkaamalla määritetään "sivujen" julkaisujärjestys. Esikatselussa näkee sivujen järjestyksen ja sitä voi muuttaa raahaamalla sivuja eri järjestykseen.

Lopuksi klikataan "Julkaise esitys"-nappia ja Pahvista muodostuu HTML-sivu, jota voi käyttää Pahvin esittämiseen.




Mitä ajatuksia Pahvi herättää? Mitä ominaisuuksia tälläisessa sovelluksessa olisi hyvä olla? Onko tällaiselle sovellukselle tarvetta opetuksessa?

Kaikki palaute on jälleen erittäin tervetullutta :)