-
Notifications
You must be signed in to change notification settings - Fork 3
/
notes-en.html
249 lines (161 loc) · 14.1 KB
/
notes-en.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Canada Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teens Learning Code: VR with A-Frame
##Instructor Notes
* <a href="#slide2" target="_self">Notes for full day (6 hour) workshop</a>
* <a href="#slide3" target="_self">Notes for 2 hour visit</a>
</script>
</section>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teens Learning Code: VR with A-Frame
##Instructor Notes
##6 hours
<br>
#Schedule
**Intro to VR (45 min):** Coders' Code, What is Code, Today's Project, What is VR + AR, Why create VR, What is WebVR, Artist Profile.
**Intro + Code Along in A-Frame (1 hour):** Exploring examples, Primitives, Creating an account, Setting up Glitch, Code Along challenges + Sharing solutions.
**Building + Customizing our Virtual Spaces (1 hour):** Finding + saving assets, Asset management system, Adding backgrounds, primitives, and textures.
**Lunch (1 hour):** Usually lunch is scheduled around 12:30/45, but sometimes the food arrives later. Break whenever you need to - You can just continue where you left off.
**Adding Interactivity (30 min):** Animating on events, Finding + saving audio, Adding audio.
**Special Effects (1 hour 15 min):** A-Frame Regitry, Adding components, Inspecting the scene, Testing + applying changes, Work session - experimenting with components.
**DEMOS + Closing (30 min)** Save and share projects, set up VR viewer stations, Rotate through and explore projects, Next steps, Learning outcomes, Wrap-up.
<br>
#Materials + Special Requirements
* If learners want to save their projects, they will need an email address to create a free Glitch account.
* Google Cardboard or other VR viewers for DEMOS (ideal ratio = 1 viewer: 2 learners)
<br>
#Contingency
If you do not have access to the internet, use the following modifications:
* Copy over learner files onto all computers (link on Welcome slide).
* Ensure that [Atom](http://atom.io) is installed on all computers.
* Have learners add the `offline-starter-code` project folder in Atom.
* Learners can preview their project by opening the starter code `index.html` in their browser.
* Use the images in the `assets` folder as textures.
* Unzip the `aframe-documentation` folder and reference this instead of the online documentation.
* Skip working with the Registry.
* Spend more time sharing projects. Have learners bring their laptops to the front to share on the projector.
* If possible, install a few VR apps on phones for the VR Viewers section. [Here are some recommended VR apps](https://docs.google.com/document/d/1_Uo_07zebpE7xwZWkCsECMCbnfwh3N57JqCZGwnDPmo/edit?usp=sharing).
* Please remind learners to save often!
<br>
#Notes:
**Introductions (Slide 3):**
Have mentors stand up and introduce themselves with their name and pronouns.
Have learners introduce themselves to their table groups and answer an icebreaker question, for example: "If you could travel anywhere in the world, where would you want to go?"
**Today's Project (Slide 8):**
This is an example of what we could make (virtual ice cream cone!). Learners can create this or whatever virtual world they can imagine.
**VR (slide 10) & AR (slide 11):** Show each of the examples linked.
**Think, Pair, Share: Why Create Virtual Experiences? (Slide 12):** Give learners time to think and write down ideas before sharing with 1-2 other people. Use a timer like [timer-tab.com](http://timer-tab.com) to time 2 minutes. Once the time is up, have a few people share their ideas with the entire class.
**Some Considerations (Slide 13):** Discuss these potential downsides to VR. Has anyone experienced motino sickness from VR? How affordable are most VR systems or games? Any other considerations to keep in mind?
**Artist Profile (slide 16-17):** Share an example artist (Scott) that uses VR to create immersive experiences. Watch the video clip of his example - keeping in mind that this is just a recording of the project, not the actual VR experience.
For pronounciation of Benesiinaabandan, see http://www.native-languages.org/ojibwe_guide.htm (estimated pronounciation: Bay-nay-seen-aww-buhn-duhn).
Ask learners: What stood out? What do you think is going on in this piece? (Here's a video of Scott explaining what it is about: [https://vimeo.com/247365954](https://vimeo.com/247365954))
**Intro to A-Frame (slide 19):** Direct learners to the aframe.io website and give them 5-10 minutes to explore the example projects. Use the WASD or arrow keys + mouse to navigate.
**Getting Started (slide 20):** Learners will need an email address to create a (free) account.
In the case where participants don't have an email address and aren't comfortable creating one, Glitch will save a cached version of their website in their browser, but only temporarily. They will not be able to continue their project later unless they create an account and log in.
Optional login info for instructors:<br>
*Username:* teenslc-toronto<br>
*Password:* Helloteens123
**What do you see? (slide 23):** Learners should have some experience with HTML & CSS (as a prerequisite). Some of these HTML elements and formatting should look familiar, otherwise review using slide 26.
**Challenge (slide 26):** Give learners 10 minutes to tinker with the starter code and complete as many of these challenges as they can.
Have volunteer learners come up to the front to share their solutions.
**Assets (slide 29):** It might take some time for learners to decide on and download assets. To save time, instruct learners to download ONE background images and ONE texture to start. They can always download more later.
Learners can also use the ice cream texture images found in the learner files.
**Adding Audio (slide 38-39):** Note that audio can be a bit tricky. It doesn't always work when viewing on mobile (e.g. when we use the VR Viewers). - Just to set expectations appropriately when we pull out the VR viewers.
**More Registry Options (slide 46):** Walk learners through adding `id`s to name their primitives (see Tip).
**Work Session (slide 47)**: Learners can choose which components they want to experiment with. The more the better! Ideally, after this work session, projects will look even more unique, and there will be some variety in DEMOS when we share projects with each other.
Leave this slide up and walk around the classroom to support, as needed. You may also need to demonstrate an additional component example if the class is having trouble working with the registry.
**Experience your Virtual World! (slide 49):** Give learners time to set up and experience their own projects using VR Viewers before sharing with others. Mentors can each 'own' a viewer to help with sharing them equally. If loaner phones aren't available, learners and mentors can connect to the internet on their own mobile devices (whoever has them and is comfortable).
**DEMOS (slide 50):** Have learners set up their projects on the VR Viewers viewers as stations in the classroom and provide 15-20 minutes for learners to experience each other's virtual worlds.
**Next Steps (slide 51):** Treat the Take-Home Exercise as a stretch goal if you have any time remaining.
</script>
</section>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teens Learning Code: VR with A-Frame
##Instructor Notes
##2 hours
<br>
#Schedule
**Introduction + Code Along (45 min):** Today's Project, Artist Profile, What is VR, Intro to A-Frame, Setting up Glitch, HTML Recap, Primitives, Code-Along Challanges.
**Main Activity: Building our Virtual World (45 min):** Asset management system, Backgrounds, Textures, Adding objects. (Stretch goal: animation)
**DEMOS + Closing (30 min)** Setting up VR viewers, Exploring projects, (Optional: Create accounts to save project), Learning outcomes.
<br>
#Materials + Special Requirements
* If learners want to save their projects, they will need an email address to create a free Glitch account.
* Google Cardboard or other VR viewers for DEMOS (ideal ratio = 1 viewer: 2 learners)
<br>
#Contingency
If you do not have access to the internet, use the following modifications:
* Copy over learner files onto all computers (link on Welcome slide).
* Ensure that [Atom](http://atom.io) is installed on all computers.
* Have learners add the `offline-starter-code` project folder in Atom.
* Learners can preview their project by opening the starter code `index.html` in their browser.
* Use the images in the `assets` folder as textures.
* Unzip the `aframe-documentation` folder and reference this instead of the online documentation.
* If possible, install a few VR apps on phones for the VR Viewers section. [Here are some recommended VR apps](https://docs.google.com/document/d/1_Uo_07zebpE7xwZWkCsECMCbnfwh3N57JqCZGwnDPmo/edit?usp=sharing).
* Please remind learners to save often!
<br>
#Notes:
**Today's Project (Slide 6):**
Open link to project. This is an example of what we could make (virtual ice cream cone!). Learners can create this or whatever virtual world they can imagine.
**Artist Profile (slide 7-8):** Share an example artist (Scott) that uses VR to create immersive experiences. Watch the video clip of his example - keeping in mind that this is just a recording of the project, not the actual VR experience.
For pronounciation of Benesiinaabandan, see http://www.native-languages.org/ojibwe_guide.htm (estimated pronounciation: Bay-nay-seen-aww-buhn-duhn).
Ask learners: What stood out? What do you think is going on in this piece? (Here's a video of Scott explaining what it is about: [https://vimeo.com/247365954](https://vimeo.com/247365954))
**VR (slide 10):** Show each of the examples linked.
**Intro to A-Frame (slide 12):** WebVR is VR that we can build and experience in our browser.
**Remix the Starter project (slide 13):** Glitch will save a cached version of their website in their browser, but only temporarily. They will not be able to continue their project later unless they create an account and log in.
See slide at the end of the workshop on how to optionally create an account and save.
Optional login info for instructors:<br>
*Username:* teenslc-toronto<br>
*Password:* Helloteens123
**What do you see? (slide 15):** Learners should have some experience with HTML & CSS (as a prerequisite). Some of these HTML elements and formatting should look familiar, otherwise review using slide 16.
**Challenge (slide 18):** Give learners 5 minutes to tinker with the starter code and complete as many of these challenges as they can.
Have volunteer learners come up to the front to share their solutions.
**Experience your Virtual World! (slide 25-26):** Give learners time to set up and experience their own projects using VR Viewers before sharing with others. Mentors can each 'own' a viewer to help with sharing them equally. If loaner phones aren't available, learners and mentors can connect to the internet on their own mobile devices (whoever has them and is comfortable).
**DEMOS (slide 27):** Have learners set up their projects on the VR Viewers viewers as stations in the classroom and provide 10-15 minutes for learners to experience each other's virtual worlds.
**Optional: Sign in to save (slide 28):** If you have time, or want to make time, learners can continue editing their project by creating an account and savinging their project. They can rename their project once they have logged in to save. If that doesn't work, they can also Remix a copy of the original project.
</script>
</section>
</main><!-- cls main section -->
<script src="framework/scripts/jquery-1.11.0.min.js"></script>
<script src="framework/scripts/slideshow.js"></script>
<!-- Uncomment the plugins you need -->
<script src="framework/scripts/plugins/css-edit.js"></script>
<script src="framework/scripts/plugins/css-snippets.js"></script>
<script src="framework/scripts/plugins/css-controls.js"></script>
<!-- <script src="plugins/code-highlight.js"></script>-->
<script src="framework/scripts/plugins/markdown/marked.js"></script>
<script src="framework/scripts/plugins/markdown/markdown.js"></script>
<script src="framework/scripts/plugins/highlight/highlight-8.4.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="framework/scripts/llc.js"></script>
<script>
var slideshow = new SlideShow();
// Grabs all the .snippet elements
var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
new CSSSnippet(snippets[i]);
}
</script>
</body>
</html>