Skip to content

Commit c8fc42e

Browse files
committed
Fixed DjangoGirls#389 -- Clean format in spanish version
1 parent 5488a03 commit c8fc42e

File tree

11 files changed

+275
-275
lines changed

11 files changed

+275
-275
lines changed

es/css/README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ Fue escrito por programadores que trabajaban para Twitter y ahora colaboran en
1616

1717
## Instalar Bootstrap
1818

19-
Para instalar Bootstrap, tienes que añadir esto al `< head >` en el archivo `.html` (`blog/templates/blog/post_list.html`):
19+
Para instalar Bootstrap, tienes que añadir esto al `<head>` en el archivo `.html` (`blog/templates/blog/post_list.html`):
2020

2121
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
2222
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
2323
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
24-
24+
2525

2626
Esa línea no incluye ningún fichero a tu proyecto, simplemente utiliza uno existente en internet. Adelante, abre tu página web y actualízala. ¡Ahí lo tienes!
2727

@@ -44,14 +44,14 @@ En primer lugar, necesitamos crear un directorio para almacenar nuestros archivo
4444
djangogirls
4545
├─── static
4646
└─── manage.py
47-
47+
4848

4949
Abre el fichero `mysite/settings.py`, desplázate hasta el fondo del fichero y agregue las siguientes líneas:
5050

5151
STATICFILES_DIRS = (
5252
os.path.join(BASE_DIR, "static"),
5353
)
54-
54+
5555

5656
De esta manera Django sabrá dónde encontrar los archivos estáticos.
5757

@@ -62,7 +62,7 @@ Vamos ahora a crear un fichero CSS para añadir tu propio estilo a tu página we
6262
static
6363
└─── css
6464
blog.css
65-
65+
6666

6767
Hora de escribir CSS! Abra el archivo `static/css/blog.css` en el editor de código.
6868

@@ -79,14 +79,14 @@ En el fichero `static/css/blog.css` debes añadir el siguiente código:
7979
h1 a {
8080
color: #FCA205;
8181
}
82-
8382

84-
`h1 un` es un Selector de CSS. Esto significa que estamos aplicando nuestros estilos a `cualquier elemento dentro de un elemento <code>h1`</code> (por ejemplo cuando tenemos en código algo como: `< h1 >< a href = "" > enlace < /a >< / h1 >`). En este caso, estamos diciendo que cambie su color a `#FCA205`, que es de color naranja. Por supuesto, puedes poner tu propio color aquí!
83+
84+
`h1 un` es un Selector de CSS. Esto significa que estamos aplicando nuestros estilos a `cualquier elemento dentro de un elemento <code>h1`</code> (por ejemplo cuando tenemos en código algo como: `<h1><a href = ""> enlace </a></h1>`). En este caso, estamos diciendo que cambie su color a `#FCA205`, que es de color naranja. Por supuesto, puedes poner tu propio color aquí!
8585

8686
En el fichero CSS se definen los estilos de los elementos que se encuentran en el fichero HTML. Los elementos se identifican por el nombre del elemento (es decir, `a` `h1`, `body`), el atributo `class` o el atributo `id`. Class y id son nombres que le das al elemento tu mismo. Classes definen grupos de elementos y ids apuntan a elementos específicos. Por ejemplo, la siguiente etiqueta puede identificarse mediante CSS usando el nombre `a`, la clase `external_link` o el id `link_to_wiki_page`:
8787

8888
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
89-
89+
9090

9191
Leer sobre [Selectores de CSS en w3schools][4].
9292

