For Developers

Add landing page for developers
This commit is contained in:
carljbowman 2016-05-16 14:59:20 -07:00 committed by Ray Schamp
parent 64f91601f0
commit e885c08ea1
12 changed files with 518 additions and 3 deletions

View file

@ -15,9 +15,9 @@
li { li {
display: inline-block; display: inline-block;
margin: 5px; margin: 5px;
border: 2px solid $active-gray; border: 1px solid $active-gray;
border-radius: 50px; border-radius: 50px;
padding: .75em 1em; padding: .75em 1.5em;
text-decoration: none; text-decoration: none;
color: $type-white; color: $type-white;
list-style-type: none; list-style-type: none;
@ -32,7 +32,7 @@
border: 0 solid transparent; border: 0 solid transparent;
box-shadow: inset 0 0 5px $box-shadow-gray; box-shadow: inset 0 0 5px $box-shadow-gray;
background-color: $active-dark-gray; background-color: $active-dark-gray;
padding: calc(.75em + 2px) calc(1em + 2px); padding: calc(.75em + 1px) calc(1.5em + 1px);
} }
&.description { &.description {

View file

@ -17,6 +17,12 @@
"view": "components/components", "view": "components/components",
"title": "Components" "title": "Components"
}, },
{
"name": "developers",
"pattern": "^/developers/?$",
"view": "developers/developers",
"title": "Developers"
},
{ {
"name": "hoc", "name": "hoc",
"pattern": "^/hoc/?$", "pattern": "^/hoc/?$",

View 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, youll 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 MITs{' '}
Scratch Team building on Googles{' '}
<a href="https://developers.google.com/blockly/">Blockly technology</a>{' '}
and informed by the Scratch Teams 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 Scratchs 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>Whats 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>Id 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'));

View 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%;
}
}
}

View file

@ -0,0 +1 @@
{}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB