UNIVERSIDAD

DE CALDAS

MANUAL DEL PORTAL WEB DE LA FACULTAD DE

INGENIERÍA V 1.0

Contenido

Descripción del portal .................................................................................................... 3

Estructura del Portal ...................................................................................................... 3

Menú superior ............................................................................................................... 3

Banner ........................................................................................................................... 3

Breadcrumbs ................................................................................................................. 3

Menú principal .............................................................................................................. 4

Detalles menú principal ................................................................................................ 4

Noticias ......................................................................................................................... 4

Contenido ..................................................................................................................... 4

Búsqueda ...................................................................................................................... 4

Barra izquierda ............................................................................................................. 4

Chat ............................................................................................................................... 4

Gestión de usuarios ......................................................................................................... 4

Administrador Web y Decanatura ................................................................................ 4

Directores de programa ................................................................................................ 4

Directores de cada departamento .................................................................................. 5

Estándares del portal ..................................................................................................... 5

Creación de artículos ...................................................................................................... 5

Edición de artículos ........................................................................................................ 9

Botones de edición ..................................................................................................... 10

Tablas ......................................................................................................................... 13

Crear noticias ................................................................................................................ 17

Integrar documentos PDF............................................................................................ 21

Descripción del portal

El portal web de la facultad de ingeniería se encuentra construido con el sistema de

gestión de contenidos joomla 1.6.x, cuenta con variados módulos, componentes y

pluggins para facilitar la navegación y acceso oportuno a la información.

Estructura del Portal

El portal se encuentra estructurado de la siguiente forma:

Menú superior

El menú superior cuenta con opciones como el mapa del portal web en donde se

muestran todos los módulos del portal en una sola página, los contactos con su

información básica, vinculo a las opciones de extensión, el portafolio de la facultad de

ingeniería y un vínculo a la página principal del portal.

Banner

Espacio reservado para la imagen de la facultad de ingeniería, esta imagen no debe

ocupar demasiado espacio con el fin de poder ofrecer más visualización al contenido de

las opciones que el usuario quiere consultar.

Breadcrumbs

El espacio reservado para el breadcrumb o más conocido como “migajas de pan” sirve

de orientación para marcar la ruta que lleva un usuario desde la página inicial hasta la

página en la que se encuentra actualmente, mejorando la accesibilidad y usabilidad del

portal.

Menú principal

Menú que alberga todas las opciones de los módulos que contiene el sistema, con el fin

de previsualizarlas sin necesidad de recargar la página, este menú cuenta con los

siguientes módulos: Nuestra facultad, Decanatura, Oferta académica, Departamentos,

Investigación, Centro de investigación, Egresados, Estudiantes y Aspirantes.

Detalles menú principal

Cuando se accede a uno de los módulos del menú principal, las opciones de ese módulo

se despliegan en esta zona, permitiéndole al usuario tener un acceso más directo a la

información detallada que desea consultar.

Noticias

Esta sección solo aparece en la página principal del portal, en este módulo se publican

las noticias que la facultad requiera difundir.

Contenido

Espacio en donde se detalla la información consultada por el usuario en los diferentes

módulos ofrecidos por el portal.

Búsqueda

Casilla para realizar búsquedas directas, de la información que el usuario desee

consultar.

Barra izquierda

Esta zona maneja módulos de forma dinámica, acá se puede acceder al sistema con un

nombre de usuario y contraseña, muestra la lista de usuarios que están en línea, vínculos

a las redes sociales en las que se encuentra la facultad, encuestas activas, entre otros.

Chat

Cuando un usuario autorizado ingresa al sistema, puede establecer conversación con

otro usuario en línea mediante un chat tipo Facebook que se muestra en la parte inferior

del portal.

Gestión de usuarios

La información del portal es administrada por usuarios con diferentes niveles de acceso.

Administrador Web y Decanatura

Administran toda la información del portal, pueden editar información tanto en el

backend como en el frontend del sistema.

Directores de programa

Administran la información relacionada con los programas de la facultad, cada director

de programa tiene acceso a su propio contenido y solo puede modificar esta información

desde el frontend del portal.

Directores de cada departamento

Administran la información relacionada con los departamentos de la facultad, cada

director de departamento tiene acceso a su propio contenido y solo puede modificar esta

información desde el frontend del portal.

Estándares del portal

Es conveniente que la información que se trate en el portal, armonice con el esquema

inicialmente planteado en esta primera versión, la fuente tipográfica para el texto es

