Advertisement
  1. Web Design
  2. CMS

Entendiendo Ghost: Etapas de diseño

by
Read Time:11 minsLanguages:
This post is part of a series called Building a Ghost Theme From Scratch.
Organizing Ghost Theme Files and Folders

Spanish (Español) translation by CYC (you can also view the original English article)

El proceso de creación de temas para Ghost es increíblemente suave, sencillo y muy fácil de aprender. Pero antes de empezar a construir un tema Ghost actual es importante y útil entender el papel que juegan los temas en la ecología global de Ghost para que puedas diseñar de la manera más óptima.

La mejor manera de hacer esto no es saltar de cabeza en diseño o código, sino obtener una comprensión completa del propio Ghost como fundamento.

En esta primera parte de nuestra serie de tutoriales obtendrás esa base y, una vez hecho esto, estarás perfectamente colocado para comenzar a construir tu primer tema.


¿Qué es Ghost y para quién es?

Ghost es una aplicación de código abierto dedicada a la publicación de contenido.

Durante los últimos años, las herramientas de publicación de contenido han evolucionado para permitir que las personas auto administren casi cualquier tipo de sitio que puedan necesitar. Ya sea una tienda en línea compleja, una presentación de negocios o un CMS completo, los usuarios pueden manejar todo ellos mismos con relativamente poca experiencia.

Pero Ghost no se trata de ninguna de esas cosas complejas. Ghost trata de poner el foco de nuevo en una cosa simple: la escritura.

Es una plataforma construida sobre el principio de simplicidad. Su objetivo principal es ayudar más a los escritores de blog y centrarse menos en la parte de la herramienta de publicación de contenido de la ecuación de blogs.

Para los desarrolladores de temas esto introduce un cambio de ritmo. Mientras que el tema de otras plataformas a menudo es impulsado por la demanda de los usuarios de temas para agregar todo tipo de complejidad y funcional a su sitio web, la plataforma Ghost es impulsado por una sola cosa. El lema de Ghost nos dice lo que es:

Sólo una plataforma de blogs

Desde Ghost está 100% centrado en los blogs, Ghost es: Sólo para los bloggers.

Y en consonancia con esto, el diseño del tema Ghost también está impulsado por una sola cosa: sólo temas de blogs.

Estos pueden parecer declaraciones obvias, pero son importantes para enfatizar, porque en una plataforma centrada en la escritura, siendo utilizado por personas que se centran en la escritura, también deben ser temas Ghost diseñados con un enfoque en la escritura.


La filosofía del diseño de temas Ghost 

Como parte de su campaña Kickstarter, el fundador de Ghost, John O'Nolan, dijo lo siguiente:

...no se trata sólo de hacer algo que se vea bien, sino de dar a los escritores herramientas para impulsar los blogs y empujar al periodismo al siguiente nivel.

Ahí radica la filosofía que los diseñadores de temas Ghost deben adoptar para servir mejor a los usuarios de Ghost: En primer lugar, asegúrate de que el contenido de un usuario esté siempre al frente y en el centro.

Es un enfoque común en el diseño web para centrarse en los gráficos y el aspecto general del diseño, con el estilo de la tipografía y el contenido que pasa por último. Pero en un tema Ghost, el contenido nunca debe tomar un asiento trasero en cuanto a otros aspectos del diseño.

Como un diseñador de temas Ghost tu primera consideración debe ser cómo aparecerá el contenido, con un fuerte énfasis en la tipografía, y el resto del diseño del tema debe desplegarse en apoyo de ella.

Obtendrás más información sobre cómo funciona esto más adelante en la serie de tutoriales una vez que comencemos a crear un tema real, pero antes de que podamos hacer eso necesitamos aprender más sobre la propia plataforma Ghost.


La plataforma Ghost

Hay algunos aspectos fundamentales de Ghost que debes ser consciente de que lo hacen diferente a otras plataformas a las que puedes estar acostumbrado.

Una aplicación JavaScript basada en Node.js

A diferencia de la mayoría de las aplicaciones de construcción de sitios web actualmente populares que están basadas en PHP, Ghost se basa en Node.js.

Node.js es una plataforma de software que interpreta y ejecuta JavaScript en el back-end. Puedes obtener más información en Nodejs.org pero realmente no tienes que hacerlo. Un conocimiento profundo de Node.js no es necesario para construir un tema de Ghost - todo lo que necesitas saber estará cubierto en esta serie de tutoriales.

Muchas personas consideran Node.js como el camino del futuro por una serie de razones; la velocidad es uno de ellos. Node.js ha demostrado un desempeño significativamente más rápido que PHP a través de numerosas pruebas de benchmarking, es un componente clave detrás de por qué Ghost se ejecuta rápidamente.

Para trabajar en un tema Ghost en un entorno local, deberás instalar Node.js localmente. Afortunadamente, hacerlo es un proceso muy rápido y fácil. Te indicamos instrucciones sobre cómo hacerlo antes de comenzar el proceso de construcción de un tema en la segunda parte de esta serie de tutoriales.

