Upload File

making moodle multi device friendly with bootstrap - bas brands

26
Making Moodle Multi-device Friendly with Bootstrap Dressing for success in a Multi- Device World

Upload: ireland-uk-moodlemoot-2012

Post on 26-Jun-2015

226 views

Category:

Devices & Hardware


0 download

Report

Tags:

DESCRIPTION

Making Moodle multi-device friendly with bootstrap - Bas Brands Presented at Moodlemoot Edinburgh 2014 www.moodlemoot.ie

TRANSCRIPT

Page 1: Making Moodle multi device friendly with bootstrap - Bas brands

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

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

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

Your LMS is already being used

on multiple devices.

Page 5: Making Moodle multi device friendly with bootstrap - Bas brands

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

Somebody had a great idea

Picture of @fat on twitter

Page 7: Making Moodle multi device friendly with bootstrap - Bas brands

CSS provides a set of styled

elements

Image by Bas Brands

Page 8: Making Moodle multi device friendly with bootstrap - Bas brands

JavaScript makes Bootstrap

interactive

Image by Bas Brands

Page 9: Making Moodle multi device friendly with bootstrap - Bas brands

It’s simple right?

Theme processes

Page 10: Making Moodle multi device friendly with bootstrap - Bas brands

Okay maybe not, help is needed

Developers

Testers

Users

Github

Page 11: Making Moodle multi device friendly with bootstrap - Bas brands

The Grid

City University London

Page 12: Making Moodle multi device friendly with bootstrap - Bas brands

The Grid

City University London

Page 13: Making Moodle multi device friendly with bootstrap - Bas brands

The Grid

City University London

Page 14: Making Moodle multi device friendly with bootstrap - Bas brands

The Grid

City University London

Page 15: Making Moodle multi device friendly with bootstrap - Bas brands

Collapsed blocks

King Faisal University

Page 16: Making Moodle multi device friendly with bootstrap - Bas brands

Expanded blocks

King Faisal University

Page 17: Making Moodle multi device friendly with bootstrap - Bas brands

Mobile blocks

King Faisal University

Page 18: Making Moodle multi device friendly with bootstrap - Bas brands

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

Bootswatches

Page 20: Making Moodle multi device friendly with bootstrap - Bas brands

Bootswatches

Page 21: Making Moodle multi device friendly with bootstrap - Bas brands

Bootswatches

http://www.flickr.com/photos/21503901@N05/5380882279/

Page 22: Making Moodle multi device friendly with bootstrap - Bas brands

The webvideo Activity

mod webvideo

Page 23: Making Moodle multi device friendly with bootstrap - Bas brands

The HTML5 video filter

mod webvideo

Page 24: Making Moodle multi device friendly with bootstrap - Bas brands

Responsive Images

mod webvideo

Page 25: Making Moodle multi device friendly with bootstrap - Bas brands

Thank you!

https://www.flickr.com/photos/31149081@N02/7761213134/

Page 26: Making Moodle multi device friendly with bootstrap - Bas brands

contact me @basbrands


Moodle Bootstrap Theme Masterclass 2014

Back-Testing the ODP Bootstrap & Mack Bootstrap Models

BAS-311HN BAS-326H BAS-341H BAS-342H BAS-341H BAS-342H - Brother … · 2018-03-21 · Brother has established voluntary environmental standards for products and created the “Brother

Bootstrap ?

Sharing your Moodle - Moodle (mini) Moot

The conformal bootstrap approach to critical phenomena...bootstrap F. Gliozzi (Physics Department, Torino University) Conformal Bootstrap 11-15 May 2018, GGI2 / 22 The Conformal Bootstrap

Introduction To Moodle Moodle Moot

[BOOK] [Bootstrap] [Awesome] Bootstrap-Programming-Cookbook

Bootstrap your web styles with twitter bootstrap

Moodle HQ Workshop: Moodle App - assets.moodlemoot.org · Moodle 3.2 Based on Bootstrap 4 CSS # Reworks Moodle front-end for smartphone and tablet devices Moodle app # Official native

