3. Añadir contenidos

La edición de texto no está sólo limitada al editor Kupu, los usuarios pueden utilizar HTML u otros tipos disponibles: Markdown, Textile, Structured Text y Restructured Text. Estos formatos están pensados para crear páginas con rapidez y son útiles cuando hay que crear gran cantidad de contenido. Por ejemplo, para poner un texto en negrita utilizando structured text hay que rodear el texto con los símbolos '**', es decir,  **Este texto está en negrita**. Una vez conocida la sintaxis es más rápido utilizar los símbolos que pulsar sobre un botón con el ratón.

El editor visual se desactiva en las preferencias personales apareciendo en su lugar un cuadro de texto.

Para comprender este apartado se supone que el usuario está habituado a uso básico procesadores de textos, por tanto, la mayoría de los iconos que acompañan a los botones de la figura 3.5 deberían ser familiares.

Figura 3.5. Editor Kupu.

Negrita e Itálica

Es simple, sólo hay que seleccionar el texto al que se desea aplicar el formato y pulsar el botón.

Alineación de texto:

Afecta al párrafo donde se encuentre el cursor, si se desea aplicar la alineación a varios párrafos se deben seleccionar todos con el ratón. 

Listas numeradas y con bolos

Las listas numeradas y con bolos se aplican por líneas, es decir, una vez activado se debe saltar de línea con la tecla entrar para que aparezca un nuevo bolo u otro elemento de la lista. En las listas numeradas aparece la barra de herramientas del editor un nuevo control que permite seleccionar diferentes tipos de numeración en la lista (ver figura 3.6).

Listas de definiciones

Las listas de definiciones son ideales para descripciones de elementos del tipo: palabra o frase - párrafo explicativo. Por ejemplo, esta descripción de los controles del editor que está leyendo es una lista de definiciones. Para crearlos debe prestar atención a la siguiente guía:

1. Situar el cursor en una nueva línea
2. Pulsar el botón de lista de definiciones (ver figura 3.5)
3. Ahora puede escribir la palabra clave o frase corta, la cual resalta del resto del texto (habitualmente en negrita)
4. Pulsar la tecla entrar (salto de línea) y podrá escribir el párrafo de definición, el cual queda sangrado a la derecha
5. Tras insertar otro salto de línea observará que de nuevo puede insertar otro término, por tanto está de nuevo en el punto (3)
6. Para finalizar la lista de definiciones debe insertar dos saltos de línea seguidos

Sangrados

El sangrado consiste en aumentar la distancia entre un párrafo de texto y el margen izquierdo. El sangrado puede ser múltiple, es decir, utilizar varias veces el botón Aumentar sangrado () así, aumenta el nivel de sangrado con cada pulsación en éste botón. El sangrado disminuirá cuando se utilice el botón Disminuir sangrado. Por otro lado, el sangrado incluye una un formato para facilitar al lector reconocer el nivel de sangrado y, se puede observar en el ejemplo siguiente:

Sangrado de primer nivel

Sangrado de segundo nivel
Sangrado de segundo nivel

Sangrado de primer nivel

Sangrado de segundo nivelo

Sangrado de tercer nivel
Sangrado de tercer nivel

Sangrado de segundo nivel

Sangrado de primer nivel

3.4 Imágenes

El editor visual permite insertar imágenes durante el proceso de edición en el lugar donde esté el cursor utilizando el botón Insertar imagen . Tras pulsarlo aparecen los siguientes controles superpuestos al documento:

Figura 3.6 Insertar imagen

La finalidad de la ventana mostrada (figura 3.6) es listar las imágenes que están ya en el sitio Web para que el usuario escoja la que desea insertar en su documento. Estas imágenes ya están en el sitio Web al haber sido subidas mediante el procedimiento explicado en el apartado 3.2. Añadir imágenes de este mismo documento. De todas formas, se verá que es posible subir una imagen desde esta misma ventana de insertar imagen.

La ventana de la figura 3.6 está dividida en tres columnas, donde la primera contiene algunos enlaces a sitios como la carpeta actual de trabajo, elementos recientes y su carpeta personal. Estos enlaces pueden variar según la configuración que establezca el administrador del sitio Web. En la segunda columna se muestra el listado de figuras existentes en la carpeta que se está navegando en esta ventana de insertar imagen. Es posible buscar imágenes por otras ubicaciones del sitio Web, para ello se puede utilizar la lista de enlaces marcados en color rojo en la figura 3.6 que nos marcan la ubicación actual. De hecho, si se pulsa en el primer enlace de esta lista Home estaríamos navegando desde la raíz del sitio Web, pudiéndose llegar a cualquier ubicación. Incluso en la parte derecha de la ventana hay un cuadro de búsqueda que facilita la búsqueda de imágenes por nombre en el sitio Web.

