forked from jgthms/web-design-in-4-minutes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
diseno-web-en-4-minutos.html
276 lines (253 loc) · 15.5 KB
/
diseno-web-en-4-minutos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseño web en 4 minutos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<img id="logo" src="web-design-in-4-minutes.png" alt="JT logo">
<h1>Diseño web en 4 minutos</h1>
<p>
<a href="http://jgthms.com" target="_blank">por Jeremy Thomas</a>
</p>
</header>
<main>
<section id="start">
<p>Digamos que tienes un producto, un catálogo, o simplemente una idea que deseas compartir con todos en tu <em>propio</em> sitio web. Antes de publicarlo en Internet, quieres que se vea atractivo, profesional, o al menos <em>decente</em> a la vista.</p>
<p>¿Qué es lo <a href="#content">primero</a> en lo que necesitas trabajar?</p>
</section>
<section id="content">
<h2>Contenido</h2>
<p>El proposito del <strong>diseño</strong> es mejorar la presentación del contenido al que es aplicado.
Puede parecer obvio, pero el contenido es el <strong>primer</strong> elemento de un sitio web, y no debería ser establecido en último lugar.</p>
<p>El contenido escrito, como el párrafo que estás leyendo ahora, representa más del 90% de la Web. Estilizando este contenido textual recorrerás un buen trecho.</p>
<p>Supongamos que ya has finalizado el contenido que quieres publicar y acabas de crear un archivo
<code>style.css</code> vacío, ¿Cuál es la <a href="#centering">primera regla</a> que puedes escribir?</p>
</section>
<section id="centering">
<h2>Centrado</h2>
<p>Las largas líneas de texto pueden ser difíciles de analizar y, por lo tanto, difíciles de <strong>leer</strong>. Establecer un límite de caracteres por línea mejora mucho la legibilidad y el atractivo de un bloque de texto.</p>
<pre><span class="selector">body</span> {
<span class="attribute">margin</span>: <span class="number">0</span> auto;
<span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
}</pre>
<p>Después de diseñar los <em>bloques</em> de texto, ¿qué hay del estilo del <a href="#font-family">texto en sí mismo</a>?</p>
</section>
<section id="font-family">
<h2>Familia tipográfica</h2>
<p>El tipo de letra predeterminado del navegador es <code>"Times"</code>, que puede parecer poco atractivo (sobre todo porque es la fuente "<em>unstyled</em>"). Cambiar a una fuente <strong>sans-serif</strong> como <code>"Helvetica"</code> o <code>"Arial"</code> puede mejorar enormemente el aspecto de tu página.</p>
<pre><span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p><em>Si quieres quedarte con una fuente serif, prueba <code>"Georgia"</code>.</em></p>
<p>Aunque esto hace el texto más <em>atractivo</em>, hagamos que sea <a href="#spacing">más legible</a>.</p>
</section>
<section id="spacing">
<h2>Espaciado</h2>
<p>Cuando una página le parece "estropeada" a un usuario, esto se debe frecuentemente a un problema de <strong>espaciado</strong>. Proporcionar espacio tanto <em>alrededor</em> como <em>dentro</em> de tu contenido puede aumentar el atractivo de tu página.</p>
<pre><span class="selector">body</span> {
<span class="attribute">line-height</span>: <span class="number">1.5</span>;
<span class="attribute">padding</span>: <span class="number">4</span><span class="unit">em</span> <span class="number">1</span><span class="unit">em</span>;
}
<span class="selector">h2</span> {
<span class="attribute">margin-top</span>: <span class="number">1</span><span class="unit">em</span>;
<span class="attribute">padding-top</span>: <span class="number">1</span><span class="unit">em</span>;
}</pre>
<p>Aunque el diseño ha mejorado mucho hasta ahora, vamos a aplicar <a href="#color-contrast">cambios más sutiles</a>.</p>
</section>
<section id="color-contrast">
<h2>Color y contraste</h2>
<p>El texto negro sobre un fondo blanco puede ser molesto a la vista. Optar por un tono más suave de negro para el cuerpo de texto hace que la página sea más <strong>cómoda</strong> de leer.</p>
<pre><span class="selector">body</span> {
<span class="attribute">color</span>: <span class="number">#555</span>;
}</pre>
<p>Y con objeto de obtener un nivel de <strong>contraste</strong> apropiado, vamos a escoger un tono más oscuro para las palabras <strong>importantes</strong>.</p>
<pre><span class="selector">h1</span>,
<span class="selector">h2</span>,
<span class="selector">strong</span> {
<span class="attribute">color</span>: <span class="number">#333</span>;
}</pre>
<p>Aunque la mayoría de la página ha mejorado visualmente, algunos elementos (como los fragmentos de código) todavía parecen <a href="#balance">fuera de lugar</a>.</p>
</section>
<section id="balance">
<h2>Equilibrio</h2>
<p>Solo se necesitan algunos toques adicionales para corregir el equilibrio de la página:</p>
<pre><span class="selector">code</span>,
<span class="selector">pre</span> {
<span class="attribute">background</span>: <span class="number">#eee</span>;
}
<span class="selector">code</span> {
<span class="attribute">padding</span>: <span class="number">2</span>px <span class="number">4</span>px;
<span class="attribute">vertical-align</span>: text-bottom;
}
<span class="selector">pre</span> {
<span class="attribute">padding</span>: <span class="number">1</span>em;
}</pre>
<p>En este punto, es posible que desees hacer que tu página destaque y darle <a href="#primary-color">identidad</a>.</p>
</section>
<section id="primary-color">
<h2>Color primario</h2>
<p>La mayoría de las marcas tienen un <strong>color primario</strong> que actúa como un acento visual. En un sitio web, este acento puede usarse para dar énfasis a elementos interactivos, como los <strong>enlaces</strong>.</p>
<pre><span class="selector">a</span> {
<span class="attribute">color</span>: <span class="number">#e81c4f</span>;
}</pre>
<p>Pero para mantener el equilibrio, necesitaremos algunos <a href="#secondary-colors">colores adicionales</a>.</p>
</section>
<section id="secondary-colors">
<h2>Colores secundarios</h2>
<p>El color acentuado puede ser complementado con tonos más <em>sutiles</em>, para ser utilizados en bordes, fondos, o incluso el cuerpo del texto.</p>
<pre><span class="selector">body</span> {
<span class="attribute">color</span>: <span class="number">#566b78</span>;
}
<span class="selector">code</span>,
<span class="selector">pre</span> {
<span class="attribute">background</span>: <span class="number">#f5f7f9</span>;
<span class="attribute">border-bottom</span>: <span class="number">1</span><span class="unit">px</span> solid <span class="number">#d8dee9</span>;
<span class="attribute">color</span>: <span class="number">#a7adba</span>;
}
<span class="selector">pre</span> {
<span class="attribute">border-left</span>: <span class="number">2</span><span class="unit">px</span> solid <span class="number">#69c</span>;
}</pre>
<p>Habiendo cambiado los tonos, ¿por qué no cambiar las <a href="#custom-font">formas</a>...?</p>
</section>
<section id="custom-font">
<h2>Fuente personalizada</h2>
<p>Dado que el texto es el contenido principal de una página web, el uso de una <strong>fuente personalizada</strong> da a la página una identidad aún más notable.</p>
<p>Aunque puedes añadir tu propia <em>webfont</em> o utilizar un servicio en línea como <a href="https://typekit.com" target="_blank">Typekit</a>, vamos a utilizar <code>"Roboto"</code> del servicio gratuito de <a href="https://fonts.google.com" target="_blank">Google Fonts</a>:</p>
<pre><span class="keyword">@import</span> <span class="string">'https://fonts.googleapis.com/css?family=Roboto:300,400,500'</span>;
<span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Roboto"</span>, <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p>Después de mejorar tu identidad a través del <em>texto</em>, ¿qué te parece si agregas <a href="#images">mil palabras</a>...?</p>
</section>
<section id="images">
<h2>
<img src="images.png" alt="Spongebob rainbow meme saying 'Images'">
</h2>
<p>Los gráficos y los iconos se pueden utilizar como accesorios para confirmar el contenido, o activamente siendo parte del mensaje que deseas transmitir.</p>
<p>Vamos a mejorar nuestro encabezado con una bonita <strong>imagen de fondo</strong> de <a href="https://unsplash.com/photos/qH36EgNjPJY" target="_blank">Unsplash</a>.</p>
<pre><span class="selector">header</span> {
<span class="attribute">background-color</span>: <span class="number">#263d36</span>;
<span class="attribute">background-image</span>: url(<span class="string">"header.jpg"</span>);
<span class="attribute">background-position</span>: center top;
<span class="attribute">background-repeat</span>: no-repeat;
<span class="attribute">background-size</span>: cover;
<span class="attribute">line-height</span>: <span class="number">1.2</span>;
<span class="attribute">padding</span>: <span class="number">10</span><span class="unit">vw</span> <span class="number">2</span><span class="unit">em</span>;
<span class="attribute">text-align</span>: center;
}</pre>
<p>También vamos a añadir un <strong>logotipo</strong>.</p>
<pre><span class="selector">header img</span> {
<span class="attribute">display</span>: inline-block;
<span class="attribute">height</span>: <span class="number">120</span><span class="unit">px</span>;
<span class="attribute">vertical-align</span>: top;
<span class="attribute">width</span>: <span class="number">120</span><span class="unit">px</span>;
}</pre>
<p>Aprovechemos esta oportunidad para mejorar los estilos de texto.</p>
<pre><span class="selector">header h1</span> {
<span class="attribute">color</span>: white;
<span class="attribute">font-size</span>: <span class="number">2.5</span><span class="unit">em</span>;
<span class="attribute">font-weight</span>: <span class="number">300</span>;
}
<span class="selector">header a</span> {
<span class="attribute">border</span>: <span class="number">1</span><span class="unit">px</span> solid <span class="number">#e81c4f</span>;
<span class="attribute">border-radius</span>: <span class="number">290486</span><span class="unit">px</span>;
<span class="attribute">color</span>: white;
<span class="attribute">font-size</span>: <span class="number">0.6</span><span class="unit">em</span>;
<span class="attribute">letter-spacing</span>: <span class="number">0.2</span><span class="unit">em</span>;
<span class="attribute">padding</span>: <span class="number">1</span><span class="unit">em</span> <span class="number">2</span><span class="unit">em</span>;
<span class="attribute">text-transform</span>: uppercase;
<span class="attribute">text-decoration</span>: none;
<span class="attribute">transition</span>: none <span class="number">200</span><span class="unit">ms</span> ease-out;
<span class="attribute">transition-property</span>: color, background;
}
<span class="selector">header a:hover</span> {
<span class="attribute">background</span>: <span class="number">#e81c4f</span>;
<span class="attribute">color</span>: white;
}</pre>
<p><a href="#header">Y voilà</a>!</p>
<p>Hemos diseñado una página decente en a penas unos minutos, siguiendo los principios básicos del diseño web. Sólo queda <a href="#share">una última cosa</a> que hacer...</p>
</section>
<section id="share">
<h2>¡Comparte el amor!</h2>
<nav class="buttons">
<a class="button github" href="https://github.com/jgthms/web-design-in-4-minutes" target="_blank">
<em>Descargar en</em> <strong>GitHub</strong>
</a>
<a
class="button facebook"
href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F"
rel="nofollow"
target="_blank"
>
<em>Compartir en</em> <strong>Facebook</strong>
</a>
<a
class="button twitter"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://jgthms.com/web-design-in-4-minutes/"
href="https://twitter.com/intent/tweet?text=Web%20Design%20in%204%20minutes&url=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F&via=jgthms"
rel="nofollow"
target="_blank"
>
<em>Compartir en</em> <strong>Twitter</strong>
</a>
</nav>
<h2>¡Aprende cómo diseñar con código!</h2>
<p>
Estos son los recursos que escribí para ayudarte a aprender CSS (<em>en inglés</em>):
</p>
<nav class="resources">
<a class="resource-marksheet resource" href="http://marksheet.io" target="_blank">
<figure class="resource-icon">
<img src="marksheet.png" alt="Logo of MarkSheet">
</figure>
<p>
<strong class="resource-name">MarkSheet</strong>
mi <strong>tutorial gratuito</strong> para aprender HTML y CSS
</p>
</a>
<a class="resource-bulma resource" href="http://bulma.io" target="_blank">
<figure class="resource-icon">
<img src="bulma.png" alt="Logo of Bulma">
</figure>
<p>
<strong class="resource-name">Bulma</strong>
mi <strong><em>framework</em> CSS</strong> basado en Flexbox, para que puedas empezar inmediatamente
</p>
</a>
<a class="resource-css-reference resource" href="http://cssreference.io" target="_blank">
<figure class="resource-icon">
<img src="css-reference.png" alt="Logo of CSS Reference">
</figure>
<p>
<strong class="resource-name">CSS Reference</strong>
mi <strong>guía visual</strong> de las propiedades CSS más conocidas
</p>
</a>
</nav>
<p>¡Gracias por tu atención!</p>
</section>
<footer>
<a class="button" href="https://twitter.com/jgthms" target="_blank">Creado por <strong>@jgthms</strong></a>
<a class="button" href="https://twitter.com/javgr" target="_blank">Traducido por <strong>@javgr</strong></a>
</footer>
</main>
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Roboto:300,400,500']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</body>
</html>