|
|
 Documentación » Personalización (información general)
Antes de empezar el trabajo de personalización, debes plantearte
si deseas personalizar editando los archivos manualmente o utilizando algunos de los editores
ya existentes en el mercado, como DreamWeaver, FrontPage, Netscape Composer, etc.
Si no tienes muchos conocimientos de programación HTML lo más seguro es que prefieras
utilizar alguno de estos editores. Si es así, no te asustes al ver palabras y símbolos
aparentemente incomprensibles cuando edites los archivos, esas "cosas" que ves son algunas de las
etiquetas que nuestras aplicaciones traducen en nuestro servidor y las convierten en HTML legible
por el navegador. Por lo tanto, no debes borrarlas si realmente no sabes lo que estás haciendo,
al menos de momento.
De todas formas advertirte que es preferible editar
las páginas directamente, desgraciadamente muchos de estos editores
no tienen consideración alguna con nuestros códigos y los modifican a su antojo,
quedando de esta forma etiquetas invisibles a nuestras aplicaciones.
Para hacerte con los archivos a modificar deberás seguir las instrucciones
del apartado "Personalizar" en tu panel de control.
Los servicios son personalizables al 99%, es decir, que los puedes adaptar
según tus gustos y tus necesidades (cambiar colores, añadir y quitar texto, añadir o quitar campos,
incluir JavaScript, etc.).
Es por eso que disponemos de una gran cantidad de etiquetas con las que podrás cambiar muchas de
las características de la aplicación.
Lo más importante antes de empezar es tener claro los cuatro tipos de etiquetas que
existen: los campos, las áreas, los bloques y los comandos.
- CAMPOS Los campos son etiquetas que después son sustituidas por nuestras aplicaciones por los
datos a los que representan (por ejemplo el campo !!--CAMPO:foro-nombre--! será sustituido por
el nombre del foro). Como es obvio, este tipo de etiquetas se identifica por tener este formato: !!--CAMPO:nombre_del_campo--!
- AREAS Las áreas son campos muy específicos que después son sustituidos por bloques de
información. Tal es el caso del área de los mensajes, etc. (!!--MSGS_AREA--!, que se sustituiría por los
mensajes)
- BLOQUES Los bloques son dos etiquetas que engloban secciones de la página.
Podemos distinguir tres clases de bloques.
- Bloques que serán mostrados en determinadas circunstancias
Por ejemplo, el bloque:
%!!POSTEDOK:
!!%
Este bloque sólo saldrá en la página cuando el mensaje haya sido insertado sin ningún problema.
Dentro pondremos todo lo que queramos que aparezca en el cliente bajo esta circunstancia. Por ejemplo:
%!!POSTEDOK:
Su mensaje ha sido insertado
!!%
- Bloques de control de variables
Con este tipo de bloque podemos hacer que un
fragmento de código aparezca o no en función del valor de un campo. Es más que
probable que a primera vista parezca un poco lioso, pero seguro que con un ejemplo
queda mucho más claro:
Supongamos que tenemos insertado un formulario como este en nuestra página:
(el código)
<form>
E-Mail: <input type="text" size=40 name="email" value="nombre@dominio.com">
Observaciones:
<textarea cols=30 rows=2 name="observaciones"></textarea>
</form>
y que al rellenarlo, hemos escrito todos los campos menos en Observaciones.
Si lo dejamos así, una vez enviado el formulario aparecería de esta manera:
E-Mail del autor: nombre@dominio.com
Observaciones:
(el código)
E-Mail de autor: !!--CAMPO:email--!<br>
Observaciones: !!--CAMPO:Observaciones--!
Como podemos observar, el campo Observaciones aparecería vacío. Ahora vamos a
utilizar las etiquetas de bloque. La apariencia sería la misma, pero el código
variaría un poco:
E-Mail del autor: !!--CAMPO:email--!<br>
%!!observaciones_BLOCK:Observaciones: !!--CAMPO:OBSERVACIONES--! !!%
Ahora, al enviar el formulario, nuestra aplicación omitirá el campo
Observaciones al estar vacío y todo el código que esté
dentro del bloque. Se mostraría así:
E-Mail del autor: nombre@dominio.com
Sin embargo, si hubiéramos escrito algo en el campo Observaciones
sí que se mostraría.
Bloques que delimitan código utilizado por otras funciones
Estos bloques pueden ubicarse en cualquier parte del código. La aplicación
los guarda en memoria para su uso posterior y elimina del resultado final.
Un claro ejemplo de utilización sería el necesario para representar los mensajes
en un libro de visitas:
%!!CUSTOMMSG:
Mensaje de !!--CAMPO:nombre--!<br>
!!--MSG_AREA--!<br>
Host: !!--CAMPO:host--!
:CUSTOMMSG!!%
Como se puede observar, a diferencia de los demás tipos estos bloques
deben cerrarse mediante
:Nombre_del_bloque!!%
COMANDOS Los comandos son campos que admiten parámetros. La estructura general
de este tipo de etiquetas (salvando alguna que otra excepción) sería la siguiente:
!!--CMD:nombre_del_comando:variable:variable:n_variable--!
Donde:
nombre_del_comando: nombre del comando
variable: nombre de la variable. Se pueden poner
todas las que sean precisas siempre y cuando estén separadas por dos puntos ":".
Ejemplo:
!!--CMD:CAMPOCTRL:link:1:http://--!
Donde:
Nombre del comando: "CAMPOCTRL"
Variable 1: "link"
Variable 2: "1"
Variable 3: "http://"
Un ejemplo práctico Veamos ahora un pequeño
ejemplo que podría utilizarse en los foros de discusión, aunque se trata
de un código básico hemos intentado utilizar todos los tipos de etiquetas
y algunos casos especiales de uso a fin de familiarizarnos con ellas.
Por supuesto aquí sólo explicamos las etiquetas existentes en el ejemplo,
deberás dirigirte a la sección de personalización específica de cada
servicio para conocer todas las disponibles.
Crearemos las dos páginas que son necesarias, página índice (index.html) y
página leer mensaje (getmsg.html).
Página Índice
<html>
<head>
<title>!!--CAMPO:foro-nombre--!</title>
<!--
El campo "foro-nombre" está reservado por la aplicación será sustituido
por el nombre indicado en la base de datos
-->
</head>
<body>
<!--
Vamos a hacer uso del bloque CUSTOMMSG para definir el formato de línea del
listado de mensajes. Lo que insertemos dentro del bloque será mostrado cada
vez que se imprime un mensaje en el índice o en el árbol de respuestas de la
página leer mensaje.
-->
%!!CUSTOMMSG:
<li>!!--CMD:BEGINMSGURL:<b> » </b>--!<b>!!--CAMPO:subject--!</b>!!--CMD:ENDMSGURL:<b> « </b>--! - <b>!!--CAMPO:nombre--!</b> - !!--CAMPO:date--! !!--CAMPO:time--!<br>
!!%
<!--
Veamos qué hace cada etiqueta:
CMD:BEGINMSGURL es un comando (recordamos, funciones que aceptan parámetros)
que tiene la siguiente sintaxis:
!!--CMD:BEGINMSGURL:<adorno>:<frame_destino>--!
Su función es insertar el enlace (A HREF) necesario para acceder al mensaje
que se está mostrando, excepto cuando el mensaje es el actual (caso posible
cuando se esté mostrando el árbol de respuestas de la página leer mensaje),
en este caso se muestra el contenido de <adorno>, en el ejemplo »
<frame_destino> contendrá el nombre del frame donde se visualizará la página
ver mensaje, puesto que en el ejemplo se muestra en el frame activo omitimos
este campo.
CAMPO:subject es un campo simple que es sustituido por el asunto del mensaje.
CMD:ENDMSGURL es compañero de BEGINMSGURL, sintaxis:
!!--CMD:ENGMSGURL:<adorno>--!
El comando cerrará el enlace (/A) cuando el mensaje no sea el activo o mostrará
<adorno> cuando sí lo sea.
CAMPOS:nombre,date,time muestran respectivamente el autor del mensaje, la fecha
y la hora de inserción del mismo.
-->
%!!POSTEDOK: <b>Tu mensaje ha sido insertado. Gracias.</b><br> !!%
<!--
El código contenido en el bloque POSTEDOK será mostrado únicamente cuando
un mensaje sea insertado correctamente.
-->
!!--ERROR_AREA--!<br>
!!--BANNER_AREA--!<br><br>
Mensajes<br>
!!--MSGS_AREA--!
<!--
ERROR será sustituido por un mensaje de error en caso de haberlo al insertar un mensaje,
BANNER es un área obligatoria en los foros que mostrará el banner publicitario y
MSGS visualizará el listado de mensajes haciendo uso de CUSTOMMSG
-->
<br><a href="!!--CAMPO:URL--!">[Recargar]</a>
<!--
Este enlace nos permite recargar el foro, ¿Por qué no haber puesto
a href="http://boards.melodysoft.com/xxx/" si aparentemente tendría la misma función?
Como veremos más abajo, diversos campos son arrastrados en la navegación por el
foro, si utilizamos la dirección directa al foro los estaremos perdiendo.
El campo URL es sustituido por la cadena completa necesaria para arrastrarlos.
-->
<br><br>Añadir mensaje<br>
<form method="post" action="http://boards.melodysoft.com">
!!--HIDDENDATA_POSTMSG_AREA--!
<!--
HIDDENDATA_POSTMSG insertará los campos ocultos (hidden) necesarios en el
formulario para que la aplicación funcione correctamente.
-->
Nombre: <input type="text" name="nombre" value="!!--CAMPO:mi-nombre--!" size=40><br>
<!--
Aquí disponemos de un campo de entrada de texto que nos servirá para albergar el
campo "nombre". Como es de suponer a la hora de leer un mensaje
podremos mostrar su contenido mediante !!--CAMPO:nombre--! de la misma
manera que haremos con cualquier otro campo que añadamos.
CAMPO:mi-nombre , es un campo especial, el prefijo "mi-" indica que no
nos referimos al contenido de un mensaje previamente guardado, sino al contenido
actual del campo "nombre", es decir, si entramos un primer mensaje y damos
como nombre "Antonio", al navegar posteriormente por el foro, y gracias
a incluir ente campo (CAMPO:mi-nombre) como valor por defecto en el input,
el foro mostrará "Antonio" como nombre por defecto evitando tener que volver a
teclearlo. Podemos llamarlo función de arrastre.
-->
E-Mail: <input type="text" name="email" value="!!--CAMPO:mi-email--!" size=40><br>
Título: <input type="text" name="subject" value="!!--CAMPO:mi-subject--!" size=40><br>
<!--
Como es lógico, el campo subject no debería arrastrarse pues variará en cada
mensaje que sea insertado ¿Entonces por qué incluir CAMPO:mi-subject? Al ser
subject un campo reservado por la aplicación del foro únicamente lo tratará
en caso de error para que el usuario no pierda lo que ya tenía escrito, dejándolo
en blanco cuando el mensaje sea insertado correctamente.
-->
Imagen: <input type="text" name="imagen" value="!!--CMD:CAMPOCTRL:imagen:0:http://--!" size=40><br>
!!--CAMPO:DEL-imagen:http://--!
<!--
Aquí vemos nuevos conceptos, por una parte tenemos que "imagen" es un campo "extra",
pues no figura entre los reservados por la aplicación del foro, haremos uso
de ella de la misma forma que los si reservados, mostrándola posteriormente
mediante !!--CAMPO:imagen--!. Por otra parte incluimos el comando CAMPOCTRL, que es
una variante más avanzada que !!--CAMPO:mi-imagen--!. Esta es su sintaxis:
!!--CMD:CAMPOCTRL:<campo>:<arrastre 0/1>:<valor_defecto>--!
<campo> especifica el campo al que nos referimos,
<arrastre> puede contener: 0- no arrastra, 1- si arrastra el contenido del campo y
<valor_defecto>, como su nombre indica, es el valor que nos mostrará por defecto.
Aplicado al ejemplo tenemos que el contenido del campo "imagen" no va a ser
arrastrado al navegar por el foro aunque no se perderá si el
usuario comete un error. Por último nos mostrará el valor "http://" por defecto.
CAMPO:DEL es un tipo especial de comando que suele ir acompañado del comando
CAMPOCTRL. Su construcción es:
!!--CAMPO:DEL-<campo>:<valor>--!
A la hora de insertar el mensaje comprobará si <campo> contiene <valor>, y si
es así borrará el contenido del campo <campo>. En el ejemplo,
conseguimos que cuando el usuario no inserta una imagen, el campo "imagen"
no contenga "http://" pues evidentemente daría un error al intentar
mostrar la imagen en la página ver mensaje.
-->
<input type="checkbox" name="bNotificar" value="checked" !!--CAMPO:mi-bNotificar--!> Notificar respuestas por e-mail.<br>
<!--
bNotificar es un campo reservado por la aplicación, si contiene algún valor la aplicación
enviará un E-Mail cuando alguien conteste al mensaje que es añadido. En este caso
hacemos uso de mi-bNotificar de una manera especial, es un truco para permitir
arrastrar los campos tipo "checkbox" indicando que cuando sea marcado, su valor
sea "checked", valor que, al ser sustituido en mi-bNotificar dejará el control activado.
Comentar también que si bNotificar está activo la aplicación buscará un campo
de nombre "email" y verificará que aparentemente es correcto, de no serlo mostrará
un error a través del área ERROR.
-->
<br>Mensaje<br>
<textarea name="mensaje" cols=30 rows=10>!!--CAMPO:mi-mensaje--!</textarea>
<!--
Aquí insertaremos el cuerpo del mensaje, CAMPO:mi-mensaje se incluye con
la misma finalidad que el caso de subject.
-->
<input type="submit" value="Añadir mensaje">
</form>
</body>
</html>
Página Leer Mensaje
<html>
<head>
<title>!!--CAMPO:subject--!</title>
<!--
Utilizamos el subject del mensaje como título de la página.
-->
</head>
<body>
!!--ERROR_AREA--!<br>
Mensaje enviado por !!--CAMPO:nombre--! el !!--CAMPO:date--!
a las !!--CAMPO:time--! desde la IP !!--CAMPO:ip--!<br><br>
%!!email_BLOCK:
El E-Mail de !!--CAMPO:nombre--! es
<a href="mailto:!!--CAMPO:email--!">!!--CAMPO:email--!</a>
<br><br>
!!%
<!--
Aquí hacemos uso de los bloques BLOCK para impedir que el código que
encierra aparezca si el campo "email" está vacío.
-->
!!--BANNER_AREA--!<br>
<b>Título: !!--CAMPO:subject--!</b><br><br>
Mensaje<br>
!!--MSG_AREA--!<br>
%!!imagen_BLOCK:
Nos incluyó una imagen:<br>
<img src="!!--CAMPO:imagen--!">
!!%
<!--
De nuevo este tipo de bloques nos son de ayuda.
-->
<br><br>
Respuestas (!!--CAMPO:NUMREPLIES--!)<br>
!!--RSPARBOL_AREA--!
<!--
NUMREPLIES es un campo reservado que será sustituido por el número de respuestas
que tiene el mensaje activo. RSPARBOL construirá un árbol de respuestas
haciendo uso del bloque CUSTOMMSG albergado en la página índice.
-->
<br><br>
<a href="!!--CAMPO:URL--!">Volver al foro</a><br><br>
<!--
De nuevo hacemos uso del campo URL para referenciar la página índice del foro.
-->
Responder
<form method="post" action="http://boards.melodysoft.com">
!!--HIDDENDATA_POSTMSG_AREA--!
<!--
HIDDENDATA_POSTMSG insertará los campos ocultos (hidden) necesarios en el
formulario para que la aplicación funcione correctamente.
-->
Nombre: <input type="text" name="nombre" value="!!--CAMPO:mi-nombre--!" size=40><br>
E-Mail: <input type="text" name="email" value="!!--CAMPO:mi-email--!" size=40><br>
Título: <input type="text" name="subject" value="!!--CAMPO:re--!" size=40><br>
<!--
Observamos un cambio en el campo "subject" respecto a la página índice. Aquí
utilizamos el campo "re" en vez de "mi-subject". Así lo hacemos puesto que "re"
es un campo reservado que será sustituido por el subject original con el
prefijo "Re: "
-->
Imagen: <input type="text" name="imagen" value="!!--CMD:CAMPOCTRL:imagen:0:http://--!" size=40><br>
<input type="checkbox" name="bNotificar" value="checked" !!--CAMPO:mi-bNotificar--!> Notificar respuestas por E-Mail.<br>
<br>Mensaje<br>
<textarea name="mensaje" cols=30 rows=10>!!--MSG_TEXT_AREA--!</textarea>
<!--
Como en el caso de "re" en esta ocasión no incluimos CAMPO:mi-mensaje. El área
reservada MSG_TEXT será sustituida por el mensaje original usando quoting (>) en
caso de estar activada esta opción.
-->
<input type="submit" value="Responder">
</form>
</body>
</html>
|
|