Lo habitual es tener la imágenes en la carpeta actual en la cual se trabaja y como se muestra en la figura 3.6, si se selecciona una imagen del listado en la tercera columna se muestra el título de la imagen, una vista previa y algunos controles para colocar la imagen en el texto. Estos controles permiten seleccionar:

• Alineación de la imagen con tres posibilidades. La alineación en línea es la más simple al insertar la imagen justamente donde esté el cursor, en cambio, tanto la alineación derecha como izquierda colocan la imagen flotante de forma y el texto se distribuye alrededor de la imagen.
• El gestor de contenido genera para cada imagen diferentes tamaños optimizados para el sitio Web, se recomienda utilizarlos, aunque una vez insertada la imagen en el texto podrá redimensionarla con el ratón.
  

Figura 3.7. Redimensionar imagen.

También es posible subir una imagen desde este mismo diálogo utilizando el botón subir imagen aquí, es este caso se debe indicar el título de la imagen y el fichero en nuestro ordenador.

Para terminar este apartado se hacen la siguientes recomendaciones:

• Abusar de la alineación a la izquierda y derecha cuando se tienen varias imágenes en un mismo documento produce unos efectos inesperados e indeseados en la colocación de las imágenes. Si está realizando un documento del estilo de este manual se recomienda seguir este procedimiento:

1. Insertar una nueva línea antes de utilizar el botón insertar imagen
2. Insertar la imagen con a alineación en linea
3. Seleccionar la imagen y utilizar el botón centrar
4. Opcionalmente puede añadir el rótulo de la imagen introduciendo una nueva línea tras la imagen

• No redimensionar en pantalla la imagen, se debe intentar seleccionar el tamaño adecuado en el diálogo de inserción de imágenes de la figura 3.6. Si necesitara otro tamaño de imagen, se recomienda utilizar un programa de edición de imágenes en su ordenador antes de transferir la imagen al sitio Web. En el apartado 3.2. Añadir imágenes se detallaba el tratamiento de imágenes.
  

3.5. Enlaces internos

Los enlaces internos sirven para enlazar algún trozo de texto de la página con otro contenido existente en el sitio Web (página, enlace, carpeta, etc.). Para insertar dicho enlace hay que utilizar el botón rotulado en la figura 3.5 con enlace interno: . Existen dos formas de añadir el enlace:

1. Se selecciona el texto y, con el texto seleccionado utilizando el botón el texto seleccionado apuntará hacia el elemento del sitio Web elegido.
2. Sin seleccionar ningún texto se utiliza el botón y, tras seleccionar el elemento que queremos enlazar, automáticamente se insertará un texto enlazado hacia el destino. Este texto insertado automáticamente es título del elemento destino del enlace.

Figura 3.8. Insertar enlace interno.

3.6. Enlaces externos

Del mismo modo que es posible enlazar un trozo de texto con un elemento del portal también es posible enlazar texto con alguna página Web externa al sitio. Utilizando el botón de enlace externo se inserta el enlace pero antes de utilizarlo se debe seleccionar el texto que se desea enlazar. La ventana de inserción del enlace tiene la opción de previsualizar la dirección de Internet escrita para evitar errores.

Figura 3.9. Insertar enlace externo.

Antes de pulsar el botón registrar asegúrese de no haber duplicado el texto http:// ya que tras pulsar el botón enlace externo dicho texto ya está escrito.

3.7. Anclas

Las anclas son marcas de posición en un documento y están basadas en los formatos aplicados durante la escritura: cabecera (heading), subcabecera (subheading) o algún otro estilo existente en el documento. Las anclas son útiles cuando un documento es extenso y se hace una tabla de contenidos o se referencia alguna parte del propio texto como se muestra en el siguiente ejemplo:

Figura 3.10. Ejemplo de texto enlazado con anclas.

En la figura 3.10 se han utilizado anclas para enlazar a las cabeceras del documento. Es necesario escribir el documento utilizando los estilos existentes en el cuadro de estilos, en el ejemplo, cabeceras y subcabeceras. Una vez escritas estas cabeceras utilizando el botón ancla se puede enlazar cualquiera de ellas mediante el diálogo:

