ReCreando

Sábado, 28 de enero de 2006

Codigo: previsualizacion

Como todo lo prometido es deuda, acá les traigo paso por paso como crear y tener disponible el sistema de previsualizacion en sus bitacoras, por supuesto, el presente tutorial hace referencia a lo que es bitacorae (el cms de bitacoras.com).

Por favor den click en leer mas ;)


Bueno, manos a la obra:
** PASO 1: **
Lo que deben hacer primero es, abrir el block de notas, copiar y pegar (ahi) el siguiente texto (codigo en javascript):

function ReloadTextDiv() 
{ 
var NewText = document.getElementById("DynamicText").value; 
splitText = NewText.split(/\n/).join("<br />"); 
var DivElement = document.getElementById("TextDisplay"); 
DivElement.innerHTML = splitText; 
}

Una vez que tenemos ésto, tenemos que ir a Guardar Como...
Y ponemos en Tipo: "Todos los archivos" ...
Y en Nombre: "redireccion.js" (sin comillas).
Le damos guardar... y lo subimos a nuestra bitacora.

** PASO 2: **
Una vez terminado ese paso, nos vamos a nuestras plantillas...
En WebFTP donde vemos todos los archivos de nuestra bitacora. Es muy importante saber que todos los archivos .bit deben tener este codigo al final, antes de la etiqueta (tag) </body>:

<script language="JavaScript" type="text/javascript" src="<bit:bitacora_url() />/redireccion.js"></script>

Con ése codigo en cada archivo.bit nosotros "llamamos" al archivo javascript que creamos en el primer paso.

** PASO 3: **
Ahora vamos al archivo: comentarios.bit, y vamos a ver todo su codigo, tenemos que encontrar la parte donde le pedimos al visitante que escriba su comentario. En éste caso mi plantilla dice "Tu comentario" pero ésto puede variar de plantilla a plantilla, por lo que ruego se pongan las pilas y vean bien a lo que me refiero.
Uds deben modificar el tag textarea, que si bien lo recuerdo deberian tener algo asi:

<label for="texto">Tu comentario</label><br />
					  		<textarea name="texto" cols="xx" rows="x" tabindex="4"></textarea>

Bueno, ése mismo debe quedar asi:

<label for="texto">Tu comentario</label><br />
					  		<textarea name="texto" id="DynamicText" onKeyUp="ReloadTextDiv();" cols="xx" rows="x" tabindex="4"></textarea>

Fijense bien que es lo que agregamos:
id="DynamicText" onKeyUp="ReloadTextDiv();" El id se encarga de llamar a la hoja de estilos para colorear, o mejor dicho formatear esa parte de acuerdo a lo que uds deseen en estilo.CSS
Y el onKeyUp llama a la funcion javascript que estamos ejecutando.

** PASO 4: **
Ahora nos ubicamos en algun lugar del comentarios.bit (donde uds quieran), y tenemos que "posicionar" el texto que será el de la previsualizacion propiamente dicha. Para ésto agregamos el siguiente codigo:

Pre-Visualización<a href="http://recreando.bitacoras.com/archivos/2006/01/28/codigo-previsualizacion" target="_blank">®</a>:<br />
<span id="TextDisplay"></span>

Le damos guardar a la plantilla y vamos terminando...

** PASO 5: **
Vamos al archivo: estilo.CSS
Y creamos dos nuevos id; el DynamicText (que no es tan necesario) y el TextDisplay asi:

#TextDisplay{
background-color: #EEEEEE;
margin:10px 30px 10px 30px;
font-size: 9px;
padding: 10px 12px;
width:380px;
clear:both;
display: block;
}

Obviamente uds pueden agregar las propiedades que quieran... tienen soporte para CSS en los foros de bitacoras.com :)

** FIN: **
Espero puedan aprovechar al maximo todo... He agregado una pequeñisima "R" (de registrada) pero no quiero que piensen que yo me tomo los derechos de todo el codigo, no por supuesto que no, solamente quisiera que me agreguen a sus favoritos, me tengan a mano siempre, porque les ayudaré en lo que pueda. Se os prometo.
Si uds usan este tutorial, y lo encuentran de utilidad, les agradeceria agreguen un botoncito de ReCreando en sus blogs (bitacoras), asi vamos intercambiando favores... esta bien? Aqui les dejo el codigo:

<a href="http://recreando.bitacoras.com" target="_blanck"><img src="http://recreando.bitacoras.com/img/sidv-recb.png" title="ReCreando Blogs"/></a>

Por: ReC | Bitácoras | Comentarios (0) | Referencias (0)