Update README.md

hpfn · web-flow · commit 970c5f896768 · 2017-02-21T11:16:16.000-03:00
new format and small typos
diff --git a/pt/css/README.md b/pt/css/README.md
@@ -6,39 +6,37 @@ Nosso blog ainda parece feio, certo? Está na hora de deixar ele melhor! Para is
 
 Do inglês "Cascading Style Sheets", CSS é uma linguagem usada para descrever o aspecto e a formatação de um website escrito numa linguagem de marcação (como HTML). Imagine ele como sendo um tipo de "maquiagem" para nosso site ;).
 
-Mas nós não queremos iniciar do zero de novo, certo? Nós tentaremos, mais uma vez, usar algo que foi feito e disponibilizado de graça por programadores na internet. Você sabe, reinventar a roda não é nada divertido.
+Mas nós não queremos iniciar do zero de novo, certo? Mais uma vez, nós iremos usar algo que foi feito por programadores e disponibilizado de graça na internet. Você sabe, reinventar a roda não é nada divertido.
 
 ## Vamos usar o Bootstrap!
 
 Bootstrap é um dos mais famosos e populares frameworks de HTML e CSS para desenvolver sites bonitos: https://getbootstrap.com/
 
-Foi escrito por programadores que trabalharam no Twitter e agora é desenvolvido por voluntários de todo o mundo.
+Foi escrito por programadores que trabalhavam no Twitter e agora é desenvolvido por voluntários de todo o mundo!
 
 ## Instalar Bootstrap
 
-Para instalar o Bootstrap, você precisa adicionar ao seu cabeçalho (na tag `<head>` dentro do seu arquivo `.html`)(`blog/templates/blog/post_list.html`):
+Para instalar o Bootstrap, você precisa adicionar isso ao seu cabeçalho `<head>`, dentro do seu arquivo `.html`:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
 ```
-    
-
-Isso não adiciona nenhum arquivo ao seu projeto. O código apenas aponta para arquivos que existem na internet. Apenas siga em frente, abra seu site e atualize a página. Aqui ele está!
 
-![Figura 14.1][1]
+Isso não adiciona nenhum arquivo ao seu projeto. O código apenas aponta para arquivos que existem na internet. Apenas siga em frente, abra seu site e atualize a página. Veja como está!
 
- [1]: images/bootstrap1.png
+![Figure 14.1](images/bootstrap1.png)
 
-Já parecendo melhor!
+Já parece mais bonito!
 
 ## Arquivos estáticos no Django
 
-Finalmente nós teremos um olhar mais atento nessas coisas que chamamos **arquivos estáticos**. Arquivos estáticos são todas as suas imagens e arquivos CSS -- arquivos que não são dinâmicos, então seu conteúdo não depende do contexto da requisição e será o mesmo para todos os usuários.
-
+Finalmente nós iremos ver mais de perto nessas coisas que chamamos de __arquivos estáticos__. Arquivos estáticos são todas as suas imagens e arquivos CSS -- arquivos que não são dinâmicos, então seu conteúdo não depende do contexto da requisição e será o mesmo para todos os usuários.
+ 
 ### Onde colocar os arquivos estáticos para Django
 
-Como você viu quando rodamos `collectstatic` no servidor, Django já sabe onde encontrar os arquivos estáticos para o built-in "admin" app. Agora só precisamos adicionar alguns arquivos estáticos para nosso próprio app, `blog`.
+Django já sabe onde encontrar os arquivos estáticos para o built-in "admin" app. Agora só precisamos adicionar alguns arquivos estáticos para nosso próprio app, `blog`.
 
 Fazemos isso através da criação de uma pasta chamada `static` dentro do aplicativo do blog:
 
@@ -64,54 +62,48 @@ Vamos criar um arquivo CSS agora, para adicionar seu próprio estilo para sua p
 
 Hora de escrever CSS! Abra o arquivo `static/css/blog.css` no seu editor de código.
 
-Não vamos nos aprofundar muito em customizar e aprender sobre CSS aqui, porque é bem fácil e você pode aprender no seu próprio após este workshop. Recomendamos fortemente fazer este [Codeacademy HTML & CSS couse][2] para aprender tudo o que você precisa saber sobre como tornar seus sites mais bonitos com CSS.
-
- [2]: https://www.codecademy.com/tracks/web
+Não vamos nos aprofundar muito em customizar e aprender sobre CSS aqui, porque é bem fácil e você pode aprender sozinho após este workshop.  Tem uma recomendação de um curso gratuito para aprender mais no final da página.
 
-Mas vamos fazer pelo menos um pouco. Talvez possamos mudar a cor do nosso cabeçalho? Para entender as cores, computadores usam códigos especiais. Eles começam com `#` e são seguidos por 6 letras (A-F) e números (0-9). Você pode encontrar exemplos de códigos de cores aqui: http://www.colorpicker.com/. Você pode também usar [cores predefinidas][3], como `red` e `green`.
+Mas vamos fazer pelo menos um pouco. Talvez possamos mudar a cor do nosso cabeçalho? Para entender sobre cores, computadores usam códigos especiais. Eles começam com `#` e são seguidos por 6 letras (A-F) e números (0-9). Por exemplo, o código para azul é `#0000FF`. Você pode encontrar vários exemplos de códigos de cores aqui: http://www.colorpicker.com/. Você pode também usar [cores predefinidas](http://www.w3schools.com/colors/colors_names.asp), como `vermelho - red` e `verde - green`.
 