Times New Roman, y el tamaño de la fuente es de 12, el color del texto no es necesario

modificarlo ya que las hojas de estilo de la plantilla del portal, relacionan el color

adecuado a la plantilla, en cualquier caso, el editor tiene total autonomía para modificar

el contenido a sus requerimientos.

La página integra el color asociado a la facultad de ingeniería, recomendado por el

manual de identidad institucional de la Universidad de Caldas.

Creación de artículos

Para la creación de los artículos es necesario obtener una cuenta que permita acceder al

backend del portal.

Para acceder al backend del portal, ingresamos la siguiente dirección en el explorador

web: http://ingenieria.ucaldas.edu.co/portal/administrator/, el portal nos mostrará

una nueva interfaz en la que podemos ingresar el nombre de usuario y contraseña

asignado.

Luego de ingresar los datos correctos, estaremos en el backend, frente al panel de

control del portal. Para crear un artículo, accedemos a la pestaña de contenido, luego en

la opción “Gestor de Artículos”, seleccionamos “Añadir nuevo artículo”.

La interfaz para la creación de artículos ofrece variadas opciones, se destacan a

continuación las más relevantes.

El primer valor con el que nos encontramos, es el título del artículo, le sigue en la parte

inferior el “Alias”, que puede llevar el mismo nombre del artículo.

La opción de categoría, permite agrupar los artículos de forma ordenada, de manera que

pueda ser fácilmente ubicado cuando se requiera asignarle el artículo a algún módulo, el

portal viene prediseñado con algunas categorías que agrupan los diferentes contenidos.

Si se ha creado un artículo para publicarlo en la sección de noticias, se debe categorizar

en su correspondiente categoría “Noticias”, y de la misma manera para el resto de los

artículos que se crean para algún tema específico.

La opción “JSTATUS” debe conservar su estado por defecto “Publicado” para poder ser

visualizado, la opción “Acceso” permite restringir que grupo de usuarios pueden

acceder al contenido del artículo, por defecto es público, así, cualquier usuario puede

visualizar el contenido, también se encuentra el acceso para grupos de usuarios

“Registrado”, en donde solo aquellos usuarios que se encuentren registrados y

logueados en el portal, podrán visualizar el contenido del artículo.

La opción “Permissions” administra la forma como los grupos de usuarios pueden

interactuar con el artículo, ya sea para editarlo, publicarlo, entre otras características,

suele dejarse por defecto, ya que los permisos asignados a los grupos en el portal son

suficientes para la interacción con los artículos.

El campo “Características” debe dejarse en el estado por defecto “No”, ya que el portal

cuenta con su propio artículo característico o destacado.

En la interfaz de la parte inferior, se administra el texto del artículo, en este punto va la

información que visualizara el usuario, en este link esta la guía para creación y edición

de este contenido.

Para completar la creación del artículo, es necesario asignarle un autor.

En el panel derecho de la interfaz de creación de artículos, se puede asignar el autor del

artículo, seleccionando el usuario de la opción “Creado por” en la pestaña “Opciones de

Publicación”.

Las opciones restantes vienen documentadas por el propio portal.

Para visualizar su documentación, se posiciona el Mouse en la opción que se requiere

consultar, y en un cuadro de texto con fondo amarillo claro, se puede verificar la

información relacionada con la opción consultada.

Edición de artículos

El usuario al ingresar al sistema, solo podrá editar los artículos sobre los que tiene

privilegios; para identificarlos, en la parte superior izquierda del artículo, se podrá

visualizar una imagen con un hipervínculo que permite la edición de actual artículo.

El sistema incorpora varios editores de texto WYSIWYG, pero el más recomendable es

el que se conoce como JCE, que se encuentra habilitado por defecto, y del cual se

especificaran las características más importantes a continuación.

El editor ofrece herramientas muy similares a las utilizadas en el Word de Microsoft,

con algunas limitaciones que dependen de la evolución de etiquetas HTML, reglas CSS

y demás, pero sus herramientas dan la posibilidad de crear documentos complejos,

obviando el código HTML y facilitando la creación y edición de documentos Web.

La documentación oficial, hospedada en la página del autor, puede accederse mediante

http://www.joomlacontenteditor.net/support/documentation

Botones de edición

Nombre / Descripción Icono

Editor de Hipervínculos

Avanzado editor de Hipervínculos,

que permite editar y crear links a

sitios externos, archivos, direcciones

email y artículos internos del portal.

Ancla Crear enlace de anclaje.

