Melodysoft
Contactar | Regístrate | Panel de control | Publicidad  

 
Foros de discusión

Características
Diseños disponibles
Índice de foros

Libros de visitas

Características
Diseños disponibles

Formularios de envío


AdFREE - Bonos

libres de publicidad


Documentación

Personalización
F.A.Q.

Noticias


Contactar


 


Documentación » Personalización (información general)


Volver


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:
      E-Mail: 
      Observaciones:  

    (el código)
      <form>
      E-Mail: <input type="text" size=40 name="email" value="[email protected]">
      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: [email protected]
      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: [email protected]

    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>

Volver



Sobre Melodysoft | Aviso legal | Privacidad | Condiciones del servicio | Condiciones de contratación
Índice foros | Tiendas | Boards2