Objeto de texto

Paso 3 - Creación de la página >

Objeto de texto

Previous pageReturn to chapter overviewNext page
Mostrar/ocultar el texto oculto

Aparte de las imágenes, de los vídeos y de las animaciones que se pueden utilizar, en la mayor parte de los casos, los contenidos principales de un Sitio son transmitidos a través de textos.

Escribir para internet no es lo mismo que escribir pensando en tener que ir luego a la imprenta: cada medio tiene sus peculiaridades e Internet se distingue principalmente por el soporte (el monitor de un ordenador o la pantalla de un dispositivo móvil), la modalidad de lectura que sugiere (más parecida a un rápido barrido que a una lectura secuencial) y la disponibilidad de un número potencialmente ilimitado de alternativas (tengamos en cuenta la cantidad de sitios web que se ocupan del mismo tema).

Para atraer la atención de un lector, incitarlo a leer y, en el mejor supuesto, convencerlo de los beneficios de aquello que estamos proponiendo, es necesario que los contenidos textuales sean escritos de modo que sean apropiados para la publicación en internet. Ante todo deben ofrecer contenidos interesantes y además deben hacerlo de manera concisa, no confusa y eficaz. Es preferible que lo que se expone esté dividido en párrafos breves, ya sea porque es más fácil de comprender, que porque visualmente resultará menos compacto y oprimente. Para aumentar la facilidad de lectura de los textos es importante prestar atención a la tipografía, es decir, el ajuste que se da a los caracteres para títulos, partes resaltadas, cuerpo principal, pies de texto, etc.

Reflexionar sobre estos aspectos y cuidar la redacción de los textos es sin duda muy importante para conseguir crear un sitio web que pueda ser juzgado positivamente por quienes lo visiten. Nada como un contenido poco interesante, expresado en modo aproximado y con frases llenas de errores gramaticales o de ortografía, lleva a etiquetar un sitio web como descuidado e inmerecedor de una segunda visita.

Hechas estas breves pero obligadas consideraciones sobre el tema de la escritura para la web, WebSite X5 permite componer los Textos necesarios mediante un editor interno incluido y proceder a darle el formato deseado. Obviamente también es posible tomar textos ya creados con otros programas e introducirlos mediante una simple operación de copiar y pegar.

Además, WebSite X5 da la posibilidad de crear un texto configurando su visualización en pestañas (o tabs): un modo práctico y eficaz para organizar y presentar mucha información incluso en el espacio relativamente reducido de una página web.

 

Los comandos necesarios para proceder a la creación de un Objeto Texto están articulados en las siguientes secciones: Contenido y Estilo de las fichas.

Pulsar para expandir/reducirReferencia: Los comandos de la sección Contenido

Esta sección pone a disposición un editor mediante el que es posible proceder a introducir un texto y configurar su formato. El editor de texto se compone de una Barra de Herramientas superior, un área de trabajo en el que introducir el texto y, al fondo, una serie de lengüetas correspondientes a las fichas de texto que se quiere activar.

La Barra de Herramientas del editor de texto ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado. En este caso, antes de ser pegado, al texto se le quita todo el formato que tuviera asociado originalmente y asume el definido en el editor.

Insertar especial

Pega el texto que ha sido cortado o copiado con los comandos Cortar y Copiar. El texto pegado mantiene todo el formato original.

Usando los comandos Cortar, Copiar y Pegar se pueden retomar pasajes de archivos de texto creados con anterioridad en otros editores.

