forked from fluid-project/floeproject.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (298 loc) · 22.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Paving the way toward inclusive Open Education Resources | floe</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon"/>
<!-- Foundation flex grid -->
<link href="lib/foundation/foundation.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="lib/infusion/src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="lib/infusion/src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="lib/infusion/src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="lib/infusion/src/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="lib/infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />
<!--[if lte IE 8]>
<script type="text/javascript">document.createElement("header")</script>
<script type="text/javascript">document.createElement("nav")</script>
<script type="text/javascript">document.createElement("footer")</script>
<script type="text/javascript">document.createElement("section")</script>
<script type="text/javascript">document.createElement("aside")</script>
<![endif]-->
<script type="text/javascript" src="lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="js/floe.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
floe.setupUIO();
});
</script>
<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<!--
This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
A separate panel bar for mobile displays is needed to preserve the correct tab order.
-->
<div class="fl-panelBar fl-panelBar-smallScreen">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
<!-- This is the div that will contain the Preference Editor component -->
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<!--
This div is for the sliding panel bar that shows and hides the Preference Editor controls in the desktop view.
A separate panel bar for desktop displays is needed to preserve the correct tab order.
-->
<div class="fl-panelBar fl-panelBar-wideScreen">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
</div>
<!-- END markup for Preference Editor -->
<div id="skip">
<a href="#content">Skip to Content</a>
</div>
<div class="floe">
<div class="row">
<div class="columns small-12 medium-12 large-7">
<header class="floe-header">
<h1><a rel="home" title="Home" href="index.html" class="floe-header-logo">floe
<span class="floe-header-tagline">
flexible learning for open education
</span></a>
</h1>
</header>
</div>
<div class="columns small-12 medium-12 large-5 align-self-bottom">
<nav class="floe-nav">
<ul>
<li><a href="./news/index.html">News</a></li>
<li><a href="./resources.html">Resources</a></li>
<li><a href="./ui-options.html">UI Options</a></li>
</ul>
</nav>
</div>
</div>
<div id="content" class="floe-content floe-story">
<div class="flc-toc-tocContainer toc"> </div>
<div class="row">
<div class="columns large-6 small-12">
<h2>Designing for Diverse Learners.</h2>
<p>FLOE provides the resources to personalize how we each learn and to address barriers to learning.
Learners learn differently, and today’s society needs diverse, self-aware, life-long learners.
FLOE supports learners, educators and curriculum producers in achieving one-size-fits-one learning design
for the full diversity of learners, leveraging the variants made possible by
<a href="http://www.hewlett.org/programs/education/open-educational-resources">Open Education Resources</a> (OER).</p>
<p>FLOE is led by the <a href="http://idrc.ocadu.ca">Inclusive Design Research Centre</a>
and applies <a href="http://idrc.ocad.ca/index.php/resources/idrc-online/library-of-papers/443-whatisinclusivedesign">Inclusive Design</a> to open learning.</p>
</div>
<div class="columns large-6 small-12">
<h2>Watching a video in a loud room, reading in Braille, writing using an alternative keyboard or learning a new language?</h2>
<p>Being able to transform, augment, and select alternative educational resources to fit individual needs is essential for
an inclusive learning experience. Open Educational Resources (OERs) are free and open for use and reuse in teaching,
learning and research. The OER ecosystem can provide an ever-increasing pool of alternative ways to learn.
FLOE helps to build knowledge about what works best for each learner.</p>
</div>
</div>
<div class="row">
<div class="columns large-6 small-12">
<div class="floe-image floe-image-UIO"></div>
<h2>Want to select, refine and apply your preferences?</h2>
<p>Preference editing tools help learners personalize their learning experience.
<a href="http://build.fluidproject.org/infusion/demos/prefsFramework/">UI Options</a>
allows selection and fine-tuning of preferences. <a href="./ui-options.html">Learn more</a> about adding it to your site or application.</p>
</div>
<div class="columns large-6 small-12">
<div class="floe-image floe-image-exploreTool"></div>
<h2>Not sure how you learn best?</h2>
<div>
<p>The <a href="https://build.fluidproject.org/first-discovery/demos/">First Discovery Tool</a>
helps newcomers learn about what kinds of personalizations are possible, and what might work for them.</p>
<p>The <a href="http://build.fluidproject.org/prefsEditors/demos/explorationTool/">Preference Exploration Tool</a>
offers a set of starter preferences to try - from reading content aloud so it's easier to follow along,
to enhancing keyboard interactions so it's easier to use.</p>
<p>The <a href="https://wiki.fluidproject.org/x/CQHBAg">My Lifelong Learning Lab</a>
helps learners keep track of their progress, and personalize their learning goals and
learning experience through self-reflection.</p>
</div>
</div>
</div>
<div class="row floe-close-top">
<div class="columns large-6 small-12 large-order-1 small-order-2">
<p class="floe-space-above">The
<a href="prefsEditors.html" name="link-to-screen-cast">Preference Management Tools</a>
support portable preferences - you can apply preferences across devices, resources and
learning applications using the <a href="http://gpii.net">Global Public Inclusive Infrastructure</a>.
The GPII <a href="security.html">security architecture</a> gives you complete control over
who has access to your preferences.
</p>
</div>
<div class="columns large-6 small-12 large-order-2 small-order-1">
<div class="floe-image floe-image-cloud"></div>
</div>
</div>
<div class="row">
<div class="columns large-6 small-12 large-order-1 small-order-2">
<div class="floe-image floe-image-videoPlayer"></div>
</div>
<div class="columns large-6 small-12 large-order-2 small-order-1">
<h2>Looking for help making rich content more inclusive?</h2>
<p>The
<a href="http://build.fluidproject.org/videoPlayer/demos/Mammals.html">HTML5 Video Player</a>
offers full keyboard access, captions, transcripts, descriptions and responds to personal user preferences.
Learners can request missing captions, descriptions and transcripts, or create them.</p>
<p>Floe is also developing a
<a href="https://wiki.fluidproject.org/display/fluid/%28Floe%29+Sonification">sonification framework</a>
that will help OER developers more easily create sound-based representations of interactive data
that can increase comprehension and reinforce learning.
</p>
<p>The <a href="http://build.fluidproject.org/chartAuthoring/demos/">Chart Authoring</a> tool demonstrates
how audio can enhance comprehension of data.
</p>
</div>
</div>
<!--
This framework is being used to add audio respresentations
of data to our <a href="http://build.fluidproject.org/chartAuthoring/demos/">Chart Authoring Tool</a>.</p>
-->
<div class="row">
<div class="columns large-6 small-12 large-order-1 small-order-2">
<div class="floe-image floe-image-preferenceIcons"></div>
</div>
<div class="columns large-6 small-12 large-order-2 small-order-1">
<h2>Need guidance in designing accessible resources?</h2>
<p>The <a href="http://handbook.floeproject.org/">Inclusive Learning Design Handbook</a>
is an expanding source of guidance, tools and tips for producing inclusively designed learning resources,
including guidelines for creating
<a href="http://handbook.floeproject.org/InclusiveEPUB3.html">inclusive EPUB 3 resources</a>,
<a href="http://handbook.floeproject.org/AccessibleStandardizedTesting.html">accessible standardized tests</a>, and
<a href="http://handbook.floeproject.org/WebGamesAndSimulations.html">inclusive web games and simulations</a>.</p>
<p>Floe has created <a href="http://guide.inclusivedesign.ca/">The Inclusive
Design Guide</a> - an engaging and evolving resource for learning about and applying Inclusive Design principles, practices,
and tools to the design process.
</p>
<p>The <a href="http://metadata.floeproject.org/demos/metadata/">Metadata Editor</a>
makes it simple to provide useful labels regarding the learner preferences the resource can meet,
and supports authors in adding accessibility features.
The <a href="http://metadata.floeproject.org/demos/feedback/">Feedback Tool</a>
allows users to help in the refinement of content and its metadata.</p>
<p>Floe has added a <a href="https://github.com/fluid-project/infusion-docs/blob/master/src/documents/TextToSpeechAPI.md">text-to-speech component</a>
to the Infusion JavaScript framework. The component uses browser-based speech synthesis
to provide self-voicing capabilities to web resources.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2>See Also</h2>
<a href="http://wiki.fluidproject.org/display/fluid/Floe">Floe Wiki</a>
<p>Resource for Floe design, development & project planning</p>
<a href="https://github.com/fluid-project/">Floe on Github</a>
<p>Repository of all Floe source code</p>
</div>
</div>
</div>
<div class="floe-bottom-content">
<div class="floe-content row">
<div class="columns large-6 small-12">
<div>
<h3>Partnerships</h3>
<dl>
<dt><a href="http://phet.colorado.edu//">PhET</a></dt>
<dd>Floe is working with PhET to improve the accessibility of their interactive simulations, <a href="https://wiki.fluidproject.org/x/AgDsAg">improving designs for accessibility</a>.</dd>
<dt><a href="http://outside-in.idrc.ocadu.ca/">Outside-IN</a></dt>
<dd>Outside-IN provides individualized youth training and mentorship programs. Floe is working with Outside-IN, creating tools to support youth engagement.</dd>
<dt><a href="http://raisingthefloor.org/">Raising the Floor</a></dt>
<dd><a href="http://gpii.net/">The Global Public Inclusive Infrastructure (GPII)</a>, a project of Raising the Floor, is building upon the foundation of Learner Options to create preference editing tools. This global project makes extensive use of <a href="https://github.com/fluid-project/infusion-docs/">Fluid Infusion</a>.</dd>
<dt><a href="http://wiki.gpii.net/index.php/Developer_Space">Prosperity4All Developer Space</a></dt>
<dd>Floe is working with the GPII on the development of the Prosperity4All Developer Space (D-Space), which will support developers in finding, using, and contributing to inclusive software development.</dd>
<dt><a href="https://pressbooks.com/">Pressbooks</a></dt>
<dd>Collaborating on accessible content and themes</dd>
<dt><a href="http://www.oercommons.org">OER Commons</a></dt>
<dd>OER Commons has integrated Learner Options across their entire site and has also integrated the Floe designs for content authoring in Open Author.</dd>
<dt><a href="http://oerpub.org/">OERPUB</a></dt>
<dd>OERPUB is using the Floe Video Player and Metadata Author to create rich, customizable learning content.</dd>
<dt><a href="http://cnx.org/">Connexions</a></dt><dd></dd>
<dt><a href="http://www.merlot.org/merlot/index.htm">MERLOT</a></dt><dd></dd>
<dt><a href="http://www.ocwconsortium.org/">Open Courseware Consortium</a></dt><dd></dd>
</dl>
</div>
</div>
<div class="columns large-6 small-12">
<div>
<div class="floe-front-news">
<h3>News</h3>
<h4><a href="./news/2019-11-05-Design-2-Align.html">Design-2-Align curriculum alignment in crisis contexts</a></h4>
<time class="floe-date" datetime="2019-11-05">November 5, 2019</time>
<p>
In October the IDRC participated in a three-day hackathon in San Francisco focused on aligning
primary and secondary curriculum in crisis contexts.
</p>
<p><a href="./news/2019-11-05-Design-2-Align.html">Read more: Design-2-Align curriculum alignment in crisis contexts</a></p>
<h4><a href="./news/2019-10-23-SJRK-F2F.html">Stories from the Social Justice Repair Kit</a></h4>
<time class="floe-date" datetime="2019-10-23">October 23, 2019</time>
<p>
On October 17th, the
<a href="https://www.sojustrepairit.org/">Social Justice Repair Kit</a>
project met to reflect on the past three years of work, creating
<a href="http://stories.sojustrepairit.org/">stories</a> to capture their experiences on the project.
</p>
<p><a href="./news/2019-10-23-SJRK-F2F.html">Read more: Stories from the Social Justice Repair Kit</a></p>
<h4><a href="./news/2019-08-12-Coding-Prototype-Co-design.html">Co-design at Summer Coding Camps</a></h4>
<time class="floe-date" datetime="2019-08-12">August 12, 2019</time>
<p>
Floe participated in Summer Coding Camps where students used a coding environment prototype,
markers, paint and robots to create artworks.
</p>
<p><a href="./news/2019-08-12-Coding-Prototype-Co-design.html">Read more: Co-design at Summer Coding Camps</a></p>
<h4><a href="./news/2019-07-02-Guelph-accessibility-conference.html">Floe at the University of Guelph Accessibility Conference</a></h4>
<time class="floe-date" datetime="2019-07-02">July 2, 2019</time>
<p>
On May 28 and 29, Floe made an appearance at the 2019 <a href="https://opened.uoguelph.ca/accessibility-conference">Accessibility Conference</a> put on by <a href="https://opened.uoguelph.ca/">Open Learning and Educational Support</a> at the <a href="https://opened.uoguelph.ca/">University of Guelph</a>.
</p>
<p><a href="./news/2019-07-02-Guelph-accessibility-conference.html">Read more: Floe at the University of Guelph Accessibility Conference</a></p>
</div>
</div>
</div>
</div>
</div>
<footer class="floe-footer">
<div class="floe-content row">
<div class="columns large-6 small-12">
<div>
<p>
Floe is a project of the
<a href="http://idrc.ocadu.ca">Inclusive Design Research Centre</a>, <a href="http://ocadu.ca">OCAD University</a>.<br/>
</p>
<p>
<span class="floe-hewlett-logo">Funded by a grant from <a href="http://www.hewlett.org">The William and Flora Hewlett Foundation</a>.</span>
</p>
</div>
</div>
<div class="columns large-6 small-12">
<div>
<address>
205 Richmond St. W., Second Floor<br/>
Toronto, Ontario, Canada<br/>
M5V 1V3<br/>
Telephone: (416) 977-6000 #3968<br/>
Fax: (416) 977-9844
</address>
<p>
<a href="mailto:[email protected]">Jutta Treviranus</a> Principal Investigator, Director and Professor<br/>
<a href="mailto:[email protected]">Jess Mitchell</a> Senior Manager, Research and Development<br/>
<a href="mailto:[email protected]">Colin Clark</a> Lead Software Architect
</p>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>