- [3]: http://www.w3schools.com/cssref/css_colornames.asp
-
-Em seu arquivo `static/css/blog.css` você deve adicionar o seguinte código:
+Em seu arquivo `blog/static/css/blog.css` você deve adicionar o seguinte código:
 
+{% filename %}blog/static/css/blog.css{% endfilename %}
 ```css
 h1 a {
     color: #FCA205;
 }
 ```
-    
 
-`h1 a` é um seletor de CSS. Isso significa que nós estamos aplicando nossos estilos para qualquer elemento `a` dentro de um elemento `h1`(i.e. quando tivermos no código algo como: `<h1><a href="">link</a></h1>`). Neste caso nós estamos dizendo para mudar a cor para `#FCA205`, que é laranja. Claro, você pode colocar a cor que você quiser aqui!
+`h1 a` é um seletor de CSS. Isso significa que nós estamos aplicando nossos estilos para qualquer elemento `a` dentro de um elemento `h1`. Então quando tivermos no código algo como `<h1><a href="">link</a></h1>`, o estilo `h1 a` será aplicado. Neste caso nós estamos dizendo para mudar a cor para `#FCA205`, que é laranja. Claro, você pode colocar a cor que você quiser aqui!
 
-Em um arquivo CSS podemos determinar estilos para elementos no arquivo HTML. Os elementos são identificados pelo nome do elemento (ou seja, `a`, `h1`, `body`), o atributo de `class` ou o atributo `id`. Classe e id são nomes que você mesmo dá ao elemento. Classes definem grupos de elementos, e ids apontam para elementos específicos. Por exemplo, a seguinte tag pode ser identificada por CSS usando a tag de nome `a`, a classe `link_externo` ou a identificação de `link_para_a_pagina_wiki`:
+Em um arquivo CSS podemos determinar estilos para elementos no arquivo HTML. A primeira maneira de identificar elementos é pelo nome do elemento. Você de lembrar dessas tags na seção de HTML. Coisas como `a`, `h1` e  `body` são todas exemplos de nomes de elemeto. Nós também identificamos elementos pelo atributo `class` ou o atributo `id`. Classe e id são nomes que você mesmo dá ao elemento. Classes definem grupos de elementos, e ids apontam para elementos específicos. Por exemplo, você poderia identificar a seguinte tag usando a tag de nome `a`, a classe `external_link` ou a id `link_para_a_wiki_page`:
 
 ```html
 <a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
 ```
-    
-
-Leia sobre [Seletores CSS em w3schools][4].
 