@@ -98,7 +98,7 @@ Entonces, necesitamos decirle a nuestra plantilla HTML que hemos añadido CSS. A
9898
{% load staticfiles %}
9999
```
100100

101-
Estamos cargando archivos estáticos aquí:). Luego, entre el `< head >` `y/< / head >`, después de los enlaces a los archivos CSS Bootstrap (el navegador lee los archivos en el orden que los das, así que nuestro archivo de código puede sobreescribir partes del código en de Bootstrap), añade la siguiente línea:
101+
Estamos cargando archivos estáticos aquí:). Luego, entre el `<head>` y `</head>`, después de los enlaces a los archivos CSS Bootstrap (el navegador lee los archivos en el orden que los das, así que nuestro archivo de código puede sobreescribir partes del código en de Bootstrap), añade la siguiente línea:
102102

103103
```html
104104
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
@@ -133,30 +133,30 @@ Tu archivo ahora debe verse así:
133133
</body>
134134
</html>
135135
```
136-
136+
137137

138138
OK, guarde el archivo y actualiza el sitio!
139139

140140
![Figure 14.2][5]
141141

142142
[5]: images/color2.png
143143

144-
¡ Buen trabajo! Tal vez también nos gustaría dar un poco de aire a nuestro sitio web y aumentar el margen en el lado izquierdo. Vamos a intentarlo!
144+
¡Buen trabajo! Tal vez también nos gustaría dar un poco de aire a nuestro sitio web y aumentar el margen en el lado izquierdo. Vamos a intentarlo!
145145

146146
```css
147147
body {
148148
padding-left: 15px;
149149
}
150150
```
151-
151+
152152

153153
Añade esto a tu CSS, guarda el archivo y mira cómo funciona!
154154

155155
![Figure 14.3][6]
156156

157157
[6]: images/margin2.png
158158

159-
¿Tal vez podemos personalizar la tipografía en nuestra cabecera? Pegue esto en `< head >` del archivo `blog/templates/blog/post_list.html`:
159+
¿Tal vez podemos personalizar la tipografía en nuestra cabecera? Pegue esto en `<head>` del archivo `blog/templates/blog/post_list.html`:
160160

161161
```html
162162
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
@@ -172,7 +172,7 @@ h1 a {
172172
font-family: 'Lobster';
173173
}
174174
```
175-
175+
176176

177177
![Figure 14.3][7]
178178

@@ -189,7 +189,7 @@ Adelante! Nombra algunas partes del código HTML. Añade una clase llamada `page
189189
<h1><a href="/">Django Girls Blog</a></h1>
190190
</div>
191191
```
192-
192+
193193

194194
Y ahora añade la clase `post` a tu `div` que contiene una entrada del blog.
195195

@@ -200,7 +200,7 @@ Y ahora añade la clase `post` a tu `div` que contiene una entrada del blog.
200200
<p>{{ post.text|linebreaks }}</p>
201201
</div>
202202
```
203-
203+
204204

205205
Ahora añadiremos bloques de declaración a diferentes selectores. Selectores a partir de `.` se refieren a las clases. Hay muchos tutoriales y explicaciones sobre CSS en la web para ayudarte entender el siguiente codigo. Por ahora, sólo copia y pega en tu archivo `mysite/static/css/blog.css`:
206206

@@ -253,7 +253,7 @@ h1, h2, h3, h4 {
253253
color: #000000;
254254
}
255255
```
256-
256+
257257

258258
Luego envuelve el código HTML que muestra los mensajes con las declaraciones de clases. Cambia esto:
259259

@@ -266,7 +266,7 @@ Luego envuelve el código HTML que muestra los mensajes con las declaraciones de
266266
</div>
267267
{% endfor %}
268268
```
269-
269+
270270

271271
En `blog/templates/blog/post_list.html` con esto:
272272

@@ -287,7 +287,7 @@ En `blog/templates/blog/post_list.html` con esto:
287287
</div>
288288
</div>
289289
```
290-
290+
291291

292292
Guarda los archivos y actualiza tu sitio.
293293

es/django_forms/README.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Tenemos que crear un archivo con este nombre en el directorio `blog`.
1212

1313
blog
1414
└── forms.py
15-
15+
1616

1717
Ok, vamos abrirlo y vamos a escribir el siguiente código:
1818

@@ -27,7 +27,7 @@ class PostForm(forms.ModelForm):
2727
model = Post
2828
fields = ('title', 'text',)
2929
```
30-
30+
3131

3232
Primero necesitamos importar Django forms (`from django import forms`) y, obviamente, nuestro modelo de `Post` (`from .models import Post`).
3333

@@ -46,7 +46,7 @@ Una vez más vamos a crear: un enlace a la página, una dirección URL, una vist
4646
Es hora de abrir `blog/templates/blog/base.html`. Vamos a añadir un enlace en `div` llamado `encabezado de página`:
4747

4848
```html
49-
<a href = "{url 'blog.views.post_new' %}" class = "top-menu" ><span class = "glyphicon glyphicon-plus" ></span></a>
49+
<a href="{url 'blog.views.post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
5050
```
5151

