Diferencias

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

--- plantillas_responsivas [2016/05/02 07:11] – [Imagen de cabecera] symposium
+++ plantillas_responsivas [2020/02/24 08:33] (actual) – [Ficheros Handlebars] symposium
@@ Línea 1: / Línea 1: @@
 ====== Nuevo sistema de plantillas de evento ======
+Symposium ofrece un conjunto de plantillas de evento muy flexibles y que proporcionan gran margen de personalización. Son plantillas //responsive// y se adaptan perfectamente a todo tipo de formatos de pantalla, tanto para ordenadores con pantalla grande como dispositivos móviles.
-Symposium incorpora un nuevo sistema de plantillas de evento que permite mayor flexibilidad y facilidad de personalización.
 ===== 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 21: / Línea 20: @@
-{{  :plantillas_responsivas:icono-responsivo.png  }}
+{{  :plantillas_responsivas:icono-responsivo_1.png  }}
 ==== Personalización ====
@@ Línea 32: / Línea 31: @@
-Al hacer clic se desplegará un editor de colores. Para **modificar un color**, tan solo tienes que hacer clic sobre la casilla coloreada y se abrirá un editor con un espectro de colores completo. Una vez selecciones tu color haciendo arrastrando la cruz hasta el punto deseado de la gama y elijas el nivel de brillo del mismo, la plantilla se actualizará para mostrar el resultado de tu selección.
+Al hacer clic se desplegará un editor de colores. Para **modificar un color**, tan solo tienes que hacer clic sobre la casilla coloreada y se abrirá un editor con un espectro de colores completo. Una vez selecciones tu color arrastrando la cruz hasta el color deseado de la gama y elijas el nivel de brillo del mismo, la plantilla se actualizará para mostrar el resultado de tu selección.
@@ Línea 43: / Línea 42: @@
-Además ahora es posible utilizar **imágenes de cabecera** sin límite de tamaño. En la sección Diseño > Personalizar podremos subir una imagen y será posible indicar que no queremos recortarla.
+Además ahora es posible utilizar imágenes de cabecera sin límite de tamaño. En la sección Diseño > Personalizar podremos subir una imagen y será posible indicar que no queremos recortarla.
@@ Línea 106: / 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 edició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 subirlo una vez lo 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?]]