Figura 3.11. Listado de anclas para un estilo.

En este diálogo se usa la primera columna para seleccionar el tipo de párrafo hacia el que enlazar y en la columna derecha se mostrará todos los párrafos existentes con dicho estilo. Tras seleccionar uno y utilizar el botón registrar se inserta el texto enlazado.

3.8. Tablas

El editor también facilita la creación de tablas utilizando el botón insertar tabla . En el diálogo de inserción de tablas se puede especificar el número de filas y columnas, aunque posteriormente se podrán añadir o eliminar las que se deseen.

Figura 3.12. Insertar tabla.

La opción clase de tabla afecta al aspecto visual de la tabla, según la clase de tabla seleccionada la apariencia cambiará. Además si selecciona la opción Crear Títulos la primera fila de la tabla tendrán una apariencia diferente destacando sobre el resto de filas. Observe los siguientes ejemplos cada uno con un formato:

Una vez insertada la tabla seleccionando una celda aparecen diversos controles en la tabla tal y como se muestra en la figura 3.13. Igual que con las imágenes los controles cuadrados permiten cambiar el tamaño de la tabla. Además de los controles de tamaño en la celda seleccionada aparece dos controles adicionales. Cada uno de ellos con tres marcas: un aspa central y dos triángulos alrededor tal.  El dicho control permite insertar y eliminar tanto filas como columnas pulsando con el ratón en ellos (ver figura 3.13).

Figura 3.13. Editar tabla.

3.9. Editor HTML

Existe un editor HTML (botón ) para los usuarios avanzados que deseen editar directamente el código HTML del documento. Saber HTML ayuda a mejorar la apariencia de los documentos incluidos en el sitio Web, pero con el editor integrado no es necesario conocer HTML para construir páginas Web.

Cuando entra en modo de edición HTML puede regresar al editor volviendo a pulsar el botón HTML.

Nota sobre la edición HTML: El gestor de contenido filtra aquellos contenidos no considerados seguros, por ejemplo, java scripts, applets. Incluso ciertas etiquetas de formato no son permitidas para mantener la homogeneidad del sitio Web (por ejemplo cambiar colores de fuentes o fondos). Estas reglas de filtrado pueden variar según la configuración establecida por el administrador del sistema, es decir, puede que en su sitio Web si permitan incluir applets o cambiar el color de fondo de un párrafo.

3.10. Estilos

Figura 3.14. Estilos.

El menú desplegable de estilos permite establecer la apariencia de un bloque de texto. En la figura 3.14 se muestra un ejemplo donde aparece un listado de estilos aplicables al texto seleccionado. No siempre el listado de estilos es el mismo, depende del bloque de texto que se esté editando. Concretamente, si despliega los estilos en un párrafo de texto la lista que obtendrá es más reducida que la mostrada en la figura 3.14.

El listado de la figura 3.14 se obtuvo tras insertar una tabla y seleccionar una celda de la tabla. En esta situación aparecen estilos adicionales: Table elements, Plain Cell, Odd row, Even row y Heading cell. Por tanto, la lista de estilos dependerá de la parte del documento que se esté editando.

Otro detalle en la falta de traducción en la lista de estilos aunque, dependiendo de la configuración establecida puede encontrarse la lista traducida al castellano o incluso una lista diferente establecida por el administrador del sitio Web. El listado de la figura 3.14 es el habitual en el editor siendo la traducción y el uso recomendado el mostrado en la siguiente tabla:

Además de los descritos en la tabla anterior en la figura 3.14 aparecen estilos aplicables a tablas que permiten formatear los elementos seleccionados con el ratón en las tablas: filas, columnas o celdas de una tabla. Se describen a continuación:

3.11. Ampliación / Zoom

El botón zoom  amplia el cuadro de edición a toda el área disponible en el navegador. Es útil cuando el documento es extenso y necesita más área de edición, cuando trabaje en este modo no se olvide utilizar cada cierto tiempo el botón Guardar , de lo contrario si hubiese algún fallo de red o en el navegador podría perder el documento.

Para volver al tamaño normal debe volver a usar el mismo botón.

Habitualmente se suelen incluir archivo PDF, Word,  zip etc. Según la configuración establecida en el sitio Web, estos archivos podrán ser indexados internamente para que aparezcan en las búsquedas dentro del portal. Para saber si se dispone de esta funcionalidad debe consultar al administrador.