Diferencias

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

--- plantillas_responsivas [2020/02/24 08:16] – [Nuevo sistema de plantillas de evento] symposium
+++ plantillas_responsivas [2020/02/24 08:33] (actual) – [Ficheros Handlebars] symposium
@@ Línea 6: / Línea 6: @@
 ===== Principales ventajas =====
+  * Las plantillas //responsive //  se adaptan a las resoluciones de los distintos dispositivos: ordenadores, tabletas y smartphones
+  * Se puede configurar su apariencia en tiempo real, viendo los cambios estéticos en vivo
+  * Puede crearse una versión específica de una plantilla por evento, permitiendo mayor personalización
-    * Las nuevas plantillas //responsive // se adaptan a las resoluciones de los distintos dispositivos: ordenadores, tabletas y smartphones
-    * Se puede configurar su apariencia en tiempo real, viendo los cambios estéticos en vivo
-    * Puede crearse una versión específica de una plantilla por evento, permitiendo mayor personalización
 ===== ¿Cómo usar las nuevas plantillas? =====
@@ Línea 105: / Línea 105: @@
 ==== Ficheros Handlebars ====
+Los ficheros .tpl y .ptl son los ''templates'' y ''partials'' que utiliza //Handlebars// para renderizar el contenido de la página.
-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.
 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.
 === Estructura ===
+El fichero principal ''main.tpl'' es el fichero por el que se accede a la página. Es el que contiene la distribución principal de los elementos.
-El fichero principal ''main.tpl''  es el fichero por el que se accede a la página. Es el que contiene la distribución principal de los elementos.
 Este es su contenido en la plantilla ''classic-responsive'':
 <code>
 {{> overlay }}
 {{> navbar this }}
 <div id="content-wrapper">
-	{{> header this }}
+    {{> header this }}
-	{{> menu this }}
+    {{> menu this }}
-	<div id="content" class="container">
+    <div id="content" class="container">
-		{{> detail this }}
+        {{> detail this }}
-	</div>
+    </div>
 </div>
 {{> footer this }}
 </code>
+La línea 1 carga el parcial ''overlay''. Un parcial se carga con la sintaxis
-La línea 1 carga el parcial ''overlay''. Un parcial se carga con la sintaxis ''{{>''. El segundo parámetro es el contexto de datos. Si utilizamos this obtiene el contexto de la plantilla main. Puedes explorar los ficheros .tpl y .ptl para ver las distintas opciones disponibles.
-Como ves, 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, por lo que debes incluirlo en caso de que modifiques ''main.tpl''.
-=== Renderizado de partials desde Javascript ===
-Para cargar partials desde Javascript tienes disponibles los siguientes métodos:
 <code>
-$.partialAppend(nombreDelParcial, datos, callback)
+partial append nombre-del-parcial
-Permite añadir el contenido de un partial al final del contenido de un elemento del DOM.
-Datos contiene los objetos necesarios para la correcta carga del parcial.
-Tras la carga se ejecuta la función recibida en el método callback.
-Ejemplo: $('#contenido').partialAppend('map.ptl', SYM.data, function(){ alert('mapa cargado'); });
 </code>
+Datos callback permite añadir el contenido de un partial al final del contenido de un elemento del DOM. Datos contiene los objetos necesarios para la correcta carga del parcial. Tras la carga, se ejecuta la función recibida en el método callback.
-<code>
-$.partialRender(nombreDelParcial, datos)
-Permite obtener el resultado de renderizar un partial, para después agregarlo al DOM o
- realizar cualquier otra acción.
-Datos contiene los objetos necesarios para la correcta carga del parcial.
-Ejemplo: var contenido = $.partialAppend('map.ptl', SYM.data);
-</code>
-=== Datos del evento ===
-Los datos relativos al evento están contenidos en variables Javascript que puedes explorar con las distintas consolas de desarrollo disponibles en los navegadores.
-En el objeto ''SYM.data''  tendrás disponible la información relativa a tu evento. En el objeto ''SYMJS''  tendrás disponibles los distintos métodos de renderizado e inicialización de componentes, que podrás modificar para alterar la ejecución de los mismos.
-===== ¿Cómo utilizar una plantilla solo en el evento actual? =====
-Para crear una versión de la plantilla específica para un evento, debes dirigirte a la sección Diseño > Personalizar del menú de edición del evento.
-En la parte inferior encontrarás la sección Plantilla para el evento. Verás que tiene un botón para descargar la plantilla actual, y un pequeño formulario para subirla una vez la hayas modificado.
-{{  :plantillas_responsivas:subir-plantilla.png  }}
-Para obtener instrucciones acerca de como modificar la plantilla, puedes leer [[:plantillas_responsivas#como_crear_una_plantilla|¿Cómo crear una plantilla?]]