Diferencias

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

--- plantillas_responsivas [2016/04/27 14:30] – [Personalización] 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
-    * 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
-    * 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
-    * Puede crearse una versión específica de una plantilla por evento, permitiendo mayor personalización
@@ Línea 19: / Línea 17: @@
-Las nuevas plantillas //responsive// se pueden **activar** desde el mismo lugar que las anteriores, sección **Diseño > Plantillas**dentro del menú de edición del evento. Fíjate que tenga el sufijo **-responsive** en el nombre y el **icono multiplataforma**.
+Las nuevas plantillas //responsive// se pueden **activar** desde el mismo lugar que las anteriores, sección **Diseño > Plantillas, ** dentro del menú de edición del evento. Fíjate que tenga el sufijo **-responsive** en el nombre y el **icono multiplataforma**.
-{{  :plantillas_responsivas:icono-responsivo.png  }}
+{{  :plantillas_responsivas:icono-responsivo_1.png  }}
 ==== Personalización ====
-Una vez seleccionada la plantilla //responsive//, para poder modificar los colores deberemos hacer clic en el botón Ver evento. En la página del evento nos encontraremos un icono conforma de pincel en la parte superior izquierda.
+Una vez seleccionada la plantilla //responsive//, para poder modificar los colores deberemos hacer clic en el botón Ver evento, en la parte alta de la página de edición. En la página del evento que se nos acaba de abrir nos encontraremos en la parte superior izquieda un icono con forma de pincel.
-Una vez seleccionada nuestra plantilla, al previsualizar nuestro evento nos encontraremos con un icono para **configurar la plantilla**. Este icono tiene la forma de un pincel para pintar, y se encuentra en la esquina superior izquierda. Recuerda que debes estar editando el evento para poder ver el icono.
@@ Línea 36: / Línea 31: @@
-Al hacer click se desplegará un editor de colores de la plantilla. Para **modificar un color**, tan solo tienes que hacer click sobre la casilla coloreada y se abrirá un editor con un espectro de colores completo. Una vez selecciones tu color haciendo click sobre 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.
-Para dejar de editar los colores haz click de nuevo sobre el icono del pincel. Si quieres restaurar los colores por defecto, haz click sobre el icono de restaurar (dos flechas circulares).
+Para dejar de editar los colores haz clic de nuevo sobre el icono del pincel. Si quieres restaurar los colores por defecto, haz clic sobre el icono de restaurar (dos flechas circulares).
@@ Línea 47: / 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 de cabecera y será posible indicar que no queremos recortar la imagen de cabecera.
+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 53: / Línea 48: @@
-De este modo podemos elegir si queremos utilizar una imagen de cabecera a modo de **logo**  o si queremos utilizar una imagen de tamaño grande a modo de **póster**.
+De este modo podemos elegir si queremos utilizar una imagen de cabecera a modo de **logo** o si queremos utilizarla de tamaño grande a modo de **póster**.
 {{  :plantillas_responsivas:distintas-cabeceras.png  }}
 ===== ¿Cómo crear una plantilla? =====
@@ Línea 111: / 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?]]