mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-25 20:29:45 -04:00
Merge pull request #2447 from picklesrus/educators
Educators Page Changes
This commit is contained in:
picklesrus
GitHub
commit
a3afa5e482
6 changed files with 244 additions and 182 deletions
src/views/teachers/landing
static/svgs/teachers
|
|
@ -1,21 +1,38 @@
|
|||
{
|
||||
"teacherlanding.title": "Scratch for Educators",
|
||||
"teacherlanding.intro": "Your students can use Scratch to code their own interactive stories, animations, and games. In the process, they learn to think creatively, reason systematically, and work collaboratively — essential skills for everyone in today’s society.",
|
||||
"teacherlanding.resourcesAnchor": "Resources",
|
||||
"teacherlanding.inPracticeTitle": "Who Uses Scratch?",
|
||||
"teacherlanding.inPracticeIntro": "Educators are using Scratch in a wide variety of: ",
|
||||
"teacherlanding.generalUsageSettings": "<b>Settings:</b> schools, museums, libraries, community centers",
|
||||
"teacherlanding.generalUsageGradeLevels": "<b>Grade Levels:</b> elementary, middle, and high school (and some colleges too!)",
|
||||
"teacherlanding.generalUsageSubjectAreas": "<b>Subject Areas:</b> language arts, science, social studies, math, computer science, foreign languages, and the arts",
|
||||
"teacherlanding.scratchEdTitle": "A Community for Educators",
|
||||
"teacherlanding.scratchEdDescription": "<a href=\"http://scratched.gse.harvard.edu/\">ScratchEd</a> is an online community where Scratch educators <a href=\"http://scratched.gse.harvard.edu/stories\">share stories</a>, exchange resources, ask questions, and find people. ScratchEd is developed and supported by the Harvard Graduate School of Education.",
|
||||
"teacherlanding.meetupTitle": "In-Person Gatherings",
|
||||
"teacherlanding.meetupDescription": "<a href=\"http://www.meetup.com/pro/scratched/\">Scratch Educator Meetups</a> are gatherings of Scratch Educators who want to learn with and from each other, sharing their ideas and strategies for supporting computational creativity in all its forms.",
|
||||
"teacherlanding.guidesTitle": "Guides & Tutorials",
|
||||
"teacherlanding.tttPage": "The <a href=\"/tips\">Tips page</a> offers a variety of tutorials, activity cards, and educator guides.",
|
||||
"teacherlanding.tipsWindow" : "The <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a> provides help for creating projects in Scratch.",
|
||||
"teacherlanding.creativeComputing": "The <a href=\"http://scratched.gse.harvard.edu/guide/\">Creative Computing Curriculum Guide</a> provides plans, activities, and strategies for introducing creative computing.",
|
||||
"teacherlanding.intro": "Your students can use Scratch to code their own interactive stories, animations, and games. In the process, they learn to think creatively, reason systematically, and work collaboratively — essential skills for everyone in today’s society. Educators are integrating Scratch across many different subject areas and age groups.",
|
||||
"teacherlanding.resourcesTitle": "Resources",
|
||||
"teacherlanding.connectTitle": "Connect",
|
||||
"teacherlanding.newsTitle": "News",
|
||||
"teacherlanding.teacherAccountsTitle": "Teacher Accounts",
|
||||
"teacherlanding.educatorResourcesTitle": "Resources for Educators",
|
||||
"teacherlanding.educatorGuides": "{educatorLink} show you how to prepare and run Scratch classes and workshops.",
|
||||
"teacherlanding.educatorGuideLinkText" : "Educator Guides",
|
||||
"teacherlanding.creativeComputing": "{scratchEdLink} from the ScratchEd team provides plans, activities, and strategies for introducing creative computing.",
|
||||
"teacherlanding.scratchEdLinkText" : "Creative Computing",
|
||||
"teacherlanding.studentResourcesTitle" : "Resources for Students",
|
||||
"teacherlanding.tutorialResources": "Explore {tutorialLink} to find out how you can create stories, animations, games, and more!",
|
||||
"teacherlanding.tutorialLink" : "Scratch Tutorials",
|
||||
"teacherlanding.codingCardResources": "Download and print {codingCardLink} for step-by-step instructions for a variety of projects.",
|
||||
"teacherlanding.codingCardLink" : "Coding Cards",
|
||||
"teacherlanding.ideasResources" : "Visit the {ideasPageLink} for additional resources from the Scratch Team",
|
||||
"teacherlanding.ideasLink" : "Ideas Page",
|
||||
"teacherlanding.connectingWithEducators" : "Connecting with Other Educators",
|
||||
"teacherlanding.teachingWithScratch" : "Join the {teachingWithScratchLink} Facebook group to share ideas, questions, and resources related to teaching with Scratch.",
|
||||
"teacherlanding.teachingWithScratchLink" : "Teaching with Scratch",
|
||||
"teacherlanding.attendMeetups" : "Attend {meetupLink} to share ideas and strategies with other educators for supporting computational creativity in all its forms.",
|
||||
"teacherlanding.meetupLink" : "ScratchEd Educator Meetups",
|
||||
"teacherlanding.moreGetStartedTitle" : "More Ways to Get Started",
|
||||
"teacherlanding.csFirst" : "Google’s free curriculum, {csFirstLink}, has been used by students and educators worldwide. Over 1,000 instructional videos and lesson plans introduce students to Scratch.",
|
||||
"teacherlanding.csFirstLink" : "CS First",
|
||||
"teacherlanding.codeClub" : "Visit {codeClubLink} to access more than 30 free project modules to engage students in learning to make interactive stories, games, and animations.",
|
||||
"teacherlanding.codeClubLink" : "Code Club",
|
||||
"teacherlanding.newsAndUpdatesTitle" : "News and Updates",
|
||||
"teacherlanding.followUs" : "Follow us on {facebookLink}, {twitterLink}, and {instagramLink}!",
|
||||
"teacherlanding.signupTips" : "Sign up to receive {signupTipsLink} from the Scratch Team",
|
||||
"teacherlanding.signupTipsLink" : "updates and tips",
|
||||
"teacherlanding.accountsTitle": "Teacher Accounts in Scratch",
|
||||
"teacherlanding.accountsDescription": "As an educator, you can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage your students’ projects and comments. To learn more, see the <a href=\"/educators/faq\">Teacher Account FAQ page</a>.",
|
||||
"teacherlanding.requestAccount": "Request Account"
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,30 +22,40 @@ const Landing = () => (
|
|||
<p className="title-banner-p intro">
|
||||
<FormattedMessage id="teacherlanding.intro" />
|
||||
</p>
|
||||
<div className="ted-talk">
|
||||
<div className="video-player">
|
||||
<iframe
|
||||
allowFullScreen
|
||||
allowTransparency="true"
|
||||
frameBorder="0"
|
||||
src="https://www.youtube.com/embed/uPSuG063jhA?border=0&wmode=transparent"
|
||||
height="180"
|
||||
scrolling="no"
|
||||
src={`https://fast.wistia.net/embed/iframe/h8hay3nnt4?seo=false&videoFoam=true`}
|
||||
title=""
|
||||
width="320"
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="band">
|
||||
<SubNavigation className="inner">
|
||||
<a href="#in-practice">
|
||||
<li>
|
||||
<FormattedMessage id="teacherlanding.inPracticeTitle" />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#resources">
|
||||
<li>
|
||||
<FormattedMessage id="teacherlanding.resourcesAnchor" />
|
||||
<FormattedMessage id="teacherlanding.resourcesTitle" />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#connect">
|
||||
<li>
|
||||
<FormattedMessage id="teacherlanding.connectTitle" />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#news">
|
||||
<li>
|
||||
<FormattedMessage id="teacherlanding.newsTitle" />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#teacher-accounts">
|
||||
<li>
|
||||
<FormattedMessage id="general.teacherAccounts" />
|
||||
<FormattedMessage id="teacherlanding.teacherAccountsTitle" />
|
||||
</li>
|
||||
</a>
|
||||
</SubNavigation>
|
||||
|
|
@ -53,76 +63,214 @@ const Landing = () => (
|
|||
</TitleBanner>
|
||||
|
||||
<div className="inner">
|
||||
<section id="in-practice">
|
||||
<span className="nav-spacer" />
|
||||
<h2>
|
||||
<FormattedMessage id="teacherlanding.inPracticeTitle" />
|
||||
</h2>
|
||||
<p className="intro">
|
||||
<FormattedMessage id="teacherlanding.inPracticeIntro" />
|
||||
</p>
|
||||
<FlexRow className="general-usage">
|
||||
<p><FormattedHTMLMessage id="teacherlanding.generalUsageSettings" /></p>
|
||||
<p><FormattedHTMLMessage id="teacherlanding.generalUsageGradeLevels" /></p>
|
||||
<p><FormattedHTMLMessage id="teacherlanding.generalUsageSubjectAreas" /></p>
|
||||
</FlexRow>
|
||||
</section>
|
||||
<section id="resources">
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="general.resourcesTitle" /></h2>
|
||||
<h2><FormattedMessage id="teacherlanding.educatorResourcesTitle" /></h2>
|
||||
<FlexRow className="educator-community">
|
||||
<div>
|
||||
<h3>
|
||||
<FormattedMessage id="teacherlanding.scratchEdTitle" />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="teacherlanding.scratchEdDescription" />
|
||||
<FormattedMessage
|
||||
id="teacherlanding.educatorGuides"
|
||||
values={{
|
||||
educatorLink: (
|
||||
<a href="https://resources.scratch.mit.edu/www/guides/en/EducatorGuidesAll.pdf">
|
||||
<FormattedMessage id="teacherlanding.educatorGuideLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
<FormattedMessage id="teacherlanding.meetupTitle" />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="teacherlanding.meetupDescription" />
|
||||
<FormattedMessage
|
||||
id="teacherlanding.creativeComputing"
|
||||
values={{
|
||||
scratchEdLink: (
|
||||
<a href="http://scratched.gse.harvard.edu/guide/">
|
||||
<FormattedMessage id="teacherlanding.scratchEdLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
<h3 id="guides-header">
|
||||
<FormattedMessage id="teacherlanding.guidesTitle" />
|
||||
</h3>
|
||||
</section>
|
||||
<section>
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.studentResourcesTitle" /></h2>
|
||||
<FlexRow className="guides-and-tutorials">
|
||||
<div>
|
||||
<a href="/tips">
|
||||
<img
|
||||
alt="cards icon"
|
||||
src="/svgs/teachers/v2-cards.svg"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="teacherlanding.tttPage" />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/projects/editor/?tip_bar=home">
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<img
|
||||
alt="tips window icon"
|
||||
src="/svgs/teachers/tips-window.svg"
|
||||
src="/svgs/teachers/scratch-tutorials-icons.svg"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="teacherlanding.tipsWindow" />
|
||||
<FormattedMessage
|
||||
id="teacherlanding.tutorialResources"
|
||||
values={{
|
||||
tutorialLink: (
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<FormattedMessage id="teacherlanding.tutorialLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://scratched.gse.harconstd.edu/guide/">
|
||||
<a href="/www/cards/en/ScratchCardsAll.pdf">
|
||||
<img
|
||||
alt="creative computing icon"
|
||||
src="/svgs/teachers/creative-computing.svg"
|
||||
alt="cards icon"
|
||||
src="/svgs/teachers/coding-cards-icon.svg"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="teacherlanding.creativeComputing" />
|
||||
<FormattedMessage
|
||||
id="teacherlanding.codingCardResources"
|
||||
values={{
|
||||
codingCardLink: (
|
||||
<a href="https://resources.scratch.mit.edu/www/cards/en/ScratchCardsAll.pdf">
|
||||
<FormattedMessage id="teacherlanding.codingCardLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/ideas">
|
||||
<img
|
||||
alt="creative computing icon"
|
||||
src="/svgs/teachers/ideas-page-icon.svg"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.ideasResources"
|
||||
values={{
|
||||
ideasPageLink: (
|
||||
<a href="http://scratch.mit.edu/ideas">
|
||||
<FormattedMessage id="teacherlanding.ideasLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
<section id="connect">
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.connectingWithEducators" /></h2>
|
||||
<FlexRow className="educator-community">
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.teachingWithScratch"
|
||||
values={{
|
||||
teachingWithScratchLink: (
|
||||
<a href="https://www.facebook.com/groups/TeachingwithScratch/">
|
||||
<FormattedMessage id="teacherlanding.teachingWithScratchLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.attendMeetups"
|
||||
values={{
|
||||
meetupLink: (
|
||||
<a href="https://www.meetup.com/pro/scratched/">
|
||||
<FormattedMessage id="teacherlanding.meetupLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
<section>
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.moreGetStartedTitle" /></h2>
|
||||
<FlexRow className="educator-community">
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.csFirst"
|
||||
values={{
|
||||
csFirstLink: (
|
||||
<a href="http://g.co/csfirst">
|
||||
<FormattedMessage id="teacherlanding.csFirstLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.codeClub"
|
||||
values={{
|
||||
codeClubLink: (
|
||||
<a href="https://codeclubprojects.org/en-GB/scratch/">
|
||||
<FormattedMessage id="teacherlanding.codeClubLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
<section id="news">
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.newsAndUpdatesTitle" /></h2>
|
||||
<FlexRow className="educator-community">
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.followUs"
|
||||
values={{
|
||||
facebookLink: (
|
||||
<a href="https://www.facebook.com/scratchteam/">
|
||||
Facebook
|
||||
</a>
|
||||
),
|
||||
twitterLink: (
|
||||
<a href="https://twitter.com/scratch">
|
||||
Twitter
|
||||
</a>
|
||||
),
|
||||
instagramLink: (
|
||||
<a href="https://www.instagram.com/mitscratchteam/">
|
||||
Instagram
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.signupTips"
|
||||
values={{
|
||||
signupTipsLink: (
|
||||
<a href="http://eepurl.com/cws7_f ">
|
||||
<FormattedMessage id="teacherlanding.signupTipsLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ $story-width: $cols3;
|
|||
}
|
||||
}
|
||||
|
||||
.ted-talk {
|
||||
.video-player {
|
||||
position: relative;
|
||||
margin-bottom: $gutter;
|
||||
border: 2px solid $ui-border;
|
||||
|
|
@ -73,28 +73,6 @@ $story-width: $cols3;
|
|||
background-color: $band-color;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.faq-banner {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
max-width: $cols4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,87 +83,29 @@ $story-width: $cols3;
|
|||
align-items: flex-start;
|
||||
|
||||
div {
|
||||
max-width: $cols6;
|
||||
max-width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.guides-and-tutorials {
|
||||
div {
|
||||
max-width: $cols4;
|
||||
max-width: 16rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#in-practice,
|
||||
#resources {
|
||||
.nav-spacer {
|
||||
.nav-spacer { // For making the anchors work.
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
margin-top: -50px; // height of nav bar
|
||||
margin-top: -50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 3rem;
|
||||
|
||||
#in-practice {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.stories {
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.story {
|
||||
margin: 10px auto;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: 10px;
|
||||
background-color: $ui-white;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
border-top-left-radius: 9px;
|
||||
border-top-right-radius: 9px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.story-info {
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
.name {
|
||||
margin: 0;
|
||||
line-height: initial;
|
||||
color: $ui-blue;
|
||||
font-size: initial;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#resources {
|
||||
h2 {
|
||||
padding-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#guides-header {
|
||||
margin-bottom: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -415,37 +335,11 @@ $story-width: $cols3;
|
|||
}
|
||||
}
|
||||
|
||||
#in-practice {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
p {
|
||||
margin: .25em 0;
|
||||
max-width: $cols8;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.educators {
|
||||
#resources {
|
||||
margin: 0 auto;
|
||||
width: $cols6;
|
||||
|
||||
h2 {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.educator-community {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -459,7 +353,7 @@ $story-width: $cols3;
|
|||
.guides-and-tutorials {
|
||||
div {
|
||||
display: flex;
|
||||
max-width: $cols8;
|
||||
max-width: 16rem;
|
||||
text-align: left;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
1
static/svgs/teachers/coding-cards-icon.svg
Normal file
1
static/svgs/teachers/coding-cards-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After 
(image error) Size: 14 KiB |
1
static/svgs/teachers/ideas-page-icon.svg
Normal file
1
static/svgs/teachers/ideas-page-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After 
(image error) Size: 5.1 KiB |
1
static/svgs/teachers/scratch-tutorials-icons.svg
Normal file
1
static/svgs/teachers/scratch-tutorials-icons.svg
Normal file
File diff suppressed because one or more lines are too long
|
After 
(image error) Size: 18 KiB |
Loading…
Add table
Reference in a new issue