Negrita(Bold)

Convierte el texto seleccionado en

negrita (Shortcut Key - CTRL+B)

Lista con Viñetas

Crea una lista desordenada de viñetas.

Mapa de caracteres

Muestra un mapa de caracteres

especiales.

Cortar, Copiar, Pegar

Corta, copia y pega texto y HTML,

incluye la opción de pegar como texto

sin formato.

Limpieza de código

Limpia el código HTML de etiquetas

innecesarias.

Direccionalidad

Establece la dirección del texto en una

selección.

Color de fondo de la fuente

Establece el color del fondo sobre un

texto seleccionado.

Color de la fuente

Establece el color del texto

seleccionado.

Selección de Fuente de texto

Aplica la fuente de texto a la

selección.

Tamaño de la fuente

Aplica un tamaño a la fuente

seleccionada.

Selección de Formato

Formato del texto.

Pantalla completa

Cambia el modo edición a pantalla

completa.

Help

Abre un ventana con la

documentación del editor.

Regla Horizontal

Inserta una regla horizontal.

Sangría

Aumenta la sangría

Italic

Convierte el texto seleccionado en

modo italic.

Shortcut Key: CTRL+I

Centrar texto

Centra el texto o elemento

seleccionado.

Justificar

Justifica el texto o elemento

seleccionado.

Justificar a la izquierda

Alinea el texto o elemento

seleccionado a la izquierda.

Justificar a la derecha

Alinea el texto o elemento

seleccionado a la derecha.

Lista Numerada

Crea una lista numerada.

Previsualizar

Vista previa del contenido.

Rehacer

Rehacer la última acción.

Remover Formato

Remueve el estilo y formato de una

selección.

Buscar - Reemplazar

Realiza o reemplaza una búsqueda en

el contenido del editor.

Estilos

Edita los estilos CSS de los

elementos.

Subíndice

Posiciona el texto seleccionado debajo

de la línea base.

Superíndice

Posiciona el texto seleccionado por

encima de la línea base.

Tablas

Crea y edita tablas.

Subrayar

Subraya el texto seleccionado.

Rehacer

Rehace la última acción.

Desvincular

Remueve un vínculo de una selección.

Tablas

Cuando se crea una tabla en el editor, al pasar a vista previa, la tabla no se visualiza,

esto se debe, a que la propiedad “Border” de la tabla se encuentra por defecto en valor

“0”. A continuación veremos varias de las propiedades útiles en la creación de tablas

dentro del editor JCE.

Como primer paso, antes de crear una tabla en el editor, es conveniente habilitar las

líneas de guía (1), que muestran unas líneas punteadas permitiendo identificar la

estructura de la tabla creada, luego creamos la tabla (2).

En la creación de la tabla el parámetro Border debe tener un valor mayor a cero, para

poder visualizarla.

Parámetros como “Alignment” permiten alinear la tabla al centro, izquierda o la

derecha, los parámetros “Cols” y “Rows” definen el número de columnas y numero de

filas de la tabla respectivamente.

En las opciones avanzadas de la tabla, es posible integrar un imagen al fondo de la tabla

con la opción “Background image”, se puede asignar un color al borde (Border color) o

un color al fondo (Background color).

También es posible modificar una celda de la tabla, activando el botón de las

propiedades de las celdas como se ve en la siguiente figura.

Al activar en botón de las propiedades, se puede configurar el contenido de la celda con

propiedades como “Alignment” que permite alinear el contenido a la derecha, izquierda

o al centro de la celda, este tipo de alineamiento es horizontal.

Para alinear el contenido verticalmente, esta la propiedad “Vertical alignment” que

permite alineación del contenido en la parte superior, central o inferior de la celda.

La modificación se puede realizar para actualizar la celda actual, todas las celdas en la

fila desde la celda actual o todas las celdas de la tabla, esta opción esta visible en la

parte inferior de las opciones generales de las propiedades de celda como se muestra en

la imagen siguiente.

En las opciones avanzadas de las propiedades de celda al igual que en la tabla, se puede

configurar una imagen de fondo o color del fondo, y también un color del borde para la

celda.

Crear noticias

El portal de la facultad, cuenta con un módulo para publicar hasta máximo 5 noticias

que solo aparecerán en la página principal.

Para la edición y creación de noticias es necesario que el usuario posea una cuenta que

pueda administrar desde el backend del portal Web, ya que es allí donde se administra

toda la información relacionada con este módulo.

Para acceder al backend del portal, ingresamos la siguiente dirección en el explorador