5252
Ten en cuenta que queremos llamar a nuestra nueva vista `post_new`.
@@ -80,7 +80,7 @@ Después de agregar la línea, tu archivo html debería tener este aspecto:
8080
</body>
8181
</html>
8282
```
83-
83+
8484

8585
Después de guardar y actualizar la página `http://127.0.0.1:8000` obviamente podrá ver un error de `NoReverseMatch` familiar, ¿verdad?
8686

@@ -104,7 +104,7 @@ urlpatterns = [
104104
url(r'^post/new/$', views.post_new, name='post_new'),
105105
]
106106
```
107-
107+
108108

109109
Después de actualizar el sitio, veremos un `AttributeError`, puesto que no tenemos la vista `post_new` implementado. Vamos a añadir ahora.
110110

@@ -114,7 +114,7 @@ Es el momento de abrir el archivo `blog/views.py` y agregar las siguientes líne
114114

115115
```python
116116
from .forms import PostForm
117-
```
117+
```
118118

119119
y nuestra *vista*:
120120

@@ -152,17 +152,17 @@ Bueno, vamos a ver cómo quedará el HTML en `post_edit.html`:
152152
</form>
153153
{% endblock %}
154154
```
155-
156155

157-
Es hora de actualizar! ¡ Si! El formulario se muestra!
156+
157+
iEs hora de actualizar! ¡Si! El formulario se muestra!
158158

159159
![Nuevo formulario][2]
160160

161161
[2]: images/new_form2.png
162162

163-
Pero, ¡ un momento! Si escribes algo en los campos `título` y `texto` y tratas de salvar-¿qué pasa?
163+
Pero, ¡un momento! Si escribes algo en los campos `título` y `texto` y tratas de salvar-¿qué pasa?
164164

165-
¡ Nada! Una vez más estamos en la misma página y el texto se ha ido... no se añade ningún mensaje nuevo. Entonces, ¿qué ha ido mal?
165+
¡Nada! Una vez más estamos en la misma página y el texto se ha ido... no se añade ningún mensaje nuevo. Entonces, ¿qué ha ido mal?
166166

167167
La respuesta es: nada. Tenemos que trabajar un poco más en nuestra *vista*.
168168

@@ -174,9 +174,9 @@ Abre `blog/views.py` una vez más. De momento todo lo que tenemos en la vista `p
174174
def post_new(request):
175175
form = PostForm()
176176
return render(request, 'blog/post_edit.html', {'form': form})
177-
```
177+
```
178178

179-
Cuando enviamos el formulario, estamos en la misma vista, pero esta vez tenemos algunos datos más en la `request`, concretamente en `request.POST`. ¿Recuerdas que en el archivo HTML la definición de `< form >` tenía la variable `method = "POST"`? Todos los campos del formulario estan ahora en `request.POST`. No deberías renombrar la variable `POST` (el único nombre que también es válido para la variable `method` es `GET`, pero no tenemos tiempo para explicar cuál es la diferencia).
179+
Cuando enviamos el formulario, estamos en la misma vista, pero esta vez tenemos algunos datos más en la `request`, concretamente en `request.POST`. ¿Recuerdas que en el archivo HTML la definición de `<form>` tenía la variable `method = "POST"`? Todos los campos del formulario estan ahora en `request.POST`. No deberías renombrar la variable `POST` (el único nombre que también es válido para la variable `method` es `GET`, pero no tenemos tiempo para explicar cuál es la diferencia).
180180

181181
En nuestra *vista* tenemos dos posibles situaciones a contemplar. Primera: cuando accedemos a la página por primera vez y queremos un formulario en blanco. Segundo: cuando volvemos a la *vista* con los datos del formulario que acabamos de escribir. Así que tenemos que añadir una condición (utilizaremos `if` para eso).
182182

@@ -186,13 +186,13 @@ if request.method == "POST":
186186
else:
187187
form = PostForm()
188188
```
189-
189+
190190

191191
Es hora de llenar los puntos `[...]`. Si el `method` es `POST` queremos construir el `PostForm` con los datos del formulario, ¿no? Lo haremos con:
192192

193193
```python
194194
form = PostForm(request.POST)
195-
```
195+
```
196196

197197
Fácil! Lo siguiente es verificar si el formulario es correcto (todos los campos necesarios están definidos y no hay valores incorrectos). Lo hacemos con `form.is_valid()`.
198198

