Learner Management Systems

Photo Credit: http://www.flickr.com/photos/25691430@N04/4347819911/
CC: http://creativecommons...
Programme
• Embed and manipulate third party content such as such
as YouTube, Slideshare and Scribd into Moodle
• <iframe>...
Presenter
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther
What is embedding?
Where can I embed?

Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: http://creativecommons.org/licen...
What content do you have?
What digital content do you
have now?
What might you need to
develop?
Multimedia sources

http://compfight.com

http://openclipart.org/
Multimedia sources

http://findicons.com/

http://skalgubbar.se/
Multimedia sources

•
•
•
•
•
•

http://www.freesound.org/
http://opsound.org/
http://librivox.org/
http://www.opensourcem...
Multimedia sources

http://www.slideshare.net/

http://skalgubbar.se/
Site Permissions
Settings > Site administration > Security > Site
Policies

http://docs.moodle.org/24/en/Site_policies#All...
Resource Repositories

http://docs.moodle.org/22/en/Repositories
Resource Repositories - YouTube

http://docs.moodle.org/22/en/Repositories
Resource Repositories - YouTube

<p><a href="http://www.youtube.com/v/EZ15vUjgqvw">P3
Professionals Change Drivers Bronze ...
Resource
Repositories
http://docs.moodle.org/22/en/Repositories

Settings > Site
administration > Plugins >
Repositories >...
Multimedia Embedding

Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889
http://creativecommons.org/licens...
Filters
• Finds a link in text that points to a
multimedia resource and replaces the link
with an appropriate multimedia p...
Filter settings
Settings > Site administration > Plugins > Filters >
Manage Filters
Filter settings
Settings > Site administration > Appearance >
Media embedding
Multimedia Plug ins

Supported Media Formats

* .mp3 - MPEG Audio Stream, Layer III
* .swf - Macromedia Flash Format File ...
iFrame tag
•
•
•

•

•

Open any Moodle tinyMCE editor
Switch to HTML view
Type in iFrame embed code:
<iframe src="http:/w...
iFrame tag – alternative text
•

In the event the user’s browser doesn’t support
frames, add some alterative text between ...
iFrame tag – examples
Vimeo

YouTube
Slideshare

SoundCloud

Photo Credit: http://www.flickr.com/photos/92033577@N00/45080...
iFrame tag – examples

Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licen...
Photo Credit: http://www.flickr.com/photos/33037761@N07/5077808426/
http://creativecommons.org/licenses/by-nc/2.0/
Object example

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by...
Object example
YouTube (old embed Code)

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creati...
Object example
YouTube (old embed Code)

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creati...
Thank you
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther
Upcoming SlideShare
Loading in …5
×

Moodle Series - Learn Local - Embedding in Moodle

998 views

Published on

~ Embed and manipulate third party content such as such as YouTube, Slideshare and Scribd into Moodle

~ <iframe>

~ Multimedia plug ins.

