-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
249 lines (222 loc) · 18.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
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Build a Virtual World!</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An activity for building your VR experience">
<meta name="author" content="Mozilla Campus Clubs">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<!-- github calendar css -->
<link rel="stylesheet" href="assets/plugins/github-calendar/dist/github-calendar.css">
<!-- github acitivity css -->
<link rel="stylesheet" href="assets/plugins/github-activity/src/github-activity.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Tag Manager -->
<script type="text/javascript" src="assets/plugins/dnt-helper.js"></script>
<script type="text/javascript" src="assets/js/gtm.js"></script>
</head>
<body>
<!-- ******HEADER****** -->
<header class="header">
<div class="container">
<img class="profile-image img-responsive pull-left" src="assets/images/profile.png" />
<div class="profile-content pull-left">
<h1 class="name">Build a Virtual World!</h1>
<h2 class="desc">in less than an hour</h2>
</div><!--//profile-->
</div><!--//container-->
</header><!--//header-->
<div class="container sections-wrapper">
<div class="row">
<div class="primary col-md-8 col-sm-12 col-xs-12">
<section class="about section">
<div class="section-inner">
<h2 class="heading">Introduction</h2>
<div class="content">
<p>Virtual Reality is a rapidly growing technology with the potential to change the way we experience the web as a whole. With a huge number of applications, it is useful for both fun activities as well as serious research for the benefit of the open web.</p>
<p>Help bring this new kind of open technology to the web by learning and using an awesome open source web framework, A-FRAME, with HTML! Lead your Club to create Virtual Reality experiences that plays right in your web browser and is supported by Vive, Rift, desktop and mobile platforms. If this is your first time running a meeting check out the <a href="https://docs.google.com/document/d/1zOAwPsBnsXm5CYryRFvh-FttmbKF9lgqXXs12Uwrbso/pub">Great Meeting Planning Guide</a> before getting started.</p>
<p><b>Your Mission: learn the basics of A-Frame so that your Club can create a virtual version of your University.</b> Are you ready?</p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="latest section">
<div class="section-inner">
<h2 class="heading">Introduce Web VR & A-Frame</h2>
<div class="content">
<div class="item featured text-center">
<div class="featured-image">
<img class="img-responsive project-image" src="assets/images/vr.png" alt="project name" />
</a>
<div class="ribbon">
<div class="text">New</div>
</div>
</div>
<div class="desc text-left">
<p>This activity will help your Club build your first VR experience! But first you need to <b>get your members excited about Web VR and A-Frame.</b></p>
<p>WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.</p>
<p>A-Frame is a web framework for building virtual reality experiences. It was created by Mozilla VR to make WebVR content creation easier, faster, and more accessible.</p>
<p>A-Frame lets you build scenes with just HTML while having unlimited access to JavaScript, three.js, and all existing Web APIs. A-Frame uses an entity-component-system pattern that promotes composition and extensibility. It is free and open source with a welcoming community and a thriving ecosystem of tools and components.</p>
<p>There are a few options for introducing your team to Web VR & A-Frame, take a look and choose the one that will work best for you and your club.</p>
<br>
<h4 class="title">Share a slide presentation<span class="place"></h4>
<p>Use this slide deck as is, or customize it to make it your own. Going through this will teach you everything you need to lead this activity with your club.</p>
<a class="btn btn-cta-secondary" href="https://aframe.io/aframe-presentation-kit" target="_blank">Intro to A-Frame Deck</a>
</div><!--//desc-->
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">Get Started</h2>
<div class="content">
<div class="item">
<p class="summary">Now your Club is fired up and ready to go, we invite you to go through this A-frame getting started activity (it will take you less than an hour) either as individuals or together as a group and then and come back to start building your VR experience.</p>
</div><!--//item-->
<div class="item">
<h4 class="title"><a href="https://docs.google.com/presentation/d/1qJwr_JwPtbcUx5E09eeJrpa2eXYN7ovmhsv4L27cjeo/present#slide=id.g2102afdc78_0_23">Activity's Slidedeck</a> <span class="label label-theme">Facilitator</span></h4>
<p class="summary">As the activity's facilitator open and share this slidedeck so your Club can go through the activity together.</p>
<p><a class="more-link" href="https://docs.google.com/presentation/d/1qJwr_JwPtbcUx5E09eeJrpa2eXYN7ovmhsv4L27cjeo/present#slide=id.g2102afdc78_0_23" target="_blank"><i class="fa fa-external-link"></i>Activity's Slidedeck</a></p>
</div><!--//item-->
<div class="item">
<h3 class="title">Fork our Repo <span class="label label-theme">Students</span></h3>
<p class="summary">For going through the activity, students have to fork our GitHub repository and start working on the examples one by one. <b>This requires you to be familiar with the tool Git and the GitHub ecosystem.</b> In the Campus Clubs <a href="https://campus.mozilla.community/activities/#learn">learning activities</a> you can find two activities for mastering Git and learning how to contribute to Open Source on GitHub.</p>
<br>
<!-- Place this tag where you want the button to render. -->
<a class="btn btn-cta-secondary fork" href="https://github.com/mozillacampusclubs/Build-a-Virtual-World---examples/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/mozillacampusclubs/Build-a-Virtual-World---examples/network" data-count-api="/repos/mozillacampusclubs/Build-a-Virtual-World---examples#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork mozillacampusclubs/Build-a-Virtual-World---examples on GitHub">Fork</a>
<p>Now that you forked the repo, download it in your computer and open the example one by one, following the instructions in them and on the presenter.</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Challenge</h2>
<div class="content">
<div class="item">
<p>Now that you have completed the get started activity and customized the available examples it's time for you to build your own VR experience.</p>
</div><!--//item-->
<div class="item">
<h3 class="title">Build your University in VR<span class="place"></h3>
<p>Combine what you just learned and build your University in Virtual Reality. A gray cube can be a building, a cylinder can be a tower building. Just use your imagination and combine all the A-Frame entities you just learned! You can build a part of your university (a classroom, the gym) or even the whole Campus! It's up to you and your imagination!</p>
<p><b>Bonus:</b> Can't find the component you need? Take your skills and your contributions to the open web to the next level by <a href="https://aframe.io/docs/master/core/component.html">building your own component</a>.</p>
</div><!--//item-->
<div class="item">
<h3 class="title">Accept the challenge<span class="place"></h3>
<ol>
<a class="btn btn-cta-secondary fork" href="https://github.com/mozillacampusclubs/build-a-vr-world---challenge/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/mozillacampusclubs/build-a-vr-world---challenge/network" data-count-api="/repos/mozillacampusclubs/build-a-vr-world---challenge#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork mozillacampusclubs/build-a-vr-world---challenge on GitHub">Fork</a>
<li>Fork the Challenge's repo and download the repo into your computer.</li>
<li>Create a new HTML file and name it after what you want to build. For example: AustriaUnibuilding.html.</li>
<li>After you complete building your University in VR commit your changes.</li>
<li>Open a pull request in our Repo.</li>
</ol>
</div><!--//item-->
<p>Congratulations! You just learned and created a open VR web experience in less than an hour! </p>
<p>Are you ready for the next challenge on VR gaming? <span class="label label-theme">coming soon!</span></p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">What you will build</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p><i class="fa fa-quote-left"></i>WebVR is bringing an amazing technology right to your web browser and using A-Frame is surprisingly easy to build supercool Virtual Reality websites from scratch in just a few minutes - Not kidding.</p>
</blockquote>
<p class="source"><span class="name">Srushtika Neelakantam</span><br /><span class="title">Undergrad Computer Science Student & WebVR book author</span></p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="skills aside section">
<div class="section-inner">
<h2 class="heading">Skills </h2>
<div class="content">
<p class="intro">
Skills and time required for running this activity
<div class="skillset">
<div class="item">
<h3 class="level-title">HTML<span class="level-label" data-toggle="tooltip" data-placement="left" data-animation="true" >Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="40%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Javascript <span class="level-label">Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Time<span class="level-label">1 hour</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h2 class="heading">Requirements & Resources</h2>
<ul>
<li><a href="https://aframe.io/docs/0.4.0/introduction/getting-started.html" target="_blank">Intro to A-Frame</a></li>
<li><a href="https://aframe.io/docs/0.4.0/guides/" target="_blank">Building blocks with A-Frame</a></li>
<li><a href="https://docs.google.com/presentation/d/1qJwr_JwPtbcUx5E09eeJrpa2eXYN7ovmhsv4L27cjeo/present#slide=id.g2102afdc78_0_23">Facilitators slidedeck</a></li>
<li>A projector</li>
<li>Laptops (1 per person)</li>
<li>Google Cardboard (optional)</li>
<li>Your favorite text editor</li>
</ul>
</div><!--//item-->
</div>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<!-- ******FOOTER****** -->
<footer class="footer">
<div class="container text-center">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="campus.mozilla.community" target="_blank">Mozilla Campus Clubs</a> for all University Students</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-rss/dist/jquery.rss.min.js"></script>
<!-- github calendar plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-calendar/dist/github-calendar.min.js"></script>
<!-- github activity plugin -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-activity/src/github-activity.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>