Cómo utilizar el editor visual TinyMCE

Última actualización el Jueves, 10 de Diciembre de 2009 16:47 Escrito por Gonzalo Reynoso Sábado, 17 de Mayo de 2008 00:00

Guías - Diseño y administración Web con Joomla!

Usar puntuación: / 9
MaloBueno 

9- Cómo utilizar el Editor de Joomla (TinyMCE)

Darle la forma deseada a cada uno de nuestros documentos, no siempre es una tarea sencilla, cuando no se tiene experiencia en formateo de hipertexto (HTML) aunque sea de forma visual.

A continuación se muestra la secuencia ordenada de pasos para el formateo de nuestros documentos de contenidos (páginas web), utilizando el editor visual (WYSIWYG), y prescindiendo lo más posible del código HTML.

Cuando utilizamos un editor visual, este va generando automáticamente el código fuente HTML, que luego será interpretado y renderizado por el navegador de los visitantes, de manera tal de poder reproducir visualmente lo mismo que se creó al momento de generar el contenido.

¿Cómo editar contenidos web amigables, livianos, y de código limpio?

El uso abusivo de editores visuales (WYSIWYG) genera demasiado código basura que estropea la calidad de nuestros documentos web, los hace pesados, no igualmente visibles en todos los navegadores, y difícilmente recuperables o indexables por los motores de búsqueda (SEO)

Algunas recomendaciones para mantener nuestros documentos web limpios en todo sentido son: Aprender lo básico del código html que irá en el cuerpo de nuestros documentos. Esto es: encabezados de textos, párrafos (con palabras en negrita, itálica, enlaces, etc), viñetas, e incrustaciones de imágenes.

Un documento típico visto en su código fuente se ve así:

<h2>Este es un encabezado o título del texto</h2>
<p><img src="http://www.desarrollodeweb.com.ar/images/stories/diseno-web-promocion/instalacion-joomla-15.jpg" align="right">Este
es el primer parrafo y lo siguiente <strong>se ve en negrita</strong>. A mi
derecha tengo una imagen.</p>
<p>Este es el segundo párrafo, con un <a href="#">enlace</a>, y a
continuación colocaremos algunas viñetas:</p>
<ul>
<li>este es el primer elemento de la viñeta</li>
<li>este es el segundo</li>
<li>este es el último elemento</li>
</ul>

.... Y en su modo visual (como se muestra en el navegador) se ve así:

Este es un encabezado o título del texto Este es el primer parrafo y lo siguiente se ve en negrita. A mi derecha tengo una imagen. Este es el segundo párrafo, con un enlace, y a continuación colocaremos algunas viñetas: este es el primer elemento de la viñeta este es el segundo este es el último elemento

Los pasos para utilizar el editor de Joomla para generar contenidos de código limpio son los siguientes:

1- Escribir el texto en un bloc de notas. No utilizar Word directamente para llevar texto que deba ir en páginas web!!!!!. Si nuestros textos están en un archivo Word, al copiar y pegarlo en el campo de trabajo se genera mucho código basura (formatos inventados por Microsoft, que no forman parte de estándares aceptados de marcado HTML).

Entonces en este caso hacemos así: Seleccionar todo el texto a publicar, desde el archivo Word, luego copiarlo y pegarlo en el bloc de notas. Luego...

2- Seleccionar todo el texto (desde el bloc de notas)

3- y copiarlo (Click en el botón derecho del mouse y seleccionar Copiar)

(imagen 46)

Ir Article: [Edit], en el campo de trabajo colocar el cursor, hacer click en el botón derecho >> Seleccionar Pegar (nº1 en la imagen 47). Luego quedará como muestra el recuadro nº2 imagen 47

(imagen 47)

Para dar formato a cada parte del texto:

Comenzaremos por separar el texto en párrafos (o bloques de texto sin formato). Para ello debemos colocar el cursor al final de cada línea y presionar la tecla "Enter"

(imagen 48)

Formatos Hn (Encabezados del documento):

Los más utilizados son H1 a H3 (dependiendo de la extensión y tipo de documento). En el ejemplo siguiente se utiliza H1:

1- Seleccionar el texto

2- Ir a Format, seleccionar "Heading 1"

3- El texto (Documento Nuevo) quedará en formato H1

(imagen 49)

Texto en Negrita:

1- Seleccionar el texto / frase que queremos colocar en Negrita

2- Hacer click en el ícono , del campo de Herramientas

(imagen 50)

Crear un Enlace dentro del texto del documento:

1- Seleccionar el texto al cual se quiere ponerle un enlace

2- Hacer click en (campo de herramientas), luego se abrirá una ventana (ver recuadro nº3 en la imagen 51)

3- Completar los campos necesarios:
3.1- Colocar la url del enlace.
3.2- Seleccionar en qué ventana quiere que se abra la página del enlace. Por ejemplo, si es un enlace externo seleccionar"open in new window (_blank)" para que se abra en una ventana nueva.
3.3- Colocar el título del enlace (usualmente el mismo que el nombre / anchor del enlace).
3.4- Seleccionar alguna clase / estilo (opcional).
3.5- Cuando los campos necesarios ya están completos debe hacer click en "Insert"

(imagen 51)

Crear Texto con Viñetas:

1- Separar cada frase / texto que se quiere con viñetas (del texto pegado en el campo de trabajo) colocando el cursor al final y hacer "Enter".

2- Luego se selecciona todo el texto separado en el punto 1.

3- Hacer click en el ícono

(imagen 52)

Otras aplicaciones del campo de herramientas:

(imagen 53)

a- Texto en Negrita
b- Texto en Cursiva
c- Texto Subrayado
d- Texto Tachado
e- Texto Alineado a la Izquierda
f- Texto Centrado
g- Texto Alineado a la Derecha
h- Texto Justificado
i- Estilos (estos estilos se toman desde las CSS del template de Joomla)
j- Formatos (párrafo, h1, etc)
k- Fuente tipográfica -arial, times new roman, etc- (se recomienda no usar, ya que el estilo tipográfico se toma directamente desde las hojas de estilos CSS del template que se está utilizando)

(imagen 54)

l- Viñetas sin orden
m- Viñetas con orden (numérico)
n- Sangría de Texto
ñ- Anular Sangría de Texto
o- Crear un enlace
p- Eliminar un enlace
q- Editar / Agregar Parámetros de Imagen
r- Ver Campo de Trabajo en Códio HTML

Ten en cuenta nuestros servicio de hosting con Joomla, diseño web con Joomla!, o aprende rápidamente a trabajar vos mismo con nuestro curso de gestión web con Joomla!

< Prev		Próximo >