Diferencias

Muestra las diferencias entre dos versiones de la página.

--- plantilla_personalizada [2013/10/04 07:54] – [Fichero TPL] symposium
+++ plantilla_personalizada [2023/04/21 12:28] (actual) – symposium
@@ Línea 1: / Línea 1: @@
+[[:indicegeneral|Ir al Índice General de Ayuda de Symposium]]
 ====== Plantilla personalizada ======
-Las plantillas para eventos definen cómo se muestra la página del evento: los colores, el tipo de letra, la disposición de las capas, etc.
+Las plantillas definen la parte visual de la web del evento. Dependiendo de la plantilla que se utilice para el evento, dispondrá de una maquetación distinta, localización de los botones, colores, tamaño y tipografía de las fuentes, etc.
+Symposium ofrece varias plantillas por defecto, ya diseñadas y listas para su activación. a pesar de ello, estas plantillas son perfectamente personalizables. Desde esta sección, puedes descargar un kit para crear tus propias plantillas personalizadas. Dentro del archivo, encontrarás un documento con toda la información que puedas necesitar para crear tu plantilla.
 Para personalizar estas plantillas haz clic en la opción //Plantilla personalizada// que encontrarás en el apartado //Diseño//.
-{{ :admin:menu_plantilla_personalizada.png?nolink |}}
+{{  :admin:personalizar_plantillas.png?nolink&250x170  }}
 ===== Bajar plantilla de sistema =====
-Aquí se listan todas las plantillas del sistema. Escoge la plantilla que quieras modificar a tu gusto y descárgala. Algunas plantillas tienen variantes según el color base.
+En este panel podrás encontrar todas las plantillas disponibles de la plataforma. Escoge la plantilla que quieras modificar a tu gusto y descárgala. Algunas plantillas tienen variantes según el color base.
+{{  :admin:plantillas_admin.png?nolink&500x437  }}
+**Plantillas responsive (uso recomendado)**
+El paquete comprimido que has descargado contiene una estructura de carpetas y un fichero README.txt con instrucciones y especificación de dónde está cada cosa.
-{{ :admin:bajar_plantilla_sistema.png?nolink |}}
+**Plantillas classic (uso no recomendado)**
 El paquete comprimido que has descargado contiene un fichero //tpl// con la estructura de la plantilla, dos ficheros de texto con instrucciones, uno en español y otro en inglés, y directorios para localizar ficheros JavaScript y CSS personalizados.
