making moodle multi device friendly with bootstrap - bas brands
DESCRIPTION
Making Moodle multi-device friendly with bootstrap - Bas Brands Presented at Moodlemoot Edinburgh 2014 www.moodlemoot.ieTRANSCRIPT
![Page 1: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/1.jpg)
Making Moodle Multi-device
Friendly with Bootstrap
Dressing for success in a Multi-
Device World
![Page 2: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/2.jpg)
What do we all have in common?
http://www.flickr.com/photos/7682132@N05/9913956096/
![Page 3: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/3.jpg)
You (often) interact differently
on each device
Your read texts on your mobile while
traveling
You write on you laptop
You watch youtube on your tablet
You game on your gaming console
![Page 4: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/4.jpg)
Your LMS is already being used
on multiple devices.
![Page 5: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/5.jpg)
Choosing the right theme is a
first step
No Zoom
Focused
Easy to read
![Page 6: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/6.jpg)
Somebody had a great idea
Picture of @fat on twitter
![Page 7: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/7.jpg)
CSS provides a set of styled
elements
Image by Bas Brands
![Page 8: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/8.jpg)
JavaScript makes Bootstrap
interactive
Image by Bas Brands
![Page 9: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/9.jpg)
It’s simple right?
Theme processes
![Page 10: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/10.jpg)
Okay maybe not, help is needed
Developers
Testers
Users
Github
![Page 11: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/11.jpg)
The Grid
City University London
![Page 12: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/12.jpg)
The Grid
City University London
![Page 13: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/13.jpg)
The Grid
City University London
![Page 14: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/14.jpg)
The Grid
City University London
![Page 15: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/15.jpg)
Collapsed blocks
King Faisal University
![Page 16: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/16.jpg)
Expanded blocks
King Faisal University
![Page 17: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/17.jpg)
Mobile blocks
King Faisal University
![Page 18: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/18.jpg)
Theme Moodle bootstrap, what's
new?
Complete rewrite
New settings
Auto generated CSS
Bootswatches
![Page 19: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/19.jpg)
Bootswatches
![Page 20: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/20.jpg)
Bootswatches
![Page 21: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/21.jpg)
Bootswatches
http://www.flickr.com/photos/21503901@N05/5380882279/
![Page 22: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/22.jpg)
The webvideo Activity
mod webvideo
![Page 23: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/23.jpg)
The HTML5 video filter
mod webvideo
![Page 24: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/24.jpg)
Responsive Images
mod webvideo
![Page 25: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/25.jpg)
Thank you!
https://www.flickr.com/photos/31149081@N02/7761213134/
![Page 26: Making Moodle multi device friendly with bootstrap - Bas brands](https://reader033.vdocument.in/reader033/viewer/2022052906/558c45b8d8b42acf348b4654/html5/thumbnails/26.jpg)
contact me @basbrands