Refactored contribute pages, each class has it's own page. Better fix to issue 13 and solution to 14

This commit is contained in:
Tom Steinbrecher 2014-01-06 00:41:31 -05:00
parent 598106e39a
commit 34dd42a7ca
2 changed files with 296 additions and 336 deletions

View file

@ -1,41 +0,0 @@
#contribute-view
#homepage_screenshot
margin: 20px 0px
.signature
text-align: right
a
cursor: pointer
.class_image
float: left
width: 150px
margin: 10px 10px 20px 20px
padding-top: 65px
#contribute-nav
float: left
max-width: 20%
width: 250px
box-sizing: border-box
margin-left: 20px
li
float: none
width: 100%
#contribute-main
margin-left: 25%
padding: 40px
box-sizing: border-box
h3
padding-top: 70px
.well
padding: 5px 5px 5px 30px
.saved-notification
display: none
float: right

View file

@ -2,325 +2,326 @@ extends /templates/base
block content block content
ul.affix.nav.nav-list.nav-pills#contribute-nav div.contribute_class
li
h3 Character Classes
li
a(href="#archmage") Archmage (Coder)
li
a(href="#artisan") Artisan (Level Builder)
li
a(href="#adventurer") Adventurer (Level Playtester)
li
a(href="#scribe") Scribe (Article Editor)
li
a(href="#diplomat") Diplomat (Translator)
li
a(href="#ambassador") Ambassador (Support)
li
a(href="#counselor") Counselor (Expert/Teacher)
hr ul.affix.nav.nav-list.nav-pills#contribute-nav
p Thanks to our lovely contributors: (work in progress; let us know who you are!) li
li Turkish - Nazım Gediz Aydındoğmuş h3 Character Classes
li Brazilian Portuguese - Gutenberg Barros, Kieizroe, Matthew Burt li
li Portugal Portuguese - Matthew Burt a(href="#archmage") Archmage (Coder)
li German - Dirk, Anon li
li Thai - Kamolchanok Jittrepit a(href="#artisan") Artisan (Level Builder)
li Greek - Stergios li
li Latin American Spanish - Jesús Ruppel, Matthew Burt, Mariano Luzza a(href="#adventurer") Adventurer (Level Playtester)
li Spain Spanish - Matthew Burt, Anon li
li French - Xeonarno, Anon a(href="#scribe") Scribe (Article Editor)
li Hungarian - Anon li
li Japanese - g1itch a(href="#diplomat") Diplomat (Translator)
li Chinese - spacepope li
li Polish - Anon a(href="#ambassador") Ambassador (Support)
li Danish - Anon li
li Slovak - Anon a(href="#counselor") Counselor (Expert/Teacher)
li Artisans - Sootn, Aftermath, mcdavid1991
li Scribes - Ryan Faidley
li Adventurers - Kieizroe, (...)
li Archmages - David Golds, Zach Martin, Tom Steinbrecher, Mischa Lewis-Norelle, Sébastien Moratinos
div#contribute-main div#contribute-main.class_main
div#intro div#intro
h2 Contributing h2 Contributing
#homepage_screenshot #homepage_screenshot
img(src="/images/pages/contribute/contribute_header.png", alt="") img(src="/images/pages/contribute/contribute_header.png", alt="")
p p
strong We have high hopes for CodeCombat. strong We have high hopes for CodeCombat.
| We want to be where programmers of all stripes come to learn and play together, | We want to be where programmers of all stripes come to learn and play together,
| introduce others to the wonderful world of coding, | introduce others to the wonderful world of coding,
| and reflect the best parts of the community. | and reflect the best parts of the community.
| We can't and don't want to do that alone; | We can't and don't want to do that alone;
| what makes projects like GitHub, Stack Overflow and Linux great are the people who | what makes projects like GitHub, Stack Overflow and Linux great are the people who
| use them and build on them. | use them and build on them.
| To that end, | To that end,
a(href="https://github.com/codecombat/codecombat") CodeCombat is totally open source a(href="https://github.com/codecombat/codecombat") CodeCombat is totally open source
| , and we aim to provide as many ways as possible for you to take part and | , and we aim to provide as many ways as possible for you to take part and
| make this project as much yours as ours. | make this project as much yours as ours.
p We hope you'll join our party! p We hope you'll join our party!
p.signature - Nick, George, Scott, Michael, and Jeremy p.signature - Nick, George, Scott, Michael, and Jeremy
hr hr
if me.attributes.anonymous if me.attributes.anonymous
div#sign-up.alert.alert-info div#sign-up.alert.alert-info
strong Hey there! strong Hey there!
| To subscribe for class emails, you'll need to | To subscribe for class emails, you'll need to
a(data-toggle="coco-modal", data-target="modal/signup") create an account a(data-toggle="coco-modal", data-target="modal/signup") create an account
| first . | first .
#archmage #archmage
.class_image .class_image.header-scrolling-fix
img(src="/images/pages/contribute/archmage.png", alt="") img(src="/images/pages/contribute/archmage.png", alt="")
h3 Archmage (Coder) h3.header-scrolling-fix Archmage (Coder)
p One of the best parts about building games is they synthesize so many different things. p One of the best parts about building games is they synthesize so many different things.
| Graphics, sound, real-time networking, social networking, and of course many of the | Graphics, sound, real-time networking, social networking, and of course many of the
| more common aspects of programming, from low-level database management, | more common aspects of programming, from low-level database management,
| and server administration to user facing design and interface building. | and server administration to user facing design and interface building.
| There's a lot to do, and if you're an experienced programmer with a hankering | There's a lot to do, and if you're an experienced programmer with a hankering
| to really dive into the nitty-gritty of CodeCombat, this class might be for you. | to really dive into the nitty-gritty of CodeCombat, this class might be for you.
| We would love to have your help building the best programming game ever. | We would love to have your help building the best programming game ever.
h4 Class Attributes
ul
li Knowledge in
a(href="http://coffeescript.org/") CoffeeScript
| , or a desire to learn. Most of our code is in this language.
| If you're a fan of Ruby or Python, you'll feel right at home.
| It's just JavaScript, but with a nicer syntax.
li Some experience in programming and personal initiative.
| We'll help you get oriented, but we can't spend much time training you.
h4 How To Join
p
| Anyone can help out! Just check out our
a(title='GitHub', href="https://github.com/codecombat/codecombat", tabindex=-1) GitHub
| to get started, and check the box below to mark yourself as a brave Archmage and get the latest news by email.
| Want to chat about what to do or how to get more deeply involved?
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Email us
| , or find us in our
a(href="http://www.hipchat.com/g3plnOKqa") public HipChat room
| and we'll go from there!
a(href="/contribute/archmage")
h3 Learn More About Becoming A Powerful Archmage
label.checkbox(for="developer").well
input(type='checkbox', name="developer", id="developer")
| Get emails on new coding opportunities and announcements.
.saved-notification ✓ Saved
#artisan
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/artisan.png", alt="")
h3.header-scrolling-fix Artisan (Level Builder)
p We must construct additional levels!
| People be clamoring for more content, and we can only build so many ourselves.
| Right now your workstation is level one; our level editor is barely
| usable even by its creators, so be wary.
| If you have visions of campaigns spanning for-loops to
a(href="http://stackoverflow.com/questions/758088/seeking-contrived-example-code-continuations/758105#758105") Mondo Bizzaro
| to then this class might be for you.
h4 Class Attributes
ul
li Any experience in building content like this would be nice, such as using
| Blizzard's level editors. But not required!
li A hankering to do a whole lot of testing and iteration.
| To make good levels, you need to take it to others and watch them play it,
| and be prepared to find a lot of things to fix.
li For the time being, endurance en par with an Adventurer.
| Our Level Editor is super preliminary and frustrating to use. You have been warned!
h4 How To Join
p The Level Editor is live! Go forth and fiddle with it.
| Right now for the sake of security, you can't make Components (the most powerful part of level building)
| but be in touch with us and we'll see if we can make what you need.
| See the
a(href="https://docs.google.com/document/d/117tMcL95T1KY8BDisr0iGi5Frb2ZvBJTC0us5hyQkJY/edit?usp=sharing") preliminary documentation
| for more info, and please comment on it so we can make the whole system better.
a(href="/contribute/artisan")
h3 Learn More About Becoming A Creative Artisan
label.checkbox(for="level_creator").well
input(type='checkbox', name="level_creator", id="level_creator")
| Get emails on level editor updates and announcements.
.saved-notification ✓ Saved
#adventurer
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/adventurer.png", alt="")
h3.header-scrolling-fix Adventurer (Level Playtester)
p Let's be clear about your role: you are the tank. You're going to take heavy damage.
| We need people to try out brand-new levels and help identify how to make things better.
| The pain will be enormous; making good games is a long process and no one gets
| it right the first time.
| If you can endure and have a high constitution score, then this class might be for you.
h4 Class Attributes
ul
li A thirst for learning. You want to learn how to code and we want to teach you how to code.
| You'll probably be doing most of the teaching in this case, though.
li Charismatic. Be gentle but articulate about what needs improving, and offer suggestions
| on how to improve.
h4 How To Join
p Either get together with (or recruit!) an Artisan and work with them, or
| check the box below to receive emails when there are new levels to test.
| We'll also be posting about levels to review on our networks like
a(href="http://discourse.codecombat.com/category/adventurer") our forum
| ,
a(href="https://www.facebook.com/codecombat") Facebook
| ,
a(href="http://www.reddit.com/r/CodeCombat/") Reddit
| ,
a(href="https://twitter.com/CodeCombat") Twitter
| , and
a(href="https://plus.google.com/115285980638641924488/posts") Google+
| , so if you prefer to be notified those ways, sign up there!
a(href="/contribute/adventurer")
h3 Learn More About Becoming A Brave Adventurer
label.checkbox(for="tester").well
input(type='checkbox', name="tester", id="tester")
| Get emails when there are new levels to test.
.saved-notification ✓ Saved
h4 Class Attributes
ul
li Knowledge in
a(href="http://coffeescript.org/") CoffeeScript
| , or a desire to learn. Most of our code is in this language.
| If you're a fan of Ruby or Python, you'll feel right at home.
| It's just JavaScript, but with a nicer syntax.
li Some experience in programming and personal initiative.
| We'll help you get oriented, but we can't spend much time training you.
h4 How To Join
p
| Anyone can help out! Just check out our
a(title='GitHub', href="https://github.com/codecombat/codecombat", tabindex=-1) GitHub
| to get started, and check the box below to mark yourself as a brave Archmage and get the latest news by email.
| Want to chat about what to do or how to get more deeply involved?
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Email us
| , or find us in our
a(href="http://www.hipchat.com/g3plnOKqa") public HipChat room
| and we'll go from there!
label.checkbox(for="developer").well
input(type='checkbox', name="developer", id="developer")
| Get emails on new coding opportunities and announcements.
.saved-notification ✓ Saved
#artisan
.class_image
img(src="/images/pages/contribute/artisan.png", alt="")
h3 Artisan (Level Builder)
p We must construct additional levels!
| People be clamoring for more content, and we can only build so many ourselves.
| Right now your workstation is level one; our level editor is barely
| usable even by its creators, so be wary.
| If you have visions of campaigns spanning for-loops to
a(href="http://stackoverflow.com/questions/758088/seeking-contrived-example-code-continuations/758105#758105") Mondo Bizzaro
| to then this class might be for you.
h4 Class Attributes #scribe
ul
li Any experience in building content like this would be nice, such as using .class_image.header-scrolling-fix
| Blizzard's level editors. But not required! img(src="/images/pages/contribute/scribe.png", alt="")
li A hankering to do a whole lot of testing and iteration.
| To make good levels, you need to take it to others and watch them play it, h3.header-scrolling-fix Scribe (Article Editor)
| and be prepared to find a lot of things to fix. p CodeCombat isn't just going to be a bunch of levels.
li For the time being, endurance en par with an Adventurer. | It will also include a resource for knowledge, a wiki of programming concepts that levels can hook into.
| Our Level Editor is super preliminary and frustrating to use. You have been warned! | That way rather than each Artisan having to describe in detail what a comparison operator is, they
| can simply link their level to the Article describing them that is already written for the player's edification.
| Something along the lines of what the
a(href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide") Mozilla Developer Network
| has built. If your idea of fun is articulating the concepts of programming in Markdown form,
| then this class might be for you.
h4 How To Join h4 Class Attributes
p The Level Editor is live! Go forth and fiddle with it. ul
| Right now for the sake of security, you can't make Components (the most powerful part of level building) li Skill in words is pretty much all you need.
| but be in touch with us and we'll see if we can make what you need. | Not only grammar and spelling, but able to convey complicated ideas to others.
| See the
a(href="https://docs.google.com/document/d/117tMcL95T1KY8BDisr0iGi5Frb2ZvBJTC0us5hyQkJY/edit?usp=sharing") preliminary documentation h4 How To Join
| for more info, and please comment on it so we can make the whole system better. p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, your experience with programming and
| what sort of things you'd like to write about. We'll go from there!
label.checkbox(for="level_creator").well a(href="/contribute/scribe")
input(type='checkbox', name="level_creator", id="level_creator") h3 Learn More About Becoming A Diligent Scribe
| Get emails on level editor updates and announcements.
.saved-notification ✓ Saved label.checkbox(for="article_editor").well
input(type='checkbox', name="article_editor", id="article_editor")
| Get emails about article writing announcements.
.saved-notification ✓ Saved
#adventurer
.class_image #diplomat
img(src="/images/pages/contribute/adventurer.png", alt="")
h3 Adventurer (Level Playtester) .class_image.header-scrolling-fix
p Let's be clear about your role: you are the tank. You're going to take heavy damage. img(src="/images/pages/contribute/diplomat.png", alt="")
| We need people to try out brand-new levels and help identify how to make things better.
| The pain will be enormous; making good games is a long process and no one gets h3.header-scrolling-fix Diplomat (Translator)
| it right the first time. p So, if there's one thing we learned from the
| If you can endure and have a high constitution score, then this class might be for you. a(href="blog.codecombat.com/post/64658141307/codecombat-in-y-combinator") launch in October
| , it's that there
h4 Class Attributes | is sizeable interest in CodeCombat in other countries, particularly Brazil!
ul | We're building a corps of translators eager to turn one set of words into
li A thirst for learning. You want to learn how to code and we want to teach you how to code. | another set of words to get CodeCombat as accessible across the world as possible.
| You'll probably be doing most of the teaching in this case, though. | If you like getting sneak peeks at upcoming content and getting these levels to
li Charismatic. Be gentle but articulate about what needs improving, and offer suggestions | your fellow nationals ASAP, then this class might be for you.
| on how to improve.
h4 How To Join h4 Class Attributes
p Either get together with (or recruit!) an Artisan and work with them, or ul
| check the box below to receive emails when there are new levels to test. li Fluency in English and the language you would like to translate to.
| We'll also be posting about levels to review on our networks like | When conveying complicated ideas, it's important to have a strong grasp in both!
a(href="http://discourse.codecombat.com/category/adventurer") our forum
| , h4 How to Join
a(href="https://www.facebook.com/codecombat") Facebook p We've started a lot of initial translations at
| , a(href="https://docs.google.com/a/codecombat.com/spreadsheet/ccc?key=0AjsR1nOoMQ4MdFBqS1NqUmRTVG1hbEMxWTZEd1JrNXc&usp=drive_web#gid=0") this Google Doc
a(href="http://www.reddit.com/r/CodeCombat/") Reddit | , so check it out and add things for your language. Also, check this box below to
| , | keep up-to-date on new internationalization developments!
a(href="https://twitter.com/CodeCombat") Twitter
| , and
a(href="https://plus.google.com/115285980638641924488/posts") Google+
| , so if you prefer to be notified those ways, sign up there!
label.checkbox(for="tester").well a(href="/contribute/diplomat")
input(type='checkbox', name="tester", id="tester") h3 Learn More About Becoming A Great Diplomat
| Get emails when there are new levels to test.
.saved-notification ✓ Saved
#scribe
.class_image label.checkbox(for="translator").well
img(src="/images/pages/contribute/scribe.png", alt="") input(type='checkbox', name="translator", id="translator")
| Get emails about i18n developments and levels to translate.
h3 Scribe (Article Editor) .saved-notification ✓ Saved
p CodeCombat isn't just going to be a bunch of levels.
| It will also include a resource for knowledge, a wiki of programming concepts that levels can hook into.
| That way rather than each Artisan having to describe in detail what a comparison operator is, they
| can simply link their level to the Article describing them that is already written for the player's edification.
| Something along the lines of what the
a(href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide") Mozilla Developer Network
| has built. If your idea of fun is articulating the concepts of programming in Markdown form,
| then this class might be for you.
h4 Class Attributes
ul
li Skill in words is pretty much all you need.
| Not only grammar and spelling, but able to convey complicated ideas to others.
h4 How To Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, your experience with programming and
| what sort of things you'd like to write about. We'll go from there!
label.checkbox(for="article_editor").well
input(type='checkbox', name="article_editor", id="article_editor")
| Get emails about article writing announcements.
.saved-notification ✓ Saved
#diplomat
.class_image
img(src="/images/pages/contribute/diplomat.png", alt="")
h3 Diplomat (Translator)
p So, if there's one thing we learned from the
a(href="blog.codecombat.com/post/64658141307/codecombat-in-y-combinator") launch in October
| , it's that there
| is sizeable interest in CodeCombat in other countries, particularly Brazil!
| We're building a corps of translators eager to turn one set of words into
| another set of words to get CodeCombat as accessible across the world as possible.
| If you like getting sneak peeks at upcoming content and getting these levels to
| your fellow nationals ASAP, then this class might be for you.
h4 Class Attributes
ul
li Fluency in English and the language you would like to translate to.
| When conveying complicated ideas, it's important to have a strong grasp in both!
h4 How to Join
p We've started a lot of initial translations at
a(href="https://docs.google.com/a/codecombat.com/spreadsheet/ccc?key=0AjsR1nOoMQ4MdFBqS1NqUmRTVG1hbEMxWTZEd1JrNXc&usp=drive_web#gid=0") this Google Doc
| , so check it out and add things for your language. Also, check this box below to
| keep up-to-date on new internationalization developments!
label.checkbox(for="translator").well
input(type='checkbox', name="translator", id="translator")
| Get emails about i18n developments and levels to translate.
.saved-notification ✓ Saved
#ambassador
#ambassador
.class_image .class_image.header-scrolling-fix
img(src="/images/pages/contribute/ambassador.png", alt="") img(src="/images/pages/contribute/ambassador.png", alt="")
h3 Ambassador (Support) h3.header-scrolling-fix Ambassador (Support)
p This is a community we're building, and you are the connections. p This is a community we're building, and you are the connections.
| We've got Olark chats, emails, and social networks with lots of people to talk with | We've got Olark chats, emails, and social networks with lots of people to talk with
| and help get acquainted with the game and learn from. | and help get acquainted with the game and learn from.
| If you want to help people get involved and have fun, and get a good feel of the pulse of | If you want to help people get involved and have fun, and get a good feel of the pulse of
| CodeCombat and where we're going, then this class might be for you. | CodeCombat and where we're going, then this class might be for you.
h4 Class Attributes h4 Class Attributes
ul ul
li Communication skills. Be able to identify the problems players are having li Communication skills. Be able to identify the problems players are having
| and help them solve them. Also, keep the rest of us informed about what | and help them solve them. Also, keep the rest of us informed about what
| players are saying, what they like and don't like and want more of! | players are saying, what they like and don't like and want more of!
h4 How to Join h4 How to Join
p p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd | , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll go from there! | be interested in doing. We'll go from there!
p p
strong Note strong Note
| : One of our top priorities is to build multiplayer where players having difficulty | : One of our top priorities is to build multiplayer where players having difficulty
| solving levels can summon higher level wizards to help them. | solving levels can summon higher level wizards to help them.
| This will be a great way for ambassadors to do their thing. We'll keep you posted! | This will be a great way for ambassadors to do their thing. We'll keep you posted!
label.checkbox(for="support").well a(href="/contribute/ambassador")
input(type='checkbox', name="support", id="support") h3 Learn More About Becoming A Helpful Ambassador
| Get emails on support updates and multiplayer developments.
.saved-notification ✓ Saved
#counselor
.class_image label.checkbox(for="support").well
img(src="/images/pages/contribute/counselor.png", alt="") input(type='checkbox', name="support", id="support")
| Get emails on support updates and multiplayer developments.
.saved-notification ✓ Saved
#counselor
h3 Counselor (Expert) .class_image.header-scrolling-fix
p Do you have life experience? img(src="/images/pages/contribute/counselor.png", alt="")
| A different perspective on things that can help us decide how to shape CodeCombat?
| Of all these roles, this will probably take the least time, but
| individually you may make the most difference.
| We're on the lookout for wisened sages, particularly in areas like: teaching,
| game development, open source project management, technical recruiting, entrepreneurship,
| or design.
p Or really anything that is relevant to the development of CodeCombat.
| If you have knowledge and want to share it to help grow this project, then
| this class might be for you.
h4 Class Attributes
ul
li Experience, in any of the areas above or something you think might be helpful.
li A little bit of free time!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll put you in our contact list and be in touch
| when we could use advice (not too often).
div.clearfix h3.header-scrolling-fix Counselor (Expert)
p Do you have life experience?
| A different perspective on things that can help us decide how to shape CodeCombat?
| Of all these roles, this will probably take the least time, but
| individually you may make the most difference.
| We're on the lookout for wisened sages, particularly in areas like: teaching,
| game development, open source project management, technical recruiting, entrepreneurship,
| or design.
p Or really anything that is relevant to the development of CodeCombat.
| If you have knowledge and want to share it to help grow this project, then
| this class might be for you.
h4 Class Attributes
ul
li Experience, in any of the areas above or something you think might be helpful.
li A little bit of free time!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll put you in our contact list and be in touch
| when we could use advice (not too often).
a(href="/contribute/counselor")
h3 Learn More About Becoming A Valuable Counselor
div.clearfix