J3.x

Introducción a las Plantillas

From Joomla! Documentation

This page is a translated version of the page J3.x:Getting Started with Templates and the translation is 100% complete.

Other languages:
български • ‎Deutsch • ‎English • ‎español • ‎français • ‎hrvatski • ‎Bahasa Indonesia • ‎Nederlands • ‎português do Brasil • ‎русский • ‎українська

Intro

Joomla! 
≥ 3.0
versiones

Este tutorial introductorio le dará una visión general sobre el sistema de plantillas de Joomla y lo que puede hacer con él.

¿Para qué sirven las plantillas?

J3x-template-example-screenshot.png

Una plantilla controla la apariencia general y el diseño de un sitio. Proporciona el marco de trabajo que reúne elementos comunes, módulos y componentes así como las hojas de estilo en cascada para el sitio.

Cuando Joomla! se instala por primera vez varias plantillas se incluyen automáticamente. Puede encontrar muchas más en otros sitios. Algunas están disponibles sin cargo bajo diversas licencias y otras están a la venta. Además, hay muchos desarrolladores disponibles que pueden crear plantillas personalizadas. También puede crear su propia plantilla.

Las plantillas se gestionan con el Gestor de Plantillas, que está situado en el menú Extensiones en la zona administrativa de su sitio (back-end).

¿Por qué Joomla! usa plantillas? [Una auténtica guía para principiantes]

La forma en la que Joomla! está diseñado separa las tareas clave que participan en producir un sitio web para un mantenimiento eficiente del software. Una de estas tareas es crear la estética (el aspecto y la disposición) del sitio. Esto incluye tomar decisiones como qué elementos de contenido (componentes, módulos y plugins) puede querer colocar en cualquier página.

Durante la creación de una página web, la ubicación de la mayoría de los elementos permanecerá igual (menús, posiciones de anuncios, barras laterales, etc). Además, querrá crear el mismo aspecto (fuentes, estilos de encabezados, esquema de color, etc) para cada página. Para alguna partes del sitio puede querer alterar el aspecto general para indicar un propósito distinto para esas páginas (como una sección de blog). Es necesaria cierta planificación para esto, pero una vez que haya asentado el diseño general de su sitio, tiene la tarea de producir cada página de contenido.

Y es aquí donde entra en juego la plantilla. Puede escribir todo el código para cada página separadamente, o usar una plantilla para cada sección principal de su sitio de modo que cuando quiera crear una página nueva simplemente “rellenará los espacios en blanco”. Está bien, quizá no sea tan simple, pero este tutorial está diseñado para darle una guía paso a paso para el uso efectivo de una plantilla, empezando con cómo usar una y terminando en cómo crear una nueva para sí mismo.

  1. Use una de las plantillas suministradas con Joomla!
  2. Descargue una de las muchas que se ofrecen gratuitamente en internet.
  3. Pague para que le modifiquen o le creen una desde cero si sus necesidades no pueden ser satisfechas de otra manera.

Resumen – una plantilla controla el aspecto de su sitio y al mismo tiempo permite al administrador del sitio centrarse más en el contenido real.


¿Qué se puede hacer?

Una plantilla sirve para manipular la forma en la que el contenido es entregado al navegador web en un lector de pantalla. Aquí tiene algunas formas en las que puede usar esto en su sitio web construido sobre Joomla.

Diseño

La plantilla es el lugar en el que se establece la estructura del diseño general para su sitio. Esto incluye dónde colocar los diferentes elementos (módulos). Por ejemplo: puede controlar la ubicación de menús, un formulario de acceso, anuncios publicitarios, encuestas, etc.

J3x-template-example-module-changes-screenshot.png

Observe los cambios en el diseño del contenido

El estilo del cuerpo principal (artículo) de la página puede ser alterado (puede seleccionar entre diferentes estilos como un típico diseño de blog, un artículo de noticias, etc) dependiendo del diseño de la plantilla. *Vea la imagen de ejemplo. Note las diferencias en el diseño, pero cómo la apariencia es consistente. La barra de módulos lateral se ha movido de la izquierda a la derecha y ha sido reordenada.

Si la plantilla se ha diseñado para proporcionar opciones, también puede alterar "dinámicamente" la disposición del contenido en su sitio, quizás colocando el menú principal en la parte derecha o izquierda de la pantalla.

