Paso a paso (Crear un tema)

En pocas palabras, los pasos recomendados para crear un tema desde una imagen o un archivo PSD son:

1 Convertir el diseño original a un sitio HTML estático con sus archivos, ficheros javascript y hojas de estilo.

2 Instalar Navigate CMS en un servidor web.

3 Determinar el título del tema, nombre interno, los tipos de plantillas disponibles, los tipos de bloques y las opciones de configuración global.

4 Escribir el archivo de definición del tema.

5 Tomar todos los archivos HTML y transformarlos en un plantillas usando las etiquetas nv.

6 Pulir la definición del tema con opciones de plantillas, incluir los diccionarios al tema, etc.

7 Crear algunas muestras del contenido mientras finalizamos el tema.

8 Exportar el contenido de muestra e incluirlo en la carpeta de temas.

Adicionalmente, puedes publicar el tema completo en la sección de Descargas de Navigate CMS.

Ahora vamos a explicar cómo crear un tema sencillo para Navigate CMS paso a paso.

1 Desde el PSD (o imagen) a HTML

Si ya tienes un sitio HTML estático puedes saltarte este paso. Si no sabes cómo lograr este paso tienes dos opciones.

Opción 1) Aprender y dominar el arte de la creación de plantillas HTML a partir de un diseño. Recomendamos la lectura de este tutorial en línea y el sitio web PSD a HTML tuts.

Opción 2) Busca una empresa que ofrezca este servicio. Naviwebs, la compañía tras Navigate CMS, ofrece este servicio a un precio muy asequible. Incluso podemos crear un tema completo compatible para tu instalación de Navigate CMS.

Para seguir este paso a paso te proporcionamos una plantilla html de un sitio web muy simple.

Descargar Demo del sitio web HTML

2 Instalar Navigate CMS en un servidor web

Sigue las instrucciones para instalar la aplicación aquí.

3 Determinar el título del tema, nombre interno, los tipos de plantillas disponibles, los tipos de bloques y las opciones de configuración global

En este ejemplo, el título del tema será "Demo website" y el nombre en clave "demo".

El tema tiene dos tipos de página: inicio y contenido. En nuestro ejemplo no crearemos ningún tipo de bloque.

Vamos a añadir dos configuraciones temáticas globales: logotipo y eslogan.

4 Escribir el archivo de definición del tema

Empezaremos escribiendo r la estructura básica:

{
    "title": "Demo website",
    "version": "1.0",
    "author": "Naviwebs <[email protected]>",
    "website": "http://www.naviwebs.com",
    "languages": {},
    "styles": {},
    "options": [],
    "templates": [],
    "blocks": [],
    "content_samples": []
}

No vamos a tener esquemas de color alternativos, por lo que el campo "styles" se puede dejar vacío, lo mismo sucede con los campos "blocks" y "content_samples".

Más tarde decidiremos si creamos un diccionario temático, por ahora dejamos el campo "languages" vacío también.

Por lo tanto, tenemos que rellenar los campos "options" y "templates".

Campo "options"

Vamos a preparar dos opciones del tema: logo y slogan. El primero será un archivo de imagen y el segundo un campo de texto en varios idiomas. Vamos a escribir las definiciones:

[
    {
        "id": "logo",
        "name": "Website logo",
        "type": "image",
        "dvalue": "img/logo-navigate.png"
    },
    {
        "id": "slogan",
        "name": "Website slogan",
        "type": "text",
        "dvalue": ""
    }
]

Nota: El campo "dValue" de la opción logo establece la ruta predeterminada a la imagen en la carpeta del tema, no desde la raíz del sitio web.

Campo "templates"

En este caso, vamos a dar de alta 2 plantillas: inicio y contenido. La plantilla inicio cuenta con 3 secciones (las tres columnas que siguen a la imagen principal). Usaremos la galería de Navigate CMS para definir la imagen principal de la plantilla inicio.

La plantilla de contenido tiene sólo una sección editable: contenido principal.

