Internet-pohjaisen oppimisympäristön laadinta Luento 3
Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 31.01.2013 IPOPPLA 2
Toteutustekniikoista yleisesti Kurssilla suositeltavat toteutustekniikat: JavaScript PHP CGI (Perl, Python, tmv.) Java Hot Potatoes HTML5 JavaScript näistä helpoin, ei tarvita erillistä suoritusympäristöä tai apuohjelmia 31.01.2013 IPOPPLA 3
31.01.2013 IPOPPLA 4 Toteutustekniikoista yleisesti Valmiita koodinpätkiä voi käyttää, mutta työssä ilmoitettava, mitkä osat on lainattu muualta Harjoitustyössä oma panos oleellista, oli se sitten itse tehtyä koodia, tekstisisältöä tai kuvia Ei kannata yrittää tehdä liian monimutkaista. Yksinkertaisetkin ratkaisut voivat olla hienoja, jos ne sulautuvat sujuvasti muuhun toteutukseen
Toteutustekniikoista yleisesti Lähde: Reichert, R. and Hartmann, W. (2004). On the Learning in E-Learning. Proceedings of EDMEDIA 2004. June 23-26, 2004, Lugano, Switzerland, AACE 31.01.2013 IPOPPLA 5
Toteutustekniikoista yleisesti Kurssilla oletetaan, että kaikki osaavat ennalta ainakin HTML: n (esitietovaatimuksena JWT) Javascript Oletettavasti useimman työn toteutustapa Helppo, kohtuullisen suoraviivainen menetelmä Luennoilla käydään läpi perusteita, erilaisia valmiita ratkaisumalleja ja -esimerkkejä harjoitustöiden lähtökohdiksi 31.01.2013 IPOPPLA 6
Toteutustekniikoista yleisesti Mahdoton tehtävä: Ohjelmointikielen opettaminen täysin kahdessa luennossa Pyritään käymään läpi tietyt perusasiat, joista on helppo jatkaa eteenpäin Kurssin koodiesimerkkisivustolta löytyy linkkejä erilaisiin hyödyllisiin lähteisiin Ohjelmointi on siis opeteltava itsenäisesti, netti on tulvillaan oppaita ja esimerkkejä 31.01.2013 IPOPPLA 7
Selainriippumattomuus Yksi hyvän suunnittelun lähtökohdista Yksi harjoitustyön arviointikriteereistä Saavutetaan noudattamalla standardeja Voidaan nähdä kuuluvaksi WWW-sivustoissa osaksi käytettävyyttä Mahdoton tavoite? 31.01.2013 IPOPPLA 8
Selainriippumattomuus Tärkeitä seikkoja: Kuinka nopeasti WWW-tekniikat kehittyvät Selainohjelmat ja -versiot tulevat ja menevät Kehityksen seuraavia askelia on vaikea ennustaa Olennaista eivät ole vuosiluvut Helpointa on tukeutua standardeihin, jotta oppimisympäristön elinikä ei jää hyvin lyhyeksi 31.01.2013 IPOPPLA 9
31.01.2013 IPOPPLA 10 Selainriippumattomuus Validaattorit apuna standardien noudattamisessa, esimerkiksi W3C:n validaattorit: HTML-validointi, http://validator.w3.org/ CSS-validointi, http://jigsaw.w3.org/css-validator/ Lukuisia muita tarjolla Selainten lisäosat Chrome Firefox Opera
W3C - http://www.w3c.org Vastaa WWW:n kehityksestä ja siten esim. HTML- ja CSS-standardeista Perustettu lokakuussa 1994 Koostuu erilaisista työryhmistä Tavoitteena esimerkiksi: Verkko maailmanlaajuiseen käyttöön Semanttinen verkko Luotettava verkko 31.01.2013 IPOPPLA 11
Merkitys harjoitustyön kannalta Tekijöiden itse varmistettava sivustonsa toimivuus Valitkaa jokin tietty suosittu selainohjelma, jolle hiotte työnne Testatkaa, että sivut toimivat myös muilla moderneilla selaimilla (IE, Firefox, Safari, Chrome, Opera) ja raportoikaa mahdolliset ongelmat, joita ette saaneet korjatuksi Valittava käytettävät standardit sen mukaan, millaisilla koneilla ja ohjelmilla ympäristöä tullaan käyttämään Vanhat selaimet tukevat standardeja huonommin kuin uudet, jne. HTML-editorit eivät aina tuota oikeaoppista koodia tarkistettava itse! 31.01.2013 IPOPPLA 12
Hot Potatoes Helppo ratkaisu yksinkertaisiin tarpeisiin 31.01.2013 IPOPPLA 15
Hot Potatoes Ohjelma vuorovaikutteisten osioiden luomiseen WWWsivuille Tarkoitettu opetussivustojen tekoon Oma versionsa useammalle eri käyttöjärjestelmälle (Windows, OS X, Linux, ) Kotisivu: http://hotpot.uvic.ca/ Ohjelma on nykyisin maksuton ja vapaasti käytettävissä 31.01.2013 IPOPPLA 14
Hot Potatoes Sisältää kuusi osaa: Monivalinta ja tekstinsyöttö (short-answer, JQuiz) Lauseen rakentaminen (jumbled-sentence, JMix) Ristisana (crossword, JCross) Raahaus (matching/ordering, JMatch) Aukkotehtävät (gap-fill, JCloze) Erilaisten osioiden yhdisteleminen (Masher) Perustuu JavaScriptiin: ohjelma generoi tarvittavan ohjelmakoodin käyttäjän puolesta Koodi voi olla jossain määrin bugista Muista testaus! 31.01.2013 IPOPPLA 17
Hot Potatoes Esimerkkejä... 31.01.2013 IPOPPLA 18
Hot Potatoes - Huomioita Ohjelman kotisivuilta löytyy oppaita ja esimerkkejä Verkosta löytyy myös suomenkielisiä oppaita ohjelman käyttöön (esimerkkien kera) Googlaa esim. Hot Potatoes opas Ohjelmaan on valittavissa suomenkielinen käyttöliittymä Mikäli harjoitustyön vuorovaikutteiset osiot tehdään pelkästään Hot Potatoes -ohjelmalla, ei harjoitustyöstä voi kovin helposti (jos ollenkaan) saada arvosanaksi 5. 31.01.2013 IPOPPLA 19
JavaScript Lyhyt oppimäärä JavaScriptin käyttöön WWW-sivulla 31.01.2013 IPOPPLA 20
31.01.2013 IPOPPLA 19 JavaScript Yleistä Prototyyppipohjainen olio-ohjelmointikieli Kurssin näkökannasta oliot taustalla, keskitytään JavaScriptin valmiiden olioiden käyttämiseen Tulkattava (eli skriptikieli); ei vaadi erillistä kääntämistä suorittamista varten Perustuu löyhästi C-kieleen Dynaamiset tietotyypit Tapahtumaohjautunut Tyylioppaita olemassa
JavaScript ja HTML JavaScript-koodi voidaan kirjoittaa joko suoraan HTML:n sekaan (upotus): <script type= text/javascript > ohjelmakoodi </script> tai erilliseen tiedostoon, joka liitetään HTML-tiedostossa (tuonti): <script type= text/javascript src= tiedostonnimi.js > </script> 31.01.2013 IPOPPLA 20
JavaScript ja HTML Koodia voi olla lähes missä tahansa HTML:n seassa JavaScript:llä voidaan esimerkiksi tulostaa sivulle sisältöä (myös HTML:ää) tai muuten muokata sivun rakennetta 31.01.2013 IPOPPLA 21
JavaScript Ohjelmakoodin suorittaminen Sivulle upotettu / tuotu JavaScript-koodi suoritetaan siinä järjestyksessä ja kohdassa, missä se sivulla esiintyy Selain käsittelee sivun HTML:n alusta loppuun ja samassa suorittaa JavaScriptin Jos halutaan liittää ohjelmakoodia, joka suoritetaan vasta myöhemmin, on käytettävä funktioita 31.01.2013 IPOPPLA 22
JavaScript Yksinkertainen esimerkki Perinteinen Hello world -esimerkki: <script type= text/javascript > alert( Hei maailma! ); </script> 31.01.2013 IPOPPLA 23
JavaScript Muuttujat JavaScriptissä on muuttujille myös kaksi erikoisarvotyyppiä: undefined muuttujan tyyppi silloin, kun muuttujalle ei ole vielä asetettu arvoa null (pätemätön) muuttujan tyyppi silloin, kun muuttujan arvo on epäkäypä JavaScript-kieli sisältää joukon varattuja sanoja, joita ei voi käyttää muuttujien niminä 31.01.2013 IPOPPLA 24
JavaScript Muuttujat Muuttujilla voi olla kaksi vaikutusaluetta: Globaali muuttuja; funktion ulkopuolella esitelty muuttuja, jota voidaan käsitellä ilman rajoituksia Lokaali muuttuja; funktion sisäpuolella esitelty muuttuja, jota voidaan käsitellä vain funktiossa itsessään 31.01.2013 IPOPPLA 25
JavaScript Kielen perusrakenteista Silmukat (for, while, do-while) break, continue Ehtolausekkeet (if, switch) Funktiot Perusoppaita löytyy verkosta laajalti, esim. http: //www.w3schools.com/js/default.asp Oppaista ja googlaamalla yleensä aina löytyy vastaus ongelmiin 31.01.2013 IPOPPLA 26
JavaScript Tapahtumat Tapa liittää JavaScript toiminnalliseksi osaksi WWW-sivua Useimpiin HTML-elementteihin voidaan liittää erilaisia tapahtumia Voidaan esimerkiksi suorittaa jokin koodinpätkä, kun käyttäjä klikkaa jotakin elementtiä Tapahtumatyyppejä: onclick, onmouseover, onfocus, http://www.w3schools.com/js/js_htmldom_events.asp 31.01.2013 IPOPPLA 27
JavaScript Sisällön tuottaminen sivulle ohjelmakoodista Ohjelmakoodilla voidaan halutessa tuottaa sivulle sisältöä sivun lataamisen yhteydessä: <script type= text/javascript > document.writeln( Hei maailma! ); </script> 31.01.2013 IPOPPLA 28
JavaScript Esimääritellyt oliot JavaScriptissä on käytettävissä joukko esimääriteltyjä olioita, joiden avulla voidaan vaikuttaa sivun rakenteeseen ja sisältöön. Esimerkiksi: document parhaillaan näytettävää sivua kuvaava olio, jonka avulla voidaan muokata sivun rakennetta ja sisältöä window selainikkunaa kuvastava olio, jonka avulla voidaan esimerkiksi avata uusia ikkunoita Ikkunoiden avaaminen usein estetty selaimissa 31.01.2013 IPOPPLA 29
JavaScript DOM-malli Document Object Model (DOM) on standardoitu oliomalli HTML:n käsittelemiseen Pyrkimys kehittää alusta- ja kieliriippumaton tapa WWWsivun sisällön ja rakenteen käsittelemiseen Monitasoinen standardi (Level 0, 1, 2 ja 3), jota selaimet tukevat hieman eri tavoin DOM Level 1 standardoitiin 1. lokakuuta 1998 Laajempi tuki standardille selaimien puolesta tuli vasta paljon myöhemmin, nykyään lähes de facto http://www.w3schools.com/htmldom/default.asp 31.01.2013 IPOPPLA 30
JavaScript DOM-malli Helpoin tapa saada käsiteltäväksi jonkin HTMLelementin olio: document.getelementbyid() Vaatii, että elementille asetetaan id-attribuutti, jonka arvo on sivulla yksilöllinen Parametriksi annetaan elementin id-arvo Palauttaa olion, joka on HTML-elementtiä vastaava, esim. HTMLDivElement 31.01.2013 IPOPPLA 31
JavaScript DOM-malli DIV-elementin sisällä olevan tekstin värin muuttaminen punaiseksi: <div id= teksti > </div> mustaa tekstiä <script type= text/javascript > </script> var elementti = document.getelementbyid( teksti ); var tyyli = elementti.style; tyyli.color = red ; 31.01.2013 IPOPPLA 32
JavaScript Ongelmat Virheen löytäminen koodista usein vaikeaa Kannattaa toteuttaa pieniä kokonaisuuksia ja testata http://www.jslint.com/ 31.01.2013 IPOPPLA 33
jquery jquery-kirjasto on yksi JavaScript-tiedosto, johon viitataan HTML:n head-osassa: <head> <script src="jquery-1.9.0.min.js"></script> </head> Tai esim. jqueryn hostaamana <head> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> </head> Perussyntaksi: $(selector).action() 31.01.2013 IPOPPLA 34
jquery Valitsimia (selectors) voidaan käyttää samoin kuin tyylitiedostoissakin elementti: $("p") luokka: $(".testi"), $("p.testi") id: $("#esimerkki") Valitsimilla päästään myös käsiksi elementteihin DOM-mallin mukaisesti Ensimmäisen kappaleen valinta: $("p:first") Jokaisen listan ensimmäisen listaelementin valitseminen: $("ul li:first-child") 31.01.2013 IPOPPLA 35
jquery jquery sisältää mm. runsaasti erilaisia tapahtumankäsittelijöitä HTML:n manipulaatioon tarkoitettuja metodeja AJAX:in hyödyntämiseen tarkoitettuja funktioita jne. Lisää tietoa esimerkkeineen löytyy kattavasta jqueryn API-dokumentaatiosta http://api.jquery.com/ Hyvä tutoriaali esimerkkeineen löytyy W3Schools-sivustolta http://www.w3schools.com/jquery/default.asp 31.01.2013 IPOPPLA 36