Skip to content

Commit e2bde46

Browse files
rapoulsonrapoulson
committed
format and add images for gitbook
1 parent 1b8defe commit e2bde46

File tree

43 files changed

+188
-187
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+188
-187
lines changed

‎es/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@ https://crowdin.com/project/django-girls-tutorial
5050

5151
Si tu idioma no esta listado en crowdin, por favor [abre un nuevo problema][6] informando el idioma así podemos agregarlo.
5252

53-
[6]: https://github.com/DjangoGirls/tutorial/issues/new
53+
[6]: https://github.com/DjangoGirls/tutorial/issues/new

‎es/css/README.md‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ Lo escribieron programadores que trabajaban para Twitter y ahora lo desarrollan
1818

1919
Para instalar Bootstrap tienes que añadir esto al `<head>` de tu fichero `.html` (`blog/templates/blog/post_list.html`):
2020

21-
html
21+
```html
2222
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
2323
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
24-
24+
```
2525

2626
Esto no añade ningún fichero a tu proyecto. Simplemente apunta a ficheros que existen en Internet. Adelante, abre tu sitio web y actualiza la página. ¡Aquí está!
2727

@@ -73,41 +73,41 @@ Pero vamos a hacer un poco al menos. ¿Tal vez podríamos cambiar el color de nu
7373

7474
En tu fichero `blog/static/css/blog.css` deberías añadir el siguiente código:
7575

76-
css
76+
```css
7777
h1 a {
7878
color: #FCA205;
7979
}
80-
80+
```
8181

8282
`h1 a` es un selector CSS. Quiere decir que estamos aplicando nuestros estilos a cualquier elemento `a` que se encuentre dentro de un elemento `h1` (por ejemplo cuando tenemos en código algo como: `<h1><a href="">enlace</a></h1>`). En este caso le estamos diciendo que cambie el color a `#FCA205`, que es naranja. Por supuesto, ¡puedes poner tu propio color aquí!
8383

8484
En un fichero CSS definimos los estilos para los elementos del fichero HTML. Los elementos se identifican por el nombre del elemento (es decir, `a`, `h1`, `body`), el atributo `class` (clase) o el atributo `id` (identificador). Class e id son nombres que le asignas tú misma al elemento. Las clases definen grupos de elementos y los ids apuntan a elementos específicos. Por ejemplo, la siguiente etiqueta se puede identificar con CSS usando el nombre `a`, la clase `external_link` o el id `link_to_wiki_page`:
8585

86-
html
86+
```html
8787
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
88-
88+
```
8989

9090
Puedes leer más sobre [selectores de CSS en w3schools][4].
9191

9292
[4]: http://www.w3schools.com/cssref/css_selectors.asp
9393

9494
También necesitamos decirle a nuestra plantilla HTML que hemos añadido CSS. Abre el fichero `blog/templates/blog/post_list.html` y añade esta línea justo al principio:
9595

96-
html
96+
```html
9797
{% load staticfiles %}
98-
98+
```
9999

100100
Aquí sólo estamos cargando ficheros estáticos :). Luego, entre el `<head>` y `</head>`, después de los enlaces a los ficheros CSS de Bootstrap (el navegador lee los ficheros en el orden en que están, así que nuestro fichero podría sobrescribir partes del código de Bootstrap), añade la siguiente línea:
101101

102-
html
102+
```html
103103
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
104-
104+
```
105105

106106
Le acabamos de decir a nuestra plantilla dónde se encuentra nuestro fichero CSS.
107107

108108
Ahora tu fichero debería tener este aspecto:
109109

110-
html
110+
```html
111111
{% load staticfiles %}
112112
<html>
113113
<head>
@@ -130,7 +130,7 @@ Ahora tu fichero debería tener este aspecto:
130130
{% endfor %}
131131
</body>
132132
</html>
133-
133+
```
134134

135135
De acuerdo, ¡guarda el fichero y actualiza el sitio!
136136

@@ -140,11 +140,11 @@ De acuerdo, ¡guarda el fichero y actualiza el sitio!
140140

141141
¡Buen trabajo! ¿Quizá nos gustaría darle un poco de aire a nuestro sitio web y aumentar también el margen en el lado izquierdo? ¡Vamos a intentarlo!
142142

143-
css
143+
```css
144144
body {
145145
padding-left: 15px;
146146
}
147-
147+
```
148148

149149
Añade esto a tu CSS, guarda el fichero y ¡mira cómo funciona!
150150

@@ -154,20 +154,20 @@ Añade esto a tu CSS, guarda el fichero y ¡mira cómo funciona!
154154

155155
¿Quizá podríamos personalizar la tipografía del título? Pega esto en la sección `<head>` del fichero `blog/templates/blog/post_list.html`:
156156

157-
html
157+
```html
158158
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
159-
159+
```
160160

