Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

H5P-työkalut (KATSO KUVAUKSESTA UUDEN VERSION LINKKI)

4,913 views

Published on

OLEN JO JULKAISSUT UUDEN VERSION tästä osin vanhentuneesta diasarjasta. SlideShare ei enää mahdollista diasarjojen päivittämistä, joten uusimman version löydät kätevimmin blogini koulutusdiojen sivulta: http://www.matleenalaakso.fi/p/koulutusdiat.html

Aiheeseen liittyä infoa ja ohjeita Mobie OnEdu/eSmart-oppimisympäristöstä (WordPress): http://www.matleenalaakso.fi/p/onedu.html

Published in: Education
  • Be the first to comment

H5P-työkalut (KATSO KUVAUKSESTA UUDEN VERSION LINKKI)

  1. 1. H5P-työkalut Sisällön rikastaminen ja interaktiiviset tehtävät WordPress-, Drupal- ja Moodle-ympäristöissä Syyskuu 2017 Matleena Laakso Blogi: www.matleenalaakso.fi Twitter: @matleenalaakso Diat: www.slideshare.net/MatleenaLaakso Kuvat ruudunkaappauskuvia sivulta h5p.org sekä Mobie eSmartista.
  2. 2. Mikä on H5P? • H5P-työkalujen (=HTML5 Package) avulla voi rikastaa sisältöä ja tehdä interaktiivisia tehtäviä esim. verkkosivuille tai sähköisiin oppimisympäristöihin. Oppija saa niistä välittömän palautteen. • Esimerkiksi – Interaktiivinen kuva tai video – Aukkotehtävät ja muistipeli – Listaukset, diagrammit ja kuvakollaasit • H5P-työkalut ovat saatavissa WordPress-, Drupal- ja Moodle- ympäristöihin. Ne eivät ole niissä automaattisesti, vaan ne täytyy asentaa erikseen, mistä voi aiheutua kuluja.
  3. 3. Tämä diasarja • H5P-työkalut toimivat samalla tavalla kaikissa ympäristöissä ja niitä voi jopa kopioida ympäristöstä toiseen. • Tämän diasarjan ruudunkaappauskuvat ovat Mobie OnEdu 2.0/eSmart-oppimisympäristöstä, joka on rakennettu WordPressillä. Näihin Mobien ympäristöihin H5P kuuluu aina ilman eri maksua. Mobie OnEdu/eSmart-käyttäjille • Uusimman H5P-päivityksen jälkeen myös opettaja/kouluttaja näkee opiskelijoiden vastausten pistemäärät. Aiemmin ne näkyivät vain oppijoille itselleen. Jos päivityistä ei teille vielä ole tehty, ottakaa yhteys Mobieen • Mobie Zine -julkaisuissa H5P ei toimi, mutta julkaisuihinkin voit tuoda H5P- sisältöjä linkeillä kurssiympäristöstä. • Ohjediasarjat uuden ja vanhan oppimisympäristön, Zine-julkaisujen ja lomaketyökalun käyttöön, sis. linkkejä muidenkin ohjeisiin: www.matleenalaakso.fi/p/onedu.html
  4. 4. Erinomaiset englanninkieliset ohjeet h5p.org-sivusto •Esimerkkejä H5P-tehtävistä: h5p.org/content-types-and-applications •Parin minuutin ohjevideoita: h5p.org/documentation/for-authors/tutorials
  5. 5. H5P-työkalut • Eri organisaatioilla voi olla käytössä hieman eri työkaluja riippuen mm. siitä, milloin asennus on tehty. • WordPress-ympäristöissä H5P- sisällöt löytyvät ohjausnäkymän kautta. Siellä niitä voi myös myöhemmin muokata, vaikka ne olisi jo liitetty kurssille. • Halutessasi voit suomentaa tehtävien ohjeita – tai sitten jättää ne englanninkielisiksi.
  6. 6. Accordion Voit kirjoittaa ns. haitaritekstiä niin, että vain otsikot näkyvät, mutta niitä klikkaamalla koko teksti avautuu.
  7. 7. Otsikko itseäsi ja muita muokkaajia varten Tästä tehtävä-/sisältötyypiksi on valittu Accordion Ensimmäisen kohdan otsikko Ensimmäisen kohdan kuvaus Tästä voit lisätä haitaritekstiin uusia kohtia
  8. 8. Näin viet H5P-sisällön verkkoon • Luotuasi sisällön, näet esikatselun ja voit palata muokkaamaan sisältöä. Muokkaaminen onnistuu, vaikka sisältö olisi jo viety kurssille/verkkosivulle. • Sisällön saat vietyä haluamaasi paikkaan kahdella vaihtoehtoisella tavalla, jonka jälkeen sivu on päivitettävä. – Kopioi saamasi shortcode, esim. [h5p id="30"] ja vei se haluamaasi paikkaan TAI – Siirry kohtaan minne sisällön haluat ja avaa se muokkaustilaan. Valitse ADD H5P.
  9. 9. Appear.in for Chat and Talk Chat- ja videoneuvottelu- huoneen saat upotettua kurssin lukuun/ kappaleeseen, kun vain ensin nimeät sen. Automaattisen koon sijaan esim. 600*650Appear.in -videoneuvottelu toimii ilman kirjautumista kahdeksalle henkilölle myös ilman H5P- tehtävätyökalua. Käytä sitä suoraan selaimella (Chrome, Firefox, Opera; myös mobiilisti). Kirjautumalla saa lisäominaisuuksia. Appear.in -videoneuvottelu toimii ilman kirjautumista kahdeksalle henkilölle myös ilman H5P- tehtävätyökalua. Käytä sitä suoraan selaimella (Chrome, Firefox, Opera; myös mobiilisti). Kirjautumalla saa lisäominaisuuksia.
  10. 10. Audio • Voi lisätä äänitiedoston tai videon. • Huomaa, että tähän ja moneen muuhunkin tiedostoon voi lisätä tekijänoikeustiedot.  Ks. seuraava dia. Tekijänoikeustiedot
  11. 11. Lisää tarvittaessa tekijänoikeustiedot Opi lisää tekijänoikeuksista ja Creative Commons –lisensseistä •Opettajan tekijänoikeus –kirja ja sen verkkosivut: www.opettajantekijanoikeus.fi •KOTEK-hankkeen tallenteet: www.eoppimiskeskus.fi/kotek-hanke •Avoimet Creative Commons –lisenssit: www.slideshare.net/MatleenaLaakso/avoimet-creative-commons-lisenssit Undishclosed = määrittelemätön Public domain •Tuotos on tekijänoikeuden ulkopuolella, joko alun perin tai suoja on vanhentunut. •Vain USAssa ja Israelissa voi henkilö itse valita luovuttavansa teoksen public domainiin. Kaikkialla muualla maailmassa CC0 on se tapa. – Valikosta lähimpänä CC0-lisenssiä on Public Domain Dedication and Licence, vaikkei se aivan samaa tarkoitakaan. Ks. esim. opendatacommons.org/licenses/pddl/1-0/
  12. 12. Chart Piirakka- ja pylväskaaviot •Valitse kummanlaisen kaavion teet •Lisää teksti ja lukuarvo sekä värit
  13. 13. Collage • Kuvakollaasin tekeminen: otsikoi, valitse layout ja lisää kuvat. • Preview-kohdassa voit vielä zoomata yksittäisiä kuvia (-/+)
  14. 14. Course Presentation Tee ”diasetti”, johon upotat videoita tai äänitiedostoja ja luot mm. aukko-, yhdistämis- tai monivalintatehtäviä.
  15. 15. Dialog Cards • Kysymys/vastaus • Kielten opiskeluun: esim. kääntökortti kuvalla mustikka/ blueberry: mukaan voi tuoda äänitiedoston • Vrt. Flashcards, joissa oikea vastaus kirjoitetaan kääntökorttiin
  16. 16. Drag Text Aukkotehtäviä tehdessäsi voit valita esim. saako tehtävää yrittää uudestaan, voiko katsoa oikeat vastaukset ja annetaanko palaute välittömästi.
  17. 17. Fill in the Blanks Tekstistä poistetaan sanat merkitsemällä ne *tähdellä*.
  18. 18. Find the Hotspot • Oppijan tehtävänä on löytää kuvasta tietyt kohdat (hotspot), jotka voivat olla varsin pieniäkin yksityiskohtia. • Kuvaan voi merkitä yhden tai useita oikeita ja vääriä kohtia ja niihin tekstikommentin. • Oppija ei näe, minne vaihtoehdot on piilotettu. Esimerkiksi • Etsi kuvasta maailman viisi väki- määrältään suurinta kaupunkia. • Etsi kuvasta kohdat, joissa on turvallisuusriski. • Etsi työvälineestä kohdat, jotka täytyy tarkastaa viikoittain. • Etsi kuvasta kolme ensimmäistä kohtaa, joista vikatilanteen selvittäminen kannattaa aloittaa.
  19. 19. Flashcards • Kääntökorttien tehtävissä on erilaisia valintoja, voi esimerkiksi antaa vihjeitä. • Voit käyttää kuvia ja/tai sanoja. • Vastaus annetaan kirjoittamalla. Seuraavassa diassa näet ruudunkaappauskuvista, miten kääntökortteja tehdään.
  20. 20. Flashcards Nimeä tehtävä Valitse tehtävätyyppi Kirjoita tehtäväksianto Kysymys Oikea vastaus Anna halutessasi vihje Voit muokata kuvaa ja kertoa tekijänoikeustiedot Näm ä vastaajalle näkyvät palautteet voit halutessasi suom entaa.
  21. 21. Greeting Card Valitse kuva ja lisää kortin teksti.
  22. 22. Guess the Answer Kysymys kuvasta. Vastaus näkyy kuvaa klikkaamalla.
  23. 23. Iframe embedder • Hae ulkoisesta palvelusta upotuskoodi (embed code), joka löytyy usein kohdasta jaa/share. – Upotuskoodin voi tuoda WordPressin luotetuiksi luokittelemista palveluista, esim. Microsoft Office 365, Googlen-palvelut (Maps, YouTube, Documents jne), SlideShare, Twitter ja Instagram. – Tuo koodi kohtaan SOURCE. • Vaihtoehtoisesti voit tuoda upotuskoodin WordPress- ympäristön muokkaustilassa valitsemalla TEKSTI- näkymän.
  24. 24. Mistä upotuskoodi (embed code) löytyy? v
  25. 25. Image hotspots Interaktiiviset kuvat •Anna otsikko ja lataa taustakuva. •ADD HOTSPOT –kohdasta voi valita kuvasta aukeamaan tekstiä, kuvan tai videon. Esimerkkejä •Kuva verkkokurssin työ- välineistä (netti, kamera, mikrofoni, kalenteri,..) Samankaltainen kuin www.thinglink.com Ks. ThingLink opetuksessa –diasarja: www.slideshare.net/MatleenaLaakso/thinglink-opetuksessa Samankaltainen kuin www.thinglink.com Ks. ThingLink opetuksessa –diasarja: www.slideshare.net/MatleenaLaakso/thinglink-opetuksessa
  26. 26. Interactive video Työkalun avulla lisäät keskelle videota monivalintoja, aukkotehtäviä, raahaustehtäviä ja omia tekstikommentteja. Lataa video tai kerro sen linkki ja lisää editorin ylälaidasta tehtävätyyppejä. Samankaltainen kuin edpuzzle.com Ohjeet: www.matleenalaakso.fi/ p/sahkoiset-kokeet.html Samankaltainen kuin edpuzzle.com Ohjeet: www.matleenalaakso.fi/ p/sahkoiset-kokeet.html
  27. 27. Mark the Words Tehtävässä valitaan tekstistä sanoja ohjeesi mukaan. Voit valita esim. saako tehtävää yrittää uudestaan ja voiko katsoa oikeat vastaukset. Tehtävien ohjeet voit halutessasi suomentaa, kuten muissakin tehtävissä.
  28. 28. Memory Game Muistipelissä voit esimerkiksi kertoa kuvasta jotain, mikä näkyy, vasta kun parit on löydetty.
  29. 29. Question Set Monivalinta- ja aukkotehtävät yms. samassa kyselyssä. Mobie OnEdu/eSmart: Jotakuinkin samat kysymystyypit löytyvät kurssiympäristön kokeesta. Lisäksi siellä on vaihtoehtona essee-vastaus.
  30. 30. Summary • Teetä yhteenvetoja etenevistä monivalinnoista. • Kuvasta näet, miten oikeat vastaukset kertyvät ylös ja tarina etenee uusilla valinnoilla. • Kirjoita Introduction text –kohtaan ohje. Oppija ei näe H5P- tehtävällesi annettua nimeä.
  31. 31. Timeline • Nimeä aikajana, tuo sille taustakuva ja määrittele alkamis- ja päättymisaika (päivän tarkkuudella). • Tuo sisältöä valitsemillesi päiville tai aikaväleille: – Otsikko ja leipäteksti, taustakuva – Medialinkki (Twitter, YouTube, Flickr, Vimeo, Wikipedia, Google Maps tai SoundCloud) • Esim. verkkokurssin aikataulu, yrityksen historian merkkipaalut,..
  32. 32. Aikajanaan tutustutaan klikkaamalla sen otsikoita. Niistä voi avautua esim. mediasisältöjä. Kuva: h5p.org/timeline
  33. 33. Twitter User Feed Upota yksittäiseen lukuun tai kappaleeseen tietyn käyttäjän Twitter-syötteet.
  34. 34. H5P-sisältöjen kopioiminen toiselle kurssille tai toiseen verkkoympäristöön Kun luot H5P-sisältöä, jonka kopioimisen haluat mahdollistaa, jätä rasti LATAUSPAINIKKEESEEN (on oletuksena valittu). Kopioimisesta on hyötyä esim. kun •Haluat tehdä luomastasi H5P-sisällöstä kopion, jota muokkaat hieman erilaiseksi toiselle kurssille/ryhmälle. – Vaikka muokkaisit koko sisällön toiseksi, säilyvät tekemäsi käännökset ohjeista: •Haluat hyödyntää samoja H5P-sisältöjä eri kurssiympäristöissä, esim. eri kieliversioissa tai eri organisaatioiden ympäristöissä.
  35. 35. H5P-sisältöjen kopioiminen 1. Avaa kurssi/sivu, missä H5P-sisältö näkyy. Valitse H5P-sisällön alareunasta LATAA. Sisältö tallentuu tietokoneellesi. 2. Siirry ohjauspaneelista kohtaan H5P sisältö –> lisää uusi. Valitse nyt oletuksena olevan LUO (Create) -kohdan sijaan LATAA (Upload) ja valitse aiemmin lataamasi H5P-tiedosto koneeltasi (esim. ladattujen tiedostojen kansiosta).  USE . 3. Vie tuomasi H5P tavalliseen tapaan kurssille/verkkosivulle.
  36. 36. Mistä oppija näkee tuloksensa? • Usein H5P-tehtävien ideana on, että oppija saa välittömän palautteen. • Mobie OnEdu/eSmartissa (WordPressa) oppija näkee tuloksensa myös ohjausnäkymän kautta.
  37. 37. Mistä kouluttaja näkee tulokset? • Kouluttaja näkee oppijoidensa tulokset (pistemäärät) ohjausnäkymän kautta yksittäisten H5P-tehtävien kohdalta kohdasta TULOKSET. • Omat tuloksensa kouluttaja näkee kohdasta TULOKSENI, mikäli hän testaa tehtäviä tai opiskelee itse jotain samassa ympäristössä.
  38. 38. Muita suomenkielisiä ohjeita ja esimerkkejä H5P:stä ISOverstas/AW: H5P-lisäosan käyttö Isoverstaan Moodlessa (CC BY- SA) bit.ly/isoh5p Sanna-Kaisa Salonniemi, Tampereen kaupunki: Interaktiivisten HTML5-tehtävien luonti Reppu-Moodleen (CC BY-NC-SA) bit.ly/h5pohjeet Tuuli Kurkipää ja Ville Palkinen, Tampereen kaupunki: H5P-vinkkejä moodle.tampere.fi/course/view.php?id=5867  Kirjaudu vierailijana
  39. 39. Tämä diasarja on lisensoitu Creative Commons -lisenssillä CC BY-SA 4.0 • Lisätietoja CC-lisensseistä: creativecommons.fi • CC BY-SA 4.0 eli Creative Commons Nimeä-Jaa samoin 4.0 Kansainvälinen -lisenssi: creativecommons.org/licenses/by-sa/4.0/deed.fi – Sinä saat jakaa ja muuntaa tätä diasarjaa, myös kaupallinen hyödyntäminen on sallittu. – Ehtona on, että viittaat aina alkuperäiseen tekijään ja lähteeseen: Matleena Laakso, https://www.slideshare.net/MatleenaLaakso/h5ptykalut Mahdollinen muokattu teos tulee jakaa tällä samalla lisenssillä.   • Tätä lisenssiä laajempia oikeuksia voi olla saatavilla osoitteessa www.matleenalaakso.fi

×