-{{ ::admin:captura_de_pantalla_2013-03-21_a_la_s_11.35.48.png?nolink |}}
+{{  :admin:captura_de_pantalla_2013-03-21_a_la_s_11.35.48.png?nolink&  }}
-===== Modificar plantilla de sistema para convertirla en plantilla personalizada =====
+=====   =====
+===== Modificar plantilla de sistema para convertirla en plantilla personalizada (sólo Plantillas Responsive) =====
+==== Directorio assets ====
+Es el directorio que te recomendamos para incluír las imagenes que veas necesarias. Si necesitas hacer referencia a una imagen dentro de un partial o un template hazlo de forma relativa:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit><img src="{{template_path}}assets/ficheros.png" /></font>
+</code>
+**Directorio js**
+Dentro de este directorio debes incluir tus ficheros Javascript. El fichero script.js se incluye automáticamente (es **importante** que no le cambies el nombre). El método que te recomendamos para ejecutar código en el evento "document ready" es el que figura en este archivo.
+Si necesitas ejecutar código después de que se cargue un fichero partial o template, debes escuchar al evento "render.handlebars" que se lanza sobre body. Ejemplo:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit>$('body').on('render.handlebars', function (e, template) {
+// template contiene el nombre del bloque cargado, sea ptl o tpl
+});</font>
+</code>
+Si necesitas cargar otros ficheros Javascript te proveemos de un método que los carga de forma asíncrona. Este método carga en línea los ficheros que le indiques:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit>$.loadScriptSeries(['lista/de/ficheros.js', 'otro/fichero.js'], function(){
+// callback a ejecutar cuando se haya cargado el último fichero
+});</font>
+</code>
+==== Directorio less ====
+Dentro del directorio LESS encontrarás la hoja de estilos .less que da forma a este tema. En la primera línea verás que se importa el fichero "main.less". Este fichero incluye los estilos Bootstrap y otros estilos de componentes de la plantilla como el calendario.
+El siguiente bloque define las variables. Puedes añadir todas las variables que necesites pero si eliminas alguna es posible que el selector de colores deje de funcionar adecuadamente.
+Recuerda leer http://lesscss.org detenidamente para obtener más información y poder sacar el máximo rendimiento al pre-procesado de hojas de estilo.
+==== Directorios partials y templates ====
+Los ficheros .tpl y .ptl son los templates y partials que utiliza Handlebars para renderizar el contenido de la página.
+Los ficheros .tpl son las plantillas que se cargan al entrar en cada sección.  Puedes modificar su contenido, pero debes respetar los nombres de estos ficheros ya que de lo contrario harás que las distintas secciones del evento dejen de funcionar.
+Al entrar en la página del evento por primera vez se carga el fichero main.tpl que renderiza el esqueleto principal de la página y después carga el contenido de la sección correspondiente.
+Los ficheros .ptl son los parciales o partials, trozos de código que se pueden renderizar dentro de la página según sea necesario. Puedes modificarlos y crear tantos nuevos como veas necesario. Te recomendamos que eches un vistazo a su estructura para hacerte una idea de como utilizarlos.
+Ejemplo:
+<code>
+.- {{> overlay }}
+.- {{> navbar this }}
+.- <div id="content-wrapper">
+.-     {{> header this }}
+.-     {{> menu this }}
+.-     <div id="content" class="container">
+.-         {{> detail this }}
+.-     </div>
+.- </div>
+.- {{> footer this }}
+</code>
+La línea 1 carga el parcial overlay. Un parcial se carga con la sintaxis "<font inherit/Courier New,Courier,monospace;;inherit;;inherit>{{> nombre }}</font>". En las líneas 2, 4, 5, 7 y 10 se cargan más partials. El segundo parámetro es el contexto de datos. Si utilizamos this enviamos el contexto de la plantilla actual al parcial que estamos cargando.
+Puedes explorar los ficheros .tpl y .ptl para ver las distintas opciones disponibles.
+Como ves en las líneas 3, 6, 8 y 9, se puede combinar código HTML y Handlebars alternativamente.
+El bloque div con identificador "content" es el que utiliza el motor para renderizar el contenido de cada sección. Si decides modificar el fichero main.tpl debes incluír este identificador para que el motor pueda renderizar las secciones correctamente.
+===== Modificar plantilla de sistema para convertirla en plantilla personalizada (sólo Plantillas Classic) =====
 Se recomienda no utilizar símbolos ni caracteres acentuados en los nombres de fichero.
@@ Línea 27: / Línea 110: @@
 ==== Directorio CSS ====
