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

Transkriptio

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

2 Aiheena tänään JavaScript jquery HTML5 Ääni, video Web Storage Evästeet Kertausta IPOPPLA 2

3 JavaScript - DOM-malli Tapa päästä käsiksi HTML-dokumentin rakenteeseen ja sisältöön esim. JavaScriptillä Käytännössä HTML-elementit siis olioina, joiden avulla elementtien sisältöjä (body) ja attribuutteja voi muokata IPOPPLA 3

4 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 4

5 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 5

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

7 DOM-malli Käsiksi elementteihin Elementin hakeminen id-arvolla document. getelementbyid("id-arvo"); Elementtien hakeminen name-arvolla document. getelementsbyname("name-arvo") Elementtiä ympäröivien elementtien hakeminen e. childnodes, e.firstchild, e.lastchild,e.nextsibling, e. parentnode, e.previoussibling IPOPPLA 7

8 DOM-malli Elementit olioina Kaikilla elementtiolioilla joukko perustoimintoja, esim. appendchild(elem) lisää elementille sisäkkäisen elementin removechild(elem) poistaa annetun elementin haschildnodes() kertoo, onko elementin sisällä muita elementtejä joukko perusattribuutteja, esim. parentnode elementin sisältävän elementin olio childnodes lista elementin sisällä olevista elementeistä firstchild, lastchild, previoussibling, nextsibling, IPOPPLA 8

9 DOM-malli Elementin lisääminen toisen elementin sisälle <div id="elementti"></div> <script type="text/javascript"> // luodaan uusi elementti var imgelem = document.createelement("img"); imgelem.src = "kuva.jpg"; // lisätään elementti elementin "elementti" sisään var elem = document.getelementbyid("elementti"); elem.appendchild(imgelem); </script> IPOPPLA 9

10 DOM-malli Tekstin lisääminen elementin sisälle <div id="elementti"></div> <script type="text/javascript"> // luodaan uusi elementti var text = document.createtextnode("teksti"); // lisätään teksti elementin "elementti" sisään var elem = document.getelementbyid("elementti"); elem.appendchild(text); </script> IPOPPLA 10

11 DOM-malli Elementin sisällön poistaminen <div id="elementti">...muita elementtejä... </div> <script type="text/javascript"> // poistetaan elementin kaikki sisältö var elem = document.getelementbyid("elementti"); while (elem.haschildnodes()) { elem.removechild(elem.firstchild); } </script> IPOPPLA 11

12 DOM-malli Elementin CSS-tyylien muokkaaminen <div id="elementti">tekstiä</div> <script type="text/javascript"> // muutetaan elementin tyylimäärityksiä var elem = document.getelementbyid("elementti"); elem.style.color = "red"; elem.style.fontsize = 1.5em";... </script> 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses IPOPPLA 12

13 JavaScript-kirjastoista Erilaisia JavaScript-kirjastoja saa käyttää avuksi interaktiivisten osioiden tekemisessä Hyviä ehdokkaita: jquery Lisää löytyy esim. Muistettava huomioida käyttöoikeudet, eli saako käyttää ja missä yhteyksissä Kirjastojen käyttö on mainittava dokumenteissa IPOPPLA 13

14 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()

15 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")

16 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 16

17 Ajax Asynchronous JavaScript and XML Tekniikka, jolla mahdollistetaan datan välitys selaimen ja serverin välillä Dynaamisten ja vuorovaikutteisten sivujen luonti IPOPPLA 17

18 Työkaluja JavaScript-ongelmien selvittämiseen JSLint JSFiddle Useimmissa selaimissa jonkinlainen consoli debuggaukseen Chrome: CTRL+SHIFT+J Firefox: CTRL+SHIFT+K Opera: CTRL+SHIFT+I IE: F12 Selaimen lisäosia Firebug Lukuisia muita IPOPPLA 18

19 HTML 5 Uusi HTML standardi Vanha standardi, HTML 4.01 vuodelta 1999 HTML 5.0, 2014 Q4 Uusia ominaisuuksia Median ja grafiikan toistoon Uudet tagit ja attribuutit <section>, <article>, <header> ja <nav> IPOPPLA 19

20 HTML 5 - Audio Äänitiedoston toistaminen ilman tarvetta selaimen lisäosille Suurin osa selaimista tukee Tuki eri formaateille (.wav,.mp3,.ogg) AudioJS <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> IPOPPLA 20

21 HTML 5 - Video Videotiedostojen toistaminen ilman tarvetta selaimen lisäosille Tuki eri formaateille (.mp4,.webm,.ogg) VideoJS <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> IPOPPLA 21

22 IPOPPLA 22 HTML 5 - Canvas Elementti grafiikan piirtämistä varten Graafinen sisältö tuotetaan erilaisilla scripteillä (JavaScript) Tukee suoraan yksinkertaisia muotoja, tekstiä ja kuvia Flashin kaltaisen sisällön tuottaminen mahdollista CreateJS (EaselJS) <canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

23 Evästeet Dataa jonka selain tallentaa käyttäjän koneelle Kahta lajia, session kohtaiset ja pysyvät Palvelin, joka on evästeen tallentanut pääsee siihen käsiksi myöhemmin Seuranta hyvässä ja pahassa Kolmannen osapuolen cookiet JavaScriptillä ja muilla tekniikoilla toimiva Harjoitustyössä Missä käyttäjä kohtaa käyttäjä on menossa Yksittäisen käyttäjän pisteet tehtävässä HTML5 vaihtoehto IPOPPLA 23

24 Lyhyt kertaus

25 Aikataulu Luennot (jokaisesta läsnäolosta 1 lisäpiste) To , To (Teoria) ja To , To (Ohjelmointi) Tehtäväanalyysi Palautettava ennen luentoa Palautepalaverit keskiviikkona ja torstaina Tarkentunut suunnitelma Sunnuntai Prototyyppi valmiina Keskiviikko Palautepalaverit keskiviikkona ja torstaina Prototyypin testaus Sunnuntaina Valmis harjoitustyö ja loppuraportti Torstaina Töiden esittelytilaisuus Torstaina IPOPPLA 27

26 Harjoitustyön sisältö Harjoitustyön tulee olla mielekäs usean sivun kokonaisuus Harjoitustyön kohderyhmän valinta olennainen työn suunnittelua ja tulee näkyä lopullisessa työssä Asiasisällön lisäksi sivustossa tulee olla myös erilaisia vuorovaikutteisia osioita yhteensä 3-4 kappaletta, jotka testaavat oppijan tietotasoa, antavat asiallista palautetta ja motivoivat oppijaa opiskelemaan IPOPPLA 28

27 Oppilaan aktivointi Oltava monipuolista Kurssilla käytetty luokittelu (pelkistetysti): 0. Navigointivuorovaikutus 1. Monivalinta 2. Raahaus 3. Tekstinsyöttö 4. Simulointi 5. "Oman oppimistyövälineympäristön" käyttö Palaute! IPOPPLA 29

28 Sivuston suunnittelun kulmakivet Visuaalinen suunnittelu Värit Fontit Hahmolait & CRAP Käytettävyys (Nielsenin heuristiikat) Selainriippumattomuus IPOPPLA 30

29 Harjoitustyön ohjaus Ohjausta saa tarpeen mukaan Ensisijaisesti sähköpostitse Tarvittaessa voidaan myös tavata Sovittava erikseen ajankohta ja paikka Kysykää apua heti kun ongelmia ilmenee Palautepalavereissa voidaan ratkoa ongelmia Ilmoittakaa etukäteen jos mahdollista IPOPPLA 31