Construir un template para CMS Made Simple

CMS Made Simple es un gestor de contenidos con el cual podemos crear y administrar una página Web.

A continuación vamos a explicar como crear nuestro propio template. Lo primero que debemos hacer, es descargar e instalar el CMS. Podéis descargar la última versión aquí.

Una vez descargado, copiamos los archivos en nuestro servidor, ya sea remoto o local, y ejecutamos "index.php"; para ello, basta con escribir en un navegador su dirección; por ejemplo, si estamos trabajando en local y hemos guardado los archivos en una carpeta que se llama CMS, bastará con escribir: "http://localhost/CMS/" o si estamos haciendo la instalación directamente sobre un servidor remoto y has colocado los archivos en la carpeta raíz del sitio, deberás escribir la dirección o URL de tu dominio: "http://www.tudominio.com".

Puede ocurrir, en algún caso, que necesites crear el archivo "config.php". Para crearlo, abre el bloc de notas y guarda un archivo en blanco con el nombre "config.php", en Tipo selecciona "Todo los archivos" y en Codificación "UTF-8".

La primera pantalla que vemos es la correspondiente a la selección del idioma. Selecciona una opción y haz clic en "Submit".

Completa la instalación introduciendo los datos de conexión con la base de datos, un usuario y contraseña para acceder al panel de administración, etc.

neo 2.0 - Construir un template para CMS Made Simple - 1

Una vez finalizada la instalación, accede al panel de administración, el cual se divide en 7 secciones principales:

  • CMS
  • Contenido
  • Diseño
  • Usuarios y Grupos
  • Extensiones
  • Sitio
  • Mis Preferencias

En la pestaña "Diseño", encontrarás varios templates con sus correspondientes hojas de estilo CSS. Puedes asignar un único template a toda la página Web o elegir por cada página un template. Esto es útil, por ejemplo, si necesitas hacer una pantalla de bienvenida o home distinta a las páginas interiores de tu sitio Web.

neo 2.0 - Construir un template para CMS Made Simple - 2

Para construir nuestro propio template, lo primero será maquetar en HTML y CSS nuestro diseño, como lo haríamos con un Website sin CMS.

Una vez diseñado y maquetado nuestro template, obtendremos un documento HTML y su hoja de estilo CSS. Para poder seguir el ejemplo, nombra a tu documento HTML como "MiLayout".

Las diferentes partes que forman nuestro sitio Web con CMS Made Simple, como los títulos de las páginas, los artículos, el menú, etc. son etiquetas "Tags" a la cuales llamaremos desde nuestro template.

A continuación detallamos algunas "Tags" que nos servirán para construir nuestro sito Web:

  • {sitename}: el nombre del sitio.
  • {search}: el módulo de búsqueda.
  • {menu}: el menú de la página.
  • {breadcrumbs}: "migas de pan", indica en que parte de la página nos encontramos.
  • {title}: el título de cada artículo o página.
  • {content}: el contenido de cada artículo o página.
  • {news}: el módulo de noticias.

Este es sólo un pequeño listado de todas las etiquetas que podrás encontrar en "Extensiones" > "Tags" con las cuales podrás construir tu página Web. Muchas de ellas, admiten ajustar determinados parámetros, por ejemplo en {menu} añade start_level="1": {menu start_level="1"} para indicar que deben mostrarse las páginas del nivel 1.

neo 2.0 - Construir un template para CMS Made Simple - 3

Para construir nuestro propio template nos servirá de ayuda basarnos en un template ya construido, por ejemplo "NCleanBlue" y su hoja de estilo "Layout: NCleanBlue"; por lo que os recomiendo eliminar el resto de templates y hojas de estilo CSS con el fin de no editar un archivo por error.

Lo primero que debes hacer es asignar a todas las páginas dicho template, "NCleanBlue", haz clic en "Asignar a Todo"; ahora selecciona el resto de templates y haz clic en "Borrar" > "Enviar". Accede a las Hojas de estilo CSS y elimina todas, excepto "Layout: NCleanBlue".

neo 2.0 - Construir un template para CMS Made Simple - 4