Cancelar [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar enlace [CTRL+L]

Establece un enlace hipertextual en la/s palabra/s seleccionada/s. En la ventana que se abre se pueden definir los ajustes del Enlace.

Insertar imagen

Inserta una imagen (en formato .JPG, .GIF, .PNG, .BMP) dentro del texto.

Pulsando sobre el triangulito que hay en el botón Insertar imagen se despliega un submenú con los siguientes elementos: Imagen desde archivo... y Imagen desde la Librería Online....

Mediante la ventana que se abre con el comando Imagen desde la Librería Online... se muestra una colección de más de 400.000 imágenes de libre distribución entre las que es fácil elegir las que se desea añadir al Proyecto.

El tamaño de las imágenes insertadas en el Objeto Texto se ajusta automáticamente si es superior al de la celda de la Rejilla de maquetación. Además, es posible cambiar libremente el tamaño las imágenes insertadas usando las manillas de selección. Para diseños de página particulares es aconsejable en cualquier caso recurrir al Objeto Imagen.

Pulsando con el botón derecho del ratón sobre la imagen añadida se abre un menú contextual que ofrece los comandos necesarios para efectuar las operaciones de cortar, copiar y pegar; además del botón para abrir la ventana Propiedades de Imagen.

Activar código HTML

Permite introducir directamente el código HTML dentro de la página de texto. En modalidad HTML, los caracteres "<" y ">" no son interpretados como "menor" y "mayor"; lo que es introducido entre ellos es interpretado como un tag HTML.

Ajustes para el RollOver

Aplica el efecto RollOver al texto, pasándolo de estático a deslizable. En la ventana que se abre se pueden definir los ajustes del RollOver.

Adapta al ancho de la celda

Simula en el editor el aspecto que el texto asumirá en relación al tamaño de la celda de la Rejilla de maquetación que lo contiene.

Fondo claro/oscuro

Define un color claro u oscuro para el fondo del Editor: de esta manera es más sencillo, por ejemplo, redactar los textos que deben ser de color blanco para tener un contraste adecuado respecto al fondo establecido en la plantilla aplicada.

 

Elección de fuente - Tamaño de la fuente

Configuran el tipo de carácter que se empleará y el tamaño.

El menú desplegable propone todas las fuentes instaladas en el ordenador en que se está trabajando, más todas las Fuentes Web y las Fuentes Google integradas mediante la ventana Preferencias | Fuente Web. Los tipos de fuente se distinguen fácilmente gracias a los iconos asociados:

Google Fonts: fuentes integradas mediante la ventana Preferencias | Fuente Web de WebSite X5 y vinculadas con el servidor Google.

Fuentes Web: fuentes integradas mediante la ventana Preferencias | Fuente Web de WebSite X5 y publicadas en el servidor web del sitio.

Safe Fonts: fuentes presentes prácticamente en todos los dispositivos y para las que por consiguiente no es necesaria ninguna publicación.

Negrita [CTRL+B] - Cursiva [CTRL+I] - Subrayado [CTRL+U] - Tachado [CTRL+T]

Ponen en negrita, cursiva, subrayado y tachado el texto seleccionado.

Color del texto - Color del fondo del texto

Especifican el color que se aplicará al texto seleccionado o al fondo del texto seleccionado.

Quitar formato

Quita posibles ajustes de formato asociados al texto seleccionado para volverlo más conforme al estilo definido en Estilo de los textos.

Listado de viñetas - Lista numerada

Crean respectivamente una lista de viñetas y una lista numerada de elementos. Mediante la tecla TAB se pueden encastrar los elementos de la lista a fin de crear subniveles.

Reducir sangría / Aumentar sangría

Aumentan y reducen la sangría del párrafo seleccionado.

Alinear a la izquierda - Centrar - Alinear a la derecha - Justificar

Alínean a la izquierda, al centro, a la derecha o justifican el texto seleccionado.

Disponer texto a la derecha - Disposición normal - Disponer texto a la izquierda

Activos cuando se selecciona una imagen insertada en el texto, definen la posición del texto respecto a la imagen, haciendo que discurra al lado derecho/izquierdo de la imagen o dejando que la imagen permanezca insertada en el fluir del texto como si fuese una palabra más.

 

En el área de trabajo del editor de texto, pulsando con el botón derecho del ratón es posible abrir un menú contextual que ofrece los siguientes comandos: Cancelar, Cortar, Copiar, Pegar, Insertar especial y Seleccionar todo.

Si este menú contextual se abre pulsando sobre una imagen insertada en el texto, este presenta también el comando Propiedades de Imagen mediante el que es posible abrir la ventana homónima Propiedades de Imagen.

En el fondo del área de trabajo se encuentran las lengüetas o pestañas correspondientes a las diferentes fichas de texto creadas.

Por defecto existe una única lengüeta con el nombre "Ficha 1": si no se añaden más pestañas, no se activará la visualización por pestañas para el texto. Para añadir una nueva ficha y trabajar en ella basta pulsar el botón que está a la derecha de las lengüetas. Como alternativa también se puede hacer clic con el botón derecho del ratón sobre una de las lengüetas usar los comandos del menú contextual que se abre:

Añadir ficha: añade una nueva lengüeta (activando la correspondiente ficha de texto) y da la posibilidad de asignarle un nombre en la ventana que se abre al efecto.
Cambiar el nombre de la ficha activa...: abre la ventana para cambiar el nombre de la lengüeta activa.

Es importante nombrar adecuadamente las diferentes lengüetas, ya que los nombres asignados se toman automáticamente para conformar los botones de navegación entre fichas de texto en el caso de elegir Fichas - Horizontal o Fichas - Vertical como Modo de visualización.

Eliminar la ficha activa: eliminoa la lengüeta activa y la correspondiente ficha de texto.
Desplazar la ficha activa a la izquierda / Desplazar la ficha activa a la derecha: cambiando el orden de las lengüetas, desplazando la activa hacia izquierda o derecha. También es posible emplear el Drag&Drop, arrastrando con el ratón una lengüeta y dejándola en la posición deseada.
Pulsar para expandir/reducirReferencia: Los comandos de la sección Estilo de las fichas

A través de los comandos de esta sección, activa solo si se ha añadido al menos una segunda ficha de texto, es posible definir el estilo gráfico y el modo de visualización de las fichas de texto creadas.

En primer lugar es necesario configurar el Modo de visualización de las fichas escogiendo entre los que están disponibles:

Fichas - Horizontal: del mismo modo que en un fichero tradicional, los contenidos se presentan en fichas que se pueden hojear usando las lengüetas dispuestas horizontalmente, el la parte superior o inferior.

Fichas - Vertical: como en una agenda en papel, los contenidos se presentan en fichas que se pueden hojear usando las lengüetas dispuestas verticalmente, en el lado derecho o izquierdo.

Presentación: como en una presentación de imágenes, las fichas de texto se pueden hacer pasar usando las flechas laterales, pero no hay botones de navegación con el nombre de las fichas.

Según el Modo de visualización establecido, se ofrecen diferentes opciones para configurar.

Para los tipos Fichas - Horizontal y Fichas - Vertical se puede definir el aspecto gráfico de los Botones de navegación usando las siguientes opciones:

Posición: establece dónde deben situarse los botones para navegar entre las diferentes fichas de texto, si en la parte superior o inferior para el tipo Fichas - Horizontal, o a la derecha o izquierda para el tipo Fichas - Vertical.
Estilo: define la forma de los botones para navegar entre las diferentes fichas de texto.
Fuente: define el tipo de carácter, el estilo y el tamaño del texto.
Tamaño: configura el tamaño en pixels del ancho y del alto de los botones de los paneles. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

También para los tipos Fichas - Horizontal y Fichas - Vertical se pueden también configurar las opciones de la sección Color:

Texto/Fondo del sitio/Color Borde: definen los colores del texto, del fondo y del borde de los botones para la navegación entre las diferentes fichas de texto.
Texto activo/ Fondo activo: definen los colores del texto y del fondo que asumirán los botones de navegación entre fichas de texto al pasar el ratón por encima.

Para el tipo Presentación, en cambio, las opciones disponibles para definir el aspecto gráfico de los Botones de navegación son:

Visualización: establece si los botones para navegar entre las diferentes fichas de texto deben ser Siempre visibles, No visibles (y contemplar la activación automática) o Visibles mediante el paso del puntero del ratón.
Estilo: define el aspecto gráfico de los botones para navegar entre las diferentes fichas de texto, eligiendo entre las imágenes propuestas.

Por último, para todos los tipos de visualización es posible configurar las opciones de la sección General:

Altura fichas: cuando está activada, ajusta el tamaño en pixels de la altura de las fichas de texto.

El objeto toma automáticamente la altura del contenido más largo entre los que han sido introducidos en las diferentes fichas: fijando elAltura fichas con la opción al efecto se mostrará la barra de desplazamiento en todas las fichas con contenidos de longitud superior.

Reproducción automática [seg]: cuando está activada, configura el intervalo de tiempo en segundos que debe transcurrir para que se active automáticamente el paso a la siguiente ficha de texto.
Margen interior: establece el valor en pixels del margen, es decir del espacio entre el borde y el contenido de la fichas de texto.
Efecto: establece el efecto de transición con el que se muestran las fichas de texto.

 

 


Best practice:

-

Cómo utilizar las Fuentes Web


Profundización:

-

Fuentes estándar y Fuentes Web