Ejemplo
En este ejemplo se mostrará cómo crear y utilizar las nuevas marcas multivista en Prontus.
Se creará una vista en inglés para el sitio Coolnews (que se puede obtener de la Tienda en el Wizard Prontus). Se asume que el servidor se configuró correctamente, incluyendo la adición de la nueva multivista en la configuración de Prontus.
El primer paso es modificar el FID Noticia con los nuevos campos. El FID se encuentra ubicado en la carpeta cpan/fid/fid_noticia.html.
Un FID está conformado por pestañas y cuerpo de pestaña. Lo que hay que hacer es crear una subpestaña dentro del cuerpo de la pestaña y crear dos subcuerpos: uno para español (reutilizar el mismo) y otro para inglés (el nuevo que hay que agregar). Prontus por lo general divide cada una de estas funcionalidades en Macros, por lo que se pueden reutilizar componentes.
En el archivo cpan/fid/fid_noticia.html, ir a la sección “Columna Izquierda” y modificar cada una de los bloques <div> por la siguiente estructura:
<div class="cabecera" id="body1">
%%MACRO(en_general_subtabs1.html)%%
<div id="es_gen_cabecera">
%%MACRO(noticia_cabecera.html)%%
</div>
<div id="en_gen_cabecera">
%%MACRO(en_noticia_cabecera.html)%%
</div>
</div>
La primera macro llama a las pestañas de idioma, que tiene la siguiente forma:
<table style="width:100%;">
<tr>
<td>
<div class="tabs-alt clean">
<ul style="list-style:none;">
<li><a href="#es_gen_cabecera" >» Español</a></li>
<li><a href="#en_gen_cabecera" >» Inglés</a></li>
</ul>
</div>
</td>
</tr>
</table>
Fijarse en la referencia de cada link, la cual indica a cada <div> en el archivo huesped. Cada pestaña redirige a un formulario de cada idioma. El formulario en español se reusará de la versión antigua, por lo que sólo queda modificar la versión en inglés. En este caso particular no se modificará el diseño de la página normal, por lo que sólo se modificarán las marcas existentes y sin agregar ninguna más.
Pestaña "Cabecera"
La pestaña "Cabecera" posee los campos de cabecera de una noticia, como epígrafe, la bajada y la taxonomía. El archivo cpan/fid/macros/en_noticia_cabecera.html tiene la siguiente estructura:
<table width="100%" border="0" cellpadding="3" cellspacing="3" class="tableform">
<tr>
<td class="nombre">Titular</td>
<td class="campo"><input name="titular_en" type="text" class="fieldform" id="titular_en" value="%%titular_en%%" size="110" /></td>
</tr>
<tr>
<td class="nombre">Titular Largo</td>
<td class="campo"><textarea name="txt_titular_largo_en" cols="110" rows="3" class="fieldform">%%txt_titular_largo_en%%</textarea></td>
</tr>
%%MACRO(en_comun_titular_especial.html)%%
<tr>
<td class="nombre">Bajada</td>
<td class="campo"><textarea name="bajada_en" cols="110" rows="3" class="fieldform">%%bajada_en%%</textarea></td>
</tr>
<tr>
<td class="nombre">Bajada Corta</td>
<td class="campo"><input type="text" value="%%bajada_corta_en%%" size="5" name="bajada_corta_en" class="fieldform" /></td>
</tr>
%%MACRO(en_comun_coment.html)%%
</table>
Fijarse que cada una de las marcas lleva el sufijo _en, que indica el valor de la variable en la vista en inglés.
La macro "en_comun_titular_especial.html" posee este contenido:
<tr>
<td class="nombre">Titular Corto</td>
<td class="campo">
<input type="text" value="%%txt_titular_portada_en%%" size="85" name="txt_titular_portada_en" class="fieldform">
<span class="ayuda">Titular corto para portada y artic</span>
</td>
</tr>
Mientras que la macro "en_comun_coment.html" posee el siguiente contenido:
<tr>
<td class="nombre">Comentarios</td>
<td class="campo">
<div class="col200">
<input type="checkbox" value="si" id="chk_comentarios_en" name="CHK_comentarios_en" /> <label for="chk_comentarios_en">Incluir comentarios</label><br/>
<span class="ayuda">Indica si este artículo llevará<br/> o no comentarios</span>
</div>
<div class="col300">
Invitación a Comentar:<br/>
<textarea name="invitacion_coment_en" cols="110" rows="3" class="fieldform">%%invitacion_coment_en%%</textarea>
</div>
</td>
</tr>
Con estas modificaciones, la pestaña Cabecera del FID Noticia posee dos subpestañas: Español e Inglés. Mientras no se posea una plantilla, no podrá modificar los artículos.
Pestaña "Cuerpo"
La pestaña "Cuerpo" tiene el editor de texto que permite escribir la noticia en sí. En el archivo cpan/fid/fid_noticia.html se debe modificar la pestaña cuerpo de la siguiente manera:
<div class="cabecera" id="body2">
%%MACRO(en_general_subtabs2.html)%%
<div id="es_gen_cuerpo">
%%MACRO(noticia_cuerpo.html)%%
</div>
<div id="en_gen_cuerpo">
%%MACRO(en_noticia_cuerpo.html)%%
</div>
</div>
Donde la macro "en_general_subtabs2.html" posee las subpestañas, de la misma manera que "en_general_subtabs1.html", pero redirigiendo al id correspondiente.
La macro "en_noticia_cuerpo.html" posee el siguiente contenido:
<table width="100%" border="0" cellpadding="3" cellspacing="3" class="tableform">
<tr><td class="nombre">Cuerpo</td></tr>
<tr>
<td style="text-align:left; vertical-align:top;">
<!-- CONTROL VTXT -->
<textarea id="VTXT_CUERPO_en" name="VTXT_CUERPO_en" class="VTXT_EDITOR" style="height:350px; width:655px;" cols="100" rows="50">%%VTXT_CUERPO_en%%</textarea>
<!-- /CONTROL VTXT -->
</td>
</tr>
</table>
Tal como se mencionó anteriormente, no importa el contenido que se instancie, siempre que haya una marca Prontus se podrá referenciar.
Pestaña "Fotos"
La pestaña fotos guarda todas las imágenes asociadas al artículo. En el archivo cpan/fid/fid_noticia.html se debe modificar la pestaña de la siguiente manera:
<div class="cabecera" id="body3">
%%MACRO(en_general_subtabs3.html)%%
<div id="es_gen_fotos">
%%MACRO(noticia_fotos.html)%%
</div>
<div id="en_gen_fotos">
%%MACRO(en_noticia_fotos.html)%%
</div>
</div>
La macro "en_noticia_fotos.html" posee el siguiente contenido:
<table width="100%" border="0" cellpadding="3" cellspacing="0" class="tableform">
%%MACRO(en_comun_fotos_portada.html)%%
<tr>
<td class="nombre-max" colspan="4">Foto fija para artículo:</td>
</tr>
<tr>
<td><span class="ayuda">Foto (380x230px)</span><br/> %%fotofija_art_380x230_en(380,230)%%</td>
<td class="campo" colspan="3">
<span class="ayuda">Bajada Foto</span><textarea name="text_fotofija_art_380x230_en" cols="500" rows="2" class="fieldform" style="height:40px">%%text_fotofija_art_380x230_en%%</textarea>
</td>
</tr>
</table>
Fijarse que el sufijo va antes de la indicación de la resolución de la foto en la marca.
La macro "en_comun_fotos_portada.html" contiene todas las fotos que pueden ir en la portada:
<tr>
<td class="nombre-max" colspan="4">Fotos fijas para la portada:</td>
</tr>
<tr>
<td><span class="ayuda">Mini (80x80px)</span><br/> %%fotofija_port_80x80_en(80,80)%%</td>
<td><span class="ayuda">Chica (140x84px)</span><br/> %%fotofija_port_140x84_en(140,84)%%</td>
<td><span class="ayuda">Mediana-h (220x133px)</span><br/> %%fotofija_port_220x133_en(220,133)%%</td>
<td><span class="ayuda">Mediana-v (130x150px)</span><br/> %%fotofija_port_130x150_en(130,150)%%</td>
</tr>
<tr>
<td colspan="2"><span class="ayuda">Grande (380x135px)</span><br/> %%fotofija_port_380x135_en(380,135)%%</td>
<td colpspan="2"><span class="ayuda">Importante (620x220px)</span><br/> %%fotofija_port_620x220_en(620,220)%%</td>
</tr>
Con el FID modificado, ya se puede comenzar a trabajar en la plantilla del artículo. Como no se harán plantillas separadas para cada vista, se puede copiar la plantilla de la vista normal y reemplazar todas las marcas por las nuevas.
Recordar que hay marcas especiales de Prontus, como por ejemplo el largo y ancho de las fotos, o la taxonomía (secciones, subsecciones y temas), las cuales no requieren una marca multivista.
Cabe destacar que es necesario redireccionar todos los archivos externos como el Header o Footer, en el caso de existir. Por lo general, estos dos son tratados como portadillas y conviene hacer una copia de ambas en las multivistas. Se recomienda colocar atención al árbol de directorio multivista para saber dónde redireccionar. Archivos como CSS y scripts no necesitan redirección si se usa el mismo diseño en las multivistas.
Si nos fijamos en el contenido, “plantillas/artic/fecha/noticia.html” quedaría algo así:
<div class="top">
<div class="breadcrumb">Topics:
%%IF(_nom_seccion1)%%<a href="/%%_prontus_id%%/site/tax/port/fid_noticia/taxport_%%_seccion1%%___1.html">%%_nom_seccion1%%</a>%%/IF%%
%%IF(_nom_tema1)%% » <a href="/%%_prontus_id%%/site/tax/port/fid_noticia/taxport_%%_seccion1%%_%%_tema1%%__1.html">%%_nom_tema1%%</a>% %/IF%%
%%IF(_nom_subtema1)%% » <a href="/%%_prontus_id%%/site/tax/port/fid_noticia/taxport_%%_seccion1%%_%%_tema1%%_%%_subtema1%%_1.html">%%_nom_subtema1%%</a>%%/IF%%
</div>
<span class="separa"></span>
</div><!-- top -->
<h1>%%txt_titular_largo_en%%</h1>
<div><h3>%%bajada_en%%</h3></div>
<div class="pre-footer">
<span>Published: <strong id="seteoFecha"></strong>
%%IF(_autor)%% | Autor: <strong>
%%if(link_autor)%%
<a href="%%link_autor%%" %%if(CMB_target_autor)%%target="%%CMB_target_autor%%"%%/if%%>%%_autor%%</a>
%%/if%%
%%nif(link_autor)%%
%%_autor%%
%%/nif%%
</strong>
%%/IF%%
</span>
</div>
<div class="separador"></div>
<div class="noticia-princial">
<div class="right">
%%IF(FOTOFIJA_art_380x230_en)%%
<img src="%%FOTOFIJA_art_380x230_en%%" width="%%_WFOTOFIJA_art_380x230%%" height="%%_HFOTOFIJA_art_380x230%%" title="%%titular_en.xml%%" alt="%%titular_en.xml%%" />
<p id="pie_imagen">%%text_fotofija_art_380x230_en%%</p>
%%/IF%%
<div class="relacionados">
<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/%%_prontus_id%%/site/cache/taxonomia/pags-en/%%_SECCION1%%___art_relac.html"; ?>
</div>
</div>
<div class="CUERPO">
%%VTXT_CUERPO_en%%
</div>
%%IF(multimedia_video1_en)%%
<div id="video" class=""></div>
<script>
Flash.insertaPlayerVideo('%%multimedia_video1_en%%','video','480','300', '', '', '', '', '' , '','');
</script>
%%/IF%%
<img src="/%%_prontus_id%%/imag/sociales/compartelo.png" />
<!-- Comentario Facebook -->
%%IF(CHK_comentarios_en)%%
<img src="/%%_prontus_id%%/imag/sociales/facebook_comment.png" />
%%/IF%%
<!-- /Comentario Facebook -->
</div>
<div class="noticias-lateral">
<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/%%_prontus_id%%/site/edic/base/port/_m_right.html"; ?>
</div>
Con el FID y la plantilla modificada, se puede comenzar a actualizar cada uno de los artículos correspondientes a dicho FID. Los campos nuevos deberían aparecer en su respectiva subpestaña, en blanco y listas para ser modificadas.
Al presionar Guardar, se generarán los artículos en el nuevo idioma. Para poder verlo, reemplace la URL por la página en la nueva multivista. Por ejemplo, para la siguiente URL: /prontus_test/site/artic/20121026/pags/20121026110735.html, se debe reemplazar "pags" por "pags-en".
Las portadas necesitan que existan artículos en el nuevo idioma para poder mostrarse. En este caso particular no se necesita un diseño diferente a la vista normal, por lo que se puede copiar la portada y reemplazar las marcas Prontus.
Al igual que con las plantillas, hay que redireccionar algunos de los archivos como Header y Footer a sus versiones en la multivista. Los archivos como CSS y Scripts son transversales a la multivista, por lo que no requieren una redirección.
Una vez modificada la portada, se actualiza, generando así la página en la nueva multivista. Para probar si funcionó, reemplace en la URL a su versión multivista. Por ejemplo, para la URL /prontus_test/site/edic/base/port/inicio.html, se reemplaza "port" por "port-en".