web: http://ingenieria.ucaldas.edu.co/portal/administrator/

Al acceder, el portal nos mostrara una nueva interfaz con la que podremos ingresar al

backend con un nombre de usuario y una contraseña.

Luego de ingresar los datos correctos, estaremos en el backend, frente al panel de

control del portal. Para acceder al módulo de noticias, abrimos las opciones del menú

“Extensiones” y seleccionamos “Gestor de Módulos”.

Se listaran todos los módulos del portal, en este punto buscamos el modulo “Noticias”,

es necesario verificar que el tipo de módulo corresponda a “HOT Newflash”

Cuando accedemos al modulo noticias, en el panel derecho encontraremos todas las

opciones necesarias para editar su información.

La pestaña “Image Properties” establece el tamaño (en pixeles) de las imágenes que

acompañaran a las noticias, la opción “Linked images” permite establecer en la

imágenes un hipervínculo a la noticia.

La pestaña “Article 1” similar a sus pestañas en la parte inferior, permite editar la

información relacionada con la noticia 1, el título de la noticia se puede ingresar frente

al campo de texto de la opción “Heading of article”, en la opción “Link to full article”

se ingresa el hipervínculo de los detalles de la noticia a la que se hace referencia, este

hipervínculo puede ser interno (artículo creado en el mismo portal) o externo ( artículo

que viene de una fuente ajena al portal),

En el campo de texto de la opción “Article info text”, se ingresa la información

descriptiva de la noticia, esta es la primer información con la que los usuarios tendrán

contacto al ingresar al portal, se recomienda que esta información sea breve y

descriptiva.

Por último para seleccionar la imagen que acompañara la noticia, con el botón

“BUTTON_SELECT” podemos acceder a la interfaz de selección de imágenes.

En esta interfaz se dispone de 3 maneras para publicar una imagen en la noticia que se

está diseñando:

1- En el directorio con el que cuenta el portal de la facultad en su servidor,

inicialmente se muestra la raíz del directorio, pero para la sección de noticias,

existe una carpeta “Fotos_Noticias” en el interior de la “Seccion_multimedia”.

Si la imagen ya se encuentra en la carpeta “Fotos_Noticias”, la seleccionamos y

presionamos en el botón “insertar” en la parte superior derecha.

2- En la opción “URL Imagen” se puede vincular una imagen hospedada en un

servidor externo (ImageShack, ImageVenue, PiXilive, etc.).

3- La tercera opción permite traer una imagen desde el disco duro local, y subirla al

servidor, para luego seleccionarla y publicarla en la noticia que se requiera.

De igual manera se pueden tratar las opciones en los artículos 2, 3, 4 y 5 para publicar

las noticias restantes.

Integrar documentos PDF

El portal se encuentra integrado con el administrador de documentos Isuu que permite

una cómoda visualización de los archivos, además de poder insertar comentarios en el

mismo, la integración de este tipo de documentos en las páginas del portal se describe a

continuación:

1. Es necesario crear una cuenta de usuario en el siguiente

portal: http://issuu.com/ , el acceso se puede lograr mediante una cuenta de

Facebook o creándola en el mismo portal.

2. Lo siguiente será subir el documento que queremos publicar en el portal con la

opción "Upload Document"

3. Luego de subir el documento, accedemos a la opción "My Library" para

visualizar el documento recién subido.

4. En este punto seleccionamos el documento que se quiere integrar (1), y luego la

opción "Embed" (2) para poder acceder al código HTML necesario para integrar

el documento en los artículos del portal.

5. La opción "Embed" nos mostrará un formulario con múltiples opciones de

visualización del documento por lo que se debe seleccionar como primera

medida la opción joomla, luego de configurar estas opciones al gusto propio, se

debe seleccionar el código HTML de la opción "Embed Code" y copiarlo.

6. Para integrar el documento en algún artículo del portal, entramos al modo

edición del artículo (1), se requiere una cuenta de usuario con permisos para

edición sobre ese artículo, de lo contrario, el icono de edición no estará visible

para ese usuario.

Es muy importante seleccionar la opción "[show/hide]" (2) para visualizar el

documento en el código nativo, ya en este estado se procede a pegar en el campo

de texto (3) el código HTML anteriormente copiado, y se guarda la página para

visualizar la integración.

Guardada la página, se puede visualizar el documento directamente en el portal de la

facultad, con todas las adaptaciones visuales que ofrece el portal Isuu sobre el archivo

pdf.