<!-- Copyright (c) 2005 by Michaël Larouche <michael.larouche@kdemail.net
> -->
<!-- Licensed under the GNU Free Documentation License  -->

<appendix id="chatwindowstyleguide">
<title
>Guía de estilo de la ventana de conversación de &kopete;</title>
<sect1 id="chatstyle-reference">
<title
>Referencia de estilo de la ventana de conversación de &kopete;</title>
<para
>Desde &kopete; 0.12 estamos utilizando el formato <ulink url="http://www.adiumx.com/"
>Adium</ulink
> para nuestro estilo de ventana de conversación. El formato del tema se basa en plantillas <acronym
>HTML</acronym
> y <acronym
>CSS</acronym
>. Es más sencillo de crearlos y desarrollarlos, ya que solo es necesario un conocimiento de <acronym
>HTML</acronym
> y <acronym
>CSS</acronym
>. Además, los estilos pueden tener variantes (definidas como archivos <acronym
>CSS</acronym
>) que añaden un mayor valor de personalización :). </para>

<sect2 id="chatstyle-reference-guide">
	<title
>Guía de referencia</title>
<para
>El formato Adium está formado por una estructura de directorios, plantillas <acronym
>HTML</acronym
>, archivos <acronym
>CSS</acronym
> y palabras clave que se reemplazan cada vez que se procesa la plantilla. La conversación final es una página <acronym
>XHTML</acronym
> en la que los mensajes se añaden con operaciones <acronym
>DOM</acronym
>. El elemento central es un elemento div llamado <filename
>Chat</filename
>. Antes y después de dicho elemento div, se encuentra la cabecera y el pie de la plantilla. Los mensajes son hijos del elemento div <filename
>Chat</filename
>. </para>

<sect3 id="chatstyle-reference-directory">
	<title
>Estructura del directorio</title>
<para
>Un estilo debe respetar esta estructura de directorio. El código de &kopete; está pensado en torno a esta estructura de directorio. Cuando guarde un estilo, guarde el directorio <filename
>styleName</filename
>. La estructura del directorio es una estructura de un paquete de <application
>Mac OS X</application
> para aquellos que estén familiarizados con este sistema operativo. También se deben respetar las mayúsculas que se muestran aquí, ya que un sistema <acronym
>UNIX</acronym
> es sensible a las mayúsculas y minúsculas.</para>
<programlisting
>styleName\ (puede tener .adiumMessageStyle como sufijo, porque en Mac OS X es un paquete)
        Contents\
                Info.plist
                Resources\
                        main.css
                        Header.html
                        Footer.html
                        Status.html
                        Incoming\ (y saliente\)
                                Content.html
                                NextContent.html (para mensajes consecutivos)
                                Context.html (para mensajes del historial)
                                NextContext.html
                                Action.html
                        Variants\
                                *.css
</programlisting>
</sect3>

<sect3 id="chatstyle-reference-divinsert">
	<title
>Acerca de &lt;div id=«insert»&gt;&lt;/div&gt;</title>
	<para
>Este es un elemento div especial utilizado internamente. Es un marcador que indica dónde insertar el siguiente mensaje. Si es un mensaje nuevo, se elimina y el mensaje nuevo toma su lugar. Pero si es un mensaje consecutivo, el elemento div se reemplaza con el contenido del nuevo mensaje. Este elemento div especial es <emphasis
>necesario</emphasis
> en las plantillas Content, Context, NextContent, NextContext, todo ello sin perjuicio de que se pueda colocar en las plantillas Action y Status. </para>
</sect3>

<sect3 id="chatstyle-reference-templates">
	<title
>Plantillas HTML.</title>

<variablelist
><title
>Descripción de la plantilla.</title>