[
    {
        "type": "home",
        "uses": "structure",
        "file": "home.nvt.html",
        "gallery": true,
        "statistics": true,
        "sections": [
	    {
	        "name": "Column 1",
	        "code": "column1",
	        "editor": "tinymce",
	        "width": "285"
	    },
	    {
	        "name": "Column 2",
	        "code": "column2",
	        "editor": "tinymce",
	        "width": "285"
	    },
	    {
	        "name": "Column 3",
	        "code": "column3",
	        "editor": "tinymce",
	        "width": "285"
	    }
	],
        "properties": []
    },
    {
        "type": "content",
        "file": "content.nvt.html",
        "gallery": false,
        "statistics": true,
        "sections": [
	    {
	        "name": "#main#",
	        "code": "main",
	        "editor": "tinymce",
	        "width": "940"
	    }
	],
        "properties": []
    }

]

Hemos definido "structure" para los usos ("uses") de la plantilla "home" (portada). Esto es así porque dicha plantilla sólo puede ser asignada a una rama de la estructura, y no a un elemento. De este modo se facilita la experiencia de usuario a la hora de escoger las plantillas a usar. Como la plantilla "content" puede ser asignada a una rama de la estructura o a un elemento, la propiedad "uses" no es necesaria.

5 Transformar todos los archivos HTML en plantillas usando las etiquetas nv

Vamos a empezar por editar la plantilla inicio. La sección cabecera necesita una etiqueta <title>; Navigate CMS puede generarla automáticamente utilizando la etiqueta nv "metatags":

    ...
    <nv object="nvweb" name="metatags" />
</head>

Después de abrir el div <body> se recomienda incluir una llamada a la etiqueta nv "liveedit".

<body>
    <nv object="nvweb" name="liveedit" />
    ...

Siguiendo el código fuente del la plantilla inicio llegamos a la sección de logo y slogan:

<div class="logo">
    <a href="#">
        <img src="img/logo-navigate.png" width="200px" />
    </a>
</div>

<div class="slogan">Tu slogan personalizado para el sitio web</div>

ya que ambas son opciones de tema (propiedades), el nuevo código sería el siguiente:

<div class="logo">
    <a href="{{nv object='root'}}">
        <nv object="nvweb" name="properties" property="logo" width="200" />
    </a>
</div>

<div class="slogan"><nv object="nvweb" name="properties" property="slogan" /></div>

El logotipo está dentro de un tag a (enlace) que redirige a la raíz del sitio web (página de inicio). Navigate CMS devuelve la URL raíz del sitio web llamando a la etiqueta nv "root". Tal vez hayas visto que hemos utilizado el formato {{nv}} en vez de <nv />. Podríamos haber utilizado cualquiera de los dos, pero como estamos escribiendo una etiqueta en un atributo, el código HTML sería sintácticamente incorrecto. Al final, no importa, porque Navigate CMS analiza cada etiqueta nv antes de enviar la página al navegador, por lo que dependerá de cómo te sea más cómodo escribirlo.

El logotipo de la imagen se solicita mediante las propiedades del webget y, como sabemos que la propiedad es una imagen, definimos que el logo debe tener un ancho de 200px. Se puede quitar este atributo y entonces Navigate CMS creará una etiqueta img sin dimensiones.

Para obtener el  texto del  slogan haremos una llamada simple a las propiedades del webget preguntando por el valor de la propiedad llamada "slogan". Como Navigate CMS determina cuál es el idioma activo en un sitio web, se seleccionará la traducción de texto correcta.

Siguiente: el menú. Vamos a analizar el código fuente original:

<div class="menu">
    <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Content 1</a></li>
        <li><a href="#">Content 2</a></li>
    </ul>
</div>

Nuestra plantilla crea el menú con el formato estándar ul > li > a. Navigate CMS puede generar este tipo de menú escribiendo el siguiente código:

<div class="menu">
    <nv object="nvweb" name="menu" mode="ul" />
</div>

Fácil, ¿no? Sólo hay un pequeño inconveniente, Navigate CMS asigna su propia clase "menu_option_active" a la opción de menú correspondiente a la página que estamos visualizando... Si miramos detalladamente nuestro primer <li> veremos definida la clase "active" para ese propósito. Eso significa que tendremos que modificar un poco nuestra hoja de estilos y definir esa nueva clase. En el CSS original teníamos:

ul > li > a.active
{
    color: #769fdf;
    text-decoration: underline;
}

y ahora se convertirá en:

ul > li > a.active,
ul > li > a.menu_option_active
{
    color: #769fdf;
    text-decoration: underline;
}

Eres libre de retirar el original selector (ul> li> a.active), ya que en este ejemplo no se necesita más.

Llegamos a la zona de contenido principal, dividida en tres secciones: el título, la imagen principal y 3 columnas independientes.

<div class="content">
    <h2>Welcome Home</h2>
    <img src="img/sea.jpg" width="940" height="300"/>
</div>

Más tarde, en Navigate CMS, vamos a crear un artículo para la página de inicio. Vamos a tener que dar un título a ese tema y vamos a subir una imagen en la galería. Por lo tanto, el código final para nuestra plantilla es la siguiente:

<div class="content">
    <h2><nv object="nvweb" name="content" mode="title" /></h2>
    <nv object="nvweb" name="gallery" mode="image" position="0" 
        width="940" height="300" border="false" />
</div>

La parte del título es bastante clara. Sólo pedimos por el título del contenido actual. El código de la imagen principal requiere más explicación. Para recuperar una imagen de la galería del contenido actual tenemos que hacer una solicitud al webget "gallery". Una de las modalidades que ofrece es "image", la cual devuelve una única etiqueta o tag de imagen correspondiente a la "posición" dada (0 es la primera).

En este caso, necesitamos que la imagen tenga 940px x 300px y es posible que la imagen cargada tenga un tamaño diferente. Pedir un cierto ancho y/o alto fuerza que Navigate CMS genere una imagen redimensionada y eso significa que tenemos que elegir cómo queremos hacerlo: redimensionando y cortando o escalando y dejando bordes transparentes. En este ejemplo queremos que nuestra imagen rellene las dimensiones completas así que definimos border="false" para forzar que la aplicación redimensione y corte. Puedes hacer caso omiso de los atrributos anchura, altura y borde en otras situaciones y se mostrará la imagen original, sin alterar.

Ahora continuamos con la sección que queda: las tres columnas.

<div class="columns">
    <div class="column">
        <h4>Lorem Ipsum</h4>
        <div class="column-text">
            Phasellus in nulla a sapien ultrices bibendum. 
            Quisque fermentum diam eget augue fringilla sit amet vestibulum.
        </div>
    </div>
    [...2 columnas más...]
    <div style="clear: both;"></div>
</div>

Si recordamos la definición de tema, cada columna es una sección independiente. Tendremos 3 columnas, ni más ni menos.

 <div class="columns">
    <div class="column">
        <nv object="nvweb" name="content" mode="section" section="column1" />
    </div>
    <div class="column">
        <nv object="nvweb" name="content" mode="section" section="column2" />
    </div>
    <div class="column">
        <nv object="nvweb" name="content" mode="section" section="column3" />
    </div>
    <div style="clear: both;"></div>
</div>

El contenido de cada una de las columnas originales se compone de dos etiquetas interiores: <h4> y <div class="column-text">. Estas etiquetas tienen que ser insertadas en cada sección durante la edición. Para facilitar esta tarea Navigate CMS ofrece la característica "Muestras de contenido". Revisa la sección de la definición de tema para obtener más información. En esta guía vamos a suponer que el usuario introducirá esas etiquetas sin ninguna ayuda.

Por último, en la zona de pie de página de nuestra plantilla inicio, tenemos:

<div class="footer">
    <div class="footer-line"></div>
    <span>&copy; 2012 - Website Title</span>
</div>

Cambiarán dos partes: el año y el título.

<div class="footer">
    <div class="footer-line"></div>
    <span>
        &copy; <nv object="variable" name="year" /> - 
        <nv object="variable" name="website_name" />
    </span>
</div>

Una solicitud directa al objeto de variables nos dará esa información.