Esquema de color

Usando CSS dentro del diseño de la plantilla, puede cambiar los colores de sus fondos, texto, enlaces o cualquier cosa que pueda dentro de su código HTML normal. Algunas plantillas ofrecen un método para cambiar el color en la pantalla de gestión de la plantilla, otras requieren que modifique directamente los archivos .css de la plantilla.

Imágenes y efectos

También puede controlar la forma en la que se muestran las imágenes en la página, e incluso crear efectos tipo flash o incluir aplicaciones AJAX tales como menús desplegables.

Fuentes tipográficas

Lo mismo es aplicable a las fuentes tipográficas. Los diseños para éstas son establecidos en el (los) archivo(s) CSS de la plantilla para crear una apariencia uniforme en todo el sitio, lo que hace tremendamente sencillo cambiar el aspecto global simplemente alterando uno o dos archivos en lugar de tener que modificar cada página.

Soluciones para navegadores específicos

Una plantilla puede ser diseñada para alterar la forma en la que se muestra en diferentes navegadores, permitiéndole aprovechar todas las ventajas de las últimas novedades sin hacer su sitio inaccesible para los que no puedan tener su sistema actualizado a la última (como en el caso de ciertas empresas que limitan el software que pueden utilizar sus empleados).


Plantillas Suministradas

Las siguientes plantillas son suministradas por Joomla! en una instalación por defecto de Joomla! 3.x

Plantillas del sitio

  • Protostar (plantilla predeterminada)
  • Beez 3

Plantillas de la zona administrativa

  • ISIS (plantilla predeterminada)
  • Hathor


Cambiar Plantillas

Para cambiar la plantilla predeterminada para el Sitio (Front-end) o el Administrador (Back-end), siga estos pasos:

Acceder al gestor de plantillas

  • Haga clic en: Extensiones  Plantillas

Extension-manager-template-manager-3x-en.png

Ahora verá la pantalla del Gestor de Plantillas.

Nota: Si no ve Plantillas como opción en la lista del menú Extensiones, lo más probable es que sea debido a que no inició sesión como Super Administrador. Sólo los Super Administradores podrán ver este elemento de menú.


Gestión de la plantilla predeterminada

Desde aquí puede gestionar sus plantillas para el Front-end y el Back-end. La vista predeterminada muestra los estilos de las plantillas del Front-end que hay instaladas. El estilo predeterminado para el Front-end está señalado con una estrella; en la imagen que hay abajo es protostar - Default.

Para cambiar el estilo predeterminado a beez3:

  • haga clic en la casilla de verificación a la izquierda del nombre del estilo para seleccionarlo
  • haga clic en "Predeterminada" en la barra de herramientas;

la estrella cambia de protostar a beez3 y ya está. Como alternativa, puede hacer clic directamente en la silueta de la estrella de la columna "Predeterminado" de uno de los estilos de plantilla para establecer ese estilo como predeterminado.

Puede usar los filtros desplegables superiores o en el filtro de búsqueda para limitar el número de plantillas a mostrar en la lista. Otras opciones son:

  • editar - edita las opciones y Asignación de menú, se muestra una plantilla en (ver abajo)
  • duplicar - duplica el estilo de la plantilla
  • eliminar - elimina un estilo de plantilla (no debe ser el estilo de plantilla predeterminado)

30-Switching-templates-1-en.png


Asignar de más de un estilo de plantilla para el Lado Cliente

Joomla! le da la opción de cambiar entre dos o más estilos en el Front-end. Esto se hace con "Asignación de menú", de modo que puede establecer diferentes estilos para cada menú o sólo un elemento de menú. Esto permite "páginas" específicas que son definidas por enlaces de menú para establecer un estilo "específico". Los estilos pueden ser de plantillas distintas.

Método del gestor de plantillas

Haga clic en: Extensiones  Gestor de plantillas

  • Verá los estilos de sus plantillas instaladas; ahora elija un estilo que no esté establecido como el predeterminado. La estrella amarilla indica que el estilo es el predeterminado.
30-Template-manager-select-edit-en.png
  • Haga clic en el nombre del estilo o marque la casilla de verificación a la izquierda del nombre del estilo y haga clic en "Editar" en la barra de herramientas.
  • Ahora verá la página "Plantilla: [ Editar estilo ] "; vaya al bloque "Asignación de menú" de la sección y elija los elementos de menú en los que el estilo debería ser mostrado.