<varlistentry
><term
><filename
>Header.html</filename
> (Requerido)</term>
<listitem>
<para
>Utilice la plantilla Header para mostrar una bonita cabecera para la conversación. Esta plantilla se inserta antes del elemento div <filename
>Chat</filename
>. Si no la va a utilizar, indique un archivo vacío. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>Footer.html</filename
> (Requerido)</term>
<listitem>
<para
>Es más o menos igual que Header, pero para el pie de una conversación. Esta plantilla se inserta después del elemento div <filename
>Chat </filename
>. Si no la va a utilizar, indique un archivo vacío. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>Status.html</filename
> (Requerido)</term>
<listitem>
<para
>Esta plantilla se utiliza para mostrar mensajes internos, tales como el cambio de estado o mensajes de Kopete (ej: transferencia de archivo entrante). Cuando el estilo no proporciona una plantilla Action, se utiliza para mostrar el mensaje Action. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>Incoming/Content.html</filename
></term>
              <term
><filename
>Outgoing/Content.html</filename
> (Requerido)</term>
<listitem>
<para
>La plantilla Content es el corazón del mensaje. Considérela como un bloque en el que se incluyen los mensaje. Asegúrese de que está preparada para recibir mensajes consecutivos, no la diseñe para mostrar un solo mensaje. Los mensajes consecutivos se insertarán en el elemento div insert. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>Incoming/NextContent.html</filename
></term>
              <term
><filename
>Outgoing/NextContent.html</filename
> (Requerido)</term>
<listitem>
<para
>La plantilla NextContent es un fragmento de mensaje para mensajes consecutivos. Se insertará en el bloque principal del mensaje. La plantilla HTML debería contener lo mínimo para mostrar un mensaje. </para>
</listitem>
</varlistentry>


<varlistentry
><term
><filename
>Incoming/Action.html</filename
></term>
              <term
><filename
>Outgoing/Action.html</filename
> (Opcional) (Extensión de &kopete;)</term>
<listitem>
<para
>Esta plantilla es una extensión de &kopete; para el formato Adium. Está disponible tanto para la entrada (Incoming) como para la salida (Outgoing). Los mensajes Action son mensajes especiales indicar que se está realizando una acción. Ejemplo: «/yo está instalando &kopete;» debería mostrarse como «DarkShock está instalando &kopete;». </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>Incoming/Context.html</filename
></term>
              <term
><filename
>Incoming/NextContext.html</filename
></term>
              <term
><filename
>Outgoing/Context.html</filename
></term>
              <term
><filename
>Outgoing/NextContext.html</filename
> (Opcional)</term>
<listitem>
<para
>Estas plantillas no se utilizan en Kopete. En Adium, se utilizan para mostrar el historial. Son muy parecidas a Content y NextContent pero con algunas diferencias que las distinguen de los mensajes normales. </para>
</listitem>
</varlistentry>

</variablelist>

</sect3>

<sect3 id="chatstyle-reference-css">
	<title
>Acerca de los estilos CSS y sus variantes</title>
	<para
>La plantilla HTML se utiliza para describir como está creada la estructura. Pero todo el estilo se describe en los archivos <acronym
>CSS</acronym
>. <filename
>main.css</filename
> es el estilo principal en el que las variantes son solo modificaciones del estilo principal. Ejemplos de variantes son colores diferentes o no mostrar la foto del usuario. Tanto <filename
>main.css</filename
> como las variantes se importan en la página final <acronym
> XHTML</acronym
>.</para>
	<sect4 id="chatstyle-reference-css-main">
		<title
>-<filename
>main.css</filename
></title>
		<para
>Este es el principal archivo <acronym
>CSS</acronym
> que es común para todas las variantes. Este archivo debería contener toda la descripción principal del estilo.</para>
	</sect4>
	<sect4 id="chatstyle-reference-css-variants">
		<title
>-Variantes</title>
		<para
>Las variantes son archivos <acronym
>CSS</acronym
> situados en el directorio <filename
>Variants/</filename
>. Cada variante es un archivo <acronym
>CSS</acronym
> que incluye el <filename
>main.css</filename
> y realiza la alteración del estilo principal.</para>
	</sect4>
