Los botones y las etiquetas de los editores de texto

De WikiTinglado

Las etiquetas que incorpora el gestor de contenidos de El tinglado tienen sus correspondientes botones en el editor de textile de este gestor. En el editor BBCode de comentarios se encuentran algunas de ellas, pero no todas, sobre todo por motivos de seguridad.

Estas etiquetas funcionan tanto con textile como con HTML, y además facilitan el trabajo con el editor visual TinyMCE, pues éste no borra el contenido de las etiquetas, que se puede ver completo con la opción de Vista previa. Asimismo, si se usa el editor visual, las etiquetas se pueden escribir directamente tanto en el editor como en el código fuente.

Las etiquetas son las siguientes: podcast, vídeo, flash, iframe, ficha, test y pagina.

Etiqueta podcast

Su sintaxis es:

[podcast=1]ENLACE[/podcast]

El número 1 pude sustituirse por otro hasta el 6, según el reproductor que queramos elegir. La siguiente imagen muestra los ditintos tipos de reproductores y su número correspondiente: [[1]]
Hay que sustituir la palabra ENLACE por el enlace o URL del podcast.

Etiquetas video, flash e iframe

Las siguientes etiquetas tienen una sintaxis parecida. El primer parámetro es la anchura y el segundo, la altura del objeto. En medio va el ENLACE del objeto.

[video=400=300]ENLACE[/video]

[flash=400=300]ENLACE[/flash] 

[iframe=630=500]ENLACE[/iframe]

La etiqueta de vídeo recoge el código que nos dio José María.
La etiqueta flash no sé cómo ponerla para que no empiece automáticamente.
La anchura del iframe es la máxima que se puede poner en este blog para que quede bien respecto al diseño.
Estos objetos aparecerán siempre centrados en el documento.

Etiqueta ficha

Su sintaxis es:

[ficha=green=TITULO]

TEXTO

[/ficha]

El primer parámetro, después del primer signo de igualdad, es el *color del fondo* del título y del borde de la ficha. El color predeterminado es green (verde oscuro), pero podéis usar otros colores con los signos de HTML: el de esta ficha, por ejemplo es "#5782AE", ese azul tan bonito.
El color de fondo de la ficha será siempre ese gris claro que véis.
El color de las negritas (que se usan mucho en fichas) será siempre green.
El color elegido conviene que sea siempre oscuro.
Si no hay más opciones de color es porque resulta difícil implementarlas aquí.
El tamaño de la letra es un poco más pequeño que el del texto normal. No sé si esto es lo más adecuado, pero lo he hecho pensando en que las fichas no ocupen mucho.
El segundo parámetro es el título de la ficha.
Entre la etiqueta de apertura y la de cierre podéis poner lo que queráis tanto en HTML como en textile. La etiqueta de apertura y la de cierre pueden estar separadas del resto del texto, que no pasa nada. Y en textile es mejor dejar una línea en blanco entre las etiquetas de apertura y de cierre y el contenido para que funcionen bien la etiqueta de párrafo y otras.

Bueno, esto parece un lío, pero es sencillo. Editad este texto y ved cómo está la etiqueta de ficha.

Etiqueta newpage

La sintaxis de la etiqueta para paginar textos es:

[newpage]

Cada vez que pongáis esa etiqueta en un post se verá una nueva página, de forma que un mismo post puede constar de varias páginas numeradas.

Esto tiene muchas utilidades. Yo, si os digo la verdad, no soy partidario de dividir un post en páginas, a menos que sea muy muy largo o contenga muchos elementos. Pero puede resultar útil, por ejemplo, para cuando queráis poner las soluciones de una actividad, que pueden ir en otra página en vez de en otro archivo, como hasta ahora habéis hecho algunos. O si queréis dividir una actividad en varias. Y otras utilidades que seguro le encontraremos.

Etiqueta marco

Reproduce el marco verde y fino que aparece alrededor de cada comentario. Se puede usar en las actividades para enfatizar algún apartado o sección. El botón se usa sólo en el editor de actividades, no en los comentarios. Su sintaxis es la siguiente:

[marco]

<p>Texto de párrafo con etiqueta de párrafo</p>

[/marco]

Si lo usáis con HTML, no os olvidéis de usar la etiqueta de párrafo de HTML en el texto, tal y como aparece en el ejemplo. Si usáis código textile no hace falta la etiqueta de párrafo, pero hay que dejar una línea en blanco antes y después del texto interior.

Etiqueta imagen

Con el botón Imagen del editor podemos insertar una imagen en la actividad. Ésta es la etiqueta:

[imagen=centro=DESCRIPCION]ENLACE[/imagen]