Acabamos de terminar la ¡plantilla de inicio!

La plantilla de contenido es incluso más simple. Repetimos (copiar y pegar ;) las partes comunes con la plantilla de inicio y descubriremos que sólo tenemos una zona a editar:

<div class="content">
    <div class="content-text">
        <h2>Some information</h2>
        <span>content text</span>
    </div>
</div>

Sólo un título y el contenido principal...

<div class="content">
    <div class="content-text">
        <h2><nv object="nvweb" name="content" mode="title" /></h2>
        <nv object="nvweb" name="content" mode="body" />
    </div>
</div>

¡Ya está!

6 Pulir la definición de tema con opciones de plantillas, incluir los diccionarios temáticos, etc

Nuestro tema es tan simple que no tiene un diccionario de traducciones. Sólo teníamos previsto integrar dos opciones de tema y ya lo hemos hecho. Para finalizar el conjunto básico para nuestro tema vamos a incluir dos archivos en la carpeta raíz.

La página de demostración estática HTML
-Tomamos la home.html original y le cambiamos el nombre a demo.html.

Imagen del tema / captura
-Utilizamos una aplicación para capturar la pantalla, le cambiamos el tamaño de la captura a 205x145px y guardamos el archivo como thumbnail.png.

Para preparar un paquete ZIP y de ese modo facilitar la instalación de nuestro tema tenemos que usar nuestro compresor favorito; simplemente selecciona todos los archivos y carpetas dentro de la carpeta de temas y empaquétalos en un archivo nuevo llamado demo.zip. Ten en cuenta que el archivo debe tener llevar el nombre interno de nuestro tema, de lo contrario Navigate CMS no lo va a cargar.

7 Crear algunos contenidos de muestra mientras finalizamos el tema

Este paso requiere una instancia de Navigate CMS instalada. Vamos a crear un sitio de demostración para nuestro tema.

7.1 Abrimos Web > Sitios Web. Creamos el sitio web y asignamos un dominio / subdominio.

7.2 Seleccionamos el nuevo sitio web en el selector superior de sitio web.

7.2 Abrimos la función Web > Temas.

7.3 Hacemos click en Instalar desde archivo y seleccionamos el archivo demo.zip creado antes. Verás un nuevo elemento con la imagen que has creado antes.

7.4 Abrimos la función Web > Estructura y creamos dos o tres elementos (inicio, contenido 1, contenido 2...). Asignamos la plantilla correcta para cada elemento de la estructura y le damos una ruta única.

7.5 Abrimos la función Contenido > Elementos y creamos un elemento para cada entrada de estructura generada antes. Una vez asignada la categoría a un elemento debemos Guardar para actualizar el formulario. Introducimos un título y un poco de contenido en cada sección, incluyendo imágenes si queremos.

7.6 Abrimos de nuevo la función Web > Sitios web y hacemos doble clic en el sitio web en el que estamos trabajando. En la primera pestaña, editamos el campo de página de inicio para establecer la ruta que hemos asignado en el paso 7.4. En la última pestaña puedes configurar el eslogan del sitio web  y el logotipo. Guarda y tu sitio web de demostración estará listo.

7.7 Haz click en el icono de la casa situado en el selector superior para abrir y visualizar la página web de tu sitio web en una nueva pestaña. Comprueba todo y cambia lo que no te guste.

8 Exportar el contenido de la muestra e incluirlo en la carpeta de temas

Ahora que tienes un sitio web totalmente funcional con datos de ejemplo, ¿por qué no incluirlo en tu paquete de tema? De esta forma alguien sólo tendrá que instalar el tema e importar el contenido de ejemplo para tener su web en funcionamiento en cuestión de minutos.

Para conseguirlo, basta con abrir Web > Temas y hacer click en Exportar contenido de muestra. Puedes encontrar instrucciones más detalladas en la sección correspondiente de este manual.

Después de este proceso sólo hay que incluir el ZIP generado en la carpeta raíz de los archivos de tema.

¡Enhorabuena!

Descargar el tema del sitio web de demostración final con contenido de muestra

0 Comentarios