</sect3>

<sect3 id="chatstyle-reference-debug">
	<title
>Estilos de depuración</title>
	<para
>Aquí encontraremos dos consejos para probar un estilo mientras se crea.</para>
	<sect4 id="chatstyle-reference-debug-save">
		<title
>-Guardar una conversación de muestra.</title>
		<para
>En la ventana de conversación, puede <action
>guardar</action
> una conversación. Es una copia de la página XHTML interna mostrada. Utilícela en <application
>Konqueror</application
> para probar sus archivos <acronym
>CSS</acronym
>.</para>
	</sect4>
	<sect4 id="chatstyle-reference-debug-disable-cache">
		<title
>-Desactive la caché del estilo.</title>
		<para
>Una pequeña variable de configuración activa o desactiva la caché del estilo. Cuando se activa, se recargan las plantillas HTML cada vez que se pide el estilo. Añada las siguientes líneas a su <filename
>kopeterc</filename
>. Es muy útil cuando se está probando un estilo en &kopete;.</para>
		<programlisting
>[KopeteStyleDebug]
disableStyleCache=true
</programlisting>
	</sect4>
</sect3>

</sect2>

<sect2 id="chatstyle-reference-keywords">
	<title
>Referencia de palabras clave</title>
	<para
>Las palabras clave son como los huecos que hay que rellenar con detalles. En cada nuevo mensaje, se reemplazan con el valor correcto que corresponde a su contexto. Para admitir completamente todas las características de Kopete, hemos añadido a Adium algunas extensiones de palabras clave. Además, algunas palabras clave solo están disponibles en ciertos contextos.</para>

<variablelist
><title
>Lista de palabras clave para las plantillas de cabecera y de pie. </title>
<para
>Estas palabras clave se procesan al principio de la conversación.</para>
<varlistentry
><term
><filename
>%chatName%</filename
></term>
<listitem>
<para
>El nombre de la sesión de conversación actual. En una sesión típica, muestra el nombre del contacto y su estado. Para <acronym
>IRC</acronym
>, muestra el tema de un canal. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%sourceName%</filename
></term>
              <term
><filename
>%destinationName%</filename
></term>
<listitem>
<para
>Son el nombre de los contactos para una sesión de conversación. <filename
>%sourceName%</filename
> es su nombre. <filename
>%destinationName%</filename
> es el nombre del contacto con el que está hablando. Se prefiere <filename
>%chatName%</filename
> a los anteriores, porque pueden dar lugar a confusión en un grupo de conversación y en el IRC. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%incomingIconPath%</filename
></term>
              <term
><filename
>%outgoingIconPath%</filename
></term>
<listitem>
<para
>Son las imágenes/fotos/avatares de los contactos para una sesión de chat. Incoming representa la foto del contacto y Outgoing representa la propia foto. Si no hay fotos disponibles, se utiliza la imagen <filename
>buddy_icon.png</filename
> que se encuentra en el directorio <filename
>Incoming</filename
> u <filename
>Outgoing</filename
>. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%timeOpened%</filename
></term>
              <term
><filename
>%timeOpened{X}%</filename
></term>
<listitem>
<para
>Es la hora en la que comienza la sesión de conversación. <filename
>%timeOpened%</filename
> utiliza el formato de hora predeterminado local. Si desea utilizar un formato de hora específico, utilice <filename
>%timeOpened{X}%</filename
> donde X es una cadena que contiene el formato de la hora. Los parámetros de hora son los mismos que para la función <function
>strftime</function
> de glibc. Consulte <command
>man strftime</command
> para obtener la lista de los parámetros disponibles. </para>
</listitem>
</varlistentry>

</variablelist>

<variablelist
><title
>Lista de palabras clave para las plantillas Content, NextContent, Context, NextContext, Action</title>
<para
>Estas palabras clave se procesan para cada mensaje.</para>