se pueden cambiar tres valores:

El pimero por la izquierda puede ser centro (el predeterminado) izquierda o derecha (en minúsculas) para colocar la imagena a la izquierda o a la derecha de un párrafo, o fuera de un párrafo y centrado en el documento.
El segundo es una descripción de la imagen, que se incluirá en los atributos alt y title de la etiqueta de imagen de HTML.
El tercero es el enlace de la imagen, que puede ser absoluto (completo con el http//:) o relativo a la carpeta del servidor donde se encuentre.

En las imágenes que van a ir a la izquierda y a la derecha del párrafo, hay que colocar el principio del párrafo pegado al final de la etiqueta para que el conjunto quede en el mismo párrafo y la presentación sea correcta. Es de esta forma:

[imagen=izquierda=DESCRIPCION]ENLACE[/imagen]Principio del párrafo...

No hay que confundir esta etiqueta con la que se incluye con el botón Img, pues la nueva etiqueta simplifica la inclusión de la imagen, y el código utilizado incluye las marcas de las hojas de estilo CSS.

Botón de código en textile

Este botón, llamado Cd (código) muestra código fuente sin que se active. Consiste en poner una arroba al principio y al final del código. En HTML es la etiqueta CODE; aquí un ejemplo:

<p>Etiqueta de párrafo</p>

Esta etiqueta también se encuentra en el editor BBCode de los comentarios.

Cuando utilicéis esta y otras etiquetas con textile, hay que tener en cuenta que no funcionan cuando el código tiene un salto de línea, porque textile añade automáticamente un salto de línea cuando se pulsa INTRO. Esto no ocurre cuando se trabaja con código HTML.

Los tests

De momento hay tres tipos de tests. Ésta es su sintaxis:

[test=1=#FDF0DA], [test=2=#FDF0DA], [test=3=#FDF0DA]

El primer parámetro es el número del tipo de test.
El segundo parámetro es el color de fondo. El que veis ahí es el color crema predeterminado.
Cada test tiene su botón de instrucciones, y en los archivos de las preguntas hay comentarios de ayuda.
En todos los tests no hay límite al número de preguntas.
No se puede poner más de un test del mismo tipo por documento, pues las variables se lían entre ellas. Pero se pueden publicar varios tests del mismo tipo en iframes dentro de un mismo documento, porque las variables de los iframes están en documentos distintos. En todo caso, puede haber más de un test si son de tipo diferente: los tres tests de ejemplo que hay en este documento funcionan perfectamente.
Los tests no funcionan en la Vista previa.
Si queréis alguno de estos tests modificados, decídmelo, y a lo mejor se puede cambiar un script rápidamente para adaptarlo a vuestro gusto: eso suele ser fácil.

El test1 es una prueba de respuesta o elección múltiple, en la que sólo una respuesta es correcta. Si no se acierta a la primera, se pasa a la siguiente pregunta, y los errores se van guardando para repetir esas preguntas falladas al final del test.
El test2 es una prueba de emparejamiento de cinco frases numeradas con cinco frases con letras.
El test3 es una prueba que consiste en escribir la respuesta con el teclado.

Modo de empleo

Para usar los tres tests hay que indicar el archivo principal de cada tipo en la opción Metadatos del editor de textile. En los tres casos es igual, salvo que hay que modificar el número del tipo de test: test1.js, test2.js o test3.js. Estos archivos estarán siempre en la misma carpeta del servidor: scripts/.
Debajo de este enlace hay que especificar el enlace del archivo js. de vuestras preguntas. Estos archivos los podéis copiar de esta carpeta y escribir vuestras preguntas en ellos. Después los copiáis donde queráis, aunque os recomiendo vuestra carpeta de usuarios, o en una carpeta dentro de ésta que creéis con FTP.

Archivos de preguntas

Éstos son los enlaces a los archivos del código principal de los tests y del de de las preguntas para los distintos tests. Vosotros sólo tenéis que modificar los de las preguntas, y cambiarles el nombre, siempre con extensión js.

Un ejemplo

Quiero publicar un test tipo test1. En la opción *Metadatos* tengo que escribir primero el archivo general para todos los tests del tipo 1, que está en la carpeta scripts:

<script type="text/javascript" src="scripts/test1.js"></script>

Debajo de este enlace hay que escribir el enlace donde guardo mi archivo de preguntas, que puede ser mi carpeta de usuario:

<script type="text/javascript"
src="files/nombre_usuario/mis_preguntas.js"></script>

El test del buen blogfesor

Si queréis hacer un test como el del buen blogfesor, podéis ir a este documento donde explico cómo hacerlo, pues no se puede poner en una etiqueta.