Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Transkriptio

1 Internet-pohjaisen oppimisympäristön laadinta Luento 3

2 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista IPOPPLA 2

3 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 IPOPPLA 3

4 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

5 Toteutustekniikoista yleisesti Lähde: Reichert, R. and Hartmann, W. (2004). On the Learning in E-Learning. Proceedings of EDMEDIA June 23-26, 2004, Lugano, Switzerland, AACE IPOPPLA 5

6 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 IPOPPLA 6

7 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ä IPOPPLA 7

8 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? IPOPPLA 8

9 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 IPOPPLA 9

10 IPOPPLA 10 Selainriippumattomuus Validaattorit apuna standardien noudattamisessa, esimerkiksi W3C:n validaattorit: HTML-validointi, CSS-validointi, Lukuisia muita tarjolla Selainten lisäosat Chrome Firefox Opera

11 W3C - 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 IPOPPLA 11

12 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! IPOPPLA 12

13 Hot Potatoes Helppo ratkaisu yksinkertaisiin tarpeisiin IPOPPLA 15

14 Hot Potatoes Ohjelma vuorovaikutteisten osioiden luomiseen WWWsivuille Tarkoitettu opetussivustojen tekoon Oma versionsa useammalle eri käyttöjärjestelmälle (Windows, OS X, Linux, ) Kotisivu: Ohjelma on nykyisin maksuton ja vapaasti käytettävissä IPOPPLA 14

15 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! IPOPPLA 17

16 Hot Potatoes Esimerkkejä IPOPPLA 18

17 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 IPOPPLA 19

18 JavaScript Lyhyt oppimäärä JavaScriptin käyttöön WWW-sivulla IPOPPLA 20

19 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

20 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> IPOPPLA 20

21 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 IPOPPLA 21

22 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 IPOPPLA 22

23 JavaScript Yksinkertainen esimerkki Perinteinen Hello world -esimerkki: <script type= text/javascript > alert( Hei maailma! ); </script> IPOPPLA 23

24 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ä IPOPPLA 24

25 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 IPOPPLA 25

26 JavaScript Kielen perusrakenteista Silmukat (for, while, do-while) break, continue Ehtolausekkeet (if, switch) Funktiot Perusoppaita löytyy verkosta laajalti, esim. http: // Oppaista ja googlaamalla yleensä aina löytyy vastaus ongelmiin IPOPPLA 26

27 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, IPOPPLA 27

28 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> IPOPPLA 28

29 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 IPOPPLA 29

30 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 IPOPPLA 30

31 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 IPOPPLA 31

32 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 ; IPOPPLA 32

33 JavaScript Ongelmat Virheen löytäminen koodista usein vaikeaa Kannattaa toteuttaa pieniä kokonaisuuksia ja testata IPOPPLA 33

34 jquery jquery-kirjasto on yksi JavaScript-tiedosto, johon viitataan HTML:n head-osassa: <head> <script src="jquery min.js"></script> </head> Tai esim. jqueryn hostaamana <head> <script src=" </head> Perussyntaksi: $(selector).action() IPOPPLA 34

35 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") IPOPPLA 35

36 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 Hyvä tutoriaali esimerkkeineen löytyy W3Schools-sivustolta IPOPPLA 36