<varlistentry
><term
><filename
>%userIconPath%</filename
></term>
<listitem>
<para
>Son las imágenes/fotos/avatares de los contactos asociados con el mensaje. Si no hay fotos disponibles, se utiliza la imagen <filename
>buddy_icon.png</filename
> que se encuentra en el directorio <filename
>Incoming</filename
> y <filename
>Outgoing</filename
> dependiendo de la dirección del mensaje. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%senderScreenName%</filename
></term>
<listitem>
<para
>Este es el ID de contacto del contacto asociado con el mensaje. Ejemplos: yo@hotmail.com, 45566576, JuanFernández. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%sender%</filename
></term>
<listitem>
<para
>Es el nombre del contacto asociado con el mensaje. Utiliza el nombre que se muestra en MetaContact como una fuente. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%service%</filename
></term>
<listitem>
<para
>Muestra el nombre del servicio asociado con el mensaje. Ejemplos: Jabber, Yahoo, MSN. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%textbackgroundcolor{X}%</filename
></term>
<listitem>
<para
>En &kopete;, esta palabra clave se utiliza para representar el color de fondo resaltado. Ignora los parámetros en las llaves y solo se utiliza como <filename
>%textbackgroundcolor{}</filename
>. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%senderStatusIcon%</filename
> (extensión de &kopete;)</term>
<listitem>
<para
>Muestra el icono de estado del contacto asociado con el mensaje. Es una ruta de archivo. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%senderColor%</filename
></term
>  <term
><filename
>%senderColor{N}%</filename
> (extensión de &kopete;)</term>
<listitem>
<para
>Genera un color enviado por el id del contacto. Puede utilizarse para mostrar un color diferente para el apodo del contacto. </para>
<para
><filename
>%senderColor{N}%</filename
> donde N es un número positivo. Si N es mayor que 100, representa un color más claro que el color del contacto. Si N es igual a 150, es un color con un 50% más de brillo. Si N es inferior a 100, es un color más oscuro. Esto es útil para tener un fondo de un color diferente paracada contacto. </para>
<para
>Si desea utilizar estos colores en una variante, pero no en el estilo principal, puede solventarlo así: <programlisting>
<![CDATA[
<div style="color:%senderColor%;border:none;border-color:%senderColor{40}%;"
><p class="message"
>...</p
></div>
]]>
</programlisting
> Se puede aplicar el color al elemento p.message en su archivo <filename
>main.css</filename
> y en su variante puede poner algo similar a esto: <programlisting
>p.message { color:inherit; border-color:inherit; }
</programlisting>

</para>
</listitem>
</varlistentry>

</variablelist>

<variablelist
><title
>La lista de palabras clave comunes para mensajes y Status.html</title>

<varlistentry
><term
><filename
>%message%</filename
></term>
<listitem>
<para
>El propio mensaje. Es un fragmento HTML. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%time%</filename
></term>
              <term
><filename
>%time{X}%</filename
></term>
<listitem>
<para
>La hora en la que se recibió el mensaje. <filename
>%time%</filename
> utiliza el formato de hora local predeterminado. Si desea utilizar un formato de hora específico, utilice <filename
>%time{X}%</filename
> donde X es una cadena que contiene el formato de la hora. Los parámetros de hora son los mismos que para la función <function
>strftime</function
> de glibc. Consulte <command
>man strftime</command
> para obtener la lista de los parámetros disponibles. </para>
</listitem>
</varlistentry>

<varlistentry
><term
><filename
>%messageDirection%</filename
> (extensión de &kopete;)</term>
<listitem>
<para
>Representa la dirección del mensaje, si el mensaje debe mostrarse de derecha a izquierda o de izquierda a derecha. El valor puede ser «rtl» o «ltr». Consulte <link linkend="chatstyle-guideline-direction"
>guía de dirección de mensaje</link
> para averiguar cómo utilizar esta palabra clave correctamente. </para>
</listitem>
</varlistentry>
</variablelist>