30-Switching-templates-assign-menus-en.png

  • Haga clic en "Guardar" en la barra de herramientas y ya está listo. El elemento de menú mostrará ahora la plantilla seleccionada.
  • Vaya a la parte pública de su sitio y refresque la página para ver las modificaciones.

Método del gestor de menús

  • Acceda el elemento de menú Menús  Nombre del Menú
  • Elija un elemento de menú marcando la casilla a la izquierda de su nombre y después haga clic en el botón Editar de la barra de herramientas. Como alternativa, simplemente haga clic en el nombre del elemento de menú para editarlo.
  • En la pantalla Editar elemento de menú, en Estilo de plantilla, elija el estilo de plantilla deseado y haga clic en el botón Guardar

30-Menu-item-template-management-edit-en.png

  • Vaya a la parte pública de su sitio y refresque la página para ver las modificaciones.


Ver también


Instalar Plantillas

Instalación desde el Panel de Administración (paquete de plantilla)

Inicie sesión en la interfaz administrativa de su sitio (www.su-sitio.com/administrator/)

Haga clic en: Extensiones -> Gestor de Extensiones

30-Installing-template-navigate-en.png

Verá la página "Gestor de Extensiones: Instalar"

Desde aquí puede instalar sus plantillas, plugins, módulos, componentes y paquetes de idioma. Tiene tres opciones:

Instalar desde Web - (seleccione una extensión listada en el Directorio de Extensiones de Joomla!)

Subir paquete - (seleccione un paquete desde su PC, súbalo e instálelo)

Instalar desde un directorio - (introduzca la ruta en la que se encuentra el paquete en su servidor)

Instalar desde una URL - (introduzca la URL en la que se encuentra el paquete de instalación)

La opción 4 hace todo por usted, aunque su entorno debe estar correctamente configurado para permitir usarla. La opción 2 requiere que descargue la extensión a su PC. La opción 3 requiere que descomprima los archivos/carpetas del paquete y los mueva al servidor. Todas las opciones requieren que el servidor web tenga permisos de escritura en el espacio web.

Aquí, elegimos el segundo método: Subir paquete

Seleccione el paquete desde su PC y haga clic en el botón "Subir e Instalar"

30-Installing-template-upload-package-file-en.png

Si el paquete no contiene errores, ya está todo listo, y obtendrá un mensaje de éxito como el de abajo.

30-Installing-template-install-success-en.png

Comprobar la instalación

Vaya desde Instalar a Gestionar, y establezca el tipo de filtro en 'plantilla'. La plantilla instalada debería aparecer en la lista. Si aparece, la plantilla está correctamente instalada. Ahora puede asignar uno de los estilos a un elemento de menú o establecer el estilo como predeterminado. Para las plantillas de administrador asegúrese de que tiene dos ventanas del gestor de plantillas abiertas simultáneamente en su navegador. Active la nueva plantilla en una de ellas y restablezca la antigua en la otra si algo fuera mal.

Instalar desde FTP (paquete de plantilla descomprimido)

Las plantillas también pueden instalarse a través de FTP sin necesidad de comprimir los archivos en un paquete de instalación. Simplemente seleccione la carpeta de la plantilla en su PC y súbala a su servidor, usando su cliente FTP favorito. Asegúrese de subir la carpeta de la plantilla al directorio: /ruta_a_joomla/templates/ - donde /ruta_a_joomla/ es la localización de su Joomla! en el servidor. Este método se usa sobre todo cuando ha creado una plantilla usted mismo, y no quiere tener que empaquetarla para instalarla, o bien si quiere subir más de una plantilla a la vez. Después debe ir al gestor de extensiones y hacer clic enDescubrir en el submenú. haga clic en Descubrir en la barra de herramientas si su plantilla no aparece inmediatamente. Una lista de elementos no instalados en el sistema de archivos debería aparecer. Seleccione la casilla de verificación situada a la izquierda de su plantilla y haga clic en instalar.

Aviso: no intente usar FTP para instalar componentes, módulos o plugins si es un principiante o novato. Estos elementos necesitan entradas en la base de datos que deben ser insertadas manualmente si se omite el instalador de paquetes.