Nota: Debes tener en cuenta que en el corto plazo puedes encontrar algunos dolores de crecimiento que implementan tus sitios de Ghost. Casi todos los servidores en el mundo ahora están configurados para acomodar aplicaciones PHP, pero como Node.js es relativamente nuevo, la configuración de "pulsadores" en dominios vivos con los que podrías estar acostumbrado con otras aplicaciones no está totalmente lista. Una serie de servidores ya están construyendo nuevas infraestructuras específicamente para facilitar Ghost, por lo que sólo sea una corta espera hasta que el despliegue de Ghost será tan fácil como cualquier otra aplicación, si no más fácil. Además, a partir de noviembre, podrás utilizar el servicio de alojamiento interno de Ghost.

Configuraciones activadas por el usuario disponibles para teoría

Un aspecto adicional de Ghost que puede ser diferente a otras plataformas que has tematizado en el pasado se refiere a las configuraciones que los usuarios pueden controlar en el back-end.

La configuración de Ghost controlada por el usuario determina un gran porcentaje de lo que se puede imprimir en la parte frontal, lo que a su vez influye en el tipo de contenido disponible para el tema.

Todavía hay muchas cosas nuevas planeadas para Ghost, pero el enfoque que vamos a tomar en esta serie de tutoriales es trabajar con los ajustes que se pueden utilizar ahora.

Actualmente existen ciertos ajustes para la futura funcionalidad de Ghost. Por ejemplo, hay una interfaz de usuario de administración para crear menús de navegación en el camino, así como una funcionalidad preliminar para la salida del núcleo de Ghost. Sin embargo, no sabemos exactamente cómo funcionarán estas cosas (y no lo harán hasta que se publiquen) por lo que no haremos ningún diseño para ellas en esta serie de tutoriales. Dejaremos eso para el día en que el equipo Ghost los libere.

Esto nos lleva a lo que los usuarios puedan controlar en el extremo posterior de Ghost en este momento, que son configuraciones que se dividen en dos áreas;

  1. Configuración de la administración
  2. Controles para la edición de publicaciones

Veamos ahora cada una de esas áreas.

Configuración de la administración

La configuración de la administración de Ghost se divide en dos pestañas: Configuración general y Configuración de usuario. Tanto las pestañas generales como las de configuración de usuario controlan el contenido que podemos diseñar en nuestros temas.

La pestaña Configuración > General nos proporciona los siguientes elementos, utilizables en cualquier parte de un tema de Ghost:

  • Título del blog
  • Descripción del blog
  • Logotipo del blog
  • Portada del blog
Ghost AdminGhost AdminGhost Admin

La pestaña Configuración > Usuario nos da lo siguiente, utilizable solo en la vista de publicación individual:

  • Imagen de portada
  • Imagen de perfil
  • Nombre
  • Correo electrónico
  • Ubicación
  • Sitio web
  • Biografía
Ghost-User-SettingsGhost-User-SettingsGhost-User-Settings

Controles para la edición de publicaciones

La interfaz de edición de publicaciones de Ghost es sin duda una de sus características más atractivas. Diseñado por escritores para escritores, ofrece un entorno fantástico para la creación de contenido.

Su principal contraste con otros entornos de edición es lo limpio y minimalista con lo que fue diseñado. No hay ningún desorden en las barras de herramientas de formato, cuadros de meta u otros campos personalizados. La gran mayoría del espacio de pantalla se dedica enteramente al área de escritura.

El aspecto más relevante del área de edición de publicaciones para los diseñadores de temas es la columna vertebral del formato de póster de Ghost: Markdown.

En lugar de utilizar botones de estilo o HTML en bruto, el contenido de Ghost se formatea con Markdown, una sintaxis en línea simple que significa que los escritores no tienen que hacer una pausa en cualquier momento durante la creación de contenido. Debido a este enfoque simplificado hay una lista relativamente corta de las cosas que se denominarán que controla el editor de publicaciones:

  • Texto normal
  • Etiquetas H1 a H6
  • Estados de enlace
  • Código en línea
  • Citas en bloque
  • Imágenes
  • Listas
  • Reglas horizontales
Ghost-Post-EditorGhost-Post-EditorGhost-Post-Editor

Nota: El Markdown también aceptará HTML en bruto, lo que significa que los videos de servicios como YouTube se pueden incrustar fácilmente mediante el código iframe copiando y pegando. Por esta razón, también es una buena idea considerar el estilo de iframes en tus temas.

Los temas de Ghost solo controlan la presentación

Ghost está diseñado en torno a una clara separación entre presentación y contenido.

Ghost se encarga de toda la generación de contenido y cualquier funcionalidad adicional requerida es manejada por plugins. Esto deja al tema de Ghost dedicado a la presentación pura.

La separación del contenido y la presentación es un principio de diseño web que no es nuevo. La idea básica es que si el contenido y la presentación se separan en entidades independientes, es posible cambiar uno sin alterar el otro. En otras palabras, un tema puede cambiarse por otro sin que el usuario tenga que cambiar su contenido de ninguna manera.

