() translation by (you can also view the original English article)
Ha habido una tendencia de "diseño de CMS plano" en servidores web. Esto se refiere simplemente a un sistema de gestión de contenido (CMS) que no almacena su información en una base de datos. En su lugar, toda la información se almacena en archivos de texto sin formato. Dado que muchos servidores virtuales privados (VPS) en estos días están utilizando discos duros basados en RAM, este enfoque es más rápido y un poco más seguro.
En esta serie de tutoriales, te mostraré cómo crear tu propio sistema de archivos plano CMS usando alguna tecnología web estándar. Estos sistemas no son tan completos como otros, pero tienen los elementos básicos con un buen tiempo de respuesta.
Con toda la información en el disco duro, la organización de archivos se convierte en un gran problema. Con esto en mente, la información del sitio estará en un directorio diferente al de la información de estilo y diseño. Además, cada tipo de página tiene su propio directorio en la carpeta del sitio con un directorio de piezas para pequeñas partes del CMS. Esto mantiene todo en su propio lugar y hace un sistema flexible.
Estructura del Directorio Principal
En el directorio en el que va a crear el proyecto, cree los siguientes directorios: src, site y themes. El directorio src contendrá el código del servidor, el directorio site es para toda la información del sitio y el directorio themes para el diseño y la información del tema.
En el directorio de themes, debe crear un directorio layouts y un styling. El directorio layouts contendrá los diferentes diseños de páginas web. Al separar la información de diseño de la información de estilo, los temas se vuelven mucho más flexibles. Por ahora, habrá un diseño llamado SingleCol.
Para todo el estilo y la creación de diseño, estoy usando Sass, Compass, y Susy. Sass es un lenguaje de procesamiento de hoja de estilo personalizado. Proporciona una forma más robusta de crear las hojas de estilo CSS para su sitio web. Compass es una extensión de Sass. Sassy-buttons es una extensión Sass para hacer bonitos botones en el sitio web. Susy también es una extensión para crear un sistema de diseño de cuadrícula para su sitio.
Ya que Ruby está preinstalado en todas las Macs, no necesitará instalarlo. Para obtener Ruby en un sistema Windows, tendrá que descargar el instalador de Windows de Ruby. En Linux, necesitas usar el administrador de paquetes de tu sistema para instalar Ruby.
Una vez que Ruby esté en su sistema, puede instalar Sass, Compass, Sassy-buttons y Susy con estas líneas de comando:
1 |
gem install sass
|
2 |
gem install sassy-buttons
|
3 |
gem install compass
|
4 |
gem install susy
|
Para este tutorial, estoy usando Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 y Susy 2.2.5. Dependiendo de la configuración de su sistema, puede que tenga que ejecutar estos comandos con sudo antes que ellos.
Diseños
Para empezar a crear diseños, ejecute estos comandos en el directorio SingleCol:
1 |
compass init |
Esto creará los directorios sass y stylesheets, y un archivo llamado config.rb. Como me gusta usar css para el directorio stylesheet, cambie el nombre del directorio stylesheets a css. Además, cree un directorio js para cualquier archivo JavaScript necesario para el diseño. Abra el archivo config.rb y haga que se vea como este:
1 |
require 'susy' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Ahora, para crear el diseño básico del sitio web, cree un archivo en el directorio layout llamado template.html. En este archivo, agregue este código:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
3 |
<head>
|
4 |
<meta name="generator" content="goPress Servery by Custom Computer Tools."> |
5 |
<meta charset="utf-8"> |
6 |
<title>
|
7 |
{{{title}}}
|
8 |
</title>
|
9 |
<link rel="stylesheet" type="text/css" href="{{{WebAddress}}}/stylesheets.css"> |
10 |
{{{head}}}
|
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div id='wrap'> |
15 |
<div id='headerwrap'> |
16 |
<div id='header'> |
17 |
{{{header}}}
|
18 |
</div>
|
19 |
<div id='navigation'> |
20 |
{{{navbar}}}
|
21 |
</div>
|
22 |
</div>
|
23 |
<div id='sidebar'> |
24 |
{{{sidebar}}}
|
25 |
</div>
|
26 |
<div id='content'> |
27 |
{{{content}}}
|
28 |
</div>
|
29 |
<div id='footer'> |
30 |
{{{footer}}}
|
31 |
</div>
|
32 |
</div>
|
33 |
<script type="text/javascript" src="{{{WebAddress}}}/scripts.js"></script> |
34 |
</body>
|
35 |
|
36 |
</html>
|
Esta plantilla crea una página web estándar para el sitio. Cada página tiene un encabezado con una barra de navegación, una sola barra lateral, un área de contenido y un área de pie de página. Lo último que se carga son los javascripts necesarios para el sitio.
Cada sección se representa con una macro Handlebar. El servidor expande las macros antes de dárselo al usuario.
En el directorio sass, cree un archivo llamado base.scss y coloque este código:
1 |
@import 'compass/reset'; |
2 |
@import 'susy'; |
3 |
|
4 |
$susy: ( |
5 |
flow: ltr, |
6 |
math: fluid, |
7 |
output: float, |
8 |
gutter-position: after, |
9 |
container: auto, |
10 |
container-position: center, |
11 |
columns: 16, |
12 |
gutters: .25, |
13 |
column-width: false, |
14 |
global-box-sizing: content-box, |
15 |
last-flow: to, |
16 |
debug: ( |
17 |
image: hide, |
18 |
color: rgba(#66f, .25), |
19 |
output: background, |
20 |
toggle: top right, |
21 |
),
|
22 |
use-custom: ( |
23 |
background-image: true, |
24 |
background-options: false, |
25 |
box-sizing: true, |
26 |
clearfix: false, |
27 |
rem: true, |
28 |
)
|
29 |
);
|
30 |
|
31 |
body { |
32 |
}
|
33 |
|
34 |
#wrap { |
35 |
@include container(16); |
36 |
width: 1024px; |
37 |
display: block; |
38 |
}
|
39 |
|
40 |
#headerwrap { |
41 |
@include span(16 of 16); |
42 |
margin-bottom: 20px; |
43 |
}
|
44 |
|
45 |
#header { |
46 |
margin-top: 20px; |
47 |
margin-left: auto; |
48 |
margin-right: auto; |
49 |
width: 95%; |
50 |
}
|
51 |
|
52 |
#content { |
53 |
@include span(11 of 16); |
54 |
}
|
55 |
|
56 |
.col1 { |
57 |
@include span(5 of 10); |
58 |
}
|
59 |
|
60 |
.col2 { |
61 |
@include span(last 5 of 10); |
62 |
}
|
63 |
|
64 |
#footer .col2 { |
65 |
width: auto; |
66 |
}
|
67 |
|
68 |
.box { |
69 |
@include span(4 of 10); |
70 |
}
|
71 |
|
72 |
#sidebar { |
73 |
@include span(last 4 of 16); |
74 |
}
|
75 |
|
76 |
#footer { |
77 |
@include span(16 of 16); |
78 |
}
|
79 |
|
80 |
/** CSS dropdown menu **/
|
81 |
|
82 |
#navigation { |
83 |
margin-top: 20px; |
84 |
margin-left: auto; |
85 |
margin-right: auto; |
86 |
width: 95%; |
87 |
}
|
88 |
|
89 |
#menuh-container { |
90 |
top: 1em; |
91 |
left: 1em; |
92 |
display: inline; |
93 |
width: 100%; |
94 |
}
|
95 |
|
96 |
#menuh { |
97 |
margin-top: 1em; |
98 |
display: inline; |
99 |
width: 100%; |
100 |
}
|
101 |
|
102 |
#menuh ul li { |
103 |
display: inline-block; |
104 |
width: fit-content; |
105 |
}
|
106 |
|
107 |
#menuh a |
108 |
{
|
109 |
text-align: center; |
110 |
display:block; |
111 |
white-space:nowrap; |
112 |
margin:0; |
113 |
padding: 5px; |
114 |
text-decoration: none; |
115 |
}
|
116 |
|
117 |
#menuh ul |
118 |
{
|
119 |
list-style:none; |
120 |
margin: 0px 20px 0px 20px; |
121 |
padding: 0px; |
122 |
}
|
123 |
|
124 |
#menuh li |
125 |
{
|
126 |
position:relative; |
127 |
min-height: 1px; |
128 |
vertical-align: bottom; |
129 |
width: fit-content; |
130 |
}
|
131 |
|
132 |
#menuh ul ul |
133 |
{
|
134 |
position: absolute; |
135 |
z-index: 500; |
136 |
top: 50px; |
137 |
left: 20px; |
138 |
display: none; |
139 |
padding: 0.5em; |
140 |
margin: -1em 0 0 -1em; |
141 |
}
|
142 |
|
143 |
#menuh ul ul li { |
144 |
width: 100%; |
145 |
}
|
146 |
|
147 |
#menuh ul ul li a { |
148 |
text-align: left; |
149 |
}
|
150 |
|
151 |
#menuh ul ul ul |
152 |
{
|
153 |
left: 90px; |
154 |
}
|
155 |
|
156 |
div#menuh li:hover |
157 |
{
|
158 |
cursor:pointer; |
159 |
z-index:100; |
160 |
}
|
161 |
|
162 |
div#menuh li:hover ul ul, |
163 |
div#menuh li li:hover ul ul, |
164 |
div#menuh li li li:hover ul ul, |
165 |
div#menuh li li li li:hover ul ul |
166 |
{display:none;} |
167 |
|
168 |
div#menuh li:hover ul, |
169 |
div#menuh li li:hover ul, |
170 |
div#menuh li li li:hover ul, |
171 |
div#menuh li li li li:hover ul |
172 |
{display:block;} |
173 |
|
174 |
/* End CSS Drop Down Menu */
|
Este código sass carga en los estilos de restablecimiento de compass para neutralizar los valores predeterminados del navegador. Luego se carga y configura susy para crear el diseño de cuadrícula adecuado para todos los elementos de la página web.
El sistema de navegación css es después de que la página lo define. Los desplegables ocultos para los menús se vuelven visibles con las definiciones de mouse-over. Esto proporciona un sistema de menús sólo en css.
Todos estos estilos definen la estructura básica del sitio web. Nada aquí crea una mirada a la página, sólo su posicionamiento. Todo el estilo se maneja por el contenido de styling.
Estilos
Para el directorio de styling, cree un directorio llamado Basic. Inicialice la información de sass como se hizo para el directorio de layouts/SingleCol. En este directorio, ejecute la siguiente línea de comandos:
1 |
compass init |
Esto creará los directorios sass y stylesheets, y un archivo llamado config.rb. Como me gusta usar css para el directorio stylesheet, cambie el nombre del directorio stylesheets a css. Además, cree un directorio js para cualquier JavaScript necesario para crear el tema. Abra el archivo config.rb y haga que se vea como este:
1 |
require 'sassy-buttons' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Para los botones de estilo en el sitio web, me gusta usar sassy-buttons. Por lo tanto, se requiere primero, y luego la estructura de directorios.
En el directorio Basic/sass, cree el archivo Basic.scss con esta información:
1 |
// Welcome to Compass. |
2 |
// In this file you should write your main styles. (or centralize your imports) |
3 |
// Import this file using the following HTML or equivalent: |
4 |
// <link href='/stylesheets/screen.css' media='screen, projection' rel='stylesheet' type='text/css' /> |
5 |
//
|
6 |
@import 'compass/css3'; |
7 |
@import 'sassy-buttons'; |
8 |
|
9 |
$style-color1: rgb(247, 237, 222); |
10 |
$style-color2: #ffedd1; |
11 |
$style-color3: rgb(245, 213, 166); |
12 |
$style-color4: #f0d5ad; |
13 |
|
14 |
//
|
15 |
// Clear Fix |
16 |
//
|
17 |
.clearfix:after { |
18 |
content: '.'; |
19 |
display: block; |
20 |
clear: both; |
21 |
visibility: hidden; |
22 |
line-height: 0; |
23 |
height: 0; |
24 |
}
|
25 |
|
26 |
.clearfix { |
27 |
display: inline-block; |
28 |
}
|
29 |
|
30 |
html[xmlns] .clearfix { |
31 |
display: block; |
32 |
}
|
33 |
|
34 |
* html .clearfix { |
35 |
height: 1%; |
36 |
}
|
37 |
|
38 |
//
|
39 |
// Main Styling for Wood. |
40 |
//
|
41 |
@mixin standardsize { |
42 |
padding-top: 10px; |
43 |
padding-left: 15px; |
44 |
font-size: 19px; |
45 |
line-height: 1.25em; |
46 |
}
|
47 |
|
48 |
body { |
49 |
background-color: $style-color2; |
50 |
|
51 |
input[type='button'] { |
52 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
53 |
}
|
54 |
|
55 |
.button { |
56 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
57 |
display: inherit; |
58 |
margin-left: auto; |
59 |
margin-right: auto; |
60 |
margin-top: 10px; |
61 |
margin-bottom: 10px; |
62 |
text-align: center; |
63 |
}
|
64 |
|
65 |
#wrap { |
66 |
background-color: $style-color1; |
67 |
@include border-radius(.6em, .6em); |
68 |
margin-top: 10px; |
69 |
margin-bottom: 10px; |
70 |
border: 4px solid $style-color4; |
71 |
|
72 |
#header { |
73 |
background-color: $style-color2; |
74 |
@include border-radius(15px); |
75 |
background-repeat: no-repeat; |
76 |
border: 2px solid $style-color3; |
77 |
height: 130px; |
78 |
text-align: left; |
79 |
margin-top: 20px; |
80 |
font-size: 3em; |
81 |
|
82 |
h1 { |
83 |
a:link, a:visited { |
84 |
color: #000; |
85 |
text-decoration: none; |
86 |
}
|
87 |
padding-top: 40px; |
88 |
padding-left: 20px; |
89 |
}
|
90 |
h6 { |
91 |
font-size: .4em; |
92 |
font-style: italic; |
93 |
padding-left: 20px; |
94 |
}
|
95 |
}
|
96 |
#sidebar { |
97 |
background-color: $style-color2; |
98 |
@include border-radius(.6em, .6em); |
99 |
padding: .6em; |
100 |
vertical-align: text-top; |
101 |
overflow: hidden; |
102 |
margin-right: .5em; |
103 |
border: 2px solid $style-color3; |
104 |
hr { |
105 |
color: $style-color2; |
106 |
background-color: $style-color2; |
107 |
}
|
108 |
p, ul, li { |
109 |
@include standardsize; |
110 |
}
|
111 |
ul li { |
112 |
list-style-type: disc; |
113 |
margin-left: 25px; |
114 |
padding: 0; |
115 |
border: 0; |
116 |
outline: 0; |
117 |
font-size: 100%; |
118 |
vertical-align: baseline; |
119 |
background: transparent; |
120 |
}
|
121 |
li { |
122 |
margin-bottom: 10px; |
123 |
}
|
124 |
h1, h2, h3, h4, h5, h6 { |
125 |
@include standardsize; |
126 |
font-weight: bold; |
127 |
margin-top: .25em; |
128 |
margin-bottom: .25em; |
129 |
}
|
130 |
h1 { |
131 |
font-size: 2.5em; |
132 |
}
|
133 |
h2 { |
134 |
font-size: 2em; |
135 |
}
|
136 |
h3 { |
137 |
font-size: 1.5em; |
138 |
}
|
139 |
h4 { |
140 |
font-size: 1em; |
141 |
}
|
142 |
h5 { |
143 |
font-size: .8em; |
144 |
}
|
145 |
h6 { |
146 |
font-size: .6em; |
147 |
}
|
148 |
input[type='button'] { |
149 |
margin-left: 120px; |
150 |
clear: both; |
151 |
}
|
152 |
}
|
153 |
#content { |
154 |
input[type='button'] { |
155 |
margin-left: 200px; |
156 |
clear: both; |
157 |
}
|
158 |
h1, h2, h3, h4, h5, h6 { |
159 |
@include standardsize; |
160 |
font-weight: bold; |
161 |
margin-top: .25em; |
162 |
margin-bottom: .25em; |
163 |
}
|
164 |
h1 { |
165 |
font-size: 2.5em; |
166 |
}
|
167 |
h2 { |
168 |
font-size: 2em; |
169 |
}
|
170 |
h3 { |
171 |
font-size: 1.5em; |
172 |
}
|
173 |
h4 { |
174 |
font-size: 1em; |
175 |
}
|
176 |
h5 { |
177 |
font-size: .8em; |
178 |
}
|
179 |
h6 { |
180 |
font-size: .6em; |
181 |
}
|
182 |
hr { |
183 |
margin-top: 30px; |
184 |
margin-bottom: 30px; |
185 |
}
|
186 |
p, ul, li, details, summary, pre { |
187 |
@include standardsize; |
188 |
}
|
189 |
details { |
190 |
p, pre { |
191 |
margin-left: 25px; |
192 |
}
|
193 |
}
|
194 |
ul li { |
195 |
list-style-type: disc; |
196 |
margin-left: 25px; |
197 |
padding: 0; |
198 |
border: 0; |
199 |
outline: 0; |
200 |
font-size: 100%; |
201 |
vertical-align: baseline; |
202 |
background: transparent; |
203 |
}
|
204 |
li { |
205 |
margin-bottom: 10px; |
206 |
}
|
207 |
.box { |
208 |
clear: both; |
209 |
background-color: $style-color4; |
210 |
float: none; |
211 |
margin-left: auto; |
212 |
margin-right: auto; |
213 |
margin-top: 1.0em; |
214 |
margin-bottom: 1em; |
215 |
@include border-radius(.6em, .6em); |
216 |
display: block; |
217 |
padding: .5em; |
218 |
}
|
219 |
img { |
220 |
@include border-radius(10px); |
221 |
margin: 20px auto 20px auto; |
222 |
}
|
223 |
}
|
224 |
#footer { |
225 |
border-top: 5px; |
226 |
border-style: solid; |
227 |
border-color: $style-color3; |
228 |
@include border-radius(.6em, .6em); |
229 |
margin-top: 30px; |
230 |
p { |
231 |
margin-bottom: .6em; |
232 |
@include standardsize; |
233 |
margin-right: 15px; |
234 |
}
|
235 |
}
|
236 |
}
|
237 |
}
|
238 |
|
239 |
// CSS dropdown menu |
240 |
#navigation { |
241 |
text-align: left; |
242 |
border: 2px solid $style-color3; |
243 |
background-color: $style-color2; |
244 |
@include border-radius(15px); |
245 |
}
|
246 |
|
247 |
#menuh { |
248 |
font-size: 1.3em; |
249 |
font-family: arial, helvetica, sans-serif; |
250 |
background-color: $style-color1; |
251 |
}
|
252 |
|
253 |
#menuh ul { |
254 |
background-color: $style-color2; |
255 |
}
|
256 |
|
257 |
#menuh ul ul { |
258 |
background-color: $style-color2; |
259 |
@include border-radius(15px); |
260 |
border: 2px solid $style-color3; |
261 |
}
|
262 |
|
263 |
#menuh a { |
264 |
background-color: $style-color2; |
265 |
color: #000; |
266 |
}
|
267 |
|
268 |
#menuh a:link, #menuh a:visited, #menuh a:active { |
269 |
color: #000; |
270 |
background-color: $style-color2; |
271 |
}
|
272 |
|
273 |
#menuh a:hover { |
274 |
color: #000; |
275 |
background-color: $style-color4; |
276 |
@include border-radius(5px); |
277 |
}
|
278 |
|
279 |
// End CSS Drop Down Menu |
280 |
// Misc classes |
281 |
.picture { |
282 |
border: 3px solid $style-color3; |
283 |
@include border-radius(8px); |
284 |
float: left; |
285 |
margin: 5px 15px 15px 15px; |
286 |
}
|
287 |
|
288 |
a:link, a:visited { |
289 |
color: darken($style-color1, 50); |
290 |
text-decoration: none; |
291 |
}
|
292 |
|
293 |
strong { |
294 |
font-weight: bold; |
295 |
}
|
296 |
|
297 |
table { |
298 |
margin: 20px; |
299 |
border: 3px solid; |
300 |
@include border-radius(10px); |
301 |
border-color: lighten($style-color2, 6); |
302 |
th { |
303 |
text-align: center; |
304 |
font-weight: bold; |
305 |
padding: 10px 0 10px 0; |
306 |
}
|
307 |
tbody { |
308 |
td { |
309 |
padding: 10px; |
310 |
}
|
311 |
tr:nth-child(2n+1) { |
312 |
background-color: darken($style-color2, 5); |
313 |
}
|
314 |
tr:nth-child(even) { |
315 |
background-color: lighten($style-color2, 2.5); |
316 |
}
|
317 |
}
|
318 |
}
|
319 |
|
320 |
#commentSpacer { |
321 |
width: 100%; |
322 |
margin-top: 20px; |
323 |
margin-left: 15px; |
324 |
}
|
325 |
|
326 |
.tutorial_excerpt { |
327 |
margin-left: 20px; |
328 |
}
|
329 |
|
330 |
.tutorial_thumbnail { |
331 |
float: left; |
332 |
margin-right: 20px; |
333 |
margin-left: 20px; |
334 |
margin-bottom: 20px; |
335 |
}
|
336 |
|
337 |
.tutorial_wrap { |
338 |
margin-bottom: 50px; |
339 |
float: left; |
340 |
}
|
341 |
|
342 |
img.wp-post-image { |
343 |
-moz-border-radius: 15px; |
344 |
border-radius: 15px; |
345 |
box-shadow: 10px 10px 5px gray; |
346 |
}
|
347 |
|
348 |
.showcode { |
349 |
margin: 20px auto 20px 30px; |
350 |
-moz-border-radius: 15px; |
351 |
border-radius: 15px; |
352 |
border: $style-color4 3px; |
353 |
border-style: solid; |
354 |
background: white; |
355 |
}
|
356 |
|
357 |
#socialmedia { |
358 |
width: 700px; |
359 |
margin-top: 20px; |
360 |
margin-left: 15px; |
361 |
}
|
362 |
|
363 |
#socialbuttons { |
364 |
margin: auto; |
365 |
}
|
366 |
|
367 |
#socialbuttons a { |
368 |
opacity: 0.8; |
369 |
filter: alpha(opacity = 80); |
370 |
-webkit-transition: all ease-in-out 0.2s; |
371 |
-moz-transition: all ease-in-out 0.2s; |
372 |
-ms-transition: all ease-in-out 0.2s; |
373 |
-o-transition: all ease-in-out 0.2s; |
374 |
transition: all ease-in-out 0.2s; |
375 |
}
|
376 |
|
377 |
#socialbuttons a:hover { |
378 |
opacity: 1; |
379 |
filter: alpha(opacity = 100); |
380 |
}
|
381 |
|
382 |
#socialbuttons a { |
383 |
display: inline-block; |
384 |
height: 28px; |
385 |
width: 30px; |
386 |
background-image: url(/images/ico-subscribe-social.png); |
387 |
background-repeat: no-repeat; |
388 |
}
|
389 |
|
390 |
#socialbuttons a.twitter { |
391 |
background-position: -30px 0; |
392 |
}
|
393 |
|
394 |
#socialbuttons a.facebook { |
395 |
background-position: -60px 0; |
396 |
}
|
397 |
|
398 |
#socialbuttons a.googleplus { |
399 |
background-position: -210px 0; |
400 |
}
|
401 |
|
402 |
dl { |
403 |
margin-left: 20px; |
404 |
margin-top: 20px; |
405 |
margin-bottom: 20px; |
406 |
font-size: 19px; |
407 |
line-height: 1.25em; |
408 |
}
|
409 |
|
410 |
dt { |
411 |
margin-left: 20px; |
412 |
margin-bottom: 20px; |
413 |
font-weight: bold; |
414 |
}
|
415 |
|
416 |
dd { |
417 |
margin-left: 40px; |
418 |
margin-bottom: 20px; |
419 |
}
|
Este código define cómo se verá el sitio web. Define el fondo, color, fuentes, etc que componen el estilo de un sitio web típico.
El directorio de styling/Basic contiene los archivos necesarios para el aspecto predeterminado de la página 404, encabezado, pie de página y partes de barra lateral del sitio web. Por lo tanto, cree un archivo llamado 404.html y coloque este código:
1 |
<h2>404 Page</h2> |
2 |
|
3 |
<p>Sorry, we could not find the page.</p> |
Esta es una página de error 404 básica. Usted tiene que tener cuidado de la información dada aquí, pues usted no desea revelar demasiada información sobre cómo su sitio trabaja. Puesto que esto se colocará en el área de contenido de la página, será fácil para el usuario navegar lejos de ella.
A continuación, cree el archivo header.html con este contenido:
1 |
<h1><a href='/'>Test Site</a></h1> |
2 |
<h6>A New Approach</h6> |
3 |
<br>
|
Esto es sólo un encabezado que no es descriptivo, pero le da al CMS algo que mostrar.
A continuación, cree el archivo footer.html con este contenido:
1 |
<footer>
|
2 |
[Column1] |
3 |
<p>Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
4 |
[/Column1] |
5 |
[Column2] |
6 |
<p>Running on a flat CMS server!</p> |
7 |
[/Column2] |
8 |
</footer>
|
A continuación, cree el archivo sidebar.html con este contenido:
1 |
<h3>A Sidebar</h3> |
2 |
<p>This is a basic sidebar that can have other times.</p> |
Una vez más, estos son titulares de lugares. Todos estos archivos se copian en el directorio site/parts y se cambian según las necesidades del sitio. Éstos están aquí para que el servidor tenga algo con sus nombres para usar en el servidor en caso de que el usuario se olvide de crearlos.
Estructura del sitio
Con el tema y los diseños definidos, es hora de crear el contenido básico y la estructura para el sitio real. En el directorio site, cree los directorios de parts, pages, posts, images, css, js.
Partes
El directorio parts contendrá fragmentos pequeños de html/css/javascript que harán que una sola unidad se coloque en múltiples ubicaciones del sitio web. Estas partes se cargan en el servidor y se combinan con el contenido de la página según sea necesario. Para nuestro sitio de demostración, cree las siguientes partes:
- footer.html con este código:
1 |
<footer>
|
2 |
<p style="float: left;">Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
3 |
<p style="float: right;">Running on a flat CMS server!</p> |
4 |
</footer>
|
5 |
<script type="text/javascript"> |
6 |
window.PageName = "{{{PageName}}}"; |
7 |
</script>
|
- head.html con este código:
1 |
<link rel="shortcut icon" href="{{{WebAddress}}}/images/favicon.ico" /> |
- header.html con este código:
1 |
<h1><a href='{{{ServerAddress}}}/'>Test Site</a></h1> |
2 |
<h6>Flat File System CMS</h6> |
- navbar.html con este código:
1 |
<div id="menuh-container"> |
2 |
<div id="menuh"> |
3 |
<ul>
|
4 |
<li>
|
5 |
<a class="top_parent">Pages</a> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="{{{WebAddress}}}/flatcms">Flat CMS</a> |
9 |
</li>
|
10 |
</ul>
|
11 |
</li>
|
12 |
<li>
|
13 |
<a href="{{{WebAddress}}}/posts/blogs/flatcms">Blog</a> |
14 |
</li>
|
15 |
<li>
|
16 |
<a href="{{{WebAddress}}}/posts/news/flatcms" class="top_parent">News</a> |
17 |
</li>
|
18 |
<li>
|
19 |
<a href="{{{WebAddress}}}/about" class="top_parent">About</a> |
20 |
</li>
|
21 |
</ul>
|
22 |
</div>
|
23 |
</div>
|
- sidebar.html con este código:
1 |
<h2>Side Bar</h2> |
2 |
<hr>
|
- socialmedia.html con este código:
1 |
<div id="socialmedia"> |
2 |
<div id="socialbuttons"> |
3 |
<a href="" class="twitter" title="Twitter"></a> |
4 |
|
5 |
<a href="" class="googleplus" title="Google+"></a> |
6 |
</div>
|
7 |
<div id="commentSpacer" class="clearfix"></div> |
8 |
<!-- Put other Social Media items here (ie: Disqus, etc.); -->
|
9 |
</div>
|
El servidor carga estas partes utilizando el nombre sin la extensión en la plantilla Handlebar para la expansión. Por ejemplo, en cualquier lugar donde se deba colocar la parte socialmedia.html, coloque la macro {{{socialmedia}}} allí. Además, estas partes pueden ser HTML, Markdown o cualquier otro formato que el servidor pueda manejar. En los servidores que voy a hacer, los tipos de archivos compatibles son HTML, Jade/Amber y Markdown. Voy a entrar en estos detalles en los tutoriales de creación de servidores.
Páginas
Todas las páginas del sitio se colocarán en el directorio pages. Por ahora, cree los siguientes archivos con su contenido:
- main.html con este código:
1 |
<h3>Flat CMS Test Site</h3> |
2 |
<p>This is the Main page of the test site.</p> |
- flatcms.md con este código:
1 |
### Flat CMS Server |
2 |
|
3 |
This is a page about the flat CMS server. |
- about.md con este código:
1 |
### About |
2 |
|
3 |
This would be a standard about page. |
Estas son las páginas de demostración del sitio. El único archivo requerido es main.html, ya que el servidor cargará el contenido de esta página en la memoria y lo servirá desde la memoria. Eso ayuda a acelerar la carga de la primera página del sitio web. Las otras dos páginas tienen la extensión md porque están en formato Markdown. El servidor traducirá el contenido en HTML antes de incrustarlo en el diseño de la página.
En general, las páginas contienen información que no cambia mucho con el tiempo. Le dan al usuario información sobre el sitio, su propósito y metas.
Las páginas pueden ser de naturaleza jerárquica mediante la creación de directorios y subdirectorios con páginas. Estos nombres de directorio crean las direcciones al directorio de estas páginas.
Articulos
A diferencia de páginas, los artículos son artículos que se agregan regularmente, por ejemplo, publicaciones diarias/semanales/mensuales y noticias. Se espera que esta área cambie a menudo. En el directorio posts, cree dos nuevos directorios: blogs y noticias. En cada uno de estos directorios, cree un directorio flatcms. Éstos contendrán los artículos del blog y las noticias para el Sitio web plano CMS.
En el directorio posts/blogs/flatcms, cree los siguientes archivos:
- index.amber con estos contenidos:
1 |
h3 Flat CMS Blog |
2 |
|
3 |
p This is a rambling blog about a flat CMS. |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS Running", "/posts/blogs/flatcms/flatcms", "Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md con estos contenidos:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
After much work and programming, the flat CMS server is running. Stay tuned for more news! |
5 |
|
6 |
{{{socialmedia}}}
|
index.amber es una plantilla de Jade para definir las diferentes publicaciones en el blog. El sistema de plantillas HTML de Jade facilita la adición de nuevos contenidos con un formato exacto. Los parámetros de las macros forman los diferentes elementos. Puede encontrar más información acerca de Jade en Tuts+.
Aquí, la extensión utilizada es amber porque el equivalente de Jade al idioma de Go es Amber. Ya que ahí fue donde empecé, así es como lo hice. Si desea cambiar la extensión, recuerde cambiarla también en el código del servidor apropiado.
En el posts/news/flatcms, cree los siguientes archivos:
- index.amber con estos contenidos:
1 |
h3 Flat CMS News |
2 |
|
3 |
p Here is where all the news about what I am doing is found. Please come back often to check it out! |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS is Running", "/posts/news/flatcms/flatcms", "The Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md con estos contenidos:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
After much work and programming, I finally have everything moved over to a goPress server that I wrote myself. I will be making this available for you too. Stay tuned! |
5 |
|
6 |
{{{socialmedia}}}
|
Esto crea las noticias para el sitio de demostración. En mi sitio, uso la misma estructura para tutoriales y páginas de demostración de código.
Imágenes
Todos los sitios web tienen imágenes. En esta configuración, todas las imágenes están en el directorio site/images. Para este sitio de demostración, solo los iconos de los medios sociales se colocarán aquí. Puede obtener el archivo de imagen desde el archivo desde download.
Sitio CSS
Incluso con el css de diseño y el estilo css, habrá veces que deseará reglas especiales css. El directorio site/css contiene todos los archivos css que ponen los toques finales al sitio web. Todo el layout, el styling y los archivos de site/css se compilarán juntos en un archivo css. Por lo tanto, cree el directorio site/css/final para colocar este archivo compilado. Ahora, cree el archivo site/css/site.css con estos contenidos:
1 |
.clear { |
2 |
clear: both; |
3 |
height: 0px; |
4 |
}
|
No hay mucho aquí—sólo una definición para una clase clear . Puede agregar lo que quiera, pero debe ser algo que no caiga en la categoría de diseño o estilo.
Scripts del sitio
El directorio site/js contiene todos los archivos JavaScript especiales para el sitio. Estos serán compilados juntos y minimizados para una carga más rápida del sitio. Por ahora, cree el directorio site/js/final para el script compilado y un archivo site/js/01-site.js con estos contenidos:
1 |
;
|
2 |
//
|
3 |
// File: Site.js
|
4 |
//
|
5 |
// Description: The JavaScript file for the site.
|
6 |
//
|
7 |
jQuery(document).ready(function () { |
8 |
//
|
9 |
// Code here will be ran once a page is loaded.
|
10 |
//
|
11 |
});
|
No hay mucho aquí en este momento. Pero, como tu sitio necesita JavaScript personalizado, puede colocarse aquí.
Dado que los guiones se compilarán juntos, los numeraré en el orden necesario para cargar. La rutina para compilar los scripts juntos los cargará en orden numérico.
Automatización con Gulp
La forma más fácil de acelerar la carga de una página web es tener el menor número posible de solicitudes HTTP. Por lo tanto, lo mejor es combinar todos los archivos CSS y JavaScript en un archivo cada uno. La mejor manera de compilar estos archivos es con un script de compilación. Realizarlo cada vez que el servidor recibe una solicitud es una pérdida de tiempo de procesamiento.
Mi elección de los corredores de script de automatización es Gulp. Gulp se ejecuta en Node.js. Por lo tanto, vaya al sitio web Node.js y descargue el programa para su sistema. Una vez instalado Node.js, puede instalar Gulp con lo siguiente:
1 |
npm install --global gulp |
2 |
npm install --global gulp |
3 |
npm install --global gulp-compass |
4 |
npm install --global gulp-autoprefixer |
5 |
npm install --global gulp-compressor |
6 |
npm install --global gulp-concat |
Esto instalará todos los módulos Gulp y Gulp que utilizo en el script de compilación. Ahora, en la directorio superior, cree el archivo gulpfile.js con estos contenidos:
1 |
// Requirements
|
2 |
var gulp = require('gulp'), |
3 |
compass = require('gulp-compass'), |
4 |
prefix = require('gulp-autoprefixer'), |
5 |
compressor = require('gulp-compressor'), |
6 |
concat = require('gulp-concat'); |
7 |
|
8 |
// Defines path to sass
|
9 |
var Theme = "Basic"; |
10 |
var Layout = "SingleCol"; |
11 |
var themesassRoot = 'themes/styling/' + Theme; |
12 |
var layoutsassRoot = 'themes/layouts/' + Layout; |
13 |
|
14 |
// Gulp task
|
15 |
gulp.task('theme-compass-to-css', function(){ |
16 |
return gulp.src(themesassRoot+'/sass/Basic.scss') |
17 |
.pipe(compass({ |
18 |
config_file: themesassRoot + '/config.rb', |
19 |
css: themesassRoot + '/css', |
20 |
sass: themesassRoot + '/sass', |
21 |
require: 'sassy-buttons' |
22 |
}))
|
23 |
.pipe(prefix("last 3 versions")) |
24 |
.pipe(gulp.dest(themesassRoot + '/css')) |
25 |
});
|
26 |
|
27 |
gulp.task('layout-compass-to-css', function(){ |
28 |
return gulp.src(layoutsassRoot+'/sass/base.scss') |
29 |
.pipe(compass({ |
30 |
config_file: layoutsassRoot + '/config.rb', |
31 |
css: layoutsassRoot + '/css', |
32 |
sass: layoutsassRoot + '/sass', |
33 |
require: 'susy' |
34 |
}))
|
35 |
.pipe(prefix("last 3 versions")) |
36 |
.pipe(gulp.dest(layoutsassRoot + '/css')) |
37 |
});
|
38 |
|
39 |
gulp.task('watch-compass', function(){ |
40 |
// What to watch
|
41 |
gulp.watch(themesassRoot + '/sass/Basic.scss', function(){ |
42 |
// What to run
|
43 |
gulp.run('theme-compass-to-css'); |
44 |
});
|
45 |
gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){ |
46 |
// What to run
|
47 |
gulp.run('layout-compass-to-css'); |
48 |
});
|
49 |
});
|
50 |
|
51 |
gulp.task('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']); |
52 |
|
53 |
// js compressor
|
54 |
gulp.task('js', function () { |
55 |
gulp.src([ layoutsassRoot +'/js/*.js', themesassRoot + '/js/*.js', 'site/js/*.js']) |
56 |
.pipe(compressor()) |
57 |
.pipe(concat("final.js")) |
58 |
.pipe(gulp.dest('site/js/final')); |
59 |
});
|
60 |
|
61 |
// css compressor
|
62 |
gulp.task('css', ['all-compass'], function () { |
63 |
gulp.src([layoutsassRoot +'/css/*.css', themesassRoot + '/css/*.css', 'site/css/*.css']) |
64 |
.pipe(compressor()) |
65 |
.pipe(concat("final.css")) |
66 |
.pipe(gulp.dest('site/css/final')); |
67 |
});
|
68 |
|
69 |
gulp.task('default', ['all-compass', 'js', 'css']); |
Esto compilará todo el CSS y JavaScript en un único archivo: en el archivo site/css/final/final.css para el CSS y en el archivo site/js/final/final.js para el JavaScript. También agregará las reglas de prefijo del navegador para el CSS. Simplemente ejecute en el directorio superior el comando:
1 |
gulp |
Gulp compilará todos nuestros archivos y los dejará en la ubicación correcta. Cada tarea definida en gulpfile.js se puede ejecutar individualmente, dando el nombre de la tarea después del comando gulp. Puedes aprender más sobre Gulp en Tuts+.
Archivo de configuración del servidor
Todos los servidores necesitan información de configuración. Por lo tanto, en la raíz del directorio, cree el archivo server.json con esta información:
1 |
{
|
2 |
"CurrentLayout": "SingleCol", |
3 |
"CurrentStyling": "Basic", |
4 |
"ServerAddress": "localhost:8080", |
5 |
"SiteTitle": "Flat CMS Test Site", |
6 |
"Sitebase": "./site/", |
7 |
"TemplatBase": "./themes/", |
8 |
"Cache": false, |
9 |
"MainBase": "" |
10 |
} |
Este archivo json describe información sobre el diseño a utilizar, el estilo a utilizar, la dirección y el puerto que el servidor debe escuchar, el nombre principal del sitio con un subtítulo, un indicador de almacenamiento en caché para activar y desactivar el almacenamiento en caché con fines de depuración , Y la ubicación de los diferentes directorios utilizados para el sitio. Al proporcionar esta información al servidor en un archivo json, el servidor puede ser flexible, con menos información codificada.
Subir el sitio a un servidor
La mayoría de la gente utiliza un cliente FTP para copiar los archivos a su servidor. Esto es fácil de hacer, pero varía mucho en relación con el sistema y los programas utilizados. Pero hay algunas alternativas.
Puede configurar un daemon de Dropbox para cargar su sitio desde su cuenta de Dropbox. El sitio Dropbox Wiki contiene instrucciones detalladas para configurarlo. El único problema es que los archivos se cargan automáticamente en el servidor cuando realiza algún cambio. A veces, usted querrá hacer cambios sin que vayan al servidor. Si este es el caso, tenga una ubicación no Dropbox de todos los archivos del sitio y también una ubicación de Dropbox. Cuando haya terminado, cree una tarea en su archivo Gulp para copiar los nuevos archivos de sitio a la ubicación de Dropbox.
Mi enfoque preferido es usar Dropzone 3. Puede programar Dropzone 3 con Ruby o Python para realizar cualquier tipo de acción en un archivo que se encuentre en el mismo. También tiene muchas funciones incorporadas. Hay una acción de archivo integrada para cargar en un sitio FTP/SFTP. Creo un objetivo Dropzone 3 para cada uno de los directorios principales de mi sitio. Entonces, cuando quiero cambiar o añadir un archivo, simplemente lo arrastra al directorio adecuado objetivo dropzone. Puedes aprender más acerca de Dropzone 3 con mi tutorial Escribir Acciones Dropzone 3.
Conclusion
Estos archivos básicos crearán un sitio web que se ve así:
¡Este es sólo el comienzo! Ahora, con la estructura del sitio establecida, es hora de comenzar a construir servidores web. Por favor, únase a mí en el próximo tutorial donde voy a construir un servidor web basado en lenguaje Go para este sitio de demostración.
