Comenzando

Pasos para crear un Template Masify

1- Crear o Acceder a su cuenta de integrador Masify
2- Crear y subir al Cloud Masify el esquema XML del template desde el formulario de alta y modificación de templates.
3- Crear y subir al Cloud Masify vía FTP los archivos del Template (archivos xslt, css, js, imágenes, etc.)

En este capítulo se describirán los pasos 1 y 2, mientras que en el siguiente capítulo comenzará a describirse el paso 3, que abarca la creación de los archivos de Template y su subida al Cloud Masify.

Crear o Acceder a su cuenta de integrador Masify

FALTA

Crear esquema XML del template

El esquema XML de un template es un archivo que define las características del mismo.

Estas características abarcan:
- El nombre del template y si pertenece a un sitio web específico o será utilizado en cualquier sitio de la plataforma Masify.
- Los tipos de datos que utilizará (contenidos relacionados, espacios para banners, menús de navegación, etc.).
- Las opciones para personalizar el diseño y las funcionalidades (colores, tipografías, módulos activables, textos personalizables, etc.).

En los próximos párrafos se irán describiendo cada uno de los bloques (nodos XML) de configuración que puede contener el esquema XML, indicándose su funcionalidad, y si el mismo es obligatorio u opcional

Ejemplo de un esquema XML

Descargar archivo XML

Nodo Principal (requerido)

En este nodo se define el nombre y el ámbito del template

Elementos

name: El nombre del template sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.
Los nombres de template son únicos, no podrán existir nombres duplicados, por lo que el sistema indicará si el nombre de template ya está en uso.

isExternal: Este valor deberá ser siempre 0.

isExclusive / portalID: En caso de que el template sea exclusivo para un solo portal, el atributo isExclusive deberá tener valor "1, y en el atributo portalID deberá indicarse el ID de Portal al cual se asignará el template (el ID de Portal deberá ser provisto por el propietario o administrador del mismo).
En caso de que el template no sea exclusivo (podrá ser utilizado por cualquier sitio web), el atributo isExclusive deberá tener valor "0" y no deberá indicarse el atributo portalID.

Nodo "description" (requerido)

En este campo puede colocarse un texto corto de descripción del template, en formato texto plano (sin etiquetas html ni caracteres '<' o '>' que obstruyan el flujo XML)

Nodo "menus" (requerido)

Este nodo define la cantidad y posición de los menús que utilizará el template.
En caso de no utilizar ningún menú, sólo debe incluirse el nodo "<menus>", sin ningún nodo en su interior.

Por cada menú que de desee incorporar al template, se define un nodo "<menu>" con las siguientes características:

name: Discontinuado. Valor fijo "menu".

position: Posición del menú.
Este valor es importante para mantener uniformidad en los templates, y permitir que al cambiar de uno a otro se mantengan los datos de cada uno en una posición similar.
El sistema Masifiy define 3 posiciones básicas recomendadas, que no son obligatorias, ni limitantes (puede haber un menú, ninguno, o diez):

position="1" siempre será el menú principal del sitio, position="2" y position="3" serán menús secundarios para las zonas superior e inferior del template.

Si bien no es obligatorio respetar este criterio, debe tenerse en cuenta que utilizarlo favorecerá la usabilidad.

description: El nombre que se mostrará en el panel de control para cada menú.

Nodo "positions" (requerido)

Este nodo define las posiciones para banners dentro del template.
Un template puede utilizar o no posiciones para banners, y la cantidad de las mismas es ilimitada.
En caso de no utilizar ningún banner, sólo debe incluirse el nodo "<positions>", sin ningún nodo en su interior.

Los banners son espacios donde se pueden cargar imágenes o porciones de código HTML desde el panel de control.
Cada posición de banners admite múltiples banners.
Las posiciones de banners pueden utilizarse en uno o más tipos de contenidos.

Elementos

width: Valor indicativo para el ancho del banner, según su ubicación.
No es excluyente, es decir, no limita el ancho de los contenidos que puedan subirse a ese sector, simplemente funciona a modo informativo para el usuario del panel de control.

random: Discontinuado. Puede utilizarse indistintamente 0 o 1.

name: Identificador para ser utilizado dentro del el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.

description: El nombre que se mostrará en el panel de control para cada posición de banners.

Nodo sectors (requerido)

Este nodo define los sectores para relacionar contenidos, y el tipo de los mismos.

Elementos

name: Cada tipo de contenido permite que se relacionen en él otros de contenidos, de su mismo tipo de otros.
Por cada sector que se defina en el template, aparecerá un formulario en el panel de control del sitio web para relacionar contenidos en dicho sector.

Las relaciones están limitadas a los siguientes tipos de combinaciones.

