Skip to content

Fixed #389 -- Clean format in spanish version #398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aniav merged 1 commit into from
Jun 5, 2015
Merged

Fixed #389 -- Clean format in spanish version #398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions es/css/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ Fue escrito por programadores que trabajaban para Twitter y ahora colaboran en

## Instalar Bootstrap

Para instalar Bootstrap, tienes que añadir esto al `< head >` en el archivo `.html` (`blog/templates/blog/post_list.html`):
Para instalar Bootstrap, tienes que añadir esto al `<head>` en el archivo `.html` (`blog/templates/blog/post_list.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">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


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!

Expand All @@ -44,14 +44,14 @@ En primer lugar, necesitamos crear un directorio para almacenar nuestros archivo
djangogirls
├─── static
└─── manage.py


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

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)


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

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


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

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


`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í!

`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í!

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`:

<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">


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

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

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:
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:

```html
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Expand Down Expand Up @@ -133,30 +133,30 @@ Tu archivo ahora debe verse así:
</body>
</html>
```


OK, guarde el archivo y actualiza el sitio!

![Figure 14.2][5]

[5]: images/color2.png

¡ 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!
¡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!

```css
body {
padding-left: 15px;
}
```


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

![Figure 14.3][6]

[6]: images/margin2.png

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

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


![Figure 14.3][7]

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


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

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


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`:

Expand Down Expand Up @@ -253,7 +253,7 @@ h1, h2, h3, h4 {
color: #000000;
}
```


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

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


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

Expand All @@ -287,7 +287,7 @@ En `blog/templates/blog/post_list.html` con esto:
</div>
</div>
```


Guarda los archivos y actualiza tu sitio.

Expand Down
50 changes: 25 additions & 25 deletions es/django_forms/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Tenemos que crear un archivo con este nombre en el directorio `blog`.

blog
└── forms.py


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

Expand All @@ -27,7 +27,7 @@ class PostForm(forms.ModelForm):
model = Post
fields = ('title', 'text',)
```


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

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

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

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


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

Expand All @@ -104,7 +104,7 @@ urlpatterns = [
url(r'^post/new/$', views.post_new, name='post_new'),
]
```


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

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

```python
from .forms import PostForm
```
```

y nuestra *vista*:

Expand Down Expand Up @@ -152,17 +152,17 @@ Bueno, vamos a ver cómo quedará el HTML en `post_edit.html`:
</form>
{% endblock %}
```


Es hora de actualizar! ¡ Si! El formulario se muestra!

iEs hora de actualizar! ¡Si! El formulario se muestra!

![Nuevo formulario][2]

[2]: images/new_form2.png

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

¡ 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?
¡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?

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

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

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).
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).

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).

Expand All @@ -186,13 +186,13 @@ if request.method == "POST":
else:
form = PostForm()
```


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

```python
form = PostForm(request.POST)
```
```

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()`.

Expand All @@ -204,21 +204,21 @@ if form.is_valid():
post.author = request.user
post.save()
```


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!

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:

```python
from django.shortcuts import redirect
```
```

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

```python
return redirect('blog.views.post_detail', pk=post.pk)
```
```

`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!

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

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`!
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`!

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

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


para que la plantilla quede:

Expand All @@ -289,13 +289,13 @@ para que la plantilla quede:
<p>{{ post.text|linebreaks }}</p>
{% endblock %}
```


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

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

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

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

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:

```python
form = PostForm(request.POST, instance=post)
```


como al abrir un formulario con este post para editarlo:

```python
form = PostForm(instance=post)
```


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:

Expand Down Expand Up @@ -362,6 +362,6 @@ $ git commit -m "Added views to create/edit blog post inside the site."
...
$ git push heroku master
```


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