@@ -204,21 +204,21 @@ if form.is_valid():
204204
post.author = request.user
205205
post.save()
206206
```
207-
207+
208208

209209
Básicamente, tenemos que hacer dos cosas aquí: salvar el formulario con `form.save` y añadirle un autor (ya que no había ningún campo de `autor` en el `PostForm` y este campo es obligatorio). `cometer = False` significa que no queremos guardar el modelo `Post` todavía - queremos añadir el autor primero. La mayoría de las veces utilizarás `form.save()`, sin `commit = False`, pero en este caso, tenemos que hacerlo. `post.Save()` conservará los cambios (añadiendo a autor) y se creará una nueva entrada en el blog!
210210

211211
Por último, sería genial si podemos inmediatamente ir a la página `post_detail` de la entrada de blog que se acaba de crear, ¿no? Para hacerlo necesitamos una importación más:
212212

213213
```python
214214
from django.shortcuts import redirect
215-
```
215+
```
216216

217217
Añádelo al principio del archivo. Y ahora podemos decir: ves a la página `post_detail` de la entrada recién creada.
218218

219219
```python
220220
return redirect('blog.views.post_detail', pk=post.pk)
221-
```
221+
```
222222

223223
`blog.views.post_detail` es el nombre de la vista a la que queremos ir. ¿Recuerdas que esta *vista* requiere una variable `pk`? Para pasarlo a las vistas utilizamos `pk=post.pk`, donde `post` es la entrada recién creada!
224224

@@ -238,7 +238,7 @@ def post_new(request):
238238
return render(request, 'blog/post_edit.html', {'form': form})
239239
```
240240

241-
Vamos a ver si funciona. Ves a la página `http://127.0.0.1:8000/post/new/`, añadir un `título` y un `texto`, guárdalo... ¡ y voilá! Se añade la nueva entrada al blog y se nos redirige a la página de `post_detail`!
241+
Vamos a ver si funciona. Ves a la página `http://127.0.0.1:8000/post/new/`, añadir un `título` y un `texto`, guárdalo... ¡y voilá! Se añade la nueva entrada al blog y se nos redirige a la página de `post_detail`!
242242

243243
Probablemente has visto que no hemos definido la fecha de publicación. Vamos a introducir un *botón publicar* en **Django girls Tutorial: extensiones**.
244244

@@ -271,7 +271,7 @@ Abre el archivo `blog/templates/blog/post_detail.html` y añade esta línea:
271271
```html
272272
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
273273
```
274-
274+
275275

276276
para que la plantilla quede:
277277

@@ -289,13 +289,13 @@ para que la plantilla quede:
289289
<p>{{ post.text|linebreaks }}</p>
290290
{% endblock %}
291291
```
292-
292+
293293

294294
En el archivo `blog/urls.py` añadimos esta línea:
295295

296296
```python
297297
url(r'^post/(?P<pk>[0-9]+)/edit/$', views.post_edit, name='post_edit'),
298-
```
298+
```
299299

300300
Vamos a reusar la plantilla `blog/templates/blog/post_edit.html`, así que lo último que nos falta es una *view*.
301301

@@ -314,21 +314,21 @@ def post_edit(request, pk):
314314
else:
315315
form = PostForm(instance=post)
316316
return render(request, 'blog/post_edit.html', {'form': form})
317-
```
317+
```
318318

319319
Esto se ve casi exactamente igual a nuestra view `post_new`, ¿no? Pero no del todo. Primero: pasamos un parámetro extra `pk` de los urls. Luego: obtenemos el modelo `Post` que queremos editar con `get_object_or_404(Post, pk=pk)` y después, al crear el formulario pasamos este post como una `instancia` tanto al guardar el formulario:
320320

321321
```python
322322
form = PostForm(request.POST, instance=post)
323323
```
324-
324+
325325

326326
como al abrir un formulario con este post para editarlo:
327327

328328
```python
329329
form = PostForm(instance=post)
330330
```
331-
331+
332332

333333
Ok, ¡vamos a probar si funciona! Dirígete a la página `post_detail`. Debe haber ahí un botón para editar en la esquina superior derecha:
334334

@@ -362,6 +362,6 @@ $ git commit -m "Added views to create/edit blog post inside the site."
362362
...
363363
$ git push heroku master
364364
```
365-
365+
366366

367367
¡Y eso debería ser todo! Felicidades :)

0 commit comments

Comments
 (0)