</sect2>
</sect1>

<sect1 id="chatstyle-guideline">
	<title
>Guía de estilo de la ventana de conversación de &kopete;</title>
<para
>La guía de estilo de la ventana de conversación de &kopete; es un conjunto de características que su estilo de ventana de conversación debe admitir para ser compatible con Kopete.</para>
<sect2 id="chatstyle-guideline-highlight">
	<title
>Uso del resaltado</title>
	<para
>Su estilo se debe mostrar resaltado. En Kopete y Adium, el <filename
>%textbackgroundcolor{}%</filename
> se reemplaza con el color de resaltado. Añada este atributo de estilo: <userinput
>background-color: %textbackgroundcolor{}%</userinput
> al elemento HTML que muestra el mensaje.</para>
</sect2>
<sect2 id="chatstyle-guideline-consecutive">
	<title
>Se requieren las plantillas de mensajes consecutivos.</title>
	<para
>Esta guía es para la gente que está reescribiendo antiguos estilos XSL al nuevo formato. Todos los estilos deben proporcionar una plantilla para mensajes consecutivos. Ahora es la característica predeterminada.</para>
</sect2>

<sect2 id="chatstyle-guideline-encoding">
	<title
>Utilizar codificación <acronym
>UTF-8</acronym
>.</title>
	<para
>El propio título lo dice. Debe guardar sus archivos en <acronym
>UTF-8</acronym
>.</para>
</sect2>

<sect2 id="chatstyle-guideline-info">
	<title
>Incluya <filename
>Contents/Info.plist</filename
> para interoperar con Adium.</title>
	<para
>El archivo <filename
>Contents/Info.plist</filename
> todavía no se utiliza en Kopete. Pero si desea que su estilo sea compatible con <application
>Adium</application
>, debe incluir este archivo. Veamos un ejemplo de archivo básico. Las cadenas se encierran con «$».</para>
<programlisting
><![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key
>CFBundleDevelopmentRegion</key>
        <string
>English</string>
        <key
>CFBundleGetInfoString</key>
        <string
>$Your style full name$</string>
        <key
>CFBundleIdentifier</key>
        <string
>$Your style ID in the form: com.adiumx.smooth.operator.style$</string>
        <key
>CFBundleInfoDictionaryVersion</key>
        <string
>1.0</string>
        <key
>CFBundleName</key>
        <string
>$Your style name here$</string>
        <key
>CFBundlePackageType</key>
        <string
>AdIM</string>
        <key
>MessageViewVersion</key>
        <integer
>3</integer>
</dict>
</plist>
]]>
</programlisting>

</sect2>

<sect2 id="chatstyle-guideline-buddyicon">
	<title
>Incluya <filename
>buddy_icon.png</filename
>.</title>
	<para
>Debe colocar un archivo llamado <filename
>buddy_icon.png</filename
> en <filename
>Incoming</filename
> y <filename
>Outgoing</filename
>. Estas imágenes se utilizarán cuando el contacto no tenga foto.</para>
</sect2>

<sect2 id="chatstyle-guideline-direction">
	<title
>Reconocimiento de los idiomas de derecha a izquierda con la palabra clave <filename
>%messageDirection%</filename
>.</title>
	<para
>La palabra clave <filename
>%messageDirection%</filename
> está presente para los idiomas que se escriben de derecha a izquierda. Define la dirección del mensaje, puede ser «rtl» (derecha a izquierda) o «ltr» (izquierda a derecha). Añada este atributo de estilo al elemento HTML que muestra el mensaje: <userinput
>dirección: %messageDirection%</userinput
>. La vista previa del estilo en la configuración de la apariencia incluye la dirección derecha a izquierda para comprobar si su estilo lo muestra correctamente. La cadena debería comenzar por la derecha.</para>
</sect2>
</sect1>
</appendix>