Internet-pohjaisen oppimisympäristön laadinta Luento 4
Aiheena tänään JavaScript jquery HTML5 Ääni, video Web Storage Evästeet Kertausta 05.02.2015 IPOPPLA 2
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 05.02.2015 IPOPPLA 3
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 05.02.2015 IPOPPLA 4
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 05.02.2015 IPOPPLA 5
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 ; 05.02.2015 IPOPPLA 6
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 05.02.2015 IPOPPLA 7
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, 05.02.2015 IPOPPLA 8
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> 05.02.2015 IPOPPLA 9
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> 05.02.2015 IPOPPLA 10
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> 05.02.2015 IPOPPLA 11
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 - http://www.w3schools.com/cssref/css_units.asp 05.02.2015 IPOPPLA 12
JavaScript-kirjastoista Erilaisia JavaScript-kirjastoja saa käyttää avuksi interaktiivisten osioiden tekemisessä Hyviä ehdokkaita: jquery Lisää löytyy esim. http://en.wikipedia.org/wiki/list_of_javascript_libraries Muistettava huomioida käyttöoikeudet, eli saako käyttää ja missä yhteyksissä Kirjastojen käyttö on mainittava dokumenteissa 05.02.2015 IPOPPLA 13
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()
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")
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 05.02.2015 IPOPPLA 16
Ajax Asynchronous JavaScript and XML Tekniikka, jolla mahdollistetaan datan välitys selaimen ja serverin välillä Dynaamisten ja vuorovaikutteisten sivujen luonti http://www.w3schools.com/ajax/ajax_intro.asp 05.02.2015 IPOPPLA 17
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 05.02.2015 IPOPPLA 18
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> 05.02.2015 IPOPPLA 19
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> 05.02.2015 IPOPPLA 20
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> 05.02.2015 IPOPPLA 21
05.02.2015 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>
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 05.02.2015 IPOPPLA 23
Lyhyt kertaus
Aikataulu Luennot (jokaisesta läsnäolosta 1 lisäpiste) To 15.01., To 22.01. (Teoria) ja To 29.01., To 05.02. (Ohjelmointi) Tehtäväanalyysi Palautettava ennen luentoa 05.02. Palautepalaverit keskiviikkona 11.02. ja torstaina 12.02. Tarkentunut suunnitelma Sunnuntai 25.02. Prototyyppi valmiina Keskiviikko 25.03. Palautepalaverit keskiviikkona 01.04. ja torstaina 02.04. Prototyypin testaus Sunnuntaina 19.04. Valmis harjoitustyö ja loppuraportti Torstaina 30.04. Töiden esittelytilaisuus Torstaina 07.05. 05.02.2015 IPOPPLA 27
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 05.02.2015 IPOPPLA 28
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ö http://www.sis.uta.fi/~ph/tao2014/aktivointi2014.html Palaute! 05.02.2015 IPOPPLA 29
Sivuston suunnittelun kulmakivet Visuaalinen suunnittelu Värit Fontit Hahmolait & CRAP Käytettävyys (Nielsenin heuristiikat) Selainriippumattomuus 05.02.2015 IPOPPLA 30
Harjoitustyön ohjaus Ohjausta saa tarpeen mukaan Ensisijaisesti sähköpostitse ipoppla@sis.uta.fi 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 05.02.2015 IPOPPLA 31