Reusability, Interoperability, Accessibility, Durability 4. Single source

Responsive Course Design is a set of tools and techniques that requires three key features to be implemented so that the learning content can be restructured ...
5MB taille 3 téléchargements 256 vues
1. Responsive Course Design is a set of tools and techniques that requires three key features to be implemented so that the learning content can be restructured and adjusted to fit different screen sizes and resolutions

2. Flexible

1. Media queries and media query listeners : Can be thought of as: if this size, then this style.

images and media : Adapt images and other media through dynamic resizing to load proportionally depending on the device.

2. m-Learning Object: Reusability, Interoperability, Accessibility, Durability

3. Fluid

grid layout : Allows for the learning content to resize and rearrange as the relative widths of a webpage grid expands or contracts.

3. Mobile Browser Compatibility Test Opera Firefox for for Android Android HTML 5.0 √ √ CSS 3.0 √ √ Canvas √ √ Tables √ √ JavaScript √ √ Image √ √ Audio √ √ Video √ √ XML √ √ XSLT √ √ MathML √  SVG √ √ AJAX √ √ SMIL √ √ Base64 √ √ ACID3 √ √

Safari iOS √ √ √ √ √ √ √ √ √ √ Θ √ √ √ √ √

Chrome for Android √ √ √ √ √ √ √ √ √ √ ᵖ √ √ √ √ √

IE

Android browser

Opera Mini

√ √ √ √ √ √ √ √ √ √ ᵖ √ √  √ Θ

√ √ √ √ √ √ √ √ √ √  √ √ √ √ √

√ √ √ √ √ √ √ √    √   √ Θ

Θ - partial ; √ - yes ; × - no ; ᵖ - plug-in

4. Single source for multiple outputs with template-based learning content production XML-based Template Strucure ................ ................ ................ ................ ................ ................ ................ ................

Media Queries <meta name="viewport" content="width=device-width, initial-scale=1.0/> ..........................

SVG