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

Introducción a Craft CMS

by
Read Time:12 minsLanguages:
This post is part of a series called Introduction to Craft CMS.
Introduction to Craft CMS

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

Este es un tutorial de seguimiento de Introducción a Craft CMS. Si no está familiarizado con Craft, le recomiendo que primero lea la primera parte. Luego, regrese aquí y siga nuestra guía de instalación y cómo empezar.

¿Qué es Craft CMS?

Craft CMS  de Pixel & Tonic es una alternativa de WordPress para editores orientados al desarrollo que desean un control más profundo y un rendimiento más potente de sus herramientas de administración de contenido. También es una opción potencial para que los consultores y desarrolladores amplíen sus ofertas a clientes.

Craft no es un constructor de sitios—necesitaras construir tu HTML, CSS y JavaScript incorporando plantillas de Twig. Esto no será intimidante para aquellos acostumbrados a la construcción de temas de WordPress. Para otros, por desgracia, no hay tema oficial o mercado de complementos en este momento (aunque no me sorprendería si aparece en el futuro). Sin embargo, Craft está diseñado para ser excepcionalmente escalable y ofrece características nativas para relaciones complejas de administración de contenido.

Es una opción apropiada para los sitios web pequeños, pero brillará con los sitios de contenido más grande con contenido multi-capas, interrelacionado.

Craft está escrito en PHP en la potente plataforma Yii 1.x. Si no has oído hablar de Yii, puedes leer mi Introducción al Framework Yii en Tuts+. Usted no necesita saber PHP o Yii para usar Craft. Es similar a las herramientas de CMS con Django escritas en Python.

Aunque es posible que no haya oído hablar de Craft, su comunidad de desarrolladores está creciendo rápidamente. En junio pasado, su propuesta para un sitio Craft CMS StackExchange fue aprobada en sólo cinco días.

Puede ver un escaparate de los sitios que ejecutan Craft aquí.

En este tutorial, le guiaré a través del proceso de instalación de Craft, su sitio de demostración y familiarizarse con Craft para crear su propio sitio con él.

Instalación de Craft en el sitio de demostración On The Rocks

Primero, vamos a instalar el sitio de demostración On the Rocks de Craft con el tema y el contenido de la muestra. Este sitio también desbloquea todas las funciones premium para las pruebas.

Estoy usando Mac OS X con MAMP. Mis sitios locales se ejecutan en el directorio ~/Sites. Vamos a clonar el sitio de demostración Craft de Github:

A continuación, establezcamos los permisos de archivo para los directorios internos de Craft:

A continuación, actualizamos la última versión de Craft. En febrero de 2015, usé la versión 2.3.2627. Sin embargo, puede encontrar lo último en la página "Actualizaciones" en el sitio web de Craft.

Entonces, utilicé PHPMyAdmin para crear la base de datos:

Create the ontherocks MySQL databaseCreate the ontherocks MySQL databaseCreate the ontherocks MySQL database

Haga clic en la base de datos ontherocks en PHPMyAdmin. A continuación, haga clic en Importar y elija el archivo en ~/Sites/ontherocks/SQL/ontherocks.sql:

Import the ontherocks SQL database using PHPMyAdminImport the ontherocks SQL database using PHPMyAdminImport the ontherocks SQL database using PHPMyAdmin

A continuación, edite el archivo de configuración de base de datos con las credenciales de su base de datos MySQL local:

Cree un nuevo host virtual con el nombre de host "ontherocks.dev" que apunte a la carpeta public/ .

Edite su archivo /etc/hosts para resolver ontherocks.dev a 127.0.0.1, si es necesario:

El panel de control de Craft se encuentra en http://ontherocks.dev/admin. Cuando esté cargado, verás algo como esto: monos ... y globos oculares!

A continuación, se le pedirá que actualice la base de datos:

Update the database for Craft CMSUpdate the database for Craft CMSUpdate the database for Craft CMS

Puede iniciar sesión con las siguientes credenciales: Nombre de usuario: admin, Contraseña: contraseña.

Craft Administrative LoginCraft Administrative LoginCraft Administrative Login

El Panel de Control de Craft

Aquí está el panel de control—se parece un poco a WordPress, ¿eh?

Craft Administrative Dashboard Look FamiliarCraft Administrative Dashboard Look FamiliarCraft Administrative Dashboard Look Familiar

Aquí está la página principal de On the Rocks:

Craft Demo Site On the RocksCraft Demo Site On the RocksCraft Demo Site On the Rocks

Explorando el sitio de demostración Happy Lager

Los buenos amigos de Pixel & Tonic me dieron un pre-lanzamiento de su nuevo y gratuito sitio de demostración, que espero que esté disponible para cuando lo leas—clonarlo aquí. El nuevo sitio se llama Happy Lager:

Craft Demo Site Happy LagerCraft Demo Site Happy LagerCraft Demo Site Happy Lager

Los pasos de instalación son exactamente los mismos que los descritos anteriormente para On the Rocks. El repositorio Git debe ubicarse aquí:

Happy Lager hace uso de las capacidades de diseño más profundas de Craft. Aquí hay un par de capturas de pantalla de la página Acerca de:

Craft Demo Site About Page TopCraft Demo Site About Page TopCraft Demo Site About Page Top

Debajo de la tapa:

Craft Demo Site About Page BottomCraft Demo Site About Page BottomCraft Demo Site About Page Bottom

Aquí está la página de servicios:

Craft Demo Site Services ExampleCraft Demo Site Services ExampleCraft Demo Site Services Example

Página de entradas de Craft

Aquí está la página de Entradas en el tablero con todo el contenido de Happy Lager:

Craft Dashboard Entries - Like WordPress PostsCraft Dashboard Entries - Like WordPress PostsCraft Dashboard Entries - Like WordPress Posts

Eche un vistazo a los tipos de entrada en el panel de navegación izquierdo: Singles, Canales y Estructuras. Craft ofrece tipos de datos más sofisticados y extensibles que WordPress.

Singles son una página que tienen un diseño único, como la página de inicio de su sitio. Los canales son para entradas organizadas por fecha, como un blog o secciones de noticias. Las estructuras son para contenido proporcionado en un orden predefinido.

El editor de Craft

Aquí está la página de edición. Obsérvese la amplitud de campos posibles que son de nuevo personalizables, p. Título, imagen destacada, descripción corta, título, subtítulo, cuerpo del artículo.

Craft Dashboard Edit EntryCraft Dashboard Edit EntryCraft Dashboard Edit Entry

Observe debajo de la tapa cómo el tipo de comillas ofrece varios diseños en el flujo de la historia como lo hace la imagen que sigue (pero no podía incluirlo todo en la captura de pantalla):

Craft Edit Entry with Components and PositioningCraft Edit Entry with Components and PositioningCraft Edit Entry with Components and Positioning

Esta capacidad es lo que Craft llama Matrix, y permite una composición de la historia más poderosa y el diseño. Cada bloque puede tener campos personalizados y una posición personalizada, y puede arrastrarse y soltarse en el flujo. Aquí hay un pequeño video que muestra a Matrix:

Aquí está la vista previa en linea—simplemente hermosa. Me recuerda a la previsualización de Ghost Markdown que escribí en Mantenerse al día con Ghost 0.5 (Tuts+). Los lectores pueden recordar que odio a Markdown, por lo que aprecio mucho el Craft en vivo de vista previa:

Craft Editing Live Preview ModeCraft Editing Live Preview ModeCraft Editing Live Preview Mode

Aquí hay un poco más en Vista previa en linea:


Craft ofrece un fácil acceso a revisiones anteriores:

Craft Editing - Ready Access to Past RevisionsCraft Editing - Ready Access to Past RevisionsCraft Editing - Ready Access to Past Revisions

La Biblioteca de Medios de Craft

Los archivos de imagen se organizan por grupo y están disponibles en la página Assets:

Craft Asset ManagementCraft Asset ManagementCraft Asset Management

Si alguna vez has esperado a WordPress para cargar tu página de medios, apreciarás lo rápido que es Craft.

Construyendo la página principal de Happy Lager

Aquí está una mirada más cercana al contenido detrás de las partes de la página de inicio de Happy Lager—específicamente, así es como se ve cuando se edita el contenido:

Home page content within the Craft editing systemHome page content within the Craft editing systemHome page content within the Craft editing system

Craft utiliza las plantillas Twig para transponer los elementos de contenido estructurado en páginas web:

Tipos de Sección

Los sitios de Craft se construyen alrededor de las secciones que hemos descrito anteriormente: Singles, Canales y Estructuras. Aquí hay un breve video que muestra los tipos de sección con más profundidad:

Aquí están las secciones asociadas con el sitio de demostración de Happy Lager—observe cómo cada una corresponde a la barra de navegación principal.

Craft Dashboard SectionsCraft Dashboard SectionsCraft Dashboard Sections

Las paginas  de inicio y Acerca de son Singles. La página Noticias y Trabajo son Canales. La página Servicios es una Estructura.

Por supuesto, Craft también ofrece categorías y etiquetas. Las categorías le ayudan a organizar el contenido de su sitio antes de tiempo, mientras que las etiquetas le permiten crear una Folcsonomía ad hoc basada en el contenido de cada uno de sus artículos.

Este es un breve video que describe categorías y etiquetas:


Otra característica interesante que Craft ofrece es la capacidad de encaminar las solicitudes de URL mediante rutas amigables directamente a secciones específicas:

Craft Dashboard Creating routes for friendly URL mappingCraft Dashboard Creating routes for friendly URL mappingCraft Dashboard Creating routes for friendly URL mapping

Una mirada más profunda a las páginas de Happy Lager

Aquí está la página de What's On Tap de http://happylager.dev/index.php/work:

Craft Demonstration Site Whats On TapCraft Demonstration Site Whats On TapCraft Demonstration Site Whats On Tap
Aquí puede ver cómo los elementos de arriba se editan como entradas separadas en el Canal de Trabajo, organizadas por fecha.

Aquí está un vistazo a la página de Servicios—Cómo se hace en http://happylager.dev/index.php/services. Es una estructura cuyos elementos tienen un orden predefinido.

Craft Demonstration Site How Its MadeCraft Demonstration Site How Its MadeCraft Demonstration Site How Its Made

Cada uno de los cuadros de imagen es manejado por una entrada en servicios. Puede cambiar su orden de apariencia mediante arrastrar y soltar:

He aquí un ejemplo de plantilla Twig para esta página:

Y aquí está la plantilla para cada entrada. Esto le da una idea de cómo construir plantillas de Twig para su sitio Craft y lo que implica:

Edición de entradas

Edición de entradas en Craft es simple, al igual que WordPress, pero con capacidades de diseño mejorado que normalmente se requieren plugins para lograr.

Cada sección puede tener varios tipos de entrada definidos por el usuario. Por ejemplo, la sección de noticias aquí tiene dos tipos diferentes de entradas: artículos y enlaces. Los tipos de entrada permiten almacenar diferentes tipos de contenido en la misma sección.

Aquí hay un breve video sobre Tipos de entrada:

Ahora que tiene una idea de cómo funciona la construcción del sitio en Craft, vamos a instalar una nueva versión desde cero.

Instalación de Craft desde cero

Para instalar Craft, visite el sitio web y descargue la base de código. Estoy usando Mac OS X con MAMP para mi desarrollo local y pruebas.

Craft proporciona instrucciones detalladas de instalación y enlaces a guías para Mac, Laravel, Heroku e incluso una instalación automatizada con Composer.

Cambie el nombre del archivo htaccess:

Cree un enlace simbólico a su directorio público de Craft para MAMP:

Si ejecuta la instalación de Craft localmente desde los nombres de host "craft.dev" o "ontherocks.dev", tendrá la opción de cambiar entre Craft Personal, Craft Client y Craft Pro de forma gratuita, para siempre.

He creado la base de datos a través de PHPMyAdmin.

Create Database for CraftCMS in PHPMyAdminCreate Database for CraftCMS in PHPMyAdminCreate Database for CraftCMS in PHPMyAdmin

Edite el archivo de configuración de la base de datos de Craft para sus credenciales de MySQL:

Ingrese sus credenciales en los siguientes campos:

Configurar permisos de escritura para estos directorios de aplicacion de Craft:

Visite la página local de Craft y ¡debe ver a los monos de nuevo!

Craft CMS Installation Home PageCraft CMS Installation Home PageCraft CMS Installation Home Page

Registre su cuenta inicial de administración:

Craft Register Your Administrator AccountCraft Register Your Administrator AccountCraft Register Your Administrator Account

Configure las propiedades del sitio:

Craft Configure Your General Site SettingsCraft Configure Your General Site SettingsCraft Configure Your General Site Settings

Y eso es todo:

Craft Installation CompleteCraft Installation CompleteCraft Installation Complete

Aquí está su panel de control nuevamente:

Craft Your New Site DashboardCraft Your New Site DashboardCraft Your New Site Dashboard

Craft es tan centrado en el usuario final que incluyen un formulario de contacto de soporte en la página principal de su panel de control.

Puede encontrar la configuración del sitio desde la barra de navegación en la parte superior derecha. Me recuerda algo de iOS:

Craft Settings PanelCraft Settings PanelCraft Settings Panel

Esto es lo que se ve en su sitio de Craft por defecto cuando comienza:

Craft Default Site Without Real TemplateCraft Default Site Without Real TemplateCraft Default Site Without Real Template

Sí, Craft no tiene la comunidad de temas de WordPress. Para la mayor parte, tiene que codificar su propio tema. Para el principiante, WordPress todavía tiene una ventaja.

Por otro lado, ya puede notar cuán rápido se ejecuta Craft en comparación con WordPress.

¿A dónde ir desde aquí?

Ciertamente, puede comenzar a crear el contenido de muestra de su sitio, pero tendrá que aprender sobre temas y complementos de Craft. Estos son algunos recursos que le ayudarán:

Le recomiendo que instale Craft y explore su conjunto de funciones más. Estoy emocionado por el poder, control y escalabilidad Craft ofrece como una alternativa a WordPress. También soy un aficionado de Yii y es genial ver una herramienta de CMS construida sobre mi framework favorito.

Si desea ver una serie de seguimiento sobre la publicación con Craft, por favor, publique una nota en los comentarios. También aprecio sus preguntas y comentarios y generalmente respondo. Puede contactarme en Twitter @reifman o enviarme un correo electrónico directamente.

También quiero dar una mencion a Brandon Kelly, propietario de Pixel & Tonic, los creadores de Craft. Brandon fue muy amigable para responder a mis preguntas y me dio una vista previa de su nuevo sitio de demostración que ahora puede acceder.

Enlaces relacionados

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.