mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 15:17:53 -05:00
For Developers
Add landing page for developers
This commit is contained in:
carljbowman
Ray Schamp
parent
64f91601f0
commit
e885c08ea1
12 changed files with 518 additions and 3 deletions
|
|
@ -15,9 +15,9 @@
|
|||
li {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
border: 2px solid $active-gray;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 50px;
|
||||
padding: .75em 1em;
|
||||
padding: .75em 1.5em;
|
||||
text-decoration: none;
|
||||
color: $type-white;
|
||||
list-style-type: none;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
border: 0 solid transparent;
|
||||
box-shadow: inset 0 0 5px $box-shadow-gray;
|
||||
background-color: $active-dark-gray;
|
||||
padding: calc(.75em + 2px) calc(1em + 2px);
|
||||
padding: calc(.75em + 1px) calc(1.5em + 1px);
|
||||
}
|
||||
|
||||
&.description {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
"view": "components/components",
|
||||
"title": "Components"
|
||||
},
|
||||
{
|
||||
"name": "developers",
|
||||
"pattern": "^/developers/?$",
|
||||
"view": "developers/developers",
|
||||
"title": "Developers"
|
||||
},
|
||||
{
|
||||
"name": "hoc",
|
||||
"pattern": "^/hoc/?$",
|
||||
|
|
|
|||
276
src/views/developers/developers.jsx
Normal file
276
src/views/developers/developers.jsx
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
var React = require('react');
|
||||
var render = require('../../lib/render.jsx');
|
||||
|
||||
var Page = require('../../components/page/www/page.jsx');
|
||||
var FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||
|
||||
require('./developers.scss');
|
||||
|
||||
var Developers = React.createClass({
|
||||
type: 'About',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="developers">
|
||||
<TitleBanner className="masthead">
|
||||
<div className="inner">
|
||||
<h1>Scratch for Developers</h1>
|
||||
<p className="intro">
|
||||
On this page, you’ll find information about open source projects created and maintained{' '}
|
||||
by the <a href="https://scratch.mit.edu/info/credits">Scratch Team at MIT</a>, as well{' '}
|
||||
as our thoughts on best practices for designing learning experiences for children.
|
||||
</p>
|
||||
</div>
|
||||
<div className="band">
|
||||
<SubNavigation className="inner">
|
||||
<a href="#projects">
|
||||
<li>
|
||||
Projects
|
||||
</li>
|
||||
</a>
|
||||
<a href="#principles">
|
||||
<li>
|
||||
Principles
|
||||
</li>
|
||||
</a>
|
||||
<a href="#donate">
|
||||
<li>
|
||||
Donate
|
||||
</li>
|
||||
</a>
|
||||
<a href="#partners">
|
||||
<li>
|
||||
Partners
|
||||
</li>
|
||||
</a>
|
||||
<a href="#faq">
|
||||
<li>
|
||||
FAQ
|
||||
</li>
|
||||
</a>
|
||||
</SubNavigation>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
|
||||
<div className="inner">
|
||||
<section id="projects">
|
||||
<h2>Projects</h2>
|
||||
<p className="intro">
|
||||
The following projects are open source and available for any purpose.
|
||||
</p>
|
||||
<FlexRow className="sidebar-row">
|
||||
<div className="body-copy column">
|
||||
<h3>Scratch Blocks</h3>
|
||||
<p>
|
||||
Scratch Blocks is a new development project for the next generation of{' '}
|
||||
graphical programming blocks, based on a collaboration between Google and MIT’s{' '}
|
||||
Scratch Team — building on Google’s{' '}
|
||||
<a href="https://developers.google.com/blockly/">Blockly technology</a>{' '}
|
||||
and informed by the Scratch Team’s expertise in developing creative{' '}
|
||||
learning tools for young people. Scratch Blocks will provide a framework{' '}
|
||||
for building programming blocks in both vertical (text-based) and horizontal{' '}
|
||||
(icon-based) formats. You can access the code (currently as a{' '}
|
||||
developer-preview) and documentation{' '}
|
||||
<a href="https://github.com/llk/scratch-blocks">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
This first release includes code for Scratch’s Horizontal Grammar. Looking{' '}
|
||||
ahead, we plan to release additional code including but not limited to the{' '}
|
||||
Vertical Grammar (currently used by Scratch), a new Rendering Engine to support{' '}
|
||||
sprites and graphic effects, and a new Audio Engine to support creation with{' '}
|
||||
sound and music.
|
||||
</p>
|
||||
</div>
|
||||
<img className="sidebar column" src="/images/developers/block-sketch.png" alt="blocks" />
|
||||
</FlexRow>
|
||||
<FlexRow className="sidebar-row">
|
||||
<div className="body-copy column">
|
||||
<h3>Scratch WWW</h3>
|
||||
<p>
|
||||
Scratch-www is a standalone web client for the Scratch Community, built{' '}
|
||||
using React and Redux. Access the code and documentation{' '}
|
||||
<a href="https://github.com/LLK/scratch-www">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img className="sidebar column" src="/images/developers/www-sketch.png" alt="www" />
|
||||
</FlexRow>
|
||||
</section>
|
||||
|
||||
<section id="principles">
|
||||
<h2>Principles</h2>
|
||||
<p className="intro">
|
||||
We created Scratch to empower young people to think creatively, reason systematically,{' '}
|
||||
and work collaboratively. We are guided by a set of <b>Learning Principles</b> and{' '}
|
||||
<b>Design Principles</b> that we hope you will follow as you develop new tools and{' '}
|
||||
technologies with Scratch Blocks.
|
||||
</p>
|
||||
|
||||
<FlexRow className="sidebar-row">
|
||||
<div className="body-copy column">
|
||||
<h3>Learning Principles</h3>
|
||||
<dl>
|
||||
<dt>Projects</dt>
|
||||
<dd>
|
||||
People learn best when they are actively working on projects — generating{' '}
|
||||
new ideas, designing prototypes, making improvements and creating final{' '}
|
||||
products.
|
||||
</dd>
|
||||
<dt>Passion</dt>
|
||||
<dd>
|
||||
When people focus on things they care about, they work longer and harder,{' '}
|
||||
persist in the face of challenges, and learn more in the process.
|
||||
</dd>
|
||||
<dt>Peers</dt>
|
||||
<dd>
|
||||
Learning flourishes as a social activity, with people sharing ideas,{' '}
|
||||
collaborating on projects, and building on one another's work.
|
||||
</dd>
|
||||
<dt>Play</dt>
|
||||
<dd>
|
||||
Learning involves playful experimentation — trying new things, tinkering{' '}
|
||||
with materials, testing boundaries, taking risks, iterating again and again.
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</FlexRow>
|
||||
|
||||
<FlexRow className="sidebar-row">
|
||||
<div className="body-copy column">
|
||||
<h3>Design Principles</h3>
|
||||
<dl>
|
||||
<dt>Low Floor & Wide Walls</dt>
|
||||
<dd>
|
||||
In order to encourage a varied and diverse set of interactions, we{' '}
|
||||
explicitly include elements and features that are easy for kids to{' '}
|
||||
understand (low floor), but general enough to support diverse uses (wide walls).
|
||||
</dd>
|
||||
<dt>Make it as Simple as Possible — And Maybe Even Simpler</dt>
|
||||
<dd>
|
||||
Despite the common drive to add more features to software products, we{' '}
|
||||
have found that reducing the number of features often improves the user{' '}
|
||||
experience. What initially seems like a constraint or limitation can foster{' '}
|
||||
new forms of creativity.
|
||||
</dd>
|
||||
<dt>Many Paths, Many Styles</dt>
|
||||
<dd>
|
||||
Many math and science activities have traditionally been biased towards{' '}
|
||||
specific populations. By paying special attention to creating accessible{' '}
|
||||
and appealing technologies, we are working to close the gap.
|
||||
</dd>
|
||||
<dt>Design for Tinkerability</dt>
|
||||
<dd>
|
||||
We believe that the learning process is inherently iterative. Tinkerers{' '}
|
||||
start by exploring and experimenting, then revising and refining their{' '}
|
||||
goals and creations. To support this style of interaction, we design{' '}
|
||||
our interfacesto encourage quick experimentation and rapid cycles of iteration.
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
|
||||
<section id="donate">
|
||||
<h2>Donate</h2>
|
||||
<p>
|
||||
We are pleased to provide Scratch free of charge. If you enjoy using Scratch, please{' '}
|
||||
consider <a href="https://secure.donationpay.org/scratchfoundation/">making a donation{' '}
|
||||
to support Scratch</a>. Donations of any size are appreciated.
|
||||
</p>
|
||||
<p>
|
||||
Your donation to the Scratch Foundation will be used to support future development of{' '}
|
||||
Scratch software and the Scratch website.
|
||||
</p>
|
||||
<p>
|
||||
Thanks for supporting Scratch!
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="partners">
|
||||
<h3>Partners</h3>
|
||||
<p>
|
||||
The creation and maintenance of this open source code would not be possible without{' '}
|
||||
generous technical and financial support from our partners:
|
||||
</p>
|
||||
|
||||
<FlexRow className="logos">
|
||||
<img className="logo" src="/images/developers/google.png" alt="google" />
|
||||
<img className="logo" src="/images/developers/intel.png" alt="intel" />
|
||||
<img className="logo" src="/images/developers/cn.png" alt="cartoon network" />
|
||||
<img className="logo" src="/images/developers/lemann.png" alt="lemann foundation" />
|
||||
</FlexRow>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<TitleBanner className="faq-banner">
|
||||
<div className="inner">
|
||||
<section id="faq">
|
||||
<h3>FAQ</h3>
|
||||
<FlexRow className="three-col-row">
|
||||
<div className="faq column">
|
||||
<h4>Where can I learn more about Scratch?</h4>
|
||||
<p>
|
||||
Scratch is a free programming language and online community where young{' '}
|
||||
people can create their own interactive stories, games, and animations.{' '}
|
||||
Scratch is a project of the{' '}
|
||||
<a href="https://llk.media.mit.edu/">Lifelong Kindergarten</a>{' '}
|
||||
Group at the <a href="http://media.mit.edu/">MIT Media Lab</a>.{' '}
|
||||
You can learn more about Scratch{' '}
|
||||
<a href="https://scratch.mit.edu/about">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h4>Are there rules to using this code in my application?</h4>
|
||||
<p>
|
||||
You may use this code in accordance with the{' '}
|
||||
<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a> license
|
||||
which governs this project. We also strongly encourage you to consider{' '}
|
||||
the learning and design principles (above, on this page) when building{' '}
|
||||
creative learning experiences for kids of all ages.
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h4>
|
||||
Am I allowed to use the name "Scratch Blocks" in the description of my{' '}
|
||||
app and other public messaging?
|
||||
</h4>
|
||||
<p>
|
||||
If you wish, you can publicly state that your application is powered by{' '}
|
||||
Scratch Blocks. If you do so, we would also encourage you to link back to{' '}
|
||||
code repository.
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h4>Are you releasing more code and when?</h4>
|
||||
<p>
|
||||
We plan to open source additional code relating to the Scratch programming{' '}
|
||||
language over the next few months. Keep an eye on this page!
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h4>What’s the difference between Blockly and Scratch Blocks?</h4>
|
||||
<p>
|
||||
Scratch Blocks builds upon the Blockly code base, and is specifically{' '}
|
||||
designed with our principles in mind to support creative learning experiences.
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h4>I’d like to collaborate. How do I get in touch?</h4>
|
||||
<p>
|
||||
You can reach us over on <a href="https://github.com/LLK/">github</a> or{' '}
|
||||
you can send an email to{' '}
|
||||
<a href="mailto:help@scratch.mit.edu">help@scratch.mit.edu.</a>{' '}
|
||||
We look forward to hearing from you!
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
render(<Page><Developers /></Page>, document.getElementById('app'));
|
||||
232
src/views/developers/developers.scss
Normal file
232
src/views/developers/developers.scss
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
@import "../../typography";
|
||||
|
||||
$developer-spot: $ui-aqua;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
background-color: $developer-spot;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2rem 0;
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
width: $cols6;
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
.band {
|
||||
$band-color: hsla(360, 100, 100, .15);
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.faq-banner {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
margin: 2rem 0;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.body-copy {
|
||||
width: $cols8;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $cols3;
|
||||
}
|
||||
}
|
||||
|
||||
&.three-col-row {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.column {
|
||||
$column-margin: 1rem;
|
||||
|
||||
margin: $column-margin;
|
||||
width: calc(#{$cols4} - (#{$column-margin} * 2));
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
p {
|
||||
max-width: $cols8;
|
||||
}
|
||||
}
|
||||
|
||||
#projects,
|
||||
#principles,
|
||||
#donate {
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#donate {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
#partners {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.logos {
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
margin: 10px;
|
||||
width: $cols2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#faq {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $type-gray;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
#view {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.band {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
#view {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
#view {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
1
src/views/developers/l10n.json
Normal file
1
src/views/developers/l10n.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
BIN
static/images/developers/block-sketch.png
Normal file
BIN
static/images/developers/block-sketch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/images/developers/cn.png
Normal file
BIN
static/images/developers/cn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
static/images/developers/google.png
Normal file
BIN
static/images/developers/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/images/developers/intel.png
Normal file
BIN
static/images/developers/intel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
static/images/developers/lemann.png
Normal file
BIN
static/images/developers/lemann.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
static/images/developers/logo_sm.png
Normal file
BIN
static/images/developers/logo_sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
static/images/developers/www-sketch.png
Normal file
BIN
static/images/developers/www-sketch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Loading…
Reference in a new issue