LLave en Mano Gestión de Plantillas Última revisión:19 de marzo de 2013 índice 1. Conocimientos mínimos 2. Acceso a las plantillas 3. Estructura de la página 3.1 Páginas: 3.1.1 Portada 3.1.2 Portadilla 3.1.3 Vídeo 3.1.4 Galería de fotos 3.1.5 Artículo 3.1.6 Free 3.1.7 Marcador 3.1.8 Flash 3.1.9 Print 3.1.10 Ticker 3.2 Bloques 3.2.1 Html_head 3.2.2 Header y Footer 3.2.3 Menú 3.2.4 Lateral 3.2.5 Banner code, Banner flash y Banner image 3.2.6 Lateral Diary 3.2.7 Lateral Flash 3.2.8 Lateral Player 3.2.9 Marcador Gallery 3.2.10 Iframe 3.2.11 News Last 3.2.12 News Gallery 3.2.13 News Carousel 3.2.14 News Top 3.2.15 News Detail 1
3.2.16 Vídeo Gallery 3.2.17 Vídeo Detail 3.2.16 Foto Gallery 3.2.17 Foto Detail 3.2.18 Comments Last 3.2.19 Comments 3.2.20 Gallery Inde 3.2.21 Gallery View 3.2.22 Marcador 3.2.23 Tools 3.2.24 Ticker 3.3 Estilos (CSS) 3.3.1 Style 3.3.2 Comment 3.3.3 Gallery 3.3.4 Lateral 3.3.5 Main 3.3.6 Marcador 3.3.7 Menu 3.3.8 News 3.3.9 Ticker 3.3.9 Tools 3.4 Scripts 3.5 Feeds 4. Estructura básica de Smarty 4.1 Aspectos principales 4.2 Principales comandos 5. Datos disponibles por páginas 5.1 Debugger Smarty 5.2 Resumen de datos disponibles por páginas 5.2.1 Datos Generales 5.2.2 Portada 5.2.3 Portadillas de noticias 5.2.4 Detalle de noticias 5.2.5 Página de vídeos 5.2.6 Página de fotos 5.2.7 Marcador minuto a minuto 5.2.8 Infografías 5.2.9 Páginas de contenido libre 6. Ejemplos prácticos 6.1 Páginas 6.2 Bloques 2
1. Conocimientos mínimos Para trabajar sobre la plataforma Servidor Noticias, se requiere conocimientos mínimos de: 1.1. HTML 4 Enlace de referencia: http://www.w3.org/tr/html401/ 1.2. CSS 2 Enlace de referencia: http://meyerweb.com/eric/css/references/css2ref.html 1.3. Smarty (versión 3.1.11) Enlace de referencia: http://www.smarty.net/docsv2/en/ 1.4. JQuery: Enlace de referencia: http://jquery.com/ 2. Acceso a las plantillas Acceder al Admin de la página en: http://servidornoticias.com/admin/ En esta página se debe acceder con usuario y contraseña. Elegir el dominio sobre el que se quiere trabajar y hacer clic sobre el icono Editar, a la izquierda de la tabla de dominios. 3
Acceder al menú Plantillas y estilos, a la izquierda de la página. A la derecha se abrirá un listado con las plantillas disponibles. Elegir entre ellas la plantilla predeterminada. Hay que clonarla antes de empezar a editar. Para clonarla, utilizar el botón Clonar y editar : Para que los cambios sean visibles en la página, elegir esta plantilla como elemento seleccionado, haciendo clic en el botón Seleccionar elemento como predefinido : 4
Para editar la plantilla clonada, hacer clic en el botón Editar elemento : 3. Estructura de la página Las páginas de servidor de noticias están ordenadas dentro de: 3.1 Páginas: 5
3.1.1 Portada Página principal de la web. Contiene un resumen de los contenidos. Muestra la última noticia de cada pestaña. 3.1.2 Portadilla Página de entrada de las pestañas. Contiene un listado de las últimas noticias de la pestaña correspondiente. Puede mostrar: Título, entradilla, foto, subcategorías y fecha de cada noticia, además del número de comentarios relacionados. 3.1.3 Vídeo Portadilla diferenciada para contenidos en formato vídeo. Muestra el último vídeo destacado con player grande, título, subcategorías y fecha. Además, muestra un listado de los últimos vídeos publicados, que contiene: miniatura, título, subcategorías, fecha y entradilla. 3.1.4 Galería de fotos Portadilla diferenciada para contenidos en formato foto. Muestra la última foto destacada con título, subcategorías y fecha. Además, muestra un listado de las últimas fotos publicadas, que contiene: miniatura, título, subcategorías, fecha y entradilla. 3.1.5 Artículo Página de detalle del contenido editorial. Normalmente contiene un título, un teto de noticia ampliada y foto de referencia. 3.1.6 Free Página de detalle de contenido libre no editorial creado por el cliente (ejemplo: quienes somos, contacta con nosotros). 3.1.7 Marcador Página de detalle específica para la retransmisión de partidos de fútbol en directo, minuto a minuto. 3.1.8 Flash Página de detalle contenedora de las infografías temáticas ampliadas. 3.1.9 Print Plantilla de impresión de contenido de artículos. 3.1.10 Ticker Mini página que se carga dentro del ticker Últimas Noticias. Contiene un listado semejante a portada, animado por JQuery. 6
3.2 Bloques Bloques de información específica que están incluidos dentro de las páginas. Pueden variar de acuerdo con la plantilla. 3.2.1 Html_head Contiene todos los comandos que deben aparecer entre las tags <head></head> de toda la web estilos CSS, Javascript, metadatas, etc. Está disponible para todas las páginas. 3.2.2 Header y Footer Contienen respectivamente Cabecera y Pie de la web. Están disponibles para todas las páginas. 3.2.3 Menú Muestra el menú con las pestañas contratadas. Está disponible para todas las páginas. 3.2.4 Lateral Contiene la estructura general de la columna derecha. Está disponible para todas las páginas. 7
3.2.5 Banner code, Banner flash y Banner image Muestran los tres tipos de contenido de publicidad de la web, insertados a través del administrador para la columna derecha. Está disponible para todas las páginas, siempre que haya elementos habilitados en el Admin > Columna derecha > Gestión de elementos. 3.2.6 Lateral Diary Muestra el elemento agenda configurado desde el admin. Está disponible para todas las páginas, siempre que haya elementos habilitados en el Admin > Columna derecha > Gestión de elementos. 3.2.7 Lateral Flash Muestra las infografías animadas en Flash, en tamaño pequeño adaptadas a la columna de la derecha. Una vez ampliadas, estas infografías se muestran en una capa que sobrepone el contenido (por AJAX, dentro de la plantilla Iframe ). Está disponible para todas las páginas, siempre que haya elementos habilitados en el Admin > Columna derecha > Gestión de elementos. 3.2.8 Lateral Player Muestra un visor y un pequeño listado de los últimos vídeos de cada categoría (si las hay), adaptados al espacio de la columna derecha. Está disponible para todas las páginas, siempre que haya elementos habilitados en el Admin > Columna derecha > Gestión de elementos. 3.2.9 Marcador Gallery Contiene la estructura de la tabla de goles disponible para la columna derecha. Está disponible para todas las páginas, siempre que esté habilitado en el Admin > Columna derecha > Gestión de elementos. 3.2.10 Iframe Contenedor en forma de capa que cubre el contenido (como Lightbo), que muestra los contenidos que se activan con el botón Ampliar de los módulos flash de la columna derecha (plantilla lateral flash). Está disponible para todas las páginas, siempre que haya elementos habilitados en el Admin > Columna derecha > Gestión de elementos. 3.2.11 News Last Contiene 6 noticias más recientes de una portadilla, en orden cronológico invertido (más recientes primero). En las plantillas disponibles, son las noticias que salen en formato grande en las portadillas. Está disponible en la página Portadilla. 3.2.12 News Gallery Contiene un listado de noticias dispuestas en orden cronológico invertido (más recientes primero). Gestiona 18 elementos en las Portadillas y 24 en las páginas de Detalle de Noticia. Los datos sólo están disponibles en estas dos páginas. 3.2.13 News Carousel 8
Muestra la última noticia de cada pestaña en un carrusel animado con JQuery. Los datos solamente están disponibles en la portada. 3.2.14 News Top Listado de noticias más leídas de la web. Los datos están disponibles solamente en la portada. 3.2.15 News Detail Es el cuerpo del artículo completo usado en la página de detalle de noticia. Contiene todos los datos de un único artículo (Titular, link, foto, teto, entradilla, etc). Los datos sólo están disponibles en la página Detalle de noticia. 3.2.16 Vídeo Gallery Listado de los artículos disponibles en formato vídeo, que se muestra en la portadilla de la pestaña Vídeos. Los datos sólo están disponibles en la página de vídeos. 3.2.17 Vídeo Detail Es el cuerpo del artículo en formato vídeo (página de detalle de vídeo). Contiene todos los datos de un único artículo ( Titular, link, foto, url del vídeo, etc). Los datos sólo están disponibles en la página de vídeos. 3.2.16 Foto Gallery Listado de los artículos disponibles en formato foto, que se muestra en la portadilla de la pestaña Fotos. Los datos sólo están disponibles en la página de fotos. 3.2.17 Foto Detail Es el cuerpo del artículo en formato foto (página de detalle de foto). Contiene todos los datos de un único artículo (Titular, link, foto, url del vídeo, etc). Los datos sólo están disponibles en la página de fotos 3.2.18 Comments Last Muestra un listado de los últimos comentarios enviados a toda la web. Los datos están disponibles solamente en la portada. 3.2.19 Comments Es el bloque de comentarios dentro de los artículos. Si los comentarios están activados en el admin, muestra el formulario de comentarios bien como el listado de los últimos comentarios del artículo en orden cronológico invertido (más recientes primero). Los datos están disponibles en las páginas de detalle de noticia y vídeo. 3.2.20 Gallery Inde Dentro del servidor noticias, las Galerías de imágenes son una forma alternativa de navegación. El contenido de la página (portada o pestaña) se abre en una capa que sobrepone el contenido y que tiene la imagen como elemento de navegación. Puede activarse desde un enlace específico a la galería, o bien desde el botón ampliar de la foto de cada artículo. La plantilla gallery inde muestra el listado de fotos de todos los artículos 9
de la página en cuestión (portada o pestaña) en orden cronológico invertido (más recientes primero). Los datos para gestionarla están disponibles en portada, página de fotos, portadilla y detalle de noticias. 3.2.21 Gallery View Carga por AJAX la foto seleccionada en el Gallery Inde, en formato grande. Puede mostrar otras informaciones, como Titular del artículo, teto, fecha, entradilla... Los datos para gestionarla están disponibles en portada, página de fotos, portadilla y detalle de noticias. 3.2.22 Marcador Plantilla de detalle del Marcador en Directo para retransmisión de partidos de Fútbol en formato teto + gráficos. Los datos sólo están disponibles para las páginas de marcador. 3.2.23 Tools Bloque de herramientas que aparecen en cada artículo (imprimir, enviar por email, compartir en redes sociales etc). Está disponible para todas las páginas. 3.2.24 Ticker Bloque de últimas noticias animado por JQuery. Carga un bloque con el titular y el iframe Ticket que corresponde solamente al listado animado de los titulares. Está disponible para todas las páginas. 3.3 Estilos (CSS) Hojas de estilos (CSS) necesarias para gestionar el aspecto visual de la página. Las hojas de estilos también reciben variables de configuración desde la página de Administración de la Plataforma. Los datos que reciben están disponibles en todas las páginas. 3.3.1 Style El archivo style es el que da la estructura general de los estilos, llamando a las demás hojas a través del comando {include}. 3.3.2 Comment Gestiona los estilos del bloque de comentarios de portada y detalle de noticias y vídeo. 10
3.3.3 Gallery Gestiona los estilos de las galerías fotográficas que se abren en una capa sobre el contenido. La galería está disponible en la portada, portadillas de foto y noticias y detalle de noticia. 3.3.4 Lateral Gestiona los estilos de todos los elementos que se muestran en la columna derecha. 3.3.5 Main Gestiona los estilos generales, comunes a todas las páginas de la plataforma. 3.3.6 Marcador Gestiona los estilos de las pestañas tipo Marcador minuto a minuto 3.3.7 Menu Gestiona los estilos del menú y submenú (pestañas). 3.3.8 News Gestiona los estilos de todo el contenido relacionado con las noticias: Portada, Portadillas y Detalle de foto, vídeo y noticias. 3.3.9 Ticker Gestiona los estilos del bloque animado Últimas noticias en cabecera. 3.3.9 Tools Gestiona los estilos del bloque Tools (imprimir, enviar por email, compartir en redes sociales etc). 3.4 Scripts Comandos javascript necesarios para el funcionamiento de los elementos animados de la página. Contiene un archivo único (script) con los comandos necesarios. 3.5 Feeds 11
Gestiona la salida XML de los datos de la página (portada y portadillas). Contiene un archivo único (feed) con los comandos necesarios. 4. Estructura básica de Smarty 4.1 Aspectos principales Smarty genera archivos.tpl Los comandos se delimitan por los símbolos { }. Ejemplo: {includefile= eample.tpl } Este comando inserta el archivo eample.tpl Cuando necesario cerrar los comandos, las tags de cierre tienen la estructura {/}. Ejemplo: {if$color}..{/if} Se marcan las variables con el símbolo $. Ejemplo: {$color} Este comando pinta el contenido de la variable de nombre color Se muestran los datos de una cadena (array) usando puntos. Ejemplo: {$data.main_item} Este comando pinta el contenido de main_item que es un subitem de la cadena data Smarty no soporta directamente códigos que utilicen el símbolo { } en su composición, como es el caso de CSS y Javascript. Para utilizar estos comandos, hay algunas opciones: Opción 1: Utilizar un espacio, tab o salto de línea inmediatamente a continuación del símbolo {. Ésta opción es la más recomendada por mantener el código limpio. Ejemplo de Código CSS: 12
body{ background:#cccccc} Símbolo { seguido de espacio. Ejemplo de código Javascript (Jquery): functionclose_carpet() { $('#carpet').remove(); } Símbolo { seguido de salto de línea. Opción 2: Aislar el código a través de los comandos {literal} {/literal}. Ejemplo de código de estilos CSS: {literal} body{background:#cccccc} {/literal} Todo el contenido entre las tags {literal} y {/literal} se leerá como código simple sin interferencia de Smarty. {literal} body{background:{/literal}{$color}{literal};} {/literal} Si es necesario utilizar una variable, hay que reaislarla, cerrando la tag {/literal} y volviendo a abrirla en cuanto convenga. Ejemplo de código Javascript (Google Analytics): {literal} <!-- trackeraddedbyultimategoogleanalyticspluginv1.6.0: http://www.oratransplant.nl/uga--> <scripttype="tet/javascript"> vargajshost=(("https:" ==document.location.protocol)?"https://ssl.": "http://www."); document.write(unescape("%3cscriptsrc='" +gajshost+ "google-analytics.com/ga.js' type='tet/javascript'%3e%3c/script%3e")); </script> <scripttype="tet/javascript"> varpagetracker=_gat._gettracker("ua-11393223-1"); pagetracker._initdata(); pagetracker._trackpageview(); </script> {/literal} 13
Todo el contenido entre las tags {literal} y {/literal} se leerá como código simple sin interferencia de Smarty. 4.2 Principales comandos Variables: Se marcan las variables con el símbolo $. Ejemplo: {$color} Este comando pinta el contenido de la variable de nombre color En algunos casos, conviene aplicar filtros a las variables: Símbolo Eplicación {$title escape:'html'} Convierte los elementos HTML en símbolos: & " ' < > {$url escape:'url'} Convierte los elementos y formatea los espacios y caracteres especiales para generar una URL. Ejemplo: Variable: 'Esto es una noticia' Salida: %27Esto+es+una+noticia%27 Condición: {if$photo.href} <imgsrc= {$photo.href} > {else} <imgsrc= /img/noimage.jpg > {/if} En este ejemplo el comando busca si la variable $photo.href tiene contenido. Si lo tiene, pinta la imagen contenida en la variable. Si no lo tiene, pinta una imagen genérica, en este caso noimage.jpg Algunos símbolos de comparación usados con el comando {if} Símbolo Eplicación Ejemplo práctico (ningún símbolo) Si eiste {if$photo.href} Si $photo.href tiene contenido! Si no eiste {if!$photo.href} Si $photo.href está vacío == Igual {if$news.id==0} Si $news.id es igual que 0!= Diferente {if$news.id!=0} Si $news.id es diferente de 0 > Mayor {if$news.id>3} Si $news.id es mayor que 3 (por ejemplo, si se trabaja solo con 14
números enteros, a partir de 4) >= Mayor o igual {if$news.id>=3} Si $news.id es mayor o igual que 3 (incluye el valor 3 en la condición). < Menor {if$news.id>10} Si $news.id es mayor que 10 (por ejemplo, si se trabaja solo con números enteros, a partir de 9) <= Menor o igual {if$news.id>=10} Si $news.id es menor o igual que 10(incluye el valor 10 en la condición). Listado (loop): <ul> {foreachfrom=$news.tetsitem=tetkey=inde} <li> <h3> {$tet.inde}- {$tet.headline} </h3> <p>{$tet.content}</p> </li> {/foreach} </ul> En este ejemplo el comando {foreach} pinta un listado con el contenido de la variable $news.tet (from=$news.tet). Cada elemento contenido en esta variable, se mostrará como cadena (vector) de la variable $tet (que se define en item=tet) y el listado se ordenará a través de inde (key=inde) que tiene que ser un subitem de $news.tets. En la práctica, el resultado final en HTML de este ejemplo, podría mostrarse así: <ul> <li> <h3>1- Títulodelaprimeranoticia</h3> <p>loremipsumdolorsitamet, consecteturadipiscingelit. Integer justometus, gravidanonsuscipitnec, fringillaintortor. Sednecligula mauris, euadipiscingest.</p> </li> <li> <h3>2- Títulodelasegundanoticiaficticia</h3> <p>sedporttitorblanditodio, eupellentesquemiultriciesid. Nunc ultriciesultricesvarius. Curabitursagittisiaculisdiam.</p> </li> <li> <h3>3- Aquítieneseltítulodelatercera</h3> <p>inacluctusaugue. Phaselluselittortor, accumsanatscelerisque non, variussitametmassa. Aeneaneleifenderosvelnullaporttitoreu portajustocursus.</p> </li> </ul> 15
Incluir plantillas: {includefile= bo.news_detail.tpl } Incluye el contenido de la plantilla news_detail dentro del archivo final HTML. Asignar variables. Smarty permite asignar variables independientes de los datos PHP. Este recurso puede ser útil, según algunos ejemplos: {assignvar='photo' value=$news.photos.0} Este comando crea la variable $photo y le asigna el contenido de otra variable. En este ejemplo el objetivo es tener la presentación del código más limpia, puesto que siempre que se usaría: {$news.photos.0.href} Ahora se podrá usar: {$photo.href} {assignvar='id' value=0} Este comando crea la variable $id y le asigna un valor. Podría usarse luego para comparaciones u otros usos. Ejemplo: <div{if$news.inde==$id}class= rojo {/if}> Comentarios. Los comentarios Smarty se delimitan por {* *} {$color}{* colordelteto*} El contenido entre {* *} no se mostrará en el HTML 5. Datos disponibles por páginas 5.1 Debugger Smarty Para un desglose completo de las variables disponibles en cada página, ahora es posible activar el Debugger Smarty añadiendo?vars=1 al final de la URL de la misma. Ejemplos: URL NORMAL: http://demoefe.ikuna.com/ URL CON DEBUGGER ACTIVO: http://demoefe.ikuna.com/?vars=1 16
URL NORMAL: http://demoefe.ikuna.com/20_nba/1975144_72 93 curry fue el lider de los warriors que se a cercan a la fase final.html URL CON DEBUGGER ACTIVO: http://demoefe.ikuna.com/20_nba/1975144_72 93 curry fue el lider de los warriors que se a cercan a la fase final.html?vars=1 5.2 Resumen de datos disponibles por páginas PD: este listado tiene como objetivo guiar a los diseñadores a la hora de distribuir los elementos en las páginas, puesto que éstos son los datos que pueden y deben utilizarse de acuerdo con la página en cuestión. Para un desglose más completo de las variables en términos de programación y estructura de datos, por favor mirar el documento Llave en Mano Tabla de Variables. 5.2.1 Datos Generales Disponibles en TODAS las páginas Disponible Plantillas Datos Predet / 2012 2013 $env Variables relativas a la aplicación (URLs, localización dentro de la web, etc. $tets Etiquetas de teto para titulares, boes, notas y tetos traducibles para otros idiomas (inglés, portugués) de la plantilla $data.tabs Categorías y subcategorías de menú (pestañas) $data.headers Elementos de la cabecera de la web, configurados a través del panel de Administración $data.laterals Elementos de la columna lateral de la web, configurados a través del panel de Administración $data.footer Elementos del pie de la web, configurados a través del panel de Administración 17
$data.miniplayer Elementos contenidos en el miniplayer lateral si este se está activo 5.2.2 Portada Datos específicos de portada: Ej: http://demoefe.ikuna.com/ Disponible Plantillas Datos Predet / 2012 2013 $data.news Listado que contiene la última noticia de cada pestaña activa de la página, ordenada cronológicamente. $data.futbol Variables necesarias para el banner con enlace al marcador en directo. Sólo está disponible si hay un partido en directo en este momento, o bien si se usa el querystring?test=1 al final de la URL (útil para la edición de la plantilla sin que el usuario lo vea). Ej: http://demoefe.ikuna.com/?test=1 $data.most_read Listado que contiene las noticias más leídas de la web. $data.comments Contiene información sobre los últimos comentarios de la web, si están activos y si los hay. $data.photo Listado de últimas fotos disponibles en las Fotogalerías de la página, si están habilitadas. Compone el carrusel fotográfico de portada. $data.miniplayer Listado de últimos vídeos disponibles en las pestañas de tipo vídeo de la página, si están habilitados. Compone el carrusel de vídeos de la columna principal. 5.2.3 Portadillas de noticias Datos específicos de Portadillas de noticias Disponible Plantillas Datos Predet / 2012 2013 $data.top_news Las 6 noticias más recientes de la pestaña en 18
cuenstión. $data.news Listado de las siguientes noticias ordenadas cronológicamente. Máimo 18 noticias 5.2.4 Detalle de noticias Datos específicos de detalle de noticias Ej: http://demoefe.ikuna.com/148_deportes/1980418_azare nka se retira del torneo de tenis de miami por una lesio n en el tobillo.html Disponible Plantillas Datos Predet / 2012 2013 $data.main_item Toda la información referente a la noticia en cuestión (artículo). PD: Las noticias pueden tener: 1 foto (horizontal o vertical) http://demoefe.ikuna.com/148_deportes/1980418 _azarenka se retira del torneo de tenis de miam i por una lesion en el tobillo.html 2 o más fotos: http://demoefe.ikuna.com/2505_previo reportajes /1595208_en la calle lugares emblematicos esc enarios olimpicos.html 1 o más tetos: http://demoefe.ikuna.com/603_copa del rey/1903 533_real madrid barca el miercoles 30 a las 21 horas y atletico sevilla el jueves 31 a las 22 hor as.html Archivos adjuntos: http://demoefe.ikuna.com/2413_noticias cliente/1 682227_fichero adjunto a la noticia.html comentarios (si están habilitados) $data.news Listado de las noticias que pertenecen a la categoría activa. Máimo 24 noticias. 5.2.5 Página de vídeos 19
Datos específicos de páginas de vídeos. Disponible Plantillas http://demoefe.ikuna.com/56_videos/1980299_el gran te lescopio milimetrico ya esta listo para escudrinar el uni verso.html Datos Predet / 2012 2013 $data.main_item Toda la información referente al vídeo principal que se está visualizando (player grande). Los vídeos pueden tener: 1 foto (carátula) un teto pequeño resumen un teto de desglose comentarios (si están habilitados) $data.news Listado de los vídeos que pertenecen a la categoría activa. Máimo 24 vídeos. 5.2.6 Página de fotos Datos específicos de páginas de fotos Disponible Plantillas Datos Predet / 2012 2013 $data.news Listado de los vídeos que pertenecen a la categoría activa. Máimo 24 vídeos. * En esta página, la foto grande es el primer elemento (más reciente) del listado de $data.news Las fotos pueden tener: Formato horizontal o vertical Un titular Un pie de foto NO tienen comentarios 5.2.7 Marcador minuto a minuto Datos específicos de páginas de marcador Disponible Plantillas 20
Datos Predet / 2012 2013 $data.main_item Toda la información referente al partido principal que se está visualizando. $data.games Listado de los últimos partidos de la pestaña 5.2.8 Infografías Datos específicos de páginas de infografías Disponible Plantillas Datos Predet / 2012 2013 $data.main_item Toda la información referente al elemento flash (infografía) que se está visualizando ( que se limita a datos y rutas necesarios para incrustar el elemento flash). 5.2.9 Páginas de contenido libre Datos específicos de páginas de contenido libre Disponible Plantillas Datos Predet / 2012 2013 $data.main_content Teto insertado por el cliente en el panel de Administración de páginas de contenido libre. 6. Ejemplos prácticos 6.1 Páginas Las páginas son el producto final de la plantilla. Es preferible que sirvan de estructura general llamando a los bloques a través del comando {include} y no manejen los datos directamente. Ejemplo de página Portadilla: 21
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/tr/html1/dtd/html1-transitional.dtd"> <htmlmlns="http://www.w3.org/1999/html" lang="es"> <head> {includefile='bo.html_head.tpl'} </head> <body> <divclass="page"> {includefile='bo.header.tpl'} <divclass="maintwolist"> <divclass="page_shadow"> <divclass="bg_content"> <divclass="content"> {includefile='bo.news_gallery.tpl'} <divclass="spacer"></div> </div><!-- contentend--> {includefile='bo.lateral.tpl'} </div><!-- bg_contentend--> </div><!-- page_shadowend--> </div><!--mainend--> {includefile='bo.footer.tpl'} </div><!--pageend--> </body> </html> En el ejemplo anterior, la página no contiene variables o loops (listados) de datos, es simplemente la estructura general de la portadilla. Los datos se manejarán preferiblemente dentro de los diferentes bloques. 6.2 Bloques Por su vez, los bloques dependerán de las variables para mostrar el contenido. Las variables pueden ser únicas o pertenecer a una cadena (array o listado). Ejemplo simplificado: Detalle de noticias <!-----Newsdetail-----> {assignvar='news' value=$data.main_item} {assignvar='photo' value=$news.photos.0} <h5> {$news.category_name} <ahref="{$news.category_link}" class="a_right"> {$tets.back_to}"{$news.category_name}" 22
</a> </h5> <divclass="detailbo"> <h1>{$news.headline}</h1> <pclass="date"> {$news.subheadline} {$news.date_line} </p> {includefile='bo.tools.tpl'} {if$photo.href} <imgsrc="{$cdn.image}/photos/t_610_370/{$photo.href}" alt="{$photo.headline escape:'html'}" title="{$photo.headline escape:'html'}"/> <ahref="{$data.gallery_url}" class="news_zoomload_gallery" title="{$photo.headline escape:'html'}" rel="{$news.id_category}_{$news.id}">{$tets.epand}</a> <pclass="img_title">{$photo.content strip_tags}</p> {/if} {foreachfrom=$news.tetsitem=tetkey=inde} {if$inde>0} <divclass="news_second_headline">{$tet.headline}</div> {/if} {$tet.content} {/foreach} </div><!-- detailboend--> <divclass="spacer"></div> <!-----Newsdetailend-----> Éste es un ejemplo más elaborado, pues contiene diferentes tipos de elementos. Se ha construído de la siguiente forma: 1. Se han simplificado las variables de datos, asignando nuevos nombres más sencillos: a. {assignvar='news' value=$data.main_item} {assignvar='photo' value=$news.photos.0} 2. Se han utilizado los diferentes elementos de la variable (cadena) $news. Ejemplos: a. {$news.category_name} b. {$news.category_link} c. {$news.headline} d. etc... 3. Se han utilizado los diferentes elementos de la variable (cadena) $photo. Ejemplos: a. {if$photo.href}...{/if}{* Verificasieistelafoto*} b. {$photo.headline escape:'html'}{* Pintaeltítulodelafoto, ecluyendocaractereshtml( <,,/, etc), siloshay*} c. {$photo.href} d. etc... 23
4. Se han utilizado los diferentes elementos de otras variables. Ejemplos: a. {$tets.back_to} b. {$cdn.image} c. {$data.gallery_url} d. etc... 5. Se ha desglosado el contenido de la cadena $news.tets a través del comando {foreach} a. {foreachfrom=$news.tetsitem=tetkey=inde} {$tet.content} {foreach} 6. Todos estos elementos se han incrustado en una base HTML/CSS que da forma a la página. 24