Ahora, vuelve a la pestaña "Diseño" > "Plantillas" y haz clic en "Copiar". Asigna un nombre para tu nuevo template: "MiTemplate". Copia el código fuente y pégalo en tu editor HTML (por ejemplo Dremweaver).

Ahora copia el código fuente hasta la etiqueta </head> de "MiTemplate" y remplázalo en tu documento HTML "MiLayout".

Copia las diferentes etiquetas "Tags" que necesites para construir tu sitio Web en el lugar que hayas reservado en tu diseño "MiLayout"; por ejemplo, si en tu diseño has creado un <div> destinado a mostrar el contenido de los artículos o páginas, pega en su interior la etiqueta "{content}".

Una vez hayas incluido las diferentes etiquetas en "MiLayaout", copia el código fuente y pégalo en la pestaña "Diseño" > "Plantillas" > "MiTemplate". Ahora, ve a "Diseño" > "Hojas de estilo" y haz clic en "Añadir Hoja de Estilo". Asigna un nombre a tu nueva hoja de estilo: "MiEstilo" y pega tus estilos CSS; selecciona "Screen" en Tipo de Medio y haz clic en "Enviar".

Para asignar tus estilos CSS a "MiTemplate", en "Diseño" > "Platillas", haz clic en "Adjuntar Hoja de estilo", selecciona del menú desplegable "MiEstilo" y haz clic en "Añadir una Hoja de Estilo". Si aún no has eliminado la asociación de "MiTemplate" y "Layout: NCleanBlue", haz clic en el icono de la papelera para borrar.

Ahora sólo nos quedará aplicar nuestro template a todas las páginas. Para ello, haz clic en "Asignar a Todo". Ahora, ve a la pestaña "CMS" y haz clic en "Ver Sitio". Si todo ha ido bien, la página debería mostrar tu diseño.

Nota: Si necesitas ejecutar algún código JavaScript, deberás pegarlo entre las etiquetas {litaral} {/literal} de tu template.

phpMyAdmin

A continuación vamos a explicar las funciones básicas de esta herramienta escrita en php, con la que gestionar nuestras bases de datos MySQL.

Crear una Base de datos

Una vez instalado y configurado phpMyAdmin, en la página de inicio encontramos la opción "Crear nueva base de datos". Escribe un nombre y clic en "Crear".

Para seguir el ejemplo, crea una nueva base de datos llamada BBDD.

neo 2.0 - phpMyAdmin - 1

Una vez creada nuestra base de datos, debemos añadir las tablas donde se almacenarán los datos.

Añade una tabla llamada Usuarios en "Crear nueva tabla en la base de datos BBDD". Para ello, escribe el nombre de la tabla en el campo "Nombre" y el "Número de campos" que tendrá la misma, y clic en "Continuar".

Crea una tabla llamada Usuarios con 10 campos: ID, Nombre, Apellidos, Dirección, Localidad, CP, Provincia, Teléfono, Email y Condiciones Generales.

neo 2.0 - phpMyAdmin - 2

  • ID: será el índice de nuestra base de datos, un campo de tipo numérico. Selecciona la opción "INT" en Tipo de campo y 11 en Longitud/Valores. (Longitud/Valores es el número de dígitos o caracteres máximo para un campo numérico o alfanumérico, por ejemplo 1000 = 5 o casa = 4).
  • Para el resto de campos seleccionamos la opción "TEXT" en tipo de campo.

neo 2.0 - phpMyAdmin - 3

Algunos campos como Teléfono o CP estarán compuestos por números enteros, y sería lógico seleccionar la opción "INT", sin embargo seleccionamos la opción "TEXT" ya que realizaremos la validación de cada uno de los campos en el propio formulario.

A continuación, seleccionamos la opción "not null" en Nulo y marcamos la opción "Clave Primaria" para el campo ID, en los botones de radio. Para el resto de campos podemos seleccionar "null".

neo 2.0 - phpMyAdmin - 4

Una vez configurados los campos, haz clic en "Grabar".

neo 2.0 - phpMyAdmin - 5

Para editar los campos de una tabla, haz clic en el nombre de la tabla en el menú lateral izquierdo.