Published in: Education, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
998
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • {"16":"Page pathHome\n/ ▶ Site administration\n/ ▶ Appearance\n/ ▶ Media embedding\n","17":"Page pathHome\n/ ▶ Site administration\n/ ▶ Plugins\n/ ▶ Filters\n/ ▶ Manage filters\nFilters can be used to add links, insert multimedia players, convert Mathematical expressions or emoticons into images and more. \nA filter may be enabled at the site level and then removed as needed at the course or activity level. Thus a teacher can disable glossary auto-linking in a quiz for example. \n","12":"Repositories in Moodle enable users to upload files, access previously uploaded files and to easily bring content into Moodle from external repositories, such as Flickr or Google Docs. Enabled repositories are available in the File picker. \nGoogle Docs - bring files from your Google docs account \nFlickr public - search for and display images from Flickr \nFlickr - search for and display images from your personal Flickr account \nPicasa web album - search for and display images from your Picasa account \nAlfresco - link to or copy files from Alfresco into Moodle \nAmazon S3 \nBox.net - bring files in from your Box.net account \nDropbox - bring files in from Dropbox \nFile system - access files uploaded to a folder on your server (by, eg FTP) \nLegacy course files - use the old system from 1.9 of &quot;course files&quot; \nMerlot.org - bring resources in from Merlot.org \nWebDAV -bring in files using webdav \nEQUELLA - link to files in an EQUELLA installation \n","18":"http://docs.moodle.org/24/en/Filters\n","13":"Repositories in Moodle enable users to upload files, access previously uploaded files and to easily bring content into Moodle from external repositories, such as Flickr or Google Docs. Enabled repositories are available in the File picker. \nGoogle Docs - bring files from your Google docs account \nFlickr public - search for and display images from Flickr \nFlickr - search for and display images from your personal Flickr account \nPicasa web album - search for and display images from your Picasa account \nAlfresco - link to or copy files from Alfresco into Moodle \nAmazon S3 \nBox.net - bring files in from your Box.net account \nDropbox - bring files in from Dropbox \nFile system - access files uploaded to a folder on your server (by, eg FTP) \nLegacy course files - use the old system from 1.9 of &quot;course files&quot; \nMerlot.org - bring resources in from Merlot.org \nWebDAV -bring in files using webdav \nEQUELLA - link to files in an EQUELLA installation \n","19":"http://docs.moodle.org/24/en/Filters\n","14":"Repositories in Moodle enable users to upload files, access previously uploaded files and to easily bring content into Moodle from external repositories, such as Flickr or Google Docs. Enabled repositories are available in the File picker. \nGoogle Docs - bring files from your Google docs account \nFlickr public - search for and display images from Flickr \nFlickr - search for and display images from your personal Flickr account \nPicasa web album - search for and display images from your Picasa account \nAlfresco - link to or copy files from Alfresco into Moodle \nAmazon S3 \nBox.net - bring files in from your Box.net account \nDropbox - bring files in from Dropbox \nFile system - access files uploaded to a folder on your server (by, eg FTP) \nLegacy course files - use the old system from 1.9 of &quot;course files&quot; \nMerlot.org - bring resources in from Merlot.org \nWebDAV -bring in files using webdav \nEQUELLA - link to files in an EQUELLA installation \n","15":"Repositories in Moodle enable users to upload files, access previously uploaded files and to easily bring content into Moodle from external repositories, such as Flickr or Google Docs. Enabled repositories are available in the File picker. \nGoogle Docs - bring files from your Google docs account \nFlickr public - search for and display images from Flickr \nFlickr - search for and display images from your personal Flickr account \nPicasa web album - search for and display images from your Picasa account \nAlfresco - link to or copy files from Alfresco into Moodle \nAmazon S3 \nBox.net - bring files in from your Box.net account \nDropbox - bring files in from Dropbox \nFile system - access files uploaded to a folder on your server (by, eg FTP) \nLegacy course files - use the old system from 1.9 of &quot;course files&quot; \nMerlot.org - bring resources in from Merlot.org \nWebDAV -bring in files using webdav \nEQUELLA - link to files in an EQUELLA installation \n"}
  • Moodle Series - Learn Local - Embedding in Moodle

    1. 1. Learner Management Systems Photo Credit: http://www.flickr.com/photos/25691430@N04/4347819911/ CC: http://creativecommons.org/licenses/by-sa/2.0/
    2. 2. Programme • Embed and manipulate third party content such as such as YouTube, Slideshare and Scribd into Moodle • <iframe> • Multimedia plug ins.
    3. 3. Presenter Michael Gwyther mick@yumstudio.com.au @mickgwyther
    4. 4. What is embedding?
    5. 5. Where can I embed? Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411 CC: http://creativecommons.org/licenses/by-nd/2.0/
    6. 6. What content do you have? What digital content do you have now? What might you need to develop?
    7. 7. Multimedia sources http://compfight.com http://openclipart.org/
    8. 8. Multimedia sources http://findicons.com/ http://skalgubbar.se/
    9. 9. Multimedia sources • • • • • • http://www.freesound.org/ http://opsound.org/ http://librivox.org/ http://www.opensourcemusic.com/ http://ccmixter.org/ http://www.flashkit.com/loops/
    10. 10. Multimedia sources http://www.slideshare.net/ http://skalgubbar.se/
    11. 11. Site Permissions Settings > Site administration > Security > Site Policies http://docs.moodle.org/24/en/Site_policies#Allow_EMBED_and_OBJECT_tags
    12. 12. Resource Repositories http://docs.moodle.org/22/en/Repositories
    13. 13. Resource Repositories - YouTube http://docs.moodle.org/22/en/Repositories
    14. 14. Resource Repositories - YouTube <p><a href="http://www.youtube.com/v/EZ15vUjgqvw">P3 Professionals Change Drivers Bronze Age Orientation Day</a></p> http://docs.moodle.org/22/en/Repositories
    15. 15. Resource Repositories http://docs.moodle.org/22/en/Repositories Settings > Site administration > Plugins > Repositories > Manage Repositories
    16. 16. Multimedia Embedding Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889 http://creativecommons.org/licenses/by-nc/2.0/
    17. 17. Filters • Finds a link in text that points to a multimedia resource and replaces the link with an appropriate multimedia player code which can play the resource. Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889 http://creativecommons.org/licenses/by-nc/2.0/
    18. 18. Filter settings Settings > Site administration > Plugins > Filters > Manage Filters
    19. 19. Filter settings Settings > Site administration > Appearance > Media embedding
    20. 20. Multimedia Plug ins Supported Media Formats * .mp3 - MPEG Audio Stream, Layer III * .swf - Macromedia Flash Format File (Adobe, Inc.) * .mov - QuickTime Video Clip (Apple Computer, Inc.) * .wmv - Windows Media File (Microsoft) * .mpg - MPEG Animation * .avi - Audio Video Interleave File * .flv - Flash Video File (Macromedia, Inc.) * .ram - RealMedia Metafile (RealNetworks, Inc.) * .rpm - RealMedia Player Plug-in (RealNetworks) * .rm - RealMedia Streaming Media (Real Networks, Inc.) * .mp4 * .m4v http://docs.moodle.org/24/en/Multimedia_plugins_filter
    21. 21. iFrame tag • • • • • Open any Moodle tinyMCE editor Switch to HTML view Type in iFrame embed code: <iframe src="http:/www.yumstudio.com.au"> </iframe> Add length & width: <iframe height="600" width="900" src="http:/www.yumstudio.com.au"> </iframe> Use all real estate (width) <iframe height="600" width=”100%" src="http:/www.yumstudio.com.au"> </iframe> Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659 http://creativecommons.org/licenses/by-nc/2.0/
    22. 22. iFrame tag – alternative text • In the event the user’s browser doesn’t support frames, add some alterative text between the opening and closing tages: • Use all real estate (width) <iframe height="600" width=”100%" src="http:/www.yumstudio.com.au"> Place alternative text for browsers that do not understand Iframes in here</iframe> http://docs.moodle.org/23/en/Iframe http://www.w3schools.com/tags/tag_iframe.asp Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659 http://creativecommons.org/licenses/by-nc/2.0/
    23. 23. iFrame tag – examples Vimeo YouTube Slideshare SoundCloud Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659 http://creativecommons.org/licenses/by-nc/2.0/
    24. 24. iFrame tag – examples Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659 http://creativecommons.org/licenses/by-nc/2.0/
    25. 25. Photo Credit: http://www.flickr.com/photos/33037761@N07/5077808426/ http://creativecommons.org/licenses/by-nc/2.0/
    26. 26. Object example Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/ http://creativecommons.org/licenses/by-nc/2.0/
    27. 27. Object example YouTube (old embed Code) Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/ http://creativecommons.org/licenses/by-nc/2.0/
    28. 28. Object example YouTube (old embed Code) Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/ http://creativecommons.org/licenses/by-nc/2.0/
    29. 29. Thank you Michael Gwyther mick@yumstudio.com.au @mickgwyther

    ×