Translating to PT

Author: gporpino

sites/pt/docs/docs.step

@@ -0,0 +1,74 @@
+message <<MARKDOWN
+Este site é mantido por voluntários do RailsBridge. Caso você identifique alguma melhoria, por favor faça um [pull request](https://github.com/railsbridge/docs) ou [deixe-nos uma nota](https://github.com/railsbridge/docs/issues/new) via GitHub Issues (não são necessários conhecimentos tecnológicos).
+MARKDOWN
+
+h1 'Configurações'
+
+site_desc 'installfest', <<-MARKDOWN
+Instruções para instalar Ruby e Rails no seu computador. Você precisa fazer isto antes de ir a um Rails workshop!
+MARKDOWN
+
+h1 'Rails'
+
+site_desc 'intro-to-rails', <<-MARKDOWN
+O curriculum "clássico" do RailsBridge  (Suggestotron). Mostra passo a passo como fazer uma aplicação Rails, um comando de cada vez, usando helpers como `rails generate scaffold`.
+MARKDOWN
+
+site_desc 'intermediate-rails', <<-MARKDOWN
+Curriculum para estudantes que já fizeram o Suggestotron mais de uma vez. O 'Easy mode' está desligado agora - este curriculum não vai te dizer o que escrever!
+MARKDOWN
+
+h1 'Frontend'
+
+site_desc 'frontend', <<-MARKDOWN
+HTML + CSS para iniciantes. Faça um website, não é necessário servidor!
+MARKDOWN
+
+site_desc 'intro-to-javascript', <<-MARKDOWN
+A Javascript specific curriculum that walks you through [building a simple game](http://snake-tutorial.zeespencer.com/).
+MARKDOWN
+
+h1 'Ruby'
+
+site_desc 'learn-to-code', <<-MARKDOWN
+A course which teaches how to code from the ground up, using Alex's [Learn To Code In Ruby](http://codelikethis.com/lessons/learn_to_code) curriculum. It's geared towards people who may never have written code before and teaches just enough Ruby to get across basic principles like variables, objects, and the command line.
+MARKDOWN
+
+site_desc 'ruby', <<-MARKDOWN
+A ruby-specific curriculum, expanded from the "Ruby for Beginners" slide deck. Still new, with room for your contributions.
+MARKDOWN
+
+h1 'Other'
+
+site_desc 'workshop', <<-MARKDOWN
+The Railsbridge junkyard! Slide decks for opening/closing presentations, teacher training.
+MARKDOWN
+
+message <<MARKDOWN
+# RailsBridge curriculum-related FAQ
+
+### Can I use the RailsBridge curricula at my event?
+
+Anyone can use this site! It's under a Creative Commons license ([CC-BY,  specifically](http://creativecommons.org/licenses/by/3.0/)), which means you're welcome to share, remix, or use our content commercially. We just ask for attribution.
+
+Slightly different: if you're organizing an event and wonder if it could be considered a RailsBridge Workshop, we just have two requests:
+
+* The event should be free of charge.
+* The event should work toward making tech more welcoming!
+
+If you're not doing those two things, you can totally still use the site, we just ask that you not call your event a RailsBridge workshop.
+(Charity workshops have used "Rails Workshop featuring the RailsBridge curriculum" in the past, which is neat.)
+
+
+### I want to help, but I don't know how.
+
+First, [make a GitHub account](https://github.com/). Then, [create an issue](https://github.com/railsbridge/docs/issues) with the idea you have. We'll help you turn it into reality (assuming it's in line with our lofty goals :D).
+
+Don't know what you could work on? Browse the [issues list](https://github.com/railsbridge/docs/issues) and the [To Do list](https://github.com/railsbridge/docs/wiki/RailsBridge-To-Do-List). Those have lots of ideas.
+
+
+### I have a different question about RailsBridge.
+
+The [RailsBridge website](http://www.railsbridge.org) probably has an answer!
+
+MARKDOWN

sites/pt/frontend/HTML_attributes.step

@@ -0,0 +1,152 @@
+goals do
+  goal "Code some common HTML attributes"
+  goal "Use class and id attributes as hooks for CSS styles"
+end
+
+overview do
+
+  message <<-MARKDOWN
+
+## Why do we need attributes?
+
+HTML tags first give your browser information about the content they wrap. They can also be extended to include other information about the content, like what type of form input the tag is, or like the `media` attribute, which we saw on the last page can be used to indicate whether the content will be displayed on a screen or printed out.
+
+When creating a form, you'll use attributes to tell the browser what type of input they are,
+and the results will be easy to tell apart. This input:
+
+  MARKDOWN
+  source_code :html, "<input type='radio' name='rando-radio'>"
+  message <<-MARKDOWN
+
+looks like a radio button: <input type='radio' name='rando-radio'>, but
+
+  MARKDOWN
+  source_code :html, "<input type='password' name='fake-password' value='ick'>"
+  message <<-MARKDOWN
+
+looks like a password text input: <input type='password' name='rando-radio' value='ick'> even though they use the same **tag**.
+
+## How do CSS and HTML connect?
+
+Tags and attributes, mostly!
+
+So far we've only applied styles to HTML tags like `<p>` and `<h1>`. But what if we want to apply a style to only a few of the instances of a given tag? We don't want _every_ paragraph to look special, so we can't add our style directly to the `<p>` tag.
+
+This is where `class=` and `id=` attributes come in. Adding a class or ID to an HTML attribute allows you to add CSS styles to just that attribute.
+
+
+  MARKDOWN
+
+end
+
+steps do
+
+  step do
+    message "Let's add some classes and ids to our HTML. Start by adding one or two more paragraphs of text to the bottom of your HTML document. The last lines might look like this:"
+    source_code :html, <<HTML
+<h1>Hello <em>World</em>!</h1>
+<p>My name is Rachel.</p>
+<p>I like:</p>
+<ul>
+  <li>Polka Dots</li>
+  <li>Soccer</li>
+  <li>Programming</li>
+</ul>
+<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
+HTML
+  end
+
+  step do
+    message "Add the class 'special' to your first paragraph. It'll look something like this:"
+    source_code :html, <<HTML
+<h1>Hello <em>World</em>!</h1>
+<p class="special">My name is Rachel.</p>
+<p>I like:</p>
+<ul>
+  <li>Polka Dots</li>
+  <li>Soccer</li>
+  <li>Programming</li>
+</ul>
+<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
+HTML
+    message "Refresh the page in the browser. You should see any new paragraphs you added, but no styling changes."
+    message "Many HTML attributes, like classes and ids, don't directly convey visual information. Your site will look the exact same until we use the class to add CSS styling."
+  end
+
+  step do
+    message "To add a style rule that will apply to a class, use the syntax `.class-name` for your selector. It will be almost the same as the styles that you added to `<h1>` and `<p>`, but with a period at the beginning of your class name."
+    message "Try giving the 'special' class a green border. Add this rule inside of your `style` tag:"
+    source_code :css, <<CSS
+.special {
+  border: 1px solid green;
+}
+CSS
+    message "Refresh the page in the browser. You'll see something like this:"
+    img src: 'img/css_class.png'
+  end
+
+  step do
+    message "Let's wrap your name in a `span` tag and give that an ID of 'user-name'. It'll look something like this:"
+    source_code :html, <<HTML
+<h1>Hello <em>World</em>!</h1>
+<p class="special">My name is
+  <span id="user-name">Rachel</span>
+</p>
+<p>I like:</p>
+<ul>
+  <li>Polka Dots</li>
+  <li>Soccer</li>
+  <li>Programming</li>
+</ul>
+<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
+HTML
+    message "Save and refresh the page in the browser. Again, you shouldn't see any difference."
+  end
+
+  step do
+    message "Now, add the corresponding style rule for your ID, using the syntax `#id-name` for your selector. Try making the 'user-name' id look bold. Add this rule inside of your `style` tag:"
+    source_code :css, <<CSS
+#user-name {
+  font-weight: bold;
+}
+CSS
+    message <<-MARKDOWN
+(Note: The span is just an element that lets you apply a class, id, or other attribute to a string of text without adding any line breaks. Browsers won't give it any styling by default.)
+
+Once you add your style rule and refresh the page in the browser, you'll see something rather ugly like this:
+    MARKDOWN
+    img src: 'img/css_id.png'
+  end
+
+end
+
+
+explanation do
+  message <<-MARKDOWN
+
+## When should I use a class, and when should I use an ID?
+
+### Classes
+A **class** attribute should be used to group elements that _could_ exist
+more than once on a given page. For example, you might give certain
+paragraphs a class of `"special"` and use that class to highlight them.
+Even if you only have one paragraph that's special now, you might
+want to add more later.
+
+A class attribute will look like `class="special"` in the HTML and `.special` in the CSS. Don't mix up where the dot goes!
+
+### IDs
+An **id** is a unique label. Use it to identify things you'd only have one
+of. For example, if you ran a news website, you would only have one element
+on a page that would serve as a masthead, and you could give it an id
+like `id="handsome-header"`
+
+An id attribute will look like `id="handsome-header"` in the HTML, and `#handsome-header` in the CSS.
+
+Within these guidelines, when you use classes and IDs is a matter of style / taste.
+MARKDOWN
+
+end
+
+next_step "dev_tools"
+

sites/pt/frontend/HTML_structure.step

@@ -0,0 +1,83 @@
+goals do
+  goal "Add standard HTML head and body tags"
+  goal "Add a page title"
+  goal "Understand the use of non-visible tags like head"
+end
+
+overview do
+
+  message <<-MARKDOWN
+
+## The HTML tag and Doctype
+
+The line `<!DOCTYPE html>` is called the doctype, and it tells the browser which flavor of HTML you're using. `<!DOCTYPE html>` tells your browser you're using HTML5, the latest version of HTML. 
+
+(You may see older doctypes out there that are longer and a lot more complicated, from when people
+used various HTML and XHTML versions, but those are annoying, and you can usually just
+use this short version for new websites.)
+
+The `<html>` encloses all the rest of your page, and states unequivocally, "Here is my HTML!!!"
+
+## Pages, Like People, Have a Head and a Body
+
+  MARKDOWN
+  source_code :html, <<HTML
+<!DOCTYPE html>
+<html>
+  <head>Invisible, Important Stuff</head>
+  <body>Actual Visible Content</body>
+</html>
+HTML
+  message <<-MARKDOWN
+
+### The Head
+
+The head contains information _about_ the document, including:
+
+* what language or character set you're using
+* what the page title should be
+* what CSS and JavaScript files to include (and where they are)
+
+Information in the `<head>` section is __not__ displayed. 
+
+It can also contain metadata tags that can tell a search engine or another
+program more about the file, like who wrote it or what keywords are relevant.
+
+### The Body
+
+The Body contains the actual content of your file, the things you'll want your users
+to be able to see, read, or interact with!
+
+  MARKDOWN
+
+end
+
+steps do
+
+  step do
+    message <<-MARKDOWN
+Let's add the doctype, HTML, head, and body tags to your file. It should look like this:
+
+<img src='img/hello_structure.png'>
+
+Save the file and refresh your browser. Everything should look mostly the same.
+
+    MARKDOWN
+  end
+
+  step do
+    message "Let's add a title to our page within the `<head>` section. Add this line:"
+    source_code :html, "<title>My Sample HTML page</title>"
+    message <<-MARKDOWN
+When you refresh your browser, you should see the title on the tab in Chrome.
+
+<img src='img/hello_title.png'>
+
+(If it doesn't show up, double check that you put the line between the opening and closing head tags, and that you saved your file before refreshing.)
+    MARKDOWN
+  end
+
+end
+
+next_step "basic_CSS"
+