-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (173 loc) · 9.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ScratchCardResources</title>
<!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
<!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
<!--[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]-->
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">ScratchCardResources</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#create">Create a ScratchCard</a></li>
<li><a href="#examples">View Examples</a></li>
<li><a href="/workshop"><span class="glyphicon glyphicon-education" aria-hidden="true"></span> Scratch@MIT2016 Workshop Agenda</a></li>
</ul>
<div class="form-group">
<form class="navbar-form navbar-right">
<div class="btn-group" role="group" aria-label="Discuss">
<p class="btn btn-default navbar-btn labeling btn-xs"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Discuss</p>
<button type="button" class="btn btn-default navbar-btn btn-xs"><a href="https://scratch.mit.edu/discuss/topic/210905/">on Scratch</a></button>
<button type="button" class="btn btn-default navbar-btn btn-xs"><a href="http://scratched.gse.harvard.edu/discussions/teaching-scratch/how-do-you-share-your-scratch-experiences">on ScratchEd</a></button>
</div>
<div class="g-ytsubscribe btn-sm" data-channel="ScratchCardResources" data-layout="default" data-theme="dark" data-count="hidden"></div>
</form>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row" style="margin-top:5em">
<div class="col-sm-8">
<div class="page-header">
<h1>ScratchCardResources <br />
<small>custom-made Scratch cards with videos</small></h1>
</div>
<p>
Scratchers love to articulate where they got stuck and how they got unstuck on a project, but often that wonderful experience goes unshared and could really be helpful to someone else.
We’re excited that <a href="https://scratch.mit.edu/discuss/topic/181832/">Scratch's new project recording feature</a> will allow users to visually share breakthroughs on <a href="https://www.youtube.com/user/ScratchCardResources/">our YouTube channel</a> and connect users across shared interests.
We encourage you to create your own ScratchCard, using our <a href="https://docs.google.com/document/d/1owKhqqXq9GLHrjbf8BW3q0mbk-24jSiAQPQY398TH1k/edit">template</a> and Scratch's project recording feature.
</p>
<div class="btn-group" role="group" aria-label="Discuss">
<p class="btn btn-info navbar-btn labeling btn-lg"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Join the discussion on</p>
<a class="btn btn-info navbar-btn btn-lg" href="https://scratch.mit.edu/discuss/topic/210905/">Scratch</a>
<a class="btn btn-info navbar-btn btn-lg" href="http://scratched.gse.harvard.edu/discussions/teaching-scratch/how-do-you-share-your-scratch-experiences">ScratchEd</a>
</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info" role="alert" style="padding-top:0px; margin-top:2em">
<h3><span class="glyphicon glyphicon-education" aria-hidden="true"></span> Participate in our workshop</h3>
<p>
Going to <a href="https://scratch.mit.edu/conference/" target="_blank">Scratch@MIT2016</a>?
Attend our workshop and work with new friends to identify what you learned when getting unstuck after having been stuck.
Use Scratch's project recording feature to share your exciting breakthroughs on the <a href="https://www.youtube.com/user/ScratchCardResources" target="_blank" title="open YT channel in new tab">ScratchCardResources channel on YouTube</a>
and publish your own first tutorial. Take this experience home to continue to share and collaborate with your students.
</p>
<p>
<b>Learn more</b> about our workshop at <a href="/workshop">Scratch@MIT2016 Workshop Agenda</a>.
</p>
<br />
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Saturday AUG 6, 11AM, Room 240
</div>
</div>
</div>
</div>
</div>
<div id="create" class="row" style="margin-top:5em">
<div class="col-sm-12">
<div class="page-header">
<h1>Create a ScratchCard</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h2><span class="label label-default">1</span> Identify a lightbulb moment</h2>
<p>Think of a moment when you have been stuck on a problem and found a solution. Think about the following questions:
<ul>
<li>What exactly did you intend to do?</li>
<li>What did not work?</li>
<li>How did you solve the problem?</li>
</ul>
Finally, chose a project that demonstrates what you learned.
</p>
</div>
<div class="col-sm-6">
<h2><span class="label label-default">2</span> Fill out our template</h2>
<p>
Open our template hosted on Google Docs by going to <a href="https://docs.google.com/document/d/1owKhqqXq9GLHrjbf8BW3q0mbk-24jSiAQPQY398TH1k/edit" title="open template in new tab" target="_blank">tinyurl.com/cardtemplate</a>.
Create a copy of this template to edit it in Google Docs (Google Account needed!) or download it to edit with your local text editor.
Make sure to fill out everything carefully and add some nice screenshots and pictures.
To edit screenshots you can use a free graphic editing software like <a href="http://gimp.org/" target="_blank">Gimp</a>.
Remember to check your card for spelling mistakes.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h2><span class="label label-default">3</span> Record your project</h2>
<p>
Scratch's Project Video Recording feature allows you to record your project without installing any third-party software.
To use this feature you need to be logged in and have your project opened in the Scratch 2.0 online editor.
To learn more about how to record your project, see <a href="http://wiki.scratch.mit.edu/wiki/Record_Project_Video" target="_blank" title="open article in new tab">the corresponding Scratch Wiki article</a>.
</p>
</div>
<div class="col-sm-6">
<h2><span class="label label-default">4</span> Share your ScratchCard</h2>
<p>
When you are happy with your result, please share your ScratchCard!
Simply email your template (the file or a link to it) and your project video to settenheim[at]erhsnyc[dot]net (Susan Ettenheim)
and we will publish your ScratchCard on <a href="https://www.youtube.com/user/ScratchCardResources/" target="_blank" title="open YT channel in new tab">our YouTube channel</a>.
</p>
</div>
</div>
<div id="examples" class="row" style="margin-top:5em">
<div class="col-sm-12">
<div class="page-header">
<h1>Example Scratch Cards</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>All our ScratchCards can be found at our YouTube channel: <a href="https://www.youtube.com/user/ScratchCardResources/" target="_blank" title="open YT channel in new tab">Scratch Card Resources</a>.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DZd7C59HkKM?list=PLB3du3yEcHD8Iu6-M-EwqydIr6DuVKyrl" frameborder="0" allowfullscreen></iframe>
<a href="https://docs.google.com/document/d/1iTNLslxT3LWVNVp0XYyHJ_YZAjIUHTd3kCnl48sns6Y/edit?usp=sharing&pageId=100753569756101388323" title="open Scratch card in Google Docs" target="_blank" class="btn btn-default">Open Google Doc</a>
</div>
<div class="col-sm-6">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/m5ckBgJBQAI?list=PLB3du3yEcHD-Qyc0Nc-Kl6bEBTUFng8KW" frameborder="0" allowfullscreen></iframe>
<a href="https://docs.google.com/document/d/1pXTf5OEDaT58ZeQvPbNiLAqdj1tykqHQ-_hE_05snWs/edit?pageId=100753569756101388323" title="open Scratch card in Google Docs" target="_blank" class="btn btn-default">Open Google Doc</a>
</div>
</div>
<footer>
<small>
<p style="color:grey; text-align:center; margin-top:5em">
<a href="https://scratch.mit.edu/">Scratch</a> is developed by the Lifelong Kindergarten Group at the MIT Media Lab.<br />
This website is using <a href="http://getbootstrap.com/">Bootstrap</a> and being hosted on <a href="https://github.com/">GitHub</a>.
</p>
</small>
</footer>
</div>
</body>
<!-- Bootstrap -->
<link href="css/bootstrap-min.css" rel="stylesheet">
<!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
<script src="js/bootstrap.min.js"></script>
<!-- YouTube API for subscribe button -->
<script src="https://apis.google.com/js/platform.js"></script>
</html>