diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss index 76248f1d6..54c201c1c 100644 --- a/src/components/subnavigation/subnavigation.scss +++ b/src/components/subnavigation/subnavigation.scss @@ -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 { diff --git a/src/routes.json b/src/routes.json index 3421b8d24..22c308200 100644 --- a/src/routes.json +++ b/src/routes.json @@ -17,6 +17,12 @@ "view": "components/components", "title": "Components" }, + { + "name": "developers", + "pattern": "^/developers/?$", + "view": "developers/developers", + "title": "Developers" + }, { "name": "hoc", "pattern": "^/hoc/?$", diff --git a/src/views/developers/developers.jsx b/src/views/developers/developers.jsx new file mode 100644 index 000000000..7fdc94323 --- /dev/null +++ b/src/views/developers/developers.jsx @@ -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 ( +
+ +
+

Scratch for Developers

+

+ On this page, you’ll find information about open source projects created and maintained{' '} + by the Scratch Team at MIT, as well{' '} + as our thoughts on best practices for designing learning experiences for children. +

+
+
+ + +
  • + Projects +
  • +
    + +
  • + Principles +
  • +
    + +
  • + Donate +
  • +
    + +
  • + Partners +
  • +
    + +
  • + FAQ +
  • +
    +
    +
    +
    + +
    +
    +

    Projects

    +

    + The following projects are open source and available for any purpose. +

    + +
    +

    Scratch Blocks

    +

    + 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{' '} + Blockly technology{' '} + 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{' '} + here. +

    +

    + 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. +

    +
    + blocks +
    + +
    +

    Scratch WWW

    +

    + Scratch-www is a standalone web client for the Scratch Community, built{' '} + using React and Redux. Access the code and documentation{' '} + here. +

    +
    + + www +
    +
    + +
    +

    Principles

    +

    + We created Scratch to empower young people to think creatively, reason systematically,{' '} + and work collaboratively. We are guided by a set of Learning Principles and{' '} + Design Principles that we hope you will follow as you develop new tools and{' '} + technologies with Scratch Blocks. +

    + + +
    +

    Learning Principles

    +
    +
    Projects
    +
    + People learn best when they are actively working on projects — generating{' '} + new ideas, designing prototypes, making improvements and creating final{' '} + products. +
    +
    Passion
    +
    + 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. +
    +
    Peers
    +
    + Learning flourishes as a social activity, with people sharing ideas,{' '} + collaborating on projects, and building on one another's work. +
    +
    Play
    +
    + Learning involves playful experimentation — trying new things, tinkering{' '} + with materials, testing boundaries, taking risks, iterating again and again. +
    +
    +
    +
    + + +
    +

    Design Principles

    +
    +
    Low Floor & Wide Walls
    +
    + 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). +
    +
    Make it as Simple as Possible — And Maybe Even Simpler
    +
    + 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. +
    +
    Many Paths, Many Styles
    +
    + 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. +
    +
    Design for Tinkerability
    +
    + 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. +
    +
    +
    +
    +
    + + + +
    +

    Partners

    +

    + The creation and maintenance of this open source code would not be possible without{' '} + generous technical and financial support from our partners: +

    + + + google + intel + cartoon network + lemann foundation + +
    +
    + + +
    +
    +

    FAQ

    + +
    +

    Where can I learn more about Scratch?

    +

    + 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{' '} + Lifelong Kindergarten{' '} + Group at the MIT Media Lab.{' '} + You can learn more about Scratch{' '} + here. +

    +
    +
    +

    Are there rules to using this code in my application?

    +

    + You may use this code in accordance with the{' '} + Apache 2.0 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. +

    +
    +
    +

    + Am I allowed to use the name "Scratch Blocks" in the description of my{' '} + app and other public messaging? +

    +

    + 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. +

    +
    +
    +

    Are you releasing more code and when?

    +

    + We plan to open source additional code relating to the Scratch programming{' '} + language over the next few months. Keep an eye on this page! +

    +
    +
    +

    What’s the difference between Blockly and Scratch Blocks?

    +

    + Scratch Blocks builds upon the Blockly code base, and is specifically{' '} + designed with our principles in mind to support creative learning experiences. +

    +
    +
    +

    I’d like to collaborate. How do I get in touch?

    +

    + You can reach us over on github or{' '} + you can send an email to{' '} + help@scratch.mit.edu.{' '} + We look forward to hearing from you! +

    +
    +
    +
    +
    +
    +
    + ); + } +}); + +render(, document.getElementById('app')); diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss new file mode 100644 index 000000000..248114256 --- /dev/null +++ b/src/views/developers/developers.scss @@ -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%; + } + } +} + + + + diff --git a/src/views/developers/l10n.json b/src/views/developers/l10n.json new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/src/views/developers/l10n.json @@ -0,0 +1 @@ +{} diff --git a/static/images/developers/block-sketch.png b/static/images/developers/block-sketch.png new file mode 100644 index 000000000..80cf39996 Binary files /dev/null and b/static/images/developers/block-sketch.png differ diff --git a/static/images/developers/cn.png b/static/images/developers/cn.png new file mode 100644 index 000000000..565c58412 Binary files /dev/null and b/static/images/developers/cn.png differ diff --git a/static/images/developers/google.png b/static/images/developers/google.png new file mode 100644 index 000000000..563d9e637 Binary files /dev/null and b/static/images/developers/google.png differ diff --git a/static/images/developers/intel.png b/static/images/developers/intel.png new file mode 100644 index 000000000..f01e5fb0e Binary files /dev/null and b/static/images/developers/intel.png differ diff --git a/static/images/developers/lemann.png b/static/images/developers/lemann.png new file mode 100644 index 000000000..2448a965a Binary files /dev/null and b/static/images/developers/lemann.png differ diff --git a/static/images/developers/logo_sm.png b/static/images/developers/logo_sm.png new file mode 100644 index 000000000..7f4e7353a Binary files /dev/null and b/static/images/developers/logo_sm.png differ diff --git a/static/images/developers/www-sketch.png b/static/images/developers/www-sketch.png new file mode 100644 index 000000000..63546033d Binary files /dev/null and b/static/images/developers/www-sketch.png differ