+En este directorio deberán incluirse todos los estilos que quieran enlazarse desde la plantilla. Los estilos se aplican mediante ficheros de estilos en cascada.
-En este directorio deberán incluirse todos los estilos que quieran enlazarse desde la plantilla.
+Si el fichero //css// hace referencia a una imagen incluida en el directorio //assets//, la ruta deberá ser relativa. Por ejemplo, si en el fichero //styles.css// quisieras poner como fondo la imagen disponible en //assets/background.png// tendrías que usar:
-Si el fichero //css// hace referencia a una imagen incluida en el directorio //assets//, la ruta deberá ser relativa. Por ejemplo, si en nuestro fichero //styles.css// quisieramos poner como fondo la imagen disponible en //assets/background.png// usaríamos:
 <code>
 body {
@@ Línea 40: / Línea 120: @@
 En este directorio puede existir cualquier número de ficheros //css//, que deberán ser correctamente referenciados desde la plantilla (ver fichero //tpl//).
 ==== Directorio JS ====
-En este directorio deberán incluirse todos los scripts que quieran enlazarse desde la plantilla.
+En este directorio deberán incluirse todos los scripts que quieran enlazarse desde la plantilla. Los scripts se aplican mediante ficheros //Javascript//.
 Si algún script hace referencia a una imagen incluida en el directorio //assets//, la ruta deberá ser relativa.
 En este directorio puede existir cualquier número de ficheros //Javascript//, que deberán ser correctamente referenciados desde la plantilla (ver fichero //tpl//).
 ==== Fichero TPL ====
 El fichero //tpl// contiene la información a renderizar por el sistema. La plantilla está escrita en lenguaje HTML y lleva etiquetas especiales delimitadas por dobles llaves que corresponden a los distintos bloques definidos.
 <code>
 {{ ETIQUETA }}
 </code>
 Al realizar una plantilla se pueden renderizar los bloques que se deseen, en cualquier orden. Además es posible englobarlos en cualquier contenido HTML para facilitar el estilo.
-===== Estilos y scripts =====
+=== Embeber estilos y scripts ===
 Al principio del fichero, dentro de la correspondiente etiqueta HTML //<head>// deberán incluirse los estilos y scripts definidos por el usuario. Para hacerlo correctamente, de nuevo, las rutas deberán ser relativas.
-Por ejemplo, para incluir los ficheros presentes en este ejemplo:
+Por ejemplo, para incluir los ficheros presentes:
-    * assets\
+  * assets\
-    * css\
+  * css\
       * styles.css
-    * js\
+  * js\
       * script.js
-    * fichero.tpl
+  * fichero.tpl
-Deberemos hacerlo de la siguiente manera:
+tendrías que hacerlo de la siguiente manera:
 <code>
@@ Línea 88: / Línea 163: @@
 </code>
-Además, es posible consultar si un bloque está disponible con sentencias **IF**. De este modo, es posible saber si estamos en una determinada sección, o si un bloque está presente para renderizar un contenido de una forma u otra. Por ejemplo:
+Además, es posible consultar si un bloque está disponible con sentencias **IF**. De este modo, es posible saber si estás en una determinada sección, o si un bloque está presente para renderizar un contenido de una forma u otra. Por ejemplo:
 <code>
 <!-- !IF SUBHEADER IMAGE -->
-	<div id="event-header-text">
+    <div id="event-header-text">
-		{{ SUBHEADER TITLE }}
+    {{ SUBHEADER TITLE }}
-		<div class="enrolment_wrapper">
+    <div class="enrolment_wrapper">
-			{{ ENROLMENT BUTTON }}
+        {{ ENROLMENT BUTTON }}
-		</div>
+    </div>
-		{{ SUBHEADER IMAGE }}
+    {{ SUBHEADER IMAGE }}
-	</div>
+    </div>
 <!-- END IF SUBHEADER IMAGE -->
 </code>
 Puedes ver en detalle los bloques disponibles en cada sección en el anexo más abajo.
 ===== Subir plantilla personalizada =====
 Una vez terminada la plantilla, tienes que crear un fichero comprimido que contenga los siguientes ficheros y carpetas:
-    * el fichero //tpl//
-    * las carpetas //assets//, //css// y //js//
+  * el fichero //tpl//
+  * las carpetas //assets//, //css//  y //js//
 Es importante que todos estos elementos no estén contenidos dentro de ninguna carpeta extra, sino directamente en la raíz del fichero comprimido.
-{{ :admin:subir_plantilla_personalizada.png?nolink |}}
+{{  :admin:subir_plantilla_personalizada.png?nolink&  }}
-En la sección //Nueva plantilla// completa todos los datos:
+En la sección //Nueva plantilla//  completa todos los datos:
-    * el nombre que darás a tu plantilla
+  * El nombre que darás a tu plantilla.
-    * el número máximo de elementos a mostrar en el menú (el resto de elementos del menú se mostrarán en la opción de menú //“Más...”//)
+  * El número máximo de elementos a mostrar en el menú (el resto de elementos del menú se mostrarán en la opción de menú //“Más…”//).
-    * una captura de pantalla que sirva para previsualizar tu plantilla
+  * Una captura de pantalla que sirva para previsualizar tu plantilla.
-    * el fichero comprimido
+  * El fichero comprimido.
-Y ya puedes hacer clic en //Guardar//. A partir de ahora tendrás disponible para cualquier evento tu [[:plantillas|plantilla]] personalizada. Si tu plantilla no aparece en la sección de plantillas de la edición del evento, cerciorate de que esté seleccionada como [[:plantillas_disponibles|plantilla disponible]].
+Y ya puedes hacer clic en //Guardar//. A partir de ahora tendrás disponible para cualquier evento tu [[:plantillas|plantilla]] personalizada. Si tu plantilla no aparece en la sección de plantillas de la edición del evento, asegúrate de que esté seleccionada como [[:plantillas_disponibles|plantilla disponible]].
 ===== Anexo =====
-[[plantilla_personalizada_anexo|Documento]] de bloques disponibles en las plantillas.
+[[:plantilla_personalizada_anexo|Documento]] de bloques disponibles en las plantillas.