161161
Esta línea va a importar una tipografía llamada *Lobster* de Google Fonts (https://www.google.com/fonts).
162162

163163
Ahora añade la línea `font-family: 'Lobster';` en el fichero CSS `blog/static/css/blog.css` dentro del bloque de declaración `h1 a` (el código entre llaves `{` y `}`) y actualiza la página:
164164

165-
css
165+
```css
166166
h1 a {
167167
color: #FCA205;
168168
font-family: 'Lobster';
169169
}
170-
170+
```
171171

172172
![Figure 14.3][7]
173173

@@ -179,25 +179,25 @@ Como se mencionó anteriormente, CSS tiene un concepto de clases que básicament
179179

180180
¡Adelante! Nombra algunas partes del código HTML. Añade una clase llamada `page-header` al `div` que contiene el encabezado, así:
181181

182-
html
182+
```html
183183
<div class="page-header">
184184
<h1><a href="/">Django Girls Blog</a></h1>
185185
</div>
186-
186+
```
187187

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

190-
html
190+
```html
191191
<div class="post">
192192
<p>published: {{ post.published_date }}</p>
193193
<h1><a href="">{{ post.title }}</a></h1>
194194
<p>{{ post.text|linebreaks }}</p>
195195
</div>
196-
196+
```
197197

198198
Ahora añadiremos bloques de declaración a diferentes selectores. Los selectores que comienzan con `.` hacen referencia a las clases. Hay muchos tutoriales y explicaciones sobre CSS en la web que te ayudarán a entender el siguiente código. Por ahora, simplemente copia y pega este bloque de código en tu fichero `blog/static/css/blog.css`:
199199

200-
css
200+
```css
201201
.page-header {
202202
background-color: #ff9400;
203203
margin-top: 0;
@@ -245,23 +245,23 @@ Ahora añadiremos bloques de declaración a diferentes selectores. Los selectore
245245
.post h1 a, .post h1 a:visited {
246246
color: #000000;
247247
}
248-
248+
```
249249

250250
Luego rodea el código HTML que muestra las entradas con las declaraciones de clases. Sustituye esto:
251251

252-
html
252+
```html
253253
{% for post in posts %}
254254
<div class="post">
255255
<p>published: {{ post.published_date }}</p>
256256
<h1><a href="">{{ post.title }}</a></h1>
257257
<p>{{ post.text|linebreaks }}</p>
258258
</div>
259259
{% endfor %}
260-
260+
```
261261

262262
en `blog/templates/blog/post_list.html` por esto:
263263

264-
html
264+
```html
265265
<div class="content container">
266266
<div class="row">
267267
<div class="col-md-8">
@@ -277,7 +277,7 @@ en `blog/templates/blog/post_list.html` por esto:
277277
</div>
278278
</div>
279279
</div>
280-
280+
```
281281

282282
Guarda los ficheros y actualiza tu sitio.
283283

@@ -291,4 +291,4 @@ No tengas miedo de jugar un poco con este CSS e intentar cambiar algunas cosas.
291291

292292
De cualquier forma, te volvemos a recomendar que hagas el [curso de HTML y CSS de Codeacademy][2] como una tarea post-taller para que aprendas todo lo que necesitas saber para hacer tus sitios web más bonitos con CSS.
293293

294-
¡¿Lista para el siguiente capítulo?! :)
294+
¡¿Lista para el siguiente capítulo?! :)

‎es/css/images/bootstrap1.png‎

67.3 KB
Loading

‎es/css/images/color2.png‎

60.2 KB
Loading

‎es/css/images/final.png‎

103 KB
Loading

‎es/css/images/font.png‎

62.8 KB
Loading

‎es/css/images/margin2.png‎

59.1 KB
Loading

‎es/deploy/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ Haz clic en el enlace "WSGI configuration file" (en la sección "Code" en la par
277277

278278
Elimina todo el contenido actual y reemplázalo con algo como esto:
279279

280-
python
280+
``` python
281281
import os
282282
import sys
283283

@@ -290,7 +290,7 @@ Elimina todo el contenido actual y reemplázalo con algo como esto:
290290
from django.core.wsgi import get_wsgi_application
291291
from whitenoise.django import DjangoWhiteNoise
292292
application = DjangoWhiteNoise(get_wsgi_application())
293-
293+
```
294294

295295
> **Nota** no olvides sustituir tu propio nombre de usuario donde dice `<tu-usuario>`
296296
@@ -314,4 +314,4 @@ Si aparece un error cuando intentas visitar tu sitio, el primer lugar que deber
314314

315315
La página por defecto de tu sitio debería decir "Welcome to Django", igual que en tu PC local. Intenta añadir `/admin/` al final de la URL y te redirigirá al panel de administración. Ingresa con tu nombre de usuario y contraseña y verás que puedes añadir nuevas entradas en el servidor.
316316

317-
Date una *GRAN* palmada en la espalda; los despliegues en el servidor son una de las partes más complejas del desarrollo web y muchas veces a la gente le cuesta varios días tenerlo funcionando. Pero tú tienes tu sitio en vivo, en Internet de verdad, ¡así como suena!
317+
Date una *GRAN* palmada en la espalda; los despliegues en el servidor son una de las partes más complejas del desarrollo web y muchas veces a la gente le cuesta varios días tenerlo funcionando. Pero tú tienes tu sitio en vivo, en Internet de verdad, ¡así como suena!

‎es/deploy/images/github_get_repo_url_screenshot.png‎

69.8 KB
Loading

‎es/deploy/images/new_github_repo.png‎

52.4 KB
Loading

0 commit comments

Comments
 (0)