ItemForHome: Productos relacionados en la página de inicio.
ItemForPage: Productos relacionados en páginas.
ItemForItem: Productos relacionados en otros productos.
ItemForCategory: Productos relacionados en categorías.
ItemForArticle: Productos relacionados en artículos.

ArticleForSections: Artículos relacionados en secciones.
ArticleForHome: Artículos relacionados en la página de inicio.
ArticleForItem: Artículos relacionados en productos.
ArticleForArticle: Artículos relacionados en otros artículos.

PageForPages: Páginas relacionadas en otras páginas.
PageForItem: Páginas relacionadas en productos.

position: puede existir más de una posición de relaciones del mismo tipo, por lo que se utiliza el valor de position para unificar criterios de preponderancia entre distintos templates.
Así, un sector "ItemForHome" (productos destacados en la página de inicio) que posea position="1" podrá ser identificado como el principal, y uno con position="2" como el secundario, y al cambiar de template esa preponderancia podrá mantenerse.
Si un template posee en el mismo tipo de contenido dos sectores de relaciones del mismo tipo, siempre convendrá utilizar el sector con position menor en el sector de más importancia.

description El nombre que se mostrará en el panel de control para cada sector de relacionados.

Layouts - diseños intercambiables (requerido)

Los layouts son opciones que se pueden ofrecer para mostrar un determinado tipo de contenido de diferentes formas.
Estas opciones se muestran en el panel de control para que el administrador de un sitio web pueda elegir y cambiar el diseño de el contenido que se está editando.

Tres tipos de contenidos permiten utilizar layouts intercambiables: las secciones de artículos, los artículos, y las páginas.

Elementos

typeId: El tipo de contenido al que se aplicará el layout.
El valor deberá ser 4 si es para artículos, 5 para secciónes de artículos, 6 si es para páginas.

name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.

description: El nombre que se mostrará en el panel de control para cada opción de diseño.

Keys - claves de diccionario (requerido)

Las keys o claves de texto permiten crear un diccionario personalizado para el template, para dejar el control de los textos y mensajes del sitio web a su administrador a través del panel de control.

Elementos

name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.

description: El nombre que se mostrará en el panel de control para cada opción de diseño.

defaultValues: El valor por defecto para cada clave. Se crea un nodo "defaultValue" por cada idioma que se desee integrar en el template.
Actualmente la plataforma Masify sólo posee soporte para español, por lo que se recomienda utilizar un sólo defaultValue por clave, con languageId="1"

Settings (requerido)

Los settings son opciones de diseño / funcionalidad que pueden agregarse a un template para configurarlo.
Estas settings están disponibles en todos los tipos de contenidos.

De acuerdo a su función, pueden ser de los siguientes typeId:

Hojas de estilo .less
Para conocer más sobre las hojas de estilos less, puede consultar la sección correspondiente de nuestro manual, o bien la documentación oficial disponible en el siguiente enlace:
http://lesscss.org/

1- Color: Almacena un valor hexadecimal que puede ser utilizado a través de una hoja de estilo .less
Esto permite personalizadar los colores en las hojas de estilo del template.
2- Font: Selecciona una tipografía de una lista de tipografías web predefinidas.
Esto permite presentar distintas opciones de tipografía para el template.
Al igual que el tipo "Color", se implementa mediante una hoja de estilos .less
3- Select: Almacena un valor único de una lista de opciones. Este valor puede ser numérico o de texto.
4- MultiSelect: Almacena uno o más valores de una lista de opciones. Este valor puede ser numérico o de texto.
5- Radio: Funciona del mismo modo que Select sólo que en el panel de control se presenta con formato de radio buttons.
6- CheckBox: Funciona del mismo modo que MultiSelect sólo que en el panel de control se presenta con formato de checkboxes.
7- Boolean: Almacena un valor booleano (True o False).
8- String: Almacena un valor de texto.
9- StyleInt: Almacena un valor para una propiedad css, que puede ser utilizado a través de una hoja de estilo .less, al igual que los tipos "Color" y "Font".

Las settings de typeId 1, 2 y 9 están disponibles para ser utilizados desde una hoja de estilos .less
Las settings de typeId 3, 4, 5, 6, 7 y 8 están disponibles para ser utilizados en los archivos XSLT del template.

Ejemplo (esquema XML)

Ejemplo (settings reflejadas en panel de control)

typeId 1: Color

Elementos

typeId: En este caso, el valor deberá ser 1.
name: El nombre del identificador que se utilizará en la hoja de estilos .less para acceder al valor.
description: El nombre para mostrar en el panel de control.
value: El valor por defecto para la opción, en formato hexadecimal.

typeId 2: Font

Elementos

