! Tietokoneavusteinen opetus, 2017 Harjoitus 4: HTML5 piirtoalusta (24.3.2017)!! Tietokoneavusteinen opetus -kurssilla opetetaan Adobe Flash CS6:n käyttämistä ja HTML5-tekniikoita neljänä kertana: 10.3., 14.3., 17.3. ja 24.3. Harjoituskerroilla tutustutaan työvälineiden käyttöön harjoitusten avulla.! - Jokaisena harjoituspäivänä järjestetään kaksi harjoitusryhmää, joissa käsitellään sama sisältö.! - Harjoitukset järjestetään klo 10:15-12:00 ja 12:15-14:00 mikroluokassa B1084.! - Harjoitusryhmiin saa saapua vapaasti ei ennakkoilmoittautumista.! - Harjoituskerran tehtävät julkaistaan etukäteen osoitteessa http://people.uta.fi/~joel.luukka/tao/! - Tehtävät käydään läpi yhteisesti harjoituksissa ratkaisuja ei tarvitse tehdä ennen harjoituksia. HTML5-teknologiat ja apukirjastot! HTML5 viittaa sekä HTML-kielen versioon että joukkoon web-teknologian ratkaisuja, joita käytetään dynaamisten verkkosivujen ja -ohjelmien toteuttamiseen. Kurssin harjoitustyön kannalta olennaisia tekniikoita ovat multimediatekniikat, joiden avulla voidaan tuottaa samanlaisia vuorovaikutteisia multimediaesityksiä kuin Flash:lla. HTML5-tekniikoilla toteutetut ohjelmat ovat käytännössä verkkosivun sisältöä ja ohjelmat suoritetaan siten selaimella.! HTML5-multimediaesitykset nojaavat JavaScript-ohjelmointikieleen, jolla voidaan manipuloida piirtoalustaa ja ääniolioita ja käsitellä käyttäjän syötteitä. JavaScript ja Flash:n käyttämällä ActionScript pohjautuvat samaan standardiin, joten JavaScript-koodi on joitain nyanssieroja ja apukirjastoja lukuun ottamatta samanlaista kuin ActionScript-koodi.! JavaScriptista puuttuu laaja apukirjastojen kokoelma, joka on käytettävissä ActionScriptissa. Tästä syystä on hyvä etsiä apukirjastoja, jotka helpottavat ohjelmointityötä. Näissä harjoituksissa käytetään CreateJS-kirjastoa (http://www.createjs.com/), joka sisältää multimediaesityksien luomista helpottavia luokkia. CreateJS:n ideologia pohjautuu Flash:n inspiroimaan elokuvametaforaan, joten CreateJS:n käytön pitäisi olla jokseenkin tuttua Flash-harjoituksista.! HTML5-kehitystyö! HTML5-kehitysympäristövalikoima on toistaiseksi erittäin rajallinen. Adobe Animate -ohjelmalla voidaan toteuttaa HTML5-esityksiä, mutta tämän lisäksi ei ole saatavilla yhtä monipuolista HTML5-kehitysympäristöä. HTML5-ohjelmoinnissa korostuukin suunnittelutyön merkitys; kehitysprosessin keskeisin osa kynä ja paperi.! i. HTML5-piirtoalustan koordinaattijärjestelmä noudattaa samoja periaatteita kuin moni muukin ohjelmallisesti manipuloitava piirtojärjestelmä: piirtoalustan vasen ylänurkka vastaa koordinaatteja (0, 0) ja koordinaattiarvot kasvavat kulkiessa kohti oikeaa alanurkkaa. Koordinaatit ilmaistaan pikseleissä. Näyttämön sisällön suunnittelussa kannattaa käyttää ruutupaperia, jonka avulla voidaan laskea näyttämöllä olevien instanssien koordinaatit ja ulottuvuudet, kun koko piirtoalustan ulottuvuudet ovat tiedossa.! ii. Näyttämön täyttäminen näyttämöllä olevien instanssien luonti, niiden ominaisuuksien määrittely ja lisääminen näyttämölle täytyy tehdä kokonaan JavaScript-koodin avulla. Tästä johtuen kohtauksien skriptimäärä on suurempi kuin Flash-ohjelmoinnissa. Skripti jakautuu myös selkeästi kahteen osaan: näyttämön täyttämiseen ja kohtauksen toiminnallisuuden määrittelyyn. Kohtauksien toiminnallisuuksien määrittely käsittää tapahtumakuuntelijoiden lisäämistä ja tapahtumankäsittelyfunktioiden määrittelyä. HTML5-ohjelmoinnissa kohtauksien " 1 / " 8
skriptit kannattaa jakaa esimerkiksi koodia selkeästi kommentoimalla tämän jaottelun mukaan, jolloin näyttämön täyttämiseen liittyvät ongelmat ja kohtauksen toimintoihin liittyvät ongelmat on helpompi erotella toisistaan, löytää ja korjata.! iii. Muita aputyökaluja kannattaa hyödyntää jos mahdollista, sillä puhtaasti koodia kirjoitettaessa voi visuaalisen multimediaesityksen kehittäminen olla haastavaa. Esimerkiksi väriarvojen valitsimista ja fonttien esikatseluohjelmista voi olla hyötyä ohjelman toteuttamisessa.! Tekstin syöttö & käsittely! Toteutetaan 1. harjoitusten navigointi- ja tekstinsyöttötehtävä HTML5-tekniikoilla. Ohjelma pyytää käyttäjän nimen ja tervehtii tätä nimeltä, jos nimi on annettu. Alla on hahmoteltu ohjelman ruudut:!! Ruutu 1:! Navigoi!! " 2 / " 8
Ruutu 2:! Tietokoneavusteinen opetus, 2017 Takaisin Syötä nimesi: maailma Tarkista! Terve, maailma!! 1. Tee ohjelmalle oma kansio "harjoitus4" ja lisää kansion sisälle kansio "js". Ohjelman.htmltiedosto tullan tallentamaan "harjoitus4"-kansioon ja ohjelman skriptit "js"-kansioon.! harjoitus4 +-- harjoitus4.html +-- js +-- main.js +-- h4_scene1.js +-- h4_scene2.js Tiedosto: harjoitus4.html! 2. Kirjoita yksinkertainen HTML-tiedosto, joka sisältää piirtoalustan (canvas), lataa tarvittavat JavaScript-tiedostot ja kutsuu ohjelman käynnistävää funktiota. Anna tiedostolle nimeksi "harjoitus4.html" ja tallenna se "harjoitus4"-kansioon.! " 3 / " 8
1 <html> 2 <head> 3 <meta charset="utf-8"></meta> 4 <script src="https://code.createjs.com/createjs-2015.11.26.min.js"> 5 </script> 6 <script src="http://people.uta.fi/~joel.luukka/tao/js/textinput.js"> 7 </script> 8 9 <script src="./js/main.js"></script> 10 <script src="./js/h4_scene1.js"></script> 11 <script src="./js/h4_scene2.js"></script> 12 </head> 13 <body> 14 <canvas id="stage" height="450" width="600"></canvas> 15 <script> 16 var canvas = document.getelementbyid('stage'); 17 kaynnistaohjelma(canvas); 18 </script> 19 </body> 20 </html> + HTML-tiedostossa määritelty canvas-elementti toimii ohjelman näyttämönä. Ohjelman sisältämät oliot tullaan piirtämään tähän elementtiin.! Tiedosto: js/main.js! 3. Kirjoita main.js-niminen JavaScript-tiedosto. Tallenna tiedosto js-kansioon. Tiedosto sisältää kaynnistaohjelma-funktion, joka alustaa ohjelman ja piirtää 1. kohtauksen näyttämölle:! 1 // Käynnistetään ohjelma 2 var kaynnistaohjelma = function(canvas){ 3 4 // Luodaan näyttämöolio 5 window.stage = new createjs.stage(canvas); 6 7 // Asetetaan piirtotaajuus 8 createjs.ticker.setfps(24); 9 createjs.ticker.addeventlistener("tick", stage); 10 11 // Ladataan kohtaus "scene1" 12 window.scenes['scene1'](window.stage); 13 14 }; Tiedosto: js/h4_scene1.js! 4. Kirjoita h4_scene1.js-niminen JavaScript-tiedosto. Tallenna tiedosto js-kansioon. Tee tiedostosta toistaiseksi seuraavanlainen tynkä, jota tullaan vielä täydentämään:! " 4 / " 8
1 // Luodaan scenes-olio, jos sitä ei vielä ole 2 window.scenes = window.scenes []; 3 4 /*** Apufunktio painikkeiden luomiseen ***/ 5 6 // Määritellään 1. kohtaus 7 window.scenes['scene1'] = function(stage){ 8 9 /*** 1. Tyhjennetään näyttämö ***/ 10 11 /*** 2. Luodaan navigointipainike ***/ 12 13 /*** 3. Liitetään painikkeeseen tapahtumakäsittelijä ***/ 14 15 }; + Kuten aiemmin mainittiin, kohtausten määrittely jakautuu näyttämön täyttämiseen ja toiminnallisuuden määrittelyyn. Yllä olevassa skriptissä kohdat 1. ja 2. liittyvät näyttämön täyttämiseen, joka Flashissa voitiin toteuttaa näyttämön editorilla. Kolmannessa kohdassa määritellään ja liitetään lähinnä tapahtumakäsittelijöitä, johon Flashissa käytettiin Actions-ikkunan skriptieditoria.! 5. Lisää h4_scene1.js-tiedoston kohdan 1. alle skripti, joka tyhjentää näyttämön ja poistaa siitä kaikki tapahtumakuuntelijat:! 1 /*** 1. Tyhjennetään näyttämö ***/ 2 stage.removeallchildren(); 3 stage.removealleventlisteners(); 6. Lisää h4_scene1.js-tiedostoon apufunktio, joka luo painikkeelle nelikulmaisen taustan ja tekstin, kokoaa ne yhteen Container-olion avulla ja antaa Container-olion paluuarvona. Apufunktiota voidaan käyttää ohjelman kaikkien painikkeiden luomiseen:! 1 /*** Apufunktio painikkeiden luomiseen ***/ 2 var luopainike = function(x,y,teksti){ 3 4 // Luodaan 'säiliö', jolla kootaan yhteen 5 // painikkeen ruutu ja teksti 6 var painike = new createjs.container(); 7 painike.x = x; 8 painike.y = y; 9 10 // Määritellään painikkeen ulkonäkö (nelikulmioalusta + teksti) 11 var nelikulmio = new createjs.shape(); 12 nelikulmio.graphics.beginfill('#00ff00').drawrect(0,0,60,40); 13 14 var teksti = new createjs.text( 15 teksti, 16 '12px Arial', 17 '#000000' 18 ); 19 teksti.x = 10; 20 teksti.y = 10; 21 22 // Kootaan painike 23 painike.addchild(nelikulmio); 24 painike.addchild(teksti); 25 26 return painike; 27 }; " 5 / " 8
7. Lisää h4_scene1.js-tiedoston kohdan 2. alle skripti, joka luo apufunktion avulla navigointipainikkeen ja lisää sen näyttämölle:! 1 /*** 2. Luodaan navigointipainike ***/ 2 var navipainike = luopainike(30,30,'navigoi!'); 3 stage.addchild(navipainike); 8. Lisää h4_scene1.js-tiedoston kohdan 3. alle skripti, joka liittää klikkaus-tapahtuman tapahtumakäsittelijän navigointipainikkeeseen.! 1 /*** 3. Liitetään painikkeeseen tapahtumakäsittelijä ***/ 2 var kohtaukseen2 = function(event){ 3 window.scenes['scene2'](stage); 4 }; 5 navipainike.addeventlistener('click',kohtaukseen2); Tiedosto: js/h4_scene2.js! 9. Kirjoita h4_scene2.js-niminen JavaScript-tiedosto. Tallenna tiedosto js-kansioon. Tee tiedostosta toistaiseksi seuraavanlainen tynkä, jota tullaan vielä täydentämään:! 1 // Luodaan scenes-olio, jos sitä ei vielä ole 2 window.scenes = window.scenes []; 5 6 // Määritellään 2. kohtaus 7 window.scenes['scene2'] = function(stage){ 8 9 /*** 1. Tyhjennetään näyttämö ***/ 10 11 /*** 2.1. Luodaan ohje-, palaute- ja syötetekstikentät ***/ 12 13 /*** 2.2. Luodaan navigointi- ja tarkistuspainike ***/ 12 13 /*** 3. Liitetään painikkeisiin tapahtumakäsittelijät ***/ 14 15 }; 10. Lisää h4_scene2.js-tiedoston kohdan 1. alle skripti, joka tyhjentää näyttämön ja poistaa siitä kaikki tapahtumakuuntelijat. Kohdan 1. alle voidaan siis lisätä sama skripti joka lisättiin h4_scene1.js-tiedostoon vastaavaa tarkoitusta varten.! 11. Lisää h4_scene2.js-tiedoston kohdan 2.1. alle skripti, joka lisää näyttämölle tekstikentät ohje-, syöte- ja palautetekstille:! " 6 / " 8
1 /*** 2.1. Luodaan ohje-, palaute- ja syötetekstikentät ***/ 2 3 // Luodaan ohjetekstikenttä 4 var ohjeteksti = new createjs.text( 5 'Syötä nimesi:', 6 '20px Arial', 7 '#000000' 8 ); 9 ohjeteksti.x = 180; 10 ohjeteksti.y = 90; 11 stage.addchild(ohjeteksti); 12 13 // Luodaan syötetekstikenttä 14 var tekstikentta = new TextInput(); 15 tekstikentta.x = 180; 16 tekstikentta.y = 120; 17 stage.addchild(tekstikentta); 18 19 // Luodaan palautetekstikenttä 20 var palauteteksti = new createjs.text( 21 '', 22 '20px Arial', 23 '#000000' 24 ); 25 palauteteksti.x = 180; 26 palauteteksti.y = 270; 27 stage.addchild(palauteteksti); 12. Lisää h4_scene2.js-tiedoston kohdan 2.2. alle skripti, joka luo aiemmin määritellyn apufunktion avulla navigointi- ja tarkistuspainikkeet ja lisää ne näyttämölle:! 1 /*** 2.2. Luodaan navigointi- ja tarkistuspainike ***/ 2 var tarkistuspainike = luopainike(180,180,'tarkista!'); 3 stage.addchild(tarkistuspainike); 4 5 var navipainike = luopainike(30,30,'takaisin'); 6 stage.addchild(navipainike); 13. Lisää h4_scene2.js-tiedoston kohdan 3. alle skripti, joka liittää painikkeisiin tapahtumankäsittelijät. Navigointipainike alustaa kohtauksen 1 uudelleen ja tarkistuspainike tervehtii käyttäjää, jos nimi on annettu:! 1 /*** 3. Liitetään painikkeisiin tapahtumakäsittelijät ***/ 2 3 // Liitetään navigointipainikkeeseen tapahtumakäsittelijä 4 var kohtaukseen1 = function(event){ 5 window.scenes['scene1'](stage); 6 }; 7 navipainike.addeventlistener('click',kohtaukseen1); 8 9 // Liitetään tarkistuspainikkeeseen tapahtumakäsittelijä 10 var tarkista = function(event){ 11 if(tekstikentta.text!= ''){ 12 palauteteksti.text = 'Terve, ' + 13 tekstikentta.text + '!'; 13 } 14 else{ 15 palauteteksti.text = 'Nimikenttä on tyhjä!'; 16 } 17 }; 18 tarkistuspainike.addeventlistener('click',tarkista); " 7 / " 8
14. Testaa ohjelman toimintaa avaamalla "harjoitus4.html"-tiedosto selaimessa.! + Jos ohjelma ei toimi odotetulla tavalla, voidaan JavaScript-virheilmoituksia tutkia selaimen vuorovaikutteisella konsolilla.! Firefox: Opening the Web Console (https://developer.mozilla.org/en-us/docs/ Tools/Web_Console/Opening_the_Web_Console)! Chrome: Opening the Console (https://developers.google.com/web/tools/ chrome-devtools/console/#opening_the_console)! Internet Explorer: F12 Tools Console (https://msdn.microsoft.com/en-us/library/ gg589530.aspx)! + Näyttämön ja verkkosivun muun sisällön ulkoasua voidaan muokata CSS-tyyleillä. Näyttämö voidaan erottaa paremmin muusta sivusta asettamalla koko verkkosivun taustaväri harmaaksi ja canvas-elementin taustaväri valkoiseksi background-color - tyylisäännön avulla. " 8 / " 8