Cuando los temas contienen funcionalidades que no son puramente presentacionales, un usuario ya no puede cambiar su tema sin alterar la apariencia de su contenido. Están vinculados a la presentación que tienen, y el propósito fundamental de un tema se pierde esencialmente.

Con Ghost, sin embargo, el propósito fundacional de un tema permanece intacto en todo momento.

Nota: En el futuro, a medida que se desplieguen los complementos para Ghost, será posible crear temas de Ghost con dependencias de complementos. Esta es otra característica que será posible gracias a Ghost que se está construyendo en la parte superior de Node.js. Todavía podremos ver paquetes globales mejorados disponibles para los usuarios, pero el método para hacerlo conservará de manera consistente los beneficios que provienen de una separación de contenido y presentación.


Las dos etapas del diseño del tema de Ghost

Las dos etapas claramente definidas en las que trabajarás en el proceso de creación de un tema de Ghost son:

  1. Creación del archivo de plantilla - Escritura de archivos de plantilla con colocación y marcado de etiqueta de plantilla.
  2. Estilo - Adición de diseño y capacidad de respuesta, principalmente mediante la escritura de CSS.

Las siguientes secciones de esta serie de tutoriales te proporcionarán instrucciones paso a paso sobre cómo proceder a través de estas etapas para crear tu primer tema de Ghost. Antes de eso, sin embargo, es útil entender un poco más sobre el lenguaje templante que gobierna los temas de Ghost.

Introducción al modelado sin lógica con Handlebars.js

Los temas de Ghost utilizan un fantástico lenguaje de plantillas denominado Handlebars.js para potenciar la colocación de contenido. Handlebars es un lenguaje de plantilla en el sentido propio del término, en el que su función es simplemente emitir contenido precargado en posiciones especificadas dentro de un archivo de plantilla.

handlebarshandlebarshandlebars

Handlebars se caracteriza por el uso de corchetes (que parecen guías), para agregar etiquetas predefinidas a las plantillas que serán reemplazadas con contenido cuando se sirve el archivo.

Ejemplo de etiqueta de plantilla handlebars.js: {{content}}

Handlebars.js se conoce como un lenguaje de templado sin lógica porque no se puede utilizar para escribir funciones, mantener variables o, de otra forma, preparar el contenido para su visualización. Aparte de representar el contenido donde se colocan las etiquetas, sus únicas operaciones son simplemente:

  1. Comprueba si existe o no una determinada pieza de contenido, por ejemplo, un logo.
  2. Iterar un conjunto de contenido que contiene múltiples registros, por ejemplo, un grupo de las últimas publicaciones.

Es la funcionalidad sin lógica detrás de cada tema de Ghost que garantiza que cada tema controle los atributos de presentación solamente.

Los temas de Ghost tampoco hacen nada para determinar con qué contenido se reemplazarán las etiquetas de la plantilla handlebars, todo esto es manejado por Ghost. Sin embargo, el tema se utiliza para determinar cómo se marcará y se denominará la salida.

Gracias al templado sin lógica, la marcación y el estilo de la salida de Ghost se logra fácilmente y ayuda a garantizar un código muy limpio en sus plantillas. A su vez esto hace que sea fácil escribir un marcado semántico que esté actualizado con los últimos estándares de SEO y accesibilidad.

Componentes de un tema Ghost

Aquí hay una rápida lista de "un vistazo" de todo lo que es, y no se incluye en las dos etapas del diseño de un tema de Ghost.

Qué hay en un tema de Ghost: Templado

  • Colocación de las etiquetas handlebars en los archivos de plantilla
  • Marcado semántico de las etiquetas de la plantilla

Estilo

  • Tipografía
  • Control de diseño
  • Esquema de color y diseño general
  • Sensibilidad

Sin embargo, lo siguiente no se incluye en un tema de Ghost:

  • Lógica
  • Funcionalidad adicional
  • Controles de área de administración personalizada
  • Consultas de bases de datos modificadas

Podría resultarte útil pensar en el proceso de diseño en dos etapas resumido por el principio de "SAMWYS" o por sus siglas en inglés "Style And Markup What You're Served" que significan "Estilo y marcado en el que se sirve".

Al diseñar un tema Ghost no tenemos que trabajar con consultas de lógica o bases de datos porque Ghost se encarga de todo eso para nosotros. SAMWYS nos recuerda que todo lo que tenemos que hacer es colocar etiquetas de plantilla, escribir un marcado de calidad y poner junto un gran estilo de tema que muestre el contenido del usuario.


A continuación

Todo lo que hemos discutido hasta ahora te proporciona una comprensión fundamental de Ghost.

Desde aquí podemos pasar al proceso real paso a paso de crear tu primer tema.

La siguiente parte de nuestra serie de tutoriales comienza con la primera etapa del proceso de creación del tema; la etapa de plantilla. Aprenderás exactamente cómo configurar la estructura de archivos de tu tema, cómo colocar etiquetas de plantilla y cómo escribir un esqueleto de marcado.

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.