- [4]: http://www.w3schools.com/cssref/css_selectors.asp
+Você pode ler mais sobre [Seletores CSS em w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
 
-Então, precisamos também contar o nosso template HTML que nós adicionamos CSS. Abra o arquivo `blog/templates/blog/post_list.html` e adicione essa linha no início do mesmo:
+Então, precisamos também contar ao nosso template HTML que nós adicionamos um CSS. Abra o arquivo `blog/templates/blog/post_list.html` e adicione essa linha bem no início do mesmo:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 {% load staticfiles %}
 ```
-    
 
-Estamos apenas carregando arquivos estáticos aqui :). Depois, entre o `<head>` `e/</head>`, depois dos links para os arquivos de CSS do Bootstrap (o navegador lê os arquivos na ordem que eles são dados, então o código em nosso arquivo pode substituir o código em arquivos de inicialização), adicione esta linha:
+Estamos apenas carregando arquivos estáticos aqui :). Agora, entre as tags `<head>` e `</head>`, depois dos links para os arquivos de CSS do Bootstrap, adicione esta linha:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 <link rel="stylesheet" href="{% static 'css/blog.css' %}">
 ```
-    
 
-Só dissemos que nosso modelo onde se encontra nosso arquivo CSS.
+O navegador lê os arquvios na ordem que eles são informados, então nós temos que nos certificar que esse é o lugar certo. Senão, o código em nosso arquivo pode sobreescrever o código nos arquivos do Bootstrap. Só dissemos ao nosso template onde se encontra nosso arquivo CSS.
 
 Agora, seu arquivo deve ficar assim:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 {% load staticfiles %}
 <html>
@@ -136,78 +128,76 @@ Agora, seu arquivo deve ficar assim:
     </body>
 </html>
 ```
-    
 
 OK, salve o arquivo e atualize o site!
 
-![Figura 14.2][5]
-
- [5]: images/color2.png
+![Figure 14.2](images/color2.png)
 
 Bom trabalho! Talvez a gente também queira dar um pouco de ar ao nosso site e aumentar a margem do lado esquerdo? Vamos tentar!
 
+{% filename %}blog/static/css/blog.css{% endfilename %}
 ```css
 body {
     padding-left: 15px;
 }
 ```
-    
 
 Adicione isto ao seu arquivo CSS, salve e veja como ele funciona!
 
-![Figura 14.3][6]
-
- [6]: images/margin2.png
+![Figure 14.3](images/margin2.png)
 
 Talvez a gente possa customizar a fonte no nosso cabeçalho? Cole na seção `<head>` do arquivo `blog/templates/blog/post_list.html` o seguinte:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
-<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
 ```
-    
 
-Essa linha irá importar uma fonte chamada *Lobster* do Google Fonts (https://www.google.com/fonts).
+Como antes, cconfira a ordem e coloque antes do link para `blog/static/css/blog.css`. Essa linha irá importar uma fonte chamada *Lobster* do Google Fonts (https://www.google.com/fonts).
+
+Encontre o bloco com a declaração `h1 a` (o código entre chaves `{` and `}`) dentro do arquivo CSS `blog/static/css/blog.css`.  Agora adicione a linha `font-family: 'Lobster';` entre as chaves, e atualize a página:
+
 
 Agora adicione a linha `font-family: 'Lobster';` no CSS do arquivo `static/css/blog.css` dentro do bloco de declaração `h1 a` (o código entre as chaves `{` e `}`) e atualize a página:
 
+{% filename %}blog/static/css/blog.css{% endfilename %}
 ```css
 h1 a {
     color: #FCA205;
     font-family: 'Lobster';
 }
 ```
-    
-
-![Figura 14.3][7]
 
- [7]: images/font.png
+![Figure 14.3](images/font.png)
 
 Incrível!
 
-Como mencionado acima, CSS usa o conceito de classes, que basicamente permite que você nomeie parte do código HTML e aplique estilos apenas à esta parte, sem afetar as outras. É super útil se você tiver duas divs, mas eles estão fazendo algo muito diferente (como o seu cabeçalho e seu post), então você não quer que eles fiquem parecidos.
+Como mencionado acima, CSS usa o conceito de classes, que basicamente permite que você nomeie parte do código HTML e aplique estilos apenas à esta parte, sem afetar as outras. É super útil se você tiver duas divs, mas eles estão fazendo algo muito diferente (como o seu cabeçalho e seu post). Uma classe pode ajudar você a fazer com que eles tenhm um visual diferente.
 
 Vá em frente e o nomeie algumas partes do código HTML. Adicione uma classe chamada de `page-header` para o `div` que contém o cabeçalho, assim:
 
+
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 <div class="page-header">
     <h1><a href="/">Django Girls Blog</a></h1>
 </div>
 ```
-    
 
 E agora, adicione uma classe `post` em sua `div` que contém um post de blog.
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 <div class="post">
     <p>published: {{ post.published_date }}</p>
     <h1><a href="">{{ post.title }}</a></h1>
     <p>{{ post.text|linebreaksbr }}</p>
 </div>
 ```
-    
 
-Agora adicionaremos blocos de declaração de seletores diferentes. Seletores começando com `.` se referem às classes. Existem muitos tutoriais e explicações sobre CSS na Web para ajudar você a entender o código a seguir. Por enquanto, basta copiar e colá-lo em seu arquivo `mysite/static/css/blog.css`:
+Agora adicionaremos blocos de declaração para seletores diferentes. Seletores começando com `.` se referem às classes. Existem muitos tutoriais e explicações sobre CSS na Web para ajudar você a entender o código a seguir. Por enquanto, basta copiar e colá-lo em seu arquivo `blog/static/css/blog.css` :
 
+{% filename %}blog/static/css/blog.css{% endfilename %}
 ```css
 .page-header {
     background-color: #ff9400;
@@ -230,7 +220,6 @@ h1, h2, h3, h4 {
 }
 
 .date {
-    float: right;
     color: #828282;
 }
 
@@ -257,10 +246,10 @@ h1, h2, h3, h4 {
     color: #000000;
 }
 ```
-    
 
 Então envolva o código HTML que exibe as mensagens com declarações de classes. Substitua isto:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 {% for post in posts %}
     <div class="post">
@@ -270,18 +259,18 @@ Então envolva o código HTML que exibe as mensagens com declarações de classe
     </div>
 {% endfor %}
 ```
-    
 
 no arquivo `blog/templates/blog/post_list.html` por isto:
 
+{% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 <div class="content container">
     <div class="row">
         <div class="col-md-8">
             {% for post in posts %}
                 <div class="post">
                     <div class="date">
-                        {{ post.published_date }}
+                        <p>published: {{ post.published_date }}</p>
                     </div>
                     <h1><a href="">{{ post.title }}</a></h1>
                     <p>{{ post.text|linebreaksbr }}</p>
@@ -291,18 +280,25 @@ no arquivo `blog/templates/blog/post_list.html` por isto:
     </div>
 </div>
 ```
-    
 
 Salve esses arquivos e atualize seu site.
 
-![Figura 14.4][8]
+![Figure 14.4](images/final.png)
+
+Look at the code we just pasted to find the places where we added classes in the HTML and used them in the CSS. Where would you make the change if you wanted the date to be turquoise?
+
+Don't be afraid to tinker with this CSS a little bit and try to change some things. Playing with the CSS can help you understand what the different things are doing. If you break something, don't worry – you can always undo it!
+
+We really recommend taking this free online [Codeacademy HTML & CSS course](https://www.codecademy.com/tracks/web). It can help you learn all about making your websites prettier with CSS.
+
+Ready for the next chapter?! :)
 
- [8]: images/final.png
 
-Uhuu! Ficou incrível, né? O código que nós acabamos de colar não é tão difícil de entender e você deve ser capaz de entender a maior parte apenas lendo.
+Uhuu! Ficou incrível, né? Olhe para o código que nós acabamos de colar para encontrar os lugares aonde nós adicionamos classes no HTML e as usamos no CSS. Aonde você faria a mudança para que a data ficasse com a cor turquesa ?
 
-Não tenha medo de mexer um pouco com esse CSS e tentar mudar algumas coisas. Se você quebrar alguma coisa, não se preocupe, você sempre pode desfazê-lo!
+Não tenha medo de brincar com esse CSS um pouco e tente mudar algumas coisas. Brincar com o CSS pode ajudar você a entender as
+diferentes coisas que estão sendo feitas. Se você bagunçar tudo, não se preocupe - vocÊ sempre pode voltar atrás!
 
-De qualquer forma, recomendamos que faça esse curso on-line [Codeacademy HTML & CSS Course][2] como dever de casa pós-workshop para aprender tudo o que você precisa saber sobre como tornar seus sites mais bonitos com CSS.
+Nós realmente recomendamos que faça esse curso on-line [Codeacademy HTML & CSS Course](https://www.codecademy.com/tracks/web). Ele pode ajudar você a aprender tudo sobre como tornar seus sites mais bonitos com CSS.
 
 Pronto para o próximo capítulo?! :)
