Permalink
Browse files

Skeleton for de translation

  • Loading branch information...
1 parent 22fc44b commit b3fd8639e57f58c81971902fb903c9b770bf06db @deadprogram deadprogram committed Sep 9, 2012
View
@@ -1,6 +1,6 @@
module KidsRuby
class Language
- LANGUAGES_SUPPORTED = %w{en es ja fr}
+ LANGUAGES_SUPPORTED = %w{en es ja fr de}
class << self
def system
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Programming</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-1-1", "../../shared/hacketyhack/code1_1.rb");
+ loadCode("#code-1-2", "../../shared/hacketyhack/code1_2.rb");
+ loadCode("#code-1-3", "../../shared/hacketyhack/code1_3.rb");
+ loadCode("#code-1-4", "../../shared/hacketyhack/code1_4.rb");
+ loadCode("#code-1-5", "../../shared/hacketyhack/code1_5.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Basic Programming</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+
+
+ <article class="lesson"><h1>Hello there!</h1>
+ <section class="page"><h1>Round One</h1>
+ <p>So, you'd like to learn how to hack code with the best of 'em, eh? Well, you've come to the right place. This is the very first lesson I have to share with you. It all starts here.</p>
+ <p>I want to get you started off on the best possible foot with making programs, so we'll start off by talking a little bit about what programming is, and then we'll write some basic programs to draw fun things on the screen. Sound good? Off we go!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Let's talk about programming</h1>
+ <section class="page"><h1>It's all about instructions</h1>
+ <p>When you get down to it, programming is all about <strong>algorithms</strong>. That's a big fancy word for 'a list of instructions.' Every program is simply a big to-do list of instructions for the computer to follow.</p>
+ <p>You can turn almost anything into a list of instructions if you really think about it. Most of the time, you've got so much practice at doing things that you don't even think about these individual steps. You just do them. It's very natural.</p>
+ </section>
+
+ <section class="page"><h1>The computer is simple</h1>
+ <p>Unfortunately, computers are actually quite simple. This may be contrary to everything you've ever heard, but it's the truth. Even though we compare computers to things like our brains, it's a really poor analogy. What computers are actually really good at is performing simple, boring things over and over again very accurately. They can't think for themselves!</p>
+ <p>This is why computers appear to be complex. They blindly follow whatever orders they're given, without any thought about how those instructions are good or bad. It's hard to think in such simple terms!</p>
+ </section>
+
+ <section class="page"><h1>Explain yourself well</h1>
+ <p>It's important to remember that you have to fully explain yourself to the computer when you're programming. It can't figure out what you're trying to say, so you have to say what you mean!</p>
+ <p>This takes some practice, so we're going to start off with some exercises in explaining ourselves in very basic terms. It's almost like trying to explain math to a young child: you have to go slowly, triple check your work, and have some patience when it just doesn't quite get it.</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lists of Instructions</h1>
+ <section class="page"><h1>A to-do list, not a shopping list</h1>
+ <p>When I say that computers follow lists of instructions, I mean a to-do list, not a shopping list. What I'm trying to say is that these lists have an <strong>order</strong> to them that the computer follows. It does each step in turn as quickly as it possibly can.</p>
+ <p>A shopping list is a different kind of list entirely. You can go to whichever aisle you choose, and as long as you get everything before you leave, you're A-OK. This isn't what the computer does at all.</p>
+ </section>
+
+ <section class="page"><h1>How would you tell a person to do it?</h1>
+ <p>Let's try an example: if you had to tell someone in words how to draw a square on a piece of paper, how would you do it?</p>
+ <p>You're not allowed to say "like this" or "this way," that's cheating! You have to spell out every detail.</p>
+ </section>
+
+ <section class="page"><h1>Once again: computers are simple</h1>
+ <p>How'd you do? I can't see what you said, but here's an example of how simple computers are compared to people. Did you forget to mention how long each side of the square is? If you didn't good job!</p>
+ <p>Here's how I'd do it, by the way. This isn't the only right answer, it's just an example:</p>
+ <p>1. Put your pen down on the paper.</p>
+ <p>2. Draw right one inch.</p>
+ <p>3. Draw down one inch.</p>
+ <p>4. Draw left one inch.</p>
+ <p>5. Draw up one inch.</p>
+ <p>6. Take your pen off of the paper.</p>
+ <p>7. You're done!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Turtles, all the way down.</h1>
+ <section class="page"><h1>Drawing... with turtles?</h1>
+ <p>Okay! Enough of these thinking experiments. Let's actually make something. I bet you've been wondering when that was going to start, right? It's really important to get the basics down first.</p>
+ <p>We're going to tell the computer how to draw shapes... with turtles. Yes, you heard me right. You're going to have to give these instructions to a turtle.</p>
+ <p>This particular turtle is carrying a pen. You have a piece of paper. The turtle will follow your every word. But the turtle is a bit slow, and needs careful instruction. Are you up to it?</p>
+ </section>
+
+ <section class="page"><h1>The Turtle and its commands</h1>
+ <p>We have to tell Ruby that we want to tell the Turtle what to do. To do that, we have a <code>Turtle</code> command. We can tell the <code>Turtle</code> two things:</p>
+ <p><code>draw</code>: the turtle will follow our instructions at lightning speed, drawing our entire image in the blink of an eye.
+ <p><code>start</code>: an interactive window will appear, which lets you see the turtle move at each step in the program. You can move at your own pace. This is useful if the turtle isn't doing what you expect!
+ </section>
+
+ <section class="page"><h1>Type it in!</h1>
+ <p>Cool. Now type this:</p>
+ <p><code>Turtle.draw</code></p>
+ <p>The period in between the <code>Turtle</code> and the <code>draw</code> connects them together. Programming languages have rules, just like English has rules! You can think of <code>Turtle</code> like a subject, and <code>draw</code> as a verb. Together, they make a sentence: hey turtle, draw me something!</p>
+ <p>Once you've typed that in, go ahead and click the 'Run' button. The turtle moves so quickly in <code>draw</code> mode that you won't even see him, but I assure you, he's there!</p>
+ </section>
+
+ <section class="page"><h1>Do... what I tell you to</h1>
+ <p>Awesome! We've got the turtle going, at least. Now we need to tell it what we want to draw!</p>
+ <p>Remember when we said that all programs are lists of instructions? In this case, our program only has one instruction: <code>Turtle</code>draw something! But we need to be able to give the <code>Turtle</code> its own list of instructions.</p>
+ <p>To do this, we'll use two words: <code>do</code> and <code>end</code>. These two words together make up a <em>sublist</em> of things, just for the <code>Turtle</code>!</p>
+ </section>
+
+ <section class="page"><h1>Changing the background</h1>
+ <p>Let's try this: we can tell the <code>Turtle</code> that we want to use a different background color by using the <code>background</code> command. Check it out:</p>
+ <pre id="code-1-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Type this in and click 'Run'!</p>
+ </section>
+
+ <section class="page"><h1>The Turtle gets its orders</h1>
+ <p>Cool stuff! The background is now maroon. <a href="colors.html">Click here to see a full list of colors that are supported</a>.
+ <p>This is also how you make lists of instructions for the <code>Turtle</code> to follow. To make it a little easier to see, programmers will often put two spaces before sublists. Get in the habit now, you'll thank me later!</p>
+ </section>
+
+ <section class="page"><h1>The pen</h1>
+ <p>Now that we've got a snazzy background color, how do we draw some lines? Well, the first thing you need to know about is the pen. The <code>Turtle</code> carries a pen along, and drags it along the ground behind itself. You can change the color of line the pen draws with the <code>pencolor</code> command.</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Drawing lines</h1>
+ <section class="page"><h1>Sally forth!</h1>
+ <p>Okay, enough dilly-dallying. Let's tell the turtle to draw a line! Here's my line. Give this one a shot, then try your own colors and numbers!</p>
+ <pre id="code-1-2" class="sampleCode">Code automatically inserted here...</pre>
+ <p>50 is the number of pixels to move forward, by the way.</p>
+ </section>
+
+ <section class="page"><h1>You spin me right round, baby</h1>
+ <p>Great! So you've got a line. But what if you don't want the <code>Turtle</code> to move forward? Well, you can tell it to turn by using a <code>turnleft</code> or <code>turnright</code> command, like this:</p>
+ <pre id="code-1-3" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Give that a shot, then play with it a bit!</p>
+ <p>If you're wondering what 90 means, it's the number of degrees that it'll turn.</p>
+ </section>
+
+ <section class="page"><h1>I like to move it, move it</h1>
+ <p>Okay, now we're cooking! Let's break this down again:</p>
+ <p><code>Turtle.draw</code> tells the <code>Turtle</code> we want it to draw some things. The period connects the two.</p>
+ <p><code>do ... end</code> is a sublist of things. This is what we want the <code>Turtle</code> to be drawing. Not for the rest of our program.
+ <p><code>pencolor</code> sets the color of the pen the <code>Turtle</code> is dragging along behind him, and <code>background</code> sets the color of the background.</p>
+ <p><code>turnright</code> (or its buddy <code>turnleft</code>) tells the <code>Turtle</code> " to turn to the right or left.</p>
+ <p><code>forward</code> (or its friend <code>backward</code>) tells the <code>Turtle</code> to move.</p>
+ </section>
+
+ <section class="page"><h1>Let's try drawing that square</h1>
+ <p>Go ahead. Give it a shot. Try to get the <code>Turtle</code> to draw a square.</p>
+ <p>I'll wait. :)</p>
+ </section>
+
+ <section class="page"><h1>Here's my version</h1>
+ <p>Here's how I did it:</p>
+ <pre id="code-1-4" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Repeating ourselves</h1>
+ <section class="page"><h1>Pete and Repeat...</h1>
+ <p>Man, that was a ton of repetition! My fingers almost fell off typing <code>forward</code> and <code>turnright</code> there!</p>
+ <p>I have good news, though: I mentioned something earlier about computers. It turns out that doing boring, repetitive things is something they're really good at! They'll do the same thing over and over again, forever even as long as you ask nicely.</p>
+ </section>
+
+ <section class="page"><h1>Repeating repeating ourselves ourselves</h1>
+ <p>Check it out: our <code>Turtle</code> actually knows numbers. For example:</p>
+ <pre id="code-1-5" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Try running this example. It also draws a square! Wow!</p>
+ </section>
+
+ <section class="page"><h1>4.times</h1>
+ <p>It's pretty easy: <code>4</code> can take instructions too, just like our <code>Turtle</code>. This command repeats a list of instructions that many times. Fun! Four times. And the <code>do</code> and <code>end</code> show which list of instructions go with the <code>4</code> rather than with the <code>Turtle</code>.</p>
+ </section>
+
+ <section class="page"><h1>Try it out!</h1>
+ <p>Have a blast: make some fun shapes of your own!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Summary</h1>
+ <section class="page"><h1>Congratulations!</h1>
+ <p>Wow, you're awesome. Pat yourself on the back. High five someone. You've got these basics down!</p>
+ <p>Check out the <em>Basic Ruby</em> lesson to pick up some totally different and exciting things!</p>
+ </section>
+ </article>
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit b3fd863

Please sign in to comment.