webcontrol Manual de Programador Usuario Portal web Universidad de Cádiz un producto de
Lea esta sección antes de empezar... 5 Presentación... 5 Precauciones... 6 Cómo prevenir los fallos de funcionamiento... 6 Guía de funcionamiento... 7 Validación de usuario... 7 Estructura del menú de secciones y gestiones o módulos.... 9 Módulos de acceso múltiple... 9 Módulos de acceso simple... 10 Ciclo de trabajo en una gestión o módulo... 11 Búsqueda... 11 Listado de resultados... 12 Ficha de un registro... 14 Gestiones o módulos del webcontrol... 17 Administración... 17 Gestión de estructura del portal (castellano e inglés)... 17 Gestión de meta tags... 19 Gestión de destinatarios... 19 Gestión de contenidos de sistema... 20 Contenidos... 21 Imágenes... 21 Documentos... 24 Flash... 25 Vídeos... 26 Gestión de contenidos generales... 28 EDITOR DE TEXTOS... 35 Comenzando a manejar el editor de textos... 35 Nociones generales... 36 Partes del editor de textos... 36 Manejo básico del editor de textos... 37 Controles del editor de textos... 39 2
Nuevo texto... 39 Guardar... 39 Previsualizar... 39 Código fuente... 40 Buscar... 40 Reemplazar... 41 Deshacer/Rehacer... 41 Cortar/Copiar... 41 Pegar con formato/como texto plano/ desde Word... 41 Quitar formato/limpiar código... 42 Negrita/Cursiva... 42 Insertar plantillas personalizadas... 42 Insertar plantillas predefinidas... 43 Tablas... 52 Encabezados... 55 Etiquetas semánticas... 56 Listas... 57 Imágenes... 59 Películas flash... 61 Aplicaciones... 62 Enlace a contenidos... 62 Enlace a documentos... 64 Enlace a punto de menú... 65 Enlaces generales... 66 Quitar enlaces... 67 Anclas... 68 Caracteres especiales... 68 GLOSARIO... 70 Principios básicos de accesibilidad... 73 Imágenes... 73 Imágenes decorativas... 73 Imágenes sencillas o complejas... 74 Encabezados... 74 3
Listas... 75 Tablas... 76 Marcado semántico (Etiquetas)... 76 Enlaces... 77 Enlaces externos... 78 4
Lea esta sección antes de empezar Presentación webcontrol es un gestor de contenidos o Content Management System (CMS) abierto y flexible destinado a agilizar la administración de la información de portales web. Permite gestionar totalmente la estructura y contenidos de un portal sin necesidad de conocimientos técnicos, con una completa gestión de usuarios y workflows de generación y publicación. Es una solución integral de portal construida sobre una metodología de desarrollo fiable y ágil que respeta los estándares de presentación de información (XHTML, CSS2) y normas de accesibilidad (WAI), separando completamente información de presentación. La capa de presentación es completamente independiente de diseño. webcontrol incluye funcionalidades de: Gestión de usuarios, grupos y perfiles Gestión de estructura Generación de contenidos mediante un potente editor Workflow de publicación Gestión documental y de ficheros multimedia Comunicación interna Estadísticas de tráfico con gráficas integradas 5
Precauciones El usuario de webcontrol tiene que asumir las siguientes precauciones: Evite compartir su usuario y clave de acceso con otras personas. En caso contrario, la información del portal de la que usted se hace cargo puede estar expuesta a alteraciones ajenas a su voluntad. Por razones de seguridad, el tiempo de sesión en webcontrol es limitado (en torno a 20 minutos). Para evitar que dicho tiempo caduque, guarde con frecuencia los datos sobre los que está trabajando en ese momento. Recuerde borrar con frecuencia los archivos temporales de su navegador. En ciertas ocasiones, los cambios realizados pueden no verse reflejados en pantalla. Cómo prevenir los fallos de funcionamiento Mantenga actualizado su navegador. webcontrol es 100% compatible con Internet Explorer 5.5 o versiones superiores. No obstante, está evolucionando para funcionar con otros navegadores (Firefox, Ópera, etcétera). La tecla enter (o Intro) está desactivada a la hora de realizar búsquedas, inserciones o modificaciones. Es necesario hacer clic en el botón de búsqueda o guardado para hacer efectiva la operación deseada. 6
Guía de funcionamiento Manual de usuario Validación de usuario El acceso a webcontrol se realiza a través de la dirección que le proporcionen durante la implantación del proyecto. En esta pantalla el usuario ha de introducir el usuario y contraseña que le hayan sido facilitados. Una vez comprobado y garantizado el acceso del usuario, el sistema mostrará su panel de control personalizado. 7
1. En la cabecera del panel de control se muestran el nombre y apellidos del usuario, la descarga del manual, enlace al correo electrónico de asistencia técnica y cierre de sesión. 2. A la izquierda del panel de control se muestra un menú de secciones y gestiones (también llamados módulos) que variará en función de los permisos que le hayan sido otorgados al usuario. 8
Estructura del menú de secciones y gestiones o módulos. Los módulos están agrupados en secciones, y se citan a continuación: Administración. Contenido. Aplicaciones. Formularios dinámicos. Al acceder a cualquier módulo, su nombre aparece en rojo en el menú de la izquierda y en blanco en la esquina superior derecha de la pantalla. Atendiendo a las modalidades de acceso, webcontrol dispone de módulos de acceso múltiple y de módulos de acceso simple. Módulos de acceso múltiple El usuario que acceda a un módulo de este tipo lo hace o bien con el perfil de generador o bien con el perfil de publicador. La siguiente tabla muestra la relación de tareas que puede realizar un usuario en función de su perfil: TAREAS MÓDULO de ACCESO MÚLTIPLE Perfil de GENERADOR Perfil de PUBLICADOR Inserta datos Modifica datos Elimina datos Publica / oculta datos 9
Como se observa en la tabla, un usuario con perfil de generador no puede ni eliminar ni guardar datos con el estado publicado, pudiendo simplemente almacenarlos en los dos siguientes estados: Modificados, si los datos no son los definitivos, sino que van a sufrir modificaciones antes de su publicación. Pendientes de publicar, si los datos están preparados para ser publicados por un usuario con el perfil de publicador. Por otra parte, un usuario con perfil de publicador realiza las mismas tareas que un generador, y además elimina y guarda datos con el estado publicado. Por lo tanto, un publicador actuará como supervisor de los datos que haya introducido un generador. Análogamente, existe el perfil de administrador. Los usuarios con este perfil se encargan de gestionar todos los módulos de webcontrol con perfil de publicador. Módulos de acceso simple El usuario con acceso a un módulo de este tipo no necesita tener perfiles para gestionarlo. Una vez almacenados los datos podrán ser consultados desde el front del portal. 10
Ciclo de trabajo en una gestión o módulo El ciclo de trabajo de un módulo está compuesto generalmente por búsqueda, listado de resultados y ficha de un registro. Búsqueda Genera listados de registros en función de los criterios utilizados para discriminar los datos de un módulo. Estas son las partes de las que consta la pantalla de búsqueda: 1 2 3 4 5 1. Acceso a la ficha de un nuevo registro. Este botón es opcional y depende del funcionamiento estipulado para cada módulo. 2. Título de un criterio de búsqueda por el que se puede discriminar. 3. Campo donde escribir el patrón por el que se desea discriminar la búsqueda. Si por ejemplo, el usuario teclea a, se mostrará un listado con todos los usuarios que tengan a o A en su nombre. 4. Ordenación del listado de resultados. 5. Al pulsar el botón Buscar se ejecuta la búsqueda según los criterios establecidos. 11
Listado de resultados En función del perfil del usuario y su modalidad de acceso al módulo, hay distintos listados de resultados: Un usuario con acceso a un módulo de acceso simple puede realizar todas las tareas estipuladas para cada registro. 2 1 3 4 1. Paginación de resultados. Haciendo clic en una horquilla de resultados o en los botones anterior o siguiente se cambia de página de resultados. 2. Dato identificativo de un registro. 3. Acceso a la ficha de un registro para modificar sus datos. 4. Eliminación de un registro. Este botón es opcional. Un usuario con perfil de generador en un módulo de acceso múltiple no puede borrar registros, sólo modificar sus datos. Cada registro tiene un color de fondo en función de su estado de almacenamiento. 12
Un usuario con perfil de publicador en un módulo de acceso múltiple. 1 2 1. Un registro publicado puede despublicarse haciendo clic en el botón ocultar. 2. Un registro pendiente de publicar puede publicarse haciendo clic en el botón publicar. 13
Ficha de un registro Muestra y permite insertar o modificar la información de un registro. Según el perfil del usuario y su modalidad de acceso al módulo, hay distintas fichas: Un usuario con acceso a un módulo de acceso simple puede realizar todas las tareas de un registro. 1 2 3 4 5 1. Botón para volver al listado recuperando la búsqueda desde la que se accedió a la ficha del registro. 2. Acceso a la ficha de un nuevo registro. Este botón es opcional y depende del funcionamiento estipulado para cada módulo. 3. Título de un elemento de la ficha. 4. Campo donde escribir la información. 5. Botón guardar, tras pulsar el botón, los datos de este registro estarán publicados, es decir, podrán ser consultados desde el front del portal. 14
Un usuario con perfil de generador en un módulo de acceso múltiple puede almacenar los datos o bien como modificados o bien como pendientes de publicar. 1 1. Estado del registro, muestra su estado actual, quien lo ha creado y quien ha hecho la última modificación. Un usuario con perfil de publicador en un módulo de acceso múltiple puede almacenar los datos como modificados, pendientes de publicar o publicados. 15
Al guardar la ficha de un registro, webcontrol realiza una serie de comprobaciones para determinar si los datos proporcionados por el usuario son válidos (no vacíos, de una longitud no superior a un número determinado de caracteres, alfanuméricos, numéricos, etcétera ). Si no lo son, muestra un mensaje de error instando al usuario a adecuar la información aportada. Hasta que los datos sean válidos, la ficha de un registro no será almacenada en webcontrol. 16
Gestiones o módulos del webcontrol Se detalla a continuación el funcionamiento de los módulos del webcontrol agrupados por secciones. Administración Dentro de Administración nos encontramos con: Estructura general. Estructura general en inglés. Meta tags. Destinatarios. Secciones para contenidos. Contenidos de sistema. Estructura de sistema. Gestión de estructura del portal (castellano e inglés) Este módulo del webcontrol permite asignar un contenido o aplicación a cada punto de menú, es decir, lo que se mostrará al acceder a cada uno de ellos, independientemente de su nivel. La primera pantalla de la gestión de estructura consta de un listado con los puntos principales. Los puntos de menú interiores aparecen tras expandir cada punto de menú principal. Se pueden insertar, modificar y eliminar puntos de menús principales y secundarios, además de alterar su orden de aparición en el front. Al acceder a la ficha de un punto de menú se puede gestionar los siguientes datos, siendo obligatorios los que están acompañados de un asterisco *: * Nombre. Etiqueta (texto alternativo): Al pasar por encima del nombre del punto de menú aparecerá el texto especificado en este campo. 17
Recurso a enlazar: En el front del portal, al hacer clic sobre el punto de menú se carga un recurso que puede ser de dos tipos: o Contenido: Un registro de la gestión de contenidos almacenado con el estado publicado. o Aplicación: Un programa con presentación y funcionamiento predefinidos (noticias, contactos, etcétera...) Visible: Permite ocultar o mostrar el punto de menú. Un nuevo punto de menú no es visible por defecto. 18
Gestión de meta tags Los meta tags permiten mantener actualizada la información referente al autor, el copyright, la descripción y las palabras clave del portal. Esta información puede ser modificada, pero no se puede borrar. Gestión de destinatarios Ciertas aplicaciones del portal conllevan la generación y envío de mensajes a cuentas de correo electrónico de los responsables del proyecto. Gracias a este módulo se pueden administrar las cuentas de correo electrónico receptoras de dichos mensajes. Al acceder a la ficha de un destinatario se pueden gestionar los siguientes datos, siendo obligatorios los que están acompañados de un asterisco *: Sección: Cuyo valor está predeterminado y no es modificable. Cuenta de correo electrónico 1: o Activada: Para habilitar la cuenta de correo electrónico 1 como receptora de mensajes. Cuenta de correo electrónico 2. o Activada: Para habilitar la cuenta de correo electrónico 2 como receptora de mensajes. Es necesario que al menos una de las cuentas de correo electrónico esté habilitada para recibir mensajes. El usuario no puede generar ni eliminar nuevos destinatarios, sólo puede modificar los registros existentes. Gestión de secciones de contenidos Los contenidos de un portal muestran información de muy diversa índole que en ocasiones es generada por usuarios de departamentos totalmente independientes dentro de la misma empresa u organización. 19
La gestión de secciones de contenidos es la encargada de compartimentar o parcelar los registros de la gestión de contenidos en función de los parámetros que un administrador del webcontrol estipule. De esta manera, cada usuario puede gestionar los contenidos de su parcela. La ficha de un registro tiene un único campo Nombre para indicar cómo se va a llamar la sección de contenido. Al insertar una sección de contenidos, se genera automáticamente un módulo de acceso múltiple con el nombre C. nombre de la sección de contenidos y a través de la gestión de usuarios o la gestión de grupos se podrá elegir el acceso de cada usuario o grupo a ésta. Gestión de contenidos de sistema Existen una serie de contenidos que tienen una ubicación predefinida ajena a la gestión de estructura, como por ejemplo el contenido de accesibilidad o el documento legal. No obstante su funcionamiento es idéntico al de la gestión de contenidos, excepto que no se pueden insertar ni eliminar, sólo modificarlos. 20
Contenidos Dentro de la sección Contenidos está la gestión de: Imágenes. Documentos. Flash. Vídeos. Contenidos generales. Imágenes El editor de textos ofrece la posibilidad de incluir imágenes como parte de su estructura. Dichas imágenes han de almacenarse previamente en webcontrol a través de este módulo. La búsqueda de imágenes puede realizarse de dos maneras: Navegando a través del explorador de carpetas: 1. Buscador. Acceso a la búsqueda de imágenes por patrones de texto. 21
2. Directorio de carpetas. Al presionar el botón derecho sobre una carpeta se muestran dos opciones: a. Creación de una subcarpeta, que una vez generada ya no se podrá modificar su nombre. b. Eliminación de la carpeta. La eliminación sólo se puede hacer si la carpeta está vacía. 3. Listado de imágenes de la carpeta que está seleccionada actualmente. 4. Captura de la imagen a 50 pixels de ancho y alto junto con el nombre que se le haya dado, fecha de creación y palabras clave para la búsqueda de esta imagen que se explica en el siguiente apartado. 5. Borrado de la imagen y acceso a la ficha del registro. Una imagen no se puede borrar si está siendo utilizada en alguna gestión de webcontrol. En el caso contrario, no aparecerá la opción. Utilizando la búsqueda de imágenes por patrones de texto En caso de que el usuario no recuerde en que carpeta está ubicada cierta imagen, puede buscarla a través de su titulo y de sus palabras clave. 1. Acceso a la búsqueda de imágenes por carpetas. 2. Campo para introducir el criterio de búsqueda. 3. Listado de resultados de búsqueda. 22
Al acceder a la ficha del registro se muestra la siguiente información, siendo obligatorios los que están acompañados de un asterisco *: * Título. Palabras clave, que se utilizan en la búsqueda por patrones de texto. * Archivo original, imagen que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. Una vez seleccionada la imagen se puede establecer el tamaño al que se desea tratarla, pudiendo dejarla a tamaño libre, a tamaño pequeño (125 pixels de ancho por el alto proporcional) o a tamaño grande (375 pixels de ancho por el alto proporcional). Archivo adjunto, imagen que se ve en front del portal al hacer clic sobre la imagen adjunta. Queda en manos del usuario asignar imágenes de dimensiones apropiadas. Uso de imagen, donde se muestran los registros de las gestiones en los cuales está insertada la imagen. 23
Documentos El editor de textos ofrece la posibilidad de enlazar documentos como parte de la información a mostrar. Dichos documentos han de almacenarse previamente en webcontrol a través de este módulo. Tanto la estructura de árbol de directorios como la información mostrada en el listado de documentos son exactas a la descrita en la gestión de imágenes. En el listado de documentos de una carpeta se muestra un icono representativo del tipo de documento (Word, pdf, Excel, etcétera ). La ficha de detalle de un documento consta de la siguiente información. Los campos obligatorios son los que están acompañados de un asterisco *: 1. Título. 2. Palabras clave, que se utilizan en la búsqueda por patrones de texto. 24
3. Descripción, para especificar información útil para el usuario que se descargue el documento desde el front. 4. Compartido: Sí/ No. 5. * Documento que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. 6. Comentario, información interna sobre el documento. 7. Versiones del documento, por cada registro de la gestión de documentos se pueden almacenar varias versiones del mismo documento, ante la posibilidad de que se requiera modificar su información a menudo o se hayan encontrado errores en versiones anteriores. El documento que se descarga desde el front es aquel que esté marcado como activo. 8. Portada, al descargar un documento desde el front se accede a una pantalla en la que se puede incluir una imagen personalizada para ese documento. En caso de no subir ninguna imagen, aparece una imagen por defecto. 9. Uso del archivo, donde se muestran los registros de las gestiones en los cuales está enlazado el documento. Por cada registro de la gestión de documentos se pueden almacenar varias versiones del mismo documento, ante la posibilidad de que se requiera modificar su información a menudo o se hayan encontrado errores en versiones anteriores. El documento que se descarga desde el front es aquel que esté marcado como activo. Flash El editor de textos ofrece la posibilidad de incrustar películas flash como parte de la información a mostrar. Dichas películas han de almacenarse previamente en webcontrol a través de este módulo. Tanto la estructura de árbol de directorios como la información mostrada en el listado de películas flash son exactas a la descrita en la gestión de imágenes. La ficha de detalle de una película flash consta de la siguiente información, siendo obligatorios los datos acompañados de un asterisco *: 25
* Título. Palabras clave, que se utilizan en la búsqueda por patrones de texto. Descripción, para especificar información útil para el usuario que visualice la película desde el front. Compartido: Sí/ No. * Archivo que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. Argumentos, para configurar las propiedades de la películas flash: o Ancho. o Alto. o Color de fondo. o Parámetros. Uso del archivo, donde se muestran los registros de las gestiones en los cuales está incrustada la película. Vídeos El editor de textos ofrece la posibilidad de incrustar vídeos como parte de la información a mostrar. Dichas películas han de almacenarse previamente en webcontrol a través de este módulo. 26
Tanto la estructura de árbol de directorios como la información mostrada en el listado de películas flash son exactas a la descrita en la gestión de imágenes. La ficha de detalle de una película flash consta de la siguiente información, siendo obligatorios los datos acompañados de un asterisco *: * Título. Palabras clave, que se utilizan en la búsqueda por patrones de texto. Descripción, para especificar información útil para el usuario que visualice la película desde el front. Compartido: Sí/ No. * Archivo que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. Argumentos, para configurar las propiedades de la películas flash: o Ancho. o Alto. o Color de fondo. o Parámetros. o Variables. o Autoinicio. o Volumen. o Transparente. o Ocultar control. o Color de control. Portada: o Archivo que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. Publicidad: o Archivo que el usuario ha de localizar en su ordenador, periféricos o red a través del botón Examinar. o Enlace. 27
o Mensaje. o Volumen. Gestión de contenidos generales Módulo de acceso múltiple destinado a la gestión de los contenidos del webcontrol. Introducción La ficha de un contenido consta de tres partes: Zona de información general, dónde se incluyen los siguientes datos: o Descripción. o Sección, se mantiene desde la gestión de Secciones de contenidos. Ciclo de trabajo con versiones de un contenido El usuario que maneja versiones de un contenido lo hace o bien con perfil de generador o bien con perfil de publicador. Generador: Sólo puede cargar contenido, nunca publicarlo. Publicador: Puede cargar y publicar el contenido generado. La siguiente tabla muestra la relación de tareas que puede realizar en función de su perfil: 28
Guardar versión como modificada La versión guardada en este estado es un mero esbozo de lo que debería ser al final. 29
Guardar versión como pendiente de publicar La versión guardada en este estado debe estar preparada para ser publicada por los usuarios con perfil de publicador. A partir de este momento, el usuario puede previsualizar la versión del contenido y rechazarla sólo si tiene perfil de publicador. Guardar versión como rechazada La versión guardada en este estado ha de retocarse según las indicaciones del 30
campo comentarios. Para comprobar la apariencia también se puede previsualizar. Previsualización de versiones Tras guardar la versión como pendiente de publicar o rechazada se puede previsualizar mediante un enlace que muestra su apariencia en el front precedida de una cabecera con la fecha e idioma de la versión, pudiendo discriminarse la búsqueda por ambos criterios a fin de consultar otras versiones del mismo contenido. Si el usuario tiene perfil de publicador tiene la opción de rechazar o publicar desde esta pantalla. Guardar versión como publicada A partir de este momento no se puede modificar ningún dato de la versión puesto que es susceptible de utilizarse en el front del portal. Aún así, si el usuario desea modificar algún dato, tiene que tener perfil de usuario para poder ocultarla. 31
Vigencia de una versión de contenido en el front del portal Tras mostrar el ciclo de trabajo de la versión de un contenido, es el momento de conocer el sistema de presentación de esa versión en el front del portal basado en sus fechas de aparición y caducidad. Para ello, se presenta el siguiente ejemplo: Se genera un contenido referente a la agenda de un curso que tendrá lugar el 2 y 3 de mayo, cada día se querrá mostrar las actividades que tengan lugar así que se guardan dos versiones de un contenido como publicadas. La primera versión muestra las actividades que se van a celebrar el 2 de mayo día y tiene como fecha de aparición el 1 de abril y como fecha de caducidad el propio 2 de mayo. Se deduce por lo tanto, que esta versión se muestra en el front del portal desde las 00:00:00 horas del 1 de abril hasta el 2 de mayo a las 23:59:59. En ese periodo de tiempo, la segunda versión no se verá en el front del portal porque todavía no se ha alcanzado su fecha de aparición. La segunda versión de ellas muestra las actividades que se van a celebrar el 3 de mayo y tiene como fecha de aparición y caducidad el propio 3 de mayo. Se deduce por lo tanto que esta versión se muestra en el front del portal desde las 00:00:00 horas del 3 de mayo hasta las 23:59:59. En ese periodo de tiempo, la primera versión no se verá en el front del portal por que ya se ha sobrepasado su fecha de caducidad. Existen casos de coincidencia de versiones en el tiempo que pueden inducir a errores a la hora de configurar su vigencia en el front del portal. Se presentan a continuación junto con su resolución: o Si dos versiones tienen la misma fecha de aparición se muestra en el front del portal la versión que se haya publicado más recientemente. o Si se ha especificado una fecha de aparición pero no de caducidad, ésta versión no caduca nunca. Diferencias entre gestión de contenidos generales y gestión de contenidos por secciones A pesar de tener grandes semejanzas es necesario conocer sus diferencias. 32
33
webcontrol Manual del Editor de Textos un producto de 34
EDITOR DE TEXTOS Conocemos por editor de textos de webcontrol a la herramienta encargada de generar los textos enriquecidos que nutrirán al portal de la información que se desee mostrar a los usuarios que lo visiten. Aunque su manejo es similar al de los procesadores de textos del mercado (Microsoft Office Word, Open Office, etcétera ), presenta una serie de diferencias con éstos que han de ser tenidas en cuenta por el usuario que vaya a trabajar con el editor de textos: Otros editores de textos Funcionan autónomamente sin necesidad de ejecutar previamente ninguna aplicación. Editor de textos de webcontrol No funciona de manera independiente. Siempre se usa en el contexto de una gestión (gestión de contenidos, gestión de noticias, gestión de agenda de eventos, etcétera). Al guardar un documento generado, se genera un fichero físico en la ubicación que el usuario desee. Generan código basado en HTML, pero con ciertos cambios de acuerdo a sus necesidades, que no garantizan una correcta visualización en otros programas o terminales (PDA, móviles, etcétera) El guardado de información se hace en una base de datos. El código generado cumple el estándar XHTML 1.0 propuesto por el W3C (Consorcio World Wide Web). Favorece la correcta visualización en múltiples navegadores y terminales. Comenzando a manejar el editor de textos A continuación se detallarán las tareas a realizar con el editor de textos, no sin antes explicar unas nociones generales para garantizar su correcto uso. 35
Nociones generales Manual de usuario Partes del editor de textos En la figura 1 se muestra el editor de textos tal y como aparece tras haberlo abierto desde una gestión del webcontrol. Por defecto aparece una plantilla o maquetación predefinida que ayudará al usuario a generar textos enriquecidos de acuerdo a la línea gráfica del portal. Figura 1. Pantalla inicial. El editor de textos se compone de cuatro partes. Son las siguientes: Botonera: situada en la cabecera de la página, en ella se muestran todos los controles necesarios para generar textos enriquecidos. Figura 2. Botonera. 36
Zona de edición: situada en el centro de la página, muestra la información generada con el editor de textos. Figura 3. Zona de edición. Menús contextuales: permiten gestionar las distintas partes de un texto enriquecido. Para activarlos, se sitúa el puntero del ratón en la zona de edición y se hace clic con el botón derecho del ratón sobre la zona que se desee. Figura 4. Menú contextual de una imagen. Compás o migas de pan: muestra información sobre la ubicación del puntero del ratón cuando está en la zona de edición. Se muestra jerárquicamente, de fuera hacia dentro, y haciendo clic en un elemento de la jerarquía aparecerá seleccionado en la zona de edición. Figura 5. Compás o migas de pan. Manejo básico del editor de textos Las plantillas se reconocen por sus bordes son de color rojo y punteado. Al hacer doble clic en cualquier parte de una plantilla se podrá comenzar a escribir, insertar imágenes, tablas, etcétera. 37
Cada vez que se pulse la tecla enter en la zona de edición se genera un párrafo, que se distingue por su borde azul y punteado. En caso de pulsar las teclas shift + enter no se genera un nuevo párrafo, sino que se genera un salto de línea dentro del mismo párrafo. En la figura 6, se muestran un ejemplo de texto enriquecido en el que conviven una plantilla (borde rojo punteado) con varios párrafos en su interior (borde azul punteado). Figura 6. Plantilla y párrafos. Por defecto, en la botonera aparecen desactivados los controles de creación de etiquetas, enlaces a contenidos, enlace a documentos, enlace a puntos de menú, enlaces externos. Para activarlos, ha de haber una porción de texto seleccionada (ver figuras 7 y 8) Figura 7. Botonera con controles desactivados por defecto. Figura 8. Botonera con controles activados al haber texto seleccionado. 38
Controles del editor de textos Manual de usuario Se detalla a continuación el funcionamiento de cada control de la botonera, así como su interacción con la zona de edición. Nuevo texto Tras confirmar que se desea borrar el texto enriquecido actual se borra la información que haya en la zona de edición. Figura 9. Mensaje de confirmación al presionar el control nuevo texto Guardar Muestra un mensaje recordando que se ha de guardar también el contenido de la ficha de webcontrol. Al guardar, se eliminan todos los párrafos vacíos y se comprueba que el texto enriquecido cumple el estándar XHTML 1.0. Figura 10. Mensaje de alerta al presionar el control guardar Previsualizar Muestra en una ventana emergente el texto enriquecido actual adecuado a la línea gráfica del portal. 39
Figura 11. Ventana emergente con la previsualización del texto enriquecido. Código fuente Muestra el código fuente del texto enriquecido actual. Figura 12. Código fuente del texto enriquecido. Buscar Localiza una porción de texto. Se puede buscar de arriba hacia abajo o viceversa, así como marcar una búsqueda exacta, teniendo en cuenta mayúsculas y minúsculas. 40
Figura 13. Búsqueda de textos. Reemplazar Localiza y/o sustituye porciones de texto, pudiendo hacerse de arriba hacia abajo o viceversa, así como marcar una búsqueda o sustitución exacta, teniendo en cuenta mayúsculas y minúsculas. Figura 14. Búsqueda y sustitución de textos. Deshacer/Rehacer Recupera el estado anterior o previo al actual. En caso de no existir paso posterior, el control rehacer aparecerá desactivado. Cortar/Copiar Elimina o copia porciones de la zona de edición (texto, imágenes, tablas, plantillas, etcétera). Pegar con formato/como texto plano/ desde Word Se usa el primer control, cuando peguemos información extraída desde otro editor del webcontrol. El segundo control se usa cuando la fuente de datos a pegar es ajena a 41
webcontrol. No se pegan los saltos de línea, párrafos, tablas y formatos de los textos que tenga dicha fuente de datos. El tercer control es una mejora del pegado de texto plano. Pega los saltos de línea, los párrafos y listas si la fuente de datos es Microsoft Office Word. Quitar formato/limpiar código El primer control elimina el formato que tenga una porción de texto. El segundo control, revisa si el texto enriquecido cumple el estándar XHTML 1.0. Esta misma función se ejecuta cada vez que se guarda el editor de textos. Negrita/Cursiva Cambian el formato del texto seleccionado. Insertar plantillas personalizadas A través de este control se puede generar una plantilla personalizada e introducirla en la zona de edición. Figura 15. Pantalla de generación de plantillas personalizadas. Estos son los datos que componen una plantilla personalizada: Ancho en %: Este campo es requerido y ha de tener valores comprendidos entre 1 y 100. 42
Alto de la plantilla. Color de fondo: se selecciona entre dos colores afines a la línea gráfica del portal. Alineación de la plantilla, bien a la izquierda o a la derecha. Alineación del texto que se vaya a introducir en el interior de la plantilla Borde, del que se deben indicar sus pixels de grosor, su color de fondo y su formato, así como a qué bordes de la plantilla se aplican los cambios. Contorno, para indicar la distancia entre el borde de la plantilla y el texto que va a contener. Margen: para indicar la distancia entre el borde de la plantilla y lo que haya hacia fuera. Estas plantillas pueden ser modificadas haciendo clic sobre uno de sus bordes con el botón derecho del ratón y seleccionando la opción Modificar sección. Insertar plantillas predefinidas Muestra una ventana en la que se pueden introducir los siguientes tipos de plantillas: Plantillas predefinidas, generadas de antemano de acuerdo a la línea gráfica de del portal. Plantillas de usuario: generadas por los usuarios del webcontrol que tengan acceso a la gestión de plantillas del editor. Plantillas generales: también generadas de antemano, son bastante más básicas que las predefinidas. Por defecto, aparecen las plantillas predefinidas (ver figura 16). Al hacer clic sobre el nombre de una de ellas, a la derecha aparecerá su apariencia al 50% del tamaño original. Pulsando el botón Aceptar, la plantilla seleccionada se insertará en la zona de edición del editor de textos. Este funcionamiento es el mismo para las plantillas de usuario y las generales. 43
Figura 16. Pantalla de generación de plantillas predefinidas, de usuario y generales. Las plantillas predefinidas no se pueden modificar en ningún caso. A continuación, pasamos a detallar cada una de las plantillas de predefinidas: Página de inicio. Interior a dos columnas. Interior al 100%. Destacados en zona derecha. Sumario. Subhome. Caja fondo gris. Caja para imagen. Honoris causa ficha o para datos de contacto. Interior dos columnas sin línea vertical. 44
Página de inicio Plantilla destinada para la página y que sólo puede usarse para la misma, debido a sus dimensiones y diseño ya predefinido para ella. Esta plantilla está formada por dos columnas, izquierda y derecha. La columna de la derecha, comienza con una imagen a modo de cabecera, que se cambiará al gusto. En la columna de la derecha se encuentra un cuadro de texto con fondo negro, en el que va el texto que apoya a la imagen de cabecera de la columna de la izquierda. En la parte inferior, se encuentran destacados. 45
Interior dos columnas Plantilla a dos columnas, usada para contenidos generales. Destacamos la caja de sumario que va situada en la columna de la izquierda. Interior al 100% Plantilla a una columna, que ocupa el 100% del espacio destinado a contenido. 46
Destacados en zona derecha Módulo para destacar contenido que va situado en la columna de la derecha de alguna de las plantillas que van a dos columnas. El módulo va encabezado por una imagen, que es de libre elección insertarla o no. Introducido el módulo en la columna de la derecha de una plantilla, su visualización es la siguiente: 47
Sumario Módulo a insertar en la columna de la derecha de las plantillas que van a dos columnas. A través del sumario podremos hacer enlaces entre contenidos y estructurar mejor la información. Introducido el módulo en la columna de la derecha de una plantilla, su visualización es la siguiente: 48
Subhome Plantilla al 100% con diseño predifinido, que se usa para mostrar de una forma más visual y organizada los contenidos que forman el apartado o los puntos a destacar dentro del punto principal. Caja fondo gris Recurso utilizado para destacar contenido relevante. Consiste en un módulo con un fondo gris. Este módulo debe insertarse en cualquiera de las plantillas de las que disponemos. 49
Caja para imagen Modulo que incluye una imagen que se ajusta al tamaño destinado para la misma dentro de una plantilla. Esta plantilla siempre debe ir dentro de otra, nunca sola. Honoris causa ficha o para datos de contacto Cómo su nombre indica esta plantilla es la que se usa en las fichas de los honoris causa como también para los datos de contacto. Plantilla a dos columnas, estando la columna de la izquierda destinada al contenido y la de la derecha al sumario, imagen, destacados... cualquiera de los recursos que nos ofrecen. 50
La visualización en el front sería la siguiente. Interior dos columnas sin línea vertical Plantilla a dos columnas que como su nombre indica no tiene barra separadora vertical entre la columna de la derecha y la de la izquierda. 51
Tablas Con este control, se gestiona el manejo de las tablas, así como las celdas y filas que las conforman. Al activar el control, aparece una ventana para configurar las propiedades de la tabla. Son las siguientes: Título, aparece por encima de la tabla cuando si se especifica. Resumen, sobre la información que va a mostrar la tabla. Ancho, dato requerido y comprendido entre 1 y 100 Columnas y filas, para definir una apariencia inicial Figura 17. Pantalla de configuración de propiedades de una tabla. 52
Una vez introducida la tabla en la zona de edición, haciendo clic con el botón derecho sobre una celda de la tabla, aparecen las siguientes opciones: Cortar y copiar fila Pegar fila antes y después Incrustar tabla Propiedades de la tabla Propiedades de la celda Eliminar tabla Propiedades de la fila Insertar una fila antes y después Eliminar fila Insertar una columna antes y después Eliminar columna Dividir celdas Combinar celdas Figura 18. Menú contextual con las opciones de una tabla. De todas las opciones mostradas anteriormente, se hace especial hincapié en las siguientes: Propiedades de la fila: al activar este control, se muestra una ventana para configurar la fila sobre la que se encuentra el puntero. Consta de los siguientes datos: o Tipo de fila, pudiendo especificarse que sea de cabecera o normal (cuerpo de la tabla). Ambos tipos tendrán apariencias diferentes. o Color de fondo, a elegir entre dos colores de acuerdo con la línea gráfica del portal. o Aplicar cambios, a elegir entre la fila actual, las filas pares, las filas impares o todas las filas de la tabla. 53
Figura 19. Propiedades una fila Propiedades de la celda: al activar este control, se muestra una ventana para configurar la celda sobre la que se encuentra el puntero. Consta de los siguientes datos: o Tipo de celda, pudiendo especificarse que sea de cabecera o normal (datos) o Alcance: para crear referencias entre las celdas de datos y las celdas cabeceras, pudiendo especificar los valores de fila o columna. Esta referencia sólo se necesita si la celda es de cabecera. o Color de fondo, a elegir entre dos colores de acuerdo con la línea gráfica del portal. o Aplicar cambios, a elegir entre la celda actual, las celdas de la fila actual o todas las celdas de la tabla. 54
Figura 20. Propiedades una celda. Combinar celdas: el puntero tiene que estar ubicado en la primera celda que se vaya a combinar si se desean combinar columnas, o en la celda de la primera fila que se vaya a combinar si se desean combinar filas. En la pantalla de configuración se especificará el alcance de filas y columnas a combinar. Figura 21. Combinación de celdas. Las tablas no se han de considerar como un elemento de maquetación. Se aconseja el uso de tablas cuando se desee presentar datos estructurados. (Ver figura 22) Figura 22. Ejemplo de uso de tabla. Encabezados Un encabezado es una palabra o frase que da a conocer el nombre o asunto de cada una de las partes o divisiones de la zona de edición. Se recomienda su 55
uso pues cada parte tiene una mayor o menor relevancia dependiendo del nivel que ocupe dentro de la lógica del texto. Con este control, se administran los 10 encabezados susceptibles de ser utilizados en la zona de edición del editor de textos. Cada uno de ellos tiene la apariencia estipulada por la línea gráfica. Para insertar un encabezado en la zona de edición, basta con hacer clic sobre él y presionar el botón Aceptar. Figura 23. Pantalla de inserción de encabezados Etiquetas semánticas Aplicada al desarrollo web, cuando se habla de etiquetas semánticas nos referimos al significado que tienen las etiquetas que se ocupan del marcado del código. Con este control, se administran las 9 etiquetas susceptibles de ser utilizadas en la zona de edición del editor de textos. Cada una de ellas tiene la apariencia estipulada por la línea gráfica. 56
Para insertar una etiqueta en la zona de edición, basta con hacer clic sobre él y presionar el botón Aceptar. Sólo hay una excepción, el acrónimo, que además de seleccionarlos, habrá que especificar su significado. Figura 24. Pantalla de inserción de etiquetas semánticas Listas Existen 3 tipos de listas: No ordenadas, que son aquellas en las que el orden de sus elementos no es relevante. Ordenadas, aquellas en las que el orden de sus elementos si importa. Este control permite introducir en la zona de edición cualquiera de los tres tipos citados anteriormente. Muestra dos apariencias para listas no ordenadas y una apariencia para listas ordenadas y de definición. Para insertar una lista en la zona de edición, basta con hacer clic sobre ella y presionar el botón Aceptar. 57
Figura 25. Pantalla de inserción de listas. Una vez introducida la lista en el editor, podemos hacer varias operaciones con ella: Si se presiona la tecla enter se genera un nuevo elemento de lista. Si se presiona la tecla enter sobre un elemento vacío de la lista, el puntero sale de ella. Si se presionan la combinación de teclas shift + enter, el puntero continua en el mismo elemento de la lista, pero una línea por debajo. 58
Imágenes Este control muestra las imágenes que previamente han sido cargadas en la gestión de imágenes del webcontrol. Figura 26. Pantalla de inserción de imágenes. Tras localizar la imagen que se desea insertar, se ha de presionar el botón con forma de clip situado a la derecha de cada imagen. La imagen seleccionada pasará a la parte inferior de la pantalla donde se configurarán sus propiedades de borde, alineación y etiqueta o texto alternativo. Esta operación podrá repetirse tantas veces como sea necesario hasta que se presione el botón Aceptar, momento en el cual se insertará la imagen en la zona de edición. 59
Figura 27. Pantalla de inserción de imágenes durante la configuración de las propiedades de la imagen. Una vez introducida la imagen en la zona de edición, haciendo clic con el botón derecho sobre ella, aparecen las siguientes opciones: Crear enlace a contenido Crear enlace a documento Crear enlace a punto de menú Crear enlace Propiedades de imagen Figura 28. Menú contextual de una imagen. 60
Las 4 primeras opciones serán explicadas más adelante, pero haciendo clic en la opción Propiedades de imagen, se podrán configurar los datos de la imagen. Figura 29. Propiedades de una imagen. Películas flash Este control muestra las películas flash que previamente han sido cargadas en la gestión de películas flash de webcontrol. Figura 30. Propiedades de una imagen. Tras localizar la película flash que se desea insertar, se ha de presionar el botón con forma de clip situado a la derecha de cada registro. 61
Aplicaciones Este control permite incrustar en el interior de la zona de edición aplicaciones o programas generados con antelación (gestión de noticias, formulario de contacto, etcétera). Figura 31. Pantalla de inserción de aplicaciones. Por defecto aparecerá un buscador con la misma apariencia que los buscadores de webcontrol. Al buscar aparecerán todas las aplicaciones. Para incrustar una aplicación se ha de presionar el botón con forma de clip situado a la derecha de cada registro del listado. La aplicación incrustada no funcionará en la zona de edición, sino que se mostrará una captura de ella. Enlace a contenidos Este control permite enlazar una porción de texto o una imagen a un contenido generado previamente en la gestión de contenidos del webcontrol. 62
Figura 32. Pantalla de gestión e enlace a contenidos. Tras localizar el contenido que se desea enlazar, se ha de presionar el botón con forma de clip situado a la derecha de cada registro del listado. En la parte inferior de la pantalla aparecerá el enlace generado y se configurará la etiqueta o texto alternativo del enlace. Esta operación podrá repetirse tantas veces como sea necesario hasta que se presione el botón Aceptar, momento en el cual se insertará el enlace en la zona de edición. Para enlazar una imagen a un contenido, se ha de seleccionar la imagen y al hacer clic con el botón derecho aparecerá un menú contextual con la opción Crear enlace a contenidos entre otras. Su funcionamiento es el mismo que el explicado con anterioridad. 63
Enlace a documentos Este control permite enlazar una porción de texto o una imagen a un documento generado previamente en la gestión de documentos del webcontrol. Figura 33. Pantalla de gestión de enlace a documentos. Tras localizar el documento que se desea enlazar, se ha de presionar el botón con forma de clip situado a la derecha de cada registro del listado. En la parte inferior de la pantalla aparecerá el enlace generado y se configurará la etiqueta o texto alternativo del enlace. Esta operación podrá repetirse tantas veces como sea necesario hasta que se presione el botón Aceptar, momento en el cual se insertará el enlace en la zona de edición. 64
Para enlazar una imagen a un documento, se ha de seleccionar la imagen y al hacer clic con el botón derecho aparecerá un menú contextual con la opción Crear enlace a documentos entre otras. Su funcionamiento es el mismo que el explicado con anterioridad. Enlace a punto de menú Este control permite enlazar una porción de texto o una imagen a un punto de menú generado previamente en la gestión de estructura del webcontrol. Figura 34. Pantalla de gestión de enlaces a puntos de menú. Tras localizar el punto de menú que se desea enlazar, se ha de presionar el botón con forma de clip situado a la derecha de cada registro del listado. En la parte inferior de la pantalla aparecerá el enlace generado y se configurará la etiqueta o texto alternativo del enlace y si se desea abrir ese enlace bajo protocolo seguro. Esta operación podrá repetirse tantas veces como sea 65
necesario hasta que se presione el botón Aceptar, momento en el cual se insertará el enlace en la zona de edición. Para enlazar una imagen a un punto de menú, se ha de seleccionar la imagen y al hacer clic con el botón derecho aparecerá un menú contextual con la opción Crear enlace a punto de menú entre otras. Su funcionamiento es el mismo que el explicado con anterioridad. Enlaces generales Este control permite enlazar una porción de texto o una imagen a un enlace externo al portal, a un enlace interno o a una cuenta de correo electrónico. Figura 35. Pantalla de gestión de otros enlaces. La pantalla consta de un formulario con los siguientes datos: Dirección del enlace Tipo de enlace, pudiendo ser: o Interno: el campo Dirección del enlace ha de comenzar obligatoriamente por / para hacer referencia a la raíz del portal. 66
o Externo: el campo Dirección del enlace ha de comenzar por http://, https:// o ftp:// o Correo electrónico: el campo dirección del enlace ha de contener una dirección de correo electrónico correcta. o Ancla: el campo dirección tendrá ha de comenzar por # Título del enlace Anclas, que mostrará una lista de todas las anclas que haya en la zona de edición. Abrir en ventana nueva Código del idioma, para indicar el idioma de la página a la que se enlaza. El código se establece con dos caracteres (es, en, fr, etcétera). Para enlazar una imagen a un enlace general, se ha de seleccionar la imagen y al hacer clic con el botón derecho aparecerá un menú contextual con la opción Crear enlace entre otras. Su funcionamiento es el mismo que el explicado con anterioridad. Quitar enlaces Este control quita cualquier tipo de enlace que tenga el texto. Para quitarlo, basta con ponerse encima del enlace, sin seleccionarlo y presionar el botón Quitar enlace. Para quitar el enlace a una imagen, se ha de seleccionar la imagen y al hacer clic con el botón derecho aparecerá un menú contextual con la opción Quitar enlace entre otras. Su funcionamiento es el mismo que el explicado con anterioridad. 67
Anclas Este control permite generar un ancla en la zona de edición, para luego poder hacer referencia a ella desde la gestión de enlaces generales explicada con anterioridad. Figura 36. Pantalla de gestión anclas. Una vez introducida el ancla, en la zona de edición se reconocerá mediante un icono como el que se muestra en la figura 36 Figura 37. Ejemplo de ancla insertada en la zona de edición. Caracteres especiales A partir de este control, se podrán introducir una seria de caracteres especiales (símbolo del euro, copyright, etcétera). Haciendo clic sobre el carácter deseado, éste se insertará en la zona de edición. 68
Figura 38. Pantalla con la gestión de los caracteres especiales. 69
GLOSARIO Aplicación: programa predefinido susceptible de ser incrustado en el editor de textos de una gestión de webcontrol. Dicho programa no es mantenible por el usuario, es decir, su maquetación y el funcionamiento están predeterminados. Back ó back-end: es la parte del portal que visualiza los gestores de éste. Contenido: información generada con el editor de textos de la gestión de contenidos de webcontrol. Dicha información puede contar con los siguientes elementos: Negritas y cursivas. Colores de fuente y de fondo. Viñetas y listas numeradas. Completa gestión de tablas: Bordes, celdas, filas, columnas, combinación y separación de celdas, anchos y altos en pixels y porcentaje. Enlaces internos y externos. Anclas. Inclusión de imágenes y enlaces a ficheros. Estilos y fuentes de letra. Inclusión de aplicaciones de webcontrol (noticias, agenda). Content Management System (CMS): nombre con el que se denomina a la aplicación informática que permite llevar a cabo la gestión de la información relacionada con un portal web. Front o front-end: también denominado front end, es la parte del portal que visualiza el usuario navegante. 70
Meta tags: etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para el usuario, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información. Publicación / despublicación de datos: acciones que permiten hacer visibles o no visibles respectivamente en el front del portal los datos del registro de un módulo de acceso múltiple. 71