bootstrap-datepicker Documentation...bootstrap-datepicker Documentation, Release Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. This is a fork

BAS-300G INSTRUCTION MANUAL BAS-311G BAS-326G - Brotherdownload.brother.com/pub/com/ism/pdf/300g_in.pdf · 2020-04-07 · BAS-300G, BAS-311G, BAS-326G Thank you very much for buying

Aproksimasi Interval Konfidensi Bootstrap. Haeruddin.pdfAproksimasi Interval Konfidensi Bootstrap Approximate Confidence Interval Bootstrap Haeruddin Program Studi Statistika FMIPA

ME Confidence Intervals: Bootstrap Distribution · 2015-02-21 · Bootstrap Sample Statistic Bootstrap Sample Statistic Bootstrap Sample Statistic. . . Bootstrap Sample Statistic

Bootstrap-After-Bootstrap Prediction Intervals for Auto Regressive Models

iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning

Bootstrap 3 vs. bootstrap 4

BAS-326G BAS-311G

Building a Moodle theme with bootstrap

Bootstrap - chochev.euchochev.eu/html/7. Bootstrap-Framework.pdf · 2 TABLE OF CONTENTS 1. Bootstrap Introduction 2. Getting Started with Bootstrap 3. Bootstrap Grid System

Computational statistics, lecture3 Resampling and the bootstrap Generating random processes The bootstrap Some examples of bootstrap techniques

Xito BootStrap Developers Guidexito.sourceforge.net/documentation/BootStrap_Dev_Guide.pdfXito BootStrap Developers Guide prepared by: Deane Richan Covers Version: ... Bootstrap also

BUSINESS APPLICATIONS SOLUTION (BAS) …...BAS TOWN HALL AGENDA Part I – 4 W's of BAS • What is BAS • Why we are doing BAS • Who is involved • When is BAS Part II – Next

bootstrap-datepicker Documentation · bootstrap-datepicker Documentation, Release Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. This is a fork

Survey bootstrap and bootstrap weights - Stata bootstrap Stas Kolenikov U of Missouri Resampling inference Survey inference bsweights Examples Conclusions References Survey bootstrap

Resampling and the Bootstrap - Bioconductor › help › course-materials › 2003 › NGFN03 › resampling.pdfResampling and the Bootstrap 6 The Bootstrap Efron’s bootstrap is

What is moodle bootstrap

Title stata.com bootstrap — Bootstrap sampling and estimation · bootstrap— Bootstrap sampling and estimation 5 eform option causes the coefficient table to be displayed in exponentiated

BAS-311HN BAS-326H BAS-341H BAS-342H BAS …...created the “Brother Green Label”. BAS-311HN/BAS-326H/341H/342H are certified as an environment-conscious sewing machine according

Introduction to Moodle: Lesson 2 The Moodle Gradebook€¦ · Moodle Lesson 2 – The Moodle Gradebook 1 September 6, 2011 Introduction to Moodle: Lesson 2 The Moodle Gradebook Using

Moodle Manual - ezrauniversity.comezrauniversity.com/moodle/pdf/Moodle Manual_For Students_vol1.pdf · Getting Started: Logging via Moodle Mobile App The Moodle Mobile App is available

Moodle Transition: Moving Content from Moodle 1 to Moodle 2

BAS-311E INSTRUCTION MANUAL BAS-311EL BAS … BAS-311E, -311EL...BAS-311EL BAS-326E tf:IMJ:t&,iiili(I 7 -i±*i) i:. Cl.)iltll.ijil~iWC/\1 c1J' 5, -~~

Moodle Wonderland - Moodle success at ULCC

Bootstrap Layout Komponenteneberhart.media/pdfs/bootstrap/7_bootstrap_layout... · 2017-02-06 · Eberhart 7_bootstrap_layout_components.docx 1 Bootstrap – Layout Komponenten Erstelle