typeId: En este caso, el valor deberá ser 2.
name: El nombre que se utilizará en la hoja de estilos .less para identificar al valor, en caso de que se desee realizar una comprobación (Por ejemplo en un mixin .less).
description: El nombre para mostrar en el panel de control.
options: Un listado de opciones, donde cada nodo "<option>" corresponde a una tipografía.
Los elementos para cada nodo son:
isDefault: En caso de que se desee que la tipografía sea la utilizada por defecto, este valor deberá ser 1. De lo contrario, 0.
displayOrder: El órden en que deberá mostrarse la opción en el formulario de selección.
name: El nombre para mostrar en el panel de control.
url: Url de la tipografía en caso de utilizar que sea una tipografía web (web font). De ser una tipografía de sistema, este nodo deberá dejarse vacío.
family: El valor 'font-family' de la tipografía para ser utilizado en la hoja de estilos.

typeId 3 y typeId 5: Select / Radio Button

Ambos tipos poseen la misma funcionalidad y elementos

Elementos

typeId: El valor deberá ser 3 si en el panel de control se desea mostrar las opciones en forma de lista desplegable (select) o 5 para que aparezcan en forma de radio buttons.
name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.
description: El nombre de la opción para mostrar en el panel de control.
options: Un listado de opciones, donde cada nodo "<option>" corresponde a una opción.
Los elementos para cada nodo son:
isDefault: En caso de que se desee que la opción sea la utilizada por defecto, este valor deberá ser 1. De lo contrario, 0.
displayOrder: El órden en que deberá mostrarse la opción.
name (atributo): Debe ser igual al nodo "value" (var más abajo).
name (nodo): El nombre del valor para mostrar en el panel de control.
value: El valor de la opción para ser utilizado en el archivo XSLT del template.

typeId 4 y typeId 6: MultiSelect / Checkbox

Ambos tipos poseen la misma funcionalidad y elementos

Elementos

typeId: El valor deberá ser 4 si en el panel de control se desea mostrar las opciones en forma de lista desplegable (select) o 6 para que aparezcan en forma de radio buttons.
name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.
description: El nombre de la opción para mostrar en el panel de control.
options: Un listado de opciones, donde cada nodo "<option>" corresponde a una opción.
Los elementos para cada nodo son:
isDefault: En caso de que se desee que la opción sea la utilizada por defecto, este valor deberá ser 1. De lo contrario, 0.
Al ser un setting de selección múltiple, puede haber más de una opción marcada por defecto.
displayOrder: El órden en que deberá mostrarse la opción.
name (atributo): Debe ser igual al nodo "value" (var más abajo).
name (nodo): El nombre del valor para mostrar en el panel de control.
value:El valor de la opción para ser utilizado en el archivo XSLT del template.

typeId 7: Boolean

Elementos

typeId: En este caso, el valor deberá ser 7.
name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.
description: El nombre para mostrar en el panel de control.
value: El valor por defecto para la opción. True o False

typeId 8: String

Elementos

typeId: En este caso, el valor deberá ser 8.
name: Identificador para ser utilizado en el código del template, sin espacios ni caracteres latinos. Sólo utilizar letras de 'a' a 'z', números, y guiones bajos.
description: El nombre para mostrar en el panel de control.
value: El valor por defecto para la opción. Puede ser un valor numérico o de texto plano (sin formato html)

typeId 9: StyleInt

Elementos

typeId: En este caso, el valor deberá ser 9.
name: El nombre que se utilizará en la hoja de estilos .less para identificar al valor.
description: El nombre para mostrar en el panel de control.
options: Un listado de opciones, donde cada nodo "<option>" corresponde a una opción.
Los elementos para cada nodo son:
isDefault: En caso de que se desee que la opción sea la utilizada por defecto, este valor deberá ser 1. De lo contrario, 0.
displayOrder: El órden en que deberá mostrarse la opción.
name (atributo): Debe ser igual al nodo "value" (var más abajo).
name (nodo): El nombre del valor para mostrar en el panel de control.
value: El valor por defecto para la opción. Deberá corresponder a la propiedad css que se quiera modificar.
Por ejemplo, si es un setting para personalizar el estilo de un determinado texto (propiedad css 'font-style'), los valores podrían ser: 'normal','italic','oblique'.

Subir esquema XML del template al Cloud Masify

Deberá acceder a su portal de integrador con su usuario y contraseña.
Esos datos, y la url de su portal de integrador son enviados a su cuenta de email en el momento de crear el mismo.

Una vez logueado, ingresar a la sección "Estructura del template" en el módulo Diseño.
En el campo "código" deberá copiar el código XML de su esquema y presionar el botón "Guardar".

Una vez procesado el esquema XML, el sistema le informará si hubo algún error en la creación/modificación, y en caso de no haberlo, se mostrará la información correspondiente para conectarse por vía FTP al directorio correspondiente al template y comenzar el proceso de creación del mismo.