El delfín de El tinglado
El delfín de El tinglado

Enlace permanente

« Alejandro Valero

Imprimir

Etiquetas de código

El gestor de contenidos de este blog tiene algunas etiquetas propias para facilitar la inclusión de elementos multimedia y de diseño, pero el código fuente admite esa inclusión en forma de código HTML directamente. Además, en el editor de este blog existe el botón de plantillas (el último de todos) que abre una ventana desde donde se pueden incluir casi todas estas etiquetas sin necesidad de escribirlas.

Estas etiquetas se escriben entre corchetes, y hay una de apertura y otra de cierre; ésta incluye una barra (/) al principio. Dentro de la etiqueta de apertura puede haber algunos atributos que la modifican después del signo igual (=). Y la palabra ENLACE se sustituye por la URL, que puede ser relativa, es decir, no hay necesidad de escribir la URL completa, con alguna excepción. Las palabras en mayúsculas que hay en estas etiquetas indican lo que hay que incluir en vez de esas palabras.

  La sintaxis de las etiquetas es así:

[etiqueta=atributos numéricos=ATRIBUTOS TEXTUALES]ENLACE[/etiqueta]

Para mostrar las etiquetas en este documento sin que se activen, pondré un paréntesis donde tendría que ir el último corchete: [/etiqueta).

1. Etiqueta podcast

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

2. Etiquetas video, flash e iframe

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

[video=400=300]ENLACE_COMPLETO[/video)

[video1=400=300=TITULO]ENLACE_COMPLETO[/video)

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

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

  • Hay dos etiquetas video (sin tilde): la primera incluye el título genérico Vídeo de El Tinglado, pero video1 incluye un título personalizado que aparece sobre fondo negro cuando está apagado. El título admite los caracteres españoles salvo la doble comilla. Ambas etiquetas se cierran con la palabra video.
  • 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.

3. Etiqueta ficha

[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 en HTML. 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.

4. Etiqueta imagen

Con esta etiqueta podemos insertar una imagen en la actividad:

[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.

5. Etiquetas marco y marco_color

La 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. Su sintaxis es la siguiente:

[marco)

Texto de párrafo con etiqueta de párrafo

[/marco)

Con la etiqueta marco_color se puede elegir el color del borde y color del fondo:

[marco_color=#f9930f=#f9eee0)

Texto de párrafo con etiqueta de párrafo

[/marco)

Si lo usáis con HTML, no os olvidéis de usar la etiqueta de párrafo de HTML en el texto.

6. Etiqueta galeria1

[galeria1)

Imágenes

[/galeria=600=300)

Hay que poner [galeria1). Después se insertan las imágenes con código o con el botón del editor, da igual. Y al final, ponemos[/galeria=600=300) con la anchura y la altura del reproductor respectivamente. En esta etiqueta, por motivos técnicos, las dimensiones van en la etiqueta de cierre.

El tamaño de las imágenes puede ser distinto. Las imágenes pueden ser más grandes que el reproductor, porque se verán adaptadas al tamaño de éste, pero conviene que sean del mismo tamaño en que se verán.

Más información en este comentario del foro.

7. Etiqueta newpage

La sintaxis de la etiqueta para introducir páginas en una entrada 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.

8. Etiqueta gap para rellenar huecos

Para incluir huecos que rellenar en un texto tenemos la etiqueta gap, cuya sintaxis es:

[gap=TEXTO=TAMAÑO) Ejemplo: [gap=Hola=7)

  • Se puede utilizar más de una palabra o expresión que sean válidas escribiéndolas separadas con punto y coma en TEXTO.
  • En TEXTO se puede incluir cualquier texto, incluso con apóstrofo ("can't"), pero el apóstrofo debe escribirse con asterisco: "can*t".
  • El TAMAÑO en números es el tamaño que tendrá el campo de texto, que no se corresponde con el número de letras que deba tener el texto.
  • Cuando se escribe el texto, hay que pulsar ENTER o hacer clic fuera del hueco, y entonces se verá el fondo verde si la respuesta es acertada, y el fondo rosa si es incorrecta.
  • Para que funcione esta etiqueta, debe llevar incluida en la sección Meta datos del post el siguiente enlace al script gap.js:



La respuesta que se da en la etiqueta se puede ver en el código fuente, por tanto no vale para entornos de evaluación formal.

Existe la etiqueta [gap_instructions) que muestra un boton para las instrucciones:

9. Etiqueta audio1 para todos los dispositivos

Esta es una etiqueta para el nuevo audio. Es muy simple. Se llama audio1 y tiene la opción de elegir la longitud del reproductor, que por defecto es 300 píxeles. Le he quitado los controles de quitar y subir o bajar el sonido, porque no valen para nada, ya que si quieres quitar el sonido, lo apagas y ya está, y porque en tamaños pequeños, abultan mucho y quitan espacio a la línea de reproducción, que sí es importante. La sintaxis es así (con los corchetes cambiados aquí por paréntesis para que no se active):

(audio1=300)ENLACE(/audio)

Y esto funciona así, con tamaños 200 y 300:

 

10. Los tests

De momento hay tres tipos de tests. Su uso es un poco complicado. É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

Para el correcto funcionamiento de estos tests, consultad con Pege Gotera.

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.

Por Alejandro Valero el 06.11.10 Bookmark and Share
Palabras clave ayuda

Los comentarios están cerrados.

No hay comentarios