You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> **Nota** Se você já realizou os passos da Instalação, não é preciso fazer isso de novo - você pode pular direto para a [Introdução ao Python](../python_introduction/README.md).
3
+
> **Observação:** Se você já realizou os passos da Instalação, não precisa fazer isso de novo - pode pular direto para a [Introdução ao Python](../python_introduction/README.md).
Você pode [pular este capítulo](http://tutorial.djangogirls.org/en/installation/#install-python) se não estiver usando um Chromebook. Caso esteja, sua experiência de instalação será um pouco diferente. Você pode ignorar o restante das instruções de instalação.
2
2
3
-
### Cloud 9
3
+
### IDE na (PaizaCloud Cloud IDE, AWS Cloud9)
4
4
5
-
Cloud 9 é uma ferramenta que te dá um editor de código e acesso a um computador conectado à Internet onde você pode instalar, escrever e executar software. Durante o tutorial, o Cloud 9 atuará como sua *máquina local*. Você ainda estará executando comandos em uma interface de terminal, como seus colegas de classe no OS X, Ubuntu ou Windows, mas seu terminal estará conectado a um computador que está em algum outro lugar que o Cloud 9 configurou para você.
5
+
O IDE na nuvem é uma ferramenta que fornece um editor de código e acesso a um computador em execução na Internet, onde você pode instalar, gravar e executar software. Pela duração desse tutorial, o IDE na nuvem funcionará como sua *máquina local*. Você ainda estará executando comandos em uma interface de terminal (ou prompt de comando), como suas colegas de oficina no OS X, Ubuntu ou Windows, mas seu prompt estará conectado a um computador remoto configurado pelo Cloud 9. Estas são as instruções para IDEs na nuvem (PaizaCloud Cloud IDE, AWS Cloud9). Você pode escolher uma das IDEs na nuvem e seguir as instruções.
6
6
7
-
1. Instale o Cloud 9 através da [Chrome Web Store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)
8
-
2. Acesse o site [c9.io](https://c9.io)
9
-
3. Cadastre-se para criar uma conta
10
-
4. Clique em *Create a New Workspace*
11
-
5. Dê o nome de *django-girls*
12
-
6. Selecione *Blank* (segundo a partir da direita na linha inferior com logotipo laranja)
7
+
#### IDE na Nuvem PaizaCloud
13
8
14
-
Agora a sua tela deve exibir uma interface com uma barra lateral, uma grande janela principal com algum texto e uma pequena janela na parte inferior, semelhante a isto:
9
+
1. Vá para *PaizaCloud Cloud IDE *
10
+
2. Registre-se
11
+
3. Clique em *New Server*
12
+
4. Clique no botão Terminal (no lado esquerdo da janela)
15
13
16
-
{% filename %}Cloud 9{% endfilename %}
14
+
Agora você deve ver uma interface com uma barra lateral, botões no canto esquerdo. Clique no botão "Terminal" para abrir a janela de terminal com prompt desta maneira:
15
+
16
+
{% filename %}Terminal{% endfilename %}
17
+
18
+
$
19
+
20
+
21
+
O terminal na IDE na nuvem PaizaCloud está pronto para suas instruções. Você pode ajustar o tamanho ou maximizar a janela para torná-la um pouco maior.
22
+
23
+
#### AWS Cloud9
24
+
25
+
1. Vá para [AWS Cloud9](https://aws.amazon.com/cloud9/)
26
+
2. Registre-se
27
+
3. Clique em *Create Environment*
28
+
29
+
Agora, a sua tela deve exibir uma interface com uma barra lateral, uma grande janela principal com algum texto e uma pequena janela na parte inferior, semelhante a isto:
30
+
31
+
{% filename %}bash{% endfilename %}
17
32
18
33
seunomedeusuário:~/workspace $
19
34
20
35
21
-
Esta área inferior é seu *terminal*, onde você vai dar as instruções para o computador que o Cloud 9 preparou para você. Você pode redimensionar a janela para torná-la um pouco maior.
36
+
Essa janela na parte inferior é o seu terminal. Você pode usá-la para enviar instruções para o computador remoto Cloud 9. Se preferir, vocêpode redimensioná-la para que fique um pouco maior.
22
37
23
38
### Ambiente Virtual
24
39
25
-
Um ambiente virtual (também chamado de virtualenv) é como se fosse uma caixa privada onde nós podemos colocar código de computador útil para um projeto que estejamos trabalhando. Nós os utilizamos para manter os vários pedaços de código que queremos para nossos vários projetos separados, para que as coisas não se misturem entre os projetos.
40
+
Um ambiente virtual (também chamado de virtualenv) é como uma caixa privada em que podemos colocar código de computador útil para um projeto em que estejamos trabalhando. Nós os utilizamos para manter separados uns dos outros os vários pedaços de código que queremos utilizar em nossos diferentes projetos para que eles não se misturem.
26
41
27
42
No seu terminal, na parte de baixo da interface do Cloud 9, execute o seguinte:
28
43
@@ -32,7 +47,7 @@ No seu terminal, na parte de baixo da interface do Cloud 9, execute o seguinte:
32
47
sudo apt install python3.6-venv
33
48
34
49
35
-
Se isso ainda não funcionar, peça ajuda ao seu treinador.
50
+
Se não funcionar, peça ajuda à sua monitora.
36
51
37
52
Em seguida, execute:
38
53
@@ -45,16 +60,16 @@ Em seguida, execute:
45
60
pip install django~={{ book.django_version }}
46
61
47
62
48
-
(note que na última linha nós utilizamos um til seguido de um sinal de igual: ~=).
63
+
(note que na última linha, utilizamos um til seguido de um sinal de igual: `~=`).
49
64
50
65
### GitHub
51
66
52
67
Crie uma conta no [GitHub](https://github.com).
53
68
54
69
### PythonAnywhere
55
70
56
-
O tutorial do Django Girls inclui uma seção que chamamos de Deployment (algo como "implantação", em Português), que é o processo de pegar o código que alimenta a sua nova aplicação web e movê-lo para um computador de acesso público (chamado de servidor), então outras pessoas serão capazes de ver seu trabalho.
71
+
O tutorial do Django Girls inclui uma seção que chamamos de Deploy (ou "implantação", em Português), que é o processo de mover o código que alimenta a sua nova aplicação web para um computador de acesso público (chamado de servidor) para que outras pessoas possam ver o seu trabalho.
57
72
58
-
Esta parte é um pouco esquisita quando o tutorial é feito num Chromebook, dado que já estamos usando um computador que está na Internet (ao contrário de, digamos, um laptop). Porém, ainda útil, já que podemos pensar no ambiente do Cloud 9 como um lugar pra nosso trabalho "em andamento" e Python Anywhere como um lugar para mostrar nosso trabalho conforme ele vai ficando mais completo.
73
+
Esta parte é um pouco estranha quando o tutorial é feito num Chromebook por que já estamos usando um computador que está na Internet (ao contrário de, digamos, um laptop). No entanto, ainda é útil, já que podemos pensar no ambiente do Cloud 9 como um lugar pra nosso trabalho em andamento e no Python Anywhere, como um lugar para mostrar nosso trabalho conforme ele vai ficando mais completo.
59
74
60
-
Assim, crie uma nova conta Python Anywhere em [www.pythonanywhere.com](https://www.pythonanywhere.com).
75
+
Assim, crie uma nova conta Python Anywhere em *www.pythonanywhere.com*.
Copy file name to clipboardExpand all lines: pt/code_editor/README.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,8 @@
4
4
5
5
Você está prestes a escrever sua primeira linha de código, então é hora de baixar um editor de código!
6
6
7
-
> **Observação:**Se você estiver usando um Chromebook, pule este capítulo e certifique-se de seguir as instruções para a [Configuração do Chromebook](../chromebook_setup/README.md).
7
+
> **Observação:**se você estiver usando um Chromebook, pule este capitulo e certifique-se de seguir as instruções em [Chromebook Setup](../chromebook_setup/README.md). A IDE na nuvem que escolher (PaizaCloud Cloud IDE ou AWS Cloud9) inclui um editor de código, e quando abrir um arquivo na IDE a partir do menu Arquivos, você estará automaticamente usando este editor de código.
8
8
>
9
-
> **Observação:** Você talvez já tenha feito isso anteriormente no capítulo de Instalação - se for o caso, pode pular direto para o próximo capítulo!
9
+
> **Observação:** Você talvez já tenha feito isso no capítulo de Instalação - se for o caso, pode pular direto para o próximo capítulo!
Copy file name to clipboardExpand all lines: pt/code_editor/instructions.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -16,16 +16,16 @@ O Sublime Text é um editor muito popular. Ele tem um período de avaliação gr
16
16
17
17
## Atom
18
18
19
-
O Atom é um editor de código recente criado pelo [GitHub](https://github.com/). Ele é gratuito, tem código aberto e está disponível para Windows, OS X e Linux.
19
+
Atom é outro editor popular. É gratuito, de código aberto e disponível para Windows, OS X e Linux. Atom é desenvolvido por [ GitHub ](https://github.com/).
20
20
21
21
[Baixe-o aqui](https://atom.io/)
22
22
23
23
## Por que estamos instalando um editor de código?
24
24
25
25
Você deve estar se perguntando porque estamos instalando esse software editor de código específico ao invés de usar algo como Word ou Bloco de Notas.
26
26
27
-
A primeira razão é que o código precisa estar em **texto puro, sem formatação**, e o problema com programas como o Word e o Textedit é que eles não produzem texto puro de fato. Eles produzem texto rico (com fontes e formatação), usando formatos personalizados, como [RTF](https://en.wikipedia.org/wiki/Rich_Text_Format) (Rich Text Format, ou Formato de Texto Rico, em português).
27
+
A primeira razão é que o código precisa estar em **texto puro, sem formatação**, e programas como o Word e o Textedit não produzem texto puro de fato. Eles produzem texto rico (com fontes e formatação), usando formatos personalizados, como [RTF](https://en.wikipedia.org/wiki/Rich_Text_Format) (Rich Text Format, ou Formato de Texto Rico, em português).
28
28
29
-
A segunda razão é que editores de código são especializados em edição de código, então eles podem fornecer funcionalidades úteis, como destacar o código com cores de acordo com seu significado ou fechar aspas automaticamente para você.
29
+
A segunda razão é que editores de código são especializados em edição de código, então eles possuem funcionalidades úteis, como destacar o código com cores de acordo com seu significado ou fechar aspas automaticamente.
30
30
31
31
Veremos tudo isso em ação mais pra frente. Logo, logo, seu bom e velho editor de código será uma de suas ferramentas preferidas. :)
Isso não adiciona nenhum arquivo ao seu projeto, apenas aponta para arquivos que existem na Internet. Vá em frente, abra seu website e atualize a página. Aqui está!
28
+
Isso não adiciona nenhum arquivo ao seu projeto, apenas aponta para arquivos que existem na Internet. Então vá em frente, abra seu website e atualize a página. Aqui está!
29
29
30
30
31
31
@@ -37,7 +37,7 @@ Finalmente, vamos dar uma olhada mais de perto nessas coisas que chamamos de **a
37
37
38
38
### Onde colocar os arquivos estáticos para o Django
39
39
40
-
O Django já sabe onde encontrar os arquivos estáticos para o app pré-instalado "admin". Agora só precisamos adicionar alguns arquivos estáticos para o nosso próprio app, `blog`.
40
+
O Django já sabe onde encontrar os arquivos estáticos para o app "admin" pré-instalado. Agora só precisamos adicionar alguns arquivos estáticos para o nosso próprio app, `blog`.
41
41
42
42
Fazemos isso criando uma pasta chamada `static` dentro da aplicação blog:
43
43
@@ -73,12 +73,13 @@ Em seu arquivo `blog/static/css/blog.css`, adicione o seguinte código:
`h1 a` é um seletor CSS. Isto significa que estamos aplicando nossos estilos a qualquer elemento `a` dentro de um elemento `h1`. Então quando tivermos algo como um `<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. Mas é claro que você pode colocar a corque quiser aqui!
82
+
`h1 a` é um seletor CSS. Isto significa que estamos aplicando nossos estilos a qualquer elemento `um` dentro de um elemento `h1`; o seletor `h2 a` faz a mesma coisa com elementos `h2`. Então quando tivermos algo como um `<h1><a href="">link</a></h1>`, o estilo `h1 a` será aplicado. Neste caso, estamos dizendo para mudar sua cor para `#C25100`, que é um laranja escuro. Ou você pode colocar sua própria cor, mas certifique-se de que ela tenha um bom contraste com um fundo branco!
82
83
83
84
Em um arquivo CSS, nós determinamos estilos para elementos do arquivo HTML. A primeira maneira de identificar elementos é usando seus nomes. Você pode se lembrar desses nomes porque são a mesma coisa que as tags da seção HTML. `a`, `h1` e `body` são exemplos de nomes de elementos. Também identificamos elementos pelo atributo `class` ou pelo atributo `id`. Class e id são nomes que você mesma dá ao elemento. Classes definem grupos de elementos e ids apontam para elementos específicos. Por exemplo, a tag a seguir pode ser identificada usando a tag de nome `a`, a classe `external_link` ou o id de `link_to_wiki_page`:
84
85
@@ -88,7 +89,7 @@ Em um arquivo CSS, nós determinamos estilos para elementos do arquivo HTML. A p
88
89
89
90
Você pode ler mais sobre [Seletores CSS no w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
90
91
91
-
Nós também precisamos dizer ao nosso template HTML que adicionamos algum CSS. Abra o arquivo `blog/templates/blog/post_list.html` e adicione esta linha bem no começo dele:
92
+
Nós também precisamos dizer ao nosso template HTML que adicionamos algum CSS. Abra o arquivo `blog/templates/blog/post_list.html`no editor de código e adicione esta linha bem no começo dele:
@@ -197,18 +198,18 @@ E agora, adicione uma classe `post` em sua `div` que contém um post de blog.
197
198
```html
198
199
<divclass="post">
199
200
<p>publicado: {{ post.published_date }}</p>
200
-
<h1><ahref="">{{ post.title }}</a></h1>
201
+
<h2><ahref="">{{ post.title }}</a></h2>
201
202
<p>{{ post.text|linebreaksbr }}</p>
202
203
</div>
203
204
```
204
205
205
-
Agora, adicionaremos blocos de declaração a seletores diferentes. Seletores começando com `.` se referem às classes. Existem vários tutoriais e explicações excelentes sobre CSS na Web que podem te ajudar a entender melhor o código a seguir. Por enquanto, basta copiar e colá-lo em seu arquivo `blog/static/css/blog.css`:
206
+
Agora, adicionaremos blocos de declaração a seletores diferentes. Seletores começando com `.` se referem às classes. Existem vários tutoriais e explicações excelentes sobre CSS na Web que podem te ajudar a entender melhor o código a seguir. Por enquanto, copie e cole esse código em seu arquivo `mysite/static/css/blog.css`:
0 commit comments