Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Creación de un CMS: estructura y estilo

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a CMS.
Building a CMS: goPress

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

A continuación, cree el archivo sidebar.html con este contenido:

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:
  • head.html con este código:
  • header.html con este código:
  • navbar.html con este código:
  • sidebar.html con este código:
  • socialmedia.html con este código:

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:
  • flatcms.md con este código:
  • about.md con este código:

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:
  • flatcms.md con estos contenidos:

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:
  • flatcms.md con estos contenidos:

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:

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:

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:

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:

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:

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:

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.

Dropzone 3 Setup for CMS Uploading
Configuración de Dropzone 3 para la carga de CMS

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

Demo Site in Browser
Sitio de demostración en el navegador

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.