neo 2.0 - phpMyAdmin - 6

O en el botón estructura de la tabla.

neo 2.0 - phpMyAdmin - 7

Selecciona el campo ID y haz clic sobre el icono de lápiz para cambiar.

neo 2.0 - phpMyAdmin - 8

Ahora, selecciona la opción "auto_increment" en la columna Extra (vamos a necesitar que el número de nuestro índice se incremente con cada nuevo registro). Clic en "Grabar".

neo 2.0 - phpMyAdmin - 9

Para añadir campos a una tabla, introduce el número de campos que necesites y la posición de los mismos:

  • Al final de la tabla.
  • Al comienzo de la tabla.
  • Después de "el campo que selecciones".

neo 2.0 - phpMyAdmin - 10

Para terminar, haz clic en "Continuar".

Si deseas eliminar un campo basta con hacer clic sobre el aspa roja.

neo 2.0 - phpMyAdmin - 11

O seleccionar varios campos a la vez y hacer clic sobre el aspa roja de la parte inferior de la tabla.

neo 2.0 - phpMyAdmin - 12

En la parte superior encontramos un menú que varía en función de si estamos dentro de una base de datos o de una tabla.

Para eliminar una tabla, selecciona la tabla en el menú lateral y haz clic en "Eliminar".

neo 2.0 - phpMyAdmin - 13

Si lo que quieres es eliminar una base de datos y todas sus tablas, selecciona la base de datos en el menú lateral y haz clic en "Eliminar".

neo 2.0 - phpMyAdmin - 14

Si lo que deseas hacer es exportar una tabla o una base de datos con todas sus tablas, al igual que ocurría en el caso anterior, deberás seleccionar en el menú lateral la base de datos o la tabla sobre la que quieras realizar dicho acción y hacer clic en "Exportar".

neo 2.0 - phpMyAdmin - 15

Las opciones de exportación son varias y varían en función de la versión de phpMyAdmin que manejemos:

  • Datos CSV
  • Datos CSV para datos de MS Excel
  • Microsoft Excel 2000
  • Microsoft Word 2000
  • LaTex
  • Hoja de cálculo Open Document
  • PDF
  • SQL
  • XML

Además podremos seleccionar si queremos exportar sólo la estructura o la estructura y los datos.

Esta operación es muy cómoda, por ejemplo, cuando hemos diseñado y programado una Web en local y más tarde necesitamos configurarla en un servidor remoto, o para hacer el tratamiento oportuno de los datos realizando una exportación de los mismos en Excel.

Para el caso contrario, es decir, importar una base de datos o una tabla, deberás hacer clic en "Importar".

neo 2.0 - phpMyAdmin - 16

Sólo podremos importar archivos en formato SQL.

Otra opción muy interesante es la posibilidad de realizar búsquedas de un registro dentro de una base de datos o una tabla. Para ello, seleccionamos la base de datos o la tabla sobre la que queramos realizar dicha acción y hacemos clic en "Buscar". Una vez más en función de nuestra elección se nos presentarán una serie de opciones u otras.

Si lo que necesitamos es realizar una búsqueda dentro de una tabla, podremos seleccionar diferentes operadores en cada uno de los campos que componen dicha tabla:

  • LIKE
  • LIKE %...%
  • NOT LIKE
  • =
  • !=
  • REGEXP
  • IS NULL
  • IS NOT NULL

% Es el comodín.

neo 2.0 - phpMyAdmin - 17

Imaginemos que necesitamos buscar en el campo email todas las direcciones de correo que sean de gmail, pues podríamos seleccionar el operador "LIKE%...%" y añadir el valor "@gmail" o seleccionar el operador "LIKE" y añadir el valor "%@gmail%".

En el caso de realizar una búsqueda en una base de datos (en todas sus tablas) los operadores serán distintos pues cada tabla contendrá distintos campos:

  • Al menos una de estas palabras
  • Todas las palabras
  • La frase exacta
  • Como expresión regular

neo 2.0 - phpMyAdmin - 18

Para realizar la búsqueda debemos seleccionar como mínimo una tabla.

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?